@charset "UTF-8";
/* CSS Document */

/* unvisited link */




#mybgcarousel{ /* CSS for specific carousel container called #mybgcarousel. */
    z-index:0;
    margin-left:auto;
    margin-right:auto;

}

/* ######### Shared CSS for various parts of carousel (in the event of multiple carousels) ######### */

div.bgcarousel{ /* shared CSS for main carousel container */
background: black  url(ajaxload.gif) center center no-repeat; /* loading gif while caoursel is loading */
        border-bottom: 0px solid #333;
    border-radius: 20px;

}

div.bgcarousel img.navbutton{ /* CSS for the nav buttons */
}

div.bgcarousel div.slide{ /* CSS for each image's DIV container within main container */
background-color: #333;
background-position: center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: #000;
 margin: 0px;
    padding:0;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.9) inset;
        border-radius: 20px;



}

div.bgcarousel div.selectedslide{ 
    
    
    /* CSS for currently selected slide */
}

div.bgcarousel div.slide div.desc{ /* DIV that contains the textual description inside .slide */
position: absolute;
left: 5%;
top: 0px;
width:auto;
height:100%;
padding: 30px;
z-index:1;
border-right: 1px solid #000;
border-radius-top-left: 20px;
border-radius-bottom-left: 20px;
background-color: rgba(0, 0, 0, 0.5);
font-family: bebas-neue, sans-serif;
font-style: normal;
font-weight: 400;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
 font-size:  40px;
line-height: 90%;   
      color: #EEE;

}
    
    

div.bgcarousel div.selectedslide div.desc{ /* CSS for currently selected slide's desc div */
    

    
}

div.bgcarousel div.slide div.desc h2{
font-size:20px;
margin:0;
font-weight:normal;
font-family: bebas-neue, sans-serif;
font-style: normal;
color: #EEE;
border-top:1px solid #EEE;
border-bottom: 1px solid #EEE;
padding-top: 5px;
padding-right: 1px;
padding-bottom: 5px;
line-height: 90%;
text-indent: 1px;
  
}

div.bgcarousel div.slide div.desc h3{
font-size:20px;
margin:0;
        font-weight:normal;
    font-family: bebas-neue, sans-serif;
font-style: normal;
      color: #EEE;
      border-top: 1px solid #EEE;
    border-bottom:1px solid #EEE;
    padding-top: 5px;
       line-height: 90%;
}
div.bgcarousel div.slide div.desc h4
{
color:#DDD;
font-size: 12px;

font-family: expressway, sans-serif;
font-weight: 400;
font-style: normal;
padding-top: 0px;
padding-bottom: 0px;
text-indent: 0px;
line-height: 16px;


}



div.bgcarousel div.slide div.desc a{
color:#EEE;
text-decoration:none;
}





/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
#mybgcarousel{ 
width:100%;
height:250px; 
box-shadow: 5px 8px 5px rgba(0, 0, 0, 0.5);


}
    
        
div.bgcarousel div.slide div.desc{ 
font-size:  40px;
        padding:15px;
    
    }
    
div.bgcarousel div.slide div.desc h4
{
font-size: 12px;
line-height: 14px;

    }
    
    .fronttitlebox{
width:89%;
padding-left:1%;
    }
    
    }

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
#mybgcarousel{ 
width:100%;
height:250px;

}
    
div.bgcarousel div.slide div.desc{ 
font-size:  40px;

    
    
    
}
div.bgcarousel div.slide div.desc h4
{
font-size: 12px;
line-height: 14px;

    }
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 601px) {
#mybgcarousel{ 
width:100%;
height:300px;
    
} 
    
div.bgcarousel div.slide div.desc{ 
font-size:  50px;
    
    

}
    
div.bgcarousel div.slide div.desc h4

{
font-size: 13px;
line-height: 15px;

    }
    
    
  
    }
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
#mybgcarousel{ 
width:100%;
height:400px;
    

} 
 
div.bgcarousel div.slide div.desc{ 
font-size:  60px;
    
    
    
}
    
       div.bgcarousel div.slide div.desc h4

{
font-size: 14px;
line-height: 16px;

    }
  
    }

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
#mybgcarousel{ 
width:100%;
height:450px;

}
    
div.bgcarousel div.slide div.desc{ 
font-size:  80px;
line-height: 90%;
}
    
div.bgcarousel div.slide div.desc h4
{
font-size: 16px;
line-height: 18px;

    }
  
   
}
    
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1930px) {
#mybgcarousel{ 
width:100%;
height:600px;

}
    
div.bgcarousel div.slide div.desc{ 
font-size:  80px;
}
  

    }