@import "editorstyles.css";

/* #Page Styles
===========================================================================================   */
	
	.container {
		width: 959px;
		margin: 0 auto;
		padding: 0;
		text-align: left;	
		position: relative;
		box-sizing: border-box;
	}
	.container::after {
	    content: '';
	    display: table;
	    clear: both;
	}
	
	.conpadd { padding: 40px 0; }
	.horpadd { padding: 0 40px; }
	
	#main {
		line-height: 21px;
		width: 100%;
	}
	

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

	header {
		position: absolute;
		height: 143px;
		width: calc(100% - 20px);
		z-index: 10;
		background:  rgba(20, 41, 72, 0.8);
		border-radius: 20px 20px 0 0;

	}
	
	header.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		border-radius: 0;   
		height: 100px;   
	}
	
	header.fixed .logo {
		width: 160px;
		height: 60px;
		
	}
	header.fixed ol {
		display: none;
	}
	
	
	
	header .menu,
	header .menu b {
		display: none;
	}
	
	header .logo {
		background: url(/_img/layup/logo.svg) no-repeat;
		background-size: 100%;
		width: 292px;
		height: 94px;
		margin-top: 20px;
		float: left;
		outline: 0;
	}
	
	.printlogo {
		display: none;
	}
	
	
	header ol {
		margin: 30px 0 0 0;
		padding: 0;
		float: right;
	}
	
	header ol li {
		margin: 0 0 0 30px;
		padding: 0;
		list-style: none;
		float: left;
	}
	
	header ol  li a {
		color: #fff;
		text-decoration: none;
		font: 300 18px/1 'ff-tisa-web-pro', serif;
	}
	
	header ol  li a:hover {
		color: #ccc;
	}
	
	header ol  li a:before {
		content: '\f0e0';
		font: 200 18px/1 'Font Awesome 5 Pro';
		color: #fff;
		margin-right: 10px;
	}
	
	header ol li:last-child a:before {
		content: '\f879';
	}
	
	
	
	

/* Top navigation
===========================================================================================   */	

	#topnavi {
		margin-top: 30px;
		float: right;
		clear: right;
	}
	
	#topnavi ul {
		margin: 0;
		padding: 0;
	}
	
	#topnavi li {
		list-style: none;
		float: left;
		position: relative;
		display: inline;
		margin: 0;
		padding: 0;
	}
	
	#topnavi ul li a {
		display: block;
		text-align: center;
		color: #fff;
		padding: 0 0 15px;
		margin: 0 0 0 25px;
		text-decoration: none;
		box-sizing: border-box;
		font: 300 23px/1 'ff-tisa-web-pro', serif;
		white-space: nowrap;
		border-bottom: 1px solid transparent;
	}
	
	#topnavi a:hover, #topnavi a:focus, #topnavi .on, #topnavi ul li:hover > a {
		text-decoration: none;
		border-bottom-color: #fff;
	}
	
	#topnavi li a.l360:before {
		font: 300 16px/1 'Font Awesome 5 Pro';
		content: '\f007';
		margin-right: 5px
	}
	
	#topnavi ul ul {
		display: none;
		position: absolute;
		z-index: 9999;
		top: 38px;
		left: 15px;
		height: auto;
		padding: 27px 0 0 0;
	}
	
	#topnavi ul ul li {
		float: none;
		display: block;
	}
	
	#topnavi ul ul li a {
		display: block;
		float: none;
		text-align: left;
		border-bottom: 0;
		padding: 8px 15px;
		margin: 0;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		min-width: 180px;
		line-height: 1;
		text-transform: none;
	}
	
	#topnavi ul ul a:hover {
		background: #152740;
		color: #fff;
	}
	
	#topnavi li:hover > ul {
		display: block;
	}
	
	#topnavi ul ul ul {
		display: none;
		left: 100%;
		top: 0;
	}

		
	

