/* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Open Sans", sans-serif; color: #66666; background-color: #fff; } a { color: #f5484a; text-decoration: none; } img { max-width: 100%; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .cd-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1170px; margin: 0 auto; } .cd-container:after { content: ""; display: table; clear: both; } .has-top-margin { /* this class is given - using jQuery - to the .cd-main-content following the .cd-secondary-nav when it becomes fixed */ } @media only screen and (min-width: 768px) { .has-top-margin { -webkit-animation: animate-margin-top 0.3s; -moz-animation: animate-margin-top 0.3s; animation: animate-margin-top 0.3s; margin-top: 70px; } } @-webkit-keyframes animate-margin-top { 0% { margin-top: 100px; } 100% { margin-top: 70px; } } @-moz-keyframes animate-margin-top { 0% { margin-top: 100px; } 100% { margin-top: 70px; } } @keyframes animate-margin-top { 0% { margin-top: 100px; } 100% { margin-top: 70px; } } /* -------------------------------- Navigation -------------------------------- */ .cd-header { position: absolute; top: -44px; left: 688px; width: 170px; height: 188px; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2); background-color: transparent; z-index: 3; } @media only screen and (min-width: 768px) { .cd-header { height: 70px; background-color: transparent; box-shadow: none; } } #cd-logo { float: left; margin: 13px 0 0 5%; } #cd-logo img { display: block; } @media only screen and (min-width: 768px) { #cd-logo { margin: 23px 0 0 5%; } } @media only screen and (min-width: 768px) { #cd-logo.is-hidden { /* assign a position fixed and move outside the viewport (on the left) */ opacity: 0; position: fixed; left: -20%; margin-left: 0; -webkit-transition: left 0.3s, opacity 0.3s; -moz-transition: left 0.3s, opacity 0.3s; transition: left 0.3s, opacity 0.3s; } #cd-logo.is-hidden.slide-in { /* slide in when the secondary navigation gets fixed */ left: 5%; opacity: 1; } } .cd-primary-nav { /* mobile first - navigation hidden by default, triggered by tap/click on navigation icon */ float: right; margin-right: 5%; width: 44px; height: 100%; background: url("../img/cd-icon-menu.svg") no-repeat center center; background-size: 44px 44px; } .cd-primary-nav ul { position: absolute; top: 0; left: 0; width: 100%; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .cd-primary-nav ul.is-visible { -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .cd-primary-nav a { display: block; height: 50px; line-height: 50px; padding-left: 5%; background: #000101; border-top: 1px solid #051426; color: #f0eee1; } @media only screen and (min-width: 768px) { .cd-primary-nav { /* reset navigation values */ width: auto; height: auto; background: none; } .cd-primary-nav ul { position: static; width: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); line-height: 70px; } .cd-primary-nav ul.is-visible { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-primary-nav li { display: inline-block; margin-left: 1em; } .cd-primary-nav a { display: inline-block; height: auto; line-height: normal; background: transparent; padding: .6em 1em; border-top: none; color: #030d18; } } /* -------------------------------- Intro -------------------------------- */ #cd-intro { position: relative; height: 300px; background: url(/imfd/fdp0v1.png) no-repeat center; background-color: #FFF; background-size: cover; z-index: 2; } #cd-intro #cd-intro-tagline { width: 30%; max-width: 1170px; margin: 0 auto; text-align: center; padding-top: 120px; margin-right: auto; margin-bottom: 0; margin-left: 60%; } #cd-intro h1 { font-size: 20px; font-size: 1.5rem; font-weight: 300; color: #030d18; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } @media only screen and (min-width: 768px) { #cd-intro { height: 400px; } #cd-intro #cd-intro-tagline { padding-top: 160px; } #cd-intro h1 { font-size: 24px; font-size: 2rem; } } @media only screen and (min-width: 768px) { #cd-intro { height: 600px; } #cd-intro #cd-intro-tagline { padding-top: 0px; } } .cd-btn1 { display: inline-block; background-color: rgba(245, 72, 74, 0.9); margin-top: 1em; border-radius: 10em; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: white; padding-top: 0.1em; padding-right: 0.3em; padding-bottom: 0.1em; padding-left: 0.3em; } .cd-btn { display: inline-block; background-color: rgba(245, 72, 74, 0.9); margin-top: 17em; border-radius: 20em; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: white; padding-top: 0.7em; padding-right: 0.4em; padding-bottom: 0.7em; padding-left: 0.4em; } .no-touch .cd-btn:hover { background-color: #f5484a; } @media only screen and (min-width: 768px) { .cd-btn.is-hidden { /* assign a position fixed and move outside the viewport (on the right) */ opacity: 0; position: fixed; right: -20%; top: 4em; padding: .2em 1.1em; margin: 14px 0 0; -webkit-transition: right 0.3s, opacity 0.3s; -moz-transition: right 0.3s, opacity 0.3s; transition: right 0.3s, opacity 0.3s; } .cd-btn.is-hidden.slide-in { /* slide in when the secondary nav gets fixed */ right: 5%; opacity: 1; } } /* -------------------------------- Placeholder Sections -------------------------------- */ .cd-section { margin: 0 auto; padding: 2em 0; } .cd-section h2 { font-size: 20px; font-size: 1.25rem; margin-bottom: .6em; font-weight: 700; } .cd-section p { line-height: 1.6; } @media only screen and (min-width: 768px) { .cd-section { margin: 0 auto; padding: 4em 0; } .cd-section h2 { font-size: 20px; font-size: 1.25rem; } .cd-section p { font-size: 20px; font-size: 1.25rem; } } /* button submit */ #monForm input[type="submit"] { border: #DDEEFF 1px solid; width: 27%; } #monForm input[type="submit"]:hover { background-color: #66CC33; cursor: pointer; } #monForm input[type="reset"] { border: #DDEEFF 1px solid; width: 27%; } #monForm input[type="reset"]:hover { background-color: #E6484D; cursor: pointer; }