/****************************************************************************************************
* Filename: layout.css (Base Skeleton )
* Author: Robin Gehlot, robingehlot[at]benchmarkitsolutions[dot]com
* For media Queries 
****************************************************************************************************/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

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

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* Syntax for #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

/* Responsive */
@media only screen and (max-width: 1440px) {
 
 
}
@media only screen and (max-width: 1100px) {


}
@media only screen and (max-width: 900px) {
body {sans-serif; font-size:80%;}
#wrapper{ margin: 8px auto; max-width: 768px; width: 95%;}
img {width:80%; height:auto;}
header{padding: 3px 15px;}
nav a{padding:10px 4px}
.appsslider label, .tabbtn, .acc-content2 span img, #acc h3 span img, .footer, .googleadds{ display:none}
.appsslider{margin:20px 0}
.login-box{margin:5px 0 0 0}
.socialmedia li	{ display: block; float: left; list-style: none outside none;  padding: 0 1px; }
.w80p{width:73%}
.searchbox{width:73%;}
.menu{width:27%}
#acc{width:88%}
#nested{width:100%}
.content{width:73%; font-size:70%}
.headtext{font-size:24px}
.jsslider, .jsslider img { background:none; width:100% }
#prevBtn, #nextBtn {left: 16px; opacity: 0.82; top: -146px; }
#nextBtn{left:471px}
.description li{width:29%}
.description li span img{ width:45%}
.ui-tabs .ui-tabs-panel{overflow:hidden; padding: 1em 2.4em;font-size:14px;}
.footer-bottom2-inner h2{margin-top:0px}
.social-connection{margin:18px 0 0 0}


}

@media only screen and (max-width: 680px) {
#wrapper{ margin: 8px auto; max-width:680px; width: 95%;}
.socialmedia, .footer-bottom2, nav2{display:none}
.socialmedia2, .footer-bottom3, nav, .menu{display:block}
.footer-link2{width:476px}
.tagline{padding:20px 0 0 8px}
.jcarousel-skin-tango .jcarousel-clip-horizontal{width:516px}
.jcarousel-skin-tango .jcarousel-container-horizontal{width:520px; padding:10px 14px}
.jsslider, .jsslider img{height:auto; margin:0px}
#slider{padding-top:1px}#nextBtn{left:423px}
.ui-tabs .ui-tabs-panel{padding:5px 6px }
.star{padding-left:0px}
.snippet-tall .details{width:135px}
}

