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

		1. Media Query : Large Screen -> Desktop

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

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

			/* 	=================================================
					1.1 Overview
			================================================= */

				/* ====== 1.1.1 Overview ====== */

					input, select, textarea{
				        height: 48px;
				        line-height: 48px;
				        padding: 0 15px;
				        font-size: 16px;
				        border-width: 1px;
				        -webkit-border-radius: 2px;
				        -moz-border-radius: 2px;
				        -o-border-radius: 2px;
				        -ms-border-radius: 2px;
				        border-radius: 2px;
					}
					textarea{
						padding: 15px;
						line-height: 24px;
						height: 200px;
					}
					button,
					input[type="submit"]{
						height: 44px;
						line-height: 36px;
						font-size: 14px;
						padding: 0 28px;
					}

				/* ====== 1.1.2 Header ====== */

					header .main-logo-holder{
						padding: 30px 40px 0 40px;
					}
					header img.main-logo{
						height: 32px;
					}
					header img.blog-logo{
						width: 88px;
						margin: 0px auto;
						margin-bottom: 20px;
					}
					header img.close-blog{
						height: 30px;
						width: 30px;
						top: 40px;
						right: 40px;
					}
					nav ul li{
						margin: 0 48px;
					}
					nav ul li a{
						font-size: 16px;
						line-height: 52px;
					}

				/* ====== 1.1.3 Footer ====== */

					footer{
					}

			/* 	=================================================
					1.2 Home Page
			================================================= */

				/* ====== 1.2.1 Home ====== */

					#home{
						padding: 0;
					}
					.post-collection,
					.breadcrumb ul{
						max-width: 1280px;
					}
					.post-collection .post{
						width: -webkit-calc(25% - 22.5px);
				        width: -moz-calc(25% - 22.5px);
				        width: -o-calc(25% - 22.5px);
				        width: -ms-calc(25% - 22.5px);
				        width: calc(25% - 22.5px);
				        margin-right: 30px;
				        margin-bottom: 30px;
					}
					.post-collection .post .icon{
						height: 186px;
					}
					.post-collection .post .title{
						height: 140px;
					}
					.post-collection .post .title h4{
						padding: 0 20px;
						font-size: 20px;
						line-height: 26px;
					}
					.post-collection .post .info{
						height: 52px;
					}
					.post-collection .post .info .inner{
						max-width: 100%;
						padding: 0 20px;
					}
					.post-collection .post .info p.date{
						font-size: 12px;
					}
					.single-page-breadcrumb{
						max-width: 1040px;
					}
					.breadcrumb ul li{
						font-size: 14px;
					}
					.breadcrumb ul li a.link:after{
						height: 14px;
						top: 2px;
					}
					#goToTop{
						right: 32px;
						bottom: 32px;
					}
					#loader{
						background: transparent;
					}
					#loader,
					#loaderProgress{
					    height: 3px;		    
					}
					#single{
						padding: 40px 0 80px 0;
					}
					#contentHolder .inner{
						max-width: 980px;
					}
					#single h1{
						font-size: 40px;
						line-height: 48px;
						max-width: 680px;
					}
					#single ul.info{
						margin: 30px 0 30px 0;
					}
					#single ul.info li{
						font-size: 18px;
						line-height: 20px;
						padding: 0 30px;
					}
					#single ul.info li:before{
						height: 4px;
						width: 4px;
						top: 8px;
						left: 0px;
					}
					#contentHolder .inner .content-area{
						padding: 40px 0 40px 0;
						border-width: 1px;
					}
					#content h1{
						font-size: 36px;
					}
					#content h2{
						font-size: 28px;
					}
					#content p{
						font-size: 16px;
						line-height: 24px;
					}
					#content p,
					#content h1,
					#content h2,
					#content h3,
					#content h4,
					#content h5,
					#content h6{
						margin-bottom: 20px;
					}
					#userCommentForm{
						padding: 40px 0;
					}
					p.comment-form-author,
					p.comment-form-email{
						padding: 10px 0;
					}
					p.comment-form-author{
						padding-right: 5px;
					}
					p.comment-form-email{
						padding-left: 5px;
					}
					#userComments .one:first-child{
						border-width: 1px;
						padding-top: 30px;
					}
					#userComments .one{
						padding-bottom: 30px;
						margin-bottom: 30px;
					}
					#userComments h4,
					#userComments p{
						font-size: 14px;
						line-height: 20px;			
					}
					#userComments h4{
						margin-bottom: 10px;
					}
					#userComments h4 span{
						font-size: 12px;
						padding-left: 20px;
					}
					#userComments h4 span:after{
						height: 4px;
						width: 4px;
						top: 6px;
						left: 10px;
					}
					#error404 h1{
						font-size: 40px;
					}
					#error404 h4{
						font-size: 20px;
					}
		}

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

		2. Media Query : Desktop -> Tablet

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

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

			/* 	=================================================
					2.1 Overview
			================================================= */

				/* ====== 2.1.1 Overview ====== */

				/* ====== 2.1.2 Header ====== */

					header .main-logo-holder{
						padding: 20px 20px 0 20px;
					}
					header img.main-logo{
						height: 24px;
					}
					header img.blog-logo{
						width: 68px;
						margin-bottom: 10px;
					}
					header img.close-blog{
						height: 30px;
						width: 30px;
						top: 20px;
						right: 20px;
					}
					nav ul li{
						margin: 0 30px;
					}
					nav ul li a{
						font-size: 14px;
						line-height: 40px;
					}

				/* ====== 2.1.3 Footer ====== */

					footer{
					}

			/* 	=================================================
					2.2 Home Page
			================================================= */

				/* ====== 2.2.1 Home ====== */

					#home{
						padding: 20px 0;
					}
					.post-collection,
					.breadcrumb ul{
						max-width: 980px;
					}
					.breadcrumb ul{
						padding-top: 20px;
					}
					.single-page-breadcrumb{
						max-width: 840px;
					}
					.post-collection{
						padding: 20px 30px;
					}
					.post-collection .post{
						width: -webkit-calc(25% - 15px);
				        width: -moz-calc(25% - 15px);
				        width: -o-calc(25% - 15px);
				        width: -ms-calc(25% - 15px);
				        width: calc(25% - 15px);
				        margin-right: 20px;
				        margin-bottom: 20px;
					}
					.post-collection .post .icon{
						height: 140px;
					}
					.post-collection .post .title{
						height: 108px;
					}
					.post-collection .post .title h4{
						font-size: 16px;
						line-height: 20px;
					}
					.post-collection .post .info{
						height: 40px;
					}
					.post-collection .post .info .inner{
						padding: 0 15px;
					}
					.post-collection .post .info p.date{
						font-size: 10px;
					}
					#single{
						padding: 40px 0 40px 0;
					}
					#contentHolder .inner{
						max-width: 780px;
					}
					#single h1{
						font-size: 32px;
						line-height: 40px;
					}
					#single ul.info{
						margin: 20px 0 20px 0;
					}
					#single ul.info li{
						font-size: 12px;
						line-height: 18px;
						padding: 0 20px;
					}
					#single ul.info li:before{
						top: 6px;
					}
					#prevNext .one:first-child{
						margin-top: 40px;
					}
					#prevNext h3{
						font-size: 20px;
						line-height: 32px;
						margin-bottom: 10px;
					}
					#prevNext .icon{
						width: 215px;
						height: 140px;
					}
					#prevNext .desc{
						width: -webkit-calc(100% - 215px);
				        width: -moz-calc(100% - 215px);
				        width: -o-calc(100% - 215px);
				        width: -ms-calc(100% - 215px);
				        width: calc(100% - 215px);
				        padding: 0px 0 0 20px;
					}
					#prevNext h4{
					 	font-size: 16px;
					 	line-height: 20px;
					 	max-width: 320px;
					}
					#prevNext p.date{
						padding: 5px 0 0px 0;
						font-size: 12px;
					}
		}

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

		3. Media Query : Tablet -> Mobile

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

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

			/* 	=================================================
					3.1 Overview
			================================================= */

				/* ====== 3.1.1 Overview ====== */

				/* ====== 3.1.2 Header ====== */
					
					nav ul li{
						margin: 0 20px;
					}

				/* ====== 3.1.3 Footer ====== */

					footer{
					}

			/* 	=================================================
					3.2 Home Page
			================================================= */

				/* ====== 3.2.1 Home ====== */

					.post-collection,
					.breadcrumb ul{
						max-width: 520px;
					}
					.post-collection .post{
						width: -webkit-calc(50% - 15px);
				        width: -moz-calc(50% - 15px);
				        width: -o-calc(50% - 15px);
				        width: -ms-calc(50% - 15px);
				        width: calc(50% - 15px);
				        margin-right: 20px;
				        margin-bottom: 20px;
					}
					.post-collection .post:nth-child(4n){
						margin-right: 20px;
					}
					.post-collection .post:nth-child(2n){
						margin-right: 0;
					}
					#single{
						padding: 30px 0 40px 0;
					}
					#single h1,
					#contentHolder .inner{
						max-width: 480px;
					}
					#content h2{
						font-size: 22px;
					}					
		}

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

		3. Media Query : Tablet -> Mobile

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

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

			/* 	=================================================
					3.1 Overview
			================================================= */

				/* ====== 3.1.1 Overview ====== */

					input, select, textarea{
				        padding: 0 12px;
				        font-size: 13px;
					}
					textarea{
						padding: 12px;
						line-height: 20px;
						height: 180px;
					}

				/* ====== 3.1.2 Header ====== */
					
					header{
						border-bottom: solid 1px #DCE1E5;
					}
					header .main-logo-holder{
						display: none;
					}
					header img.blog-logo{
						margin-bottom: 0;
						margin: 20px 0 10px 0;
					}
					header img.close-blog{
						top: 15px;
						right: 12px;
					}
					nav{
						background: #236EA1;
						position: fixed;
						width: 250px;
						left: -250px;
						top: 0;
						height: 100vh;
						z-index: 9999;
						border: none;
						-webkit-transition: all 0.4s;
				        -moz-transition: all 0.4s;
				        -o-transition: all 0.4s;
				        -ms-transition: all 0.4s;
				        transition: all 0.4s;
					}
					nav.open{
						left: 0;
					}
					nav ul{
						display: block;
						padding: 120px 0 240px 0;
					}
					nav ul li{
						width: 100%;
						text-align: left;
						display: block;
						margin: 0;
						border-bottom: solid 1px rgba(0,0,0,.2);
					}
					nav ul li:first-child{
						border-top: solid 1px rgba(0,0,0,.2);
					}
					nav ul li a{
						padding: 0 15px;
					}
					nav ul li a:hover,
					nav ul li a.current{
						background: rgba(0,0,0,.1);
						color: #FFFFFF;
					}
					.menuBtn{
						display: block;
					}
					header img.close-blog{
						display: none;
					}

				/* ====== 3.1.3 Footer ====== */

					footer{
					}

			/* 	=================================================
					3.2 Home Page
			================================================= */

				/* ====== 3.2.1 Home ====== */

					.post-collection,
					.breadcrumb ul{
					}
					.post-collection .post{
						width: 215px;
					}
					.post-collection .post,
					.post-collection .post:nth-child(2n)
					{
						float: none;
						margin-right: 0;
						margin: 0 auto;
						margin-bottom: 30px;
					}
					.breadcrumb ul{
						text-align: center;
					}
					.breadcrumb ul li{
						display: inline-block;
						margin: 0 auto;
						float: none;
					}
					#goToTop{
						right: 12px;
						bottom: 15px;
					}
					.single-page-breadcrumb{
						display: none;
					}
					#single{
						padding: 30px 0 60px 0;
					}
					#single h1,
					#contentHolder .inner{
						max-width: 100%;
						padding: 0 20px;
					}
					#single ul.info{
						text-align: left;
						padding: 0 20px;
					}
					#single ul.info li{
						padding: 0;
						display: block;
						padding-left: 0px;
						color: #939AA0;
					}
					#single ul.info li:before{
						display: none;
					}
					#content p,
					#single ul.info li,
					#userComments h4,
					#userComments p,
					#userComments h4 span{
						color: #8f8f8f;
					}
					#content h1,
					#content h2,
					#content h3,
					#content h4,
					#content h5,
					#content h6,
					#single h1{

					}
					#content h1,
					#content h2,
					#content h3,
					#content h4,
					#content h5,
					#content h6{
						font-family: 'lato-black', sans-serif;
						line-height: 1.2;
					}
					#content p a{
						color: #236EA1;
					}
					#prevNext h3{
						margin-bottom: 20px;
					}
					#prevNext .one{
						text-align: center;
					}
					#prevNext .one .post{
						width: 215px;
						display: inline-block;
						-webkit-box-shadow: 0px 20px 30px rgba(0,0,0,.16);
						-moz-box-shadow: 0px 20px 30px rgba(0,0,0,.16);
						-o-box-shadow: 0px 20px 30px rgba(0,0,0,.16);
						-ms-box-shadow: 0px 20px 30px rgba(0,0,0,.16);
						box-shadow: 0px 20px 30px rgba(0,0,0,.16);
					}
					#prevNext .icon{
						width: 100%;
						display: block;
						float: none;
					}
					#prevNext .desc{
						padding: 0;
						width: 100%;
						background: #FFFFFF;						
					}
					#prevNext .title{
						border-bottom: solid 1px #E6E6E6;
						padding: 20px;
					}
					#prevNext .info{
						position: relative;
						overflow: hidden;
						padding: 0 15px;
					}
					#prevNext p.date{
						float: left;
						padding: 0;
					}
					#prevNext p.like-share{
						float: right;
					}
					#prevNext p.date,
					#prevNext p.like-share{
						line-height: 40px;
						font-size: 10px;
					}
		}