/* ----------------------- MOBILE CSS ---------------------------------------------------*/	
	@media all and (max-width: 1024px) {
		#navigation ul li {font-size: 80% !important;}
		#header{width:23% !important;}
		#header .container {left: 10% !important;width: 90% !important;}
		#header .logo {width: 90% !important; padding: 30px 10% 0 0 !important;}
		#header .wsite-logo span {font-size: 55% !important;}
		.social-frame div{width: 220px !important;}

		/* layout */
		#wrapper {height: auto !important;}
		#main {padding: 0 0 10px 0 !important;height: auto !important;}
		#main .main-content {margin: 0 0 0 23% !important;}	
		h1.landing-header, h1{font-size: 80px !important;}	
		.tall-header .wsite-header{height: 300px !important;}	
		.short-header .wsite-header{height: 130px !important;}

	}

	@media all and (max-width : 768px) {
		#header {
			position: relative !important;
			width: 100% !important;
			border-right: 0 !important;
			border-bottom: solid 1px rgba(0,0,0,.15) !important;
		}
		.plugin #header {
			position: absolute !important;
			top: 45px !important;
			height: auto !important;
			bottom: initial !important;
		}
		#header .container {
			position: relative !important;
			width: 95% !important;
			right: initial !important;
			left: initial !important;
			margin: 0 auto !important;
		}		
		#custom-responsive-nav > button {
			display: inline-block !important;
		}
		#navigation {
			display: none !important;
		}

		#header .address {
			display: none !important;
		}
		#header .logo {
			position: relative !important;
			top: initial !important;
			left: initial !important;
			bottom: initial !important;
			padding: 15px !important;
			float: left !important;
			width: 25% !important;
		}

		.social-frame {
			position: relative !important;
			width: auto !important;
			bottom: initial !important;
			margin: 25px auto 0 auto !important;
		}

		.social-frame div {float: right !important; margin-left: 0 !important;}

		.wsite-social-item {margin: 0 0 8px 8px !important; float: right  !important;}
		
		/* layout */
		#main .main-content {
			padding: 0 5% !important;
			max-width: 90% !important;
			width: 90% !important;
			margin: 0 auto !important;
		}
		#header-image {
			position: absolute !important;
		}
		.dd-header #main {
			position: relative !important;
			top: 0 !important;
		}
		#header-content{
			padding: 50px 0 !important;
		}
		.button a, #tabs li a span.wsite-text{font-size: 15px !important;}
		h1.landing-header, h1{font-size: 70px !important;}	
		.tall-header .wsite-header{height: 230px !important;}	
		.short-header .wsite-header{height: 100px !important;}

	}

	@media all and (max-width: 767px) {
		/* Layout CSS */
		td.wsite-multicol-col, #blogTable td, td.blog-sidebar {
			display: block !important;
			width: 96% !important;
			padding: 10px 2% !important;
		}
		.wsite-multicol-table-wrap {
			margin: 0 auto !important;
		}
		.column-blog {
			width: 95% !important;
			margin: 0 auto !important;
			border: #eee solid 2px !important;
			padding: 30px 2% !important;
		}
		#header-content{
			padding: 30px 0 !important;
		}

		/* Product Page */
		#wsite-com-product-images {
			float: none !important;
			width: 100% !important;
		}
		#wsite-com-product-info {
			clear: both;
			margin: 0 !important;
			padding-top: 30px;
		}
		
	}
	
	@media all and (max-width: 600px) {
		/* Mobile Layout */
		#header .logo {width: 30% !important;}
		.imageGallery > div {
		    width: 50% !important;
		    margin: 0 auto !important;
		}
		.imageGallery img.galleryImageBorder{width: 100% !important;}
		img.galleryImageBorder{width: 94% !important;}
		.tall-header .wsite-header{height: 190px !important;}	
		.short-header .wsite-header{height: 80px !important;}
		/* Soical */
		.wsite-social-item {width: 20px !important;height: 20px !important;margin: 0 0 4px 6px !important;}
		.wsite-social-facebook, .wsite-social-facebook:active {background:url(facebook-m.png) no-repeat top left !important;}
		.wsite-social-pinterest, .wsite-social-pinterest:active {background:url(pinterest-m.png) no-repeat top left !important;}
		.wsite-social-twitter, .wsite-social-twitter:active {background:url(twitter-m.png) no-repeat top left !important;}
		.wsite-social-linkedin, .wsite-social-linkedin:active {background:url(linkedin-m.png) no-repeat top left !important;}
		.wsite-social-mail, .wsite-social-mail:active {background:url(mail-m.png) no-repeat top left !important;}
		.wsite-social-rss, .wsite-social-rss:active {background:url(rss-m.png) no-repeat top left !important;}
		.wsite-social-flickr, .wsite-social-flickr:active {background:url(flckr-m.png) no-repeat top left !important;}
		.wsite-social-plus, .wsite-social-plus:active {background:url(google-m.png) no-repeat top left !important;}
		.wsite-social-vimeo, .wsite-social-vimeo:active {background:url(vimeo-m.png) no-repeat top left !important;}
		.wsite-social-yahoo, .wsite-social-yahoo:active {background:url(yahoo-m.png) no-repeat top left !important;}
		.wsite-social-youtube, .wsite-social-youtube:active {background:url(youtube-m.png) no-repeat top left !important;}
	}

	@media all and (max-width: 567px) {
		#header .wsite-logo span {font-size: 50% !important;}
		.social-frame div {width: 60% !important;}
		h1.landing-header, h1{font-size: 60px !important;}	
	
		/* DD Tab */
		#tabs li {
			display: block !important;
			line-height: 250% !important;
			margin-bottom: 2px;
		}
		.tab-button .active a, .tab-button a{padding: 0 !important;}
		.button a .arrow{display: none !important;}
		.button a {
			-webkit-transition: all 0s !important;
			-moz-transition: all 0s !important;
			transition: all 0s !important;
		}
			
	}
	
	@media all and (max-width: 384px) {		
		/* Mobile Layout */
		.imageGallery > div {
	    	width: 100% !important;
		}			
		h1.landing-header, h1{font-size: 40px !important;}	
		.tall-header .wsite-header{height: 120px !important;}	
		.short-header .wsite-header{height: 50px !important;}
	}


/* Add-On Responsive CSS */
/* -------------------------------------------
SWiper Plugin
--------------------------------------------*/

	/* Responsive */
	@media all and (max-width: 768px) {
		.swiper-container{position: inherit !important;}
		.swiper-slide.slide1, .swiper-slide.slide2, .swiper-slide.slide3, .swiper-slide.slide4,
		.swiper-slide.slide5, .swiper-slide.slide6, .swiper-slide.slide7, .swiper-slide.slide8 {
			background-position: center top !important;
		}
		.arrow-left {left: 2% !important;}
		.swiper-slide .content {
			margin: 0 10% !important;
			max-width: 80% !important;
		}
		.swiper-slide .content-contianer {padding-top: 160px !important;}
		.pagination{left: 40% !important;}
	}

	@media all and (max-width: 768px) and (orientation : landscape){
		.arrow-right, .arrow-left {top: 70% !important;}
	}

	@media all and (max-width: 600px) {
		.pagination{display: none !important;}
		.swiper-slide .content {margin: 0 17% 0 13% !important;max-width: 70% !important; }
	}