/**
 * Homepage Hero Section Styles
 * These styles apply ONLY to the homepage hero
 */

/* Only apply these styles on the homepage */
body.home #hero {
   width: 100%;
   height: 800px;
   color: #fff;
   background: #000;
   position: relative;
}

body.home #hero .slide {
   z-index: 1;
   width: 100%;
   height: 800px;
   opacity: .75;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: top center;
}

body.home #hero .background-image-holder {
   display: none;
   width: 100%;
   z-index: 1;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

body.home #hero .background-image-holder img {
   width: 100%;
}

body.home .video-holder {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 1;
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

body.home .video-holder video {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   left: auto !important;
   /* top: -5%;
   left: 0; */
}

body.home .hero-content {
   position: absolute;
   z-index: 100;
   top: 240px;
   width: 920px;
   left: 0;
   right: 0;
   margin: auto;
   color: white;
}

body.home .hero-content h1 {
   font-size: 430%;
   color: white;
   font-weight: 700;
}

body.home .hero-content p {
   font-size: 200%;
   line-height: 1;
}

@media(max-width: 920px) {
    body.home #hero {
        padding: 50px 0 !important;
        box-sizing: border-box !important;
    }
    body.home #hero, body.home #hero .slide {
        width: 100% !important;
        height: auto !important;
    }
    body.home .hero-buttons {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    body.home .hero-buttons a {
        display: block !important;
        width: calc(100% - 30px) !important;
        margin: 0 0 2rem !important;
        position: relative !important;
    }
    body.home .hero-content {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

body.home .hero-buttons {
   display: block;
   position: absolute;
   z-index: 100;
   bottom: 30px;
   width: 920px;
   left: 0;
   right: 0;
   margin: auto;
}

body.home .hero-buttons a {
   width: 28%;
   height: 2em;
   position: relative;
   font-family: adelle-condensed, serif;
   background: #e87d20;
   padding: .75em 2%;
   margin-right: .5%;
   display: inline-block;
   text-align: center;
   font-size: 160%;
   line-height: 1;
   font-weight: 600;
   color: white;
   top: 0;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

body.home .hero-buttons a:after {
   border-bottom: 20px solid #e87d20;
   border-left: 16px solid transparent;
   border-right: 16px solid transparent;
   top: 0px;
   content: "";
   position: absolute;
   left: 50%;
   margin-left: -16px;
   width: 0;
   height: 0;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

body.home .hero-buttons a span {
   margin: 0;
   position: absolute;
   width: 80%;
   top: 50%;
   left: 50%;
   margin-right: -50%;
   transform: translate(-50%, -50%);
}

body.home .hero-buttons a:last-child {
   margin-right: 0;
}

body.home .hero-buttons a:hover {
   background: #0e4e91;
   color: white;
   top: -20px;
}

body.home .hero-buttons a:hover:after {
   top: -20px;
   border-bottom: 20px solid #0e4e91;
}

/* Tagline Section */
#tagline {
   position: relative;
   font-style: italic;
   text-align: center;
   background: #000;
   width: 100%;
   padding: .75em 0;
   margin: 0;
}

#tagline h1 {
   color: white;
   font-size: 125%;
   font-weight: 400;
   font-family: adelle-condensed, serif;
}

/* Below Sections */
#below, #below2 {
   margin: 2.5em auto;
}

#below h2, #below2 h2 {
   font-family: adelle-condensed, serif;
   font-size: 220%;
   font-weight: 600;
   letter-spacing: 1px;
   color: #0e4e91;
   margin-bottom: .5em;
}

#below h2 a, #below2 h2 a {
   color: #0e4e91;
}

/* Video Section */
#video {
   position: relative;
   left: 0;
   width: 710px;
   display: inline-block;
}

/* Watch List */
#watch-list {
   width: 100%;
   height: auto !important;
   background: none;
}

#watch-list article {
   font-family: adelle-condensed, serif;
   font-size: 140%;
   font-weight: 400;
   letter-spacing: 1px;
   margin-bottom: .75em;
   line-height: 1.25;
}

#watch-list article a:before {
   content: "O";
   font-size: 100%;
   font-family: 'trilogyicons';
   position: absolute;
   margin: 1px 0 0 0;
}

