html{box-sizing:border-box; height: 100%;}*,*:before,*:after{box-sizing:inherit}

body{margin:0; height:100%; font-family:opensans-regular, Arial, Helvetica, sans-serif; color:#000000; font-size:17px; line-height:1.666em}

form {height:100%; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column}

a:link.w3-text {color:inherit;}
a:active.w3-text {color:inherit;}
a:visited.w3-text {color:inherit;}
a:hover.w3-text {text-decoration:none}

a:link.w3-text2 {color:inherit;text-decoration:none}
a:active.w3-text2 {color:inherit;text-decoration:none}
a:visited.w3-text2 {color:inherit;text-decoration:none}
a:hover.w3-text2 {text-decoration:none}

a:link.w3-text3 {color:inherit;text-decoration:none}
a:active.w3-text3 {color:inherit;text-decoration:none}
a:visited.w3-text3 {color:inherit;text-decoration:none}
a:hover.w3-text3 {color:#cccccc;text-decoration:none}

a:link.w3-text4 {color:#cccccc;}
a:active.w3-text4 {color:#cccccc;}
a:visited.w3-text4 {color:#cccccc;}
a:hover.w3-text4 {color:#cccccc;text-decoration:none}

h1{font-family:trajanpro-regular; font-size:2.222em; line-height:1.5em; font-weight:normal}
h2{font-family:trajanpro-bold; font-size:1.888em; line-height:1.4em; font-weight:400}
h3{font-family:trajanpro-regular; font-size:1.4em; line-height:1.4em; font-weight:400; margin:0}
h5{font-family:trajanpro-regular; font-size:1.5em; line-height:1.4em; font-weight:400; margin:20px 0px 10px 0px}

.title2{font-family:trajanpro-bold; font-size:1.888em; line-height:1.4em; font-weight:400}

.p0{font-size:0.888em; line-height:1.666em}
.p1{font-size:1.333em; line-height:1.666em}
.p2{font-size:1.666em; line-height:1.666em}
.p3{font-size:2em; line-height:1.666em}
.p4{font-size:1em; line-height:1.766em}
.p5{font-size:1.125em; line-height:1.666em}
.p6{font-size:1em; line-height:1.666em}
.p7{font-size:13px; line-height:23px}
.p8{font-size:24px; line-height:32px}
.p9{font-size:20px; line-height:28px}

hr{border-bottom:1px solid #cccccc}

.bold{font-family:OpenSans-Bold}
.bold2{font-family:trajanpro-bold}
.bold3 {font-family: opensans-semibold}
.white{color:#ffffff}
.grey{color:#999999}

.flex-container{display:-webkit-box; display:-webkit-flex; display:flex}
.directionV{-webkit-flex-direction:column; flex-direction:column}
.wrap{-webkit-flex-wrap:wrap; flex-wrap:wrap}

.content-center{-webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center;}

.content-container {background:url(images/bg.webp); -webkit-flex: 1 0 auto; flex: 1 0 auto; -webkit-flex-direction:column; flex-direction:column; margin-top:90px}

.nav{padding: 10px 0px 60px 0px; font-size:0.777em; line-height:1.666em}

.underline{width: 70px; height: 5px; background: #666666}

.banner{position:relative}
.banner-home{position:absolute; top:0; left:0; width:100%; height:100%}

.banner-container{width:100%; background-position:center; background-size:cover}

.home{width:100%; background-position:center; background-size:cover}
.home-padding{padding: 450px 120px 60px 120px}
.home-box{background: #000000; max-width: 550px; opacity: 0.7!important}

.company{-webkit-align-items:center; align-items:center}
.company img{max-width:100%}

.news{-webkit-align-items:center; align-items:center}
.news img{max-width:100%}
.news-box{padding:30px; background:#000000; min-height:485px}

.esg{-webkit-align-items:center; align-items:center; max-width: 1500px}
.esg-box{padding:50px 10px}
.esg img{max-width:100%}
.esg p{font-size:0.944em; line-height:1.444em}

.who-box{padding:30px 10px}
.who img{max-width:100%}
.who p{font-size:1em; line-height:1.666em}
.who-box2{padding:30px 40px}

.career-box{padding:30px 10px 0px 10px}

.faq {padding: 10px 0px}
.faq-item {width: 100%; background: inherit; /*padding: 30px 20px;*/}

/*FAQs*/
details summary {cursor: pointer}
details .summaryContent {cursor: pointer}
details .summaryContent {padding: 10px 0px; color: #ffffff}
details .summaryContent span {padding-right: 60px; color: #ffffff}
details .summaryContent:after {content: "\f067"; /* FontAwesome plus */ color: #ffffff; position: absolute; right: 0px; font-family: FontAwesome; font-size: inherit; width: 1.5em; height: 1.5em; text-align: center;}
details[open] .summaryContent:after {content: "\f068"; /* FontAwesome minus */color: #ffffff;}
/*details[open] .summaryContent:after {transform: rotate(45deg);*/ color: #ffffff}*/
.summaryContent .question {padding-right: 30px; flex: 1}
/*End FAQs*/

/*Expand cotent*/
.collapsible {
	background-color: none;
	font-family: opensans-regular;
	font-size: 16px;
	line-height: 30px;
	color: #ffffff;
	cursor: pointer;
	padding: 0px;
	width: 100%;
	border: none;
	text-align: left;
	text-decoration: none;
	outline: none;
}

	.active, .collapsible:hover {
		background-color: none;
		color: #ffffff;
	}

.content {
	/*padding: 0 18px;*/
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.5s ease-out;
	/*background-color: #f1f1f1;*/
}
/*End Expand cotent*/

.history{width:100%; height: 100%; white-space:normal}
.history-text-box{height: 100%; padding: 1px}
.history-text{height: 100%; padding: 30px; background:#ffffff; color: #666666}

.partner img{max-width:100%}

    .contactForm label {
        display: inline-block;
    }

    .contactForm .input {
        display: block;
       	border:none;
       	border-bottom: 1px solid #999999;
		background:none;
		padding:10px;
        width: 100%;
        height: 2.5em;
        font-family: inherit;
        font-size: inherit;
		color: #ffffff;
    }

    .contactForm .textarea {
        display: block;
       	border:none;
       	border-bottom: 1px solid #999999;
		background:none;
		padding:10px;
        width: 100%;
        height: 10em;
        font-family: inherit;
        font-size: inherit;
		color: #ffffff;
    }

.btn {text-decoration: none; cursor:pointer; transition: 0.5s;}
.btn span {display: inline-block; position: relative; transition: 0.5s;}
.btn span:after {content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.btn:hover span {padding-right: 20px;}
.btn:hover span:after {opacity: 1; right: 0;}
.btn2 {margin: 10px 0; border-radius:0px; text-decoration: none; cursor:pointer; transition: 0.3s;}
.btn2 span {display: inline-block; position: relative; transition: 0.3s;}
.btn2 span:before {content: '\00ab'; position: absolute; opacity: 0; top: 0; left: -20px; transition: 0.3s;}
.btn2:hover span {padding-left: 25px;}
.btn2:hover span:before {opacity: 1; left: 0;}

.button{border:none; background:#000000; margin:10px 0px; padding:15px 80px; font-family:inherit; font-size:inherit; color:inherit; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; cursor:pointer}
.button:hover{color:#cccccc}
.button2{border:none; background:#000000; margin:25px 0px; width: 170px; height: 60px; font-family:trajanpro-regular; font-size:inherit; color:#ffffff; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0}
.button3{border:none; background:#000000; width: 400px; height: 80px; font-family:trajanpro-regular; font-size:inherit; color:#ffffff; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0}
.button4{border:1px solid #cccccc; background:none; margin:10px 0px; width: 300px; height: 50px; font-family:inherit; font-size:inherit; color:#ffffff; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0}
.button5{border:1px solid #cccccc; background:none; margin:10px 0px; width: 300px; height: 70px; font-family:inherit; font-size:20px; color:#ffffff; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0}
.button6{border:1px solid #cccccc; background:none; margin:10px 0px; width: 300px; height: 50px; font-family:inherit; font-size:inherit; color:#ffffff; cursor:pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0}

.footer {flex-shrink: 0; padding-bottom:0px!important}
.footer .img {width:100%; aspect-ratio:4.8 / 1; background: url("images/footer.webp") center; background-size: cover}
.footer-link1 {display:block; padding:5px 0px; font-family:trajanpro-regular; font-size:0.888em; line-height:1.5em}
.footer-link2 {display:block; padding:5px 0px; font-size:0.777em; line-height:1.5em}

.w3-padding-1{padding:1px}
.w3-padding-5{padding:5px}
.w3-padding-10{padding:10px}
.w3-padding-15{padding:15px}
.w3-padding-30{padding:30px}
.w3-padding-x-10{padding:0px 10px}
.w3-padding-x-15{padding:0px 15px}
.w3-padding-y-1{padding:1px 0px}
.w3-padding-y-1a{padding:1px 0px 0px 0px}
.w3-padding-y-10{padding:10px 0px}

.w3-padding,.w3-row-padding:after,.w3-row-padding:before,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

.w3-left{float:left!important}.w3-right{float:right!important}

.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
	
#top{position:fixed; top:0; background: #222222; width:100%; height: 90px; z-index:9999}
.topMenu{width:100%; height: 100%; padding:20px 30px; -webkit-align-items:center; align-items:center}

.w3-button{display:inline-block; border:none;background:none; padding:10px 30px; text-align:center;overflow:hidden;text-decoration:none; font-family:inherit; font-size:inherit; color:#ffffff;cursor:pointer;white-space:nowrap; -webkit-appearance: none; -webkit-border-radius: 0px; border-radius: 0px}
.w3-button:hover{color: #cccccc}

.dropmenudiv {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 250px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropWho.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}

.dropmenudiv2 {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 380px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropPortfolio.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}

.dropmenudiv3 {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 510px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropNews.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}

.dropmenudiv4 {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 610px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropCareer.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}

.dropmenudiv5 {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 730px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropPartner.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}

.dropmenudiv6 {
	position: fixed;
	visibility: hidden;
	top: 90px;
	left: 890px;
	width: 416px;
	height: 241px;
	padding: 30px;
	background: url("images/dropContact.webp") center;
	background-size: cover;
	border: 0px;
	z-index: 9999
}


.dropmenudiv .title, .dropmenudiv2 .title, .dropmenudiv3 .title, .dropmenudiv4 .title, .dropmenudiv5 .title, .dropmenudiv6 .title {
	padding: 5px 0px;
	text-align: left;
	text-decoration: none;
	color: inherit
}

.dropmenudiv .link, .dropmenudiv2 .link, .dropmenudiv3 .link, .dropmenudiv4 .link, .dropmenudiv5 .link, .dropmenudiv6 .link {
	padding: 5px 0px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	color: inherit;
	font-size: 13px
}

	.dropmenudiv .link:hover, .dropmenudiv2 .link:hover, .dropmenudiv3 .link:hover, .dropmenudiv4 .link:hover, .dropmenudiv5 .link:hover, .dropmenudiv6 .link:hover {
		color: #cccccc
	}

/* top menu */
.nav-toggle {
	display: none;
}

/* STYLING/POSITIONING THE MENU */
.nav-toggle-label {
	z-index: 9999999;
	position: absolute;
	top: 0px;
	/*left: 30px;*/
	right: 0px;
	margin-right: 1em;
	height: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}

	.nav-toggle-label span,
	.nav-toggle-label span::before,
	.nav-toggle-label span::after {
		display: block;
		background: #fff;
		height: 2px;
		width: 30px;
		border-radius: 0px;
		position: relative;
		transition: all .5s ease-in-out;
	}

		.nav-toggle-label span::before,
		.nav-toggle-label span::after {
			content: '';
			position: absolute;
		}

		.nav-toggle-label span::before {
			bottom: 10px;
		}

		.nav-toggle-label span::after {
			top: 10px;
		}

#nav-toggle:checked ~ .nav-toggle-label span {
	background: none; /* setting it to the same background as header so it "disappears" */
}

	/* transforming the before and after span into an X */
	#nav-toggle:checked ~ .nav-toggle-label span::before {
		transform: rotate(45deg);
		bottom: 0;
		background: #fff;
	}

	#nav-toggle:checked ~ .nav-toggle-label span::after {
		transform: rotate(-45deg);
		top: 0px;
		background: #fff;
	}

#menu {
	z-index: 999999;
	position: absolute;
	background: #000000;
	opacity: 0.9;
	text-align: center;
	/*top: 100%; /* puts itself directly under the preceeding relative positioned element */
	top: 0;
	left: 0;
	width: 100%;
	height: 1000px;
	padding: 60px 30px;
	transform: scale(1, 0);
	transform-origin: top; /* menu appears from the top instead if center, try and comment this out and see for yourself */
	transition: transform .4s ease-in-out;
}

	#menu ul {
		list-style: none;
		padding-left: 0;
	}

	#menu li {
		width: 100%;
		padding: 10px;
	}

	#menu a {
		text-decoration: none;
		color: #fff;
		font-family: Opensans-Regular;
		font-size:1.65em;
		line-height: 1.5em;
		opacity: 0;
		transition: opacity .15s ease-in-out;
	}

		#menu a:hover {
			color: #cccccc;
		}

#menu2 a {
	text-decoration: none;
	color: #fff;
	font-family: Opensans-Regular;
	font-size:1.25em;
	line-height: 1.5em;
	text-transform: none;
	opacity: 0;
	opacity: 0.85;
	transition: opacity .15s ease-in-out;
}

	#menu2 a:hover {
		color: #cccccc;
		text-decoration: none;
	}

#nav-toggle:checked + #menu {
	transform: scale(1, 1);
}

#nav-toggle:checked ~ #menu a {
	opacity: 1;
	transition: opacity .25s ease-in-out .35s;
}

/*Drop-Down*/

.nav-item {
	position: relative;
	float: left;
	list-style: none;
	margin-bottom: 10px;
	width: 100%;
	padding: 10px;
	color: #fff;
	font-family: OpenSans-Bold;
	font-size:inherit;
	cursor: pointer;
}

.child {
	display: none;
	margin: 0;
}

	.child li {
		width: 100%;
	}

.sub-nav {
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.sub-nav-item {
	position: relative;
	float: left;
	list-style: none;
	padding: 0px 0px 10px 0px!important;
	color: #fff;
	font-size: 0.888em;
	overflow: hidden;
}

/*End top menu*/

.brighten img {
  width: 100%;
  -webkit-filter: brightness(100%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.brighten img:hover {
  -webkit-filter: brightness(70%);
}

.w3-center{text-align: center !important}

.w3-left-align {
    text-align: left !important;
}

.w3-right-align {
    text-align: right !important;
}

.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}

.w3-quarter{width:24.99999%}
.w3-third{width:33.33333%}
.w3-half{width:49.99999%}
.w3-whole{width:99.99999%}

/*Animation*/
.reveal, .reveal1, .reveal2, .reveal3, .reveal4, .reveal5, .reveal6, .reveal7, .reveal8 {
  position: relative;
  opacity: 0;
}

.reveal.active, .reveal1.active, .reveal2.active, .reveal3.active, .reveal4.active, .reveal5.active, .reveal6.active, .reveal7.active, .reveal8.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom .8s ease-out;
}
.active.fade-left {
  animation: fade-left .8s ease-out;
  /*animation-timing-function:ease-out;*/
}
.active.fade-right {
  animation: fade-right .8s ease-out;
  /*animation-timing-function:ease-out;*/
}

@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animated {animation: .8s ease-out; animation-fill-mode: forwards}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
         
.fadeInLeft {
	animation-name: fadeInLeft;
}
         
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
         
.fadeInRight {
	animation-name: fadeInRight;
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
         
.fadeInBottom {
	animation-name: fadeInBottom;
}

@keyframes fadeInTop {
	0% {
		opacity: 0;
		transform: translateY(-50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
         
.fadeInTop {
	animation-name: fadeInTop;
}

@media (max-width:600px){
	body{font-size:0.888em!important; line-height:1.666em!important}
	
	h1{font-size:2em!important; line-height:1.5em!important}
	
	.p0{font-size:0.875em!important; line-height:1.666em!important}	
	.p1{font-size:1.25em!important; line-height:1.666em!important}
	.p4{font-size:1.125em!important; line-height:1.666em!important}
	.p5{font-size:1em!important; line-height:1.666em!important}
	.p6{font-size:0.888em!important; line-height:1.666em!important}
	.p8{font-size:18px!important; line-height:22px!important}
	.p9{font-size:16px!important; line-height:20px!important}

	.content-container {margin-top:70px}

	.directionR{-webkit-flex-direction:column-reverse!important; flex-direction:column-reverse!important}

	.nav{padding: 10px 0px 30px 0px!important}

	.home-padding{padding: 120px 30px 30px 30px!important}

	.button2{margin:10px 0px!important; width: 120px!important; height: 40px!important}
	.button3{width: 300px!important; height: 60px!important}
	.button4{width: 200px!important; height: 40px!important}
	.button5{width: 200px!important; height: 50px!important; font-size:1em}
	.button6{width: 250px!important; height: 40px!important}

	.box-padding{padding:30px 20px}
	
	.esg-box{padding:20px 0}
	.esg img{max-width:70%}

	.who-box{padding:20px 0px}
	.who img{max-width:80%}
	.who p{font-size:0.888em; line-height:1.666em}
	.who-box2{padding:20px}

	.career-box{padding:20px 0px 0px 0px}

	.news-box{padding:20px; background:#000000; min-height:auto}

	.collapsible {
		font-size: 0.888em;
	}

	.footer-direction{-webkit-flex-direction:column; flex-direction:column}

	#top{height: 70px!important}
	.topMenu{padding:10px 20px!important; -webkit-justify-content:space-between; justify-content:space-between}
	
	.logo{height: 32px}

	.footer .img {aspect-ratio:1.5 / 1!important}

	.w3-hide-x-small{display:none!important}

	.w3-padding{padding:30px 20px}
	.w3-padding-x{padding:0px 20px}
	.w3-padding-y{padding:30px 0px}
	.w3-padding-t0{padding:0px 20px 30px 20px}
	.w3-padding-t1{padding:0px 20px 30px 20px}

	.w3-col.xs3{width:24.99999%}
	.w3-col.xs4{width:33.33333%}
	.w3-col.xs6{width:49.99999%}
	.w3-col.xs8{width:66.66666%}
	.w3-col.xs9{width:74.99999%}
	}

@media (min-width:601px) and (max-width:992px){
	.directionR{-webkit-flex-direction:column-reverse!important; flex-direction:column-reverse!important}
	
	.nav{padding: 10px 0px 30px 0px!important}

	.home-padding{padding: 150px 60px 30px 60px!important}

	.box-padding{padding:30px}	

	.who-box2{padding:30px}

	.footer-direction{-webkit-flex-direction:column; flex-direction:column}

	.topMenu{padding:20px!important; -webkit-justify-content:space-between; justify-content:space-between}

	.footer .img {aspect-ratio:2.48 / 1!important}

	.w3-hide-small{display:none!important}

	.w3-padding{padding:30px 20px}
	.w3-padding-x{padding:0px 20px}
	.w3-padding-y{padding:30px 0px}
	.w3-padding-t0{padding:0px 20px 30px 20px}
	.w3-padding-t1{padding:0px 20px 30px 20px}

	.w3-col.s3{width:24.99999%}
	.w3-col.s4{width:33.33333%}
	.w3-col.s6{width:49.99999%}
	.w3-col.s8{width:66.66666%}
	.w3-col.s9{width:74.99999%}
	}
	
@media (min-width:993px) and (max-width:1440px){
	.home-padding{padding: 300px 120px 60px 120px!important}

	.news-box{padding:30px; background:#000000; min-height:445px}
	
	.box-padding{padding:60px}
	.box-padding4{padding:60px 10px 60px 6%!important}
	.box-padding5{padding:60px 6% 60px 10px!important; margin-top:400px}
	.box-padding6{padding:60px 10px 60px 6%!important; margin-top:-500px}
	.box-padding7{padding:60px 6% 60px 10px!important}
	.box-padding8{padding:60px 10px 60px 6%!important; margin-top:-550px}
	.box-padding9{padding:60px 6% 60px 10px!important}
	.box-padding10{padding:60px 10px 60px 6%!important; margin-top:-550px}
	.box-padding11{padding:60px 6% 60px 10px!important}
	.box-padding12{padding:60px 10px 60px 6%!important; margin-top:-450px}
	.box-padding13{padding:60px 6% 60px 10px!important}
	.box-padding14{padding:60px 10px 60px 6%!important; margin-top:-450px}
	.box-padding15{padding:60px 6% 60px 10px!important}
	.box-padding16{padding:60px 10px 60px 6%!important; margin-top:-350px}
	.box-padding17{padding:60px 6% 60px 10px!important}
	.box-padding18{padding:60px 10px 60px 6%!important; margin-top:-180px}

	.who-box2{padding:30px}
	.button5{width: 200px!important; height: 50px!important}
	
	.w3-button{padding:10px 15px}

	.footer .img {aspect-ratio:3.6 / 1!important}

	.w3-hide-large{display:none!important}

	.w3-padding{padding:60px}
	.w3-padding-x{padding:0px 60px}
	.w3-padding-y{padding:60px 0px}
	.w3-padding-t0{padding:0px 60px 60px 60px}
	.w3-padding-t1{padding:0px 0px 60px 60px}

	.w3-col.l2{width:16.66666%}
	.w3-col.l3{width:24.99999%}
	.w3-col.l4{width:33.33333%}
	.w3-col.l5{width:41.66666%}
	.w3-col.l6{width:49.99999%}
	.w3-col.l7{width:58.33333%}
	.w3-col.l8{width:66.66666%}
	.w3-col.l9{width:74.99999%}
	}
	
@media (min-width:1441px){
	.box-padding{padding:60px}
	.box-padding2{padding:60px 8.33%!important}
	.box-padding3{padding:60px 4% 60px 8.33%!important}
	.box-padding4{padding:60px 15px 60px 8.33%!important}
	.box-padding5{padding:60px 8.33% 60px 15px!important; margin-top:800px}
	.box-padding6{padding:60px 15px 60px 8.33%!important; margin-top:-750px}
	.box-padding7{padding:60px 8.33% 60px 15px!important; margin-top:100px}
	.box-padding8{padding:60px 15px 60px 8.33%!important; margin-top:-850px}
	.box-padding9{padding:60px 8.33% 60px 15px!important; margin-top:50px}
	.box-padding10{padding:60px 15px 60px 8.33%!important; margin-top:-900px}
	.box-padding11{padding:60px 8.33% 60px 15px!important; margin-top:200px}
	.box-padding12{padding:60px 15px 60px 8.33%!important; margin-top:-800px}
	.box-padding13{padding:60px 8.33% 60px 15px!important; margin-top:100px}
	.box-padding14{padding:60px 15px 60px 8.33%!important; margin-top:-750px}
	.box-padding15{padding:60px 8.33% 60px 15px!important; margin-top:100px}
	.box-padding16{padding:60px 15px 60px 8.33%!important; margin-top:-700px}
	.box-padding17{padding:60px 8.33% 60px 15px!important; margin-top:100px}
	.box-padding18{padding:60px 15px 60px 8.33%!important; margin-top:-300px}

	.w3-hide-x-large{display:none!important}

	.w3-padding{padding:60px 8.33%}
	.w3-padding-x{padding:0px 8.33%}
	.w3-padding-y{padding:60px 0px}
	.w3-padding-t0{padding:0px 8.33% 60px 8.33%}
	.w3-padding-t1{padding:0px 0px 60px 8.33%}

	.w3-col.xl2{width:16.66666%}
	.w3-col.xl3{width:24.99999%}
	.w3-col.xl4{width:33.33333%}
	.w3-col.xl5{width:41.66666%}
	.w3-col.xl6{width:49.99999%}
	.w3-col.xl7{width:58.33333%}
	.w3-col.xl8{width:66.66666%}
	.w3-col.xl9{width:74.99999%}
	}

@font-face {
    font-family: 'opensans-regular';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#opensans-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*
@font-face {
	font-family: 'opensans-semibold';
	src: url('fonts/opensans-semibold-demo.eot');
	src: url('fonts/opensans-semibold-demo.eot?#iefix') format('embedded-opentype'),
		 url('fonts/opensans-semibold-demo.woff2') format('woff2'), 
		 url('fonts/opensans-semibold-demo.woff') format('woff'), 
		 url('fonts/opensans-semibold-demo.ttf') format('truetype'), 
		 url('fonts/opensans-semibold-demo.svg#opensans-regular') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/
@font-face {
	font-family: 'opensans-semibold';
	src: url('fonts/OpenSans-SemiBold.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
    font-family: 'OpenSans-Bold';
    src: url('fonts/OpenSans-Bold-webfont.eot');
    src: url('fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Bold-webfont.woff2') format('woff2'),
         url('fonts/OpenSans-Bold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Bold-webfont.svg#OpenSans-Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'trajanpro-regular';
    src: url('fonts/trajanpro-regular-webfont.woff2') format('woff2'),
         url('fonts/trajanpro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'trajanpro-bold';
    src: url('fonts/trajanpro-bold-webfont.woff2') format('woff2'),
         url('fonts/trajanpro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Lustria';
    src: url('fonts/Lustria-Regular.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* jssor slider navigator skin 21 css */
/*
.jssorn21 div           (normal)
.jssorn21 div:hover     (normal mouseover)
.jssorn21 .av           (active)
.jssorn21 .av:hover     (active mouseover)
.jssorn21 .dn           (mousedown)
*/
.jssorn21 div, .jssorn21 div:hover, .jssorn21 .av
{
	background: url(images/n21.webp) no-repeat;
    overflow:hidden;
    cursor: pointer;
}
.jssorn21 div { background-position: -5px -5px; }
.jssorn21 div:hover, .jssorn21 .av:hover { background-position: -35px -5px; }
.jssorn21 .av { background-position: -65px -5px; }
.jssorn21 .dn, .jssorn21 .dn:hover { background-position: -95px -5px; }

            /* jssor slider direction navigator skin 21 css */
            /*
            .jssord21l              (normal)
            .jssord21r              (normal)
            .jssord21l:hover        (normal mouseover)
            .jssord21r:hover        (normal mouseover)
            .jssord21ldn            (mousedown)
            .jssord21rdn            (mousedown)
            */
            .jssord21l, .jssord21r, .jssord21ldn, .jssord21rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(images/d21.webp) center center no-repeat;
                overflow: hidden;
            }
            .jssord21l { background-position: -3px -33px; }
            .jssord21r { background-position: -63px -33px; }
            .jssord21l:hover { background-position: -123px -33px; }
            .jssord21r:hover { background-position: -183px -33px; }
            .jssord21ldn { background-position: -243px -33px; }
            .jssord21rdn { background-position: -303px -33px; }

#elevator_item {
width: 63px;
height: 63px;
position: fixed;
right: 0px;
bottom: 0px;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
opacity: 1;
z-index: 100020;
display: none;
}
#elevator_item.off {
opacity: 0;
visibility: hidden
}
#elevator {
display: block;
width: 63px;
height: 63px;
background: url(images/iconTop.webp) center center no-repeat;
background-color: #000000;
background-color: rgba(0,0,0,.6);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
cursor: pointer;
margin-bottom: 10px
}
#elevator:hover {
background-color: rgba(0,0,0,.7)
}
#elevator:active {
background-color: rgba(0,0,0,.75)
}