body { background-color: #fff; font-family: "Roboto",sans-serif; font-weight: 700; }
body,html { height: 100%; width: 100%; }
h1,h2,h3,h4,h5,h6 { font-family: "Roboto",sans-serif; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.row { max-width: 100%; }
.columns { padding: 0; }
a { transition: .2s; }

#header { background-color: #fff; box-shadow: 0 -1px 10px 0 #666; height: 88px; position: relative; z-index: 11; }
#header #menu { bottom: 15px; position: absolute; left: 1%; }
#header #menu a { color: #505a79; font-weight: 400; margin: 0 12px; transition: .2s;}
#header #menu a:hover { border-bottom: 2px solid #dee3f2; color: #333; }
#header #menu a.selected { border-bottom: 2px solid #ffde18; font-weight: 700;  }
#header #logos { height: 90%; position: absolute; right: 1%; bottom: 2px; }
#header #logos img { height: 100%; padding: 8px 6px; }

#screen { height: 100%; overflow: hidden; padding-top: 0px; position: absolute; top: 0; width: 100%; }
#screen > div { height: 100%; left: -100%; opacity: 0; overflow-y: auto; padding-top: 88px; position: absolute; top: 0px; transition: 0;  width: 100%; }
#screen > div.fade-out { left: 70%; transition: left .65s, opacity .3s; }
#screen > div.showing { left: 0; opacity: 1; transition: left .55s, opacity .3s; }

h2 { color: #505a79; font-weight: 700; margin-bottom: 18px; }

.footer { background-color: #505a79; bottom: 0; color: #fff; font-weight: 400; padding: 7px; position: absolute; text-align: center; width: 100%; }

/* Home */
#screen > #landing-screen { height: 100%; overflow: hidden; }
#landing-screen .row { height: 100%; }
#landing-screen .medium-9 { background-color: #6b6b6b; height: 100%; overflow: hidden; padding-left: 2%; position: relative; }
#landing-screen .medium-9 img { left: 0; max-width: 2000%; position: absolute; width: 100%;}
#landing-screen .medium-9 h1 { color: #ffde18; font-size: 3.8em; font-weight: 700; line-height: 1.2em; position: absolute; top: 50px; width: 60%; }
#landing-screen .medium-9 a { border: 1px solid #fff; bottom: 50px; color: #fff; font-size: 1.5em; padding: 6px 18px; position: absolute; }
#landing-screen .medium-9 a:hover { background-color: rgba(255,255,255,.3); }
#landing-screen .medium-9 a i { margin-right: 8px; }

#landing-screen .medium-3 { background-color: #ffde18; height: 100%; min-height: 100%; overflow: auto; padding: 26px 1.5%; }
.landing-list { clear: both; }
.landing-list > div { border: 4px solid #505a79; padding: 20px 18px 4px; }
.landing-list h2 { color: #505a79; font-size: 1.4em; font-weight: 700; margin-bottom: 8px; }
.landing-list h2 i { margin-right: 10px; }
.landing-list > a { background-color: #505a79; color: #fff; float: right; font-size: .9em; font-weight: 400; margin-top: -4px; margin-bottom: 18px; padding: 2px 8px; }
.landing-list > a:hover { background-color: #000; }
.landing-list > a i { margin-left: 8px; }
.list-event h3 { background-color: #ffea6c; font-size: .9em; font-weight: 700; padding: 3px 6px; }
.list-event p { display: inline-block; width: 49%; }
.list-event > span span { background-color: #505a79; border-radius: 50%; display: inline-block; height: 10px; margin-right: 6px; width: 10px; }
.list-announcement > a { color: #333; display: block; margin-bottom: 12px; padding: 4px 6px 2px 28px; position: relative; }
.list-announcement > a:hover { background-color: #ffea6c; }
.list-announcement > a p { font-weight: 700; line-height: 1.2em; margin: 0; }
.list-announcement > a > i { color: #505a79; left: 5px; position: absolute; top: 7px; }
.list-announcement > a span { color: #505a79; display: block; font-size: .8em; font-weight: 400; margin-top: 3px; }
.list-announcement > a span i { margin-right: 4px; }

/* Program Info */
#program-info { background-color: rgb(80,90,121,.15); }
#program-info > .row { padding: 54px 6%; }
#program-info > .row .columns { padding: 0 3%; }
#program-info h3 { font-size: 1em; font-weight: 700; }
#program-info .row:nth-of-type(2) { background-color: #fff; }
#program-info .row:nth-of-type(3) h2 { margin-left: 3%; }
#program-info .footer { position: static; }

#program-info h4 { font-size: 1.1em; margin: 34px 0; text-align: center; }
#circle-area { height: 300px; padding-top: 0; position: relative; text-align: center; width: 100%; }
#circle { border-radius: 100%; display: inline-block; height: 280px; overflow: hidden; position: relative; width: 280px; }
#circle > div { height: 100%; left: 0; position: absolute; top: 0; transition: transform 1.3s; width: 100%; z-index: 7; }
#circle > div > span { height: 50%; left: 0; position: absolute; top: 0; transition: transform 0s; width: 50%; z-index: 8;}
#circle > div > span.amt-5 { border: 0px solid #ffffff!important;}
#circle > div > span.amt-6 { border: 0px solid #ffffff!important;}
#amounts { display: inline-block; height: 280px; position: relative; margin-top: -286px; width: 280px; z-index: 9; }
#amounts > span { display: none; font-size: .8em; position: absolute; top: 23%; left: 16%; }
#amounts > span:nth-of-type(2) { left: 17%; top: -8%; }
#amounts > span:nth-of-type(3) { left: 24%; top: -12%; }
#amounts > span:nth-of-type(4) { left: 31%; top: -15%; }
#amounts > span:nth-of-type(5) { left: 40%; top: -17%; }
#amounts > span:nth-of-type(6) { left: 71%; top: 31%; color: #fff;}
#amounts > span:nth-of-type(7) { left: 31%; top: 60%; color: #fff;}

#list { display: block; text-align: center; }
#list p { display: inline-block; font-size: .85em; margin: 0; margin-left: 28px;  }
#list p span { border-radius: 50%; height: 12px; display: inline-block; margin-right: 8px; width: 12px; }

/* TALKS BY TIM */
#tim-talks {height: 100%;}
#tim-talks > .row { padding: 54px 6%; }
#tim-talks > .row .columns { padding: 0 3%; }
#tim-talks h3 { font-size: 1em; font-weight: 700; text-align: center;}
#tim-talks .footer {position: absolute; bottom: 0;}
/* Calendar */
#calendar-area { padding: 54px 6%; }
#calendar table { margin-bottom: 0; }
#calendar table thead { background-color: transparent; }
#calendar .fc-head table thead { background-color: #f7f7f7; }
#calendar .fc-head table thead th { border: 0; padding: 6px 0; }
#calendar .fc button { background-color: #fff; background-image: none; border: 1px solid #505a79; box-shadow: none; color: #505a79; padding: 3px 21px; text-shadow: none; transition: background-color .2s; }
#calendar .fc-button:hover { background-color: #dee3f2; }
#calendar .fc button.fc-state-active { background-color: #505a79; color: #fff; }
#calendar .fc button.fc-today-button { border: 0; }
#calendar .fc button.fc-today-button.fc-state-disabled { background-color: #dee3f2; }
#calendar .fc-event .fc-content { font-size: 1.2em; padding: 2px 5px; transition: background-color .2s; }
#calendar .fc-event .fc-content:hover { background-color: #505a79; }
#calendar .fc-ltr .fc-basic-view .fc-day-top .fc-day-number { background-color: #fff; border-radius: 50%; height: 18px; margin: 4px; padding: 6px; text-align: center; transition: background-color .2s; width: 18px; }
/* #calendar .fc-ltr .fc-basic-view .fc-row:hover .fc-day-top:hover .fc-day-number { background-color: #ddd; } */
#calendar .fc-ltr .fc-basic-view .fc-day-top.fc-today .fc-day-number { background-color: #505a79; color: #fff;  }
#calendar .fc-unthemed td.fc-today { background-color: transparent; }
#calendar .footer { position: static; }

#event-information { height: 100%; left: 0; opacity: 0; position: fixed; top: -100%; transition: .4s; width: 100%; z-index: 20; }
#event-information.show { opacity: 1; top: 0; transition: .65s; }
#event-information > span { background-color: rgba(0,0,0,.6); cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
#event-information > span > span { color: #fff; font-size: 4em; position: absolute; right: 34px; top: -2px; }
#event-information div { background-color: #fff; border-radius: 3px; box-shadow: 2px 188px 73px 18px #555; font-size: 1.1em; margin: 104px 20% 0; padding: 18px 30px; position: relative; top: -250px; transition: .4s; width: 60%; }
#event-information.show div { box-shadow: 2px 9px 18px 0 #333; top: 0; transition: box-shadow 1.13s, top .8s ease-in-out .1s; }

/* Know the WV Law */
#know-the-law .row { height: auto; }
#know-the-law .medium-9 { padding: 54px 6%; }
#know-the-law .medium-9 h2 { margin-bottom: 33px; }
#know-the-law .medium-3 { height: 100%; overflow: hidden; }
#know-the-law .medium-3 img { height: 100%; max-width: 1000000%; }
.a-law { border: 4px solid #505a79; float: left; min-height: 480px; margin-right: 5%; padding: 20px 28px; width: 47.5%;  }
.a-law:last-of-type { margin: 0; }
.a-law a { background-color: #ffde18; color: #000; font-size: .9em; padding: 5px 9px; }
.a-law p { font-size: .9em; line-height: 1.4em; margin: 12px 0 20px; }
.a-law a:hover { background-color: #dec010; }

.b-law { border: 4px solid #505a79; float: left; height: 330px; margin-top: 5%; padding: 20px 28px; width: 100%;  }
.b-law a { background-color: #ffde18; color: #000; font-size: .9em; padding: 5px 9px; }
.b-law p { font-size: .9em; line-height: 1.4em; margin: 12px 0 20px; }
.b-law a:hover { background-color: #dec010; }
#know-the-law .footer {position: static;}


/* Resources */
#resources .row { height: auto; }
#resources .medium-9 { padding: 54px 5%; }
#resources .medium-3 { height: 100%; overflow: hidden; }
#resources .medium-3 img { height: 100%; max-width: 1000000%; }
#resources .footer {position: static;}
.document-list ul {list-style-type: none;}
.document-list ul li {margin-bottom: 10px;}
.document-list .fa { font-size: 25px; color: #dec010; margin-right: 15px;}
#resources a {color: #505a79;}
#resources a:hover {color: #333;}



/* News */
#news .row { padding: 54px 6%; }
#news .row:first-of-type { padding: 44px 6% 0; }
#news .footer { position: static; }
#news .medium-12 {margin-bottom: 30px;}
.left-part { float: left; position: relative; width: 60%; }
.left-part span { background-color: #505a79; color: #fff; font-size: 1em; padding: 5px 12px; position: absolute; }
.left-part img { margin-top: 10%; width: 100%; }
.right-part { background-color: #505a79; float: left; height: auto; padding: 12px 18px; position: relative; width: 30%; }
.right-part h3 { border-bottom: 1px solid #fff; color: #fff; font-size: 1.3em; line-height: 1.13em; margin-bottom: 13px; padding-bottom: 11px; }
.right-part p { color: #fff; font-size: .9em; line-height: 1.3em; }
.right-part a { color: #ffde18; bottom: 20px; padding: 0 2px; positikon: absolute; }
.right-part a:hover { background-color: #dec010; color: #505a79; }
.right-part a i { margin-right: 6px; }
#news .medium-4 > a,
#news .medium-4 div { display: block; padding: 6px 20px 16px; }
#news .medium-4 a:hover { background-color: #dee3f2; }
#news .medium-4 h3 { border-bottom: 1px solid #505a79; color: #505a79; font-size: 1.1em; font-weight: 700; line-height: 1.3em; padding-bottom: 8px; padding-right: 34px; position: relative; }
#news .medium-4 h3 i { position: absolute; right: 3px; top: 3px;  }
#news .medium-4 p { color: #505a79; font-size: .85em; line-height: 1.4em; }
#news em { color: #505a79; font-size: .8em; font-weight: 400; }

.news-story .row { padding: 54px 6%; }
.news-story-img { height: 320px; margin-bottom: 26px; overflow: hidden; position: relative; width: 100%; }
.news-story-img img { position: absolute; top: -188%; width: 100%; }


/* Contact */
#contact .row { min-height: 97%; }
#contact > .row { padding: 54px 6%; }
#contact > .row h3 { font-size: 1.2em; font-weight: 700; margin-bottom: 14px; }
#contact p { padding-left: 28px; position: relative; }
#contact p i { color: #333; left: 2px; position: absolute; top: 5px; }

#contact .footer {position: static;}


/* GOOGLE FORM */
.wrapper { width: 75%; }
.wrapper p {padding-left: 0!important;}
h1 { font-size: 48px; font-family: 'Roboto', sans-serif; margin-bottom: 10px;}
form p { font-family: 'Roboto', sans-serif; font-size: 0.875rem; line-height: 1.6;}
form p,
label[for="email"],
label[for="first"],
label[for="last"],
label[for="phone"],
label[for="address1"],
label[for="address2"],
label[for="city"],
label[for="state"],
label[for="zip"],
label[for="feedback"]{ padding-bottom: 6px; border-bottom: 2.5px solid #ffde18; width: 100%;}
/* SECTION */
section { background: #ffffff; padding: 20px 0; width: 100%; margin: 0 auto; display: block; }
.col6 {width: 50%; padding-right: 10px; display: inline-block;}
.col3 {width: 33%; padding-right: 10px; display: inline-block;}

/* FORM STYLES */
select { display: block; margin-bottom: 50px;}
input[type="checkbox"], input[type="radio"] { margin-right: 5px;}
#phone {padding-right:10px;}
input[type='tel'],
input[type="text"],
textarea { width: 100%; padding: 6px; font-size: 16px; border: 1px solid #ffde18;; background: #f4f5f7; margin-bottom: 12px; }
.input-wrap.select-box { border: 1px solid #ffde18; background: #f4f5f7; width: 75%; height: 34px; padding: 0px 10px; margin-left: 15px;margin-bottom: 20px}  
.input-wrap.select-box:hover { background: #f58025;}
.input-wrap.select-box:hover select { color: #fff;}
textarea { min-height: 80px;}
select { border: none; background: transparent; font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; height: 34px; width: 75%;}
select:hover { cursor: pointer; }
input[type="submit"] { display: block; margin: 20px auto; font-family: 'Roboto', sans-serif; letter-spacing: 0.5px; background: #ffde18; border: 0px solid; color: black; font-size: 13px; text-transform: uppercase; letter-spacing: 1.25px; }
input[type="submit"]:hover { background: #fff; color: #333; cursor: pointer; border: 2.5px solid #ffde18; transition: 0.5s all;}



@media screen and (min-width: 1590px) {
    #program-info h4 { margin: 24px 0 48px;  }
    #circle-area { height: 410px; }
    #circle { height: 390px; width: 390px; }
    #amounts { height: 390px; margin-top: -360px; width: 390px; }
    #amounts > span { font-size: 1em; }
}

@media screen and (max-width: 1520px) {
    #landing-screen .medium-9 { width: 66%; }
    #landing-screen .medium-9 img { width: 140%; }
    #landing-screen .medium-9 h1 { font-size: 3.4em; width: 80%; }
    #landing-screen .medium-3 { width: 34%; }

    .fc-event .fc-content { font-size: 1em; padding: 1px 3px; }
    .a-law { margin-right: 3%; padding: 8px 14px; width: 48.5%; }
    .a-law h3 { font-size: 1.4em; line-height: 1.3em; }
    #contact .medium-4 { width: 50%; }
    #contact .medium-4 h3 { font-size: .9em; margin-bottom: 18px; }
    #contact .medium-4 p { font-size: .9em; }
    #contact .medium-4:last-of-type { display: none; }
}


@media screen and (max-width: 1294px) {
    #header { text-align: center; }
    #header #menu { padding-top: 8px; position: static; }
    #header #logos { height: 56px; position: static; }
}


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

    #landing-screen .medium-9 { padding-left: 3%; }
    #landing-screen .medium-9 img { width: 220%; }
    .landing-list > div { padding: 14px 16px 2px; }
    .landing-list h2 { font-size: 1.2em; }
    .list-event h3 { font-size: .9em; margin-bottom: 4px; padding: 2px 4px;  }
    .list-event p { font-size: .8em; margin-bottom: 14px; }
    .list-event > span { font-size: .8em; }
    .list-announcement > a p { font-size: .9em; }

    #know-the-law .medium-9 h2 { font-size: 1.7em; }
    .a-law { height: auto; margin: 0 0 18px; padding: 8px 14px 15px; width: 100%; }

    .news-story-img img { top: -55%; }
    .a-law {
        min-height: auto;
    }
}

@media screen and (max-width: 1055px) {
    #header #logos { height: 65px; position: static; }
}

@media screen and (max-width: 890px) {
    #header { height: 82px; }
    #header #menu a { font-size: .85em; margin: 0 10px; }
    #header #logos { height: 48px; }
    #screen { padding-top: 82px; }
    h2 { font-size: 1.7em; }
    p, strong, li { font-size: .9em; line-height: 1.4em; }

    #landing-screen .medium-9 { width: 54%; }
    #landing-screen .medium-9 img { width: 290%;}
    #landing-screen .medium-9 h1 { font-size: 2.2em; }
    #landing-screen .medium-3 { width: 46%; }

    #circle-area { }
    #program-info > .row,
    #calendar-area { padding: 34px 2%; }
    #calendar-area h2 { font-size: 1.3em; }
    #calendar-area td { font-size: .8em; }
    .fc button { font-size: .75em; }
    #event-information > span > span { font-size: 2.6em; right: 18px;  }
    #event-information div { margin: 64px 6%; padding: 14px 24px; width: 88%; }
    #event-information div h2 { font-size: 1.3em; }

    #know-the-law .row { height: auto; min-height: auto; }
    #know-the-law .medium-9 { padding: 22px 4%; width: 100%; }
    #know-the-law .medium-9 h2 { font-size: 1.4em; line-height: 1.2em; margin-bottom: 14px; }
    #know-the-law .medium-3 { height: 380px; width: 100%; }
    #know-the-law .medium-3 img { height: auto; margin-top: -140px; width: 100%; }
    #know-the-law .footer { position: static; }
    .a-law h3 { font-size: 1em; font-weight: 700; }
    .a-law p { font-size: .8em; line-height: 1.3em; }

    #contact .footer { position: static; }
    #contact .medium-4 { margin: 5px 0 12px; width: 100%; }

    #news .medium-12 { height: auto; }
    .left-part { float: none; width: 100%; }
    .left-part img { display: none; }
    .left-part span { position: static; }
    .right-part { padding: 18px 18px; width: 100%; }
    .right-part a { font-size: .9em; position: static; }
    #news .medium-4 { width: 100%; }
    .news-story-img { height: 180px; }
}

@media screen and (min-width: 640px) and (max-width: 840px) {
    #program-info h4 { font-size: .95em; }
    #circle-area { height: 200px; }
    #circle { height: 180px; width: 180px; }
    #amounts { height: 180px; margin-top: -200px; width: 180px; }
    #amounts > span { font-size: .65em; margin-top: -5%; }
    #list { font-size: .8em; }
}

@media screen and (max-width: 640px) {
    #header { height: 108px; }
    #screen { padding-top: 108px; }
    #header #menu a { display: inline-block; font-size: .75em; }
    h2 { font-size: 1.4em; }
    p, strong, li { font-size: .8em; }
    .footer { font-size: .85em; }
    .big-image { height: 300px;  overflow: scroll; width: 100%; }
    .big-image img { max-width: 4000%; width: 1000px; }

    #screen > #landing-screen { overflow: auto; }
    #landing-screen .medium-9 { height: auto; padding: 0 5% 28px; width: 100%; }
    #landing-screen .medium-9 h1 { font-size: 1.6em; margin: 20px 0; position: relative; top: 0;  }
    #landing-screen .medium-9 a { bottom: auto; font-size: 1em; position: relative; }
    #landing-screen .medium-3 { height: auto; min-height: auto; padding: 18px 5% 0; width: 100%; }
    #program-info .medium-5 { margin-bottom: 22px; }
    #event-information div h2 { font-size: 1.1em; }
    #event-information div p { margin-bottom: 8px; }
    #know-the-law .medium-3 { height: 280px; }
    #know-the-law .medium-3 img { margin-top: -50px; }
    #contact .medium-4 { font-size: .8em; }

    #news { font-size: .9em; }
}

@media screen and (max-height: 680px) and (min-width: 640px) {
    #landing-screen .medium-9 h1 { font-size: 2.2em; width: 86%; }
    #know-the-law .row { height: 680px; }
    #know-the-law .medium-3 img { height: 680px; }
    #know-the-law .footer { position: static; }
}

@media screen and (max-height: 470px) and (min-width: 640px) {
    #landing-screen .medium-9 h1 { font-size: 1.5em; top: 28px; }
    #landing-screen .medium-9 a { bottom: 24px; font-size: 1em; padding: 3px 8px; }
    #landing-screen .medium-9 a i { margin-right: 3px; }
    #contact .row { height: 470px; }
    #contact .footer { position: static; }
}