@charset "UTF-8";

.videosThumb{ font-size:0px;}
.videosThumb .boxes{ display:inline-block; width:100%; margin:0%; position:relative; border-radius:0px; box-shadow:1px 1px 6px rgba(0,0,0,0.3); overflow:hidden;}
.videosThumb .boxes img{ width:100%; height:auto; }
.videosThumb .boxes div{ position:absolute; top:0; width:100%; height:100%; background-color: rgba(0,0,0,0.0); display:flex; align-items:center;}
.videosThumb .boxes div i{ margin-left:auto; margin-right:auto; height:70px; width:70px; line-height:70px; font-size:30px; text-align:center; background-color: rgba(0,0,0,0.6); color:#fff; border-radius:100%; }

.videosThumb .boxes:hover img{ transform: scale(1.1);}
.videosThumb .boxes div:hover{ background-color: rgba(0,0,0,0.7);}
.videosThumb .boxes div:hover i{ transform:scale(1.3); background-color: #fff; color: #000;}

.howw{ display: block; margin-top: -49px;  line-height: 40px; z-index: 2; position: relative; background-color:rgba(0,0,0,0.8); text-align:center; font-size: 20px; color: #fff; font-weight: bold; letter-spacing: 2px;}

#videos .videosThumb .boxes div i:after{ display: none;}
#videos .videosThumb .boxes div i{ line-height: 50px; height: 50px; width: 50px; }

section.Videos .howw{ font-size: 14px !important; letter-spacing: 1px; text-transform: capitalize; }
section.Videos .videosThumb .boxes{  overflow: hidden !important; border: 1px solid #433f55; margin-top: 15px; margin-bottom: 15px;}

section.Videos .videosThumb .boxes div i{ margin-left:auto;  height:50px; width:50px; line-height:52px; font-size:20px;  }
section.Videos .videosThumb .boxes div:hover i{ transform:scale(1.2); background-color: #fff; color: #000;}

.YouTubePopUp-Wrap{
    position:fixed;
    width:100%;
    height:100%;
   
    background-color:rgba(0,0,0,0.7);
    top:0;
    left:0;
    z-index:9999999999999;
}

.YouTubePopUp-animation{
    opacity: 0;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: YouTubePopUp;
    animation-name: YouTubePopUp;
}

@-webkit-keyframes YouTubePopUp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes YouTubePopUp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

body.logged-in .YouTubePopUp-Wrap{ /* For WordPress */
    top:32px;
    z-index:99998;
}

.YouTubePopUp-Content{
    max-width:680px;
    display:block;
    margin:0 auto;
    height:100%;
    position:relative;
}

.YouTubePopUp-Content iframe{
    max-width:100% !important;
    width:100% !important;
    display:block !important;
    height:480px !important;
    border:none !important;
    position:absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.YouTubePopUp-Hide{
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: YouTubePopUpHide;
    animation-name: YouTubePopUpHide;
}

@-webkit-keyframes YouTubePopUpHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes YouTubePopUpHide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.YouTubePopUp-Close{
    position:fixed;
    top:30px;
    cursor:pointer;
	z-index:100000000000000000000000;
    right:30px;
    margin:auto 0;
    width:50px;
    height:50px;
    background:url(../img/close.png) no-repeat;
    background-size:50px 50px;
    -webkit-background-size:50px 50px;
    -moz-background-size:50px 50px;
    -o-background-size:50px 50px;
}

.YouTubePopUp-Close:hover{
    opacity:0.5;
}
@media all and (max-width: 992px) and (min-width: 10px){
    .videosThumb .boxes{ display:inline-block; position:relative;}
section.Videos .howw{ font-size: 12px !important; }
}

@media all and (max-width: 768px) and (min-width: 10px){
    section.Videos .howw{ font-size: 12px !important; letter-spacing: 1px;}
    .YouTubePopUp-Content{
        max-width:90%;
    }
    
    
    .videosThumb .boxes{ }
}

@media all and (max-width: 600px) and (min-width: 10px){
    .YouTubePopUp-Content iframe{
        height:320px !important;
    }

    .YouTubePopUp-Close{
    
    }
}

@media all and (max-width: 480px) and (min-width: 10px){
    .YouTubePopUp-Content iframe{
        height:220px !important;
    }
    
     .videosThumb .boxes{  }

    .YouTubePopUp-Close{
      
    }
}