/* reset by rafaux */
* { margin: 0px; padding: 0px; border: 0px; font-weight: normal; font-size: 100%; list-style: none; line-height: 1; outline: 0px; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; }

/* var */
:root { --black: #222; --green: #59B69B; --blue: #0C134A; }

/* global class */
.container { display: block; width: auto; max-width: 1000px; height: auto; margin: 0px auto; }

/* base */
a { text-decoration: none; transition: all .5s ease; }
body { background: #fff; color: var(--black); font: normal 16px 'Tahoma', sans-serif; overflow-x: hidden; }
input, textarea, select, button { font: normal 16px 'Tahoma', sans-serif; appearance: none; -webkit-appearance: none; border-radius: 0px; cursor: pointer; }
input[type=submit], button { transition: all .5s ease; }
figure { margin: 0px; }

/* call */
#call { height: 700px; background: #fff url('../img/semanalibras/call-bg.jpg') no-repeat center center; background-size: cover; }
#call .container { display: flex; height: 700px; align-items: flex-end; }
#call section { position: relative; width: 55%; height: 100%; }
#call section header { padding-top: 70px; }
#call section header h1 { display: block; margin-bottom: 20px; font-weight: bold; font-size: 60px; color: var(--green); }
#call section header p { display: block; width: 80%; color: #fff; line-height: 1.6; }
#call section #form { position: absolute; bottom: 40px; left: 0px; width: 100%; height: auto; }
#call section #form input { display: block; width: 100%; height: 40px; margin-bottom: 10px; padding: 5px 14px; background-color: #fff; color: var(--blue); border-radius: 7px; }
#call section #form input[type=submit] { background-color: var(--blue); color: #fff; font-weight: bold; }
#call section #form input[type=submit]:hover { background-color: var(--green); }
#call section #form img { width: 100%; height: auto; border-radius: 7px; }
#call section #form .response { display: block; margin: 15px 0px 20px 0px; color: var(--blue); line-height: 1.2; font-weight: bold; }
#call figure.instrutor { width: 45%; height: 100% }
#call figure.instrutor img { width: auto; height: 100%; }

/* method */
#method section { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); margin: 50px 0px; }
#method section::before { position: absolute; top: 0px; left: 50%; width: 1px; height: 100%; background-color: #7A7A7A; content: ''; }
#method section::after { position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; background-color: #7A7A7A; content: ''; }
#method section article { padding: 80px; text-align: center; }
#method section article h2 { display: block; margin-bottom: 20px; font-weight: bold; font-size: 24px; color: var(--blue); line-height: 1.1; }
#method section article p { display: block; line-height: 1.6; color: #7A7A7A; }

/* last */
figure.last-top img { width: 100%; height: auto; }
#last { height: 450px; background: #000 url('../img/semanalibras/last-bg.jpg') no-repeat; background-size: cover; }
#last .container { display: flex; height: 450px; align-items: flex-end; }
#last #form { position: relative; width: 50%; height: 100%; padding-top: 50px; }
#last #form h2 { display: block; font-weight: bold; color: var(--green); text-transform: uppercase; font-size: 16.8px; }
#last #form input { display: block; width: 100%; height: 40px; margin-bottom: 10px; padding: 5px 14px; background-color: #fff; color: var(--blue); border-radius: 7px; }
#last #form input[type=submit] { background-color: #144178; color: #fff; font-weight: bold; }
#last #form input[type=submit]:hover { background-color: var(--green); }
#last figure.instrutor { position: relative; width: 50%; height: 100%; }
#last figure.instrutor img { position: absolute; bottom: 0px; right: 0px; height: 170%; }

    /* countdown */
    #countdown { display: flex; align-items: center; padding: 22px 0px; }
    #countdown span { display: flex; width: 25%; flex-direction: column; text-align: center; }
    #countdown span strong { font-weight: bold; font-size: 53px; color: var(--green); }
    #countdown span small { display: block; margin-top: 5px; color: #fff; font-size: 20px; }

/* footer */
#footer { padding: 50px 0px; background-color: #0C234B; text-align: center; }
#footer img { display: block; width: 210px; height: auto; margin: 0px auto 50px auto; }
#footer p { display: block; color: #fff; font-size: 12px; }

/* ok */
#ok { padding: 20px 0px 200px 0px; text-align: center; }
#ok h1 { display: block; margin-bottom: 20px; font-weight: bold; font-size: 20px; line-height: 1.4; color: #7A7A7A; }
#ok iframe { width: 100%; height: 450px; margin-bottom: 20px; border-radius: 20px; }
#ok h2 { font-weight: bold; color: var(--blue); font-size: 20px; }
#ok p { display: block; margin: 20px 0px; line-height: 1.4; font-size: 18px; color: #7A7A7A; }
#ok span a { display: inline-block; width: auto; padding: 20px 60px; background-color: #1AFF39; color: #fff; font-weight: bold; border-radius: 10px; }
#ok span a i { display: inline-block; margin-right: 10px; font-size: 20px; vertical-align: middle; }
#ok span a:hover { background-color: #12cd2c; transform: scale(1.2); }

    /* progress */
    #progress { position: fixed; z-index: 20; bottom: 0px; left: 0px; width: 100%; height: 40px; background-color: #eee; }
    #progress span { position: relative; z-index: 2; display: block; padding-left: 20px; font-weight: bold; font-size: 12px; text-transform: uppercase; color: #fff; line-height: 40px; letter-spacing: 2px; }
    #progress b { position: absolute; top: 0px; left: 0px; width: 0px; height: 100%; padding-right: 20px; background-color: #1AFF39; text-align: right; font-weight: bold; font-size: 12px; color: #fff; line-height: 40px; opacity: 0; transition: all 10s ease; }
    #progress b.on { width: 87%; opacity: 1; }

/* mailchimp */
#mc_embed_signup { width: 100% !important; background: transparent !important; }
#mc_embed_signup form { margin: 0px !important; }
#mc_embed_signup .mc-field-group { width: 100% !important; padding-bottom: 0px !important; }
#mc_embed_signup h2,
.indicates-required { display: none !important; }
#last label { color: #fff !important; }

/* wpcf7 */
.wpcf7 br { display: none; }
.wpcf7-not-valid-tip,
.wpcf7-response-output { display: none !important; }

@media (max-width: 1200px){

    /* global */
    .container { max-width: 100%; padding: 0px 20px; }

}

@media (max-width: 800px){

    /* global */
    html, body { overflow-x: hidden; }

    /* call */
    #call section { width: 70%; }
    #call section header h1 { font-size: 48px; }
    #call figure.instrutor { width: 30%; }
    #call figure.instrutor img { margin-left: -50%; }

    /* method */
    #method section::before,
    #method section::after { display: none; }
    #method section article { padding: 40px; }

    /* last */
    #last #form { z-index: 2; width: 70%; }
    #last figure.instrutor { width: 30%; }
    #last figure.instrutor img { height: 120%; right: -100px; }

}

@media (max-width: 650px){

    /* global */
    body, input { font-size: 13px; }

    /* call */
    #call,
    #call .container { height: 500px; }
    #call section header h1 { font-size: 30px; }
    #call section header p { width: 100%; }

    /* method */
    #method section { margin: 20px 0px 40px 0px; grid-template-columns: 1fr; }
    #method section article { padding: 40px 0px 0px 0px; }
    #method section article h2 { font-size: 18px; }

    /* countdown */
    #countdown span strong { font-size: 30px; }
    #countdown span small { font-weight: bold; font-size: 14px; }

    /* footer */
    #footer { padding: 20px; }
    #footer img { width: 140px; }
    #footer p { line-height: 1.4; }

    /* ok */
    #ok iframe { height: 300px; }
    #ok p { font-size: 16px; }

}

@media (max-width: 500px){

    /* call */
    #call section header { width: 110%; padding-top: 30px; }
    #call figure.instrutor img { margin-left: -80%; }

    /* last */
    #last { height: 350px;  overflow: hidden; }
    #last #form { padding-top: 30px; }

    /* countdown */
    #countdown { gap: 10px; padding: 20px 0px; }
    #countdown span { padding: 7px; background-color: var(--blue); border-radius: 10px; }
    #countdown span small { font-size: 8px; }

}