$blue: #3373EA;
html {
height: 100%; max-height: auto; width: 100%; text-align: center; font-family: "Hevletica-Neue", "Arial", sans-serif; font-family: 'Lustria', serif; font-family: 'Overlock', cursive; font-family: 'Spinnaker', sans-serif; font-family: 'Pacifico', cursive; font-family: 'Lato', sans-serif; font-family: 'Roboto', sans-serif; //font-family: 'Montserrat', sans-serif; //font-family: 'Fira Sans', sans-serif;
}
body {
margin: 0; top: 0; height: 100%; min-width: 100%; margin: 0; position: relative;
}
.container {
height: 100%; width: 100%; position: absolute; top: 0; z-index: 1;
}
.header {
position: relative; width: 100%; height: 70px; background: white; box-shadow: 0 0 6px 1px rgba(0,0,0,0.4); padding-top: 6px; box-sizing: border-box; z-index: 9; #header-logo { position: absolute; height: 80%; top: 0; left: 5%; } .header-menu-desktop { position: relative; display: inline-block; vertical-align: top; @media screen and (max-width: 800px){display: none;} .header-link { position: relative; display: inline-block; vertical-align: middle; font-size: 25px; text-decoration: none; color: black; margin: 10px; } } #open-menu-mobile { position: absolute; height: 90%; top: 0; right: 5%; cursor: pointer; @media screen and (min-width: 800px){display: none;} }
} header-menu-mobile {
position: fixed; left:0;right:0;top:0;bottom:0; z-index: 999; background: rgba(0,0,0,0.8); display: none; padding: 10% 0; box-sizing: border-box; @media screen and (min-width: 800px){width: 0;} #close-header-menu-mobile { position: absolute; left:0;right:0;top:0;bottom:0; } .header-link { position: relative; display: inline-block; padding: 15px; color: white; z-index: 2; text-decoration: none; font-size: 20px; transition: all 0.5s; } .header-link:hover {color: #2B67FF;}
}
hero {
position: relative; width: 100%; height: 300px; padding: 50px 20px 20px 20px; box-sizing: border-box; background-image: cover; background-position: center center;
}
contact-form {
position: relative; display: inline-block; vertical-align: top; width: 600px; max-width: 100%; text-align: left; padding: 25px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #E0E0E0; .big { position: relative; display: inline-block; font-weight: bold; font-size: 20px; padding: 90px 0; width: 100%; text-align: center; } .contact-field { position: relative; width: 100%; max-width: 100%; resize: vertical; padding: 10px; margin: 5px auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: none; outline: none; font-family: 'Arial', sans-serif; font-size: 20px; } #contact-submit { position: relative; background-color: $blue; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 10px 30px; border: none; outline: none; color: white; font-weight: bold; font-size: 20px; cursor: pointer; }
} .connect-wrapper {
position: relative; display: inline-block; vertical-align: top; width: 300px; padding: 25px; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; .connect-h {font-size: 120%;}
}
footer {
position: relative; width: 100%; background: #232323; color: white; padding: 40px 20px 20px 20px; box-sizing: border-box; border-top: 1px #9F9EFF solid; @media screen and (max-width: 800px){font-size: 80%} .footer-menu { position: relative; display: inline-block; width: 50%; text-align: center; @media screen and (max-width: 800px){width: 100%;} .footer-menu-link { position: relative; display: inline-block; margin: 10px 5px; color: white; text-decoration: none; font-size: 20px; font-weight: bold; } .map-h {position: relative;margin: auto;width: 300px;} .footer-map { position: relative; display: block; margin: auto; width: 300px; height: 200px; } .footer-logo { position: relative; height: 80px; } } .footer-social { position: relative; display: inline-block; vertical-align: top; width: 40%; text-align: center; @media screen and (max-width: 800px){width: 100%;margin-top: 17px;} .social-wrapper { position: relative; display: inline-block; width: 46px; height: 30px; overflow-x: visible; text-align: center; padding: 20px 12px; margin: 0 5px; border-radius: 50%; background: white; .social { height: 30px; position: relative; display: inline-block; margin: auto; } } } .footer-c {position: relative;width: 100%;margin-top: 50px;font-size: 80%;}
}