@charset "UTF-8";
/* CSS Document */


textarea, input {
    -webkit-appearance: none;
    border-radius: 0;
}

.group {
    position: relative;
    margin-bottom: 15px;
    margin-top: 10px;
    width: 98%;
}

.inputMaterial {
    font-size: 16px;
    padding: 25px 3% 15px 3%;
    display: block;
    width: 94%;
    border: none;
    border-bottom: 1px solid #757575;
}

input[type=email] {
    width: 80%;
}


.boxLogin .group {
    position: relative;
    width: 30%;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
    margin-top: 15px;
}

.boxLogin button {
    height: 61px;
}


.formMailing .inputMaterial {
    background-color: #1c1f24;
    background-color: #FFFFFF;
}

.inputMaterial:focus {
    outline: none;
}

.inputMaterial ~ label {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 3%;
    top: 20px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    font-family: 'Raleway', sans-serif;
}

.inputMaterial:focus {
    outline: none;
}

.inputMaterial:required:valid {
    border-color: #14c0de;
}

    .inputMaterial:required:valid ~ label,
    .inputMaterial:required:invalid:not(:placeholder-shown) ~ label {
        top: 5px;
        font-size: 11px;
        color: #14c0de;
    }

.inputMaterial:required:invalid:not(:placeholder-shown) {
    border-color: crimson;
}

    .inputMaterial:required:invalid:not(:placeholder-shown) ~ label {
        color: crimson;
    }

    .inputMaterial:required:invalid:not(:placeholder-shown) + .validation {
        opacity: 1;
    }


button {
    height: 63px;
    width: 100%;
    margin-top: 20px;
    background-size: 30px auto;
    background-color: #0ca2bb;
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 18px;
    color: #FFFFFF;
    font-weight: 600;
    opacity: 0.5;
    border-radius: 10px !important;
}


.boxLogin button {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNDc5Ljc1NCA0NzkuNzU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NzkuNzU0IDQ3OS43NTQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDY4LjE0NiwyNS4wOTJIMTI5LjYzOGMtNi40MTEsMC0xMS42MDgsNS4xOTgtMTEuNjA4LDExLjYwOGMwLDYuNDEzLDUuMTk3LDExLjYxLDExLjYwOCwxMS42MWgzMjYuODk5djM4My4xMzNIMTI5LjYzOCAgICBjLTYuNDExLDAtMTEuNjA4LDUuMTk2LTExLjYwOCwxMS42MTFjMCw2LjQwOCw1LjE5NywxMS42MDYsMTEuNjA4LDExLjYwNmgzMzguNTA4YzYuNDEsMCwxMS42MDctNS4xOTgsMTEuNjA3LTExLjYwNlYzNi43MDEgICAgQzQ3OS43NTQsMzAuMjkxLDQ3NC41NTcsMjUuMDkyLDQ2OC4xNDYsMjUuMDkyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNzYuNzkzLDMxMC40MWMtNC41MzUsNC41MzYtNC41MzUsMTEuODgzLDAsMTYuNDE5YzIuMjY4LDIuMjY3LDUuMjQsMy40LDguMjExLDMuNGMyLjk2OSwwLDUuOTM4LTEuMTM1LDguMjA2LTMuNCAgICBsNzEuNTg5LTcxLjU4OGM0LjUzNi00LjUzNSw0LjUzNi0xMS44ODUsMC0xNi40MTdsLTcxLjU4OS03MS41OThjLTQuNTM0LTQuNTM4LTExLjg4Mi00LjUzOC0xNi40MTcsMCAgICBjLTQuNTM1LDQuNTI4LTQuNTM1LDExLjg4MSwwLDE2LjQxNGw1MS43NzEsNTEuNzgxSDExLjYxQzUuMTk5LDIzNS40MiwwLDI0MC42MiwwLDI0Ny4wM2MwLDYuNDEyLDUuMTk5LDExLjYxMSwxMS42MSwxMS42MTEgICAgaDIxNi45NTRMMTc2Ljc5MywzMTAuNDF6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==)
}


.inputMaterial:required:valid ~ button {
    opacity: 1;
    cursor: pointer;
}



/* BOTTOM BARS ================================= */
.bar {
    position: relative;
    display: block;
    width: 100%;
}

    .bar:before, .bar:after {
        content: '';
        height: 3px;
        width: 0;
        bottom: 0px;
        position: absolute;
        background: #14c0de;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }

    .bar:before {
        left: 50%;
    }

    .bar:after {
        right: 50%;
    }
/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
    width: 50%;
}


@media (max-width: 768px) {
    .inputMaterial {
        font-size: 16px;
        padding: 22px 3% 12px 3%;
    }

    button {
        height: 57px;
    }


    .boxLogin {
        position: relative;
        padding-left: 2%;
        padding-right: 2%;
    }

        .boxLogin .group {
            width: 95%;
            margin-bottom: 0px;
            margin-top: 10px;
        }

        .boxLogin button {
            height: 55px;
        }

    .pdfRed {
        width: 20%;
        height: 50px;
        max-height: 100%;
        max-width: 100%;
    }
}