/* Fontes Importadas */
@font-face {
    font-family: 'Calibri Light';
    src: url('https://euvip.com.br/fonte/calibril.ttf');
}

@font-face {
    font-family: 'Calibri Regular';
    src: url('https://euvip.com.br/fonte/calibri.ttf');
}

@font-face {
    font-family: 'Calibri Bold';
    src: url('https://euvip.com.br/fonte/calibrib.ttf');
}

/* Desktop */
@media (max-width: 1920px) {

    * {
        padding: 0;
        margin: 0;
        font-family: 'Calibri Light';
    }

    body {
        background: #f2f2f2;
    }

    #body {
        display: inline-block;
        text-align: center;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #bodyflex {
        display: flex;
        justify-content: center;
    }

    /* Background */
    header {
        width: 100%;
        height: 550px;
        background-image: url('https://iasdt.ocdmkt.com.br/landingpages/img/blue-background.png');
        background-size: 120%;
        background-repeat: no-repeat;
        background-position: -200px 0;
    }

    #bg-white {
        width: 100%;
        height: 500px;
        background: #f2f2f2;
    }

    /* Divs em Flex */
    #content {
        width: 1000px;
        height: auto;
        display: inline-block;
        position: absolute;
        border-radius: 10px;
        box-shadow: 0 0 15px 10px rgba(0,0,0,0.1);
        margin: 30px 0 40px 0;
        overflow: hidden;
    }

    .content-flex {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .banner {
        width: 65%;
        height: 350px;
        background-image: linear-gradient( 90deg, #0e3b63, #0c3254);
        background-size: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .agendamento {
        width: 35%;
        height: 350px;
        background: #f2f2f2;
    }

    .horarios {
        width: 100%;
        height: auto;
        background: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 40px 0;
    }

    .horarios-mobile {
        display: none;
    }

    .social-medias {
        width: 100%;
        height: auto;
        background: #ffffff;
        border-top: 1px solid #e6e6e6;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    /* Formatação dos textos do Frame 'Agendamento' */
    h1 {
        font-family: 'Calibri Bold';
        font-size: 24px;
        color: #383838;
        text-align: left;
        line-height: 30px;
        padding: 55px 0 0 35px;
        width: 80%;
        height: 70px;
        letter-spacing: -0.5px;
    }

    .p-endereco {
        font-size: 20px;
        color: #383838;
        text-align: left;
        padding: 0 0 0 35px;
        width: 70%;
        height: 70px;
        letter-spacing: -0.5px;
    }

    .p-agendamento {
        font-family: 'Calibri Bold';
        font-size: 24px;
        color: #383838;
        text-align: left;
        line-height: 30px;
        padding: 0 0 0 35px;
        width: 80%;
        height: 40px;
        letter-spacing: -0.5px;
    }

    .p-termos {
        font-size: 20px;
        color: #383838;
        text-align: left;
        padding: 0 0 0 35px;
        width: 85%;
        height: 90px;
        letter-spacing: -0.5px;
    }

    .a-termos {
        text-decoration: none;
        color: #046dad;
    }

    /* Logo IASDT 'Banner' */
    .banner img {
        width: auto;
        max-width: 550px;
        height: auto;
    }

    /* Formatação dos textos e Botões do Frame 'Horarios' */
    .p-culto {
        font-size: 22px;
        color: #383838;
        text-align: left;
        padding: 0 0 0 50px;
        width: 100%;
        height: 40px;
        letter-spacing: -0.5px;
    }

    .button {
        width: 290px;
        height: 25px;
        border: 1px solid #0e3b63;
        border-color: #14538a;
        border-radius: 7px;
        background: #ffffff;
        font-size: 22px;
        font-family: 'Calibri Regular';
        color: #206cad;
        cursor: pointer;
        transition: 0.2s;
        margin: 5px 6px;
        padding: 20px 0;
        text-decoration: none;
    }

    .button:hover {
        border: 1px solid #0e3b63;
        background: #0e3b63;
        color: #ffffff;
    }
    
    .control-event {
        width: 100%;
        margin: 10px;
    }
    .control-event .button {
        height: auto;
        width: 220px;
        background-color: #0e3b63;
        color: white;
    }
    
    .button.danger {
        background-color: red;
        color: white;
    }
    
    .button.success {
        background-color: #009933;
        color: white;
    }
    
    .button.warn {
        background-color: orange;
        color: white;
    }
    
    .control-event .button:hover {
        background-color: white;
        color: #0e3b63;
    }
    
    .button.danger:hover {
        color: red
    }
    
    .button.success:hover {
        color: #009933
    }
    
    .button.warn:hover {
        color: orange
    }
    
    .button.event {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 10px 0px 10px 0px;
    }
    
    .button.event .amount {
        display: block;
        font-weight: bold;
        font-size: 60%;
    }
    
    .button.event .event-title {
        display: block;
        font-size: 80%;
    }

    .btn-2 {
        margin: -500px 0 0 0;
    }

    .assentos {
        width: 30%;
        height: 20px;
        font-size: 18px;
        padding: 0 0 20px 0;
    }

    /* Formatação dos textos e Botões do Frame 'Social Medias */
    .p-siga {
        font-size: 18px;
        color: #383838;
        text-align: left;
        padding: 20px 0 0 50px;
        width: 60%;
        height: 40px;
        letter-spacing: -0.5px;
    }

    .btns-social-medias {
        width: 40%;
        height: 60px;
        display: flex;
    }

    .btns-social-medias img {
        width: 30px;
        height: auto;
        padding: 10px 5px;
        margin: 5px 0 0 0;
    }

    .btns-social-medias img:hover {
        filter: brightness(150%);
    }

    .icons {
        width: 40%;
        height: 60px;
        padding: 0 0 0 50px;
    }

    .p-redes {
        width: 60%;
        height: 60px;
        font-size: 18px;
        color: #383838;
        text-align: left;
        padding: 20px 0 0 10px;
        letter-spacing: -0.5px;
    }

}

/* Mobile */
@media (max-width: 1000px) {
    
    .control-event .button {
        width: 100%;
        display: block;
    }

    * {
        height: auto;
    }

    header {
        display: none;
    }

    #bg-white {
        display: none;
    }

    /* Divs em Flex */
    #content {
        width: 100%;
        height: auto;
        position: static;
        margin: 0;
        border-radius: 0;
        box-shadow: 0;
        overflow: visible;
    }

    .banner {
        width: 100%;
        height: 500px;
    }

    .agendamento {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .horarios {
        width: 100%;
        height: auto;
        background: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 100px 0;
    }

    .horarios-mobile {
        width: 100%;
        height: auto;
        background: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 100px 0;
    }

    .social-medias {
        width: 100%;
        height: auto;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Logo IASDT 'Banner' */
    .banner img {
        width: auto;
        max-width: 800px;
        height: auto;
    }

    /* Formatação dos textos do Frame 'Agendamento' */
    h1 {
        font-size: 60px;
        line-height: 65px;
        text-align: center;
        padding: 100px 0 0 0;
        width: 70%;
        height: 150px;
    }

    .p-endereco {
        font-size: 50px;
        line-height: 65px;
        text-align: center;
        padding: 0;
        width: 70%;
        height: 230px;
        letter-spacing: -0.5px;
    }

    .p-agendamento {
        font-size: 60px;
        line-height: 65px;
        text-align: center;
        padding: 0;
        width: 90%;
        height: 80px;
    }

    .p-termos {
        font-size: 50px;
        line-height: 65px;
        text-align: center;
        padding: 0;
        width: 80%;
        height: 280px;
    }

    /* Formatação dos textos e Botões do Frame 'Horarios' */
    .p-culto {
        font-size: 50px;
        line-height: 65px;
        text-align: center;
        width: 90%;
        height: 150px;
    }

    .assentos {
        width: 90%;
        height: 100px;
        font-size: 50px;
        line-height: 65px;
        padding: 60px 0;
    }

    .button {
        width: 800px;
        height: 60px;
        font-size: 60px;
        border-radius: 15px;
        padding: 70px 0;
        margin: 20px 0;
    }

    /* Formatação dos textos e Botões do Frame 'Social Medias */
    .p-siga {
        font-size: 50px;
        line-height: 65px;
        text-align: center;
        padding: 100px 0 0 0;
        width: 90%;
        height: 100px;
    }

    .btns-social-medias {
        width: 90%;
        height: 200px;
        padding: 0;
        flex-direction: row;
        overflow: hidden;
    }

    .btns-social-medias img {
        width: 80px;
    }

    .icons {
        width: 40%;
        height: 200px;
        text-align: right;
    }

    .p-redes {
        width: 60%;
        height: 200px;
        padding: 20px 80px 0 0;
        flex-direction: row;
        text-align: left;
        font-size: 50px;
        line-height: 65px;
    }

}