/*Typography*/ @font-face { font-family: 'Signika Light'; src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype'); } @font-face { font-family: 'Signika Bold'; src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype'); } @font-face { font-family: 'Open Sans'; src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype'); } @font-face { font-family: 'Open Sans Bold'; src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype'); } /*Style common HTML tags*/ html { font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif; font-size: 0.9em; line-height: 1.4em; color: #363636; background-color: #fffefb; width: 100%; } /* Type something: */ a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;} p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;} i { font-style: italic; } b { font-style: oblique; } li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; } /* ul {margin: 1em 2em 0em 4em;} */ br {margin-bottom: 20em; margin-top: 20em;} h1 { font-size: 2.75em; font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; } h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; } h3 { font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 2em; } h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; } /*Site-specific*/ /* Header */ .header { background-image: url("images/banner.png"); background-color: #2CAF8F; background-repeat: no-repeat; height: 776px; background-size: 100%; background-position: 100%; } .logo { width: 247px; height: 29px; padding: 1.3em; } .logo_wrapper { } .join { width: 172px; height: 29px; padding: 1.3em; float: right; } .top { position: relative; } .top a { border-bottom: 0; } .navbar ul { background-color: white; border-radius: 100px; text-align: center; width: 875px; height: 2.55556em; margin: auto; } .navbar li { font-size: 0.9em; font-weight: bold; list-style-type: none; border-right: 1px #9BD2BF solid; padding: 0 10px 0 10px; line-height: 2.9; float: left; width: 91px; height: 2.85556em; } .navbar li:first-child { border-radius: 100px 0 0 100px; width: 81px; } .navbar li:last-child { border-right: 0; border-radius: 0 100px 100px 0; width: 81px; } .navbar li:hover { background-color: #FFDD55; } .navbar li a { display: block; text-decoration: none; border: 0; } .navbar li a:hover { color: #4B423B; } .wrapper { width: 700px; margin: auto; } .wrapper .intro_phrase { width: 450px; text-align: center; font-family: Signika Bold; margin: 1.2em auto; color: #bababa; } /* #comparisons { padding-top: 100px; background-color: #fbfbfb; background-size: cover; position: absolute; width: 100%; max-width: 1150px; } .main_title { margin-left: 2em; margin-bottom: 3em; } .section_wrapper { margin-bottom: 4em; } .title { text-align: center; font-size: 1.5em; } #free { position: relative; background-color: red; float: left; width: 45%; max-width: 450px; } #sign { position: relative; background-color: green; width: 240px; float: left; margin-top: 3em; } #proprietary { position: relative; background-color: blue; width: 45%; max-width: 450px; float: right; } .product { display: block; margin: auto; width: 250px; height: 250px; } .sign { display: block; margin: auto; width: 149px; height: 149px; } .separator { width: 1px; height: 324px; margin: auto; margin-left: 7.5em; margin-top: 3em;} #section_wrapper { position: relative; } */