body {
    margin:0;
    padding:0;
    letter-spacing: 1;

    color: white;
    background-color: #1b1c23;
}
* {
     /*border: 1px solid #d01b21;*/
      margin:0;
    padding:0;
}
 
 
    .video-description, .meta, .inner {
                letter-spacing: 1 !important;
 
    } 

.paddingH {
    padding: 40px 0px;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

a {
    color:white;
    text-decoration: none;
}
.text-center {
    text-align: center;
}
button, input {
    background: transparent;
    border: none;
}

header {
    height: 180px;
    width:100%;
}

.header-inner {
        position: relative;
        top:50px;
  
    margin: 0 auto;
}

header .logo  {
    margin-right:50px;
}

header .logo img {
   width: 250px;
   left: 30px;
}

header ul.navigation {
    position: absolute;
    left: 300px;;
    top:25px;
    font-size:18px; font-weight:bold;
    text-transform: uppercase;
}   

header ul.navigation li {
    padding-right:55px;
    letter-spacing: 2px;
}

header ul.navigation li a:hover {
    color: #d01b21;
}



header .lang-bar {
    border: 1px solid #c0c1c3;
    color: #c0c1c3;
    padding: 5px 10px;    
    position: absolute;
    right:290px;
    top:15px;

    width:140px;

    font-size:12px;
    line-height:27px;
    height:40px;
    padding-left:45px;
}

header .lang-bar i.fa-globe {
    font-size:19px;
    position: absolute;
    top:9px;
    left:14px;
}

header .lang-bar .lang-selection {
    position: absolute;
    top:38px;
    left:-1px;   
    border: 1px solid #d01b21;
    color: #c0c1c3;
    padding: 5px 5px;   
    padding-left:45px;
    width:140px;
    display:none;
    transition: all 2s ease;
    opacity: 0;
}

header .lang-bar .lang-selection a:hover {
    color: #d01b21;
}

.lang-bar:hover {
    cursor: pointer;
    border: 1px solid #d01b21;
}
.lang-bar:hover > .lang-selection {
       opacity: 1;  
       display:block;
}

.lang-bar:hover > .fa-caret-down:before {
    content: "\f0d8";
}

.lang-bar:hover > .fa-caret-down {
    top:7px;;
}
header .lang-bar i.fa-caret-down {
    font-size:22px; color:#d01b21;
    position: absolute;
    right:9px;
    top:5px;
}

header .search-bar {
    position: absolute;
    right:0px;      height:40px;

 top:15px;     border: 1px solid #c0c1c3;
    padding: 5px 10px;
    border-radius:15px;
    width:250px;
}
header .search-bar input {
    padding: 5px 10px;
    position: absolute;
    color: white;
    font-size:15px;
    width:80%;
}

header .search-bar:hover {
    border: 1px solid #d01b21;
}


header .search-bar button {
    position: absolute;
    right: 10px;
    top:5px;
    background-color: transparent;
    border: none;
    font-size:25px;
}


.content {
    padding:20px 0px;
}

.inner {
 width:95%;
        margin: 0 auto;
    padding:30px 0px;
}

* {
    box-sizing: border-box;
  
}

ul {
    padding:0;
    margin:0;
    list-style:none;
}

.inner p {
    letter-spacing: 1;;
}
header li {
    display:inline-block;
    padding:0px 10px;
}


.video-detail-page {
background-color: #242739;
}

.bg-ebony-clay {
    background-color: #242739;
}

.bg-black {
    background-color: black;
}

.btn {
    padding: 10px 30px;
    font-size:16px;
    border: 2px solid #242739;
}

.btn-share {
    position: relative;
    
}
.btn-share:hover {
    color: #12d7b5;
    border: 2px solid #12d7b5;
}

.btn-red {
    background-color: #d01b21;
    color: white;
}

.btn.red:hover {
    border:2px solid #d01b21;
    color: #d01b21;
}

h1 {
    font-size:18px;
}

 .btn-dark {
     background-color: #1b1c23;
     color: white;
 }


.red {
    color: #d01b21;
}





/* video detail */
.fa-share-all {
    color: #12d7b5;
}

.video-description {
    font-size:14px;
    margin-bottom:20px;
}

.btn-share {
    float:right;
    margin-left:100px;
}
.meta {
    border: 2px solid #1b1c23;
    clear:both;
    margin-bottom:20px;
    width:auto;
    display:inline-block;
    margin-right:20px;
    font-size:12px;
}


.meta .name {
    padding:10px 30px;
    display:inline-block;
    background-color: #1b1c23;
     text-align:center;

}

.meta .value {
    background-color: #242739;
    padding:10px 20px;
         text-align:center;

    display:inline-block;
}

.red .fa-video {
    color: #d01b21;
     margin-right:20px;
}


.fa-share {
    color: #12d7b5;
    margin-right:20px;
}

/*footer */

footer {
    background-color: #242739;
    padding:30px 0px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    position: static;
    bottom: 0px;
    width:100%;
    margin-top:50px;
}

footer a:hover {
    color: #d01b21;
}
footer img {
    width:180px;
}

footer .col-4 {
    width:25%;
    float:left;
}

footer h2 {
    font-weight:bold;
    font-size:20px;
    margin-bottom:20px;
}

footer p{
    padding-top:20px;
    font-size:14px;
    text-align: justify;
}

footer i {
    font-size:22px;
}

footer li {
    margin-bottom:10px;
}

footer .fa-circle {
    color: #d01b21;

}
footer .fa-twitter, footer .fa-instagram,  footer .fa-facebook  {
    color: #242739;
}




/*
help
*/

.help .search-bar {
    position: relative;
    height:45px;
 top:15px;     border: 1px solid #c0c1c3;
    padding: 5px 10px;
    border-radius:15px;
    width:400px;
    max-width:90%;
}

.help .search-bar:hover {
    border: 1px solid #12d7b5;
}
.help .search-bar input {
    left: 0px;
    top: 8px;
    padding: 5px 10px;
    position: absolute;
    color: white;
    font-size:16px;
    width:80%;
}

.help .search-bar button {
    position: absolute;
    right: 10px;
    top:8px;
    background-color: transparent;
    border: none;
    font-size:25px;
    color: #12d7b5;
}

.help .tile {
    background-color: #242739;
    width:300px;
    max-width:45%;
    margin:10px 20px;
    display:inline-block;
    position: relative;
    height: 90px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50);
    background-size: 50px;
    background-position: 25px center;
    background-repeat: no-repeat;
    
}

