/*
Theme Name: fftvtheme
Author: Bryn Davies for Pete & Tom
Author URI: https://peteandtom.com
Description: Theme Styles for FFTV Website
Version: 0.1

font-family:"din-2014";
200,300,400,600,700,800
normal /italic
*/

@charset "UTF-8";

body {margin:0; padding:0; font-family:"Montserrat", sans-serif; font-weight:400; font-size:20px; color:#000000; background-color:#F5F5F5;}

h1 {font-size:4em;}
h2 {font-size:2em;}

.purplebg {background-color:#FF06F0;}
.lightgreybg {background-color:#F5F5F5;}
.whitebg {background-color:#ffffff;}
.contactgrey {background-color:#f0f0f0;}

* {
  font-variant-ligatures: none;
}

.introvid {display:block; width:100%; height:100vh; position:relative; padding: 0px; position:fixed; top:0; left:0; background-color:#F5F5F5;z-index:9;}
.introvid video {
width: 100%;
  height:100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
  margin-left: 50vw;
  transform: translate(-50%);
}

/*#intvid {width:calc(100% - 54px)!important; height:calc(100vh - 54px)!important;}*/
/*#intvid {width:100vh!important; height:100vh!important;}*/

.headersection {background-color:#FF06F0;height: 85px;z-index:100;display: block;}
.page-template-template-home .headersection {background-color:transparent;height: 85px;}

.header {background-color:#FF06F0;max-width:100%; height:84px; margin:0 auto; /*z-index:100;*/ position:fixed; top:0px;left: 50%;transform: translate(-50%, 0);}
.page-template-template-home .header {background-color:transparent;}
.headercontent {max-width:1440px;height:80px;margin:0 auto;position:relative;}
.logo {width:auto; height:auto; float:left;padding-top:15px;}
.logo img {width:180px; height:auto;}

.homelogo {display:none;}
.standardlogo {display:none;}

.menubutton {cursor:pointer;width:88px; height:76px;  float:right;margin-right:25px; /*background-image:url('assets/hamburger-fftv.png'); background-repeat:no-repeat; background-size:37px 25px; background-position: 23px 28px;*/}
.menuopen {width:30px; height:20px; margin-top:32px; margin-left:23px;transition: all .3s linear;position:absolute;}
.menuclose {width:20px; height:20px; margin-top:32px; margin-left:28px;transition: all .3s linear;position:absolute;}

.menutext {color:#ffffff; position:absolute; right:0px; top:32.5px;font-size:15px; cursor:pointer;}
/*.menuopen:hover {filter: grayscale(100%); -webkit-filter: grayscale(100%);}*/
/*.menuopen:hover {
  background:black;
  -webkit-mask:url('assets/closemenu-fftv.png');
}*/

.desktoponly {display:block;}
.mobileonly {display:none;}


.mobonly{display:none;}

.desktopcarousel {display:block;}
.mobilecarousel {display:none;}

.desktophero {display:block;}
.mobilehero {display:none;}

.navwrap{display:none;width:100%; height:100vh; background-color:#FF06F0;text-align:center;position:fixed;z-index:99;}
.nav {max-width:1400px;margin:0 auto; text-align:right;}
.nav ul {margin-top:150px;}
.nav ul li {font-size:79px;list-style: none;text-transform:capitalize;height:100px;}
.nav ul li a {text-decoration:none; color:#2A0B71; font-weight:300;}
.nav ul li a:hover {color:#ffffff; font-weight:800;}

section{max-width:1920px; height:auto; margin:0 auto; display:block; overflow:hidden;}

.pagetitle {margin-top:150px;font-weight: 800; font-size:38px;display:inline; color:#2A0B71; padding:5px 15px; text-transform:capitalize;text-align:center;}

.productionhero {height:100vh;position:relative;}
.productionhero .content{
  width:1440px;
  margin:0 auto;
  padding:20px;
  margin:0 auto;
  position:absolute;
  bottom:20px;
  z-index:2;
  left: 50%;
  transform: translate(-50%, 0);
}
.productionherofade {
z-index:1;
position:absolute;
bottom:0px;
height:350px;
width:100%;
background: rgb(0,0,0);
background: -moz-linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
left: 50%;
transform: translate(-50%, 0);
}
.productionlogonetwork {position:absolute; bottom:30px;}
.productionlogonetwork img {max-width:300px;margin-bottom:30px;}
.channelnetwork{clear:left; font-size:21px;color:#ffffff; font-weight:500;}
.playtrailer {
  position:absolute;
  bottom:35px;
  right:30px;
  padding-left:40px;
  padding-right:70px;
  padding-top:25px;
  padding-bottom:25px;
  background-color:rgba(0,0,0,0.2);
  border:1px solid #ffffff;
  color:#ffffff;
  font-weight:400;
  font-size:15px;
  background-image:url('assets/trailerarrow.png');
  background-position:142px 22.5px;
  background-repeat:no-repeat;
  background-size:20px;
  cursor:pointer;
  text-transform:uppercase;
  transition: all .2s ease-in-out;
}
.playtrailer:hover {background-color:rgba(156,48,195,0.5);}

.heroscrollicon {
  width:40px;
  height:40px;
  position:absolute;
  bottom:30px;
  left: 50%;
  /*transform: translate(-50%, 0);*/
  background-image:url('assets/Scrollicon.svg');
  background-size:40px 40px;
  background-repeat:no-repeat;
  cursor:pointer;
  margin-left:-20px;
}


.page-template-template-productions .content{padding-bottom:60px;}
.productiongrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  grid-auto-rows: 1fr;}

.productiongrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  text-align: center;
  position:relative;
}
.productiongrid .griditem:first-of-type {border-right: 3px dotted #FF06F0; /*background-image:url('assets/vertical-divider-blue.png')*/;
background-position : top right;
background-repeat:repeat-y;
background-size:3px 6px;}
.productiongrid .griditem p {text-align:left;width:70%; margin:0 auto; padding-bottom:10px; padding-top:0px; margin-top:-10px!important;}
.productiongrid .poverview {font-size:26px; font-weight:700;padding-top:0px; line-height:38px;padding-bottom:50px;}
.productiongrid .pintro {font-size:17px; font-weight:300;padding-top:5px;line-height:28px;padding-bottom:50px;}
.productiongrid .poverview strong {color:#FF06F0;font-weight:700;}
.productiongrid .poverview p {margin-top:-7px!important;}

.chantext {text-align:left; font-weight:600;margin-top:10px;font-size:24px;}

.productiongallery {}
.productiongallery .content {/*width:1100px;*/}
.gallerygrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 60px;
    grid-auto-rows: 1fr;
  }

.gallerygrid .griditem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    text-align: center;
    position:relative;
    transition: all .3s ease-in-out;
    background-size:100% 100%;
  }

  .gallerygrid .griditem img{
    width:100%;
    height:auto;
    margin-bottom: -5px;
    }

/*.gallerygrid .griditem:hover + .gallerygrid .griditem img {width:110%;}*/
/*.galleryblank {transition: all .3s ease-in-out;}*/

.traileroverlay {width:100%; height:100vh; background-color:rgba(255,255,255,0.9); position:fixed; z-index:101;display:none;}
.trailerwrapper {width:70%; height:auto; position:absolute;top: 50%; background:black;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Productions main page */

.longgrid {
  margin-top:150px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 40px;
  grid-auto-rows: 1fr;}

.longgrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position:relative;
}

.longgrid .griditem {transition: all .3s ease-in-out; background-position:center center;}
.longblank {width:100%; opacity:0; height: 100%;transition: all .3s ease-in-out;}
.longblank:hover {opacity:0.65;}
.longblank:hover + .readmoreOL {opacity:1;}
/*.thumbnailblank:hover + .thumbnailgrid .griditem {background-size:120% 120%;}*/
.longgrid .readmoreOL {pointer-events:none;transition: all .3s ease-in-out; opacity:0;width:auto; color:#ffffff;font-size:16px;font-weight:400;text-transform:uppercase;height:38px;text-align:center; z-index:5;position:absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}
.longgrid .readmoreOL img {width:34px;padding-bottom: 10px;}



.thumbnailgrid {
  margin-top:40px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  grid-auto-rows: 1fr;}

.thumbnailgrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position:relative;
}

.thumbnailgrid .griditem {transition: all .3s ease-in-out; background-position:center center;}

.thumbnailblank {width:100%; opacity:0; height: 100%;transition: all .3s ease-in-out;}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  .thumbnailblank {
  /*width: 100%;*/
  opacity: 0;
  height: 100%;
  transition: all .3s ease-in-out;
  /*margin-left: -10px;*/
  margin-right: 20px;
  }
}


.thumbnailblank:hover {opacity:0.65;}
.thumbnailblank:hover + .readmoreOL {opacity:1;}
/*.thumbnailblank:hover + .thumbnailgrid .griditem {background-size:120% 120%;}*/
.thumbnailgrid .readmoreOL {pointer-events:none;transition: all .3s ease-in-out; opacity:0;width:auto; color:#ffffff;font-size:16px;font-weight:400;text-transform:uppercase;height:38px;text-align:center; z-index:5;position:absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}
.thumbnailgrid .readmoreOL img {width:34px;padding-bottom: 10px;}


/* Productions main page */
.ymlgrid {
  margin-top:60px;
  margin-bottom:30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
  grid-auto-rows: 1fr;}

.ymlgrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position:relative;
  transition: all .3s ease-in-out;
  background-size:100% 100%;
}

.ymlgrid .readmoreOL {pointer-events:none;transition: all .3s ease-in-out; opacity:0;width:auto; color:#ffffff;font-size:16px;font-weight:400;text-transform:uppercase;height:38px;text-align:center; z-index:5;position:absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}
.ymlgrid .readmoreOL img {width:34px;padding-bottom: 10px;}


.ymltitle { color:#2A0B71; text-align:center;margin-top: 10px;font-size:32px; font-weight:700;}
.yml {width:30.5%; position:relative;display:inline-block; border:0px solid white;margin:1%;overflow: hidden;}
.yml img{width:100%;height:auto;opacity:0.3;transition-duration: 0.3s;}
.yml img:hover{width:100%;height:auto;opacity:1;transform: scale(1.1);}
.yml .title {position:absolute; width:80%;/*left:10%; top:35%;*/text-align:center; font-size:22px;line-height:32px;left: 50%; top: 50%; transform: translate(-50%,-50%);}
.yml img:hover + .title {display:none;}

.seeallproductions {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 24px;
    padding-bottom: 24px;
    color: #ffffff;
    background-color: #FF06F0;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    text-decoration:none;
    text-transform:capitalize;
    transition: all .2s ease-in-out;
  }
.seeallproductions:hover {background-color:#2A0B71; color:#ffffff;}

/* About Us */

.page-template-template-aboutus .content {max-width:1140px;}

.aboutintro {max-width:780px; margin:0 auto;margin-top:60px;}
.aboutintro p {font-size:26px;font-weight:600;line-height: 40px; color:#2A0B71;}
.aboutintro p strong {color:#FF06F0; font-weight:600!important;}

.abtimagegrid {
  margin-top:90px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  grid-auto-rows: 1fr;}

.abtimagegrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position:relative;
}
.abtimagegrid img {width:100%;}

.abouttextgrid {
  margin-top:0px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  grid-auto-rows: 1fr;
}

.abouttextgrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: top;
  text-align: center;
  position:relative;
  padding-bottom: 68px;
}

.abouttextgrid .griditem:first-of-type {
    border-right: 3px dotted #FF06F0;
    /*background-image:url('assets/vertical-divider-blue.png');
    background-position : top right;
    background-repeat:repeat-y;
    background-size:3px 6px;*/
}


.abouttextgrid p {width:75%;font-size:21px;text-align:left;font-weight:300;line-height:33px;margin-top:-8px;}
.abouttextgrid p a {color:#FF06F0;text-decoration:none;}
.abouttextgrid p strong {font-weight:600;}
.wwdtitle {margin-bottom:40px; display:block; margin-top: 40px;font-weight:800;}

/* contat page */

.contactgrid1 {
  margin-top:80px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px;
  grid-auto-rows: 1fr;}

.contactgrid1 .griditem {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: top;
  text-align: left;
  position:relative;
  border-top: 3px dotted #000000;
  border-bottom: 3px dotted #000000;
  /*background-image:url('assets/horizontal-divider-black.png');
  background-repeat:repeat-x;
  background-size:6px 3px;
  background-position:top left;*/
  /*border-width: 3px 0px 3px 0px;
  border-top:3px;
  border-left:0;
  border-right:0;
  border-bottom:3px;*/
}

.contactdata {

/*background-image:url('assets/horizontal-divider-black.png');
background-repeat:repeat-x;
background-size:6px 3px;
background-position:bottom left;
height:100%;*/
}

.locationicon {background-image:url('assets/location-dot-ff.svg');background-repeat:no-repeat;background-position:10px 61px;background-size: 38px auto;}
.phoneicon {background-image:url('assets/phone-solid-ff.svg');background-repeat:no-repeat;background-position:10px 60px;background-size: 50px auto;}
.planeicon {background-image:url('assets/paper-plane-ff.svg');background-repeat:no-repeat;background-position:10px 60px;background-size: 50px auto;}

/*.contactgrid1 .griditem:first-of-type {
  border-top: 0px dashed #9c30c3;
  border-bottom: 0px dashed #9c30c3;
}

.contactgrid1 .griditem:last-of-type {
  border-top: 0px dashed #9c30c3;
  border-bottom: 0px dashed #9c30c3;
}*/



.contactgrid1 span {color:#FF06F0; font-weight:600;}
.contactgrid1 .gridtext {padding-left:85px;text-align:left;padding-top:60px; padding-bottom:60px;font-weight: 500;}

.contactsocial {position:relative; text-align:left; font-weight:400; font-size:20px;padding-top:50px;padding-bottom:50px;margin-left:86px;line-height: 40px;}
.contactsocial img {height:20px; margin-right:30px;margin-top:10px;-webkit-filter: grayscale(1) invert(1); filter: grayscale(1) invert(1);}
.contactsocial span {color:#FF06F0; font-weight:600;font-size: 20px;}

.noticeblock {background-image:url('assets/fftv-file-icon.png');
background-position: 86px 40px;
    background-size: 35px auto;
background-repeat:no-repeat;margin-top:-85px;background-color:#FF06F0; padding-left:160px; padding-top:20px; padding-right:20px; padding-bottom:20px;}
.noticeblock p {color:#ffffff;font-size:17px; font-weight:400;text-align:left;width:80%;line-height:26px;}

.ctextgrid {
  margin-top:80px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  grid-auto-rows: 1fr;}

.ctextgrid .griditem {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: top;
  text-align: left;
  position:relative;
  border-top: 3px dotted #000000;
  padding-top:20px;
  /*background-image:url('assets/horizontal-divider-black.png');
  background-repeat:repeat-x;
  background-size:6px 3px;
  background-position:top left;*/
}

.ctextgrid h3 {font-size:30px; font-weight:600;color:#2A0B71;}
.ctextgrid p {font-size:17px;font-weight: 300; line-height: 28px;}
.ctextgrid p a {color:#FF06F0; text-decoration:none;font-weight: 500;}

.subsidiary {background-image:url('assets/fftv-ct-logo.svg'); background-size: auto 65px; background-repeat:no-repeat;background-position:225px 20px; margin-top:80px;padding-top:25px; padding-bottom:25px; width:300px;font-size:17px;font-weight:300; line-height: 27px;}


.page-template-template-home #footer {display:none;}

.homehero {height:96vh;margin:20px;}
.homehero .content{max-width:1340px; margin:0 auto; padding:20px; margin:0 auto;}

.carousel {width:100%; height:100vh; position:relative;}
.slide {width:100%; height:100%;}
.slide img {opacity:0;width:100%; height:100%;}
.slidecontent {width:1440px; margin:0 auto; height:100vh; position:relative;}
.slidetitle {position:absolute; bottom: 40px; right:10px; z-index: 6;font-size:25px; font-weight:700;color:#ffffff;text-shadow: -2px 1px 23px rgba(0,0,0,0.69);}

.slidetext {position:absolute; z-index: 8;left: 50%; top:50%; transform:translate(-720px, -50%);max-width:500px;font-size:40px; font-weight:700;line-height:55px; color:#ffffff;}

.topcarouselfade {position:absolute; top:0px;width:100%; height:30%;background: #000000;background: linear-gradient(180deg,rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.49) 27%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);}
.bottomcarouselfade {position:absolute; bottom:0px;width:100%; height:30%;background: #000000; background: linear-gradient(0deg,rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.49) 27%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);}
.sidecarouselfade {position:absolute; top:0px;width:50%; height:100%;background: #000000;background: linear-gradient(90deg,rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.49) 27%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);}

/*.carouselslidetint {width:45%; height:100%; position:absolute; left:0px; top:0px; background: #000000;
background: linear-gradient(90deg,rgba(0, 0, 0, 0.35) 100%, rgba(0, 0, 0, 0.35) 60%, rgba(255, 255, 255, 0) 0%);}*/

.slick-prev {position: absolute; bottom: 20px; left:20px; z-index: 5; display:none!important;}
.slick-next {position: absolute; bottom: 20px; right:20px; z-index: 5; display:none!important;}
.slick-dots {position: absolute; bottom: 20px; left: 50%; transform:translate(-720px, 0); list-style: none;padding-left: 0px;}

.slick-track {height: 100vh;}

/*.slick-dots {
    position: absolute;
    bottom: 43px!important;
    display: block;
    max-width: 1440px;
    padding: 0;
    margin: 0 auto!important;
    list-style: none;
    text-align: right!important;
    left:0;
    right:0;
}*/

.slick-dots li button {
    font-size: 15px!important;
    line-height: 0!important;
    display: block!important;
    width: 5px!important;
    height: 5px!important;
    padding: 4px!important;
    cursor: pointer!important;
    color: transparent!important;
    border: 0!important;
    outline: none!important;
    background: white!important;
    border-radius:20px!important;
}

.slick-dots li button:before {
    font-family: 'slick'!important;
    font-size: 6px!important;
    line-height: 20px!important;
    position: absolute!important;
    top: 12px!important;
    left: 0!important;
    width: 5px!important;
    height: 5px!important;
    content: none!important;
    text-align: center!important;
    opacity: 0!important;
    color: transparent!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button {
font-size: 15px!important;
line-height: 0!important;
display: block!important;
width: 10px!important;
height: 10px!important;
padding: 4px!important;
cursor: pointer!important;
color: transparent!important;
border: 0!important;
outline: none!important;
background: #ffffff!important;
border-radius:0px!important;
}

.slick-dots li.slick-active {
  margin: 0 0 0 0px!important;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
    margin: 0 0 0 4px!important;
    padding: 0;
    cursor: pointer;
}

.content {max-width:1440px; margin:0 auto; padding:20px; margin:0 auto;}
.firstContent {padding-top:150px;}

.cscontent {max-width:1340px; margin:0 auto; padding:20px; margin:0 auto;height:90vh; text-align:center;/*display: flex; align-items: center;justify-content: center;*/}
.csdatawrap {width:auto; height:auto;text-align:center; position:absolute;left:0;right:0; top:calc(50% - 250px);}
.cscontent img {margin:0 auto; width:120px; margin-bottom:50px;}
.csheadline {font-size:35px; text-transform:uppercase;text-align:center;font-weight:600;}
.cscontacts {text-align:center; margin-top:120px; font-size:25px; line-height:35px;}
.cscontacts span {color:#FF06F0;font-weight:600;}
.cscontacts a {color:#000000; text-decoration:none;}
.cscontacts a:hover {text-decoration:underline;}



/*Team Page stuff */

.team1grid {
    margin-top:80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    grid-auto-rows: 1fr;
  }

.team1grid .griditem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
    text-align: left;
    position:relative;
    background-color:#ffffff;
    padding-bottom:10px;
  }

  .team2grid {
      margin-top:70px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 36px;
      grid-auto-rows: 1fr;
      margin-bottom:60px;
    }

  .team2grid .griditem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: top;
      text-align: left;
      position:relative;
      background-color:#ffffff;
      padding-bottom:10px;
    }

.team1grid img {width:100%; height:100%;}
.teamimageholder {transition: all .3s;}
.teamimage {width:100%; height:100%;}


.teamdataholder {width:100%; background-color:#ffffff;margin-top:-5px;}

/*.teamblank {opacity:.75; position:absolute;top:0px;left:0px; width:100%;z-index:2;}*/
.teamblank {width:100%; opacity:0; transition: all .3s ease-in-out;position:relative;top:0px;left:0px; width:100%; height:100%;z-index:2;}
.team1grid .teamblank:hover {opacity:.75;}
.team1grid .teamblank:hover + .readmoreOL {opacity:1;}

.team1grid .readmoreOL {pointer-events:none;transition: all .3s ease-in-out; opacity:0;width:auto; color:#ffffff;font-size:16px;font-weight:400;text-transform:uppercase;height:38px;text-align:center; z-index:5;position:absolute;top: 37%; left: 50%; transform: translate(-50%, -50%);}
.team1grid .readmoreOL img {width:34px;padding-bottom: 10px;}

.team2grid img {width:100%; height:auto;}
.team2grid .readmoreOL {pointer-events:none;transition: all .3s ease-in-out; opacity:0;width:auto; color:#ffffff;font-size:16px;font-weight:400;text-transform:uppercase;height:38px;text-align:center; z-index:5;position:absolute;top: 37%; left: 50%; transform: translate(-50%, -50%);}
.team2grid .readmoreOL img {width:34px;padding-bottom: 10px;}

.team1grid .name {color:#2A0B71;font-size:21px;padding-left:20px;padding-top:20px;font-weight:700;}
.team1grid .job {color:#FF06F0; font-size:17px;padding-left:20px; font-weight:300;padding-bottom:15px;padding-top:5px;}
.team1grid a {text-decoration:none;}

.team2grid .name {color:#2A0B71;font-size:18px;padding-left:25px;padding-top:20px;font-weight:700;text-align:left;width:100%;}
.team2grid .job {color:#FF06F0; font-size:16px;padding-left:25px;font-weight:300;padding-bottom:10px;padding-top:3px;text-align:left;width:100%;}
.team2grid a {text-decoration:none;}

.memberwrap {width:100%; height:100vh; background-color:rgba(245,245,245,0.96); display:none; z-index:5; position:fixed; top:0px left:0px;text-align:center;}
.teammemberdata {width:1050px; display:inline.block; position:absolute;left:50%; top:50%; transform: translate(-50%, -50%);}

.ovteamimage {width:30%;float:left;}
.ovteamdata {width:70%;float:right;text-align:left;}
.ovteamimage img {width:100%;}
.ovteamdata .name {padding-left:30px;font-size:30px;margin-top: -8px;color:#2A0B71; font-weight:700;}
.ovteamdata .job {padding-left:30px;font-size:22px;color:#FF06F0;font-weight:300;}
.ovteamdata .description {margin-top:50px;text-align:left; padding-left:30px;line-height:28px;font-weight:300;font-size:17px;}

.closemember {text-transform:capitalize;margin-top:40px; font-weight:600; border:0px solid #FF06F0; padding:10px 60px;display: inline-block; background-color:#FF06F0;color:#ffffff; font-size:16px;cursor:pointer;transition: all .2s ease-in-out;}
.closemember:hover {background-color:#2A0B71; color:#ffffff;}

#footer {background-color:#FF06F0;}
#footer .content {color:#000000;padding:75px 20px 30px 20px;font-size:15px;position:relative;font-weight:400;}
#footer .content a {color:#000000; text-decoration:none;}
#footer .content a:hover {text-decoration:underline;}
#footer .social {position:absolute; right:20px; top:40px;text-align:right;font-weight:400; font-size:15px;line-height:25px;}
#footer .social img {height:20px; margin-left:30px;margin-bottom:5px;-webkit-filter: grayscale(1) invert(1);
    filter: grayscale(1) invert(1);}


@media only screen and (min-width: 1921px) {
  .header {width:1920px; height:100px; margin:0 auto; z-index:100;position:fixed; top:0px;}
  .productionherofade {width:1920px}
}

@media only screen and (max-width: 1920px) {
  .header {width:100%; height:84px; margin:0 auto; z-index:100;position:fixed; top:0px;}
}

@media only screen and (max-width: 1480px) {
.logo {width:auto; height:auto; float:left;padding-top:15px;margin-left:23px;}
.menutext {right:25px;}
.menubutton {margin-right: 50px;}
}

@media only screen and (max-width: 1440px) {
.nav {max-width:1400px;margin:0 auto; text-align:right;margin-right:20px;}
}

@media only screen and (max-width: 1500px) {
  .productionhero .content {width:95%;}
  .slick-dots {position: absolute; bottom: 20px; left: 50px; transform:none; list-style: none;padding-left: 0px;}
  .slidecontent {width:100%; margin:0 auto; height:100vh; position:relative;}
  .slidetitle {position:absolute; right:50px; z-index: 6;font-size:25px;font-weight:700; color:#ffffff;}
  .slidetext {position:absolute; z-index: 8;left: 50px; top:50%; transform:translate(0px, -50%);max-width:570px;font-size:40px; font-weight:700; color:#ffffff;}
}

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

  .teammemberdata {width:80%;}
  .ymlgrid {
    margin-top:50px;
    margin-bottom:20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    grid-auto-rows: 1fr;}
}

@media only screen and (max-width: 1024px) {
  /*.csdatawrap img {margin:0 auto;width:150px;margin-bottom:10%;}
  .csheadline {font-size:30px; text-transform:uppercase;text-align:center;margin-bottom:30%;}*/

}

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

  .ctextgrid {
    margin-top: 50px;
    margin-bottom: 20px;
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}
.ctextgrid .griditem {padding-bottom:20px;}

.team1grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}


.team2grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}

}

@media only screen and (max-width: 900px) {
  .nav ul li {font-size:50px;list-style: none;text-transform:uppercase;height:70px;}
}

@media only screen and (max-width: 850px) {
.gallerygrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}
.ymlgrid {
  margin-top:50px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  grid-auto-rows: 1fr;}
}

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

  .slidetitle {
        position: absolute;
        bottom: 100px;
        width: 100%;
        text-align: center;
        z-index: 6;
        font-size: 25px;
        font-weight:700;
        color: #ffffff;
        left: 0px;
    }

    .slick-dots {position: absolute; bottom: -10px; left: 0px;width:100%; transform:none; list-style: none;padding-left: 0px;text-align:center;}

}

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

.header {height:75px;}
.headercontent {height:75px;}
.menuopen {margin-top:27px;}
.menuclose {margin-top:27px;}
.menutext {top: 27.5px;}

  .logo img {
    width: 155px;
    height: auto;
}

.desktoponly {display:none;}
.mobileonly {display:block;}

.mobileonly .thumbnailgrid {margin-top:90px;}

.thumbnailgrid {
    margin-top: 20px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    grid-auto-rows: 1fr;
}

.mobshowtitle {text-align: left;
  margin-top: -50px;
  color: #FF06F0;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.chantext {text-align:left; font-weight:600;margin-top:0px;font-size:18px;}

.productiongrid .poverview {
  font-size: 20px;
  line-height: 30px;
}

.productiongrid .pintro {
    font-size: 16px;
    font-weight: 300;
    padding-top: 5px;
    line-height: 28px;
    padding-bottom: 20px;
}

.productiongrid .poverview strong {
    color: #000000;
    font-weight: 700;
}

.ymltitle {
    font-size: 28px;
    font-weight: 700;
}

.firstContent {padding-top:100px;}
/*.page-template-template-aboutus .content:first-of-type {padding-top:100px!important;}
.page-template-template-team .content:first-of-type {padding-top:100px!important;}*/

.wwdtitle {margin-bottom:40px!important; margin-top: 0px;font-size: 28px;background-color: transparent; color: #2A0B71;padding:5px 14px;font-weight:700;}

.team1grid .job {
    color: #FF06F0;
    font-size: 17px;
    padding-left: 20px;
    font-weight: 300;
    padding-bottom: 15px;
    padding-top: 2px;
}

.team2grid .name {
    color: #2A0B71;
    font-size: 16px;
    padding-left: 13px;
    padding-top: 10px;
    font-weight: 500;
    text-align: left;
    width: -webkit-fill-available;
}
.team2grid .job {
  color: #FF06F0;
  font-size: 16px;
  padding-left: 13px;
  font-weight: 300;
  padding-bottom: 10px;
  text-align: left;
  width: -webkit-fill-available;
  padding-right: 10px;
  padding-top: 1px;
}

.pagetitle {
  font-weight: 800;
  margin-top: 12px;
  font-size: 28px;
  display: inline-block;
  background-color: transparent;
  color: #2A0B71;
  padding: 5px 5px;
  /*text-transform: uppercase;*/
  text-align: center;
  margin-top: 0px;
  margin-bottom:0px;
}

.aboutintro {
    max-width: 780px;
    margin: 0 auto;
    margin-top: 30px;
}

.aboutintro p {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: left;
}


.abouttextgrid p {
    width: 100%;
    font-size: 18px;
    line-height:30px;
    text-align: left;
    padding-bottom: 15px;
}

#footer .social {
    position: relative;
    right: auto;
    top: auto;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    margin-top: 20px;
}

#footer .content {
    color: #000000;
    padding: 30px 20px;
    font-size: 15px;
    font-weight: 400;
    position: relative;
    text-align: center;
}
#footer .social img {
    height: 20px;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-right: 15px;
}

  .noticeblock {
    background-image: none;
    background-position: auto;
    background-size: auto;
    background-repeat: no-repeat;
    margin-top: -85px;
    background-color: #FF06F0;
    padding-left: 20px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.noticeblock p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    width: 90%;
    line-height: 24px;
    margin: 0 auto;
  }

.closemember {margin-bottom:100px;}

.contactdata {
    /*background-image: url(assets/horizontal-divider-black.png);
    background-repeat: repeat-x;
    background-size: 6px 0px;
    background-position: bottom left;
    height: 100%;*/
}

.contactdata:last-of-type {
    /*background-image: url(assets/horizontal-divider-black.png);
    background-repeat: repeat-x;
    background-size: 6px 3px;
    background-position: bottom left;
    height: 100%;*/
}

.contactgrid1 {
    margin-top: 20px;
    margin-bottom: 20px;
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}

.contactgrid1 .griditem {border-top: 0px dotted #000000;border-bottom:2.5px dotted #000000; background-size: 6px 0px;}
.contactgrid1 .griditem:first-of-type {border-top: 2.5px dotted #000000; /*background-size: 6px 0px;background-image: url(assets/horizontal-divider-black.png);
background-repeat: repeat-x;
background-size: 6px 3px;
background-position: top left;*/}

.contactgrid1 .gridtext {
    padding-left: 85px;
    text-align: left;
    padding-top: 40px;
    padding-bottom: 40px;
    text-transform: uppercase;
    font-size: 18px;
}

.locationicon {background-image:url('assets/location-dot-ff.svg');background-repeat:no-repeat;background-position:10px 46px;background-size: 38px auto;}
.phoneicon {background-image:url('assets/phone-solid-ff.svg');background-repeat:no-repeat;background-position:10px 45px;background-size: 50px auto;}
.planeicon {background-image:url('assets/paper-plane-ff.svg');background-repeat:no-repeat;background-position:10px 45px;background-size: 50px auto;}


.contactsocial {
    position: relative;
    text-align: left;
    font-weight: 400;
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 20px;
}

.ctextgrid h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom:10px;
}

.ctextgrid p {
    font-size: 16px;
    font-weight: 300;
    line-height: 28px;
}

.ctextgrid .griditem {
    padding-bottom: 35px;
    border-top: 2.5px dotted #000000;
    }

    .subsidiary {
        /*background-image: url('assets/fftv-ct-logo.svg');
        background-size: auto 50px;
        background-repeat: no-repeat;
        background-position: 0px 85px;
        margin-top: 80px;
        padding-top: 25px;
        padding-bottom: 70px;
        width: 100%;*/
        background-position:200px 20px;
        font-size: 16px;
    }

.memberwrap{overflow: auto;}

.teammemberdata {
    width: 80%;
    display: inline.block;
    position: absolute;
    left: 10%;
    top: 130px;
    /* transform: translate(-50%, -50%); */
    transform:none;
}

.ovteamimage {
    width: 100%;
    float: left;
}
.ovteamdata {
    width: 100%;
    float: right;
    text-align: left;
}
.ovteamdata .name {
    padding-left: 10px;
    font-size: 24px;
    margin-top: 15px;
}

.ovteamdata .description {
    margin-top: 50px;
    text-align: left;
    padding-left: 10px;
    font-size: 16px;
    line-height: 28px;
}

.ovteamdata .job {
    padding-left: 10px;
    font-size: 18px;
    color: #FF06F0;
}

.ovteamimage img {
    width: 250px;
    float: left;
}


.mobonly{display:block;}
.productiongrid {margin-top:50px;}
.productionlogonetwork {display:none;}
.productionhero .content {bottom:10px;}
.channelnetwork {display:none;}
.playtrailer {bottom:110px; right:auto; left:calc(50% - 101.5px); transform:scale(0.8);}
.heroscrollicon {bottom:30px;}

.desktophero {display:none;}
.mobilehero {display:block;}

.desktopcarousel {display:none;}
.mobilecarousel {display:block;}
.mobilegradient {
  background: #000000;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  width:100%;
  height:100%;
  position: absolute;
  left: 0px;
  top: 0px;
}
}


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

.ymlgrid {
  margin-top:50px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
  grid-auto-rows: 1fr;}
}

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


.page-template-template-contactus .pagetitle {padding-bottom:30px;}

  .team2grid {
      margin-top: 70px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      grid-auto-rows: 1fr;
  }

  .team1grid .teamblank:hover {opacity:0;}
  .team1grid .teamblank:hover + .readmoreOL {opacity:0;}

  /*.ovteamdata .name {
    padding-left: 10px;
    font-size: 28px;
    margin-top: 5px;
}*/





.abtimagegrid {
  margin-top:50px;
  margin-bottom:20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1%;
  grid-auto-rows: 1fr;}


.abouttextgrid {
  margin-top: 0px;
  margin-bottom: 20px;
  display: block;
  grid-template-columns: repeat(1, 1fr);
  gap: 13px;
  grid-auto-rows: 1fr;
}

.abouttextgrid .griditem {padding-bottom:10px;}

.abouttextgrid .griditem:first-of-type {
    padding-top:30px;
    border-bottom: 0px dashed #FF06F0;
    border-right: 0px dashed #FF06F0;
    background-size: 3px 0px;
}



.productiongrid {
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
    grid-auto-rows: 1fr;
}

.productiongrid .griditem:first-of-type {
    border-right: 0px dashed #FF06F0;
    background-size: 0px 0px;
}

.productiongrid .griditem p {
    text-align: left;
    width: 100%;
    margin: 0 auto;
}


/*.slidetext { font-size: 24px;line-height: 34px;width:75%;bottom:40%;left: 20px;}*/
.slidetext {
        font-size: 24px;
        font-weight:700;
        line-height: 34px;
        width: 75%;
        bottom: 100px;
        left: 20px;
        top: auto;
        transform: none;
        position: absolute;
    }
.slidetitle {line-height: 30px; display:none;}

.slick-dots {
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    transform: none;
    list-style: none;
    padding-left: 25px;
    text-align: left;
}

.carousel {width:100%; height:calc(100vh - 0px)!important; position:relative; padding: 0px;}
/*.logo {height:auto;}
.logo img {
    width: auto;
    height: 35px;
    margin: 28px 28px 28px 28px;
}

.menubutton {
    cursor: pointer;
    width: auto;
    height: auto;
    background-color: #F5F5F5;
    float: right;
}

.menuopen {
    width: 37px;
    height: 25px;
    margin-top: auto;
    margin-left: auto;
    transition: all .6s ease-out;
    padding: 28px;
}*/

}

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




  .nav ul li {font-size:32px;list-style:none;text-transform:uppercase; height:50px;}
.nav ul {margin-top: 150px;}

.nav {max-width:auto;margin:0 auto; text-align:right;margin-right:70px;}

/*.menubutton {
    cursor: pointer;
    width: 64px;
    height: 54px;
    background-color: #F5F5F5;
    float: right;
}

.menuopen {
    width: 26px;
    height: 17px;
    margin-top: 19px;
    margin-left: 19px;
    transition: all .6s ease-out;
}
.menuclose {
    width: 17px;
    height: 17px;
    margin-top: 19px;
    margin-left: 23.5px;
    transition: all .6s ease-out;
}

.logo {
    width: auto;
    height: 84px;
    float: left;
    background-color: #F5F5F5;
}

.logo img {
    width: 37px;
    height: auto;
    margin: 19px 19px 19px 19px;
}*/

.thumbnailblank:hover {opacity:0;}
.thumbnailblank:hover + .readmoreOL {opacity:0;}

/*.csdatawrap {width:auto; height:auto;text-align:center;position:absolute;left:0;right:0; top:150px;}*/
/*.cscontent img {margin:0 auto; width:100px; margin-bottom:40px;}*/
.csheadline {font-size:30px; text-transform:uppercase;text-align:center;font-weight:600;}
.cscontacts {text-align:center; margin-top:90px; font-size:20px; line-height:28px;}
.cscontent img {margin:0 auto; width:110px; margin-bottom:50px;}

.csdatawrap {
    width: auto;
    height: auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 240px);
}

}

@media only screen and (max-width: 550px) {
  /*.playtrailer {bottom:20px;}*/


}

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


.gallerygrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    grid-auto-rows: 1fr;
}
}

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

.nav {max-width:auto;margin:0 auto; text-align:right;margin-right:25px;}
.team1grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}
/*.team2grid {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    grid-auto-rows: 1fr;
}*/
}

@media only screen and (max-width: 400px) {
  .nav ul li {font-size:24px;list-style: none;text-transform:uppercase;}
  .nav ul li {height: 45px;}
}

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

  /*.nav ul li {font-size:28px;list-style: none;text-transform:uppercase;}*/

  .gallerygrid {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 15px;
      grid-auto-rows: 1fr;
  }

}