html, body						{ margin: 0; padding: 0; border: 0; outline: 0; background: #ECF1F5; height: 100%; font-size: 100%; }
body#grey						{ background: #f7f7f7 none; }

a							{ text-decoration: none; }

p#logo							{ font: .95em 'Roboto', sans-serif; color: #bfbfbf; font-weight: 400; margin: 0; padding-left: .25em; }
header#top						{ background-color: #f7f7f7; padding: 0 0 1em 0; border-bottom: 2px solid #265373; }

h1							{ font: 2.4em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 auto; padding: .3em 0 0 0; width: 830px; min-width: 830px; line-height: 1.38; }
h2							{ font: 1.6em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 auto; padding: 0 0 1em 0; width: 750px; min-width: 750px; line-height: 1.44; }

section#videowrapper                                    { width: 896px; margin: 0 auto; }
.videowrap						{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.videowrap iframe					{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

div.green-button					{ display: block; box-sizing: border-box; width: 896px; background-color: #1e6c40; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 2em auto 0 auto; padding: 1.25em 1% 1.4em 1%; border-radius: .1em; }
div.green-button:hover                                  { background-color: #2c995b; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.blue-button                                         { display: block; box-sizing: border-box; width: 896px; background-color: #365b78; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 2em auto 0 auto; padding: 1.25em 1% 1.4em 1%; border-radius: .1em; }
div.blue-button:hover                                   { background-color: #457499; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.buttonhead						{ font: 2em 'Roboto', sans-serif; font-weight: 700; }
div.buttonbody						{ font: 1.5em 'Roboto', sans-serif; font-weight: 700; opacity: .7; }

footer							{ font: 1em nimbus-sans, sans-serif; color: #bfbfbf; font-weight: 400; text-align: center; padding-top: 5em; }
footer#video						{ padding-top: 1em; }
footer#dark						{ color: #bfbfbf; padding-top: 1em; }


@media only screen and                                  (max-width: 950px) {

p#logo							{ font: 1em 'Roboto', sans-serif; color: #bfbfbf; font-weight: 400; text-align: center; padding-left: 0; }
header#top						{ background-color: #f7f7f7; padding: 0 0 1em 0; border-bottom: 2px solid #265373; }

h1							{ font: 2.2em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 5%; padding: .5em 0 0 0; width: 90%; min-width: 0; line-height: 1.40; }
h2							{ font: 1.5em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 5%; padding: 0 0 1em 0; width: 90%; min-width: 0; line-height: 1.50; }

section#videowrapper                                    { width: 94%; margin: 0 3%; }

div.green-button					{ box-sizing: border-box; width: 94%; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 2em 3% 0 3%; padding: 1.25em 1% 1.4em 1%; border-radius: .1em; }
div.green-button:hover                                  { background-color: #2c995b; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.blue-button                                         { box-sizing: border-box; width: 94%; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 2em 3% 0 3%; padding: 1.25em 1% 1.4em 1%; border-radius: .1em; }
div.blue-button:hover                                   { background-color: #2c995b; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.buttonhead						{ font: 2.2em 'Roboto', sans-serif; font-weight: 700; }
div.buttonbody						{ font: 1.5em 'Roboto', sans-serif; font-weight: 700; opacity: .7; }

}


@media only screen and                                  (max-width: 600px) {

p#logo							{ font: 1em 'Roboto', sans-serif; color: #bfbfbf; font-weight: 400; text-align: center; padding-left: 0; }
header#top						{ background-color: #f7f7f7; padding: 0 0 1.5em 0; border-bottom: 2px solid #265373; }

h1							{ font: 1.8em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 3%; padding: .5em 0 0 0; width: 94%; min-width: 0; line-height: 1.39; }
h2							{ font: 1.4em 'Roboto', sans-serif; color: #262626; font-weight: 700; text-align: center; margin: 0 3%; padding: 0 0 .5em 0; width: 94%; min-width: 0; line-height: 1.45; }

section#videowrapper                                    { width: 100%; margin: 0; }

div.green-button					{ box-sizing: border-box; width: 94%; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 1em 3% 0 3%; padding: .95em 1% 1em 1%; border-radius: .1em; }
div.green-button:hover                                  { background-color: #2c995b; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.blue-button                                         { box-sizing: border-box; width: 94%; transition: background-color 1s ease-in-out 0s; color: white; text-align: center; margin: 1em 3% 0 3%; padding: .95em 1% 1em 1%; border-radius: .1em; }
div.blue-button:hover                                   { background-color: #2c995b; color: #fafafa; box-shadow: 0 0 1px #b3b3b3; }

div.buttonhead						{ font: 2em 'Roboto', sans-serif; font-weight: 700; }
div.buttonbody						{ font: 1.5em 'Roboto', sans-serif; font-weight: 700; opacity: .7; }

}