* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    color: #fff;
}

a:hover {
    color: rgba(235, 235, 235, 0.44);
    border-color: rgba(235, 235, 235, 0.44);
}

body {
    font-family: "Lato", sans-serif;
    background: #2c2c2c;
    color: #ebebeb;
    text-align: center;
}

main {
    min-height: calc(var(--app-height) - 133px);
}

.sign-up-wrapper {
    padding: 40px 0 75px;
}

.sign-up-and-icon {
    position: relative;
    padding: 25px 0;
}

.sign-up-and-icon:before,
.sign-up-and-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(42.3% - 125px);
    border: 1px solid #ebebeb;
}

.sign-up-and-icon:before {
    left: 7.3%;
}

.sign-up-and-icon:after {
    right: 7.3%;
}

.sign-up-text {
    font-size: 28px;
    letter-spacing: 5px;
    margin-right: 10px;
}

.mlist-message {
    font-size: 20px;
    padding: 5px 0 70px;
    letter-spacing: 4px;
}

.plain-ml-wrapper {
    width: 100%;
}

form {
    font-size: 0;
    max-width: 420px;
    width: 81%;
    margin: 0 auto;
}

.message-description {
    font-size: 26px;
    color: #fff;
    text-align: center;
}

.sub-message-description {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 15px 0 35px;
}

.fieldWrap {
    padding-bottom: 30px;
    position: relative;
}

.fieldWrap input,
.fieldWrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #ebebeb;
    background: rgba(235, 235, 235, 0.44);
    border: none;
    border-bottom: 1px solid #ebebeb;
    height: 56px;
    font-size: 18px;
    padding: 0 20px;
    line-height: 55px;
    box-sizing: border-box;
    border-radius: 0;
    outline: none;
    width: 100%;
    font-family: "Lato", sans-serif;
}

.fieldWrap select {
    background: rgba(235, 235, 235, 0.44) url("../img/arrow-down.png") no-repeat
        scroll center right 15px;
    padding-right: 35px;
}

.input-error {
    position: absolute;
    bottom: 5px;
    width: 100%;
    left: 0;
    color: #ff0000;
    font-size: 16px;
    text-align: left;
    padding: 0;
}

input[type="submit"] {
    color: #2c2c2c;
    background: #ebebeb;
    border: 2px solid #ebebeb;
    height: 60px;
    padding: 0;
    line-height: 56px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    font-family: "Lato", sans-serif;
    transition: all 0.5s ease-in-out;
    max-width: 292px;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    border-radius: 100px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

input[type="submit"]:hover {
    color: #ebebeb;
    background: transparent;
}

.fadeOut {
    display: none;
}

.fadeIn {
    display: block;
}

.terms-wrapper {
    padding-bottom: 30px;
    text-align: left;
}

.terms-text {
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    display: inline-block;
}

.terms-text:after {
    content: "+";
    padding-left: 5px;
}

.terms-text.active:after {
    content: "-";
}

.terms-text:hover {
    opacity: 0.5;
}

.terms {
    font-size: 16px;
    color: #ebebeb;
    padding: 15px 0 0;
    display: none;
    line-height: 1.4;
}

.terms a {
    display: inline-block;
    border-bottom: 1px solid #ebebeb;
}

.terms a:hover {
    border-color: rgba(235, 235, 235, 0.44);
}

.terms-message {
    padding: 55px 0 20px;
    font-size: 14px;
    color: #ebebeb;
    line-height: 1.5;
}

.terms-message a {
    color: #ebebeb;
    border-bottom: 2px solid #ebebeb;
}

.terms-message a:hover {
    border-color: rgba(235, 235, 235, 0.44);
}

.thankyou {
    font-size: 20px;
    color: #ebebeb;
    padding: 50px 0;
    text-transform: uppercase;
    letter-spacing: 3px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ebebeb;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #ebebeb;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: #ebebeb;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #ebebeb;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #ebebeb;
    -webkit-box-shadow: 0 0 0px 1000px #808080 inset;
}

footer {
    font-size: 14px;
    padding-bottom: 25px;
    letter-spacing: 1px;
}

.enter-site-wrapper {
    font-size: 16px;
    letter-spacing: 4px;
}

.enter-site-wrapper:after {
    content: "";
    width: 100px;
    height: 1px;
    display: block;
    margin: 25px auto;
    background: #ebebeb;
}

.copyright-text, 
.copyright-links {
    line-height: 1.4;
}


@media only screen and (max-width: 767px) {
    main {
        min-height: calc(var(--app-height) - 152px);
    }

    .sign-up-wrapper {
        padding: 15px 0 55px;
    }
    
    .logo-wrapper {
        width: 90%;
        margin: 0 auto;
    }
    .sign-up-and-icon {
        padding: 20px 0;
    }

    .sign-up-text {
        font-size: 15px;
        margin-right: 5px;
    }

    .sign-up-icon {
        font-size: 0;
    }
    
    .sign-up-and-icon:before, 
    .sign-up-and-icon:after {
        width: calc(50% - 90px);
    }
    
    .sign-up-and-icon:before {
        left: 0;
    }
    
    .sign-up-and-icon:after {
        right: 0;
    }

    .sign-up-and-icon span {
        display: inline-block;
        vertical-align: middle;
    }

    .sign-up-icon svg {
        width: 18px;
        height: 20px;
    }

    .mlist-message {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 3px;
        padding-bottom: 45px;
    }

    input[type="submit"] {
        max-width: 100%;
    }

    .mobile-hide {
        display: block;
        font-size: 0;
    }
}