* { padding: 0; margin: 0; }
.clear { clear: both; }

#background { position: fixed; height: 100%; width: 100%; background-color: #012055; z-index: -1; top: 0;  background-image: url(images/page-bg-3.jpg); background-size: fit; background-repeat: no-repeat; }
#page-container { max-width: 1000px; margin: 25px auto 50px auto; box-sizing: border-box; padding: 15px; background-color: #223d68; border: 1px #777 solid; }

#header { background-color: #fff; height: 150px; padding: 15px 0; }

#header img { height: 100%; width: auto; display: block; margin: 0 auto; }

#content { background-image: url(images/text-bg-2.jpg); background-size: contain; background-repeat: no-repeat; padding-top: 15px; }
#text { box-sizing: border-box; padding: 20px; font-family: Open Sans, sans-serif; color: #fff; font-size: 20px; line-height: 35px; margin-bottom: 50px; }
.inner #content { background-image: none; background-color: #213d68; }
.inner #text { background-color: #e9ebed; color: #000; margin-top: 15px; font-size: 18px; line-height: 30px; padding-top: 40px; background-image: url(images/compass-bg-light-1.jpg); background-repeat: no-repeat; }
.inner #text p { margin-bottom: 20px; font-weight: 400; }
.inner #text ul { margin-bottom: 30px; }
.inner #text li { margin-left: 30px; margin-bottom: 10px; font-weight: 400; }
.inner #text h1 { font-weight: 300; font-size: 40px; margin-bottom: 60px; font-style: normal; }

#nav { margin-bottom: 75px; }
.inner #nav { margin-bottom: 15px; }
.button { border: 2px #fff solid; float: left; width: 32%; margin-right: 2%; height: 42px; font-size: 22px; font-family: Open Sans, sans-serif; font-weight: 700; transition: background-color .3s ease-in; text-align: center; letter-spacing: 1px; box-sizing: border-box; }
.button:hover { background-color: #01a4b3; }
.button a { color: #fff; text-decoration: none; display: inline-block; height: 100%; width: 100%; box-sizing: border-box; padding-top: 3px; }
.button.last { margin-right: 0; }
.inner #text .button.dark { border-color: #000; color: #000; }
.inner #text .button.dark a { color: #000; transition: color .3s ease-in; }
.inner #text .button.dark a:hover { color: #fff; }
.inner #text a.phone { color: #000; text-decoration: none; }

.photo { width: 33%; float: left; margin-right: .5%; }
.photo.last { margin-right: 0; }
.photo img { width: 100%; height: auto; display: block }

#overlay { display: none; position: absolute; height: 200%; width: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.5); z-index: 5; }
.close-box { position: absolute; top: 10px; right: 10px; background-color: #223d68; width: 35px; height: 35px; border-radius: 20px; text-align: center; }
.close-box a { color: #fff; text-decoration: none; font-size: 30px; }

#warning { display: none; color: red; font-weight: 300; }
#approved { display: none; color: green; }
.redBG { background-color: #fcd6d6!important; }
.greenBG { background-color: #d8fcd6!important; }

#footer { background-color: #003; margin-top: 15px; padding: 20px; color: #bbb; font-family: Open Sans, sans-serif; font-size: 16px; line-height: 22px; text-align: center; }
#footer a { color: #bbb; text-decoration: none; }

.button.centered { float: none; width: 200px; height: 42px; margin: 0 auto; margin-bottom: 40px; }

.contact-centered { text-align: center; }
.contact-split { width: 50%; float: left; text-align: center; }


@media screen and (max-width: 1000px) {
#page-container { margin-top: 0; }
}

@media screen and (max-width: 900px) {
.button { font-size: 18px; }
.button a { padding-top: 6px; }
.button.dark a { padding-top: 4px; }
}

@media screen and (max-width: 767px) {
/*#content { padding-top: 30px; }*/
#contact { margin-top: 25px; }
.button { font-size: 16px; }
.button a { padding-top: 8px; }
}

@media screen and (max-width: 680px){
.contact-split { float: none; width: auto; margin-bottom: 20px; }
}

@media screen and (max-width: 560px) {
#header img { width: 100%; height: auto; }
#header { height: auto; }
}

@media screen and (max-width: 479px) {
.photo { display: none; }
.photo.last { display: block; float: none; width: auto; }
.button { font-size: 14px; }
.button a { padding-top: 10px; }
#nav { margin-bottom: 25px; }
#text { padding: 0; }
.inner #text { padding-left: 15px; padding-right: 15px; padding-bottom: 25px; }
}

@media screen and (max-width: 450px) {
/*#text { font-size: 25px; line-height: 35px; }*/
}

@media screen and (max-width: 400px) {
.button { width: auto; float: none; margin-bottom: 15px; margin-right: 0; }
#text { font-size: 18px; }

}