/* Hero
===========================================================================================   */

	#hero {
		clear: both;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
	}
	
	#hero .mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	
		background-image: url("/_img/layup/mask.png");
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 1200px;
		background-attachment: fixed;
	
		z-index: 2;
		pointer-events: none;
	}
	#hero .herotext {
		position: absolute;
		right: 55px;
		bottom: 55px;	
		color: #fff;
		font: 300 65px/1.1 'ff-tisa-web-pro', serif;	
		z-index: 3; 
		text-align: right;
	}
	
	#hero .herotext a {
		background: #d89d56;
		margin: 10px 0 0 0;
		padding: 15px 30px ;
		cursor: pointer;
		font: 600 20px/0.8 'ff-tisa-web-pro', serif;
		float: right;
		color: #fff;
		text-decoration: none;
		outline: 0;	
		border-radius: 30px;
	}
	#hero .herotext a:hover {
		background: #000;
	}

	#slideimages { 
		position:relative; margin: 0; padding: 0; overflow: hidden;
        animation:fadeIn ease-in 1.5s;
	}
	
	#slideimages li{ 
		position:absolute; 
		z-index:0; 
		margin: 0; 
		padding: 0; 
		list-style: none;
		background-position: center 0; 
		background-repeat: no-repeat;
		background-size: cover;
	 }
	 

	#slideimages li.previous { z-index: 3; }
	#slideimages li.active { z-index: 4; }
	
	
	#hero,
	#gmap,
	#imgholder,
	#slideimages,
	#slideimages li,
	#slideimages video {
		width: 100%;
		height: 50vw;
		max-height: 800px;
		min-height: 350px;
		overflow: hidden;
		object-fit: cover;
	}
	
	.b_home #hero,
	.b_home #imgholder,
	.b_home #slideimages,
	.b_home #slideimages li,
	.b_home #slideimages video,
	.b_home #hero .mask {
		height: calc(100vh - 20px);
		max-height: none;
		min-height: 0;
	}
	

	

	@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
	

	.expandCards {
		display: flex;
		height: 420px;
		gap: 12px;
	}

	.card {
		flex: 1;
		position: relative;
		border-radius: 20px;
		overflow: hidden;
		cursor: pointer;
		background: #0b2a4a;
		transition: flex 0.6s cubic-bezier(.4,0,.2,1);
	}

	.card .image {
		position: absolute;
		inset: 0;
		background: var(--bg) center/cover no-repeat;
		z-index: 1;
		transition: opacity 0.45s ease, transform 0.6s ease;
	}

	.card::after {
		content: "";
		position: absolute;
		inset: 0;
		background: #0b2a4a;
		opacity: 0;
		z-index: 2;
		transition: opacity 0.45s ease;
	}

	.card .label {
		position: absolute;
		left: 30px;
		bottom: 40px;
		z-index: 3;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}
	
	.card .label h2 {
		color: #fff;
		margin: 0;
		font-size: 45px;
	}
	
	.card:not(.active) .reveal p {
		opacity: 0;
		transform: translateY(300px);
		transition-delay: 0s;
	}
	.card:not(.active) .reveal h2 {
		transition-delay: 0s;
	}
	

	.card .reveal {
		position: absolute;
		inset: 0;
		padding: 40px;
		color: #fff;
		z-index: 4;
		display: flex;
		flex-direction: column;
		text-align: left;
		line-height: 1.2;
	}
	.card .reveal,	
	.card .reveal h2,
	.card .reveal p {
		opacity: 0;
		transform: translateY(300px);
		transition:
			opacity 0.35s ease 0.3s,
			transform 0.35s ease 0.3s;
	}

	.card .reveal h2 {
		color: #fff;
		margin: 0 0 15px;
		font-size: 65px;
	}
	

	.card.active {
		flex: 1.65;
	}
	
	.card.active .image {
		opacity: 0;
		transform: scale(1.05);
	}
	
	.card.active::after {
		opacity: 1;
	}
	
	.card.active .label {
		opacity: 0;
		transform: translateY(10px);
	}
	
	.card.active .reveal,	
	.card.active .reveal h2,
	.card.active .reveal p {
		opacity: 1;
		transform: translateY(0);
	}

	
	.card.active .reveal h2 {
		transition-delay: 0.35s;
	}
	.card.active .reveal p {
		transition-delay: 0.55s;
	}
	
	.whychoose .img {
		width: calc(50% - 30px);
		position: absolute;
		top: 0;
		right:0;
		bottom:0; 
		border-radius: 20px;
		background-size: cover;
		padding-left: 60px;
	}
	.whychoose .img h1 {
		color: #fff;
		position: absolute;
		bottom: 30px;
	}
	
	/* Gallery/Testimonials
	===========================================================================================   */	
	
	
	.gallerywrap {
		display: flex;
		gap: 35px;
		align-items: stretch;
	}
	
	.galleryleft {
		position: relative;
		width: 50%;
		border-radius: 20px;
		overflow: hidden;
		height: 430px;
		touch-action: pan-y;
		user-select: none;
		cursor: grab;
	}
	
	.galleryleft::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background-image: linear-gradient(
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) 50%,
			rgba(0,0,0,0.8) 100%
		);
	}
	.slides {
		display: flex;
		height: 100%;
		transition: transform 0.6s ease;
		will-change: transform;
	}

	
	.slide {
		flex: 0 0 100%;
		width: 100%;
		height: 100% !important;
		object-fit: cover;
		object-position: center;
		user-drag: none;
		-webkit-user-drag: none;
		pointer-events: none;
	}

	
	.slide.active {
		opacity: 1;
		cursor: grabbing;
	}
	
	.galleryleft h2 {
		position: absolute;
		bottom: 30px;
		left: 30px;
		font-size: 36px;
		color: #fff;
		z-index: 2;
	}
	
	.dots {
		position: absolute;
		bottom: 40px;
		right: 30px;
		display: flex;
		gap: 8px;
		z-index: 2;
	}
	
	.dots span {
		width: 8px;
		height: 8px;
		border: 1px solid #fff;
		border-radius: 50%;
		cursor: pointer;
		opacity: 0.6;
	}
	
	.dots span.active {
		background: #fff;
		opacity: 1;
	}
	
	blockquote {
		position: relative;
		width: 50%;
		background: #0c3b5f;
		color: #fff;
		padding: 40px;
		border-radius: 20px;
		margin: 0 0 72px 0;
	}
	
	blockquote::after {
		content: "";
		background: url("/_img/layup/quote.svg") no-repeat;
		width: 72px;
		height: 72px; 
		position: absolute;
		bottom: -72px;
	}
	
	.quote {
		position: absolute;
		top: 40px;
		left: 40px;
		right: 40px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 1s ease;
	}
	
	.quote.active {
		opacity: 1;
		visibility: visible;
	}