@media only screen and (max-width: 667px) {
#wrapper{ margin: 8px auto; max-width:667px; width: 95%;}
img {width:85%; height:auto;}
body {font-size:70%;}
header, #slider{margin: 0 auto; padding:0 auto}
.searchbox{width:73%; float:right}
.socialmedia, .footer-bottom3, nav2{display:none}
.socialmedia2, .footer-bottom2, nav, .menu{display:block}
nav a{margin:2px 3px; font-size:13px}
.appsslider{margin:10px -12px}
.jsslider{height:245px; margin:0 0}
#prevBtn, #nextBtn {left:6px; opacity: 0.82; top: -146px; }
#nextBtn{left:384px}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 499px; height:45px; margin-top:10px; background:url(../images/bgslider600.png) no-repeat no-repeat bottom center}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 489px;}
.jcarousel-skin-tango .jcarousel-item { margin:0 auto; padding:0 auto; width: 36px;}
.w80p{width:69%}
.footer-bottom2-inner h2{width:100%}
.footer-link, .copy-right-txt, .footer-bottom2-inner{padding:0px; width:100%}
.copy-right-txt, .footer-link{padding-top:10px; margin:0 auto; width:93%}
.content{ width:73%; background:#FFF}
#slider, .social-connection li{padding:0px}
.social-connection{margin:18px auto; width:91%; float:right}
.description li{width:28%; height:185px}
.description li h3{ padding:5px 1px}
.description li p{ font-size:11px; padding:5px 1px; line-height:14px}
.description li span img{ width:45%}
.tabindex{ padding:20px 0px!important; width:100%}
.ui-tabs .ui-tabs-nav li a{font-size:12px; padding:5px}
.ui-tabs .ui-tabs-panel{padding:11px 0}
.snippet .thumbnail img{float:left; width:70%}
.carousel-pages{width:450px}
.snippet-tall .details a.title{max-width:127px}
.headtext{font-size:20px; color:#000}
.star{padding-left:0px}


}

@media only screen and (max-width: 597px) {
#wrapper{ margin: 8px auto; max-width:597px; width: 95%;}
.socialmedia, .footer-bottom2, nav2{display:none}
.socialmedia2, .footer-bottom3, nav, .menu{display:block}
#acc h3{font-size:11px; padding:6px 6px 8px}
.content{ width:73%; background:#fff}
.description li{width:28%; height:173px}
.footer-link2{width:476px}
.tagline{padding:20px 0 0 8px}
.jcarousel-skin-tango .jcarousel-clip-horizontal{width:463px; background:url(../images/bgslider600.png) no-repeat no-repeat bottom center}
.jcarousel-skin-tango .jcarousel-container-horizontal{width:461px; padding:10px 14px}
.snippet-tall{margin:5px 19px 44px 27px}
.footer-bottom3-inner h2{margin-top:0px}
.jsslider, .jsslider img{height:auto; margin:0px}
#slider{padding-top:1px}#nextBtn{left:349px}
.ui-tabs .ui-tabs-panel{padding:5px 6px }
.star{padding-left:0px}
.snippet-tall .details{width:135px}
.tabindex{ padding:20px 5px!important; width:97%}
.snippet-tall .details a.title{max-width:152px}
}

@media only screen and (max-width: 515px) {
#wrapper{ margin: 8px auto; max-width:515px; width: 95%;}
img {width:70%; height:auto;}
body {font-size:70%;}
header, #slider{margin: 0 auto; padding:0 auto}
nav2{display:none}
nav{display:block}
nav a{margin:2px 3px; font-size:13px; padding:8px 2px }
.socialmedia, .footer-bottom2{display:none}
.socialmedia2, .footer-bottom3{display:block}
.tagline{ font-size:26px; float:left}
.appsslider{margin:10px 0px}
#prevBtn, #nextBtn {left:6px; opacity: 0.82; top: -122px; }
#nextBtn{left:253px}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 382px; height:37px; margin-top:10px}
.jcarousel-skin-tango .jcarousel-container-horizontal {width:368px;}
.jcarousel-skin-tango .jcarousel-item { margin:0 auto; padding:0 auto; width: 36px;}
#acc{width:84%}
.w80p{width:63%}
.jsslider, .jsslider img{float:left; margin:0 auto; width:80%}
#prevBtn a, #nextBtn a{background:none}
#slider li{height:194px}
.snippet-tall{margin:5px 5px 24px 15px}
#slider{padding-top:0px}
.description li{width:27%; height:161px}
.description li h3{ font-size:10px; padding:5px 1px}
.description li p{ font-size:11px; padding:5px 1px; line-height:14px}
.description li span img{ width:45%}
.ui-tabs .ui-tabs-nav li a{font-size:10px; padding:5px}
.ui-tabs .ui-tabs-panel{padding:5px 0 15px 0px}
.snippet .thumbnail img{float:left; width:70%}
.carousel-pages{width:312px}
.snippet-tall .details a.title{max-width:127px}
}

@media only screen and (max-width: 479px) {
#wrapper{ margin: 8px auto; max-width:479px; width: 95%;}
img {width:80%; height:auto;}
body {font-size:80%;}
header, #slider{margin: 0; padding:0 }
nav{display:none}
nav2{display:block; clear:both}
nav2 a{margin:2px; padding:8px; }
.searchbox{width:100%}
.footer-link2{width:276px}
.socialmedia, .menu, .footer-bottom2{display:none}
.socialmedia2, .footer-bottom3{display:block}
.tagline{ font-size:18px; float:left}
.appsslider{margin:10px -12px}
#prevBtn, #nextBtn {left:6px; opacity: 0.82; top: -158px; }
#nextBtn{left:253px}
.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 243px; height:40px; margin-top:10px; background:url(../images/bgslider480.png) no-repeat no-repeat bottom center}
.jcarousel-skin-tango .jcarousel-container-horizontal {width: 231px;}
.jcarousel-skin-tango .jcarousel-item { margin:0 auto; padding:0 auto; width: 36px;}

.w80p{width:59%}
.content{ width:100%; background:#fff}
.jsslider, .jsslider img{width:100%; height:100%; }
#slider li{width:318px; }
#slider{padding-top:0px; text-align:center; height:288px}
.description li{width:43%; height:161px}
.description li h3{ font-size:10px; padding:5px 1px}
.description li p{ font-size:11px; padding:5px 1px; line-height:14px}
.description li span img{ width:45%}
.ui-tabs .ui-tabs-nav li a{font-size:10px; padding:5px}
.ui-tabs .ui-tabs-panel{padding:5px 0 15px 0px}
.tabindex{ padding:0px; width:98%}
.snippet .thumbnail img{float:left; width:70%}
.carousel-pages{width:312px}
.snippet-tall .details a.title{max-width:127px}
.headtext{font-size:20px; color:#000}

}


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


}