/** GENERAL STYLES */
/* include body, header tags, p, */

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 19px;
    margin: 0;
}

h1, h2 ,h3, h4{
    text-transform: uppercase;
    /* font-family: 'Roboto', sans-serif; */
    

}

h2, #contact-us h1 {
    font-weight: bold;
    font-size: 2.2em;
    font-stretch: condensed;
    font-family: 'Open Sans Condensed', sans-serif;
    margin: 0; 
    margin-bottom: 20px;
}


a{
    text-decoration: none;
}

.primary{

}

.secondary{

}

.primary-bg{

}

.blue-bg{
    background-color: #2591d0;

}

.secondary-bg {
    background-color: #f4f5f5;
}

.btm-bg{
    background-color: #404040;
}

.black-bg {
    background-color: #474747;
}

.white-bg{
    background-color: #FFF;
}

.full-width-container{
    width: 100%;
}

.light-gray-bg{
    background-color: #ededed;
}

.container{
    width: 1170px;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-top: 40px;
}


.bdr-top {
    width: 100%;
    height: 5px;
    background-color: rgba(219, 40, 39, 1);
}

.flex{
    display: flex
}

.f-col {
    display: flex;
    flex-direction: column;
}

.f-row{
    flex-direction: row; 
}

.f-one{
    flex: 1;
}

.f-wrap{
    display: flex;
    flex-wrap: wrap;
}


.font-oswald{
    font-family: 'Oswald';
}

.space-between{
    justify-content: space-between;
}
.bdr{
    border: 1px solid #000;
}

.bdr-t{
    border-top: 1px solid #000;
}

.bdr-r{
    border-right: 1px solid #000;
}

.bdr-b{
    border-bottom: 1px solid #000;
}

.bdr-l{
    border-left: 1px solid #000;
}

.bdr-dotted{
    border-style: dotted;
}

.bdr-dashed{
    border-style: dashed;
}

.allcaps{
    text-transform: uppercase;
}

.offscreen{
    position: relative;
    left: -10000;
    font-size: 0;
    height: 0;
    width: 0;
}

.mid-bdr {
    width: 50px;
}

.mid-bdr {
    background-image: url(../images/bdr.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.tag-line {
    letter-spacing: 0.03em;
}


.gray-btn {
    background-color: #404040;
    border: none;
    padding: 10px 10px;
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.03em;
    border-radius: 5px;
    font-size: .8em;
    cursor: pointer;        
}


.gray-btn:hover{
    background-color: #000;
}

.nowrap {
    white-space: nowrap;
}


.pad-6{ padding: 6px; }
.pad-10{ padding: 10px; }
.pad-20{ padding: 20px; }
.pad-30{ padding: 30px; }
.pad-40{ padding: 40px; }


.margin-10{ margin: 10px; }
.margin-20{ margin: 20px; }
.margin-30{ margin: 30px; }
.margin-40{ margin: 40px; }

.margin-top-50{ margin-top: 50px; }



.play-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.play-btn img{
   display: none !important;
}*/


.width-33 {
    width: 33%;
}

.bdr-btm-strip {
    width: 100%;
    height: 7px;
    background-image: url(../images/hero/hero_btm_bdr.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.hdr-strip {
    margin-bottom: 30px;
    background-color: #4e4e4e;
    height: 45px;
    display: flex;
    align-items: start;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 8px;
    justify-content: center;
    padding-left: 10px;
}

.hdr-strip h2, .hdr-strip h1 {
    padding: 0;
    margin: 0;
    color: #FFF;
    font-size: 1.4em !important;
    margin-bottom: 0 !important;
    font-stretch: condensed;
    font-family: 'Open Sans Condensed', sans-serif;
}


 #footer .bdr-btm {
    width: 100%;
    height: 7px;
    background-image: url(../images/hero/hero_btm_bdr.png);
    background-repeat: no-repeat;
    background-size: cover;
}


.disabled {
    cursor: not-allowed;
}


/************************** MOBILE STYLES IN LANDSCAPE ***********************************/


/********* TABLET LANDSCAPE *********/
@media screen and (max-device-width: 1024px) and (orientation: landscape){

    
     
    .container {
        width: 100% !important;
        padding: 40px 30px;
        box-sizing: border-box;
    }

    
}




/********* LARGE PHONE LANDSCAPE *********/
@media screen and (max-device-width: 736px) and (orientation: landscape){

  
    
}




/********* SMALL PHONE LANDSCAPE *********/
@media screen and (max-device-width: 640px) and (orientation: landscape){

    
  
    
}






/************************** MOBILE STYLES IN PORTRAIT ***********************************/


/********* TABLET PORTRAIT */
@media screen and (max-device-width: 768px) and (orientation: portrait){

    
    .container {
        width: 100% !important;
        padding: 40px 30px;
        box-sizing: border-box;
    }

    
    
}



/********* LARGE PHONE PORTRAIT */
@media screen and (max-device-width: 414px) and (orientation: portrait){
    
    body{
        font-size: 15px;
        line-height: 20px;
    }

    .container {
        padding: 40px 15px;
    }


    .sub-header h2 {
        line-height: 1em;
        font-size: 1.7em;
        margin-bottom: 10;
    }

    .tag-line {
        letter-spacing: 0.05em;
        font-size: 0.85em;
    }
   
    
}



/********* SMALL PHONE PORTRAIT */
@media screen and (max-device-width: 360px) and (orientation: portrait){

    
    .container {
        padding: 30px 15px;
    }

    
}