/* Gallery Page
	===========================================================================================   */		
	
		.gallery  {
			margin: 40px -10px 20px;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			height: 100%;
		}
		
		.gallery section {
			width: calc(33.33% - 20px);
			margin: 0 10px 20px;
			float: left;
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			background-color: #142948;

			box-sizing: border-box;
			filter: grayscale(0); 
		}
		
		.gallery section div {
			padding-bottom: 60%;
			background: no-repeat center top 18% / cover;
		}
		.gallery section:hover {
			border-color: #000;
			filter: grayscale(1); 
			transition: filter .3s
		}
		
		.gallery a {
			text-decoration: none;
		}
		
		.gallery a span:before {
			color: rgba(255,255,255, 0.6);
			font:  100px/1 'Font Awesome 5 Pro';
			width: 100px;
			height: 100px;
			text-decoration: none;
			content: '\f144';
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			text-shadow: 3px 3px 2px rgba(150, 150, 150, 0.3);
		}
		


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

	footer {
		clear: both;
		margin: 60px 0 0;
		padding: 60px 0 40px; 
		background: #1b3a5c;
		color: #fff;
		overflow: hidden;
		border-radius: 20px;
	}
	
	footer ul{
		margin: 0;
		padding: 0;
		text-align: left;
		float: left;
		width: 400px;
	}
	footer ul li{ 
		width: 50%;
		margin: 0 0 5px;
		padding: 0;
		list-style: none;
		float: left;
	}
	footer ul li a{
		color: #eee;
		text-decoration: none;	
		padding: 0;
		font-size: 19px;
	}
	footer ul a:hover {
		text-decoration: underline;
		color: #fff;
	}
	footer img {
		float: right;
		max-width: calc(100% - 400px);
		
	}
	
	.social {
	    float: right;
		clear: right;
	    margin: 20px 0 10px;
	    padding: 0
	}
	
	.social li {
	    margin: 0 0 0 5px;
	    padding: 0 10px;
	    width: 40px;
	    text-align: center;
	    list-style: none;
	    float: left;
		border: 1px solid rgba(255, 255, 255, 0.5);
	   
	}
	
	.social li a:before {
	    color: #fff;
	    font: normal 25px / 35px 'Font Awesome 5 Brands';
	}
	
	.social li a.s1:before {
	    content: '\f39e';
	}
	
	.social li a.s2:before {
	    content: '\f099';
	}
	
	.social li a.s3:before {
	    content: '\f0e1';
	}
	
	.social li a {
	    font-size: 0;
	    text-decoration: none;
	}
	
	.social li:hover {
	    border: 1px solid #fff;
	}
	
	
