/* Base Code */
html { -webkit-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; }
.visuallyHidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
    .visuallyHidden.focusable:active, .visuallyHidden.focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: fixed;
      width: 100%;
      padding:10px;
      top:0; left:0;
      z-index:8000;
      background:#d0b57c;
      text-align:center;
      -webkit-box-shadow:0 0 3px 2px rgba(0,0,0,.5);
              box-shadow:0 0 3px 2px rgba(0,0,0,.5);
    }
    header .visuallyHidden.focusable:active, header .visuallyHidden.focusable:focus {
        color: #000;
        font-size: 20px;
        font-weight: 600;
        text-transform: uppercase;
        background: #cba135;
    }
.svg-legend { position: absolute; top: -999em; width: 0; height: 0; }
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

/*--------------- General ---------------*/

body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; }

h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', serif;
}
a { font-family: 'Open Sans', sans-serif; }

p { font-family: 'Playfair Display', serif; }

/* Buttons */
.btnWrapper { width: 100%; text-align: center; margin: 5px 0; }
.btn {
    color: #fff;
    width: 100%;
    max-width: 200px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 10px;
    display: block;
    border-radius: 5px;
    border: 3px solid #E80206;
    background: #E80206;
    text-decoration: none;;
}
    .btn:hover, .btn:focus { color: #000; background: transparent; }
    .btn.jumpDown {
        width: 60px;
        height: 60px;
        display: none;
        position: absolute;
        bottom: 90px;
        right: 0;
        left: 0;
    }
        .btn.jumpDown:after {
            content: " ";
            width: 20px;
            height: 20px;
            margin: auto;
            border-right: 5px solid #fff;
            border-bottom: 5px solid #fff;
            -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                    transform: rotate(45deg);
            position: absolute;
            bottom: 7px;
            right: 0;
            left: 0;
            top: 0;
        }
        .btn.jumpDown:hover, .btn.jumpDown:focus { background: #fff; }
        .btn.jumpDown:hover:after, .btn.jumpDown:focus:after { border-color: #000; }

@media (min-width:60em) {.btn.jumpDown { display:inline-block; } }

/*---------- Accents ----------*/
.mobile { width: auto; height: auto; display: block; }
    .mobile.logo { width: auto; height: 65px; opacity: 1; visibility: visible; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.desk { width: 0; height: 0; display: none; }
    .desk.logo { width: 0; height: 0; opacity: 0; display: block; visibility: hidden; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

.header.scroll .logo { height: 64px; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

@media (min-width:48em) {
    .mobile { width: 0; height: 0; display: none; }
        .mobile.logo { width: 0; height: 0; opacity: 0; display: block; visibility: hidden; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
        .header.scroll .mobile.logo { height: 0; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
    .desk { width: auto; height: auto; display: block; }
        .desk.logo { width: auto; height: 115px; opacity: 1; visibility: visible; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
        .header.scroll .desk.logo img { height: 60px; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
}

/* Consideration Star */
.star { font-size: 14px; }

/*--------------- Site Code ---------------*/
/*---------- Body ----------*/
body.home { 
    background-color: #000;
    background-image: url(../images/consideration3.jpg);
    background-position: center 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}
/* @media (min-width:48em) {
    body.home { background-position: center 160px; }
}
@media (min-width:72em) {
    body.home { background-position: center 115px; }
} */
/*---------- Header ----------*/
.header {
    z-index: 1000;
    padding: 10px;
    position: fixed;
    right: 0; left: 0; top: 0;
    background: #fff;
    border-bottom: 1px solid #ccc;
    -webkit-box-shadow: 0 0 9px -1px #a9a9a9;
            box-shadow: 0 0 9px -1px #a9a9a9;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
    .header.scroll { height: 80px; background: #fff; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

@media (min-width:48em) {
    .header.scroll { height: auto; }
    .header.scroll .desk.logo img { height: 60px; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
}
    
.logo { height: auto; text-align: center; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
    .logo img { width: auto; height: 100%; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

/*---------- Main ----------*/
.mainContent { margin: 0 0 150px; background: transparent; position: relative; z-index: 100; }
/* @media (min-width:48em) {
    .mainContent { margin: 135px 0 150px; }
} */
.section { background: #fff; }

.banner {
    padding-bottom: 41%;
    position: relative;
    background: transparent;
}

.info { padding: 0 0 10px; position: relative; }
.info .title {
    color: #fff;
    font-size: 28px;
    letter-spacing: .5px;
    margin: 0 0 15px;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: #000;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
}
    .info .title span { padding: 0 10px; display: inline-block; }
    .info .infoContent .caption { 
        font-size: 24px;
        text-align: center;
        line-height: 1;
        margin: 0;
        padding: 15px 25px;
    }
    .info .infoContent p {
        font-size: 18px;
        font-weight: 500;
        padding: 0 25px 10px;
    }

.videos { 
    display:-webkit-box; 
    display:-ms-flexbox; 
    display:flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between; 
    position: relative; 
    background: #fff; 
}
    .videos .videoWrapper { width: 90%; margin: 0 auto; padding-top:0; }

@media (min-width: 48em) {
    .videos .videoWrapper { width: 32%; padding-bottom: 20.25%; }
}

/*---------- Footer ----------*/
.footer { width: 100%; color: #fff; background: #000; position: fixed; z-index: 1; bottom: 0; }
    .footer .title { font-size: 28px; text-align: center; }
.followMe { display: none; }
    .followMe.scroll { display: block; }
.socialWrapper {
    width: 50%;
    margin: 0 auto 25px;
    padding: 0 0 15px;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
    .socialWrapper a { display: inline-block; }
    .socialWrapper a .icon { fill: #fff; width: 2em; height: 2em; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
    .socialWrapper a:hover .icon, .socialWrapper a:focus .icon { fill: #cba135; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
    .socialWrapper a:hover .visuallyHidden.hover, .socialWrapper a:focus .visuallyHidden.hover {
        color: #fff;
        width: auto;
        height: 20px;
        margin-top: 5px;
        clip: initial;
        display: inline-block;
    }
        .socialWrapper .facebook a:hover .visuallyHidden.hover, 
        .socialWrapper .facebook a:focus .visuallyHidden.hover { margin-left: -20px; }
        .socialWrapper .instagram a:hover .visuallyHidden.hover, 
        .socialWrapper .instagram a:focus .visuallyHidden.hover { margin-left: -20px; }
        .socialWrapper .twitter a:hover .visuallyHidden.hover, 
        .socialWrapper .twitter a:focus .visuallyHidden.hover { margin-left: -10px; }