@import "fontes.css";

html,body
{
    margin: 0px;
    padding: 0px;
    font-family: "BwSurcoDemo";
}

h1,h2,h3,h4,h5,h6,
p,a,span
{
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    color: #3c3c3c;
}

a:hover{text-decoration: none;}

a{cursor: pointer;}

button,input,textarea,select{outline: none;}
button{cursor: pointer;}

ul{list-style-type: none; margin: 0px; padding: 0px;}


.centraliza-itens
{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}


/* Alinhamento de Texto */
.text-align-center{text-align: center;}
.text-align-left{text-align: left;}
.text-align-right{text-align: right;}
.text-align-justify{text-align: justify;}

/* Tipo de Texto */
.bold{font-weight: bold;}

*{
    transition: all 0.5s;
}

/* Paddings */
.p-10{padding: 10px;}
.p-20{padding: 20px;}
.p-30{padding: 30px;}
.p-40{padding: 40px;}
.p-50{padding: 50px;}
.p-60{padding: 60px;}
.p-70{padding: 70px;}
.p-80{padding: 80px;}
.p-90{padding: 90px;}
.p-100{padding: 100px;}

.p-t-10{padding-top: 10px;}
.p-t-20{padding-top: 20px;}
.p-t-30{padding-top: 30px;}
.p-t-40{padding-top: 40px;}
.p-t-50{padding-top: 50px;}
.p-t-60{padding-top: 60px;}
.p-t-70{padding-top: 70px;}
.p-t-80{padding-top: 80px;}
.p-t-90{padding-top: 90px;}
.p-t-100{padding-top: 100px;}
.p-t-200{padding-top: 200px;}

.p-b-10{padding-bottom: 10px;}
.p-b-20{padding-bottom: 20px;}
.p-b-30{padding-bottom: 30px;}
.p-b-40{padding-bottom: 40px;}
.p-b-50{padding-bottom: 50px;}
.p-b-60{padding-bottom: 60px;}
.p-b-70{padding-bottom: 70px;}
.p-b-80{padding-bottom: 80px;}
.p-b-90{padding-bottom: 90px;}
.p-b-100{padding-bottom: 100px;}

.p-l-10{padding-left: 10px;}
.p-l-20{padding-left: 20px;}
.p-l-30{padding-left: 30px;}
.p-l-40{padding-left: 40px;}
.p-l-50{padding-left: 50px;}
.p-l-60{padding-left: 60px;}
.p-l-70{padding-left: 70px;}
.p-l-80{padding-left: 80px;}
.p-l-90{padding-left: 90px;}
.p-l-100{padding-left: 100px;}

.p-r-10{padding-right: 10px;}
.p-r-20{padding-right: 20px;}
.p-r-30{padding-right: 30px;}
.p-r-40{padding-right: 40px;}
.p-r-50{padding-right: 50px;}
.p-r-60{padding-right: 60px;}
.p-r-70{padding-right: 70px;}
.p-r-80{padding-right: 80px;}
.p-r-90{padding-right: 90px;}
.p-r-100{padding-right: 100px;}

/* -- Margin -- */
.m-10{margin: 10px;}
.m-20{margin: 20px;}
.m-30{margin: 30px;}
.m-40{margin: 40px;}
.m-50{margin: 50px;}
.m-60{margin: 60px;}
.m-70{margin: 70px;}
.m-80{margin: 80px;}
.m-90{margin: 90px;}
.m-100{margin: 100px;}

.m-t-10{margin-top: 10px;}
.m-t-20{margin-top: 20px;}
.m-t-30{margin-top: 30px;}
.m-t-40{margin-top: 40px;}
.m-t-50{margin-top: 50px;}
.m-t-60{margin-top: 60px;}
.m-t-70{margin-top: 70px;}
.m-t-80{margin-top: 80px;}
.m-t-90{margin-top: 90px;}
.m-t-100{margin-top: 100px;}
.m-t-200{margin-top: 200px;}

.m-b-10{margin-bottom: 10px;}
.m-b-20{margin-bottom: 20px;}
.m-b-30{margin-bottom: 30px;}
.m-b-40{margin-bottom: 40px;}
.m-b-50{margin-bottom: 50px;}
.m-b-60{margin-bottom: 60px;}
.m-b-70{margin-bottom: 70px;}
.m-b-80{margin-bottom: 80px;}
.m-b-90{margin-bottom: 90px;}
.m-b-100{margin-bottom: 100px;}