/* Introduction Page
===========================================================================================   */		
	
	.intropage {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		margin: 20px 0;
		padding: 0;
	}
	
	.intro_news li {
		flex: 0 0 calc(33.33% - 10px);
		list-style: none;
		background-size: cover;
		border-radius: 20px;
		overflow: hidden;
		background-color: #142948;
	}
	.intro_news li div {
		position: relative;
		display: flex;   
		flex-direction: column;  
		justify-content: flex-end;
		padding: 40px;
		height: 500px;
		background-image: linear-gradient(
			rgba(0,0,0,0) 0%,
			rgba(0,0,0,0) 50%,
			#000 100%
		);
		background-size: 100% 200%;
		background-position: 0 100%;
		transition: background-position 0.5s ease;
		color: #fff
	}
	
	.intro_news li:hover {
		filter: grayscale(1);
	}
	.intro_news li:hover div {
		background-position: 0 0;
	}
	
	.intropage h3  {
		margin: 0;
		padding: 0;
		font-size: 22px;
		color: #fff;
	}
	.intropage span {
		color: #fff;
		font-size: 15px;
		display: block;
		margin-bottom: 15px;
	}
	.intro_news p  {
		margin: 10px 0 0 0;
		font-size: 15px;
		line-height: 1.2;
	}
	.intro_news a,
	.intro_news a:hover {
		color: #fff;
	}
	
	
	.intro_testimonials li {
		flex: 0 0 calc(50% - 10px);
		list-style: none;
	}
	.intro_testimonials blockquote {
		width: 100%; 
	}


