body {
    background-color: lightgray;
    background-color: #fff;
    font-family: 'Open Sans', sans-serif;
    color: #333333;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0 0 10px 0;
    color: #112e51;
    font-size: 38px;
    line-height: 44px;
    font-weight: 200;
    letter-spacing: ;
    text-transform: ;
}

h2 {
    margin: 0 0 5px 0;
    color: #112e51;
    font-size: 32px;
    line-height: 36px;
    font-weight: 200;
    letter-spacing: 5px;
    text-transform: uppercase;
}

h3 {
    margin: 15px 0 25px 0;
    color: #112e51;
    font-size: 20px;
    line-height: 30px;
    font-weight: 200;
    letter-spacing: 5px;
    text-transform: uppercase;
}

h4 {
    margin: 15px 0 20px 0 !important;
    color: #112e51;
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

h5 {
    margin: 10px 0 10px 0;
    color: #112e51;
    font-size: 18px;
    line-height: 24px;
    font-weight: 200;
}

p,
input {
    color: #333333;
    font-family: 'Lusitana', serif;
    font-size: 16px;
    line-height: 25px;
    margin-bottom: 5px;
}

/*HEADER/NAVBAR and FOOTER STYLES*/

/*evenly spread menu items across nav container*/

#agency-title {
    margin: 5px 0;
}

nav ul {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/*consistent color for links*/

.nav-link span,
#footer-section h4 {
    color: #ffffff;
    font-size: 18px;
}

/*links color change on hover capability*/

nav a:hover span,
#footer-section a:hover span {
    color: #ffffff;
    border-bottom: 2px solid #cd2026;
}

/*readable color for submenu items*/

.dropdown-menu a:hover span {
    color: #333333;
}

/*navbar menu dropdown triangles*/

a#dropdown01.nav-link.dropdown-toggle,
a#dropdown02.nav-link.dropdown-toggle,
a#dropdown03.nav-link.dropdown-toggle,
a#dropdown04.nav-link.dropdown-toggle,
a#dropdown05.nav-link.dropdown-toggle {
    color: white;
}

/*navbar search feature*/

.navbar-form {
    position: relative;
}

.navbar-form .btn {
    font-size: 18px;
}

#site-search-btn,
#hide-input-wrapper {
    border: 1px solid white;
    background: #112e51;
}

#site-search-btn:hover,
#hide-input-wrapper:hover {
    border: 1px solid #D6D7D9;
    background: #D6D7D9;
}

#site-search-btn:hover i.fa.fa-search,
#hide-input-wrapper:hover i.fa.fa-window-close {
    color: #333333;
}

.search-container.hidden {
    width: 0;
}

.search-input-group {
    width: 300px;
}

/*navbar shrink-on-scroll capability*/

.navbar-brand img {
    max-width: 75%;
    transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
}

.shrink {
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.shrink .navbar-brand img {
    max-width: 60%;
}

@media (min-width: 768px) {
    ul.navbar-nav {
        margin-left: 2em;
    }
}

@media (max-width: 768px) {
    #agency-title {
        display: none;
    }
}

/*icons in header/nav and footer*/

i.fa.fa-search,
i.fa.fa-window-close,
i.fa.fa-twitter,
i.fa.fa-facebook-f,
i.fa.fa-linkedin {
    color: white;
}

#footer-section a {
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 14px;
    line-height: 25px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ffffff;
    margin: 0 0 1em 0;
    padding: 0;
}

/*All icons outside of nav and footer*/

i.fa-caret-down,
i.fa-download,
i.fa-external-link,
i.fa-file-pdf-o,
i.fa-arrow-up,
i.fa-file-word-o,
i.fa-info-circle,
i.fa-chevron-left,
i.fa-chevron-right,
i.fa-chevron-down {
    color: black;
}

/*All sections*/

.section {
    padding: 10px 10px 45px 10px;
}

.p-anchor {
    padding-top: 50px;
}

.section-bg {
    background-color: rgb(241, 241, 241);
    border-top: 3px solid #cd2026;
}

/*exceptional style for main search section on home page*/

#search-section .row {
    margin: 0;
}

/*All rows*/

.row {
    margin: 25px 0 25px 0;
}

/*All buttons*/

.btn {
    transition: all .4s ease-in-out;
}

.navbar-dark,
.btn-primary {
    background-color: #112e51;
}

/*All inputs*/

