body {
    text-align: center;
    background-color:#000306;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    background-image: url('../img/circuit-background_dark_repeat.webp');
    background-repeat: repeat-x;
    margin-top:0;
}
a {
    text-decoration: none;
    color:#fff;
}
h1 {
    font-weight: 100;
    font-size: 38px;
    text-align: center;
    margin-top: 40px;
}
.shell {
    max-width:1640px;
    min-width:640px;
    margin: 0 auto;
}
.wrapper {
    max-width:1600px;
    min-width:600px;
    margin: 0 20px;
    position: relative;
}
.shell.hero {
    max-width:1230px;
    min-width:640px;
    margin: 0 auto;
}
.wrapper.hero {
    max-width:1200px;
    min-width:600px;
    margin: 0 20px;
    position: relative;
}
.top-stripe {
    width:100%;
    height: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.main-cntr {
    max-width:1200px;
}
.main-nav {
    width:100%;
    height:150px;
    margin: 15px 0 50px 0;
}
.header-logo {
    width:46%;
    float:left;
}
.unleisched-logo {
    text-align: center;
    padding-top:1.5%;
}
img.unleisched-logo {
    width:80%;
    height:auto;
    max-width:600px;
    padding-left:4%;
    padding-right:4%;
    padding-bottom:20px;
    margin-top:20px;
}
img.unleisched-logo.small {
    width:25%;
    max-height: 65px;
    width: auto;
    margin-top: 0;
}
img.comics-logo {
    max-width:150px;
    height:auto;
}
.media-elements {
    width:27%;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100;
    float:left;
    margin-top:66px;
    box-sizing: border-box;
}
.media-elements a {
    padding: 0 20px;
}
.media-elements.left {
    text-align: right;
}
.media-elements.right {
    text-align: left;
}
.media-module {
    display:inline-block;
    padding: 10px 2%;
    font-size: 20px;
}
.media-module:hover {
    color:rgb(37, 106, 255);
}
.media-module.on {
    color:rgb(37, 106, 255);
}
.coming-soon {
    padding-top:2%;
    color:#555;
    font-size: 20px;
}
.section-cntr {
    width:100%;
    min-height:800px;
    margin-top:80px;
}
.content-row {
    padding-top:20px;
}
.content-module {
    background-color:rgb(71, 75, 80);
    width:330px;
    height:200px;
    display: inline-block;
    margin-left:2%;
}

.content-module img {
    width:330px;
    height:auto;
    border: 2px #dde5f7 solid;
}
.content-module.movie {
    height:185px;
    margin-bottom:100px;
}
.content-module.game {
    margin-bottom:140px;
}
.carousel-nav {
    width:100%;
    height: 50px;
    position: relative;
    top: -308px;
    text-align: right;
}
.carousel-nav .button {
    height: 50px;
    width: 50px;
    background-color: rgba(227, 227, 227, 0.25);
    border-radius: 50%;
    display: inline-block;
    border: 3px solid #979ba0;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 220%;
    font-size: 22px;
    box-shadow: 0 0 15px 4px rgba(0,0,0,0.35);
    transition: border 0.15s ease-in;
}
.carousel-nav .button:last-of-type {
    /* margin-right: 50px; */
}
.carousel-nav .button:hover {
    cursor: pointer;
    border: 3px solid #fff;
}
.carousel-dots {
    width:100%;
    height: 15px;
}
.carousel-dots .dot {
    height: 10px;
    width: 10px;
    background-color: rgba(227, 227, 227, 0.25);
    border-radius: 50%;
    display: inline-block;
}
.carousel-dots .dot.on {
    background-color: #c9e5ff;
}
.hero-section {
    width:100%;
    min-height:250px;
    text-align: left;
    padding-top:20px;
    white-space: nowrap;
    overflow: hidden;
    /* padding-left:7.5%;
    padding-right:7.5%; */
}
.hero-cntr {
    width:95%;
    max-width:1200px;
    min-height:550px;
    margin-top:20px;
    margin:0 auto;
    border-radius: 15px;
    background-color: #22262B;
    text-align: center;
    display: inline-block;
    margin: 0 30px;
    position: relative;
    left: 0px;
    transition: left 1s ease-in-out;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0.9;
    border: 1px solid #363c45;
    background-repeat: no-repeat;

}
.hero-cntr.comic {
    background-image: url('../img/comic-hero-bg.webp');
}   
.hero-cntr.spook1 {
    background-image: url('../img/spookhouse1-cover.webp');
    background-size: 63%;
    background-position: left center;
    background-position-x: 10px;
    background-blend-mode: lighten;
}
.hero-cntr.spook2 {
    background-image: url('../img/spookhouse2-cover.webp');
    background-size: 100%;
    background-position: left;
}
.hero-cntr.santa-ride {
    background-image: url('../img/hero2-cover-santa-wild-ride.webp');
    background-size: 100%;
    background-position: left;
}
.hero-cntr.full {
    max-width: 100%;
}
.hero-cntr .content-cntr {
    max-width:1000px;
    width:100%;
    height:100%;
    margin: 0 auto;
    min-height: 550px;
}
.hero-cntr .content-cntr .left {
    width:55%;
    height:100%;
    float:left;
}
.hero-cntr .content-cntr .left img {
    margin:0 auto;
    width: 90%;
    margin-top:10%;

}
.hero-cntr .content-cntr .right {
    width:45%;
    height:100%;
    float:left;
}
.hero-cntr h1 {
    margin-top:10px;
}
.hero-cntr .inner {
    margin-top: 80px;
    padding:20px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 15px;
    padding-bottom: 30px;;
}
.hero-cntr .title {
    text-align: left;
}
.hero-cntr .sub-title {
    text-align: left;
}
.hero-cntr .cta {
    margin-top: 35px;
    background-color: #0486ff;
    padding: 16px;
    border-radius: 12px;
    max-width: 220px;
}
.hero-cntr .cta.second, .cta.first {
    margin-top: 35px;
    background-color: #0486ff;
    padding: 16px;
    border-radius: 20px;
    min-width: 150px;
    float: left;
    text-align: center;
    font-size: 20px;
    color: white;
}
.hero-cntr .cta.first {
    margin-left: 20px;
    background-color: #ffb804;
    color: black;
}
.hero-cntr .cta-cntr {
    margin-top: 70px;
    margin-left:60px;
}
.hero-cntr .cta-cntr .cta {
    border-radius: 35px;
    min-width: 165px;
    
}
.hero-cntr .cta-cntr .cta.second {
    background-color:rgba(24 24 71 / 36%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid #7433ff;
    color:#ffffff;
}
.hero-cntr .cta-cntr .cta.first {
    background: linear-gradient(90deg, rgba(255,5,245,1) 0%, rgba(121,43,229,1) 52%, rgba(17,149,219,1) 100%);
    color: #fff;
    border: 2px solid #3374ff;
}
.hero-cntr .cta-cntr .cta:hover {
    cursor: pointer;
}
.hero-cntr .cta-cntr .cta.second:hover{
    border: 2px solid #e29fff;  
}
.hero-cntr .cta-cntr .cta.first:hover{
    border: 2px solid #ffdcfc;  
}
.hero-cntr .cta.single {
    float:right;
    margin-right: 45px;
}
.hero-cntr .poster-cntr {
    width:300px;
    height:auto;
    float:left;
    margin-top:80px;
}
.hero-cntr .meta-data-cntr{
    width: 555px;
    height: auto;
    float: left;
    text-align: left;
    padding-left: 20px;
    color: black;
}
.hero-cntr.spook1 .meta-data-cntr{
    width: 50%;
    height: auto;
    float: right;
    position: relative;
    right: 0px;
    text-align: left;
    padding-left: 20px;
    color: black;
    padding-top: 20px;
}
.hero-cntr.spook1 .meta-data-cntr p{
    width: 80%;
    color: #fff;
    text-align: left;
    /* word-break: break-all; */
    white-space: normal;
    margin-left: 60px;
    text-shadow: rgba(0,0,0,0.5) 0  4px 4px
}
.hero-cntr .meta-data-cntr .img-cntr {
    height: 170px;
    overflow: hidden;
}
.hero-cntr.spook2 .meta-data-cntr .img-cntr,
.hero-cntr.santa-ride .meta-data-cntr .img-cntr{
    height:222px;
}
.hero-cntr .meta-data-cntr img {
    width: 50%;
    height: auto;
    margin-top:80px;
}
.hero-cntr.spook1 .meta-data-cntr img {
    width: 100%;
    height: auto;
    margin-top:20px;
    margin-left:20px;
    text-align: left;
}
.hero-cntr .meta-data-cntr .sub-title {
    font-size: 28px;
    font-weight: 600;
    margin-top: 20px;
}
.hero-cntr .meta-data-cntr .by-line {
    font-size: 20px;
    font-weight: 400;
}
.hero-cntr .comic-logo-cntr {
    width:125px;
    float:left;
}
.hero-cntr .comic-logo-cntr img {
    width:102px;
    height: auto;
}
.content-ribbon {
    /* width:100%; */
    min-height:250px;
    text-align: center;
    padding-left:5%;
    padding-right:5%;
}
.content-ribbon-cntr {
    /* max-width:90%; */
    margin-top:60px;
}
.content-ribbon-cntr .content-module {
    margin:1%;
    position: relative;
}
.content-ribbon-cntr .content-module .content-meta {
    position: absolute;
    float: left;
    bottom: 0;
    width: 100%;
    padding: 2%;
    box-sizing: border-box;
    background-color: rgba(0,0,0,0.5);
    text-align: left;
}
.content-ribbon-cntr .content-meta .content-type  {
    font-weight: bold;
    font-size: 12px;
    margin-bottom:2px;
}
.footer-bg {
    background-image: url('../img/circuit-background_dark_repeat.webp');
    background-repeat: repeat-x;
    height:800px;
    padding-top:50px;
    margin-top:-250px;
    transform: rotate(180deg);
    position: relative;
    z-index: -10;
    background-position-y: -250px;
}
.footer {
    padding-top: 80px;
    padding-bottom:20px;
    margin-top:40px;
    height:100%;
    height:150px;
    margin-top: -240px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top:1px solid#02101c;
}
.divider {
    width:90%;
    margin-left:5%;
    margin-right:5%;
    height:1px;
    border-top:0.25px solid rgb(49, 49, 49);
    margin-bottom:30px;
}
.footer-img {
    width:20%;
    height:auto;
}
.copyright-cntr {
    color:#8c8c93;
}
/* -- Clear Fix -- */
.cf:before,
.cf:after {
    content: "";
    display:table;
}
.cf:after {
    clear: both;
}


/* -- Responsive Styles --*/

@media screen and (max-width: 1305px) {
    img.unleisched-logo {
        padding-left: 3%;
        margin-top:54px;
    }
}
@media screen and (max-width: 1111px) {
   .comic-logo-cntr {
    display: none;
   }
   .hero-cntr {
    padding-bottom: 80px;
    background-size: cover;
    min-height: 1000px;
    padding-top:0;
   }
   .hero-cntr.spook1 {
    background-size: 100%;
   }
   .hero-cntr.spook2 {
    background-size: 140%;
   }
   .hero-cntr .content-cntr {
    width:100%;
    position: absolute;
   }
   .hero-cntr .cta-cntr {
    margin-left: 0;
    text-align: center; 
   }
   .hero-cntr.spook1 .meta-data-cntr {
    width:100%;
   }
   .hero-cntr .meta-data-cntr .img-cntr {
    width: 100%;
    height: 70%;
   }
   .hero-cntr.spook2 .meta-data-cntr .img-cntr {
    height: 398px;
   }
   .hero-cntr.spook1 .meta-data-cntr img{
    width:100%;
    height:auto;
   }
   .hero-cntr.spook1 .meta-data-cntr p {
    font-size: 26px;
    text-align: center;
    margin-top: 350px;
   }
   .hero-cntr .poster-cntr {
    width: 100%;
    float: none;
    text-align: center;
   }
   .hero-cntr .poster-cntr img {
    display: inline-block;
   }
   .hero-cntr .meta-data-cntr {
    width: 100%;
    float: none;
    text-align: center;
   }
   .hero-cntr .meta-data-cntr img {
    display: inline-block;
   }
   .hero-cntr .sub-title {
    margin-top:40px !important;
   }
   .hero-cntr .by-line, 
   .hero-cntr .sub-title {
    text-align: center;
    font-size: 45px !important;
   }
   .hero-cntr .cta.second, .cta.first, .hero-cntr .cta.single {
    display: inline-block;
    float: none;
    font-size: 30px;
   }
   .meta-data-cntr .img-cntr {
     height:100% !important;
   }
}