/*

Author: Hello Developers
Author URI: http://www.hello-developers.com
Description: Holder page for Strong Fit Effective
Version: 1.0

*/

@font-face {
    font-family: 'montserratregular';
    src: url('fonts/montserrat-regular-webfont.woff2') format('woff2'),
         url('fonts/montserrat-regular-webfont.woff') format('woff');,
         url('fonts/montserrat-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratbold';
    src: url('fonts/montserrat-bold-webfont.woff2') format('woff2'),
         url('fonts/montserrat-bold-webfont.woff') format('woff');,
         url('fonts/montserrat-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* { border: 0; margin: 0; padding: 0; }
body, html { display: block; height: 100vh; font-family: 'montserratbold', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.2; letter-spacing: 0; text-align: center; }
#homepage { width: 100%; height: 100%; position: relative; display: block; margin: 0 auto; }

#header { width: 100%; }
#footer { width: 100%; }
#buttons { width: 100%; display: flex; justify-content: space-around; align-items: center; flex-direction: column }
.logo { width: 100%; max-width: 250px; height: auto; }
.left { width: 50%; height: 100vh; float: left; display: flex; flex-flow: column; align-items: center; justify-content: space-around; background: linear-gradient( rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)), url(images/background.jpg); background-size: cover; background-position: center; }
.right { width: 50%; height: 90vh; margin: 5vh 0; float: right; display: flex; flex-flow: column; align-items: center; justify-content: space-between; }

h1 { font-size: 26px; margin-bottom: 10px; background: orange; display: block; width: 100%; padding: 10px 0; font-weight: 600; text-transform: uppercase; color: white; letter-spacing: 0.25em; margin: 1em 0; }
h2 { font-size: 22px; margin-bottom: 10px; background: rgb(53, 79, 156); display: block; width: 100%; padding: 10px 0; font-weight: 600; text-transform: uppercase; color: white; letter-spacing: 0.25em; margin: 1em 0; }
h3 { font-size: 14px; display: block; text-transform: uppercase; color: orange; letter-spacing: 0.25em; line-height: 2; margin-top: 2.5px; }
.button { width: 200px; color: white; background-color: seagreen; box-shadow: 1px 1px 2px black; font-size: 14px; text-transform: uppercase; padding: 15px; letter-spacing: 0.25em; }
a.button { font-family: 'montserratregular', Arial, Helvetica, sans-serif; text-decoration: none; text-shadow: 0.5px 0.5px 0.5px black; transition: ease-in-out 0.2s; }
a.button:hover { text-shadow: 1px 1px 1px black; }


@media screen and (max-width: 1000px) {
	h1 { font-size: 18px; }
	h2 { font-size: 16px; }
	h3 { font-size: 14px; }
	.logo { max-width: 200px; }
	.button { font-size: 12px; width: 150px; }
	.left, .right {width: 100%; }
}