/* ------------------------------------------
  CSS @MEDIA QUERIES FOR MOBILE COMPATIBILITY
--------------------------------------------- */
/*--------------------------------
 MOBILE NAVIGATION
---------------------------------*/
@font-face {
  font-family: "responsivenav";
  src:url("fonts/responsivenav.eot");
  src:url("fonts/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("fonts/responsivenav.ttf") format("truetype"),
    url("fonts/responsivenav.woff") format("woff"),
    url("fonts/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

#toggle, .toggle { display: none; }
.menu > li { list-style: none; float:left;	}

/* Nicolas Gallagher micro clearfix */
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

@media only screen and (max-width: 1170px){
	.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
	.menu > li { display: block; width: 100%; margin: 0; }
	.menu > li > a { display: block; width: 100%; }
	.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; /*user-select: none;*/ }
	#toggle:checked + div .menu { display: block; opacity: 1; z-index:999; margin:10px 0 0;}
}


/*--------------------------------
 Presentation Styles (Editable)
---------------------------------*/

.toggle{ 
	z-index: 999; 
}

@media only screen and (max-width: 1170px){
	
	.menu, .menu > li, .menu > li > a{
		height: auto;
		font-size:16px !important;
		border-right:none;
	}
	
	.menu > li > a{
		padding: 4px 20px !important;
	}
	
	.menu > li > a:hover, .menu > li > a:focus{
		background: #F2F2F2;
	}
	.mobile-nav {
	margin:60px 10px 15px; 
	box-shadow:none;
	}
	.toggle:after {
    background:#636961;
    color: #d8e9e8;
    content: "\2261";
    font: normal 26px/27px "responsivenav";
    margin: 33px 0;
    padding: 7px;
    text-align: center;
	line-height:28px;
	}
	
	#toggle:checked + div .toggle:after{
		content: "\2261";
	}
}

@media only screen and (max-width: 479px){
	.toggle:after { 
		text-align: center; width: 100%; 
	}
}

/* For tablets & smart phones */
@media (max-width: 767px) {
	body {
		padding:10px;
	}
	.container {
		width: auto;
	}
}
/* For smartphones */
@media (max-width: 480px) {
	.container {
		width: auto;
	}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
	.container {
		width: 724px;
	}
}
/* For larger displays */
@media (min-width: 1200px) {
	.container {
		width: 100%;
	}
}

/*============MOBILE============== */
@media only screen and ( max-width: 1170px )
{
.main-content aside {display:none;}
.promo {display:none;}
.rslides li {height:100%;}
.slider {height:100%;}
.content {max-width:1170px; width:95%; border-right:none; padding:0 5px;}
.content .about {max-width:690px; width:100%;}
.content .latest ul li article {float: left; max-width: 700px; width: 95%;}
}
@media only screen and ( max-width: 768px )
{
.content .about {max-width:730px; width:100%;}
.content .latest ul li article {float: left !important; max-width: 315px !important; width: 95% !important;}
.content .about-images { clear:both !important; float: none !important; margin: 20px auto !important; max-width: 100% !important;}
footer .right {float: left;text-align: left; width: 130px; margin:10px 0 0;}
}
@media only screen and ( max-width: 1024px )
{
.content .about {max-width:1024px; width:100%;}
.content .about-images .images {float: left;margin: 0 20px 10px;max-width: 385px;width: 100%;}
.content .latest ul li article {float: left; max-width: 525px; width: 95%;}
.content .about-images { clear:both; float: left; margin:0; max-width: 100%; overflow:hidden;}
footer .right {float: left;text-align: left; width: 130px; margin:10px 0 0;}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
footer .left {display:none;}
nav {float:right;}
.img_group img {width:31%;}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
nav {float:right;}
}
@media only screen and ( max-width: 360px )
{
.content .about-images .images {margin:0;}
.img_group img {width:100%;}
nav {float:right;}
}