.help .tile:hover {
            filter: contrast(90%);

}

.help .tile img {
     position: absolute;
    left:25px;
    width:50px;
    top:18px;
}

.help .tile label {
    position: absolute;
    left:100px;
    top:35px;
}

.help .tile-full {
    width:100%;
    max-width:100% !important;
    margin: 0 !important;
}





.help .howto {
    background-color: #242739;
    width:200px;
    max-width:20%;
    margin:10px 20px;
    display:inline-block;
    position: relative;
    height: 90px;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50);
    background-size: 50px;
    background-position: 25px center;
    background-repeat: no-repeat;
}

.help .tile:hover {
          filter: contrast(90%);


}

/*
    howto
*/

.howto h1 {
    padding:50px;
}

.howto .col-2 {
    width:40%;
    float:left;
}

.howto .device-logo {
    text-align:center;
}

.device-supported-devices {
        padding:100px 0px;
}

.howto .device-instruction {
    position: relative;
    width:100%;
    padding:100px 0px;
}
 
.howto .device-todo h2 {
    font-size:25px;
    margin-bottom:20px;
}

.howto .device-todo  {
    line-height:30px;
    font-size:18px;
}

.howto .tile {
    background-color: #242739;
    width:240px;
    height:180px;
    margin:10px 20px;
    display:inline-block;
    position: relative;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50);
    background-size: 150px;
    background-position: center 20px;
    background-repeat: no-repeat;
}

.howto .tile span {
    position: absolute;
    width:100%;
    bottom:20px;
    text-align:center;
    display:block;
}

.howto .tile:hover {
    //opacity//: 0.6;
        filter: contrast(90%);

}

.howto .tile.active {
      -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0); 
      box-shadow: 5px 5px 15px 5px rgba(0,0,0,0);

}


/*
 FAQ
*/

.faq .inner {
    max-width:600px;
}
.faq-header {
    padding:15px 20px;
    margin-bottom:20x;
       display:block;
    position: relative;
    font-weight:bold;
    font-size:20px;
    color: #d01b21;
    border-bottom:1px solid white;
}

.faq-content {
    padding:20px 30px;
    line-height:25px;
    display:none;
}

