/**
Theme Name: Guem Studio
Theme URI: https://guemstudio.com
Author: ANTNNA
Author URI: https://antnna.com;
Description: Tema para o Studio Guem
Version: 1.0
Text Domain: Guem Studio
**/


/* 01. REGRAS */

body {background-image: linear-gradient(to bottom, #F0CDAF, #FFF688); overscroll-behavior: none; box-sizing: border-box; line-height: 1.2;}
* {color: #000; font-family: Georgia, Arial, sans-serif; margin: 0; padding: 0; box-sizing: border-box; position: relative; text-decoration: none; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; cursor: url("img/cursor.png"), auto;}
div {display: block;}
::-webkit-scrollbar {display: none;}
::selection {background-color: #FFECCB; color:#000;}
ul, li, figure {list-style:none; margin: 0; padding: 0;}
span {display: table;}
p {text-decoration:none; margin:0; padding:0; font-size: 18px;}
p strong {font-weight: 600;}
a, span, li {display: block; color: #FFECCB;}
a:hover {transition: all ease-in 0.4s;}
p > a {display: initial;}
main {height: auto; width: 100%; overflow: hidden;}
img {max-width: 100%; height: auto;}

.container {max-width: 1080px; margin: 0 auto; position: relative; height: 100%; padding-left: 24px; padding-right: 24px;}

.d-grid {display: grid; grid-column: auto; grid-template-columns: 1fr 5fr 1fr;}
.d-table {display: table;}
.j-sb {justify-content: space-between;}
.a-end {align-items: end;}
.ovflow {overflow-x: scroll; overflow-y: hidden; flex-wrap: nowrap;}
.ovflow::-webkit-scrollbar {display: none;}
.c-holder {position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto;}
.v-holder {position: absolute; top: 50%; transform: translateY(-50%);}
.mw {max-width: 100%;}
.btn {padding: 16px 24px; background-color: #FF6969; width: fit-content; transition: .3s all ease;}
.btn:hover {background-color: blueviolet;}

.txt-center {text-align: center;}
.txt-right {text-align: right;}

.fadeIn {opacity: 1; display: block; transition: 0.3s all ease-in; transition-delay: 400ms;}
.fadeOut {opacity: 0; transition: 0.3s all ease-in;}

.padtop1 {padding-top: 1vh;}
.padbot1 {padding-bottom: 1vh;}
.padtop2 {padding-top: 2vh;}
.padbot2 {padding-bottom: 2vh;}
.padtop3 {padding-top: 4vh;}
.padbot3 {padding-bottom: 4vh;}
.padtop4 {padding-top: 6vh;}
.padbot4 {padding-bottom: 6vh;}
.padtop5 {padding-top: 8vh;}
.padbot5 {padding-bottom: 8vh;}
.padtop6 {padding-top: 12vh;}
.padbot6 {padding-bottom: 12vh;}

.header {gap: 16px; align-items: center;}
.header > img:nth-child(1) {max-height: 110px; animation: rotate 12s infinite linear;}
.header > img:nth-child(3) {max-height: 110px; animation: rotate 8s infinite linear reverse;}

.content {text-align: center; max-width: 720px; margin: 0 auto;}
.content .btn {margin: 0 auto;}

.footer {margin-bottom: -10px;}
.ticket {height: 84dvh; max-height: 84vh; width: auto; text-align: center;}

.bg.sucesso {background-image: url(img/lf-passaro-01.webp); background-repeat: repeat-x repeat-y; background-size: 160px; background-position: center center;}
.sucesso {height: 100dvh; width: 100%; position: relative;}

@keyframes twoface {
    0% {transform: rotate(0deg, 0deg);}
    100% {transform: skew(180deg, 180deg);}
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* 99. RESPONSIVE */

@media screen and (max-height: 680px) {
h1 {font-size: 20px;}
h2 {font-size: 18px;}
p {font-size: 15px;}
form input, form textarea, form button {padding: 6px; font-size: 13px;}
}

@media screen and (min-width: 801px) {
.dn-desk {display: none;}
}


@media screen and (max-width: 800px), screen and (max-height: 600px) {
.dn-mob {display: none;}
} 

@media screen and (max-width: 480px) {
.dn480 {display: none}
.container {padding-left: 16px; padding-right: 16px;}
.header {gap: 8px;}
.ticket {height: auto; max-height: 84vh; width: 88vw;}
.bg.sucesso {background-size: 60px;}

}