#watch-list article a span {
   margin: 0;
   position: relative;
   left: 1.25em;
}

@media only screen and (max-width: 1240px) { 
    .video-holder video { height: 100%; width: initial; }
    #below, #tagline { font-size: 90%; }
    #video { width: 55%; }
    #promo, #watch-list { margin: 0 !important; padding: 0 4% 0 4%; position: relative; right: initial; vertical-align: top; }
}

/* News Feed */
#news {
   position: relative;
   left: 0;
   width: 30%;
   display: inline-block;
   vertical-align: top;
}

/* Social Feed */
#social-feed {
   border-left: 1px #ccc solid;
   position: relative;
   right: 0;
   width: 61%;
   padding-left: 4%;
   margin-left: 4%;
   display: inline-block;
   vertical-align: top;
}

#social-feed #social2 {
   display: inline-flex;
   vertical-align: middle;
   position: relative;
   margin: 0 auto;
}

#social-feed .icons.circle {
   color: white;
   font-size: 20px;
   height: 20px;
   width: 20px;
   line-height: 20px;
}

/* Feed General Styles */
.feed .panel {}

.feed ul {
   list-style: none;
   position: relative;
   margin: 2em 0 0 0;
}

.feed li {
   width: 15px;
   display: block;
   margin-right: 5px;
   float: left;
}

.feed li:last-child {
   margin-right: 0;
}

.feed li a {
   background-color: #d5d5d5;
   height: 15px;
   display: block;
   position: relative;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.feed li:hover a {
   background-color: #f3861c;
}

.feed li[data-active='true'] a {
   background-color: #ff9c00;
}

.feed li:active a {
   background-color: #ff9c00;
}

.feed article {
   width: 100%;
   padding: 0;
   -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

#social-feed.feed article {
   width: 45%;
   margin-right: 5%;
   vertical-align: top;
   display: inline-block;
   overflow: hidden;
}

#social-feed.feed article:last-child {
   margin-right: 0;
}

#social-feed.feed article img {
   float: right;
   margin: 0 0 1em 1em;
}

.feed article:last-child {
   border-bottom: 0;
}

.feed article a {
   display: inline-block;
}

.feed article small {
   font-size: 90%;
   line-height: 1;
   color: #222;
   text-transform: uppercase;
   margin: 0 0 .5em 0;
   -webkit-transition: color .3s ease-in-out;
   -moz-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
   -ms-transition: color .3s ease-in-out;
   transition: color .3s ease-in-out;
}

.feed article:hover small {
   color: #555;
}

.feed article h3 {
   font-size: 190%;
   line-height: 1.1;
   font-weight: 600;
   margin: 0 0 .5em 0;
   color: #e87d20;
   -webkit-transition: color .3s ease-in-out;
   -moz-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
   -ms-transition: color .3s ease-in-out;
   transition: color .3s ease-in-out;
}

.feed article:hover h3 {
   color: #0e4e91;
}

#social-feed.feed article h3 {
   font-size: 140%;
   line-height: 1.3;
   color: #222;
   font-weight: 400;
}

#social-feed.feed article a:hover h3 {
   color: #e87d20;
}

.feed article p {
   font-size: 120%;
   line-height: 1.2;
   color: #222;
   margin-bottom: 0;
   -webkit-transition: color .3s ease-in-out;
   -moz-transition: color .3s ease-in-out;
   -o-transition: color .3s ease-in-out;
   -ms-transition: color .3s ease-in-out;
   transition: color .3s ease-in-out;
}

.feed article:hover p {
   color: #555;
}

.feed article .button {
   margin-top: .5em;
   font-size: 150%;
}

.social-feed-header {
   width: 100% !important;
}

.social-feed-header-label {
   margin: 0;
}

@media only screen and (min-width: 720px) {
   .social-feed-header {
      display: flex;
      align-items: center;
   }
}

@media(min-width: 920px) {
    body.home.admin-bar header.cf {
        top: 82px !important;
    }
}

@media(max-width: 720px) {
    body.home.admin-bar header.cf, header.cf {
       top: 0 !important;
       position: relative !important;
    }
 }