@media only screen and (min-width : 0px) and (max-width :960px) {
   .contain{
      width: auto;
   }
   #olb{
		margin-top: 1em;   
		font-size: 2em;
   }
    
    
}
@media only screen and (min-width : 0px) and (max-width :780px) { 
    #logo{
        width: auto;
        float: none;
		display: block;
    }
	#topNav{
		position: relative;
		display: block;
		top: auto;	
		margin: 0 0 1em 0;
	}
    nav{
        position: relative;
        clear: both;
        width: 100%;
    }
        nav a{
            background-color: transparent;
        }
}
@media only screen and (min-width : 0px) and (max-width :740px) {
    #topNav{
		display: flex;	
	}

		#topNav li{
			flex-grow: 1;	
		}
		#topNav li a{
			padding: 0 .25em 0 .0125em;
			text-align: center;	
		}
		
				#topNav li a:first-child {
  				padding-left: .25em;
				}
		
				#topNav li a:after {
  				content: " | ";
				}
	nav{
		border: none;	
	}
    #loginBtn {
			display: block;
		}
		
			#loginCancel {
				display: block;	
			}
	#main .contentPage{
		width: 90%;
		margin: auto;	
		float: none;
	}
	aside{
        position: relative;
        width: auto;
		
    }
	#sideInfo{
		width: 100%;	
		padding: 1em 2em;
		margin: 0;
	}
	#sideInfo img{
		
		
		width: 300px;	
		margin: auto;
	}
	
	
	#btmBoxes{
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#63812b+0,d0d9bf+100 */
			background: #63812b; /* Old browsers */
			background: -moz-linear-gradient(top, #63812b 0%, #d0d9bf 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #63812b 0%,#d0d9bf 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #63812b 0%,#d0d9bf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63812b', endColorstr='#d0d9bf',GradientType=0 ); /* IE6-9 */
			padding: 1px 0 0 0;
		}
		.box{
			width: 75%;   
			float: none;
			margin:  2em auto;
		}
		
}
@media only screen and (min-width : 0px) and (max-width :600px) {
	

	
	#logo img{
		width: 50%;
		margin: auto;	
	}

		#topNav li a{/*
			padding: 0 .25em 0 .0125em;*/
			
		}
		
				#topNav li a:first-child {
  				padding-left: .25em;
				}
		
				#topNav li a:after {
  				content: " | ";
				}
			
				
	#sideInfo img{
		
		
		width: 100%;	
	}
		
		#rn{
			background-color: #638129;
			text-align: left;	
		}
		footer .col{
			width: 100%;	
		}
}


@media only screen and (min-width : 0px) and (max-width :320px) {
		#topNav{
		position: relative;
		display: block;
		left: 2%;
		margin: 0 .25em;
		top: auto;	
	}
			#topNav a{
			color: #FFF;
			display: block;
			text-decoration: none;
			padding: 0.1em 1em;
			font-size: 1em;
			font-weight: bold;
			
		}
	

		#footerLogos img {
		padding: 0px; 
			}
			
		.link {
			margin-left: 40px; 
		}
				

			#main .secondary{
			padding: 1em;
			width: 100%;
   			min-height: 550px;
    		background-color: #F8F7F2;
			margin-bottom: 25px;
			
			
}
	
	}

	@media only screen and (min-width : 0px) and (max-width :768px) {
		#loginBtn {
			display: block;
		}
		#olb{
			background-color: rgba(140, 193, 208, 1);	
		}
		#olb {
			display: none;
			left: 5%;
			position: fixed;
			top: 1em;
			width: 90%;
			z-index: 10;
		}
	}