input {
    margin: 0 5px 0 0;
}

/*All page titles*/

#page-title {
    margin: 50px 0 0 0;
}

/*SEARCH*/

#search-section {
    background-color: #cd2026;
    padding: 15px 0 15px 0;
}

#search-section .btn {
    font-family: 'Open Sans', sans-serif;
    border: none;
}

/*CARDS*/

.card-bg {
    background-color: #F1F1F1;
}

/*exceptional style for img inside card*/

.card img {
    margin-bottom: 0;
}

.card-body {
    padding: 0;
}

.card-block {
    padding: 1.25rem;
}

/*make about page img take width of container*/

.card-block img {
    max-width: 100%;
}

/*elevation capability on cards*/

.card-home {
    padding: 25px 20px 25px 20px;
    display: block;
    box-shadow: 0 1px 3px rgba(91, 97, 107, 0.12), 0 1px 2px rgba(91, 97, 107, 0.24);
    transition: all 0.6s cubic-bezier(.25, .9, .25, 1);
}

.card-home:hover {
    box-shadow: 0 15px 25px rgba(91, 97, 107, 0.25), 0 10px 10px rgba(91, 97, 107, 0.22);
}

/*elevation capability on images*/

.img-scale {
    border: none;
    margin: 0 auto;
}

.img-scale:hover {
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    -o-transform: scale(1.08);
    transform: scale(1.08);
    transition: all .6s cubic-bezier(.25, .9, .25, 1.1);
    -webkit-transition: all .6s cubic-bezier(.25, .9, .25, 1.1);
    filter: drop-shadow(9px 9px 9px rgba(0, 0, 0, 0.33));
    -webkit-filter: drop-shadow(9px 9px 9px rgba(0, 0, 0, 0.33));
}

/*eliminate stretch of png images for IE compatibility*/

.home-card-icon,
#history-section .card,
#history-section img {
    display: block;
}

#history-section .card,
#history-section .card-block {
    padding: 0;
}

.card-emp {
    padding: 20px;
}

#employment-section .card ul,
#dataset-section .card ul {
    display: inline-block;
    vertical-align: middle;
}

/*ACCORDIANS*/

section#visuals-section #accordion {
    margin: 2em 0 0 0;
}

/*TABLES*/

/* District Info */

.table thead th {
    padding: 0;
    vertical-align: unset !important: border:none !important;
}

.chambers-outline {
    margin: 0.5px;
    padding: 10px;
    border: 1px solid #E4E2E0;
}

.chamber {
    -webkit-animation: fadeEffect 0.6s;
    animation: fadeEffect 0.6s;
    display: inline-block;
    text-align: center;
    transition: 0.3s;
    font-size: 18px;
    cursor: pointer;
    position: relative;
}

.chamber:hover,
.selected,
.DistPro_MenuItem:hover {
    background: #D6D7D9;
}

/*District Profile table: Senate and House chamber titles*/

#DistPro_MSenate,
#DistPro_MHouse {
    padding: 2px 10px 2px 10px;
}

/*District Profile table: District Numbers and Members*/

#DistPro_SetByNum,
#DistPro_SetByName {
    text-align: left;
    padding: 2px 10px 2px 10px;
    font-size: 16px;
    display: inline !important;
}

/*Make list scrollable*/

.district_list {
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    border: 1px solid #CCC;
    border-top: none;
    max-height: 500px;
}

.district {
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
}

.district:nth-child(odd) {
    background: #D6D7D9;
}

.dist_num,
.dist_mem,
.dist_profile,
.demo_profile {
    display: inline-block;
    margin-right: 4px;
    width: 200px;
    margin-left: 10px;
}

/*CAROUSEL*/

#carouselIndicatorsBox {
    /*empty box*/
    height: 10px;
    border: 1px solid #AEB0B5;
    background-color: transparent;
}

/*filled box*/

#carouselIndicatorsBox.active {
    height: 10px;
    border: none;
    background-color: #AEB0B5;
}

.fade {
    opacity: 1 !important;
}

.fade:hover {
    opacity: 0.5 !important;
    transition: all .4s ease-in-out;
    cursor: pointer;
}

/*form requirements styling*/

.form-req {
    color: #CD2026;
}

.alert-danger {
    color: rgb(205, 32, 38);
    background-color: rgb(205, 32, 38);
    border-color: #f5c6cb;
}

