/* GLOBAL */

.preview-container {
    width: 75%;
    height: 75%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
}

.embed-container {
    position: relative;
    padding-bottom: 57.5%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* TEMPLATE DEFAULT */

.template_none .preview-container  {
    width: 100%;
    height: 100%;
    top: 0;
}

.template_none .embed-container {
    padding-bottom: 52.7% !important;
}

/* FREE TEMPLATES */

.template_reg-blackboard {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/free/blackboard.png) no-repeat top center / 87%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_reg-blackboard .preview-container {
    width: 80.5%;
    height: 82%;
    display: inline-block;
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_reg-ipad {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/free/ipad.png) no-repeat top center / 95%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_reg-ipad .preview-container {
    width: 78%;
    height: 69%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 12%;
    left: 1%;
    right: 0;
    margin: auto;
}

.template_reg-whiteboard {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/free/whiteboard.png) no-repeat top center / 91%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_reg-whiteboard .preview-container {
    width: 85%;
    height: 77.5%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 4.5%;
    left: 0%;
    right: 0;
    margin: auto;
}

/* VSP TEMPLATES */

.template_vsp-macbook {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/01.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-android {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/02.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-android .preview-container {
    width: 85%;
    height: 80%;
    display: inline-block;
    position: absolute;
    top: 1%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-ipad {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/03.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-ipad .preview-container {
    width: 85%;
    height: 85%;
    display: inline-block;
    position: absolute;
    top: 3%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-imac {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/04.png) no-repeat top center / 74%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-imac .preview-container {
    width: 69%;
    height: 64%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-imac_2 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/05.png) no-repeat top center / 60%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-imac_2 .preview-container {
    width: 56%;
    height: 54%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-monitor_1 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/06.png) no-repeat top center / 86%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-monitor_1 .preview-container {
    width: 83%;
    height: 78%;
    display: inline-block;
    position: absolute;
    top: 2%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_1 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/07.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_1 .preview-container {
    width: 92%;
    height: 83.5%;
    display: inline-block;
    position: absolute;
    top: 17px;
    bottom: auto;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_2 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/08.png) no-repeat top center / 90%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_2 .preview-container {
    width: 81%;
    height: 74.5%;
    display: inline-block;
    position: absolute;
    top: 6%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_3 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/09.png) no-repeat top center / 91%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_3 .preview-container {
    width: 86.5%;
    height: 80%;
    display: inline-block;
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_4 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/10.png) no-repeat top center / 91%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_4 .preview-container {
    width: 81%;
    height: 75%;
    display: inline-block;
    position: absolute;
    top: 8%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_5 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/11.png) no-repeat top center / 97%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_5 .preview-container {
    width: 80%;
    height: 75%;
    display: inline-block;
    position: absolute;
    top: 9%;
    left: 0;
    right: 10px;
    margin: auto;
}

.template_vsp-graphic_6 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/12.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_6 .preview-container {
    width: 89.5%;
    height: 82.5%;
    display: inline-block;
    position: absolute;
    top: 5.5%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_7 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/13.png) no-repeat top center / 92%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_7 .preview-container {
    width: 90%;
    height: 83%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 8%;
    left: 0;
    right: 0;
    margin: auto;
}

.template_vsp-graphic_8 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/14.png) no-repeat top center / 80%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_8 .preview-container {
    width: 72%;
    height: 66%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 15%;
    left: 11px;
    right: 5%;
    margin: auto;
}

.template_vsp-graphic_9 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/15.png) no-repeat top center / 100%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_9 .preview-container {
    width: 85%;
    height: 78%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 1%;
    left: 0;
    right: 0%;
    margin: auto;
}

.template_vsp-graphic_10 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/16.png) no-repeat top center / 94%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_10 .preview-container {
    width: 79%;
    height: 73.5%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 7.3%;
    left: 0;
    right: 0%;
    margin: auto;
}

.template_vsp-graphic_11 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/17.png) no-repeat top center / 89%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_11 .preview-container {
    width: 82.7%;
    height: 75.8%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 6%;
    left: 0;
    right: 0%;
    margin: auto;
}

.template_vsp-graphic_12 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/18.png) no-repeat top center / 92%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_12 .preview-container {
    width: 85%;
    height: 76.2%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 5%;
    left: 0;
    right: 0%;
    margin: auto;
}

.template_vsp-graphic_13 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/19.png) no-repeat top center / 97%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_13 .preview-container {
    width: 91.4%;
    height: 83.7%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 4.2%;
    left: 0.2%;
    right: 0%;
    margin: auto;
}

.template_vsp-graphic_14 {
    background: url(https://s3.amazonaws.com/press-play-v2/skins/vsp/20.png) no-repeat top center / 98%;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
}

.template_vsp-graphic_14 .preview-container {
    width: 88.6%;
    height: 81.65%;
    display: inline-block;
    position: absolute;
    top: auto;
    top: 4.4%;
    left: 0;
    right: 0%;
    margin: auto;
}

@media screen and (max-width: 900px) {
    
    .template_vsp-graphic_12 .preview-container {
        height: 78%;
        top: 5.2%;
    }
}

@media screen and (min-width: 900px) {

    .template_vsp-imac .preview-container {
        height: 68%;
    }

    .template_vsp-graphic_12 .preview-container {
        height: 68%;
    }

}

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

    .template_vsp-graphic_12 .preview-container {
        height: 76% !important;
    }

}