/* Track */
::-webkit-scrollbar-track {
  background:rgba(255,255,255,1);  
}


/*
.ctcOverlayImageContainer ::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,1); 
}
*/
.ctcOverlayEl,
.ctcOverlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  
  
  height:0;
  position: fixed; /* Stay in place */
  z-index: 100000; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(0,0,0,0.8); /* Black fallback color */ 
   overflow:hidden;
   
}

/* Position the content inside the overlay */
.ctcOverlayContent {

}

/* The navigation links inside the overlay */
.ctcOverlayElClosebtn{
float: right;
z-index: 25000!important;
font-size: 25px;
right:0;
top: 0;
}
.ctcOverlayClosebtn{
float:right;
z-index: 25000!important; /* Sit on top */
font-size:20px;
   top:0;
}

.overlayContentloading{

  
   

}
.overlayContentloading::before{
color:rgb(255,99,71) !important;
}

.ctcOverlayElClosebtn{

}
/* Position the close button (top right corner) */
.ctcOverlayElClosebtn::before,
.ctcOverlay .ctcOverlayClosebtn::before {
content:"\00d7"; 
  text-decoration: none;
  color:rgba(255,255,255,0.8);
  
}


/* When you mouse over the navigation links, change their color */
.ctcOverlayElClosebtn:hover,
.ctcOverlayClosebtn:hover{
   cursor:pointer;
    color:rgba(255,255,255,1);
   

}



.ctcOverlay .ctcGalleryLeftNav::before{
content:"\2039";
color:rgba(255,255,255,1) !important;
margin-left:auto;
margin-right:auto;
display:block;
}

.ctcOverlay .ctcGalleryRightNav::before{

content:"\203A"; 
color:rgba(255,255,255,1) !important;
margin-left:auto;
margin-right:auto;
display:block;


}



.ctcGalleryLeftNav{
     float:left;
     -webkit-transition: width 2s; /* Safari */
          transition: width 2s;
          transition: 0.5s ease;
         -webkit-transition: 0.5s ease;
         -moz-transition: 0.5s ease;
          display:inline-block!important;;
          cursor:pointer;
          font-size:120px;
          z-index:125500;
          height:120px;
       opacity:0;
        display:none !important;
        background-color:color:rgba(0,0,0,0.5) !important;
}


.ctcGalleryRightNav{
     float:right;
    -webkit-transition: width 2s; /* Safari */
          transition: width 2s;
          transition: 0.5s ease;
         -webkit-transition: 0.5s ease;
         -moz-transition: 0.5s ease;
          display:inline-block!important;;
          cursor:pointer;
          font-size:120px;
          z-index:125500;
          height:120px;
          opacity:0;
         display:none !important;
         background-color:color:rgba(0,0,0,0.5) !important;
         
}




.ctcOverlayImageContainer:hover .ctcGalleryLeftNav,
.ctcOverlayImageContainer:hover .ctcGalleryRightNav{
  -webkit-transition: width 0.5s; /* Safari */
   transition: width 0.5;
   transition: 0.5s ease;
   -webkit-transition: 0.5s ease;
   -moz-transition: 0.5s ease;
   color:white;
    display:inline-block;
    cursor:pointer;
    color:rgba(255,255,255,1);
    display:block !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
}
.ctcGalleryRightNav:active,
.ctcGalleryLeftNav:active,
.ctcGalleryRightNav:active div.ctcOverlayCountAndCurrentImage,
.ctcGalleryLeftNav:active .ctcLoadedImgAltTitle,
.ctcOverlayImageContainer:hover div.ctcOverlayCountAndCurrentImage,
.ctcOverlayImageContainer:hover div.ctcLoadedImgAltTitle{

-webkit-transition: width 0.5s; /* Safari */
   transition: width 0.5;
   transition: 0.5s ease;
   -webkit-transition: 0.5s ease;
   -moz-transition: 0.5s ease;	
opacity:1;

}

.ctcOverlayImageContainer{

  margin-left:auto;
  margin-right:auto;
  display:inline-block;
  position:absolute;
  text-align: center; /* Centered text/links */
  display:inline-block;
  border-radius:0.5%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 100% 100%;

}

.ctcOverlayImageContainer img{
margin-left:auto;
margin-right:auto;
display:block;
opacity:1; 
border-radius:2.5%;
position: relative; 
z-index: 25000!important; /* Sit on top */

}

.overlayContentloading{


}


div.ctcOverlayCountAndCurrentImage{
opacity:0;
color:rgba(255,255,255,1) !important;
float:left !important;
 background-color:rgba(0,0,0,0.5);
 border-radius:10%;
 padding:1px;
 max-width:30%;
  border:1px solid rgba(255,255,255,1);
 z-index:26500;  
  display:inline-block !important;
   left:0px;
  bottom:0px;
  position:absolute;
}
.ctcOverlayCountAndCurrentImage span{
color:white;
opacity:1;

}
.ctcOverlayCountAndCurrentImage span:nth-child(2){
width:10px;
}

.ctcLoadedImgAltTitle{

border:1px solid rgba(255,255,255,1);
 padding-left:5px;
 padding-right:5px;
 padding-bottom:2px;
 border-radius:10%;
 opacity:0;
  background-color:rgba(0,0,0,0.5);
  float:right;
  position:absolute;
  color:rgba(255,255,255,1);
  right:0px;
  bottom:0px;
  z-index:26500;
  opacity:0;
 display:none;
}

.ctcOverlayImages{
display:none;
width:0px;
height:0px;
}

.ctcImageBeingDisplayed{
 
}


/*styling for overlay content container*/
.overlayElContainer{

margin-right:auto;
margin-left:auto;
display:block;
background-color:rgba(0,0,0,1);
color:rgba(255,255,255,1) !important;
border:1px dotted rgba(255,255,255,0.5);
overflow:auto;

}

#overlayElContainer  div h2,
#overlayElContainer  div h3{

color:rgba(255,255,255,1);

}
#ctcOverlayModal:parent{
border-radius:10px !important;	
}

#ctcOverlayModal{

padding:4% !important;
}

#ctcOverlayModal 
#ctcOverlayModaButton{
float:right;
color:rgba(255,255,255,1) !important;
border:2px solid rgba(255,255,255,1);
background-color:rgba(0,0,0,1) !important;
color:rgba(255,255,255,1);
text-align:center !important;

margin-top:50px;

}


/*animation for page load*/
@-webkit-keyframes  animateContentLoad {
   0% {
        
     -webkit-transform: scale(1.5);
      opacity:0.7;
   }
  
  
  50% {
  
 opacity:0.8;
 -webkit-transform: scale(1.3);
   
  }
  
  100%{
     -webkit-transform: scale(1);
      opacity:1;
  }
}

@keyframes animateContentLoad {
      0% {
   -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
   transform: scale(1.5);
   opacity:0.7;
   }
  
  
  50% {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
   transform: scale(1.3);
   opacity:0.9;
    
  }
  
   100% {
  
   -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
   transform: scale(1);
    opacity:1;
    
  }
}


/*animation for wait while content is being loaded*/
@-webkit-keyframes   animateWaitLoading{
    from {

    -webkit-transform: rotate(0deg);

   }
  
  to {
    -webkit-transform: rotate(359deg);
  
   }
}

@keyframes animateWaitLoading{

from {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
   }
  
  to {
  -moz-transform: rotate(359deg);
  -o-transform: rotate(359deg);
  -ms-transform: rotate(359deg);
  transform: rotate(359deg);
  
   }


}