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


.screen[data-screen='0'] .titleimage{
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 0px auto;
}

.screen[data-screen='0'] .titleimage img{
    width: 100%;
}


.screen[data-screen='0'] .buttons{
    margin: 50px 0px;
}


.screen[data-screen='0'] .bt{
    position: absolute;
    cursor: pointer;
    transform: translate(-50%,-50%);
}

.screen[data-screen='0'] .bt img{
    position: relative;
    display: block;
    transform: scale(1.0);
}

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

}

.screen[data-screen='0'] .bt p{
    position: relative;
    color: #ffffff;
}

.screen[data-screen='0'] .bt-pre{
    left: auto;
    top: auto;
}

.screen[data-screen='0'] .bt-med{
    left: auto;
    top: auto;
}

.screen[data-screen='0'] .bt-xvii{
    left: auto;
    top: auto;

}

.screen[data-screen='0'] .bt-xviii{
    left: auto;
    top: auto;

}

.screen[data-screen='0'] .bt-xix{
    left: auto;
    top: auto;
}

.screen[data-screen='0'] .bt-xix{
    left: auto;
    top: auto;
}

.screen[data-screen='0'] .bt:active{
	margin: 5px 0px 0px 5px;
}
.screen[data-screen='0'] .bt:active img{
	filter: drop-shadow(0px 0px 0px #5d514c40);

}

.bt img{
	position: relative;
	/*filter: drop-shadow(0px 0px 5px #22222240);*/
	filter: drop-shadow(5px 5px 1px #5d514c40);
    cursor: pointer;
}


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


.screen[data-comic] .centerer img{
    background: #f4f1e8;
    width: 100%;
    display: block;
}


.screen[data-comic] .foot{
    padding: 30px 0px 30px 0px;
    font-weight: 100;
    background: #ffffff;
    margin-bottom: 20px;
}


.screen[data-comic] .foot a{
    color: #3120bf;
    font-weight: 600;
    text-decoration: underline;
}

.screen[data-comic] .foot a:hover{
    text-decoration: none;
}

.screen .buttons{
    position: relative;
}

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

    .screen[data-screen='0'] .bt-pre{ left: 17%; top: 20px; }
    .screen[data-screen='0'] .bt-med{ left: 68%; top: 10px; }
    .screen[data-screen='0'] .bt-xvii{ left: 30%; top: 130px;}
    .screen[data-screen='0'] .bt-xx{ left: 78%; top: 190px; }
    .screen[data-screen='0'] .bt-xviii{ left: 75%; top: 90px; }
    .screen[data-screen='0'] .bt-xix{ left: 27%; top: 230px; }
    .screen .buttons{ height: 300px; }

    .screen .bt{ font-size: 12px; }
    .screen[data-screen='0'] .bt img{ transform: scale(0.8); }
}

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

    .screen[data-screen='0'] .bt-pre{ left: 15%; top: 20px; }
    .screen[data-screen='0'] .bt-med{ left: 65%; top: 10px; }
    .screen[data-screen='0'] .bt-xvii{ left: 32%; top: 100px;}
    .screen[data-screen='0'] .bt-xx{ left: 70%; top: 190px; }
    .screen[data-screen='0'] .bt-xviii{ left: 75%; top: 90px; }
    .screen[data-screen='0'] .bt-xix{ left: 25%; top: 200px; }
    .screen .buttons{ height: 240px; }

}

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

    .screen[data-screen='0'] .bt-pre{ left: 8%; top: 60px; }
    .screen[data-screen='0'] .bt-med{ left: 23%; top: 150px; }
    .screen[data-screen='0'] .bt-xvii{ left: 43%; top: 60px;}
    .screen[data-screen='0'] .bt-xx{ left: 58%; top: 130px; }
    .screen[data-screen='0'] .bt-xviii{ left: 73%; top: 40px; }
    .screen[data-screen='0'] .bt-xix{ left: 85%; top: 130px; }

    .screen .buttons{ height: 200px; }
}

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

    .screen[data-screen='0'] .bt-pre{ left: 8%; top: 60px; }
    .screen[data-screen='0'] .bt-med{ left: 22%; top: 150px; }
    .screen[data-screen='0'] .bt-xvii{ left: 43%; top: 60px;}
    .screen[data-screen='0'] .bt-xx{ left: 58%; top: 130px; }
    .screen[data-screen='0'] .bt-xviii{ left: 73%; top: 40px; }
    .screen[data-screen='0'] .bt-xix{ left: 85%; top: 130px; }

    .screen .bt{ font-size: 14px; }
    .screen[data-screen='0'] .bt img{ transform: scale(0.9); }
}

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


    .screen[data-screen='0'] .bt-pre{ left: 8%; top: 60px; }
    .screen[data-screen='0'] .bt-med{ left: 24%; top: 150px; }
    .screen[data-screen='0'] .bt-xvii{ left: 42%; top: 60px;}
    .screen[data-screen='0'] .bt-xx{ left: 58%; top: 130px; }
    .screen[data-screen='0'] .bt-xviii{ left: 74%; top: 40px; }
    .screen[data-screen='0'] .bt-xix{ left: 85%; top: 135px; }

    .screen .buttons{ height: 180px; }

    .screen .bt{ font-size: 16px; }
    .screen[data-screen='0'] .bt img{ transform: scale(1.0); }

}

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

}

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

}

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

}

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

}