/* Page Animations 
	===========================================================================================   */
		
	.animateScroll {
		overflow: hidden;
		opacity: 0;
		transform: translateY(150px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.animateScroll.isVisible {
		opacity: 1;
		transform: translateY(0);
	}
	
	.animateScroll .whychoose .img {
		transform: translateX(150px);
		transition: transform 0.6s ease;;
	}
	
	.animateScroll.isVisible .whychoose .img {
		transform: translateX(0);
	}


	.b_home .intro_news li {
		opacity: 0;
		transform: translateY(150px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	
	.b_home .animateScroll.isVisible .intro_news li {
		opacity: 1;
		transform: translateY(0);
	}

	.b_home .intro_news li:nth-child(1) { transition-delay: 0.2s; }
	.b_home .intro_news li:nth-child(2) { transition-delay: 0.4s; }
	.b_home .intro_news li:nth-child(3) { transition-delay: 0.6s; }
	
/* Standard CMS
===========================================================================================   */
	
	.docs {
		margin: 0;
		padding: 0;
	}
	.docs li{
		margin: 0;
		padding: 0;
		clear: left;
		list-style: none;
	}
	.docs a{
		padding: 0 0 10px;
		float: left;
		text-decoration: none 
	}
	
	.docs span{
		float: left;
		padding: 3px 0 0 20px;
		color: #999;
		font-size: 11px;
	}
	.docs a:before {
		color: #1f5d44;
		font: bold 20px/1 'Font Awesome 5 Pro';
		margin-right: 10px;
		text-decoration: none;
		content: '\f016';
	}
	
	.jpeg:before, 
	.jpg:before, 
	.gif:before, 
	.png:before, 
	.bmp:before, 
	.tif:before, 
	.tiff:before  { content: '\f1c5' !important; }

	.doc:before, 
	.docx:before, 
	.docm:before  { content: '\f1c2' !important; }

	.xls:before, 
	.xlsx:before, 
	.xlsm:before  { content: '\f1c3' !important; }

	.ppt:before, 
	.pptx:before, 
	.pptm:before  { content: '\f1c4' !important; }

	.pdf:before  { content: '\f1c1' !important; }
		

	
	
	
	#sitemap,
	#sitemap ul{
		margin: 0;
		padding: 0 0 0 20px;
		
	}
	#sitemap  a {
		display: block;
		text-decoration: none;
		font-weight: bold;
		color: #666;
		padding: 2px 0 2px 18px;
	}
	#sitemap  a:hover { 
		color: #000;
	}

	#sitemap ul a {
		font-weight: normal;
	}
	#sitemap li {
		border-left: 1px solid #CDCDCD;
		background: url(/_img/layup/sitemapli.gif) no-repeat 0 .5em;
		list-style: none;
	}
	
	.paging {
		float: right;
		margin: 0;
		padding: 15px 0 0;
	}
	.paging li {
		float: left;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.paging li a {
		display: block;
		margin: 0 0 0 1px;
		padding: 2px 0;
		width: 25px;
		text-align: center;
		text-decoration: none;
		color: #666;
		background: #eaeaea;
		line-height: 1.3em;
		border-radius: 5px; 
	}
	
	.paging li a:hover, .paging li .on{
		background: #142948;
		color: #fff;
	}
	
	.paging .next a, .paging .last a, .paging .back a, .paging .first a {
		padding: 2px 7px !important;
		width: auto !important;
	}
	.pagenumbers {
		float: left;
		padding-top: 15px;
	}
	

	#cmsForm button{
		float: right;
	}
	.contactCheck {
		position: absolute; 
		left: -9999px;
	}
	
	.bubble {
		text-align: left;
		padding-top: 10px;
	}
	
	.bubble a {
		position: static;
		margin-top: 5px;
		display: block;
		text-align: center;
		background: #000;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		padding: 2px 0;
		min-width: 140px;
	}

	
	/* Extras */
	
	.hidden {
		position: absolute; 
		left: -9999px; 
	}
	.hand {
		cursor: pointer;
	}
	.textleft {
		text-align: left !important;
	}
	.textcenter {
		text-align: center !important;
	}
	.textright {
		text-align: right !important;
	}
	.right {
		float: right;
		width: calc(50% - 30px);
	}
	.left {
		float: left;
		width: calc(50% - 30px);
	}
	
	
	
	


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

	body:before {  position: fixed; z-index: 99999999; background: #fff; }




/* More than 1500 
===========================================================================================   */
@media only screen and (min-width: 1500px)  {
	
	body:before { content: '1500+';}
	.container { width: calc(1500px - 20px); } 
	
	/* Max Font Size */
	h1 { font-size: 50px; }
	h2 { font-size: 40px; }
	h3 { font-size: 30px; }
	
	/* #hero,
	#imgholder,
	#slideimages,
	#slideimages li {
		height: 36vw;
	} */

	
}



/* Less than 1500 
===========================================================================================   */
@media only screen and (max-width: 1499px)  {
	
	body:before { content: '<1500';}
		
	.container  { width: 100%; }
	
	/* Adjusted Font Size */
	h1 { font-size: calc(35px + 0.5vw); }
	h2 { font-size: calc(30px + 0.5vw); }
	h3 { font-size: calc(25px + 0.5vw); } 	
	
}



/* All less than 1350
===========================================================================================   */
@media only screen and (max-width: 1350px)  {
	
	body:before { content: '<1350';}
		

	
}


/* All less than 1200
===========================================================================================   */
@media only screen and (max-width: 1200px)  {
		
	body:before { content: '<1200';}
	
	#topnavi ul li a { font-size: 20px;}
	
	blockquote p { font-size: 18px; }
	blockquote cite { font-size: 25px }
	
}





/* All less than 980
===========================================================================================   */
@media only screen and (max-width: 980px)  {
	
	
	body:before { content: '<980';}
	
	
	#cmsForm #contact_details { height: 150px; }
	#cmsForm button { float: none; }
	.right, .left { float: none !important; width: 100%; }
		
	header .menu {
		display: block;
		position: fixed;
		right: 35px;
		top: 55px;
		z-index: 999999;
		text-decoration: none;
		color: #fff;
		background:#000;
		width: 40px;
		padding: 4px 3px;
		text-align: center;
	}
	header .menu:before {
		font: bold 30px/1 'Font Awesome 5 Pro';
		content: '\f0c9';
	}
	.out header .menu:before {
		content: '\f00d';
	}
	
	header ol li {
		clear: both;
		margin-bottom: 10px;
		float: right;
	}
	header ol li a {
		font-size: 15px;
	}
	header ol {margin: 45px 50px 0 0;}
	
	
	#topnavi {
		position: absolute;
		box-sizing: border-box;
		z-index: 10;
		top: 112px;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #efefef;
		transform: translateY(calc(-100% - 169px));
		opacity: 0;
		pointer-events: none;
		transition: transform 0.7s ease, opacity 0.4s ease, background 0.7s;
	}
	
	header { 
		transition: background 0.7s; 
	}
	
	.out header,
	.out #topnavi { 
		background: #fff; 
	}
	
	.out #topnavi {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	
	.out header .menu:before {
		content: '\f00d';
	}
	
	#topnavi ul {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0 0 30px;
		text-align: left;
		overflow: hidden;
		background: none;
		display: block;
	}
	
	#topnavi ul li {
		float: left;
		clear: both;
		width: 100%;
		position: relative;
		border-bottom: 1px solid rgba(0, 0, 0, .10);
	}
	
	#topnavi a b {
		display: inline;
	}
	
	#topnavi ul li a {
		float: left;
		clear: both;
		width: 100%;
		padding: 7px 30px;
		line-height: 40px;
		margin: 0;
		text-align: left;
		box-sizing: border-box;
		font-size: 20px;
		color: #000;
		border-bottom: 1px solid #fff;;
	}
	
	#topnavi a:hover, #topnavi a:focus, #topnavi .on, #topnavi ul li:hover > a {
		background: #4c4c4c;
		color: #fff;
	}
	
	#topnavi ul ul li a {
		padding: 10px 30px;
	}
	#topnavi ul ul li a:hover  {
		background: #19273e;
	}
	
	
	#topnavi ul ul {
		position: static;
		margin: 0;
		padding: 0;
	}
	
	#topnavi ul span {
		display: block;
	}
	
	#topnavi ul span:before {
		font: 200 20px 'Font Awesome 5 Pro';
		content: '\f078';
		color: #000;
		position: absolute;
		right: 25px;
		top: 15px;
	}
	#topnavi ul a:hover + span:before,
	#topnavi ul a.on + span:before {
		color: #fff;
	}
	
	footer ul li a { font-size: 16px }
	
	.intro_news li { flex: 0 0 calc(50% - 24px); }
	.b_home .intro_news li:last-child { display: none }
	
	.headtitle { padding: 90px 10% 40px;}
	
	.expandCards { height: 540px; }
	
	.whychoose .left {
		margin-top: 270px;
	}
	
	.whychoose .img{
		width: 100%;
		bottom: auto;
		padding-left: 0;
		height: 300px;
	}
	.whychoose .img h1 { left: 30px }
	blockquote p { font-size: 16px }
	blockquote cite { font-size: 20px; }
	
	.gallery section { width: calc(50% - 20px); }
	
}



