@charset "UTF-8";
/* CSS Document for Bard Offsite2 */

body { margin: 0px; padding: 0px; font-family: "Source Sans Pro", "SourceSans", Helvetica, sans-serif; font-size: 18px; line-height: 36px; color: #222; text-align: left; }
body a:link, a:visited { color:#222; text-decoration: underline; }
body a:hover, a:active { color:#222; text-decoration: underline; }
h1 { font-family: "Josefin Sans", Arial, sans-serif !important; font-weight: 700; color:#FFF; font-size: 2.3em; line-height: 46px; text-align: center; }
h2 { font-family: "Josefin Sans", Arial, sans-serif !important; font-weight: 700; color:#ad1a1f; font-size: 1.8em; line-height: 36px; text-align: center; letter-spacing: -1px; margin: 15px auto; }
h3 { font-family: "Josefin Sans", Arial, sans-serif !important; font-weight: 700; color:#FFF; font-size: 1.8em; line-height: 36px; text-align: left; margin: 0; padding: 0;}
.clearout { clear: both; line-height: 1px; }

#supershell { position: relative; width: 100%; display: block; }
header.fixed { postion: fixed; width: 100%; height: 30px; margin: 0; padding: 10px; background: #222; }
main { position: relative; width: 100%; display: block;}

/* ---------------------------- DESKTOP STYLES ------------------------ */

    .hero { position: relative; width: 100%; height: 570px; margin: 0px auto; padding: 0; background: #222; overflow: hidden; }
    .hero img { width: 100%; height: auto; }
    .hero .logo { position: absolute; top: 5%; padding: 0 40%; }
    .hero .title {position: absolute; bottom: 20%; width: 80%; padding: 0 10%; text-align: center; color: #FFF; }

    .content { position: relative; width: 90%; max-width: 1100px; margin: 50px auto; display: block;}
    .content .intro { position: relative; width: 90%; max-width: 1100px; margin: 0px auto; display: block;}
    .content .text { position: relative; width: 100%; text-align: center; display: block; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; margin: 25px auto; padding: 25px auto; }
    .content .text h2 { text-align: center; color: #222; display: block; margin: 25px auto 10px auto; }
    .content .text .table { position: relative; display: block; width: 100%; height: 200px; margin: 0 0 25px 0; }
    .content .text .table .column { position: relative; display: inline; float: left; width: 18%; margin: 0 3.5%; padding: 0 0 20px 0; text-align: left;}

    .heroine { position: relative; width: 100%; height: 480px; max-height: 480px; margin: 30px auto; padding: 0; background: #222; overflow: hidden;}
    .heroine .widevideo {position: relative; margin: 0; padding: 0; width: 100% !important; height: 100%; overflow: hidden; z-index: 2;}
    .heroine .widevideo iframe { position: absolute; width: 100% !important; height: 56.25vw; max-width: 2500px; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0; margin: 0 auto 0 auto; z-index: 1; overflow: visible;}

    .heroine .card { position: absolute; left: 10%; top: 100px; width: 25%; padding: 1%; color: #FFF; z-index: 3; background:url(images/80black.png) repeat;}
    .heroine .video { position: absolute; right: 10%; top: 170px; width: 25%; z-index: 3; }
    .heroine .video iframe { width: 100%; height: 100%; min-height: 200px;}

    img.icon { display: inline; float: left; margin: 15px 10px 15px 0; }
    .caption { display: block; line-height: 22px; margin-top: 15px; }
    .column>.caption {color:#737373;}

/* ---------------------------- TABLET STYLES ------------------------ */

@media only screen and (min-width: 801px) and (max-width: 1000px) {
    .hero img { width: auto; height: 100%; }
    .content .text .table { height: 250px; margin: 0 0 25px 0; }
    .content .text .table .column { width: 20%; margin: 0 2.5%; }
    .heroine .widevideo {position: relative;}
    .heroine .card { width: 40%;}
}

/* -------------------------------------------- MOBILE ONLY  STYLES ------------------------------------ */
@media screen and (max-width: 800px) {
    .hero img { width: auto; height: 100%; }
    .hero .logo { position: absolute; top: 5%; padding: 0 32%; }
    .hero .title {position: absolute; bottom: 10%; width: 80%; padding: 0 10%; text-align: center; color: #FFF; }
    .content { position: relative; width: 100%;}
    .content .intro { position: relative; width: 90%;}
    .content .text { position: relative; width: 90%; border-bottom: none; }
    .content .text .table { position: relative; display: block; width: 100%; height: auto; margin: 0 0 20px 0; }
    .content .text .table .column { position: relative; display: block; float: none; width: 100%; height: auto; margin: 0 0 30px 0; padding: 0 0 30px 0; text-align: left; border-bottom: 1px solid #dadada; padding-bottom: 20px; overflow: visible; clear:both;} 
    .content .text .table .column br { display: none; } 
    .heroine { position: relative; display: block; width: 100% !important; height: 800px; max-height: 800px; margin: 30px auto; padding: 0; background: #000; overflow: visible; }
    .heroine .widevideo { display: none; }
    .heroine .widevideo iframe { display:none; }
    .heroine .card { position: relative; left: 0%; width: 80%; margin: 20px auto 10px auto; padding: 0%; color: #FFF; z-index: 3;}
    .heroine .video { position: relative; right: 0%; width: 80%; margin: 10px auto 20px auto; z-index: 3; }
    .heroine .video iframe { width: 100%; height: 100%; min-height: 200px;}
}