@font-face{
    font-family: Unimed;
    src: url("../_fonts/UnimedSans-Black.otf") format("OpenType");
}
*{
    margin: 0px;
    padding: 0px;
}
body{
    overflow: hidden;
    background-color: #fff;
}
/*************************** LAYOUT ****************************/
.container{
    width: 1024px;
    height: 768px;
}
.layer, .btn-seta-cabelo{
    display: none;
}
.show{
    display: block!important;
}
.show-off{
    opacity: 1!important;
}
.row{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    flex-direction: row;
}
.row-column{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.row-column img{
    height: 50%!important;
}
.flex-column{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}
.col-1{
    flex-grow: 1;
    width: 18%;
    position: relative;
}
.col-2{
    flex-grow: 2;
    width: 32%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
/*************************** FIM LAYOUT ***************************/
.off-layout{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    margin-left: -70%;
}
.off{
    color: rgba(0,0,0,.4);
    font-size: 36px;
    font-family: Unimed;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
#avatar_print img{
    position: absolute;
    width: 100%;
    top: 166px;
}
.popup{
    position: absolute;
    z-index: 9999;
    background-color: rgba(0,0,0,.4);
    display: block;
}
.filter{
    filter: brightness(0.6);
}
.titulo_page{
    font-size: 31px;
    position: absolute;
    left: 42px;
    right: 0;
    margin: 0 auto;
    text-align: center;
    z-index: 99;
    font-family: Unimed;
    top: 22px;
    color: #008c50;
    font-weight: 700;
}
.instrucao{
    background: white;
    width: 300px;
    border-radius: 10px;
    padding: 15px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px auto;
    bottom: 450px;
    font-family: Unimed, Helvetica, sans-serif;
    font-size: 20px;
}
.btn-submit{
    background: cornflowerblue;
    border-radius: 10px;
    padding: 10px;
    margin: 5px auto;
    color: white;
}
.banner{
    height: 100%;
    margin-left: -10px;
}
.opt{
    width: 35%;
    position: relative;
    z-index: 999;
}
.avatar_img{
    width: 100%;
    position: absolute;
    top: 205px;
}
.braco_img{
    z-index: 88;
}
.cabelo_avatar{
    z-index: 2;
}
.olhos_avatar{
    z-index: 2;
}
.barba_avatar{
    z-index: 3;
}
.roupa_avatar{
    z-index: 3;
}
.acessorio_avatar{
    z-index: 4;
}
.setas_img{
    width: 26%;
    position: absolute;
    top: 43%;
    left: 402px;
}
.pantone{
    height: 84%;
    margin-top: 15%;
}
.button-base{
    width: 90%;
    height: 50px;
    display: flex;
    margin-top: 30px;
    border-radius: 40px;
    align-items: center;
    background-color: #b8ce16;
    justify-content: space-evenly;
    opacity: 0;
}
.button{
    width: 29%;
    height: 47px;
    display: flex;
    margin-top: 30px;
    border-radius: 40px;
    align-items: center;
    background-color: #b8ce16;
    justify-content: space-evenly;
    bottom: 50px;
    left: 381px;
    position: absolute;
    z-index: 99;
}
.img-button{
    width: 15%;
}
.txt-button{
    font-family: Unimed, Helvetica, sans-serif;
    font-size: 20px;
    color: #00995d;
    font-weight: bold;
    text-transform: uppercase;
}
.logo{
    position: absolute;
    right: 0px;
}
.logo img{
    width: 30%;
    float: right;
    margin: 20px 80px;
}
.seta-esquerda{
    width: 50px;
    height: 100px;
    position: absolute;
    left: 0px;
    z-index: 99;
    top: 294px;
}
.seta-direita{
    width: 50px;
    height: 100px;
    position: absolute;
    right: 0px;
    z-index: 99;
    top: 294px;
}
.seta-moldura{
    bottom: 18px!important;
    top: unset!important;
    filter: hue-rotate(45deg);
    z-index: 29;
    left: 368px;
}
.seta-esquerda-moldura{
    width: 50px;
    height: 100px;
    position: absolute;
    left: 0px;
    z-index: 99;
}
.seta-direita-moldura{
    width: 50px;
    height: 100px;
    position: absolute;
    right: 0px;
    z-index: 99;
}
.fileiraCor-1{
    top: 113px;
}
.fileiraCor-2{
    top: 193px;
}
.fileiraCor-3{
    top: 274px;
}
.fileiraCor-4{
    top: 356px;
}
.fileiraCor-5{
    top: 433px;
}
.fileiraCor-6{
    top: 517px;
}
.fileiraCor-7{
    top: 597px;
}
.fileiraCor-8{
    top: 680px;
}
.cor-1{
    left: 32px;
}
.cor-2{
    left: 78px;
}
.cor-3{
    left: 123px;
}
.cor-4{
    left: 168px;
}
.cor-5{
    left: 211px;
}
.cor-6{
    left: 258px;
}
.cor-1a{
    left: 33px;
}
.cor-1b{
    left: 95px;
}
.cor-1c{
    left: 159px;
}
.cor-1d{
    left: 230px;
}
.cor-2a{
    left: 97px;
    height: 60px!important;
}
.cor-2b{
    left: 190px;
    height: 60px!important;
}
.btn-cor-avatar{
    width: 40px;
    height: 40px;
    z-index: 99;
    position: absolute;
}
.moldura{
    position: relative!important;
    width: 100%;
    z-index: 10;
    top: 30px!important;
}

@media only screen and (min-width: 1280px){
    #avatar_print img{
        position: absolute;
        width: 85%;
        top: 122px;
    }
    .container{
        width: 1280px;
        height: 720px;
    }
    .seta-moldura{
        bottom: 40px!important;
        top: unset!important;
        filter: hue-rotate(45deg);
        left: 484px;
        width: 28%;
    }
    .instrucao{
        bottom: 400px;
    }
    .flex-column{
        width: 21%;
    }
    .opt{
        width: 30%;
    }
    .img-button{
        width: 14%;
    }
    .logo img{
        width: 30%;
        margin: 20px 130px;
    }
    .setas_img{
        width: 36%;
        position: absolute;
        top: 40%;
        left: 33%;
    }
    .seta-esquerda{
        width: 60px;
        height: 100px;
        position: absolute;
        left: -38px;
        z-index: 99;
        top: 261px;
    }
    .seta-direita{
        width: 60px;
        height: 100px;
        position: absolute;
        right: -48px;
        z-index: 99;
        top: 261px;
    }
    .seta-esquerda-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        left: -32px;
        z-index: 99;
    }
    .seta-direita-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        right: -18px;
        z-index: 99;
    }
    .cor-1{
        left: 88px; 
    }
    .cor-2{
        left: 136px; 
    }
    .cor-3{
        left: 175px; 
    }
    .cor-4{
        left: 215px; 
    }
    .cor-5{
        left: 255px;  
    }
    .cor-6{
        left: 300px; 
    }
    .cor-1a{
        left: 95px;
    }
    .cor-1b{
        left: 143px;
    }
    .cor-1c{
        left: 201px;
    }
    .cor-1d{
        left: 266px;
    }
    .cor-2a{
        left: 145px;
        height: 60px!important;
    }
    .cor-2b{
        left: 231px;
        height: 60px!important;
    }
    .fileiraCor-1{
        top: 113px;
    }
    .fileiraCor-2{
        top: 189px;
    }
    .fileiraCor-3{
        top: 263px;
    }
    .fileiraCor-4{
        top: 340px;
    }
    .fileiraCor-5{
        top: 413px;
    }
    .fileiraCor-6{
        top: 493px;
    }
    .fileiraCor-7{
        top: 569px;
    }
    .fileiraCor-8{
        top: 640px;
    }
    .btn-cor-avatar{
        width: 40px;
        height: 40px;
        position: absolute;
    }
    .button{
        left: 502px;
        width: 24%;
    }
    .moldura{
        top: 13px!important;
    }
    .banner_ajuste_lateral{
        width: 13%;
    }
}

