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

/* Handle */
/*
.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) */    
    
    width: 100%;
    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 */
    max-height:100%;
      -webkit-transition: height 3s ; /* Safari */
       transition:  height 3s;
       transition: 0.8s ease;
      -webkit-transition: 0.8s ease;
      -moz-transition: 0.8s ease;
      -ms-transition: 0.8s ease;
     overflow:hidden;
     
}

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

/* The navigation links inside the overlay */
.ctcOverlayElClosebtn,
.ctcOverlayClosebtn{
float:right;
font-weight:bold;
 z-index: 25000!important; /* Sit on top */
font-size:40px;
 -webkit-transition: width 0.2s; /* Safari */
     transition: width 0.2;
     transition: 0.2s ease;
     -webkit-transition: 0.2s ease;
     -moz-transition: 0.2s ease;
     top:0px;
     
}

.ctcOverlayElClosebtn{
	-webkit-animation:   animateContentLoad  1s linear;
    animation:   animateContentLoad 1s linear;
}
/* Position the close button (top right corner) */
.ctcOverlayElClosebtn::before,
.ctcOverlay .ctcOverlayClosebtn::before {
	content:"\00d7"; 
    text-decoration: none;
    transition: 0.3s; /* Transition effects on hover (color) */  
    color:rgba(255,255,255,0.8);
    
}


/* When you mouse over the navigation links, change their color */
.ctcOverlayElClosebtn:hover,
 .ctcOverlayClosebtn:hover{
    -webkit-transition: width 0.2s; /* Safari */
     transition: width 0.2;
     transition: 0.2 ease;
     -webkit-transition: 0.2s ease;
     -moz-transition: 0.2s ease;
         -webkit-transform: scale(1.3);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
     transform: scale(1.1);
      font-weight:bolder;
     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{
	-webkit-animation:   animateWaitLoading  1.5s infinite linear;
    animation:   animateWaitLoading  1.5s infinite linear;
	
}

 
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);
	border-radius:1%;
	color:rgba(255,255,255,1) !important;
	border:2px solid rgba(255,255,255,1);
	opacity:0;
	overflow:auto;
	 -webkit-animation:   animateContentLoad  1s linear;
    animation:   animateContentLoad  1s linear;
        max-width: 85% !important;
}

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

#ctcOverlayModal{
margin-left:auto !important;
margin-right:auto !important;
display:block !important;
text-align:center !important;	
padding-top:5% !important;
}

#ctcOverlayModal #ctcOverlayModaButton{
	float:right;
	height:45px !important;
	margin-right:5% !important;
	color:rgba(255,255,255,1) !important;
	border:2px solid rgba(255,255,255,1);
	border-radius:10px!important;
	text-align:center !important;
	margin-top:15px !important;
	
}


/*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{
     0% {
       opacity:0.5;
     }
    
    
  15% {
  		 opacity:0.6;
    }
    
    30%{
    	
         opacity:0.7;
    }
    45%{
    	 opacity:0.8;
        
    }
    60%{
    	opacity:0.9;
       
    }
     75%{
    	  opacity:0.8;
    }
    90%{
    	  opacity:0.7;
    }
     100%{
    	  opacity:0.6;
    }
}

@keyframes animateWaitLoading{
    0% {
       opacity:0.5;
     }
    
    
  15% {
  		 opacity:0.6;
    }
    
    30%{
    	
         opacity:0.7;
    }
    45%{
    	 opacity:0.8;
        
    }
    60%{
    	opacity:0.9;
       
    }
     75%{
    	  opacity:0.8;
    }
    90%{
    	  opacity:0.7;
    }
     100%{
    	  opacity:0.6;
    }
     
}