/*************************\
  Standard Elements
\*************************/

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: 'Varela Round', arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #4a4a4a;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: #ff0000;
}

a:hover {
    color: #ff0000;
}

hr {
    margin: 3rem 0;
    clear: left;
    width: 100%;
    border: none;
    border-top: 1px solid #505a64;
    height: 1px;
}

img {
    max-width: 100%;
}

nav ul {
    padding: 0;
}

    nav li {
        display: inline-block;
    }

    nav li:after {
        content: ' | ';
    }

    nav li:last-of-type:after {
        content: '';
    }

label {
    font-weight: normal;
    font-size: 14px;
}

option:disabled {
    color: #333333;
}

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
   color: #333333;
   opacity: 1;
}

[placeholder]:focus::-webkit-input-placeholder {
   color: transparent;
}

h1 {
    font-size: 40px;
    font-weight: normal;
    margin: 0 0 30px 0;
    color: #4a4a4a;
}

h2 {
    font-size: 20px;
    line-break: 26px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #4a4a4a;
}

h3 {
    font-size: 16px;
    line-break: 20px;
    font-weight: bold;
    margin: 30px 0 10px 0;
    color: #4a4a4a;
    text-transform: uppercase;
}



/*************************\
  Header
\*************************/

.header {
    background: #f7f4d3;
    padding: 20px;
    min-height: 200px;
}

.banner {
    position: absolute;
    top: -10px;
    right: -5px;
}



/*************************\
  Structure
\*************************/

.site {
    overflow: hidden;
    padding: 10px 10px 0 0;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}


/*************************\
  Main page content
\*************************/

.main {
    overflow: hidden;
}

#coppa_email-wrapper {
    display: none;
}

.benefits-wrapper {
    padding-right: 30px;
}

.benefits {
    list-style: none;
    margin: 0;
}

.benefits li {
    color: #4a4a4a;
    margin-bottom: 5px;
}

.benefits i {
    margin-right: 10px;
    color: #cdb656;
}

.disclaimer {
    margin-top: 30px;
}

.disclaimer .checkable__text,
.disclaimer .error-message {
    margin-left: 30px;
}

.disclaimer label {
    font-size: 14px;
}



/*************************\
  Footer
\*************************/

.footer {
    margin: 30px auto;
    text-align: center;
    color: #808080;
    font-size: 1.6rem;
    text-transform: uppercase;
}

    .footer a {
        color: inherit;
    }



/*************************\
  Substitutes & Overrides
\*************************/

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select,
button {
    background: transparent;
    color: #808080;
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    border-radius: 0;
}

select {
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0 10px;
    -webkit-border-radius: 0;
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus {
    border: 1px solid #be7878;
}

input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="text"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="password"]:disabled,
select:disabled {
    color: #ccc;
}

input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    color: #fff;
    background-color: #ff0000;
    border: none;
    margin-top: 40px;
}

input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
input[type="submit"].button-primary:active,
input[type="reset"].button-primary:active,
input[type="button"].button-primary:active,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
    color: #fff;
    background-color: #ff0000;
    border: none;
}

input[type="submit"], input[type="reset"], input[type="button"] {
    display: inline-block;
    height: 45px;
    padding: 0 20px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 45px;
    letter-spacing: none;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: #ff0000;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 300px;
}

select {
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

.select {
    position: relative;
}

label.checkbox,
label.radio {
    color: #4a4a4a;
    text-transform: initial;
}

.dropdown {
    position: absolute;
    right: 20px;
    top: 35px;
    cursor: pointer;
    pointer-events: none;
}





/*************************\
  Helpers
\*************************/

.top-margin {
    margin-top: 10px;
}

.mobile {
    display: none;
}

.smallprint {
    font-size: 1.3rem;
    margin-top: 3rem;
}

.disabled {
    color: #808080;
}




/*************************\
  Media Queries
\*************************/

@media only screen and (max-width: 1160px) {

    .container,
    .site,
    .main,
    .intro {
        width: 100%;
    }

}

@media only screen and (max-width: 670px) {

    h1 {
        font-size: 30px;
    }

}

@media only screen and (max-width: 550px) {

    .eight.columns.benefits-wrapper {
        padding: 0;
        width: 100%;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: initial;
    }

    .birthday-wrapper .three.columns,
    .birthday-wrapper .six.columns {
        width: 32%;
        margin: inherit;
    }

    .birthday-wrapper .three.columns {
        margin-right: 2%;
    }

    .checkbox-wrapper {
        margin-bottom: 10px;
        /* padding: 5px;
        background: aliceblue;
        border-bottom: 2px solid blue; */
    }
}




/*************************\
  Form Errors
\*************************/

.error-message {
    max-height: 0;
    font-size: 1.2rem;
    color: #d40a51;
    text-align: left;
    overflow: hidden;
    transition: all 0.3s ease-in;
}

.error-message.show {
    max-height: 40px;
    margin-bottom: 1rem;
}

input[type="text"].error,
input[type="email"].error,
input[type="select"].error,
textarea.error,
select.error {
    border: 1px solid #d40a51 !important;
    margin-bottom: 0.5rem;
}