@media screen and (min-width: 800px) {
body{
    height: 100vh;
    background: linear-gradient(#18d0dc, #0b959d);
    background-position: bottom;
}

button:hover, #fazedor a:hover{
    transform:scale(1.03);
}

main {
    width: 1000px;
    height: 740px;
    left: 50%;
    margin: 0 0 0 -500px;
}
topo {
    height: 100px;
}
.etapas logo, logo {
    margin: 35px 0 0 -139px;
    width: 268px;
    height: 47px;
    position: absolute;
}
.etapas cartaz {
    display: block;
    margin: 8px 0 0 -500px;
}

cartaz {
    background: url(img/cartaz.png) center no-repeat;
    background-size: cover;
    margin: 8px 0 0 -520px;
    width: 278px;
    height: 136px;
    left: 50%;
    display: none;
    transform: rotate(0deg);
}
texto {
    width: 500px;
    margin: 100px 0 0 -250px;
    font-size: 26px;
    text-align: center;
}


#home{
    background: url(img/home.png) center no-repeat;
    /*background: none;*/
}
#home button{
    /*background: linear-gradient(#72dd5e, #17a50d);*/
    display: block;
    background: url(img/bg_bt.png);
    background-size: contain;
    width: 338px;
    height: 93px;
    border: none;
    border-radius: 0px;
    font-family: 'bebas_neueregular';
    font-size: 25px;
    color: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
    margin: -170px 0 0 -169px;
    cursor: pointer;
}
#home .vitrine{display: block;}
#home li{cursor: default;}
#home .poster1{ transform: scale(.55) translate(840px,-50px) rotate(-10deg); }
#home .poster2{ transform: scale(.55) translate(450px,-175px) rotate(-1deg); }
#home .poster3{ transform: scale(.55) translate(100px,-80px) rotate(10deg); }

#escolheposter{
    overflow:hidden; 
}
.vitrine {
    position: absolute;
    width: 980px;
    padding: 0;
    left: 50%;
    margin-top: 160px;
    margin-left: -490px;
 }
.vitrine li {
    width: 320px;
    height: 470px;
    margin-right: 10px;
}



#escolheposter .poster1:hover{
    box-shadow: 3px 6px 10px rgba(0,0,0,0.5);
    transform:scale(1.03) rotate(-2deg) translate(20px,-10px);
    z-index: 99;
}
#escolheposter .poster2:hover{
    box-shadow: 0px 6px 10px rgba(0,0,0,0.5);
    transform:scale(1.03) rotate(1deg) translate(0px,-10px);
    z-index: 99;
}
#escolheposter .poster3:hover{
    box-shadow: -3px 6px 10px rgba(0,0,0,0.5);
    transform:scale(1.03) rotate(2deg) translate(-20px,-10px);
    z-index: 99;
}

#photos{
    position: absolute;
    background: rgba(255,255,255,.7);
    width: 960px;
    height: 550px;
    top: 150px;
    display: none;
    padding: 20px;
    overflow-y: auto;
}
#photos img{
    margin: 4px;
}

#pegaMesma{ padding: 10px 0 0 0;}
#pegaFoto { padding: 10px 0 0 0;}


fasesStatus {
    background-size: cover;
    width: 115px;
    height: 100px;
    left: 50%;
    margin: -220px 0 0 -80px;
    display: none !important;
}

.fazedor fasesStatus {
    margin: -220px 0 0 110px;
}
.escolhefoto fasesStatus { background-position: -115px 0px }
.fazedor fasesStatus { background-position: -115px 0px }
.etapa4 fasesStatus { background-position: -230px 0px }

#fotofazedor {
    /*z-index: 0;*/
    width: 400px;
    height: 588px;
    margin-left: -200px;
    top: 155px;
}

.quadro {
    width: 414px;
    height: 414px;
}
#fotoeditor {
    left: 50%;
    margin-top: -80px;
    margin-left: -175px;
}
#fotoexport {
    margin-top: -90px;
}


/*.podesair #shareFacebook{ margin-left: -50px !important; }*/
/*.podesair #download{ margin-left: -100px !important; }*/
/*.podesair #sair{ margin-left: 65px !important; padding-top: 3px;}*/
.podesair #sair{ padding-top: 3px;}







    @media screen and (max-height: 720px) {
        topo{transform: scale(.85);}
        main{transform: scale(.85);
                top: -40px;
        }

    }
    @media screen and (max-height: 620px) {
        topo{transform: scale(.8);}
        main{transform: scale(.8);
                top: -60px;
        }

    }
    @media screen and (max-height: 580px) {
        topo{transform: scale(.75);}
        main{transform: scale(.75);
                top: -80px;
        }

    }














}