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

 ::-moz-scrollbar-track {
    background:rgba(255,255,255,1);
}
.ctcOverlayThumbGalleryContainerV::-webkit-scrollbar {
display: none;
}
.ctcOverlayThumbGalleryContainerV::-moz-scrollbar {
display: none;
}
html{

	-ms-overflow-style: -ms-autohiding-scrollbar;
}
/* Handle */
/*
.ctcOverlayImageContainer ::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,1);
}
*/

.ctcOverlayV {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */

    width: 0;
    height:0;
    position: fixed; /* Stay in place */
    z-index: 100050; /* Sit on top */
    left: 50%;
    top: 50%;
    right: 50%;
    bottom: 50%;
    background-color: rgba(0,0,0,1); /* 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;

}





/* The navigation links inside the overlay */

.ctcOverlayClosebtnV{
float:right;

z-index: 25000!important; /* Sit on top */
font-size:35px;
top:0px;


}


/* Position the close button (top right corner) */

.ctcOverlayV .ctcOverlayClosebtnV::before {
	content:"\00d7";
    text-decoration: none;
    color:rgba(255,255,255,0.8);

}


/* When you mouse over the navigation links, change their color */

 .ctcOverlayClosebtnV:hover{

     cursor:pointer;
      color:rgba(255,255,255,1);
 	
 }



.ctcOverlayV .ctcGalleryLeftNavV::before{
	content:"\2039";
	color:rgba(255,255,255,1) !important;
   text-align: center;

}

.ctcOverlayV .ctcGalleryRightNavV::before{
	content:"\203A";
	color:rgba(255,255,255,1) !important;
	text-align: center;

}



  .ctcGalleryLeftNavV{
			 float:left;
			-webkit-transition: width 1s; /* Safari */
            transition: width 1s;
            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;
  		    opacity:0;

  }


  .ctcGalleryRightNavV{
		   float:right;
		  -webkit-transition: width 1s; /* Safari */
            transition: width 1s;
            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;
            opacity:0;




  }


 .ctcOverlayImageContainerV:hover .ctcGalleryLeftNavV,
 .ctcOverlayImageContainerV:hover .ctcGalleryRightNavV{
    -webkit-transition: width 0.5s; /* Safari */
     transition: width 0.5;
     transition: 0.5s ease;
     -webkit-transition: 0.25s ease;
     -moz-transition: 0.25s ease;
      display:inline-block;
      cursor:pointer;
      color:rgba(255,255,255,1);
      text-shadow: 2px 2px 4px rgba(0,0,0,1);
       opacity:1;
 }


.ctcOverlayImageContainerV:hover div.ctcOverlayCountAndCurrentImageV,
.ctcOverlayImageContainerV:hover div.takePicActionContainerV{
	-webkit-transition: width 0.5s; /* Safari */
     transition: width 0.5;
     transition: 0.25s ease;
     -webkit-transition: 0.25s ease;
     -moz-transition: 0.25s ease;
	 visibility:visible;
	 opacity:1;


}

 .ctcOverlayImageContainerV{
    position:absolute;
    text-align: center; /* Centered text/links */
     background-position: center;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     display:inline-block !important;
	 float:left !important;

 }



.overlayContentloadingV{

	-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
    transition: 0.2s ease;
   -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
	-webkit-animation:   animateWaitLoading  1s infinite ease-in-out;
     animation:   animateWaitLoading  1s infinite ease-in-out;

}

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

div.ctcOverlayCountAndCurrentImageV{
  visibility:hidden;
  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:35%;
    
   z-index:26500;
    display:inline-block !important;
     left:0px;
    bottom:0px;
    position:absolute;
 }


  .takePicActionContainerV{

 
   padding-left:5px;
   padding-right:5px;
   padding-bottom:2px;
   border-radius:10%;
    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;
    
  }

#takePicUploadButton:hover,
#takePicProfilePicButton:hover,
#takePicDeleteButton:hover{
	
	  -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
     transform: scale(1.2);
     -webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;


}  
#takePicUploadButton{
	text-decoration:none !important;
	-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
}

 #takePicUploadButton::before{
 content: "\f317";
 	 font-family:dashicons;
	font-size:22px;
	color:rgba(255,255,255,0.9);
 
 }
  
 #takePicProfilePicButton{
	text-decoration:none !important;
	padding-right:5px;
	float:left;
	-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
}
#takePicProfilePicButton::before{
	 font-family:dashicons;
	font-size:22px;
	content: "\f128";
	color:rgba(255,255,255,0.9);
	
}


#takePicDeleteButton{
	text-decoration:none !important;
	padding-left:5px;
	float:right;
	-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  padding-top:5px;
}

#takePicDeleteButton::before{
	 font-family:dashicons;
	font-size:22px;
	content: "\f182";
	color:rgba(255,255,255,0.9);
	text-decoration:none !important;
}

.takePicIconNotLogged{
	
	margin-left:45% !important;
}


/*style for overlay image gallery on left*/
.ctcOverlayThumbGalleryContainerV{
	width:4.5% !important;
	height:99.99% !important;
	margin-top:0.1%;
	display:inline-block !important;
	float:left;
	overflow-y:auto!important;
	backgound-color:rgba(0,0,0,1)!important;
-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.2s ease;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
	padding-top:auto;
	padding-bottom:auto;
	 

}





.ctcOverlayThumbGalleryContainerV span{
	border: 1.5px solid rgba(255,255,255,1);

	display: none;
    margin-left: auto;
    margin-right: auto;
    width:90%;
    display:block;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size:contain !important;
    cursor:pointer !important;
    background-color:rgba(0,0,0,0.3)!important;
    -webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
    transition: 0.2s ease;
   -webkit-transition: 0.2s ease;
   -moz-transition: 0.2s ease;
   margin-bottom:4px;
   display:none;


}

.ctcOverlayThumbGalleryContainerV span:hover{
	background-color:rgba(255,255,255,0.8) !important;
      -webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;

}

.ctcOverlayThumbGalleryContainerV  .ctcOverlayThumbGalleryActiveV{
	background-color:rgba(255,255,255,1) !important;
	border-radius:5% 5%;
	
-webkit-transition: width 0.5s; /* Safari */
    transition: width 0.5s;
   transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}







/**
*
*This section
*
*/




/*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);

     }


}