/* less than 768
===========================================================================================   */
@media only screen and  (max-width: 768px)  {
	
	body:before { content: '<768';}
	

	.conpadd {  padding: 40px 0; }
	.horpadd { padding: 0 30px; }
	
	header { height: 113px;}
	header .logo { width: 200px }
	header ol { display: none;}
	header .menu { top: 45px }
	#topnavi { top: 83px; }
	
	#hero .herotext { font-size: 45px}
	
	.headtitle { padding: 90px 0 40px; font-size: 40px }
	
	#cmsForm input[type="text"],
	#cmsForm input[type="password"],
	#cmsForm input[type="email"],
	#cmsForm textarea,
	#cmsForm select {
		width: 100%;
		box-sizing: border-box;
	}
	
	.paging  { float: none; display: flex; }
	.paging li { flex-grow: 1; }
	.paging li a { width: auto; min-width: 15px; }
	.pagenumbers { display: none; }
	
	footer ul { width: 200px }
	footer ul li { width: 100%}
	footer img {
		max-width: calc(100% - 200px);
	}
	

	td, tr {  display: block; }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr + tr {  margin-top: 30px; }
    td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: left;
        margin-bottom: 5px;
    }
	
	td:before {
	    content: attr(data-label);
	    position: absolute;
	    left: 10px;
	    top: 50%;
	    width: calc(50% - 20px);
	    transform: translateY(-50%);
	    font-weight: 400;
	}
	

		.expandCards {
			flex-direction: column;
			height: auto;
		}
		
		.expandCards .card {
			flex: none;
			height: 420px;
		}

    .gallerywrap {
		flex-direction: column;
		gap: 20px;
	}
	
	.galleryleft,
	blockquote {
		width: 100%;
		height: 400px;
	}
	
	
	.intro_testimonials li {
		flex: 0 0 calc(100% - 10px);
		list-style: none;
	}
    
    
}



