* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } html { margin: 0px; border: 0px; padding: 0px; text-align: left; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: none; text-rendering: optimizelegibility; color: #0d0d0d; font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 18px; line-height: 22px; background: #ffffff; } body {margin: 0;} a {outline:none;} ul {padding-top: 0px; margin-top: 0px;} :root {overflow-y: scroll !important;} ::-moz-selection { background: #393939; color: #6a6a6a; text-shadow: none; } ::selection { background: #393939; color: #6a6a6a; text-shadow: none; } .right {float:right !important;} .left {float:left !important;} .clear {clear:both;} img.right {margin:0 0 20px 20px;} img.left {margin:0 20px 20px 0;} img {border: none;} .scrollup { width: 40px; height: 40px; opacity: 0.3; position: fixed; bottom: 130px; right: 50px; display: none; text-indent: -9999px; background: url(../images/icon_top.png) no-repeat; } .responsive {width: 90%;} /* -------------------------------------------------- :: Structure -------------------------------------------------- */ #header-wrapper { width: 100%; height: auto; background: #ffffff; } #header { width: 90%; /* Change to exact pixels for static (non-responsive) */ height: auto; margin: 0 auto; padding: 0; } #logo {float: left;} #tag {float: right; font-size: 16px; text-transform: uppercase; color: #0d0d0d; padding-top: 30px; font-weight: bold;} #slideshow-wrapper { width: auto; height: auto; background: #000 url(../images/hero.jpg) no-repeat scroll center center / cover; } #slideshow-bg { width: 90%; /* Change to exact pixels for static (non-responsive)*/ margin: 0 auto; } .slogan { float: right; color: #092766; width: 55% !important; font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 50px; line-height: 60px; font-weight: 900; padding: 300px 0px; } .slogan p {font-family: 'Roboto Slab', serif; font-size: 30px; color: #c6d638; position: relative; padding: 0px;} .slogan p:after { content:""; position: absolute; border-bottom: 4px solid #c6d638; /* border-size & color are now controllable */ width: 20%; height: 1em; display: inline; margin-left: 1em; } #content-wrapper { width: 100%; height: auto; margin: 0px auto; } #content { width: 90%; /* Change to exact pixels for static (non-responsive) */ margin: 0px auto; height: auto; padding: 40px 0px 50px 0px; } #content a {color: #092663; text-decoration: underline; line-height: 20px;} #content a:hover {color: #173e91; text-decoration: none;} .events { padding: 80px 0px 50px 0px; border-top: 6px solid #092663; border-bottom: 6px solid #092663; background: #fff url(../images/charles-henson.jpg) no-repeat scroll right / contain; } #blue-wrapper { width: 100%; height: auto; background: #c1e2e8; position: relative; } #blue { width: 90%; /* Change to exact pixels for static (non-responsive) */ height: auto; margin: 0 auto; padding: 60px 0; } .channel-pro { position: absolute; right: 5%; bottom: 0; } .icons { color: #092766; font-weight: bold; font-size: 20px; margin: 20px 0; } .icons i {font-size: 36px; color: #a4b321; margin-bottom: 10px;} /* -------------------------------------------------- :: Footer -------------------------------------------------- */ #footer-wrapper { height: auto; /* Must be same height as */ width: 100%; background: #fff; padding: 20px 0; } #footer { width: 90%; /* Change to exact pixels for static (non-responsive) */ margin: 0 auto; background: #fff; font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 18px; color: #1d1d1d; text-align: center; } #footer a {color: #1d1d1d; text-decoration: none;} #footer a:hover {color: #1d1d1d; text-decoration: underline;} /* -------------------------------------------------- :: Elements -------------------------------------------------- */ h1 { color: #092663; font-family: 'Roboto Slab', serif; font-size: 48px; line-height: 52px; margin: 0px; padding: 0px; margin-bottom: 15px; } h1 span {color: #a4b321;} h2 { color: #092663; font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 24px; margin: 0px; padding: 0px; line-height: 32px; margin-bottom: 15px; font-weight: bold; } h2.large { color: #092663; font-family: 'Roboto Slab', serif; font-size: 48px; line-height: 52px; margin: 0px; padding: 0px; margin-bottom: 25px; } h2.large span {color: #a4b321;} h3 { color: #444425; font-family: 'Lato', Arial, Helvetica, sans-serif; font-size: 24px; margin: 0px; padding: 0px; line-height: 30px; margin-bottom: 15px; } h3.block { font-family: 'Roboto Slab', serif; font-size: 30px; padding: 40px 0; background: #092663; color: #fff; text-align: center; } p { margin: 0px; padding: 0px 0px 15px 0px; } hr { border: 0; height: 1px; background: #000; } a.link { display: inline-block; background: #c1e2e8; font-family: 'Lato', Arial, Helvetica, sans-serif; color:#092766 !important; font-size: 16px; line-height: 20px; font-weight: bold; margin: 10px 0; padding: 20px 30px; border-radius: 150px; text-decoration: none !important; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } a.link:hover {opacity: 0.8;} /* -------------------------------------------------- :: Grid -------------------------------------------------- */ /*div#content > div img {width: 100%;}*/ .g10, .g20, .g30, .g40, .g50, .g60, .g70, .g80, .g90, .g100, .g33, .g25, .g75 { height:auto; float:left; } .g10 {width:10%;} .g20 {width:20%;} .g30 {width:30%;} .g40 {width:40%;} .g50 {width:50%;} .g60 {width:60%;} .g70 {width:70%;} .g80 {width:80%;} .g90 {width:90%;} .g100 {width:100%;} .g33 {width:33.33333333%;} .g25 {width:25%;} .g75 {width:75%;} .padding {padding: 10px 15px;} /* -------------------------------------------------- :: Form Styles -------------------------------------------------- */ .form-label {font-weight: bold;} .form-element {width: 300px;} .form-required { font-weight: bold; color: red; padding-left: 5px; } .form-error { background-color: #f99; font-weight: bold; text-align:center; } .verify {display: none;} .contact-form {width:60%;float:left;margin-top:20px;} .report-form {width:60%;float:right;margin-top:10px;margin-right:20px;} .report-form .input {padding:3% 0 3% 3% !important;} .input { padding:1%; float:left; margin:5px 2.5% 5px 0; } .input, textarea {font-family:Arial, Helvetica, sans-serif;font-size:14px;} .form-email {width:99%;margin-right:0;} .no-margin-right {margin-right:0 !important;} .form-comments {min-width:100%;max-width:100%;min-height:150px;max-height:400px;} textarea {width:98%;padding:1%;resize: vertical;} .form-ver-code {float:left;width:99%;padding:1% 0 1% 0;height:auto;font-size:12px;} input.ver-code {width:47.25%;} input.g30 {margin-right:5%;} .report-form .form-submit-btn {float:right;font-size:16px;width:70%;background:#540d0d !important;margin-top:5px;font-weight:bold !important;} .report-form .form-submit-btn:hover {background:#b01e1e !important;} .form-submit-btn {width:50%;float:left;height:40px;background:#317f30 !important;color:#FFF;cursor:pointer;font-weight:700;font-size:22px;text-transform:uppercase;border:0;clear:both;} .form-submit-btn:hover {background:#216221 !important;color:#FFF;} /* PLACE HOLDER STYLE */ input[type=search] { -webkit-appearance: none;} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { display: none; } /* -------------------------------------------------- :: Media Queries -------------------------------------------------- */ @media screen and (min-width: 1200px) { .responsive {width: 1000px !important;} } @media screen and (max-width: 1200px) { .scrollup { width: 20px; height: 20px; background-size: cover; bottom: 115px; right: 1%; } } @media screen and (max-width: 800px) { .slogan {padding: 200px 0px;} .events .g60 {width: 100%;} .events {background: #fff url(../images/charles-henson-mobile.jpg) no-repeat scroll right / cover;} .g25 {width: 50% !important;} .g50 {width: 100% !important;} } @media screen and (max-width: 600px) { .responsive {width: 90% !important;} .g30 {width: 100% !important;} .g33 {width: 100% !important;} .g70 {width: 100% !important;} #logo {float: none; text-align: center; margin: 0 auto;} #tag {float: none; text-align: center; margin: 0 auto; padding-top: 10px; padding-bottom: 20px;} .slogan { float: none; text-align: center; margin: 0 auto; width: 90% !important; font-family: 'Lato', Arial, Helvetica, sans-serif; padding: 60px 0px; } .slogan p:after { border-bottom: none; } .channel-pro {position: static;} #blue {text-align: center;} } @media screen and (max-width: 480px) { .responsive {width: 95% !important;} body {text-align: center;} .g10 {width: 100% !important;} .g20 {width: 100% !important;} .g25 {width: 100% !important;} .g40 {width: 100% !important;} .g60 {width: 100% !important;} .g80 {width: 100% !important;} .g90 {width: 100% !important;} }