﻿.videoframe {
    width: 270px;
    height: 153px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    border: 5px solid #fff;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
    box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}


.video {
    width: 260px;
    height: 143px;
    margin: 0;
}



@media (min-width:350px) and (max-width:575.98px) {
  

    .videoframe {
        width: 310px;
        height: 177px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        border: 5px solid #fff;
        -webkit-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        -moz-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .video {
        width: 300px;
        height: 167px;
        margin: 0;
    }
}


@media (min-width:576px) and (max-width:767.98px) {


    .videoframe {
        width: 522px;
        height: 298px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        border: 5px solid #fff;
        -webkit-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        -moz-box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        box-shadow: 0px 0px 10px 5px rgba(194,194,190,1);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .video {
        width: 513px;
        height: 288px;
        margin: 0;
    }
}

@media (min-width:768px) and (max-width:991.98px) {
 
    .videoframe {
        width: 696px;
        height: 397px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        border: 6px solid #fff;
        -webkit-box-shadow: 0px 0px 12px 6px rgba(194,194,190,1);
        -moz-box-shadow: 0px 0px 12px 6px rgba(194,194,190,1);
        box-shadow: 0px 0px 12px 6px rgba(194,194,190,1);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .video {
        width: 684px;
        height: 384px;
        margin: 0;
    }
}


@media (min-width:992px) and (max-width:1199.98px) { 
    .videoframe {
        width: 899px;
        height: 513px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        border: 8px solid #fff;
        -webkit-box-shadow: 0px 0px 16px 8px rgba(194,194,190,1);
        -moz-box-shadow: 0px 0px 16px 8px rgba(194,194,190,1);
        box-shadow: 0px 0px 16px 8px rgba(194,194,190,1);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .video {
        width: 883px;
        height: 496px;
        margin: 0;
    }
}

@media (min-width:1200px) { 

    .videoframe {
        width: 1088px;
        height: 620px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
        border: 10px solid #fff;
        -webkit-box-shadow: 0px 0px 21px 10px rgba(194,194,190,1);
        -moz-box-shadow: 0px 0px 21px 10px rgba(194,194,190,1);
        box-shadow: 0px 0px 21px 10px rgba(194,194,190,1);
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .video {
        width: 1068px;
        height: 600px;
        margin: 0;
    }
}