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

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */
:root {
	--base-font: 18px;
	--line-height: 1.7;
	--font-family: 'Avenir Next LT Pro' , sans-serif;
	--black: #000;
	--white: #fff;
	--orange: #ff781e;
	--green: #354a3c;
	--width: 100%;
	--height: 100%;
	--font-h1: 28px;
	--font-weight-300: 300;
	--font-weight-400: 400;
	--font-weight-500: 500;
	--font-weight-600: 600;
	--font-weight-700: 700;
	--font-weight-800: 800;
	--text-decoration: none;
	--transition: all 0.25s ease-in-out;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family); font-size: var(--base-font); color: #000; }
body { background: #fff; }
input,
select,
textarea { font-family: sans-serif; font-size: 12px; color: #000; }
img { display: block; max-width: var(--width); outline: 0; }
ul,
li { list-style-position: outside; }
:focus { outline: none; }
p { margin-bottom: 20px; }
a { display: inline-block; transition: var(--transition); }
h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 30px; font-weight: var(--font-weight-700); line-height: 1.1; color: var(--orange); }
h1 { font-size: var(--font-h1); }


/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1024px; }
.centered { padding-right: calc((100% - 1024px) / 2); padding-left: calc((100% - 1024px) / 2); }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { background-color: var(--green); }
.headerBox { position: relative; width: 100%; padding-top: 8px; padding-bottom: 8px; }
.headerBox .logo { display: inline-block; position: relative; z-index: 2; }
.headerBox .logo img { max-width: 100%; }
.headerBox .bg { position: absolute; top: 0; right: 0; height: 100%; }
.headerBox .bg img { height: 100%; }


/* ### content container ### */
#contentCntr { width: 100%; }

/* ### banner box ### */
.bannerBox .image img { width: 100%; object-fit: cover; object-position: center center; }

/* ### intro box ### */
.introBox { padding-top: 45px; }
.introBox .wrap { display: flex; flex-wrap: wrap; }
.introBox .wrap .left { width: 75%; background-color: var(--green); padding: 35px 40px 30px 100px; transform: translate(-60px, -85px); }
.introBox .wrap .white {background-color:var(--white);}
.introBox h1 { margin-left: -70px; }
.introBox p { color: var(--white); }
.introBox .white p {color:var(--base-font);}
.introBox .wrap .right { width: 25%; }
.introBox .right .title { font-size: 30px; color: var(--green); font-weight: var(--font-weight-600); text-align: right; }
.introBox .right .image { margin-top: 45px; }
.introBox .right .image img { margin-left: auto; }

.button {
	color:#354A3C; border: 1px solid #354A3C; padding:10px 25px; text-decoration: none;
}

.button:hover {
	background:#354A3C;
	color:#fff;
}

	/* ### footer container ### */
#footerCntr { width: 100%; }
.footerBox { font-size: 16px; line-height: 1.2; padding-bottom: 35px; position: relative; z-index: 2; margin-top: -30px; margin-left: 50px; }
.footerBox address { font-style: normal; }
.footerBox ul { list-style: none; }
.footerBox ul > li > a { text-decoration: none; color: var(--black); }
.footerBox ul > li > a:hover { text-decoration: underline; }

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

@media only screen and (max-width: 1440px) {
	.headerBox .bg { right: -150px; }

}

@media only screen and (max-width: 1199px) {
	.headerBox { padding-top: 5px; padding-bottom: 2px; }
	.headerBox .bg { right: -270px; }
	.centered { padding-left: 20px; padding-right: 20px; }
	.bannerBox .image img { min-height: 250px; }
	.introBox .wrap .left { transform: translate(-10px, -85px); padding: 35px 40px 30px 60px; }
	.introBox h1 { margin-left: -30px; }
}

@media only screen and (max-width: 991px) {
	.introBox .wrap .left { transform: translate(-10px, -85px); padding: 35px 20px 30px 40px; width: 65%; }
	.introBox .wrap .right { width: 35%; }
	.headerBox .bg { right: -190px; width: 100%; }
	.footerBox { margin-left: 30px; }
}

@media only screen and (max-width: 767px) {
	.headerBox { padding-top: 35px; padding-bottom: 15px; }
	.headerBox .bg { right: 0; width: 110%; height: 18px; }
	.headerBox .bg img { width: 100%; }
	.bannerBox .image img { min-height: 140px; }
	.introBox .wrap .left { transform: translate(0, -65px); padding: 50px 20px 30px 30px; width: calc(100% + 110px); margin-left: -20px; margin-right: -20px; }
	.introBox .wrap .right { width: 100%; margin-top: -50px; }
	.introBox .right .image:first-child { margin-top: 0 }
	.introBox .right .image img { margin: 0 auto; }
	.introBox .right .title { text-align: center; display: none; }
	.introBox h1 { margin-left: 0; }
	.footerBox { margin-left: 10px; margin-top: 90px; }
}

@media only screen and (max-width: 480px) {
	.menuBox:not(.mm-menu) { display: none; }
	#headerCntr .mobileMenu { display: block; }
}