@media only screen and (min-width: 1400px){
    
    #avatar_print img{
        top: 117px;
        width: 90%;
    }
    .setas_img{
        width: 38%;
        position: absolute;
        top: 40%;
        left: 32%;
    }
    /* .braco_img{
        height: 49%;
        margin-left: -9px;
        margin-top: -19px;
        position: absolute;
        z-index: 88;
    } */
    .container{
        width: 1401px;
        height: 788px;
    }
    .instrucao{
        bottom: 450px;
    }
    .flex-column{
        padding-top: 2%;
    }
    .opt{
        width: 25%;
    }
    /* .avatar_img{
        height: 48%;
        margin-left: -7px;
        margin-top: 81px;
    } */
    .img-button{
        width: 12%;
    }
    .logo img{
        width: 30%;
        margin: 20px 130px;
    }
    /* .cabelo_avatar{
        position: absolute;
        width: 101%;
        top: 131px;
        margin: 0 auto;
        left: -7px;
        right: 0;
    }
    .olhos_avatar{
        width: 35%;
        top: 193px;
    }
    .barba_avatar{
        width: 50%;
        top: 218px;
        left: 110px;
    }
    .roupa_avatar{
        width: 73%;
        top: 389px;
        left: 58px;
    } */
    .seta-moldura{
        bottom: 59px!important;
        top: unset;
        filter: hue-rotate(
        45deg
        );
        left: 449px;
        width: 39%;
    }
    /* .acessorio_avatar{
        top: 77px;
        left: 48px;
    } */
    .seta-esquerda{
        width: 60px;
        height: 100px;
        position: absolute;
        left: -56px;
        z-index: 99;
        top: 296px;
    }
    .seta-direita{
        width: 60px;
        height: 100px;
        position: absolute;
        right: -46px;
        z-index: 99;
        top: 296px;
    }
    .seta-esquerda-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        left: 16px;
        z-index: 99;
    }
    .seta-direita-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        right: 18px;
        z-index: 99;
    }
    .fileiraCor-1{
        top: 125px;
    }
    .fileiraCor-2{
        top: 205px;
    }
    .fileiraCor-3{
        top: 285px;
    }
    .fileiraCor-4{
        top: 375px;
    }
    .fileiraCor-5{
        top: 455px;
    }
    .fileiraCor-6{
        top: 540px;
    }
    .fileiraCor-7{
        top: 624px;
    }
    .fileiraCor-8{
        top: 704px;
    }
    .cor-1{
    
        left: 95px;
    }
    .cor-2{
    
        left: 145px; 
    }
    .cor-3{
    
        left: 188px; 
    }
    .cor-4{
    
        left: 235px; 
    }
    .cor-5{
    
        left: 275px;  
    }
    .cor-6{
    
        left: 320px; 
    }
    .cor-1a{
        left: 106px;
    }
    .cor-1b{
        left: 157px;
    }
    .cor-1c{
        left: 222px;
    }
    .cor-1d{
        left: 296px;
    }
    .cor-2a{
        left: 160px;
        height: 60px!important;
    }
    .cor-2b{
        left: 253px;
        height: 60px!important;
    }
    .btn-cor-avatar{
        width: 40px;
        height: 40px;
        position: absolute;
    }
    .button{
        left: 548px;
        width: 25%;
    }
    .moldura{
        top: 10px!important;
    }
}

