/* #Media Queries
================================================== */

/* Smaller than standard 1680 (browsers) */
@media only screen and (max-width: 1680px) {


}

/* Smaller than standard 1366 (browsers) */
@media only screen and (max-width: 1366px) {


}


/* Smaller than standard 1280 ( browsers) */
@media only screen and (max-width: 1280px) {
	
	#outercontainer {
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 1100px;
	}

}




/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 959px) and (max-width: 1024px) {
	
	#outercontainer {
		max-width: 960px;
		margin: 0 auto;
	}
	.container .container{ padding:0px;}
	
	#slider .flex-caption { width: 450px; }
	#slider .flex-control-nav{left:102px; }
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 860px;
	}
		
	.klasik-latestnews-widget .recent-text-wrap{ overflow:inherit}
	.klasik-latestnews-widget .recent-thumb img{float:none; width:100%; height: auto; margin-bottom:0px;}
	.klasik-latestnews-widget .recent-thumb .image{ float:none; margin:0px 0 20px;}

}


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.container .container{ padding:0px;}
	
	#top {padding: 35px 0px 20px; height:auto}
	#logo{text-align:center; float:none!important; display:block; margin:0px;}
	#logo img{ float:none!important; display:inline-block!important; }
	
	#navigation{text-align:center; clear:both; height:auto; padding:0 0 15px 0; float:none}
	#nav-wrap{ background:none!important;}
	.sf-menu a{background:transparent!important; border:0!important;}
	.sf-menu > li{border:0 !important; display:none;}
	nav{margin:0; float:none; }
	.js .tinynav { display: block; margin:15px auto 0 ; width:80%; }/* mobile dropdown */
    .js #topnav { display: none }

	
	#slider .flex-caption { width: 400px; }
	#slider .slider-title-wrap { bottom:90px;}
	#slider .flex-control-nav{left:76px; bottom: 40px;}
	
	#outercontainer {
		max-width: 660px;
		margin: 0 auto;
	}
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 560px;
	}
	
	img.margin-bottom-off{ margin-bottom:23px!important;}

	.klasik-latestnews-widget .recent-text-wrap{ overflow:inherit}
	.klasik-latestnews-widget .recent-thumb img{float:none; width:100%; height: auto; margin-bottom:0px;}
	.klasik-latestnews-widget .recent-thumb .image{ float:none; margin:0px 0 20px;}

	
	
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none;
		width: 100%; min-width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
		
	#outercontainer { margin: 0px auto; max-width: 450px; }
	.container{ margin: 0px auto; max-width: 450px; }
	.container .container{ padding:0px;}
	.row { width: auto; min-width: 0; margin-left: 0; margin-right: 0; }

	.row .column, .row .columns { width: 100%; float: none; }

	.column:last-child, .columns:last-child { float: none; }
	[class*="column"] + [class*="column"]:last-child { float: none; }

	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both; }
	
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 350px;
	}

	/*============================================== HEADER SECTION ==============================================*/

	#top {padding: 35px 0px 20px; height:auto;}
	#logo{text-align:center; float:none!important; display:block; margin:0px;}
	#logo img{ float:none!important; display:inline-block!important; }
	
	#navigation{text-align:center; clear:both; height:auto; padding:0 0 15px 0; float:none}
	#nav-wrap{ background:none!important;}
	.sf-menu a{background:transparent!important; border:0!important;}
	.sf-menu > li{border:0 !important; display:none;}
	nav{margin:0; float:none; }
	.js .tinynav { display: block; margin:15px auto 0 ; width:90%; }/* mobile dropdown */
    .js #topnav { display: none }
	
	#afterheader { width: 300px;}
	#page-title-wrap { bottom: 48px; left: 30px;}

		
	/*============================================== SLIDER SECTION ==============================================*/
	#slider .flex-caption { width: 300px; left: 35px; 	}
	#slider .slider-title-wrap { bottom:28px; width: 250px;}
	#slider .flex-caption .slider-title{ font-size:20px; line-height:normal;}
	#slider .flex-caption .slider-desc { display:none;}
	#slider .flex-control-nav{ display:none}
	
	/*============================================== CONTENT SECTION ==============================================*/
	.main{padding-right:0;}
	#maincontent.positionleft .main{padding-left:0; padding-right:0}
	#sidebar.positionright div.widget-area { padding-left: 0;}
	#sidebar.positionleft div.widget-area { padding-right: 0;}
	#content.positionleft  .contenttop-container, 
	#content.positionleft  .contentbottom-container{padding-right: 0px;}
	
	#content.positionright .contenttop-container, 
	#content.positionright .contentbottom-container{padding-left: 0px;}

	.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{ width:90%}
	.wpcf7-submit{ margin:0px;}
	
	#commentform input[type=text], #commentform textarea {	width: 100%;	}
	.commentlist li.comment ul.children{ margin-left:20px;}
		
	.klasik-latestnews-widget .recent-text-wrap{ overflow:inherit}
	.klasik-latestnews-widget .recent-thumb img{float:none; width:100%; height: auto; margin-bottom:0px;}
	.klasik-latestnews-widget .recent-thumb .image{ float:none; margin:0px 0 20px;}


	/*============================================== BLOG SECTION ==============================================*/
	.postimg{margin-right:0px; width:100%;}
	#post-content .icon{ margin-right:25px}
	
	#sidebar.positionright div.widget-area {padding-left: 0px;}
	#sidebar.positionleft div.widget-area {padding-right: 0px;}


	/*============================================== Footer ==============================================*/
	#copyright{ margin-bottom:0px; text-align:center; padding-top:25px;}

	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 481px) and (max-width: 767px) {
	
	img.alignnone, img.alignleft, img.alignright, img.aligncenter {
		margin:0 0 23px!important;
		width:100%;
		height:auto;
	}
}
		

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
	#outercontainer { margin: 0px auto; width: 100%; }
	
	#slider .flex-caption { width: 250px; left: 35px; 	}
	#slider .slider-title-wrap { bottom:28px; width: 200px;}
	#slider .flex-caption .slider-title{ font-size:18px; line-height:normal;}

	
	img.alignnone, img.alignleft, img.alignright, img.aligncenter {
		margin:0 0 23px!important;
		width:100%;
		height:auto;
	}
	
}

@media only screen and (max-width: 360px) {
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 260px;
	}
	
	#slider .flex-caption { width: 290px; left: 35px; 	}
	#slider .slider-title-wrap { bottom:28px; width: 250px;}
	
	#afterheader { width: 290px;}
	#page-title-wrap { left: 30px;}
	
	#entry-author-info #author-avatar{ float:none; margin: 0 0 20px}
	.commentlist .comment-author{ float:none;}
	.commentlist .comment-body{ margin:20px 0 0}
	
}
@media only screen and (max-width: 320px) {
	
	.widget-maintop .widget-container,
	.widget-mainbottom .widget-container { 
		padding-left:15px;
		padding-right:15px;
		margin: 0px auto; max-width: 220px;
	}
	
	#slider .flex-caption { width: 250px; left: 35px; 	}
	#slider .slider-title-wrap { bottom:28px; width: 200px;}
	
	#afterheader { width: 250px;}
	#page-title-wrap { left: 30px;}
	
	#entry-author-info #author-avatar{ float:none; margin: 0 0 20px}
	.commentlist .comment-author{ float:none;}
	.commentlist .comment-body{ margin:20px 0 0}
	
}