﻿.bluebg p, .bluebg h2, .bluebg h3, .bluebg ul{
    color: #fff;

}
.dashboard-intro.surge-top {
    background: url(/Content/Index/SurgeBackground.jpg);
    margin-top: 145px;
}
ul.surge {
    line-height: 2.8rem;
    padding: 36px 25px;
}
section.surge-resources.dashboard-topics {
    padding: 15px;
}
button.button.hexlink {
    background: #1D3E6B;
    border: none;
    font-size: 13px;
    padding: 10px;
    color:white;
    min-width: 6rem;
    margin-right: 10px;
}
button.button.is-checked.hexlink {
    font-size: 13px;
}
    .resource-images {
    width: 250px;
    margin-top: -70px;
}
.contactbg {
    background: rgba(0, 0, 0, 0) url(../Content/Index/geometricWebBackground.jpg) repeat scroll center -80px / cover;
    margin-top: 70px;
    padding-bottom: 30px;
}
.bluebg {
    background: #194c60;
    margin-top: 70px;
    padding-bottom: 30px;
}
.badges {
    height: 100px;
    margin-bottom: -30px;
}
.resourcesStyle {
    width: 300px;
    margin-top: -86px;
    float: left;
    margin-left: -36px;
}
.resourcesheaderStyle {
    margin-top: 47px;
    background: #3C75AB;
    padding: 10px;
    margin-left: 20px;
    box-shadow: 0px 9px 20px -7px black;
    color: #fff;
    font-size: 26px;
    margin-bottom: 3%;
}
.resourcestyledheight {
    margin-top: 10px;
    margin-bottom: 80px;
}
/*Calendar event*/
.year {
    background: #104d6c;
    width: 10vmin;
    float: left;
    /*height: 10vmin;*/
}
.year-1 {
    background: #094037;
    width: 10vmin;
    float: left;
    /*height: 10vmin;*/
}
.bluebg p {
    min-height: 130px;
}
ul.calendar-space li span img {
    text-decoration: none;
    list-style: none;
    position: absolute;
    width: 35px;
    padding: 4px;
    margin-top: -8px;
    box-shadow: 1px 0px 4px #000;
    margin-left: -250px;
}
span.calendar-icon-last img {
    background: #106c5d;
}
span.calendar-icon-first img {
    background: #176c99;
}
span.calendar-icon-first-first img {
    background: #707070;
}
li.year.year-1-1 {
    background: #303030;
}
.month-11 {
    list-style: none;
    background: #606060;
}
    .month-11:hover {
        list-style: none;
        background: #808080;
        transition: .3s background ease-in-out;
    }
.month-22 {
    list-style: none;
    background: #686868;
}
    .month-22:hover {
        list-style: none;
        background: #787878;
        transition: .3s background ease-in-out;
    }
.month-33 {
    list-style: none;
    background: #787878;
}
    .month-33:hover {
        list-style: none;
        background: #909090;
        transition: .3s background ease-in-out;
    }
.month-44 {
    list-style: none;
    background: #909090;
}
    .month-44:hover {
        list-style: none;
        background: #A0A0A0;
        transition: .3s background ease-in-out;
    }
li.bullets {
    list-style: none;
}
ul.calendar-space li span {
    list-style: none;
}
.date-block-month {
    color: #fff;
    padding-top: 3.5rem;
    text-align: center;
    padding-bottom: 3.3rem;
}
.date-block {
    color: #fff;
    padding-top: 2.2rem;
    text-align: center;
    padding-bottom: 2.2rem;
}
.date-blockyear {
    font-size: 3vmin;
    font-weight: bold;
}
li.year, li.year-1 {
    list-style: none;
    margin-bottom: 580px;
}
.months {
    width: 10vmin;
    float: left;
    /*height: 10vmin;*/
}
.month1 {
    background: #176c99;

}
li.month1, li.month2, li.month3, li.month4, li.month1-1, li.month2-1, li.month3-1, li.month4-1 {
    list-style: none;
}
.sm-date-block {
    font-size: 1.6vmin;
    font-weight: bold;
    text-shadow: 0px 1px 10px #000;
}
.month2 {
    background: #1a7caf;
}
.month3 {
    background: #1d8cc5;

}
.month4 {
    background: #219bdb;
}
.month1-1 {
    background: #0d564a;
}
.month2-1 {
    background: #106c5d;
}
.month3-1 {
    background: #138270;
}
.month4-1 {
    background: #179883;
}
ul.calendar-space {
    min-height: 255px;
    max-width: 530px;
    float: left;
    margin: 30px;
}
.calendar-space a {
    text-decoration: none;
}
/*Hover months*/
.month1:hover {
    background: #1e8bc5;
    transition: .3s background ease-in-out;
}
.month2:hover {
    background: #219bdc;
    transition: .3s background ease-in-out;
}
.month3:hover {
    background: #36a5e1;
    transition: .3s background ease-in-out;
}
.month4:hover {
    background: #4cafe4;
    transition: .3s background ease-in-out;
}
.month1-1:hover {
    background: #148270;
    transition: .3s background ease-in-out;
}
.month2-1:hover {
    background: #1ec4a9;
    transition: .3s background ease-in-out;
}
.month3-1:hover {
    background: #1aae96;
    transition: .3s background ease-in-out;
}
.month4-1:hover {
    background: #21dabc;
    transition: .3s background ease-in-out;
}
.app-screens {
    width: 390px;
    margin-right: -15px;
    margin-left: -27px;
    float: left;
    margin-bottom: -50px;
}
.downloadApp{
	padding-top: 15px;
}
.app-ul {
    margin-top: 25px;
}

