/*===== VARIABLES =====*/
:root {
    --myriad: "myriad-pro", sans-serif;
    --red: #E3173E;
    --lt-grey: #F2F2F2;
    --dk-grey: #313131;
}



/*===== PAGE-WIDE STYLES =====*/
body {
  text-align: left;
  font-family: var(--myriad);
  font-size: 18px;
  color: var(--dk-grey);
  transition: all .5s ease;
}
.red {
    background: var(--red);
}
h1 {
    color: white;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 700;
}
h2 {
    color: white;
    font-size: 36px;
}
h3 {
    font-size: 32px;
    font-weight: 600;
}
a.button {
    background: white;
    border: 2px solid var(--red);
    padding: 10px 50px;
    margin: 0px 20px;
    border-radius: 10px;
    text-transform: uppercase;
    color: var(--red);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all .5s ease;
}
a.button:hover {
    color: white;
    background: var(--red);
    border: 2px solid white;
}



/*===== HEADER AREA STYLES =====*/
header {
    text-align: center;
    background: black;
    border-radius: 0px 0px 30px 30px;
    padding: 0px 4px 4px 4px;
    margin-bottom: 30px;
}
.header-inner {
    border-radius: 0px 0px 26px 26px;
    border-style: none solid solid solid;
    border-color: white;
    border-width: 6px;
}
header h1 {
    margin: 40px 20px
}



.logo {
    text-align: center;
    margin-bottom: 30px;
}
.logo img {
    width: 100%;
    max-width: 380px;
    margin: 0px auto;
}
.hero {
    margin-bottom: 30px;
}
.hero img {
    width: 100%;
}
.identifier {
    text-align: center;
    background: black;
    border-radius: 30px;
    padding: 4px;
    margin-bottom: 30px;
}
.identifier-inner {
    border-radius: 26px;
    border-style: solid;
    border-color: white;
    border-width: 6px;
}
.identifier h2 {
    margin: 30px 20px;
}


/*===== CALLOUT AREA STYLES =====*/
.callouts {
    background: var(--lt-grey);
    border-radius: 30px;
    text-align: center;
    margin-bottom: 40px;
    padding: 60px  20px;
}
.callouts .left {
    border-right: 1px dotted var(--dk-grey);
}
.callout {
    
    padding: 40px 90px;
}
i {
    font-size: 50px;
    width: 100%;
    text-align: center;
    color: var(--red);
}
.callout p {
    text-align: left;
    margin-bottom: 50px;
}
.col-12 .callout p {
    text-align: center; 
}
@media (max-width: 992px) {
    .callouts .left {
        border-right: none;
    }
    .col-12 a.button {
        margin: 10px 20px;
    }
}



/*===== FOOTER AREA STYLES =====*/
footer, .disclosure {
    background: var(--dk-grey);
    color: white;
    border-radius: 30px 30px 0px 0px;
    margin-top: 40px;
    text-align: left;
}
footer p {
    text-align: left;
}
footer a {
    text-decoration: underline;
    color: white;
    display: block;
}
footer img {
    width: 100%;
    max-width: 250px;
    margin: 0px auto;
    margin-bottom: 30px;
    margin-top: 30px;
}