@media only screen and (min-width: 1680px){
    #avatar_print img{
        top: 150px;
        width: 80%;
    }
    .container{
        width: 1920px;
        height: 969px;
        max-width: 1980px;
    }
    .instrucao{
        bottom: 450px;
    }
    .button{
        width: 16%;
        left: 825px;
        bottom: 62px;
    }
    .seta-esquerda{
        width: 60px;
        height: 100px;
        position: absolute;
        left: -52px;
        z-index: 99;
        top: 378px;
    }
    .seta-direita{
        width: 60px;
        height: 100px;
        position: absolute;
        right: -54px;
        z-index: 99;
        top: 378px;
    }
    .seta-esquerda-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        left: -75px;
        z-index: 99;
    }
    .seta-direita-moldura{
        width: 50px;
        height: 100px;
        position: absolute;
        right: -64px;
        z-index: 99;
    }
    .cor-1{
        left: 155px; 
    }
    .cor-2{
        left: 210px; 
    }
    .cor-3{
        left: 265px; 
    }
    .cor-4{
        left: 325px; 
    }
    .cor-5{
        left: 375px; 
    }
    .cor-6{
        left: 435px; 
    }
    .cor-1a{
        left: 168px;
    }
    .cor-1b{
        left: 231px;
    }
    .cor-1c{
        left: 312px;
    }
    .cor-1d{
        left: 400px;
    }
    .cor-2a{
        left: 233px;
        height: 60px!important;
    }
    .cor-2b{
        left: 350px;
        height: 60px!important;
    }
    .fileiraCor-1{
        top: 141px;
    }
    .fileiraCor-2{
        top: 242px;
    }
    .fileiraCor-3{
        top: 344px;
    }
    .fileiraCor-4{
        top: 448px;
    }
    .fileiraCor-5{
        top: 545px;
    }
    .fileiraCor-6{
        top: 651px;
    }
    .fileiraCor-7{
        top: 755px;
    }
    .fileiraCor-8{
        top: 856px;
    }
    .btn-cor-avatar{
        width: 40px;
        height: 40px;
        position: absolute;
    }
    .moldura{
        width: 100%;
        top: -151px;
        left: -9px;
    }
    .seta-moldura{
        bottom: 32px!important;
        top: unset;
        filter: hue-rotate( 
        45deg
        );
        z-index: 29;
        left: 608px;
        width: 40%;
    }
    .titulo_page {
        font-size: 35px;
        position: absolute;
        left: 42px;
        right: 0;
        margin: 0 auto;
        text-align: center;
        z-index: 99;
        font-family: Unimed;
        top: 28px;
        font-weight: 700;
    }
    .pantone {
        height: 84%;
        margin-top: 8%;
    }
}