@font-face {
    font-family: 'just_another_handregular';
    src: url('https://spanto.com/tests/symphony/fonts/justanotherhand-regular-webfont.woff2') format('woff2'),
         url('https://spanto.com/tests/symphony/fonts/justanotherhand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'just_me_again_down_hereRg';
    src: url('https://spanto.com/tests/symphony/fonts/justmeagaindownhere-regular-webfont.woff2') format('woff2'),
         url('https://spanto.com/tests/symphony/fonts/justmeagaindownhere-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.screen[data-screen='0']{
    background: #fac9b6;
    text-align: center;
    padding: 100px 0px 40px 0px;
}


.screen[data-screen='0'] .titlegif{
    width: 80%;
    max-width: 308px;
}

.screen[data-screen='0'] h1{
    text-align: left;
}


.screen[data-screen='0'] .back{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.screen[data-screen='0'] .back-sun{
    position: absolute;
    right: 2%;
    top: 2%;
    width: 20%;
    height: auto;
    cursor: pointer;
}

.screen[data-screen='0'] .back-sun img{
    display: block;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    filter: drop-shadow(5px 5px 1px #5d514c40);
}

.screen[data-screen='0'] .back-sun div{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    padding: 0px 10px;
}


.screen[data-screen='0'] .postal-in{
    position: relative;
}

.screen[data-screen='0'] .postal-1{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    cursor: pointer;
    margin-bottom: 20px;
    text-align: left;
    padding: 0px 10px 0px 0px;
    font-family: 'just_me_again_down_hereRg',Arial;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
}


.screen[data-screen='0'] .postal-2{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    cursor: pointer;
    margin-bottom: 20px;
    text-align: left;
    padding: 0px 0px 0px 10px;
    font-family: 'just_another_handregular',Arial;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 2px;
}


.screen[data-screen='0'] .postal img{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.screen[data-screen='0'] .postal .postal-text{
    position: absolute;
    left: 4%;
    top: 4%;
    width: 48%;
    height: 90%;
}


.screen[data-screen='0'] .top{
    position: absolute;
    right: 10%;
    top: 10%;
}


.screen[data-screen='1']{
    background: #fac9b6;
    text-align: center;
}

.screen[data-screen='1'] .vmid{
    padding: 30px 0px;
}


.screen[data-screen='1'] .back{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.screen[data-screen='1'] h2{
    margin-bottom: 30px;
}


.screen[data-screen='1'] .close{
    position: absolute;
    right: 15%;
    top: 10%;
    cursor: pointer;
    filter: drop-shadow(0px 0px 5px #22222240);
}

.screen[data-screen='2']{
    background: #ced3d8;
    text-align: center;
    padding: 0px 0px 30px 0px;
}

.screen[data-screen='2'] .vmid{
    padding: 20px 10px;
}


.screen[data-screen='2'] .ctrl-a{
    display: inline-block;
    vertical-align: top;
    width: 120px;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    padding: 0px 0px;
}

.screen[data-screen='2'] .ctrl-a p{
    padding: 4px 0px 30px 0px;
    width: 100px;
}

.screen[data-screen='2'] .pizarra{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 280px;
    min-height: 200px;
    width: 100%;
}

.screen[data-screen='2'] .pizarra img{
    width: 100%;
    height: 100%;
}

.screen[data-screen='2'] .pizarra canvas{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


.screen[data-screen='2'] .ctrl-b{
    display: inline-block;
    vertical-align: bottom;
    width: 120px;
}

.screen[data-screen='2'] .ctrl-b .bt{
    margin-top: 10px;
}


.screen[data-screen='2'] h2{
    margin: 50px 0px 20px 0px;
}
/*
.screen[data-screen='3']{
    background: #f7f5ee;
    text-align: center;
    padding: 100px 20px 0px 20px;
}

.screen[data-screen='3'] h2{
    padding: 70px 0px 30px 0px;
}

.screen[data-screen='3'] .back{
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0px auto 0px auto;
    padding-bottom: 20px;
    max-width: 1024px;
}

.screen[data-screen='3'] .back .background{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.screen[data-screen='3'] .back .close2{
    position: absolute;
    right: 5%;
    top: 5%;
    filter: drop-shadow(0px 0px 5px #22222240);
    cursor: pointer;
}


.screen[data-screen='3'] .back .video{
    position: relative;
    width: 70%;
    margin: 0px auto;
    height: auto;
    background: #d9e6e0;
}

.screen[data-screen='3'] .back .video .play{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -32px;
}


.screen[data-screen='3'] .back .video .vpause{
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: none;
    width: 10%;
    max-width: 87px;
    min-width: 24px;
}

.screen[data-screen='3'] .back .video .vpause img{
    width: 100%;
    display: block;
}

.screen[data-screen='3'] .back .video .video-in{
    opacity: 0;
}

.screen[data-screen='3'] .back .video video{
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
    z-index: 1;
}
*/

.popupvideo{
    position: absolute;
    left: 0px;
    top: 100%;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 100px 20px 0px 20px;
}

.popupvideo h2{
    padding: 70px 0px 30px 0px;
}

.popupvideo .back{
    position: relative;
    width: 80%;
    height: 100%;
    margin: 0px auto 0px auto;
    padding-bottom: 150px;
    max-width: 1024px;
}

.popupvideo .back .background{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.popupvideo .back .close2{
    position: absolute;
    right: 5%;
    top: 5%;
    filter: drop-shadow(0px 0px 5px #22222240);
    cursor: pointer;
}


.popupvideo .back .video{
    position: relative;
    width: 70%;
    margin: 0px auto;
    height: auto;
    background: #d9e6e0;
}

.popupvideo .back .video .play{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -32px;
}


.popupvideo .back .video .vpause{
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    display: none;
    width: 10%;
    max-width: 87px;
    min-width: 24px;
}

.popupvideo .back .video .vpause img{
    width: 100%;
    display: block;
}

.popupvideo .back .video .video-in{
    opacity: 0;
}

.popupvideo .back .video video{
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
    z-index: 1;
}


.postals-foot{ margin: 30px 0px; }


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

    .screen[data-screen='0'] .postal-1{ width: 100%; padding: 0px 0px 0px 0px; font-size: 18px; line-height: 20px;}
    .screen[data-screen='0'] .postal-2{ width: 100%; padding: 0px 0px 0px 0px; font-size: 18px; line-height: 20px; }

    .screen[data-screen='2'] .pizarra{ min-width: 280px; min-height: 200px; width: 100%; }


    .screen[data-screen='0'] .back-sun{ right: 8%; top: 1%; width: 35%; }

    .screen[data-screen='0']{ padding: 90px 0px 40px 0px; }
    .screen[data-screen='0'] .titlegif{ margin-left: 10px; margin-bottom: 10px; width: 50%; max-width: 308px;   }

    .screen[data-screen='0'] .postals-foot{ margin: 10px 0px; text-align: center; }

    .screen[data-screen='1'] .close{ right: 2%; top: 2%; }


    .screen[data-screen='2'] .ctrl-a{ width: 100%; margin: 0px 0px 20px 0px; }
    .screen[data-screen='2'] .ctrl-a .bt{ margin: 0px 15px; }
    .screen[data-screen='2'] .ctrl-a p{ padding: 4px 0px 0px 0px; width: 100px; }

    .screen[data-screen='2'] .ctrl-b{ width: 100%; margin: 20px 0px 0px 0px; }
    .screen[data-screen='2'] .ctrl-b .bt{ margin: 0px 10px; }

    /*.screen[data-screen='3'] .back{ width: 100%; height: 100%;}*/
    .popupvideo .back{ width: 100%; height: 100%;}
}

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

    .screen[data-screen='0'] .postal-1{ width: 80%; font-size: 22px; line-height: 24px;  }
    .screen[data-screen='0'] .postal-2{ width: 80%; font-size: 22px; line-height: 24px;  }

    .screen[data-screen='0'] .back-sun{ right: 8%; top: 2%; width: 35%; }

    .screen[data-screen='0'] .titlegif{ margin-left: 10px; margin-bottom: 15px; width: 60%; max-width: 308px; }


    .screen[data-screen='1'] .close{ right: 4%; top: 4%; }

    /*.screen[data-screen='3'] .back{ width: 95%; height: 100%;}*/
    .popupvideo .back{ width: 95%; height: 100%;}
}

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

    .screen[data-screen='0'] .back-sun{ right: 6%; top: 2%; width: 30%; }

    .screen[data-screen='0'] .postal-1{ font-size: 28px; line-height: 32px; }
    .screen[data-screen='0'] .postal-2{ font-size: 28px; line-height: 32px; }

    .screen[data-screen='1'] .close{ right: 8%; top: 6%; }

    /*.screen[data-screen='3'] .back{ width: 90%; height: 100%;}*/
    .popupvideo .back{ width: 90%; height: 100%;}
}

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

    .screen[data-screen='0'] .back-sun{ right: 4%; top: 2%; width: 25%; }

    .screen[data-screen='0'] .postal-1{ width: 50%; padding: 0px 10px 0px 0px; font-size: 22px; line-height: 24px; }
    .screen[data-screen='0'] .postal-2{ width: 50%; padding: 0px 0px 0px 10px; font-size: 22px; line-height: 24px; }

    .screen[data-screen='0'] .postals-foot{ margin: 20px 0px; text-align: left; }

    .screen[data-screen='0'] .titlegif{ margin-left: 10px; margin-bottom: 20px; width: 80%; max-width: 308px; }


    .screen[data-screen='1'] .close{ right: 10%; top: 8%; }
    /*.screen[data-screen='3'] .back{ width: 85%; height: 100%;}*/
    .popupvideo .back{ width: 85%; height: 100%;}

    .screen[data-screen='2'] .ctrl-a{ width: 120px; }
    .screen[data-screen='2'] .ctrl-a .bt{ margin: 0px 0px; }
    .screen[data-screen='2'] .ctrl-a p{ padding: 4px 0px 30px 0px; width: 100px; }

    .screen[data-screen='2'] .ctrl-b{ width: 120px; }
    .screen[data-screen='2'] .ctrl-b .bt{ margin: 10px 0px 0px 0px; }
}

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


    .screen[data-screen='0'] .back-sun{ right: 2%; top: 2%; width: 20%; }

    .screen[data-screen='0'] .titlegif{ margin-left: 10px; margin-bottom: 25px; width: 80%; max-width: 308px; }


    .screen[data-screen='1'] .close{ right: 12%; top: 10%; }

    /*.screen[data-screen='3'] .back{ width: 80%; height: 100%;}*/
    .popupvideo .back{ width: 80%; height: 100%;}

    .screen[data-screen='0'] .postal-1{ font-size: 24px; line-height: 30px; }
    .screen[data-screen='0'] .postal-2{ font-size: 24px; line-height: 30px; }

}

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

    .screen[data-screen='0'] .back-sun{ right: 2%; top: 2%; width: 17%; }

    .screen[data-screen='0']{ padding: 100px 0px 40px 0px; }

    .screen[data-screen='0'] .postals-foot{ margin: 30px 0px; text-align: left; }

    .screen[data-screen='0'] .titlegif{ margin-left: 10px; margin-bottom: 30px; width: 80%; max-width: 308px; }

    .screen[data-screen='1'] .close{ right: 14%; top: 10%; }
}

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

    .screen[data-screen='0'] .back-sun{ right: 2%; top: 2%; width: 15%; }
    .screen[data-screen='1'] .close{ right: 15%; top: 10%; }

}

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

}

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

}