body,
#wrapper,
#content {
    background-color: #ffffff;
}

.module {
    padding: 100px 0;
}

.module.darkBg {
    background-color: #f4f4f4;
}

.lightBg {
    background-color: #ffffff;
}

.module.borderBottom {
    border-bottom: 1px solid #b1b1b0;
}

.bars-container {
    padding: 35px 0 0 0;
    border-bottom: 1px solid grey;
    height: 360px;
    position: relative;
}

.show-on-smaller .bars-container {
    padding: 20px 0 0 0;
}

.bars-container.left { border-right: 1px solid grey; position: relative; }
.bars-container.left .backing { position: absolute; right: 0; }
.bars-container.right { border-left: 1px solid grey; }

.bars-container .backing {
    margin-bottom: 25px;
    position: relative;
}

.show-on-smaller .bars-container .backing {
    margin-bottom: 30px;
}

.bars-container .backing.blue { background-color: #99ccff; }
.bars-container .backing.red { background-color: #ff9999; }
.bars-container .backing.green { background-color: #99ff99; }
.bars-container .backing.grey { background-color: #cccccc; }

.bars-container.left .backing.blue { background-color: #99ccff; }
.bars-container.left .backing.red { background-color: #ff9999; }
.bars-container.left .backing.green { background-color: #99ff99; }
.bars-container.left .backing.grey { background-color: #cccccc; }

.bars-container .backing .number {
    padding: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    display: inline-block;
}

.bars-container .backing .title {
    position: absolute;
    top: 50px;
    font-weight: bold;
}

.bars-container.right .backing .title {
    left: 10px;
}

.bars-container.left .backing .title {
    right: 10px;
}
.bars-container .backing.blue .number { background-color: blue; }
.bars-container .backing.red .number { background-color: red; }
.bars-container .backing.green .number { background-color: green; }
.bars-container .backing.grey .number { background-color: grey; }

.scale {
    color: #444;
    font-size: 11px;
}

.scale .title,
.bar-title {
    color: #444;
    margin: 7px 0;
    font-size: 20px;
    font-weight: bold;
}

.bar-title {
    font-size: 22px;
}

.show-on-smaller {
    display: none;
}

@media only screen and (max-width: 1200px) {
    .hide-on-smaller {
        display: none;
    }

    .show-on-smaller {
        display: block
    }

}

@media only screen {
    .print {
        display: none;
    }
}

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

}

/***** MODAL PROPERTIES *****/
.modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    background:transparent;
    border:none;
    outline:none;
}
.modal-content iframe {
    border:none;
    padding:0;
    margin:0;
}
.close {
    font-size: 80px;
    margin:-20px 0 0 0;
}
/***** MEDIA QUERIES *****/
    @media only screen and (max-width: 641px) {
    /***** MODAL PROPERTIES *****/
    .modal-body {
        height:100px;
        padding:0;
        margin: 0;
    }
    .modal-content {
        padding:0;
        margin: 0;
    }
    .modal-dialog {
        position: relative;
        width: auto;
        margin: 15px;
    }
    .close {
        margin:-12px 0 0 0;
    }
}
@media only screen and (min-width: 768px) {
    /***** MODAL PROPERTIES *****/
    .close {
        font-size: 80px;
        margin:30px -43px -20px 100px;
    }
}

.videos img {
    min-width: 100%;
    height: auto;
}

.videos img:hover {
    cursor: pointer;
    border: 1px solid #666;
}

@media print {
    .results .col-lg-4 {
	    width: 25% !important;
    }

    .results .col-lg-8 {
        width: 75% !important;
    }
}

.colors {
    z-index: 0;
}

.colors .litabs {
    z-index: 2;
}

.colors .tab-content {
    z-index: 1;
    margin-top: -1px;
    border-top: 2px solid #dddddd;
}

.nav.nav-tabs {
    border-bottom: none;
}

.nav li {
    width: 25%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

@media only screen and (max-width: 641px) {
    .nav li {
        font-size: 14px;
    }
}

.nav li a {
    background-color: #ebebe8;
    border: 2px solid #dddddd;
    border-bottom: none;
    margin-right: 0;
    border-radius: 0;
}

.nav li.active a {
    border-width: 2px;
    border-color: #dddddd;
    border-bottom: none;
}

.panel-default > .panel-heading {
    background-color: #ffffff;
}

.panel-heading {
    border-bottom-color: #ffffff;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.panel-group .panel + .panel {
    margin-top: 0;
}

.panel-title a {
    font-size: 24px;
    display: inline-block;
    padding: 20px 20px 20px 17.5%;
    width: 100%;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: none;
}

@media only screen and (max-width: 641px) {
    .panel-title a {
        padding: 10px 10px 10px 4.5%;
    }
}

.tab-content {
    padding-top: 50px;
}

.tab-content .state .details p {
    font-size: 16px;
}

.tab-content .state ul {
    margin-left: 15px;
}

.mobilenav {
    display: none;
    padding-top: 20px;
    padding-right: 20px;
    width: 100%;
}

.mobilenav > div {
    float: left;
    display: inline;
    width: 50%;
}

.mobilenav i {
    font-size: 36px;
}

@media only screen and (max-width: 641px) {
    .mobilenav {
        display: block;
    }

    .desktopnav {
        display: none;
    }
}

.mobileheader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: white;
}

.mobileheader .close {
    line-height: 0; 
    font-size: 0;
    color: transparent;
}

.mobileheader .close:hover {
    color: inherit;
}

.mobileheader .close i {
    color: #555555;
    font-size: 36px;
    line-height: auto;
}

.nextsteps .social a {
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}

.communication {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: column;
    margin: 20px 0;
}

.communication div {
    flex: 3;
    padding: 15px;
    color: white;
}

.communication div.grey {background-color: #626668;}
.communication div.green {background-color: #257F52;}
.communication div.red {background-color: #B93B41;}

.communication div ul {
    margin-left: 15px;
}

.results ul {
    margin-left: 15px;
}

.hrule {
    border-top: 1px dotted #000;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 80px;
}

.types {
    position: relative;
    max-width: 500px;
    margin: 25px auto;
}

.types .type {
    font-size: 16px;
    font-weight: bold;
    width: 49%;
    display: inline-block;
    padding: 40px 10px;
    color: black;
    border-width: 0;
    border-style: dashed;
}

@media only screen and (max-width: 641px) {
    .types .type {
        font-size: 16px;
    }
}

.types .type.t1 {
    border-bottom-width: 5px;
    border-right-width: 5px;
}

.types .type.t2 {
    border-bottom-width: 5px;
}

.types .type.t3 {
    border-right-width: 5px;
}

/*.types .type {
    position: absolute;
    top: 104px;
    left: 0;
    text-align: center;
    width: 43%;
}

.types .type.t2 {
    left: 200px;
}

.types .type.t3 {
    top: 235px;
}

.types .type.t4 {
    top: 235px;
    left: 200px;
}*/

.welcome h1 span,
.welcome h2 span,
.welcome h3 span,
.welcome h4 span,
.welcome h5 span,
.welcome h6 span,
.overall h1 span,
.overall h2 span,
.overall h3 span,
.overall h4 span,
.overall h5 span,
.overall h6 span,
.scores h1 span,
.scores h2 span,
.scores h3 span,
.scores h4 span,
.scores h5 span,
.scores h6 span,
.understanding h1 span,
.understanding h2 span,
.understanding h3 span,
.understanding h4 span,
.understanding h5 span,
.understanding h6 span,
.colors h1 span,
.colors h2 span,
.colors h3 span,
.colors h4 span,
.colors h5 span,
.colors h6 span,
.nextsteps h1 span,
.nextsteps h2 span,
.nextsteps h3 span,
.nextsteps h4 span,
.nextsteps h5 span,
.nextsteps h6 span {
    color: #444;
}

.tab-pane img:hover {
    cursor: pointer;
}