/* CSS Document */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#navi a#pull { display: none; }

.column{float:left;}

@media (min-width:768px){
	.span1 { width:8.333333333333333%;}
	.span2 { width:16.66666666666667%;}
	.span3 { width:25%;}
	.span4 { width:33.33333333333333%;}
	.span5 { width:41.66666666666667%;}
	.span6 { width:50%;}
	.span7 { width:58.33333333333333%;}
	.span8 { width:66.66666666666666%;}
	.span9 { width:75%;}
	.span10 { width:83.33333333333333%;}
	.span11 { width:91.66666666666666%;}
	.span12 { width:100%;}
}
    
@media (max-width:767px){
	.column { float:none; width:100% !important;}
	
	#navi ul { display: none; height: auto; }
	#navi a#pull { display: block; color:#716E6D; text-align:left; background-color: #000; border:1px solid #cccccc; width: 100%; position: relative; height:40px; line-height:40px; padding-left:3.5%; background:url(../images/nav-bg.png) repeat-x center top;}
        #navi a#pull:after{content:""; background: url('../images/nav-icon.png') no-repeat; width: 30px; height: 40px; display: inline-block;position: absolute;right: 15px;top: 10px;}
        #navi a#pull:hover {color:#254A6B;}
        #navi ul {background:#716E6D;}
	#navi li { display: block; float: none !important; width: 100% !important; border-bottom: 1px solid #A3A3A3; }
	#navi li a { text-align:left; font-size:20px !important; padding:0 0 0 20px; height:35px !important; line-height:35px !important; color:#F1F1F1 !important;}
        #navi li a:hover, .active-menu {background:url('../images/hover2.png') no-repeat left center !important; color:#254A6B !important;}
		
		.top-wrapper p {text-align:center;}
}

@media (max-width:696px){
        #banner .slidertext {margin-top:-240px;}
}  

@media (max-width:592px){
        #banner .slidertext {margin-top:-222px;}
}  

@media (max-width:550px){  
		#banner .slidertext {margin-top:-160px;}
		#banner .slidertext img{width:75%; }
		#banner .slidertext a img {max-width:118px !important; }
		#banner .slider .slides img, #banner .banner-bottom img {border:6px solid #aaaaaa;}
}

@media (max-width:360px){ 
		#banner .slidertext img{width:50%; }
		#banner .slidertext {margin-top:-117px;}
		#banner .slidertext .quote { margin-right: 7px; }
}

@media only screen and (max-width : 320px) {
		#banner .slidertext {margin-top:-114px;}
		#banner .slidertext a img {max-width:100px !important; }

}