/* less than 480
===========================================================================================   */
@media only screen and  (max-width: 480px)  {
	
	body:before { content: '<480';}
	
	.intro_news li { flex: 0 0 calc(100% - 24px); }
	
	#hero .herotext { font-size: 40px}
	.expandCards .card { height: 500px; }
	.headtitle { font-size: 35px }
	
	.gallery section { width: calc(100% - 20px); }
	
}

/* less than 320
===========================================================================================   */
@media only screen and  (max-width: 320px)  {
	
	body:before { content: '<320';}
	
}

/* iPhone X Portrait
===========================================================================================   */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

	.conpadd {  padding: 30px 0; }
  	.horpadd { padding: 0 50px; }  
  	#topnavi ul li a { padding-left: 50px}
  	header .menu {right: 50px; }

}

/* iPhone XS Max, XR */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
	
	.conpadd {  padding: 30px 0; }
  	.horpadd { padding: 0 50px; }  
  	#topnavi ul li a { padding-left: 50px}
  	header .menu {right: 50px; }
  	
}

/* Animations for desktop only
===========================================================================================   */
@media only screen and  (min-width: 768px)  {
	
	
	.cta a,
	.paging li a,
	#hero .herotext a {
		transition: background .3s ease-in-out
	}
	
	input, textarea, button {  transition: color .3s, border .3s ease-in-out; }
	
	#topnavi a,
	.social li {
		transition: border .3s ease-in-out
	}
	
}

 body:before { display: none} 

/* #Bootstrap grid for advance CMS editor
===========================================================================================   */
#main *,.cke_editable *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#main img,.cke_editable img{max-width:100%;height:auto}

.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;/* margin-right:-15px;margin-left:-15px */}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{position:relative;min-height:1px;/* padding-right:15px;padding-left:15px */}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{float:left}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}@media (min-width:768px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{float:left}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}}@media (min-width:992px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:left}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}@media (min-width:1200px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{float:left}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}}


.row.rowbg { margin-right: 0; margin-left: 0;}