@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sofia+Sans+Extra+Condensed:ital,wght@0,1;0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500&display=swap');
:root{
    --tq-bg-back-color: rgb(0 0 0 / var(--tq-opacity));
    --tq-bg-green-color:rgb(37 211 102 / var(--tq-opacity));
    --tq-bg-orange-color:rgb(247 148 31 / var(--tq-opacity));
    --tq-bg-pinky-color:rgb(237 32 124 / var(--tq-opacity));
    --tq-bg-purple-color:#8400ff;
    --tq-bg-darkcyan-color:#1aad9c;
    --tq-opacity: 1
}

*{font-family: 'Poppins', sans-serif;}

.bg-green       { background-color: var(--tq-bg-green-color) !important; }
.bg-orange      { background-color: var(--tq-bg-orange-color) !important; }
.bg-pink        { background-color: var(--tq-bg-pinky-color) !important; }
.bg-purple      { background-color: var(--tq-bg-purple-color) !important; }
.bg-dark-cyan   { background-color: var(--tq-bg-darkcyan-color) !important; }

.text-green       { color: var(--tq-bg-green-color); }
.text-orange      { color: var(--tq-bg-orange-color); }
.text-pink        { color: var(--tq-bg-pinky-color); }
.text-purple      { color: var(--tq-bg-purple-color); }
.text-dark-cyan   { color: var(--tq-bg-darkcyan-color); }

a.text-green       { text-decoration: none; color: var(--tq-bg-green-color) !important; }
a.text-orange      { text-decoration: none; color: var(--tq-bg-orange-color) !important; }
a.text-pink        { text-decoration: none; color: var(--tq-bg-pinky-color) !important; }
a.text-purple      { text-decoration: none; color: var(--tq-bg-purple-color) !important; }
a.text-dark-cyan   { text-decoration: none; color: var(--tq-bg-darkcyan-color) !important; }
body {
    background: linear-gradient(45deg, rgb(135 7 132 / 33%), rgb(0 0 0 / 25%), rgb(134 2 226 / 20%)), url("/app/assets/img/background-im.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh !important;
}
.tq-main {
    position: absolute;
    width: 100%;
    height: fit-content;
    margin: auto;
    top: 0; bottom: 0;
}
.tq-main .wrapper {
    /* background: linear-gradient(45deg, rgb(135 7 132 / 33%), rgb(0 0 0 / 25%), rgb(134 2 226 / 20%)), url("/tequila/app/assets/img/background-im.jpg"); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-repeat: no-repeat; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* width: 100% !important; */

}

h1 span{
    /* top: 1.5em; */
    /* font-family: 'Sofia Sans Extra Condensed', sans-serif; */
    /* font-family: 'Sofia Sans Extra Condensed', sans-serif; */
    /* text-transform: uppercase; */
    /* position: absolute; */
    font-weight: 800!important;
    letter-spacing: 0px;
    font-size: 1em!important;margin-bottom: .5em;
    color: white; 
    font-size: 1.3em;
}
h1 {
    font-weight: 700!important;
    line-height: 1!important;
    position: relative;
    font-family: 'Poppins','Dela Gothic One', cursive;
    letter-spacing: -2px;
}

h1 .titulo  {
    position: relative !important;
    top: 10px;
    margin-left: -10px !important;
    margin-right: 25px;
    font-weight: normal!important;
    font-family: 'Dela Gothic One', cursive;
    transform: rotateZ(354deg) translate(20px, -10px);
    transition: Background 2s cubic-bezier(0.39, 0.575, 0.565, 1);
    animation: changeColor 7s  cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

footer ._tq_wt_button {
    --s-size: 36px;
    --s-padding: 12px;
    background-color: var(--tq-bg-green-color);
    padding: var(--s-padding) !important;
    height: 64px;
    width: 64px;
}
footer {
    /* width: var(--s-size) !important; */
    /* height: var(--s-size) !important; */
    bottom: 0px !important;
    margin: auto;
    cursor: pointer;
}

.slidetop {transform: translateY(-70px); transition: transform 0s ease-in;}
.slidedown {transform: translateY(0px); transition: transform 0s ease-out;}

.img-fluid.w-100:not(.slidetop) {
    transform: translateY(10px);
    transition: transform 0s ease-out;
}

.rodape{
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
}

@keyframes slideTop {
    0% {transform: translateY(0)}    
    100% {transform: translateY(100px)}    
}

@keyframes changeColor {
    0% {
        background-color: #1aad9c; 
        color: white;
    }
    25% {
        background-color: #8400ff; 
        color: rgb(247 148 31)
    }
    50% { background-color: rgb(247 148 31); color: #8400ff}
    75% { background-color: #dc3545; color: white}
    100% { background-color: rgb(37 211 102); color: rgb(237 32 124)}
}

@media only screen and (min-width:640px) {
    .tq-logo .img-fluid{ 
        max-width: 500px !important;
    }
}

@media only screen and (min-width:640px) and (min-height: 600px) {
    .tq-logo .img-fluid{ 
        max-width: 500px !important;
    }
}