/* ----------------------- MOBILE CSS ---------------------------------------------------*/	
	@media all and (max-width: 1024px) {
		#navigation ul li {font-size: 80% !important;}
		#header{width:23% !important;}
		#header .container {right: 15% !important; min-width: 82%  !important;}
		#header .logo, #header .wsite-logo {width: 80% !important;}
		#header .wsite-logo span {font-size: 60% !important;}

		/* layout */
		.content {margin: 0 28% 0 5% !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-left: 0 !important;
			border-bottom: solid 1px rgba(0,0,0,.15) !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: 20px 0 !important;
			float: left !important;
		}

		.social-frame {
			position: relative !important;
			width: auto !important;
			float: right !important;
			bottom: initial !important;
			margin: 25px auto 0 auto !important;
		}
		
		/* layout */
		.content {margin: 0 5% !important;}
		#header-image {
			position: absolute !important;
		}
		.dd-header #main {
			position: relative !important;
			top: 0 !important;
		}
		#header-content{
			padding: 50px 0 !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;
		}
	}
	
	
	@media (min-width: 568px) and (max-width: 768px) {
		#header .logo, #header .wsite-logo {width: 45% !important;}
	}	
	
	@media all and (max-width: 600px) {
		/* Mobile Layout */
		.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;}
	}

	@media all and (max-width: 567px) {
		#header .wsite-logo span {font-size: 50% !important;}
		#header .logo {padding: 10px 0 20px 0 !important;}
		#header .logo, #header .wsite-logo {width: 60% !important;}

		/* DD Tab */
		#tabs li {
			display: block !important;
			line-height: 250% !important;
			background: inherit !important;
		}
		#tabs li.active{background: inherit !important;}
		.tab-button .active a{background: transparent !important;}
		.button a, .button a .arrow {
			-webkit-transition: all 0s !important;
			-moz-transition: all 0s !important;
			transition: all 0s !important;
		}
		h1.landing-header, h1{font-size: 60px !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-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-right {right: 2% !important;}
		.swiper-slide .content {
			margin: 0 10% !important;
			max-width: 80% !important;
		}
	}