.alert-danger p {
    color: white;
}

/* Redistricting: Contact */

.contact_submit_button {
    display: inline-block;
    padding: 3px 8px;
    font-size: 14px;
    margin: 10px 0px 5px;
    border: 1px solid #CCC;
    border-radius: 3px;
    /* background-color:#FFF; */
}

.contact_success,
.contact_alert {
    margin-bottom: 8px;
}

/*MEDIA QUERIES*/

/*Extra small devices (landscape phones, 576px and down)*/

@media (max-width: 576px) {
    .image-section {
        width: 100%;
        height: 14em;
        background-image: url('../images/skyline-768-shaded.svg');
        background-attachment: initial;
        background-size: 768px 12.5em;
        background-position: center;
        background-repeat: no-repeat;
    }
    .dropdown-item span {
        font-size: 14px;
    }
    .search-container {
        text-align: right;
        position: absolute;
        width: 300px;
        overflow: hidden;
        background: transparent;
        right: -5px;
        top: 0;
        z-index: 1;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    .icon-custom {
        max-width: 100px;
        margin-bottom: 25px;
    }
    /*same responsive img on varying screen widths*/
    .carousel img {
        width: 75%;
    }
    .carousel-inner .carousel-item img {
        margin: auto !important;
    }
    /*fix distance btwn img and boxes*/
    .carousel-indicators {
        bottom: -2rem;
    }
    /* redistricting homepage mobile spacing for icons */
    .redist-home-icon {
        margin-top: 30px;
    }
    /* redistricting homepage mobile spacing for icons */
    #redist-wrm-icon.redist-home-icon {
        margin-top: 15px;
    }
    /* when Redist: History event timeline is on*/
    #chron-section {
        margin-top: 180px;
    }
}

/*darken nav tabs*/

.nav.nav-tabs.small.justify-content-center,
#historyTab,
#mapTab {
    border-bottom: 1px solid #AEB0B5 !important;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #AEB0B5 #AEB0B5 #fff;
}

/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    .dropdown-item span {
        font-size: 14px;
    }
    .image-section {
        width: 100%;
        height: 14em;
        background-image: url('../images/skyline-768-shaded.svg');
        background-attachment: initial;
        background-size: 768px 12.5em;
        background-position: center;
        background-repeat: no-repeat;
    }
    .search-container {
        text-align: right;
        position: absolute;
        width: 300px;
        overflow: hidden;
        background: transparent;
        right: 245px;
        top: 0;
        z-index: 1;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    .icon-custom {
        max-width: 135px;
    }
    .carousel-inner .carousel-item a img {
        margin: auto;
    }
    /*fix distance btwn img and boxes*/
    .carousel-indicators {
        bottom: -2rem;
    }
    /* when Redist: History event timeline is on*/
    #chron-section {
        margin-top: 140px;
    }
}

/*Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) {
    .dropdown-item span {
        font-size: 1rem;
    }
    .image-section {
        width: 100%;
        height: 19em;
        background-image: url('../images/skyline-768-shaded.svg');
        background-attachment: initial;
        background-size: 1125px 20em;
    }
    .search-container {
        right: 425px;
    }
    /* redistricting homepage desktop spacing for icons */
    .redist-home-icon {
        margin-top: 50px;
    }
    /* when Redist: History event timeline is on*/
    #chron-section {
        margin-top: 110px;
    }
}

/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) {
    .image-section {
        width: 100%;
        height: 21em;
        background-image: url('../images/skyline-992-shaded.svg');
        background-attachment: initial;
        background-size: 1200px 21em;
        background-position: center;
        background-repeat: no-repeat;
    }
    .search-container {
        text-align: right;
        position: absolute;
        width: 300px;
        overflow: hidden;
        background: transparent;
        right: 45px;
    }
    h4 {
        margin-top: 0;
    }
    .carousel-control-next {
        right: 50px;
    }
    .carousel-control-prev {
        left: 50px;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {
    .image-section {
        width: 100%;
        height: 28em;
        background-image: url('../images/skyline-1200-shaded.svg');
        background-attachment: initial;
        background-size: 3290px 26em;
    }
    /*fix distance of arrows from img*/
    .carousel-control-next {
        right: 10%;
    }
    .carousel-control-prev {
        left: 10%;
    }
    /*spacing between publications rows*/
    .card-force-row {
        margin-top: 20px;
    }
}