:root{--body-bg:hsl(211, 14%, 39%);--content-bg:hsl(220, 19%, 81%);--text-color-dark:hsl(180, 1%, 22%);--text-color-light:hsl(224, 100%, 97%);--green-dark:hsl(195, 40%, 17%);--green-light:hsl(195, 42%, 20%);box-sizing:border-box;font-family:'Roboto', sans-serif;font-size:1em;font-weight:300;color:var(--text-color-dark);}
*,::before,::after{box-sizing:inherit;font-family:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
*:focus{outline:none;}
.clearfix::after{display:block;content:" ";clear:both;}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;padding:0;background-color:var(--body-bg);}
header{}
.contact-top{width:100%;height:3.125em;background-color:var(--green-dark);}
@media (max-width:1200px){.contact-top{display:none;}
}
.contact-container{display:flex;height:100%;max-width:1200px;margin:0 auto;align-items:center;}
.contact-media{display:flex;align-items:center;height:1.5em;}
.contact-media:first-child{margin-right:3.75em;}
.contact-media > img{margin-right:.8em;}
.contact-media > p{color:var(--text-color-light);font-weight:300;text-shadow:0.5px 2px 1px rgba(0, 0, 0, 0.17);}
.feedback-button{margin-left:auto;padding:.5em 2em;text-align:center;background-color:var(--green-dark);font-size:1em;font-weight:300;color:var(--text-color-light);border:1px solid #55616f;z-index:20;cursor:pointer;transition:background-color .7s;}
.feedback-button:hover{background-color:var(--green-light);}
.feedback-modal{display:none;}
.feedback-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:hsla(0, 0%, 0%, 0.4);z-index:30;}
.feedback-modal-body{position:fixed;top:3.125em;min-height:30em;right:30%;left:30%;padding:2em 3em;background-color:#dedede;overflow:auto;z-index:40;}
.close-feedback-modal{position:absolute;top:.3em;right:.3em;padding:.3em;cursor:pointer;font-size:1.9em;height:1em;width:1em;border-radius:2px;text-indent:10em;overflow:hidden;border:0;}
.close-feedback-modal::after{position:absolute;line-height:.5;top:.23em;left:.22em;text-indent:0;content:"\00D7"}
.feedback-modal-body h2{font-size:1.4rem;font-weight:500;}
.feedback-modal-body p{font-weight:300;font-size:.9rem;}
.feedback-form label{width:30%;display:inline-block;float:left;}
.feedback-form input{width:70%;height:2em;padding:.3em .5em;}
.feedback-form textarea{padding:.5em;width:70%;}
.feedback-form input,
.feedback-form textarea{background:#eee;border:1px solid #aaa;box-shadow:0px 0px 3px #ccc, 0 5px 5px #eee inset;border-radius:2px;padding-right:20px;}
.feedback-form input:focus,
.feedback-form textarea:focus{background:#fefefe;border:1px solid var(--green-dark);box-shadow:0 0 3px #aaa;}
.feedback-form button{margin-left:30%;padding:.5em 2em;text-align:center;background-color:var(--green-dark);font-size:.9rem;font-weight:300;color:var(--text-color-light);border:1px solid #55616f;cursor:pointer;transition:background-color .7s;}
.feedback-form button:hover{background-color:var(--green-light);}
.header-main{width:100%;height:7.185em;background-color:var(--green-light);box-shadow:0.8px 3px 10px rgba(0, 0, 0, 0.2);}
@media (max-width:1200px){.header-main{height:initial;}
}
.header-container{position:relative;max-width:1200px;margin:0 auto;}
.logo{margin-left:-5px;padding-top:15px;}
@media (max-width:1200px){.logo{max-width:100%;padding:1em 1em .5em;}
}
.hero,
.hero-bg{position:absolute;z-index:10;}
@media (max-width:1200px){.hero,
.hero-bg{display:none;}
}
.hero-bg{top:-197px;right:-72px;z-index:-10;}
.hero{top:-28px;right:97px;}
main{flex:1;margin-bottom:2em;}
@media (max-width:1200px){main{margin-bottom:0;}
}
.main-container{max-width:1200px;margin:8.25em auto 0;background-color:#c6ccd8;box-shadow:1px 1px 10px rgba(0, 0, 0, 0.2);}
@media (max-width:1200px){.main-container{min-height:100%;margin-top:1px;}
}
nav{width:100%;background-color:var(--green-dark);position:sticky;top:0;z-index:1;}
nav > ul{display:flex;margin:0;padding-left:2em;list-style:none;}
@media (max-width:1200px){nav > ul{padding:0 2em;justify-content:space-between;}
}
nav > ul > li + li{margin-left:2em;}
@media (max-width:1200px){nav > ul > li + li{margin-left:0;}
}
nav > ul > li > a{display:block;padding:.575em 0 .825em;border-top:4px solid transparent;text-decoration:none;font-size:1.125em;font-weight:400;color:rgb(198, 204, 216);text-shadow:0.5px 2px 1px rgba(0, 0, 0, 0.45);transition:border-top-color 1s, color 1s;}
nav > ul > li > a:hover{color:rgb(215, 226, 240);border-top-color:#b8d0ec;}
nav > ul > li > a:active{color:rgb(215, 226, 240);border-top-color:#b8d0ec;}
.main-nav-active{color:rgb(215, 226, 240);border-top-color:#b8d0ec;}
.main-content{display:flex;flex-direction:column;width:100%;padding:2em;}
.main-media{display:flex;justify-content:space-between;}
.main-divider{width:100%;height:1px;margin:2em auto;background-color:var(--green-dark);}
.main-media > img{display:block;flex:1;margin-right:2.75em;}
@media (max-width:1200px){.main-media > img{display:none;}
}
.main-text{flex:1;}
.main-text > h1{margin:0 0 2rem;padding:0;font-size:2rem;color:var(--green-dark);line-height:.9em;font-weight:500;}
.main-text p{font-size:1rem;font-weight:300;}
.main-content-row{display:flex;justify-content:space-between;margin-top:2em;min-height:10em;}
@media (max-width:1200px){.main-content-row{flex-direction:column;}
}
.main-tile{text-decoration:none;flex:1;}
.main-tile:hover{}
.main-tile + .main-tile{margin-left:1.9em;}
.main-tile figure{min-height:100%;min-width:100%;padding:0;margin:0;text-align:center;}
.main-tile img{max-width:100%;max-height:11em;}
.main-tile figcaption{background-color:var(--green-light);padding:.2em .5em;text-decoration:none;text-align:center;color:var(--text-color-light);font-weight:300;}
@media (max-width:1200px){.main-tile + .main-tile{margin-left:0;margin-top:2em;}
}
.prod-content{display:flex;padding:2em;}
@media (max-width:1200px){.prod-content{flex-direction:column;}
}
.prod-content > div{flex:1;}
.prod-content > div:last-child{border-left:1px solid #1a343d;padding-left:2em;}
@media (max-width:1200px){.prod-content > div:last-child{border-left:0;padding-left:0;}
}
.prod-content h3{color:var(--green-dark);font-weight:500;margin:2rem 0;font-size:2rem;line-height:.9em;}
.prod-content > div > h3:first-child{margin-top:0;}
@media (max-width:1200px){.prod-content > div:last-child > h3:first-child{margin-top:2rem;}
}
.prod-content ul{list-style:none;padding:0;font-weight:500;}
.product{margin-left:2em;font-weight:300;}
.product > div{overflow-x:auto;}
@media (max-width:1200px){.product{margin-left:0;}
}
.prod-content ul > li + li{margin-top:.3em;}
.product > span{border-bottom:1px dashed #1a343d;cursor:pointer;}
.prod-content ul > li:first-child{margin-top:1em;}
.invisible-desc table{display:none;}
.product table{border-spacing:.7em;}
@media (max-width:1200px){.product table{margin-left:-0.7rem;}
}
th{font-weight:500;font-size:.8rem;}
td{padding:.3em .5em;border:1px solid var(--green-dark);}
.cont-content{padding:2em 2em 4em;}
.cont-content > h1, .cont-content > h3{color:var(--green-dark);font-weight:500;margin:2rem 0;font-size:2rem;line-height:.9em;}
.cont-content h1{margin-top:0;}
.cont-head{font-weight:500;}
@media (max-width:1200px){.cont-head::after{content:"";display:block;}
}
.google-map{width:100%;height:400px;margin-top:2em;box-shadow:1px 1px 10px rgba(0, 0, 0, 0.2);}
footer{background-color:#1d3b47;}
.contact-footer{width:100%;background-color:#1d3b47;}
.contact-footer-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-around;}
@media (max-width:1200px){.contact-footer-container{flex-direction:column;align-items:flex-start;padding:.6em 2em;}
}
.footer-tile{display:flex;flex-direction:column;align-items:center;margin:1em 0 1.5em;}
@media (max-width:1200px){.footer-tile{flex-direction:row;justify-content:flex-start;margin:0;}
.footer-tile:last-child{display:none;}
}
.footer-divider{width:2px;height:48px;background-color:#284553;margin-top:1.56em;}
@media (max-width:1200px){.footer-divider{display:none;}
}
.footer-h1{display:block;padding:.5em 0 .5em;font-size:1.125em;color:rgb(198, 204, 216);text-shadow:0.5px 2px 1px rgba(0, 0, 0, 0.45);}
@media (max-width:1200px){.footer-h1{padding:.2em 0;}
}
.footer-content{display:block;padding:0 1em;color:rgb(116, 142, 151);}
.promo-footer{width:100%;background-color:var(--green-dark);}
.promo-footer-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;}
.logo-footer{padding:.5em 0 .3em;}
@media (max-width:1200px){.logo-footer{margin-left:2em;padding:.5em 0;}
}
.promo-footer-container > p{color:rgba(240, 244, 255, 0.2);font-size:.9em;font-weight:400;}
@media (max-width:1200px){.promo-footer-container > p{display:none;}
}