@charset "UTF-8";



/*

    Name: YouTubePopUp

    Description: jQuery plugin to display YouTube or Vimeo video in PopUp, responsive and retina, easy to use.

    Version: 1.0.1

    Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/

    Written By: Qassim Hassan

    Twitter: @QQQHZ

    Websites: wp-time.com | qass.im | wp-plugins.in

    Dual licensed under the MIT and GPL licenses:

        http://www.opensource.org/licenses/mit-license.php

        http://www.gnu.org/licenses/gpl.html

    Copyright (c) 2016 - Qassim Hassan

*/



.YouTubePopUp-Wrap{

    position:fixed;

    width:100%;

    height:100%;

    background-color:#000;

    background-color:rgba(0,0,0,0.8);

    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:absolute;

    top:0;

    cursor:pointer;

    bottom:528px;

    right:0px;

    margin:auto 0;

    width:24px;

    height:24px;

    background:url(../images/close.png) no-repeat;

    background-size:24px 24px;

    -webkit-background-size:24px 24px;

    -moz-background-size:24px 24px;

    -o-background-size:24px 24px;

}



.YouTubePopUp-Close:hover{

    opacity:0.5;

}



@media all and (max-width: 768px) and (min-width: 10px){

    .YouTubePopUp-Content{

        max-width:90%;

    }

}



@media all and (max-width: 600px) and (min-width: 10px){

    .YouTubePopUp-Content iframe{

        height:320px !important;

    }



    .YouTubePopUp-Close{

        bottom:362px;

    }

}



@media all and (max-width: 480px) and (min-width: 10px){

    .YouTubePopUp-Content iframe{

        height:220px !important;

    }



    .YouTubePopUp-Close{

        bottom:262px;

    }

}

