@media (max-width:768px) {

    .modalYT {
        padding: 30px 0;
        position: fixed;
        z-index: 1100;
        display: flex;
        width: 100%;
        height: 90vh;

        background: #000;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;

        -webkit-animation: slideInFromNone 0.3s ease-out;
           -moz-animation: slideInFromNone 0.3s ease-out;
             -o-animation: slideInFromNone 0.3s ease-out;
                animation: slideInFromNone 0.3s ease-out;
    }
    
    .modalYT iframe {
        width: 100vh;
        margin: auto;
        height: 50%;
    }

}

@media(min-width:769px) {

    .modalYT {
        padding: 30px;
        left: 50%;
        top: 50%;
        margin-left: -300px;
        margin-top: -200px;
        display: flex;
        position: fixed;
        z-index: 1100;
        background: #000;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;

        -webkit-animation: slideInFromNone 0.3s ease-out;
           -moz-animation: slideInFromNone 0.3s ease-out;
             -o-animation: slideInFromNone 0.3s ease-out;
                animation: slideInFromNone 0.3s ease-out;
    }

    .modalYT iframe {
        width: 600px;
        margin: auto;
        height: 300px;
    }

    /*
    .modalYT.size-m {
        width: 600px;
        height: 400px;
    }

    .modalYT.size-l {
        width: 700px;
        height: 500px;
    }

    .modalYT.size-s {
        width: 500px;
        height: 300px;
    }
    */
}

.modalYT-bg {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #000;
    top: 0;
    left: 0;
    z-index: 1090;

    -webkit-animation: fadeInFromNone 0.3s ease-out;
       -moz-animation: fadeInFromNone 0.3s ease-out;
         -o-animation: fadeInFromNone 0.3s ease-out;
            animation: fadeInFromNone 0.3s ease-out;
}

.modalYT-close {
    color: #b1b0ac;
    font-size: 30px;
    line-height: .5;
    position: absolute;
    top: 10px;
    right: 10px;
    font-weight: bold;
    cursor: pointer;
}

.modalYT-close:hover {
    color: #e72626;
}


@-webkit-keyframes slideInFromNone {
    0% {
    	opacity: 0;
        -webkit-transform: translate(0, -25%);
            -ms-transform: translate(0, -25%);
             -o-transform: translate(0, -25%);
                transform: translate(0, -25%);
    }
    100% {
    	opacity: 1;
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

@-moz-keyframes slideInFromNone {
    0% {
    	opacity: 0;
        -webkit-transform: translate(0, -25%);
            -ms-transform: translate(0, -25%);
             -o-transform: translate(0, -25%);
                transform: translate(0, -25%);
    }
    100% {
    	opacity: 1;
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

@-o-keyframes slideInFromNone {
    0% {
    	opacity: 0;
        -webkit-transform: translate(0, -25%);
            -ms-transform: translate(0, -25%);
             -o-transform: translate(0, -25%);
                transform: translate(0, -25%);
    }
    100% {
    	opacity: 1;
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

@keyframes slideInFromNone {
    0% {
    	opacity: 0;
        -webkit-transform: translate(0, -25%);
            -ms-transform: translate(0, -25%);
             -o-transform: translate(0, -25%);
                transform: translate(0, -25%);
    }
    100% {
    	opacity: 1;
        -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
             -o-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}



@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.7;
    }
}