/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{background: #f5f5f5; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; font-size: 16px; line-height: 1.75; height: 100%; width: 100%;}
img{max-width: 100%;}
::-moz-selection{background: #006341; color: #fff; text-shadow: none} ::selection{background: #006341; color: #fff; text-shadow: none}

.main{padding: 50px 0;}
.container{max-width: 1200px; margin: 0 auto; padding: 0 20px;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-weight: 700;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.center{text-align: center;}

.btn{display: inline-block; background: #006341; margin: auto; padding: 14px 25px; font-size: 14px; text-transform: uppercase; text-align: center; letter-spacing: 2px; color: #fff; border-radius: 50px; border: 2px transparent solid;}
.btn:hover{background: #005738; color: #fff; border: 2px #003A26 solid;}

/* HEADER */

.header{display: flex; align-items: center; flex-wrap: wrap; padding: 15px 50px;}
.header .contact{width: 33.3333%;}
.header .contact a{display: block; color: #333;}
.header .contact a:hover{color: #006341;}
.header .contact a:before{font-family: "Font Awesome 5 Free"; font-weight: 900; color: #333;}
.header .contact a.email:before{content: "\f0e0"; margin-right: 20px;}
.header .contact a.phone:before{content: "\f879"; margin-right: 15px;}

.header .logo{width: 33.3333%;}
.header .logo img{display: block; max-height: 100px; margin: auto;}

/* BODY */

.hero{background: #000 url("../siteart/hero.jpg") center center no-repeat; background-size: cover; padding: 300px 20px; text-align: center; color: #fff;}
.hero h1{margin-bottom: 25px; font-size: 48px; font-weight: 400; line-height: 1.25;}

.main .btn{display: block; max-width: 225px; margin: 50px auto;}

.img-container{display: flex;}
.img-container div{flex: 1; margin: 5px;}

/* FOOTER */

.footer{background: #006341; padding: 30px 0; text-align: center; color: #fff;}

/* RESPONSIVE */

@media screen and (max-width: 1024px){
	.header{padding: 15px 20px;}
	.main{padding: 30px 0;}
}
@media screen and (max-width: 768px){
	.hide-mobile{display: none;}
	
	.header .logo{width: 120px; order: 1;}
	.header .contact{width: calc(100% - 120px); text-align: right; order: 2;}
	
	.hero{padding: 200px 20px;}
	.hero h1{font-size: 32px;}
}
@media screen and (max-width: 480px){
	.header .contact a{font-size: 14px;}
	.header .contact a:before{font-size: 12px;}
	.header .contact a.email:before{margin-right: 10px;}
	.header .contact a.phone:before{margin-right: 5px;}
}
@media screen and (max-width: 400px){
	.header .logo{width: 90px;}
	.header .contact{width: calc(100% - 90px);}
	.header .contact a{font-size: 12px;}
}