@import url(/css/everypageStyles.css);
/* XS - initial classes */
/* Homepage wrapper class */
.appBannerHeader h2 {
    text-align:center;
    margin-top:25px;
    margin-bottom:25px;
    font-weight:900;
    color:#333;
}
.overlayContainerApp {
    
}
.overlayContainerApp:hover .overlayShadeApp {
    opacity:.8;
    cursor:pointer;
    transition:.5s opacity ease-in-out;
}
.overlayContainerApp:hover .overlayContentApp {
    opacity:1;
    transition:.5s opacity ease-in-out;
    cursor:pointer;
}
.overlayShadeApp {
    background:#0099ff;
    opacity:0;
    width:100%;    
    transition:.5s opacity ease-in-out;
}
.overlayContentApp {
    opacity:0;
    transition:.5s opacity ease-in-out;
}
.overlayContentApp h2 {
    font-size:1.5em;
    max-width:150px;
    margin:auto;
    font-weight:600;
    line-height:150%;
    text-align:center;
    text-transform:uppercase;
}
.overlayContentApp img {
    margin:auto;
    margin-bottom:5px;
}
.overlayContentApp h2:last-child:after {
    content: '▶';
    display:block;
    font-size:2.5em;
    margin-top:5px;   
}

.overlayContentApp h2 strong {    
    font-size:1.35em;
    line-height:100%;
    font-weight:900;
}
@media(min-width:1200px) {
    .overlayContentApp h2 strong {
        font-size:1.8em;
    }
}
.cellTitle {
    background-color:#0099ff;
    opacity:.8;
}
.cellHoverFlag:hover .cellTitle{
    opacity:0;
}
.cellHoverFlag .arrow-right:hover {
    border-left: 25px solid rgba(255,255,255,.8);
    transform:scale(1.1);
    transition:.5s all ease-in-out;
}




.pg {
    width:100%;
    height:auto;
    background-color:#fff;
    font-size:12px;
    line-height:12px;
}
/* Orange section wrapper class */
.contentSection {   
    margin:auto;
}
.contentSection h2, .contentSection h1{
    color:#0099ff;
    font-size:2.75em;
    font-weight:500;       
    font-family: 'Roboto Slab', sans-serif; 
    text-align:center;
    margin:0;
    padding:0;
}
.contentSection h3 {
    margin-top:5px;
    margin-bottom:35px;
    text-align:center;
}
.contentSection hr {
    width:25%;
    height:3px;
    margin-bottom:15px;
    background-color:#fb9100;
}
.contentSection p {
    line-height:150%;
    font-weight:600;
    color:#333;    
}
.contentSection h2 strong{
    font-weight:700;
    font-family: 'Roboto Slab', sans-serif; 
}

.contentSection p{
    color:#333;
    font-size:1.3em;
    line-height:1.75em;
}
.contentSection p strong{
    font-weight:700;
}
.brandingSection h2 {
    text-align:center;
    margin-top:0;
    padding-top:0;
    font-weight:900;
    color:#333;
}
.brandingSection hr {
    background-color:#fb9100;
    height:3px;
    margin:auto;
    width:25%;
    margin-top:25px;
    margin-bottom:25px;
}
.brandingSection .col-sm-2 {
    padding-left:0;
    padding-right:8px;    
}
.brandingSection img {
    border:1px solid #777;
}
.featureBox {
    padding-top:30px;
    padding-bottom:30px;
}
.featureBox img{

}
.featureBox h2{
    color:#333;
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    font-size:20px;
    margin-bottom:15px;
    margin-top:15px;
}
.featureBox h3{
    text-transform:uppercase;
    color:#333;
    text-align:center;
    font-size:16px;
    margin-bottom:0;
}



/*Overlay section*/
.overlayContainer {
    position:relative;
    height:325px;
    background-color:#fff;
    padding:5px;
    cursor:pointer;
    display:block;
}
.overlayContainer img {

}
.overlayContainer .overlayShade {
    background-color:rgba(0,0,0,.7);
    position:absolute;
    height:325px;
    width:100%;
    top:0;
    left:0px;
    z-index:0;
    opacity:0;
    transition:1s opacity ease-in-out;
}
/* XS-big */
@media(min-width:500px) {

}
/* SM  */
@media(min-width:768px) {
    .overlayContainer {
        height:225px;
    }
    .overlayContainer .overlayShade {
        height:225px;
    }
    .contentSection.listContent ul {
        color:#fff;
        list-style:none;
        font-size:1.5em;
    }
    .contentSection.listContent ul li {
        line-height:150%;
    }
    .bannerOverlay {
        top:225px;
    }

}
/* MD  */
@media(min-width:992px) {
    .overlayContainer {
        height:275px;
    }
    .overlayContainer .overlayShade {
        height:275px;
    }
    .contentSection {
        max-width: none;
    }
        .contentSection.listContent ul {
            font-size:2em;
        }
}
/* LG */
@media(min-width:1200px) {
    .overlayContainer {
        height:325px;
    }
    .overlayContainer .overlayShade {
        height:325px;
    }
}