.m-l-10{margin-left: 10px;}
.m-l-20{margin-left: 20px;}
.m-l-30{margin-left: 30px;}
.m-l-40{margin-left: 40px;}
.m-l-50{margin-left: 50px;}
.m-l-60{margin-left: 60px;}
.m-l-70{margin-left: 70px;}
.m-l-80{margin-left: 80px;}
.m-l-90{margin-left: 90px;}
.m-l-100{margin-left: 100px;}

.m-r-10{margin-right: 10px;}
.m-r-20{margin-right: 20px;}
.m-r-30{margin-right: 30px;}
.m-r-40{margin-right: 40px;}
.m-r-50{margin-right: 50px;}
.m-r-60{margin-right: 60px;}
.m-r-70{margin-right: 70px;}
.m-r-80{margin-right: 80px;}
.m-r-90{margin-right: 90px;}
.m-r-100{margin-right: 100px;}


/* Tamanho da fonte */
.size-01{font-size: 0.1em;}
.size-02{font-size: 0.2em;}
.size-03{font-size: 0.3em;}
.size-04{font-size: 0.4em;}
.size-05{font-size: 0.5em;}
.size-06{font-size: 0.6em;}
.size-07{font-size: 0.7em;}
.size-08{font-size: 0.8em;}
.size-09{font-size: 0.9em;}
.size-10{font-size: 1em;}
.size-11{font-size: 1.1em;}
.size-12{font-size: 1.2em;}
.size-13{font-size: 1.3em;}
.size-14{font-size: 1.4em;}
.size-15{font-size: 1.5em;}
.size-16{font-size: 1.6em;}
.size-17{font-size: 1.7em;}
.size-18{font-size: 1.8em;}
.size-19{font-size: 1.9em;}
.size-20{font-size: 2em;}
.size-21{font-size: 2.1em;}
.size-22{font-size: 2.2em;}
.size-23{font-size: 2.3em;}
.size-24{font-size: 2.4em;}
.size-25{font-size: 2.5em;}
.size-26{font-size: 2.6em;}
.size-27{font-size: 2.7em;}
.size-28{font-size: 2.8em;}
.size-29{font-size: 2.9em;}
.size-30{font-size: 3em;}
.size-35{font-size: 3.5em;}
.size-40{font-size: 4em;}
.size-45{font-size: 4.5em;}
.size-50{font-size: 5em;}
.size-55{font-size: 5.5em;}
.size-60{font-size: 6em;}
.size-65{font-size: 6.5em;}
.size-70{font-size: 7em;}


.light{font-weight: 100;}

.alinha
{
    width: 90%;
    max-width: 1170px;
    display: block;
    margin: 0 auto;
}

.btn-outiline-amarelo
{
    border: 2px solid #e5b93b;
    color: #e5b93b;
    background: transparent;
    border-radius: 20px;
    padding: 5px 20px;
    text-transform: uppercase;
}


/**
* =========================================
*             INICIA O SITE
* =========================================
*/

/**
* ---- HEADER -----------------------------
* -----------------------------------------
**/

header{width: 100%; padding: 0px; margin: 0px;}
header .cores{width: 100%;}