.ccResources {
    margin-top: 30px;
}
p.presource {
    display: inline-block;
}

@media screen and (max-width:2740px) and (min-width:2720px) {
    ul.calendar-space li span img {
        margin-left: -475px;
    }
    ul.calendar-space {
        max-width: 1020px;
        max-height: 400px;
    }
    ul.calendar-space.first-calendar {
        max-height: 288px;
    }
}
@media screen and (max-width:1921px) {
    ul.calendar-space {
        max-height: 555px;
    }
}
@media screen and (max-width:1440px) {
    ul.calendar-space {
        max-height: 345px;
    }
}
@media screen and (max-width:1367px) {
    ul.calendar-space { max-height: 380px; }
}
@media screen and (max-width: 1172px) and (min-width: 1024px) {
    .app-screens {
        width: 418px;
        margin-right: -40px;
        margin-left: -27px;
        float: left;
        margin-bottom: 10px;
    }
}
@media screen and (max-width:1209px) {
    .calendar-space.first-calendar {
        max-height: 80px;
        min-height: 165px;
    }

  .calendar-space { max-height: 345px; min-height: 195px; }
}
@media screen and (max-width: 1024px) {
    .bluebg .text-center.col-md-4 {
        margin-left: 0px;
    }
    li.year, li.year-1 {
        list-style: none;
        margin-bottom: 128px;
    }
    .app-screens {
        margin-top: 12px;
        float: left;
        margin-bottom: 30px;
        margin-left: -19px;
        padding-right: 30px;
    }
    ul.calendar-space {
        padding-left: 15px;
        min-height: 137px;
        float: left;
        margin: 8px;
        padding-top: 15px;
    }
    ul.calendar-space li span img {
        margin-left: -340px;
    }
    .date-block {
        color: #fff;
        padding-top: 1.2rem;
        text-align: center;
        padding-bottom: 1.2rem;
    }
    ul.calendar-space.first-calendar {
        max-height: 160px;
    }
}
@media screen and (max-width: 768px) {
    .bluebg .text-center.col-md-4 {
        width: 100%;
        margin-left: 0;
        padding: 0 30px;
    }

}
@media screen and (max-width:500px) {
    
    ul.calendar-space.first-calendar {
        max-height: 240px;
    }
    .featured-img {
        max-width: 100%;
    }
 
    .sm-date-block {
        font-size: 2.3vmin;
    }
    .date-block {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    .date-block-month {
        padding-top: 1.8rem;
    }
    .year, .year-1 {
        /*height: 15vmin;*/
        width: 15vmin;
    }
    ul.calendar-space {
        min-height: 137px;
        max-width: 530px;
        float: left;
        margin: 8px;
    }
    .months {
        width: 15vmin;
        float: left;
        /*height: 15vmin;*/
    }
    .app-screens {
        max-width: 100%;
        margin: -8px 0 0 30px;
        width: 418px;
        float: left;
    }
    .resourcesStyle {
        margin-top: -51px;
        margin-left: -4px;
    }
    .resourcesheaderStyle {
        margin-top: 47px;
        background: #fff;
        padding: 10px;
        margin-left: 20px;
        box-shadow: none;
        color: #000;
        font-size: 26px;
        margin-bottom: 3%;
        text-align: center;
    }
    .resourcesheaderStyle {
        margin-left: 0px;
    }
}
@media (max-width:450px) {
    .col-md-6 a img.badges {
        margin-left: 20%;
    }
}