.faq-content.active {
    display:block;
}

.faq-header.active .fa-caret-down:before {
    content: "\f0d8";
}

.faq-header.active .fa-caret-down {
        top:13px;
}


.faq-header i {
    position: absolute;
    top:10px;
    right:10px;
    font-size:30px;
}





.overlay {
    background-color: rgba(0,0,0,0.7);
    width:100%;
    height:100000px;
    position: fixed;
    top:0px;    left:0px;
    z-index:1000005;
    display:none;
}

.overlay .overlay-content {
    width:500px;
    max-width:100%;
    height:auto;
    padding: 15px 20px;
    z-index:1000008;
     background-color: #242739;
    -webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50); 
    box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.50);

    position: absolute;
    left: calc(50% - 250px);   
    top:100px;

}

.overlay h1 {
    border-bottom:1px solid white;
    width:80%;
    padding-bottom:5px;
    margin-bottom:10px;
}

.overlay .overlay-close {
    float:right;
    font-size:25px;
}
.overlay video {
    width:100%;
    height:300px;
}

.overlay .btn-share {
    width:100%;
    height: 40px;
    line-height:20px;
    display:block;
    padding:10px 20px;
    position: relative;
    margin-bottom:5px;
    border: 1px solid transparent;
}

.overlay .btn-share:hover {
    border: 1px solid white;
    color: white;
}

.overlay .btn-share i {
    position: absolute;
    top:6px; right:5px;
    font-size:25px;
}

.btn-share-link {
    color: white;
    font-size:15px;
    border: 1px solid white;
}

.btn-share-twitter {
    background-color: #00B2FF;
}

.btn-share-whatsapp {
    background-color: #25D366;
}

.btn-share-telegram {
    background-color: #00B2FF;
}

.btn-share-fb {
    background-color: #4267B2;
}

.only-mobile {
    display:none;
}


@media only screen and (max-width: 1000px) {

    header li {
        padding-left: 0px !important;
    }

     .logo img {
        margin-left:-10px;
        width:200px !important;
    }

    header ul.navigation  {
        top: 50px !important;
    }

    #see_more {
        height: 190px !important;
    }

    .slider-cta a {
        padding: 5px 15px !important;
        font-size:14px  !important;
}

.slider-cta h3 {
    font-size:12px !important;
}

.slider-cta p {
    font-size:10px;
    line-height:15px;
}

    h2 {
        font-size:15px;
    }
    .only-mobile {
        display: block !important;
    }

    .only-desktop {
        display:none;
    }

    .btn-share-mobile, .btn-trailer {
        display:block;
        width:100%;
        float:none;
        position: relative;
    }

    .btn-share-mobile i, .btn-trailer i {
        position: absolute;
        left: 10px;
        top: 12px;
    }

    .meta {
        width:100%;
    }
    .meta .name {
    }

    .meta .value {
    }

    .overlay-content {
        left: 0px !important;
    
    }

    img {
        max-width:100% !important;
    }

    .col-2 {
        width:100% !important;
        float:none !important;
    }

    .tile {
        width:90% !important;
        margin: 0 auto !important;
    }

    footer .inner {
        padding:20px;
    }

    footer .col-4 {
        margin-bottom:40px;
        width:100% !important;
        float:none !important;
    }

    .device-todo  {
        width:90% !important;
        margin: 50px auto  !important;
    }

    .help .tile {
        background-position: center 20px;
        height:140px;
        position: relative;
    }

    .help .tile label {
        width: 100% !important;
        top: 100px !important;
        position: absolute  !important;
        left: 0px !important;
    }
    
    .btn-share {
        margin: 0;
    }
}










            .carousel img {
              max-width:100%;
              width: 100%;
              border-radius: 8px;
            }

            .carousel img:hover {

            }

            .slick-item  {
              position: relative;;
            }

            .slick-slide  {
              display: inline-block;      padding: 5px;

            }

            .slick-item .slick-item-overlay:hover {
                      opacity: 0.7;
                }

             .slick-item-overlay {
               border-radius: 8px;

             				width: calc(100% );
             				height: calc(100% + 1px);
             				top: 0px;					bottom: 0px;
             				opacity: 0;
             				left: 0px; right:0px;
             				position: absolute;
             				-webkit-transition: opacity 0.10s ease-in-out;
             				transition: opacity 0.10s ease-in-out;
             				background: #000000 url(https://watch4.com/images/play-icon.png?123) no-repeat center center;
             			}



             			.slick-item img {
             				-webkit-transition: all 0.24s ease-in-out;
             				transition: all 0.24s ease-in-out;
             				width: 100%;
             			}