header .cores .vermelho{width: 50%; background-color: #ff3f7c;}
header .cores .azul{width: 30%; background-color: #abd8dc;}
header .cores .amarelo{width: 20%; background-color: #ffda73;}

header .cores .vermelho,
header .cores .azul,
header .cores .amarelo
{
    height: 20px;
    float: left;
}

header .logo {float: left; max-width: 90%;}

header nav {float: right; padding-top: 50px}
header nav ul li{display: inline-block; padding: 0px 20px;}
header nav ul li a
{
    color: #ff3f7c;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 2px;
}

header nav ul li a:hover{color: #e5b93b;}


/**
* ---- BOLAS ------------------------------
* -----------------------------------------
**/

.bola-1
{
    position: absolute;
    right: 0px;
    top: 20px;
    width: 300px;
}


.bola-2
{
    position: absolute;
    left: 0px;
    top: 300px;
    width: 250px;
}


/**
* ---- MENINAS ----------------------------
* -----------------------------------------
**/

.meninas
{
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 60px;
}

.meninas img{max-width: 90%;}

.meninas .pc{display: block;}
.meninas .mobile{display: none;}


/**
* ---- ROSA -------------------------------
* -----------------------------------------
**/

.rosa
{
    background-color: #ff3f7c;
    margin-top: -220px;
    text-align: center;
    height: 240px;
}

.rosa .texto
{
    width: 500px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: -200px;
    padding-left: 20px;
    color: #fff;
}

.rosa .texto h5
{
    color: #fff;
    font-weight: bold;
    font-size: 1.7em;
    letter-spacing: 10px;
    padding-bottom: 20px;
}

.rosa .texto p
{
    color: #fff;
    font-size: 1.2em;
    padding-bottom: 50px;
}

.rosa .texto h4
{
    color: #fff;
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 7px;
}

.rosa .texto label
{
    font-size: 1.1em;
}

.rosa .texto input
{
    border: none;
    background: #fff;
    border-radius: 10px;
    width: 70%;
    padding: 20px 0px;
    color: #ff3f7c;

    font-size: 2.5em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-top: 30px;
}


/**
* ---- FORMULÁRIO -------------------------
* -----------------------------------------
**/

.dados
{
    text-transform: uppercase;
    padding: 50px 0px;
}

.dados h2
{
    color: #ff3f7c;
    font-size: 1.8em;
    text-align: center;
    letter-spacing: 5px;
    padding-bottom: 40px;
}

.dados label
{
    color: #ff3f7c;
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    padding-bottom: 7px;
    letter-spacing: 3px;
}

.dados .col-md-8,
.dados .row
{
    padding-bottom: 20px;
}

.dados input
{
    width: 100%;
    border: none;
    border-bottom: 2px solid #abd8dc;
    padding: 7px 0px;
    font-size: 1.2em;
    color: #ff3f7c;
}


/**
* ---- REGULAMENTO ------------------------
* -----------------------------------------
**/

.regulamento
{
    background-color: #ffda73;
    padding: 50px 0px;
}

.regulamento h2
{
    font-size: 2em;
    color: #ff3f7c;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    padding-bottom: 30px;
}

.regulamento .juridico
{
    background: #fff;
    border-radius: 10px;
    height: 300px;
    overflow-y: auto;
    margin-bottom: 30px;
}

.regulamento .juridico .txt
{
    padding: 10px 20px;
}

.regulamento .juridico .txt p
{
    color: #ff3f7c;
    padding: 10px 0px;
    font-size: 1.4em;
}


.regulamento .juridico::-webkit-scrollbar
{
    width: 5px;
    background-color: #fff;
    border-radius: 10px;
}

.regulamento .juridico::-webkit-scrollbar-thumb
{
    width: 5px;
    border-radius: 10px;
    background-color: #ff3f7c;
}


.regulamento .aceito
{
    color: #ff3f7c;
    font-weight: bold;
    font-size: 1.5em;
    cursor: pointer;
}

.regulamento .aceito span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ff3f7c;
    background-color: #ffda73;
    border-radius: 100%;
    margin-bottom: -5px;
    margin-right: 10px;
}

.regulamento .aceito.ativo span
{
    background-color: #ff3f7c;
}

.regulamento button
{
    margin-top: 30px;
    border: none;
    background-color: #ff3f7c;
    color: #fff;
    padding: 10px 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.3em;
    border-radius: 5px;
}

.regulamento button:hover
{
    background-color: #fff;
    color: #ff3f7c;
}


/**
* ---- FOOTER -----------------------------
* -----------------------------------------
**/

footer .azul{
    background-color: #abd8dc;
    padding: 0px 0px 30px;
    text-align: center;
}

footer .row
{
    padding: 20px 0px;
}

footer h4
{
    color: #fff;
    font-size: 1.3em;
    text-transform: uppercase;
    font-family: "BwSurcoDemo-medium";
    letter-spacing: 3px;
    padding-bottom: 20px;
    padding-top: 30px;
}

footer i
{
    color: #fff;
    font-size: 2em;
    padding: 0px 10px;
}

footer .inscrevase
{
    padding-bottom: 37px;
}


footer .logo-canal
{
    margin-top: -55px;
    padding-right: 20px;
}

footer .icones
{
    display: inline-block;
    color: #fff;
}

footer .icones a p span
{
    color: #fff;
    text-transform: uppercase;
}


/**
* --- AZUL ESCURO --------------------
* ------------------------------------
*/

footer .azul-escuro{
    background-color: #b3dee2;
    padding: 30px 30px;
    text-align: center;
}

footer .logos img{padding: 0px 20px;}


/**
* --- DESIGUAL -----------------------
* ------------------------------------
*/

footer .desigual
{
    padding: 10px 0px;
    position: relative;
}

footer .desigual h5
{
    color: #ff3f7c;
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
    padding-bottom: 10px;
}

footer .desigual p
{
    display: inline-block;
    padding-right: 10px;
    color: #ff3f7c;
}

footer .desigual .desigual-logo
{
    position: absolute;
    right: 0px;
    top: 50px;
}