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

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap');

/* #Site Styles
================================================== */

:root {
	--width-base-large: 1024px;
	--width-base: 890px;
	--font-size-base: 17px;
	--font-size-italic: 16px;
	--font-size-large: 21px;
	--line-height-base: 1.6;
	--line-height-xl: 1.9;
	--color-white: #fff;
	--color-black: #000;
	--color-gray: #3C3C3B;
	--color-light-gray: #F0EDEB;
	--color-yellow: #D8882B;
	--gray-background: #FBF9F7;
	--line-height-heading: 1.2;
	--font-family: 'Open Sans', sans-serif;
	--font-style: normal;
	--font-size-h1: 41px;
	--font-size-h2: 30px;
	--font-size-h3: 24px;
	--font-size-h4: 20px;
	--base-duration: all 0.3s;

}


/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-size: var(--font-size-base); font-family: var(--font-family); color: var(--color-black); line-height: var(--line-height-base); }
body { position: relative; background: var(--color-light-gray); }
body:before { position: absolute; content: ''; top: 0; left: 0; background-color: #fff; width: 100%; height: 182px;  }
body:after { z-index: -1; position: absolute; content: ''; bottom: 0; left: 0; background-color: #fff; width: 100%; height: 89px;  }
input,
select,
textarea { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-black); }
img {  max-width: 100%; display: block; border: 0; }
ul,
li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.center { margin: 0 auto; position: relative; max-width: var(--width-base); }
.centered{ padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
.button { text-decoration: none; text-transform: uppercase; padding: 17px 25px; display: inline-block; color: var(--color-black); background-color: var(--color-yellow); }

/* ### wrapper ### */
#wrapper { margin: 0 auto; max-width: var(--width-base-large); overflow: hidden; position: relative; display: block; width: 100%; min-height: 100%; }

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

/* ### header container ### */
#headerCntr { position: relative; width: 100%; padding-top: 23px; padding-bottom: 25px; }
#headerCntr .logo img { max-width: 100%; }

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

/* ### banner box ### */
.bannerBox { position: relative; }
.bannerBox .title { position: absolute; bottom: 0; left: 0; background-color: rgba(60,60,59,0.9); content: ''; width: 628px; height: 137px; }
.bannerBox .title h1 { font-size: var(--font-size-h1); color: var(--color-white); font-weight: 400; padding: 40px; }
.bannerBox .images img { object-fit: cover; object-position: center center; }

/* ### intro box ### */
.introBox { background-color: var(--color-yellow); }
.introBox .holder { display: flex; flex-wrap: wrap; justify-content: space-between; }
.introBox .holder .left { padding-top: 35px; padding-bottom: 35px; width: 63%; }
.introBox .holder p { color: #fff; font-size: var(--font-size-large); }
.introBox .holder .right { width: calc(37% + 78px); margin-right: -78px; position: relative; }
.introBox .holder .name { position: absolute; bottom: 20px; left: 35px; font-size: var(--font-size-italic); font-style: italic; font-weight: 500; color: var(--color-white); }

/* ### content box ### */
.contentBox .holder { padding-top: 45px; padding-bottom: 25px; background-color: var(--gray-background); display: flex; flex-wrap: wrap; justify-content: space-between; }
.contentBox .holder p { font-size: var(--font-size-base); margin-bottom: 40px; line-height: var(--line-height-xl); }
.contentBox .holder .button { margin-bottom: 45px; }

/* ### right container ### */
#rightCntr { float: right; width: 320px; text-decoration: underline; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; background-color: var(--color-white); }
#footerCntr .holder { display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 25px; padding-bottom: 25px; }
#footerCntr .holder .left { width: 46%; padding-right: 45px; }
#footerCntr .holder .right { width: 54%; border-left: 1px solid var(--color-yellow); padding-left: 45px; }
.introBox .holder .name { left: 70px; }
#footerCntr .holder address { font-style: normal; }
#footerCntr .holder .mail { color: var(--color-black); }
#footerCntr .holder .phone { text-decoration: none; color: var(--color-black); }
#footerCntr .copyright { background-color: var(--color-gray); padding-top: 25px; padding-bottom: 30px; }
#footerCntr .copyright ul { display: flex; flex-wrap: wrap; justify-content: center; }
#footerCntr .copyright ul > li { margin: 0 10px; position: relative; font-size: var(--font-size-large); font-weight: 300; text-transform: uppercase; text-decoration: none; color: var(--color-white); }
#footerCntr .copyright ul > li:after { position: absolute; top: 14px; right: -12px; content: ''; height: 4px; width: 4px; background-color: var(--color-yellow); border-radius: 50%; }
#footerCntr .copyright ul > li:last-child:after { display: none; }

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

@media only screen and (max-width: 992px) {
	.centered { padding-left: 15px; padding-right: 15px; }
	.introBox .holder .left { width: 100%; padding-top: 25px; padding-bottom: 30px; }
	.introBox .holder .right {  width: calc(100% + 78px); margin-left: -50px }
}

@media only screen and (max-width: 780px) {
	.bannerBox .title { width: 100%; height: 100px; }
	.bannerBox .title h1 { font-size: 30px; padding: 20px 15px; }
	.bannerBox .images img { min-height: 500px; }
	.introBox .holder p { font-size: var(--font-size-base); line-height: var(--line-height-xl); }
	.contentBox .holder { padding-top: 35px; }
	.contentBox .holder p:last-child { margin-bottom: 0; }
	#footerCntr .holder .left { width: 100%; padding-bottom: 40px; }
	#footerCntr .holder .right { width: 100%; border: none; padding-left: 0; }
	#footerCntr .copyright ul > li { font-size: var(--font-size-base); }
}

@media only screen and (max-width: 480px) {
	.bannerBox .title h1 { font-size: 25px; padding: 25px 15px; }
	.bannerBox .images img { min-height: 400px; }
}