.modal{
    width: 100%; 
    height: 100%; 
    float: left; 
    position: fixed; 
    z-index: 10000; 
    background-color: rgba(0,0,0,.7);
    display: block;
}
.modalContainerBox{
    width: 600px;
    height: auto;
    float: left;
    background-color: transparent;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;    
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-top: 35px;    border-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2); } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


@media only screen and (max-height: 419px){
    .modalContainerBox{
        top: 190px;
    }
    
}
@media only screen and (max-width: 1366px){

}
@media only screen and (max-width: 1280px){
    .modalContainerBox{
        width: 500px;
    }
    
}
@media only screen and (max-width: 1259px){

}

@media only screen and (max-width: 1199px){

}

@media only screen and (max-width: 1149px){

}

@media only screen and (max-width: 1099px){

}
@media only screen and (max-width: 1023px){

}
@media only screen and (max-width: 667px){


}
@media only screen and (max-width: 599px){
    .modalContainerBox{
        width: 100%;
        top: 190px;

    }

}

@media only screen and (max-width: 510px){

}

@media only screen and (max-width: 479px){
    .modalContainerBox{
        top: 160px;
    }
}

@media only screen and (max-width: 450px){

}
@media only screen and (max-width: 349px){
    .modalContainerBox{
        top: 115px;
    }
}