@import url('https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400;1,700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Other CSS Files */

@import url('content.css');
@import url('department.css');
@import url('elections.css'); 
@import url('footer.css');
@import url('header.css');
@import url('home.css');
@import url('services.css'); 

/* Core Fonts
#c2cab5 (Green)
#F8F5F0 (Background Color)
#3d4c59 (Dark Blue + Hyperlink Color)
#000000 (Text)
#790B01 (Alert BG, White text only) */

body { background: #FFFFFF; color: #231F20; font-family: 'Nunito Sans', sans-serif; font-size: 18px; line-height: 28px; margin: 0; }
h1 { font-family: 'Caladea', serif; font-size: 66px; line-height: 74px; margin: 30px 0; font-weight: 400; }
h2 { font-family: 'Caladea', serif; font-size: 48px; line-height: 54px; margin: 25px 0; font-weight: 400; }
h3 { font-size: 26px; line-height: 32px; margin: 20px 0; color: #425D79; }

a { color: #425D79; }
a:hover, a:active { text-decoration: none; color: #537597; }

hr { margin-block-start: 20px; margin-block-end: 20px; border: 0px; border-top: 1px solid #C2CAB5 !important; }

/* Content */
.content { padding: 95px 0 130px; min-height: calc(100vh - 355px); }
.contentPage { background: #F8F5F0; }

@media screen and (max-width: 1150px) { 
    .contentPage { background: #FFFFFF; }
}

@media screen and (max-width: 400px) { 
    .content { padding-top: 85px; }
}

a.button { display: inline-block; background: none; color: #231F20; padding: 10px 20px; margin: 0 4px 4px 0; text-decoration: none; font-weight: 600; transition: 500ms; border-radius: 6px; border: 2px solid #231F20; }
a.button:hover { background: #231F20; color: #FFFFFF; transition: all 250ms; }
.clear { clear: both; }

figure img { margin: 0 !important; }
figcaption { font-size: 15px; line-height: 24px; }

/* Videos */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Alerts */
.alert { background: #550000; color: #FFFFFF; width: calc(100% - 500px); font-size: 20px; text-align: center; padding: 10px 250px; font-weight: 700; }
.alert a, .alert a:hover { color: #FFFFFF; text-decoration: none; }

/* Modules - Notifications */
form#notificationsForm { display: block; max-width: 800px; width: 100%; margin: 0 auto 60px; }
#notificationsForm ol { margin: 0; list-style-type: none; padding: 0; }
#notificationsForm ol label { display: block; font-size: 15px; line-height: 24px; }
#notificationsForm ol input[type="text"], #notificationsForm ol input[type="email"] { font-family: 'Nunito Sans', sans-serif; font-size: 16px; width: 100%; padding: 5px; border: 1px solid #092841; margin-bottom: 1em; }
#notificationsForm input[type="submit"], input[type="reset"] { display: inline-block; background: none; color: #231F20; font-family: 'Nunito Sans', sans-serif; padding: 10px 20px; margin: 1em 0 0; font-weight: 600; transition: 500ms; border-radius: 6px; border: 2px solid #231F20; font-size: 18px; cursor: pointer; }
#notificationsForm input[type="submit"]:hover, input[type="reset"]:hover { background: #231F20; color: #FFFFFF; transition: all 250ms; }

@media screen and (max-width: 1150px) {
    .alert { width: calc(100% - 200px); padding: 10px 100px; }
}
@media screen and (max-width: 600px) {
    .alert { width: calc(100% - 20px); padding: 10px; }
}

@media screen and (max-width: 800px) { 
    h1 { font-size: 56px; line-height: 62px; }
    h2 { font-size: 38px; line-height: 46px; }
    h3 { font-size: 28px; line-height: 34px; }
}

a.skipToContent { background: #F8F5F0; height: 27px; left: 10px; padding: 10px 20px; position: absolute; transform: translateY(-123px); transition: transform 0.3s; z-index: 1000; color: #000000; text-decoration: none; }
a.skipToContent:focus { transform: translateY(5px); }