.episode {
    display:block;
    background-color: #242739;
    padding:15px 15px;
    margin: -15px;
    -webkit-box-shadow: 5px 5px 17px 9px rgba(0,0,0,0.12); 
box-shadow: 5px 5px 17px 9px rgba(0,0,0,0.12);
}

.episode.active {
  background-color: transparent;
  -webkit-box-shadow: 5px 5px 17px 9px rgba(0,0,0,0.0); 
box-shadow: 5px 5px 17px 9px rgba(0,0,0,0.0);
}
 
.episode .duration {
    display:inline-block;
    position: absolute;
    right:20px;
    font-size:12px;
    opacity:0.6;
    top:20px;
}

.episode:hover {
  background-color: rgba(36,39,57,0.6);
}

.episode img {
    border: 2px solid transparent !important;
    width:150px;
    height:88px;
    opacity:0;
    border-radius:10px;
}

.episode:hover {

}
.episode img:hover {
    border: 2px solid #d01b21 !important;
}

.episode.active img {
    border: 2px solid #11eec9 !important;
}

.episode .btn-red {
    position: absolute;
    right:20px;
}

.episode h3 {
  margin-top:20px;
  margin-bottom:10px;
}
.btn-red {
    background-color: #d01b21;
    border: 1px solid #d01b21;

    color: white;
padding: 10px 15px;
}

.btn-red:hover {
      background-color: transparent;
      color: #d01b21;
}

.episode-info {
    padding:10px 20px;
   position: absolute;
left: 165px;
top:0px;
width: calc(100% - 300px);
max-width:800px;

font-size:13px;
text-align: justify;
}

.episode-description {

}

.round-border {
      border-radius:10px;
}

.meta-value {
    margin-left: 40px;

}

@media only screen and (max-width: 1000px) {

    header {
        height: 150px !important;
    }

    .collections-page h3 {
        display:none;
    }

    .collection-dropdown {
        width:30% !important;
    }

    .filter {
        font-size:12px;
        float:none !important;
    }

    .inner {
        padding: 10px 0px;
        letter-spacing: 1px !important;
    }

    h3 {
        font-size:15px;
    }

    header .logo img {
        width: 100px;margin-top:-30px;
       
    }

    header ul.navigation {
        left:0px;
    }

    header {
        height: 130px !important;
    }

    .page-inner {
        width: 90% !important;
    }

   header ul.navigation {
       position: absolute;
               padding:0px 10px !important;
        font-size:13px !important;
    }

    header ul.navigation li {
        padding-right: 15px !important;
    }

    .lang-bar {
        display:none;
    }

    .search-bar {
        display:none;
    }
  .episode-info {
    width: calc(100% - 120px);
      left: 115px;

  }

  .meta-name,  .meta-value {
    width:50%;
    margin:0 !important;
    margin-right: 0px !important;
    display:inline-block;
    border: 2px solid #1b1c23 !important;
    box-sizing: border-box;
    margin-bottom:5px !important;
  }

   .meta-value {
    margin-left:-5px !important;
   }


  .episode .duration {
    left:-100px;
    top:90px;
  }

  .episode .btn-red {
      left: 130px;
bottom: 15px;
text-align:center;
  }

  .round-border {
    border-radius: 0px;
  }

  .episode img {
    width:100px;
    height:65px;

  }

  .container {
    max-width:100%;
  }
}






    .dropdown {
        position: relative;
        border: 1px solid #c0c1c3;
        padding:12px 10px;
        color: #c0c1c3;
        font-size:12px;
        height:40px;
    }

    @media only screen and (max-width: 1250px) {
        header ul.navigation li {
            padding-right:10px;
        }

        .search-bar {
            width: 150px !important;
        }

        .lang-bar {
            right: 190px !important;
        }
        

    }

