/* Add here all your CSS customizations */
@font-face {
    font-family: Roboto-Black;
    src: url("fonts/Roboto-Black.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-BlackItalic;
    src: url("fonts/Roboto-BlackItalic.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Bold;
    src: url("fonts/Roboto-Bold.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-BoldItalic;
    src: url("fonts/Roboto-BoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Italic;
    src: url("fonts/Roboto-Italic.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Light;
    src: url("fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-LightItalic;
    src: url("fonts/Roboto-LightItalic.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Medium;
    src: url("fonts/Roboto-Medium.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-MediumItalic;
    src: url("fonts/Roboto-MediumItalic.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Regular;
    src: url("fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-Thin;
    src: url("fonts/Roboto-Thin.ttf") format("truetype");
}

@font-face {
    font-family: Roboto-ThinItalic;
    src: url("fonts/Roboto-ThinItalic.ttf") format("truetype");
}


p {
    font-family: Roboto-Light !important;
}

h1.bold,
h2.bold {
    font-family: Roboto-Bold !important;
    line-height: 1.2em !important;
}

h2.thin,
h3.thin {
    font-family: Roboto-Light !important;
    line-height: 1.2em !important;
}

span.thin,
small.thin {
    font-family: Roboto-Light !important;
}


span.light {
    font-family: Roboto-Light !important;
}






div,
span {
    /*border: 1px dotted #dfdfdf;*/
}




body {
    overflow-y: hidden;
    margin-top:50px;
}

#header{
    position:fixed;
    top:0;
    width:100%;
}

#header .header-nav-main nav > ul > li,
#header .header-nav-main nav > ul > li > a{
    font-weight: 200;
}

    body.sticky-menu-active #header .nav-main-collapse,
    #header.fixed .nav-main-collapse {
        max-height: 420px;
    }


#header .header-body {
    min-height: 80px !important;
    max-height: 100px !important;
    background-color: #000;
    color: #fff !important;
    border-top:0px;
}

#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li > a:hover {
    color: #fff;
    background-color: #000;
}

.header-nav-main nav > ul > li > a:hover {
    text-decoration: none !important;
}

.btnSubscribe:hover {
    text-decoration: none !important;
    color: #fff;
}

#header .header-btn-collapse-nav {
    background: #000;
}

.header-container.container {
    background-color: #000;
    width:100%!important;
}

#mainNav .dropdown-menu>li>a:focus, #mainNav .dropdown-menu>li>a:hover{
    background-color:transparent;
}

@media only screen and (min-width : 1224px) {
    #header .header-nav-main {
        float: right;
        margin: 0px;
        min-height: 45px;
    }


    #hdc1 {
        width: 10%;
    }

    #hdc2 {
        width: 90%;
    }
}
#header .header-nav-main nav > ul li {
    border-bottom: none !important;
}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    #hdc1 a {
        float: left;
        margin-right: 5px;
    }
}


@media only screen and (min-width : 320px) and (max-width : 480px) {
    #hdc1 a {
        float: left;
        margin-right: 5px;
    }
}





.centerHeaderText {
    font-family: Roboto-Bold !important;
    float: left;
    margin-top: 15px;
    margin-left: 10px;
    font-size: 1.3em;
}
.audioSample:hover{
    text-decoration:underline;
}

.openWatchVideoModal,
.audioSample {
    cursor: pointer;
    font-family: Roboto-Thin !important;
}


ul.black li,
ul.black li span {
    color: #000;
}

ul.white li,
ul.white li span {
    color: #fff;
}



/* Phones and Handhelds - Landscape */
@media only screen 
  and (min-width: 320px) 
  and (max-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape),
      (min-width: 320px) 
      and (max-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) { 
    #AllImageRows #row1 img,
    #AllImageRows #row2 img,
    #AllImageRows #row3 img,
    #AllImageRows #row4 img,
    #AllImageRows #row5 img{
        display:none!important;
    }
    #AllImageRows #row1 span.textBlock,
    #AllImageRows #row2 span.textBlock,
    #AllImageRows #row3 span.textBlock,
    #AllImageRows #row4 span.textBlock,
    #AllImageRows #row5 span.textBlock{
        top:10%;
        left:0;
        right:0;
        text-align:center;
        width:100%;
    }


    ul.black,
    ul.white{
        display:inline-table;
        text-align:left;
    }
    ul.white li,
    ul.white li span{
        color:#000;
    }

    .openWatchVideoModal {
        font-size:25px;
    }
}


#AllImageRows h2 {
    font-family: Roboto-Bold !important;
    margin-bottom: 15px;
}

#AllImageRows .col-xs-12 {
    margin: 0px;
    padding: 0px 15px 0px 15px;
}

#AllImageRows img {
    position: relative;
    width: 100%;
}


#AllImageRows span.textBlock span.bold {
    font-family: Roboto-Bold;
}

 #AllImageRows span.textBlock span.thin {
    font-family: Roboto-Light;
}

 #AllImageRows #row4 span.textBlock span.thin {
    font-family: Roboto-Thin;
}


#AllImageRows span.textBlock {
    font-family: Roboto-Light !important;
    line-height: 1.6em;
    font-size: 1.6em;
    color: #000;
    position: absolute;
    width: 100%;
}

#AllImageRows span.textBlock li {
    line-height: 1.6em;
    font-size: 1.0em;
}

#AllImageRows span.bold.lg {
    font-size: 1.4em;
}

.panel.panel-default{
    border:0px;
    border-color:#fff;
}           


.LearnMoreRowWrapper{
    position:absolute;
    bottom:5%;
    width:100%;
    margin:0px;
}

.LearnMoreRowWrapper.fa-times-circle,
.LearnMoreRowWrapper.fa-plus-circle,
.LearnMoreRowWrapper.fa-minus-circle{
    color:#000;

}


.LearnMoreRowWrapper .learnMoreOpen,
.LearnMoreRowWrapper .learnMoreClose {
    font-size:1.6em;
}


@media only screen and (min-width : 768px) and (max-width : 1024px) {
        .LearnMoreRowWrapper .learnMoreOpen,
    .LearnMoreRowWrapper .learnMoreClose {
        font-size:1.0em;
    }

}
            
            
.LearnMoreRowWrapper .learnMoreClose{
    display:none;
}         


/*      DESKTOP & LAPTP      */
@media only screen and (min-width : 1224px) {
    .openWatchVideoModal{
        font-size:20px;
    }
}

/*      iPAD (PORTRAIT)      */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {
    .openWatchVideoModal{
        font-size:20px;
    }
}

/*      iPAD (LANDSCAPE)      */
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) {
   .openWatchVideoModal{
        font-size:20px;
    }
}



@media only screen and (min-width : 320px) and (max-width : 480px) {
    .openWatchVideoModal{
        font-size:25px;
    }
}



#header .header-body {
    min-height: 50px !important;
    max-height: 50px !important;
    background-color: #000;
    color: #fff !important;
    margin:0px;
    padding:0px;
}

        
           
@media only screen and (min-width : 768px) and (max-width : 1024px) {
        #header .header-logo{
        float:left;
        padding-top:5px;
    }
    .centerHeaderText{
        margin-left:225px;
    }

}

@media only screen and (min-width : 320px) and (max-width : 480px) {
        #header .header-logo{
        float:left;
        padding-top:5px;
    }
    .centerHeaderText{
        margin-left:40px;
    }
}


.fa.fa-times-circle,
.fa-2x{
    color:#c5c5c5;
}


header .container{
    max-width:970px;
    max-width:100%!important;
}