/* 1) FONT IMPORTS 
---------------------------------------------------------------------*/
@import url('@import url(' https: //fonts.googleapis.com/css?family=Lato|Raleway:500,800');');


    /* 2) PADRÕES 
---------------------------------------------------------------------*/

    ::selection {
        background-color: #0071B0; color:#fff;
    }

    * {
        box-sizing: border-box; margin: 0; padding: 0; font-family: 'Lato', sans-serif; font-weight: 400;
    }

    body {
        background-color: #fff; margin: 0; padding: 0; height: 100%;
    }

    ul, li, figure {
        list-style:none; margin: 0; padding: 0; display: block;
    }

    body, ul, li, p, span, a {
        text-decoration:none; margin:0; padding:0; font-size: 14px; font-weight: 300; color: #fff;
    }

    h1, h2, h3, h4, h6 {
        font-family: 'Raleway', sans-serif; font-weight: 800;
    }

    h1 {
        font-size: 24px; color: #555555;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 48px;
    }

    h4 {
        font-weight: 500; font-size: 28px;
    }

    h6 {
        font-size: 20px; color: #0071B0;
    }

    a {
        transition: ease 0.8s all; -webkit-transition: ease 0.8s all;
    }

    p {
        line-height: 1.5;
    }

    .grand-container {
        max-width: 1440px; margin: 0 auto; padding: 0 100px; position: relative;
    }

    .btn {}

    .bluebg {
        background-image: linear-gradient(to right top, #0071B0, #3B8DBB, #0095BF, #00A6C0, #00B6BF);
    }

    .halfscreen {
        max-width: 520px;
    }


    /* 3) PAGE 
---------------------------------------------------------------------*/

    #vitrine {
        background-image: url(imgs/bg.jpg); height: 75vh; background-size: cover; background-position: center center; position: relative;
    }

    #vitrine > div {
        height: 75vh;
    }

    #vitrine > div > div > h3 {
        padding-bottom: 6px;
    }

    #vitrine > div > div > h4 {
        padding-bottom: 24px;
    }

    #vitrine > div > div.halfscreen#left {
        position: absolute; top: 50%; margin: 0; -ms-transform: translateY(-50%); transform: translateY(-50%);
    }

    div#form {
        border: 2px solid #e2e2e2; padding: 40px; background-color: #fff; position: absolute; right: 100px; top: 90%; z-index: 99;
    }

    div#form > div.bluebg {
        height: 160px; width: 160px; position: relative; margin: -120px auto 40px auto; border: 2px #fff solid;
    }

    div#form > div.bluebg > img {
        position: absolute; top: 50%; margin: 0; -ms-transform: translateY(-50%); transform: translateY(-50%); left: 15%;
    }
    div#form > p {
        color: #555555; padding-bottom: 30px;
    }
    div#form #eusoudomo-login {
        font-size: 32px;
        color: #0071B0;
    }

    


    #content > div {
        padding: 70px 0 120px;
    }

    #content > div > h1 {
        padding-bottom: 40px;
    }

    #content > div > ul {
        position: relative; display: table; width: 100%;
    }

    #content > div > ul > li {
        position: relative; margin-bottom: 100px; display: table; width: 100%
    }

    #content > div > ul > li > img {
        position: absolute;
    }

    #content > div > ul > li > h6 {
        position: absolute; left: 100px; top: 10px;
    }

    #content > div > ul > li > p {
        color: #555555; position: absolute; left: 100px; top:40px;
    }

    footer {
        width: 100%; padding: 80px 0;
    }

    footer > div {
        text-align: center;
    }

    footer > div > h2 {
        max-width: 520px; margin: 0 auto; padding: 40px 0 80px;
    }

    footer > div > span > a {
        font-size: 16px;
    }

    footer > div > p {
        font-size: 12px; padding-top: 30px;
    }

    #obrigado {
        height: 100vh;
    }

    #obrigado > div.obri-left {
        position: absolute; left: 0; top: 0; height: 100vh; width: 50%;
    }

    #obrigado > div.obri-left > div {
        position: absolute; top: 50%; margin: 0 auto; -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0 60px;
    }

    #obrigado > div.obri-left > div > h3 {
        font-size: 40px;
    }

    #obrigado > div.obri-left > div > p {
        padding: 20px 0 40px; font-size: 18px;
    }

    #obrigado > div.obri-right {
        background-image: url(imgs/bg-2.jpg); background-size: cover; background-position: center center; position: relative; width: 50%; height: 100vh; position: absolute; right: 0; top: 0;
    }


    /* 4) FORM 
---------------------------------------------------------------------*/

    input {
        border: solid 1px #E2E2E2; width: 100%; font-size: 16px; padding: 8px; margin-bottom: 20px; color: #555555;
    }

    input::placeholder {
        color: #B1B1B1;
    }

    .custom-select {
        width: 100%; position: relative; margin-bottom: 20px;
    }

    .custom-select select {
        display: none; position: relative;
    }

    .select-selected {
        width: 100%; border-radius: 0px; background-color: #fff; border: 1px solid #E2E2E2 !important; padding: 8px; color: #B1B1B1; font-size: 16px; position: relative;
    }

    .select-selected:after {
        position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #B1B1B1 transparent transparent transparent;
    }

    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #B1B1B1 transparent; top: 7px;
    }

    .select-items div, .select-selected {
        color: #B1B1B1; padding: 8px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer;
    }

    .select-items {
        position: absolute; background-color: #fff; top: 100%; left: 0; right: 0; z-index: 99; border: 1px solid #e2e2e2;
    }

    .select-hide {
        display: none;
    }

    .select-items div:hover, .same-as-selected {
        background-color: #fcfcfc; color: #0071B0; transition: 0.6s all ease;
    }

    #cid_8, #cid_9 {
        width: 47%; float: left;
    }

    #cid_8 {
        margin-right: 6%;
    }

    button {
        width: 100%; text-transform: uppercase; padding: 10px; border: none; font-size: 18px; font-family: 'Raleway', sans-serif; color: #fff; font-weight: 800; cursor: pointer;
    }

    button:hover {
        color: rgba(255, 255, 255, 0.4); background-image: linear-gradient(to right top, #00B6BF, #00A6C0, #0095BF, #3B8DBB, #0071B0); transition: 0.7s all ease;
    }

    /* 5) RESPONSIVO 
---------------------------------------------------------------------*/

    @media only screen and (max-width: 1279px) {
        .grand-container {
            padding: 0 40px;
        }

        .halfscreen {
            max-width: 480px;
        }

        div#form {
            right: 40px;
        }
    }

    @media only screen and (max-width: 1079px) {
        .grand-container {
            padding: 0 20px;
        }

        .halfscreen {
            max-width: 430px;
        }

        div#form {
            right: 20px;
        }

        h1 {
            font-size: 20px;
        }

        h3 {
            font-size: 36px
        }

        h4 {
            font-size: 20px;
        }
    }

    @media only screen and (max-width: 979px) {
        .grand-container {
            padding: 0 40px;
        }

        .halfscreen {
            max-width: inherit; width: 100%;
        }

        h2 {
            font-size: 16px;
        }

        footer > div > span > a {
            font-size: 14px;
        }

        #vitrine {
            background-image: url(imgs/bg-resp.jpg); height: 100vh;
        }

        #vitrine > div {
            height: 100vh;
        }

        #vitrine > div > div.halfscreen#left {
            position: relative; text-align: center; max-width: 520px; margin: 0 auto; top: 40%;
        }

        div#form {
            position: relative; margin: -13% 0px 0; right: 0;
        }

        #content {
            margin-top: 620px;
        }

        #content > div {
            text-align: center; padding: 8% 0 10%;
        }

        #content > div > ul > li {
            margin-bottom: 40px;
        }

        #content > div > ul > li > img {
            position: relative;
        }

        #content > div > ul > li > h6 {
            position: relative; left: 0; top: 0; padding: 14px 0;
        }

        #content > div > ul > li > p {
            position: relative; left: 0; top: 0;
        }

        #obrigado > div.obri-left {
            width: 100%; text-align: center;
        }

        #obrigado > div.obri-right {
            display: none;
        }

        #obrigado > div.obri-left > div > h3 {
            font-size: 28px;
        }

        #obrigado > div.obri-left > div > p {
            font-size: 16px;
        }
    }

    @media only screen and (max-width: 767px) {
        div#form {
            margin: -25% 0px 0;
        }

        #content > div {
            padding: 5% 0 40px;
        }
    }

    @media only screen and (max-width: 479px) {
        div#form {
            margin: -40% 0px 0;
        }

        .grand-container {
            padding: 0 20px;
        }

        #content > div {
            padding: 10% 0 40px;
        }
    }