@media only screen and (max-width: 1024px) {


    .header-inner .logo {
        margin-left:20px;
    }

    .how-to-watch  .col-2 {
        font-size:14px !important;
        padding-top: 10px !important;
    }

    .how-to-watch .devices {
        padding: 10px;
    }
    .how-to-watch .devices img {
        max-height: 100px;
    }

    .filter {
        margin-left: 10px;
    }

    .dropdown {
        padding:5px 0px;
        padding-left: 2px; 
border:none !important;        font-size:11px;
        height:20px;
    }

    .episode-info h3 {
        font-size:14px;
    }

    .episode-description {
        font-size:12px;
        text-align:left;
    }


    .overlay .btn-share, .overlay p {
        font-size:12px;
    }
}



                .dropdown ul {
                  display: none;
                  padding: 0;
                  margin: 0;
                  top:25px;;
                  left:0px;
                  position: absolute;;
                  z-index: 10000001;
                  width: 250px;
                  max-height: 400px;
                  overflow-y: scroll;
                padding-top:20px;
                  background-color: rgba(0,0,0,0.9);
                  padding: 5px;

                }

                .dropdown {
                  transition: fade 0.2s ease-in-out;
                }

                .dropdown  li {
                  margin: 0;
                  padding: 0px 15px;
                  padding-right: 5px;
                  display: block;
                  line-height: 40px;
                  display: block;
                  height: 40px;
                  border: 1px solid rgba(255,255,255,0.01);
                  overflow: hidden;;

                }

                .dropdown li {
                  transition: all 0.2s ease-in-out;
                }

                .dropdown  li:hover {
                  background-color: rgba(255,255,255,0.1);
                }

                .dropdown:hover ul {
                  display: block;
                }

                .collections a {
                  float: left;
                  width: 13%;
                  line-height: 20px;


                }

            .dropdown ::-webkit-scrollbar {
            width: 5px;
          }

            .dropdown ::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.4);
          }

            .dropdown ::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.7);
          }

            .dropdown ::-webkit-scrollbar-thumb:hover {
            background: #555;
          }

          #instantclick-bar {
  background: #d01b21;
  height:2px;
}

.carousel {
    max-width: 100%;
overflow: hidden;
margin-left:20px;
position: relative;
}

.slick-next {
    right: 0px !important;
    width: 50px !important;
height: 95% !important;
/* background-color: rgba(0,0,0,0.6) !important; */
border-top-right-radius: 10px;;
border-bottom-right-radius: 10px;;
}

.slick-next:before, .slick-prev:before {
    font-size:40px !important;
    content:'\f105' !important;
    font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
}

.slick-prev:before {
    font-size:40px !important;
    content:'\f104' !important;
    font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
margin-left: -100px !important;
}


.slick-prev {
    left: -50px !important;
    width: 50px !important;
    z-index:100000001;
height: 96% !important;

/* background:url(https://cloud.watch4.com/files/slider-arrow-bg.png) transparent repeat-y !important; */
}

.slick-disabled {
    opacity:0;
}


 .slider-cta i {
     margin-right:15px;
 }

@media only screen and (min-width: 1280px) {
    .inner, .header-inner  {
        width:95% !important;
    }

      .slider-cta {
        left:2.5% !important;
    }
}


@media only screen and (min-width: 801px) {
     .inner, .header-inner  {
        width:95% !important;
    }




      .slider-cta {
        left:2.5% !important;
    }
}


@media only screen and (max-width: 800px) {
     .inner, .header-inner  {
        width:95% !important;
    }

    .slider-cta {
        left:2.5% !important;
    }

    .logo {
        width:200px;
    }

    .page-inner {
        margin-left: 0px !important;
    }

    .page-inner {
        margin-left:5% !important;
        max-width:90% !important;
        font-size:12px;
    }

    .contact p {
        line-height:24px !important;
    }
}

.red {
    color: #d01b21;
}


.imdb-rating {
    font-size:20px !important;
    margin:10px 0px !important;
    position: relative;
    padding-left:40px;
}

.imdb-rating  i {
 font-size: 35px !important;
display: inline-block;
margin-right: 10px !important;
color: #d01b21;
left: 0px;
position: absolute;
top: -5px;
}

.video-description {
    width:85%;
    text-align: justify;
}

.page-inner {
    width:95%;
    max-width:1000px;
    margin: 0 auto;
}


@media only screen and (max-width: 1200px) {
.video-description {

    width:100%;
}
}

.device-supported-devices img {
    padding:20px;
    border-radius:20px;
}
.device-supported-devices img:hover {
    background-color: black;
}