/*==================================================

Author: http://themeforest.net/user/navigator

Only At: ThemeForest.net





	* * * CONTENTS * * *



	0. Media screen up to 960 px

	

	1. Media screen up to 768 px

	

	2. Media screen up to 640 px



	3. Media screen up to 480 px



	4. Media screen up to 320 px



	5. Portfolio grid items (820, 620, 400)



	6. Responsive Navigation

	

	

==================================================*/





/*------------------------------------------------

    0. Media screen up to 960 px

------------------------------------------------*/



@media screen and (max-width: 960px) {



	.wrap {width: 94%;}



	.og-grid li.last {margin-right: 10px;}

	.og-grid li:nth-of-type(4n) {margin-right: 0px;}



}





/*------------------------------------------------

    1. Media screen up to 768 px

------------------------------------------------*/



@media screen and (max-width: 768px) {



	.half {width: 100%; margin-bottom: 25px;}

	.fourth {width: 47%; margin-right: 6%;}



	h1 {line-height: 32px; font-size: 32px;}

	#default-slider li > img {top: 25%; width: 50%;}



	p.single {width: 80%;}



	.blog-container {width: 90%;}

	.blog-container ul li.last {margin-right: 38px;}

	.blog-container ul li:nth-of-type(2n) {margin-right: 0px;}



	.team {text-align: center;}

	.team .fourth {float: none; width: 207px; display: inline-block;}



	.last {margin: 0px;}

	.team .fourth {margin: 2%;}



	#blog-single img.main {width: 100%; height: auto;}



	#blog-single article, div.articles,

	#blog-single aside , .sidebar{float: none; width: 100%;}

	

	#blog-single aside .article-data {padding: 0px 40px; text-align: left;}

	#blog-single aside .share li {margin: 0 5px 0 0;}



	#map {height: 250px;}



}





/*------------------------------------------------

    2. Media screen up to 640 px

------------------------------------------------*/



@media screen and (max-width: 640px) {



	.wrap {width: 92%;}



	.top-header {padding: 38px;}

	h2 {line-height: 32px; font-size: 32px;}



	.client-data li:last-child {margin-top: 15px;}



	.blog-container ul li,

	.blog-container ul li.last  {margin-right: 0px;}



	.last {margin: 0px;}



	#blog-single article section,

	#blog-single article footer  {padding: 30px;}



	#blog-single article h2,

	#blog-single article .h-info,

	ul#comments,

	#blog-single #contact,

	#blog-single aside .article-data, #blog-single .sidebar aside {padding: 0px 30px;}



}





/*------------------------------------------------

	3. Media screen up to 480 px

------------------------------------------------*/



@media screen and (max-width: 480px) {



	h1 {line-height: 30px; font-size: 30px;}



	.top-header {padding: 34px 10px;}

	h2 {line-height: 28px; font-size: 28px;}



	p.single {width: 90%;}



	.half, .third, .fifth, 

	.sixth, .two_third {width: 100%; margin-bottom: 40px;}



	.last {margin: 0px;}



	.slider-bg,

	#slider-container {height: 350px;}

	#default-slider > li div {

		position: relative; 

		top: 0px; 

		width: 100%; 

		padding: 0% 2%; 

		margin-top: 50px; 

		text-align: center;

	}

	#default-slider > li img {display: none;}



	.testimonials li blockquote,

	.testimonials li:hover blockquote  {margin: 15px;}



	.blog-control ul li, 

	.blog-control ul li:last-child {margin: 0px 5px 10px 0px;}



	#map {height: 150px;}



	#blog-single article section,

	#blog-single article footer  {padding: 20px;}

	#blog-single article header h1 {font-size: 28px;}

	#blog-single article .intro {line-height: 24px; font-size: 16px;}



	#blog-single article footer .prev,

	#blog-single article footer .next {display: block;}



	#blog-single article h2,

	#blog-single article .h-info,

	ul#comments,

	#blog-single #contact,

	#blog-single aside .article-data {padding: 0px 20px;}



	ul#comments ul.children {margin-left: 20px;}

}





/*------------------------------------------------

    4. Media screen up to 320 px

------------------------------------------------*/



@media screen and (max-width: 320px) {



	h1 {line-height: 28px; font-size: 28px;}



	.top-header {padding: 34px 10px;}

	h2 {line-height: 22px; font-size: 22px;}



	.img_container.left,

	.img_container.right {margin: 10px 0 25px;}



	.slider-bg,

	#slider-container {height: 410px;}

	#default-slider > li div {margin-top: 60px;}



	.blog-container {height: 320px;}

	#blog > li {width: 250px; height: 280px;}

	#blog > li a .overlay,

	#blog > li a img {width: 250px; height: 130px;}

	#blog > li p {height: 130px; line-height: 18px; font-size: 12px;}

	#blog > li > div {top: 130px;}



	#map {height: 180px;}



	#blog-single article header h1 {font-size: 22px;}

	#blog-single article .intro {line-height: 22px; font-size: 14px;}

}





/*------------------------------------------------

    5. Portfolio grid items (820, 620, 400)

------------------------------------------------*/



@media screen and (max-width: 820px) {



	.og-grid li:nth-of-type(4n) {margin-right: 10px;}

	.og-grid li:nth-of-type(3n) {margin-right: 0px;}



}



@media screen and (max-width: 620px) {



	.og-grid li:nth-of-type(3n) {margin-right: 10px;}

	.og-grid li:nth-of-type(2n) {margin-right: 0px;}



}



@media screen and (max-width: 400px) {



	.og-grid li,

	.og-grid li:nth-of-type(2n),

	.og-grid li:nth-of-type(3n),

	.og-grid li:nth-of-type(4n),

	.og-grid li.last {margin-right: 0px;}



}





/*------------------------------------------------

    6. Responsive Navigation

------------------------------------------------*/



@media screen and (max-width: 748px) {



	nav ul {

		display: none;

		position: absolute;

		top: 31px;

		width: 100%; 

		background: #f6f6f6;

	}

nav ul li {

		float: none; 

		margin: 0px; 

		border-bottom: 1px solid rgba(255,255,255,.1);
	

	}



	nav ul li a {padding: 15px 20px;}



	nav ul li a:hover,

	nav ul li a.active {

	    border-bottom: none;

	    background: rgba(0,0,0,.05);

	}



	.responsive-nav-btn {display: block;}

 ul  .sub-menu  {

visibility:hidden;
}

}

@media screen and (min-width: 748px) {
 
 nav ul {
   display: block !important;
 }