@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Strait&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bellota:wght@700&display=swap');


/* Prevent page scroll when modal-open class is on body */
    body.modal-open {
      overflow: hidden;
    }

/* Overlay */
    #modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
    }

/* Modal box */
    #modal-box {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0em;
      width: 50%;
      max-width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      border-radius: 4px;
      z-index: 1001;
      cursor: pointer;          /* show pointer to hint clickability */
    }

/* Close button in top-right, above everything */
    #modal-close {
      position: absolute;
      top: 0.5em;
      right: 0.5em;
      background: rgba(76,121,188,.95);
      color: #fff;
      border: none;
      padding: 0.5em .75em;
      font-size: 1.2em;
      line-height: 1;
      cursor: pointer;
      border-radius: 2px;
      z-index: 1002;            /* sits above the modal box */
    }


* {
    margin: 0; 
	padding: 0;
	list-style: none;
	border: none;
	text-decoration: none;
    font-family: 'Encode Sans Condensed', sans-serif;
    font-size: 1em;
    line-height: 1.6em;
    letter-spacing: .02em;
    color: rgba(0,0,0,1);
    hyphens: none
}

body {
    background-color:rgba(76,121,188,.95);
}
.hidden {opacity: 0; height: 0;}

::placeholder {
  color:rgba(0,0,0,.4);
  opacity: 1
}

:-ms-input-placeholder {
  color:rgba(0,0,0,.4)
}

::-ms-input-placeholder {
  color:rgba(0,0,0,.4)
}


.clickLinks {
    color: rgba(255,255,255,1.00);
    font-size: 1.1em;
    text-align: center
}
.read-more-content {
    display: none;
    margin-top: 0px
}

.read-more-btn {
    cursor: pointer;
    color: rgba(255,255,255,1.00)
}

.requiredSymbol {
    margin-left: 5px;
    color:rgba(255,255,255,1.00)
}

input:focus::placeholder {
    color: transparent;
    transition: 0.5s
}

input[type=text]:focus {
    border: 0px solid #FFFFFF
}
.wrapper{
    max-width: 95%;   
    margin: 0 auto;
    padding: 0px
}

p {
    font-size: clamp(14px, 1.6vw, 18px);
    margin: 0;
    padding: 0
}

p.about {
    font-size: clamp(16px, 1.7vw, 20px);
    margin: 0 0 15px 0;
    padding: 0
}

.paraPrivacy {
    font-size: clamp(16px, 1.8vw, 18px);
    margin: 0 0 15px 0;
    padding: 0;
    line-height: 2em
}

h1 {
    font-size: clamp(18px, 3vw, 25px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform:uppercase;
    color: rgba(255,255,255,1.00)
}

.productions {
    font-size: clamp(18px, 3vw, 25px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin-top: 8px;
    margin-bottom: 10px;
    text-transform:uppercase;
    text-align: center
}

h2 {
    font-size: clamp(18px, 3vw, 25px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    text-transform:uppercase;
    color: rgba(255,255,255,1.00)
}


h3 {
    font-size: clamp(14px, 3vw, 18px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin-bottom: 20px;
    color: rgba(255,255,255,1.00)
}

.last {
    font-size: clamp(18px, 3vw, 25px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 500;
    margin-bottom: 5px
}

.name {
    font-size: clamp(15px, 2.2vw, 22px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin: 5px 0 0px 0;
    color: rgba(255,255,255,1.00)
}

.h2Privacy {
    font-size: clamp(14px, 2vw, 16px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
    margin: 15px 0 
}

.job {
    font-size: clamp(16px, 2vw, 18px);
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 500;
    margin: 0 0 5px   
}

container {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(12, 1fr)
}

.span1 {
    grid-column: span 1
}

.span2 {
    grid-column: span 2
}

.span3 {
    grid-column: span 3
}

 .span4 {
    grid-column: span 4
}

 .span5 {
    grid-column: span 5
}

.posterSpan {
    grid-column: span 4
}

.span6 {
    grid-column: span 6
}

.span7 {
    grid-column: span 7
}

.span8 {
    grid-column: span 8
}

.span9 {
    grid-column: span 9
}

.span10 {
    grid-column: span 10
}

.span11 {
    grid-column: span 11
}

.span12 {
    grid-column: span 12;
    margin: 0;
    padding: 0
}

.posterImg {
    width: 100%;
    height: 100%
}

.posterImg {
    border: 1px solid rgba(255,255,255,0);
    border-radius: 6px
}

.posterImg:hover {
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 6px;
    box-shadow: rgba(18, 49, 68, 0.5) 0px 4px 12px;
    transition: .2s
}

.main {
    grid-column: span 12;
    gap: 20px;
    grid-template-columns: repeat(6, 1fr);
    width: 80%;
    margin: auto
}

.bio{
    grid-column: span 4;
    margin-top: 10px
}

.bioImg {
    width: 100%;
    margin: 0 0;
    border-radius: 6px
}

.readMore {
    color: rgba(255,255,255,.5); 
    margin-top: 5px; 
    font-size: clamp(10px, 1.2vw, 12px)
}

.readLess {
    color: rgba(255,255,255,.5); 
    margin-top: 5px; 
    font-size: clamp(10px, 1.2vw, 12px)
}

.logos {
    width: clamp(120px, 15vw, 150px);
    margin: 30px 4%
}

.newsImg {
    width: 100%;
    border-radius: 10px 10px 0 0;
    border-bottom: 3px solid rgba(212,89,10,1);
}

.newsDate {
    background-color: rgba(255,255,255,0);
    margin-top: -7px;
    padding-bottom: 10px;
    font-size: clamp(12px, 2vw, 12px)
}

.newsHr {
    border-top: 1.5px solid rgba(212,89,10,1)
}

a.textLink {
    text-decoration: none;
    color:rgba(255,255,255,.7);
    transition: all ease-in-out .2s;
    overflow-wrap: break-word
}

.textLink a:visited {
}

.textLink:hover {
    color:rgba(255,255,255,1.00);
    text-decoration:none;
    transition: all ease-in-out .2s
}

@media (min-width: 280px){
 .fillerLink2 {
    display: none;
    grid-column: span 2;
}
    
    .watchPopUpScreen {
    color:rgba(255,255,255,1.00); 
    margin: 1%;
    display: none
}
    
    .watchPopUpMob {
    color:rgba(255,255,255,1.00); 
    margin: 1%;
    display: block
}

.viewPopUp {
    display: block;
    margin: 3% 0 4% 0;
    font-weight: 600;
    color: rgba(76,121,188,.95)
}
    
    .parPopUp {
    width: 85%;
    margin: auto
}
    
    .imgPopUp {
    width: 88%;
    border-radius: 6px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    margin-bottom: 2%
}
    
    .rsLogoPopUp {
    width: 60%;
    margin: 5% 0 0 0
}
    
    /* Modal box */
    #modal-box {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0em;
      width: 90%;
      max-width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      border-radius: 4px;
      z-index: 1001;
      cursor: pointer;          /* show pointer to hint clickability */
    }
    
        /* Close button in top-right, above everything */
    #modal-close {
      position: absolute;
      top: 3%;
      right: 1em;
      background: rgba(76,121,188,.95);
      color: #fff;
      border: none;
      padding: 0.5em .75em;
      font-size: .8em;
      line-height: 1;
      cursor: pointer;
      border-radius: 2px;
      z-index: 1002;            /* sits above the modal box */
    }
    
    
    .dfLogo {
    width: 25%
} 
    
    .galaFilmLogo {
    width: 10%;
    margin-bottom: 10px
}

.beetzLogo {
    width: 40%;
    margin: 10px 0 10px 0
}   
    .implsionProd {
    grid-column: span 12;
    text-align: center;
    width: 100%;
    margin: 0 
}  

.implsionImgLinks {
    grid-column: span 12;
    width: 100%;
    margin: auto -1% auto 0
}
    
.listScreen {
    display: none
}

.listMob {
    display: block
}
    
   .sphereAbacusLogo {
    width: 80%
} 
    
        .fillerLink {
    display: none;
            grid-column: span 12;
}

.vidSpan   {
    grid-column: span 12;
    width: 100%;
    margin: auto
}
    .implsionImgBot {
    width: 100%;
    border-radius: 6px;
    margin: 0 auto 10px auto;

}
    .implsionImgTop {
        width: 100%;
        margin: 10px 0 20px 0;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
       
    }  
    
    .implsionTextTop {
    width:90%; 
    margin: auto; 
    text-align: center
}
    
      .implsionText {
    grid-column: span 12;
    padding: 0 20px 10px 20px;    color: rgba(255,255,255,1.00);
          font-size: clamp(18px, 1.7vw, 18px);
}  
    
   .implsionCols {
    column-count: 1;
  column-gap: 40px;
  column-rule-style: solid ;
  column-rule-color: rgba(255,255,255,1.00);
  column-rule-width: 1px;
       text-align: center
} 
    
.posterSpan {
    grid-column: span 12
}
    
.newsSpan {
    grid-column: span 12
}
 
.hdrWrapper {
    margin-top: 2%;
    margin-bottom: .5%
}

.hdrLogo {
    width: 80%;
    margin: 5% 10% 5% 10%
}

.hdrLogoImg {
    width: 100%;
    width: 80%;
    margin: 0 10%
}
    
.hdrNav {
    width: 100%;
    margin: 0;
    justify-content: flex-end;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}

.hdrNav  > ul {
    display: flex;
    justify-content: center;
}

.hdrNav > ul > li {    
}
    
.hdrNav > ul > li > a {
    margin: 0 8px 0 8px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(18px, 1.4vw, 18px);
    font-weight: 600
}

.hdrNav > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.hdrNav li .hdrNavActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(18px, 1.4vw, 18px)
}

.privacyWrapper {
    grid-column: span 12;
    width: 100%;
    text-align: left; margin: 0 auto
}
    
.listHDWrapper {
    margin-bottom: .6em
}

.listHDNo {
    float: left;
    color: rgba(255,255,255,1.00);
    font-size: 16px
}
        
.listHD {
    padding-left: 2em;      
    color: rgba(255,255,255,1.00);
    font-size: 16px
}
        
.listSBWrapper {
    margin-bottom: .6em;
}
        
.listSB0 {
    padding-left: 0em;
    font-size: 18px
}
        
.listSB1No {
    float: left;
    padding-left: 0em;
    font-size: 18px
}
        
.listSB1 {
    margin-left: 3em;
    font-size: 18px
}
        
.bList > li {
    margin-left: 1em;
    padding-left: .5em;
    list-style: disc;
    font-size: 18px
}
        
.listSB2No {
    float: left;
    padding-left: 0em;
    font-size: 18px
}
        
.listSB2 {
    margin-left: 3em;
    font-size: 18px
}
        
.listSB22No {
    float: left;
    padding-left: 0em;
    font-size: 18px
}
        
.listSB22 {
    margin-left: 3em;
    font-size: 18px
}
        
.listSB3No {
    float: left;
    padding-left: 0em;
    font-size: 18px
}
        
.listSB3 {
    margin-left: 3em;
    font-size: 18px
}
    
.privacyDate {
    margin-top: 30px
}
    
.bioWrapper {
    grid-column: span 12;
	width: 90%;
    margin: 0 auto
}
    
.bioPara {
    font-size: clamp(16px, 1.5vw, 16px);
    margin: 0 0 10px 0;
    padding: 0
}

.newsTextWrapper {
    background-color: rgba(255,255,255,1);
    border-radius:  0 0 9px 9px;
    height: auto;
    min-height: 230px;
    margin: -7px 0px 0 0;
    padding: 17px 15px 25px 15px
}

.newsHeadline {
    background-color: rgba(255,255,255,0); 
    color:rgba(212,89,10,1.00); 
    font-family: 'Bellota', cursive;
    padding: 10px 10px;
    font-size: clamp(16px, 2vw, 20px);
    text-align: center  
}
    
.newsText {
    background-color: rgba(255,255,255,.0); 
    text-align: center;
    font-size: clamp(16px, 2vw, 16px);
    padding: 10px 0 0 0
}
    
.ftrLogo {
    grid-column: span 4;
    display: none;
    justify-content: flex-end;
    align-items:flex-end
}

.ftrLogoImg {
    width: 0;
    margin: 0
}
    
 .ftrNavLeft {
    margin-top: 10px;
    margin-bottom: 5px;
    display: none;
    justify-content:flex-start;
    align-items:flex-end
}

.ftrNavLeft  > ul {
}

.ftrNavLeft > ul > li {
    float: left
}
    
.ftrNavLeft > ul > li > a {
    margin: 0 15px 0 0;
    /*color:rgba(18,49,68,1.0);*/
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(12px, 1.4vw, 16px)
}

.ftrNavLeft > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavLeft li .ftrNavLeftActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(12px, 1.4vw, 16px)
}
    
.ftrNavRight {
    margin-bottom: 5px;
    display: none;
    justify-content: flex-end;
    align-items:flex-end
}

.ftrNavRight  > ul {
}

.ftrNavRight > ul > li {
    float: left
}
    
.ftrNavRight > ul > li > a {
    margin: 0 0 0 15px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(12px, 1.4vw, 16px)
}

.ftrNavRight > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavRight li .ftrNavRightActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(12px, 1.4vw, 16px)
}

.ftrMobWrapper {
    display:block
}
    
.ftrLogoMobImg {
    width: 60%;
    margin: 0 20%
}

.ftrNavMob {
    width: 100%;
    margin: 10px 0 0 0;
    justify-content: flex-end;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}

.ftrNavMob > ul {
    display: flex;
    justify-content: center;
}

.ftrNavMob > ul > li {    
}
    
.ftrNavMob > ul > li > a {
    margin: 0 10px 0 10px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(16px, 1.8vw, 16px);
    font-weight: 600
}

.ftrNavMob > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavMob li .ftrNavMobActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(16px, 1.8vw, 16px)
}

.ftrNavCenter {
    margin-top:0;
    margin-bottom: 10px;
    display: flex;
    justify-content:center;
    align-items:center;
    text-align: center
}

.ftrNavCenter  > ul {
}

.ftrNavCenter > ul > li {
    
}
    
.ftrNavCenter > ul > li > a {
    margin: 0 7px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: 14px;
    font-weight: 600
}

.ftrNavCenter > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavCenter li .ftrNavRightActive {
    color:rgba(255,255,255,1.00);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: 14px;
    font-weight: 600
}

.privacy {
    margin-top:-20px;
    margin-bottom: -10px;
    display: flex;
    justify-content:center;
    align-items:center
}
    
.privacy > a {
    color:rgba(0,0,0, 1);
    transition: all ease-in-out .2s;
    margin: 0 10px;
    font-size: clamp(16px, 1vw,16px)
}

.privacy > a:hover {
    color:rgba(255,255,255,1);
    transition: all ease-in-out .2s
}

.privacy a:active {
    color:rgba(255,255,255,1.00);
    font-size: clamp(16px, 1vw, 16px)
}

.copyRight {
    text-align: center;
    margin-bottom: 50px;
    color: rgba(0,0,0,.8);
    font-size: clamp(14px, 1vw, 14px)
}
    
.formWrapper {
    grid-column: span 12;
    text-align:left;
    width: 90%;
    margin: 0 5% 2% 5%
}
    
.contactForm {
    border: 1px solid rgba(255,255,255,1.00);
    border-radius: 6px;
    margin: 0;
    padding: 30px;
    background-color: rgba(251,251,251,.3);
    box-shadow: rgba(18, 49, 68, 0.5) 0px 4px 12px
}
    
 .formHeading {
      margin-bottom: 20px;
      text-align: center;
      font-size: clamp(20px, 1vw, 22px);
      color: rgba(255,255,255,1.00);
      text-transform:uppercase
  } 
    
.formDetails {
    margin-bottom: 10px;
    background-color: rgba(251,251,251,0)
}
    
.formLabel {
    display: block;
    margin-bottom: 10px;
    background-color: rgba(251,251,251,0)
}
    
.formInput {
    border-bottom: 1px solid rgba(255,255,255,.5);
    border-top: 1px solid rgba(255,255,255,.5);
    border-left: 1px solid rgba(255,255,255,.5);
    border-right: 1px solid rgba(255,255,255,.5);
    border-radius: 0px;
    width: 90%;
    margin: 0 auto 10px;
    background-color: rgba(251,251,251,0);
    height: 30px;
    padding: 5px 15px
}
    
.formTextArea {
    border:  solid 1px rgba(255,255,255,.5);
    background-color: rgba(251,251,251,0);
    width: 95%;
    height: 200px;
    padding: 5px 15px
}
    
.formSubmitBtn {
    width: 30%;
    margin-left: 35%;
    margin-top: 10px;
    background-color: rgba(251,251,251,.5);
    height: 40px;
    border: solid 1px rgba(255,255,255,1.00);
    color: rgba(0,0,0,1.00);
    cursor: pointer
}
    
.formSubmitBtn:hover {
    background-color: rgba(18,49,68,1);
    border: solid 1px rgba(255,255,255,1.00);
    color: rgba(255,255,255,1.00)
}
    
.fillIn {
    text-align: center;
    margin-top: 25px;
    font-size: clamp(.9em, 1vw, .9em)
}
    
.sendingForm {
    text-align: center;
    margin-top: 10px
}
       
#consent-popup {
    display: block;
    gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 30px;
    transition: opacity 1s ease;
    background-color:rgba(18,49,68,1);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 80%;
    margin: 0 auto
}

.consentClose {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-right: -20px;
    transform: rotate()
}

.x {
    width: 12px;
    height: 12px;
    cursor: pointer
}

.x:hover {
}

.consentImg {
    width: 25px;
    margin-right: 10px;
    margin-bottom: -5px;
    opacity: 0.8
}

.consentHeading {
    color: rgba(254,254,254,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentPara {
    color: rgba(255,255,255,1.00); 
    font-size: .9em;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    grid-column: span 12
}

.btnGroup {    
    grid-column: span 12;
    display: flex; 
    justify-content: flex-end;
    margin-top: 20px
}

.consentReadMore {
    color: rgba(255,255,255,1.00); 
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    margin-left: 5px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentReadMore:hover {
    text-decoration: underline
}

#accept  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    background-color: rgba(255,255,255,1.00);
    height: 25px;
    border: 1px solid rgba(255,255,255,1.00);
    border-radius: 3px;
    transition: .3s;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-weight: 500;
    font-size: .9em
}

#accept:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2);
}

#decline  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    height: 25px;
    border-radius: 3px;
    transition: .3s;
    color: rgba(255,255,255,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    border: 1px solid rgba(255,255,255,0);
    font-size: .9em
}

#decline:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2)
}

.formSent {
    text-align: center
}
    
.hr {
    border-top: 1px solid rgba(18,49,68,0.4);
}

.hrLast {
    border-top: 1px solid rgba(18,49,68,0.4);
    margin: 1em 0 1em 0
}
    
}

@media (min-width: 600px) {
 .fillerLink2 {
    display: none;
    grid-column: span 4;
}

    .viewPopUp {
    display: block;
    margin: 2% 0 2% 0;
    font-weight: 600;
    color: rgba(76,121,188,.95)
}
    
    .watchPopUpScreen {
    color:rgba(255,255,255,1.00); 
    margin: .5%;
    display: block
}
    
    .watchPopUpMob {
    color:rgba(255,255,255,1.00); 
    margin: 1%;
    display: none
}
    
    .parPopUp {
    width: 80%;
    margin: auto
}
    
    .imgPopUp {
    width: 80%;
    border-radius: 6px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
    
    .rsLogoPopUp {
    width: 50%;
    margin: 5% 0 0 0
}
    
    /* Modal box */
    #modal-box {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0em;
      width: 70%;
      max-width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      border-radius: 4px;
      z-index: 1001;
      cursor: pointer;          /* show pointer to hint clickability */
    }
    
    /* Close button in top-right, above everything */
    #modal-close {
      position: absolute;
      top: 1em;
      right: 1em;
      background: rgba(76,121,188,.95);
      color: #fff;
      border: none;
      padding: 0.5em .75em;
      font-size: .8em;
      line-height: 1;
      cursor: pointer;
      border-radius: 2px;
      z-index: 1002;            /* sits above the modal box */
    }
    
    .implsionImgLinks {
    grid-column: span 12;
    width: 100%;
    margin: auto
}
    
    .dfLogo {
    width: 10%
}
    
    .galaFilmLogo {
    width: 6%;
    margin-bottom: 10px
}

.beetzLogo {
    width: 30%;
    margin-bottom: 10px
}  
     .implsionTextTop {
    width:70%; 
    margin: auto; 
    text-align: center
}
 .listScreen {
    display: none
}

.listMob {
    display: block
} 
    .implsionImgTop {
        width: 75%;
        margin: 10px 0 20px 0;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
       
    } 
    
    .sphereAbacusLogo {
        width: 50%   
    }
        .fillerLink {
    display: none
}
    
    .implsionText {
    grid-column: span 6
} 
    
    
 .implsionCols {
    column-count: 1;
  column-gap: 40px;
  column-rule-style: solid ;
  column-rule-color: rgba(255,255,255,1.00);
  column-rule-width: 1px;
}   
    
.implsionProd {
    grid-column: span 12;
    text-align: center;
    width: 100%;
    margin: 0
}    
    
    
    

.posterSpan {
    grid-column: span 6 
}
    
.newsSpan {
    grid-column: span 6
}

.hdrWrapper {
    margin-top: 2%;
    margin-bottom: .5%
}

.hdrWrapper {
    display: flex;
    margin-top: 2%;
    margin-bottom: .5%
}

.hdrLogo {
    width: clamp(280px, 20vw, 350px);
    height: 0px;
    margin: 0;
    display: flex;
    justify-content:flex-start;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}
    
    .hdrLogoImg {
    width: 100%;
    margin-bottom: -.5em
}

.hdrNav {
    width: 90%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}
    
.bioWrapper {
    grid-column: span 6;
	width: 90%;
    margin: 0 auto
}
    
.newsTextWrapper {
    background-color: rgba(255,255,255,1);
    border-radius:  0 0 9px 9px;
    height: clamp(230px, 3vw, 220px);
    margin: -7px 0px 0 0;
    padding: 17px 15px 15px 15px
}
    
.ftrLogoMobImg {
    width: 30%;
    margin: 0 35%
}
 
.formWrapper {
    grid-column: span 12;
    text-align:left;
    width: 70%;
    margin: 0 15% 2% 15%
}
    
 #consent-popup {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 30px;
    transition: opacity 1s ease;
    background-color:rgba(18,49,68,1);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 90%;
    margin: 0 auto
}

.consentClose {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-right: -20px;
}

.x {
    width: 12px;
    height: 12px;
    cursor: pointer
}

.x:hover {

}

.consentImg {
    width: 25px;
    margin-right: 10px;
    margin-bottom: -5px;
    opacity: 0.8
}

.consentHeading {
    color: rgba(254,254,254,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentPara {
    color: rgba(255,255,255,1.00); 
    font-size: .9em;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    grid-column: span 9
}

.btnGroup {    
    grid-column: span 3;
    display: flex; 
    justify-content: flex-end;
    margin-top: 10px
}

.consentReadMore {
    color: rgba(255,255,255,1.00); 
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    margin-left: 5px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentReadMore:hover {
    text-decoration: underline
}

#accept  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    background-color: rgba(255,255,255,1.00);
    height: 25px;
    border: 1px solid rgba(255,255,255,1.00);
    border-radius: 3px;
    transition: .3s;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-weight: 500;
    font-size: .9em
}

#accept:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2)
}

#decline  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    height: 25px;
    border-radius: 3px;
    transition: .3s;
    color: rgba(255,255,255,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    border: 1px solid rgba(255,255,255,0);
    font-size: .9em
}

#decline:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2)
}

.formSent {
    text-align: center
}
    
.hr {
    border-top: 1px solid rgba(18,49,68,0.4);
}

.hrLast {
    border-top: 1px solid rgba(18,49,68,0.4);
    margin: 1em 0 1em 0
}
    
}

@media (min-width: 992px){  

.fillerLink2 {
    display: block;
    grid-column: span 2;
}

    .watchPopUpScreen {
    color:rgba(255,255,255,1.00); 
    margin: 0%;
    display: block
}
    .parPopUp {
    width: 70%;
    margin: auto
}
    
    .imgPopUp {
    width: 75%;
    border-radius: 6px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
    
    .rsLogoPopUp {
    width: 40%;
    margin: 5% 0 0 0
}
    
    /* Modal box */
    #modal-box {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0em;
      width: 60%;
      max-width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      border-radius: 4px;
      z-index: 1001;
      cursor: pointer;          /* show pointer to hint clickability */
    }
    
    /* Close button in top-right, above everything */
    #modal-close {
      position: absolute;
      top: 1em;
      right: 1em;
      background: rgba(76,121,188,.95);
      color: #fff;
      border: none;
      padding: 0.5em .75em;
      font-size: .9em;
      line-height: 1;
      cursor: pointer;
      border-radius: 2px;
      z-index: 1002;            /* sits above the modal box */
    }
    
    .implsionImgLinks {
    grid-column: span 12;
    width: 100%;
    margin: auto
}
    
    .dfLogo {
    width: 8%
}
    
    .galaFilmLogo {
    width: 4%;
    margin-bottom: 10px
}

.beetzLogo {
    width: 30%;
    margin-bottom: 10px
}   
    
     .implsionTextTop {
    width:60%; 
    margin: auto; 
    text-align: center
}
    
.listScreen {
    display: block
}

.listMob {
    display: none
}
    
 .implsionImgTop {
        width: 60%;
        margin: 10px 0 20px 0;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
       
    } 
       .sphereAbacusLogo {
           width: 30%
    }
    .fillerLink {
    display: none;
        grid-column: span 1;
}
    
    
  
.posterSpan {
    grid-column: span 4
}
    
.newsSpan {
    grid-column: span 4
}
    
.vidSpan {
    grid-column: span 6;
    width: 99%;
    margin: auto
}
    
.implsionCols {
    column-count: 2;
  column-gap: 40px;
  column-rule-style: solid ;
  column-rule-color: rgba(255,255,255,1.00);
  column-rule-width: 1px;
    text-align:left
}
    
    .implsionText {
    grid-column: span 6
}
    
    
.implsionProd {
    grid-column: span 12;
    text-align:center;
    width: 100%;
    margin: 0;
    padding-left:0px
}

.hdrWrapper {
    display: flex;
    margin-top: 2%;
    margin-bottom: .5%
}

.hdrLogo {
    width: clamp(180px, 20vw, 350px);
    height: 0px;
    margin: 0;
    display: flex;
    justify-content:flex-start;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}
    
.hdrLogoImg {
    width: 100%;
    margin: 0 0 -.6em 0
}

.hdrNav {
    width: 90%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items:flex-end;
    align-content:flex-end;
    align-self:baseline;
    text-align:end
}
    
.hdrNav  > ul {
}

.hdrNav > ul > li {
     float: left
}
    
.hdrNav > ul > li > a {
    margin-left: 15px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(12px, 1.4vw, 18px);
    font-weight: 400
}

.hdrNav > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.hdrNav li .hdrNavActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(12px, 1.4vw, 18px)
} 
    
.privacyWrapper {
    grid-column: span 12;
    width: 80%;
    text-align: left; 
    margin: 0 auto
}
    
.listHDWrapper {
    margin-bottom: .6em
}

.listHDNo {
    float: left;
    color: rgba(255,255,255,1.00);
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listHD {
    padding-left: 2em;      
    color: rgba(255,255,255,1.00);
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSBWrapper {
    margin-bottom: .6em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB0 {
    padding-left: 2em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB1No {
    float: left;
    padding-left: 2em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB1 {
    margin-left: 4.8em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.bList > li {
    margin-left: 2em;
    padding-left: .5em;
    list-style: disc;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB2No {
    float: left;
    padding-left: 4.8em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB2 {
    margin-left: 8em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB22No {
    float: left;
    padding-left: 4.8em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB22 {
    margin-left: 8.5em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB3No {
    float: left;
    padding-left: 8em;
    font-size: clamp(14px, 1.6vw, 18px)
}
        
.listSB3 {
    margin-left: 10em;
    font-size: clamp(14px, 1.6vw, 18px)
}
    
.privacyDate {
    margin-top: 30px
} 
    
.bioWrapper {
    grid-column: span 6;
    width: 55%;
    margin: 0;
    justify-self: end;
}

.bioWrapper + .bioWrapper {
    justify-self: start;
}
	

    
.newsTextWrapper {
    background-color: rgba(255,255,255,1);
    border-radius:  0 0 9px 9px;
    height: clamp(300px, 3vw, 350px);
    margin: -7px 0px 0 0;
    padding: 17px 15px 15px 15px
}
    
.newsHeadline {
    background-color: rgba(255,255,255,0); 
    color:rgba(212,89,10,1.00); 
    font-family: 'Bellota', cursive;
    padding: 10px 10px;
    font-size: clamp(14px, 2vw, 20px);
    text-align: center  
}
    
.newText {
    background-color: rgba(255,255,255,.0); 
    text-align: left;
    font-size: clamp(14px, 2vw, 16px);
    padding: 10px 0 0 0
}

.bioPara {
    font-size: clamp(12px, 1.5vw, 14px);
    margin: 0 0 10px 0;
    padding: 0
}

.ftrLogo {
    grid-column: span 4;
    display:block
}

.ftrLogoImg {
    width: 60%;
    margin: 0 20% 0 20%
}
    
.ftrNavLeft {
    display:block
}

.ftrNavLeft  > ul {
}

.ftrNavLeft > ul > li {
    float: left
}
    
.ftrNavLeft > ul > li > a {
    margin: 0 15px 0 0;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(12px, 1.4vw, 16px)
}

.ftrNavLeft > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavLeft li .ftrNavLeftActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(12px, 1.4vw, 16px)
}
    
.ftrNavRight {
    display:flex;
    align-items: flex-start;
    margin-top: 10px
}

.ftrNavRight  > ul {
}

.ftrNavRight > ul > li {
    float: left
}
    
.ftrNavRight > ul > li > a {
    margin: 0 0 0 15px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(12px, 1.4vw, 16px)
}

.ftrNavRight > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavRight li .ftrNavRightActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(12px, 1.4vw, 16px)
}
    
.ftrMobWrapper {
    display: none
}
    
.ftrLogoMobImg {
    width: 0
}

.ftrNavMob  > ul {
}

.ftrNavMob > ul > li {
     float: left
}
    
.ftrNavMob > ul > li > a {
    margin-left: 10px;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: clamp(16px, 1.4vw, 16px);
    font-weight: 600
}

.ftrNavMob > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavMob li .ftrNavMobActive {
    color:rgba(255,255,255,1.00);
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: clamp(16px, 1.4vw, 16px)
} 

.ftrNavCenter {
    margin-top:0;
    margin-bottom: 0px;
    display: flex;
    justify-content:center;
    align-items:center
}

.ftrNavCenter  > ul {
}

.ftrNavCenter > ul > li {
    float:left
}
    
.ftrNavCenter > ul > li > a {
    margin: 0 7.5px ;
    color:rgba(0,0,0,1.00);
    transition: all ease-in-out .2s;
    font-size: 16px;
    font-weight: 400
}

.ftrNavCenter > ul > li > a:hover {
    color:rgba(255,255,255,1.00);
    transition: all ease-in-out .2s
}

.ftrNavCenter li .ftrNavRightActive {
    color:rgba(255,255,255,1.00);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255,255,255,1.00);
    font-size: 16px;
    font-weight: 400
}

.privacy {
    margin-top:0;
    margin-bottom: 0px;
    display: flex;
    justify-content:center;
    align-items:center
}

.privacy > a {

    color:rgba(0,0,0, 1);
    transition: all ease-in-out .2s;
    margin: 0 10px;
    font-size: clamp(10px, 1vw, 12px)
}

.privacy > a:hover {
    color:rgba(255,255,255,1);
    transition: all ease-in-out .2s
}

.privacy a:active {
    color:rgba(255,255,255,1.00);
    font-size: clamp(10px, 1vw, 12px)
}

.copyRight {
    text-align: center;
    margin-bottom: 50px;
    color: rgba(0,0,0,.8);
    font-size: clamp(10px, 1vw, 12px)
}
    
.formWrapper {
    grid-column: span 12;
    text-align:left;
    width: 40%;
    margin: 0 30% 1% 30%
}
    
.contactForm {
    border: 1px solid rgba(255,255,255,1.00);
    border-radius: 6px;
    margin: 0;
    padding: 20px;
    background-color: rgba(251,251,251,.3);
    box-shadow: rgba(18, 49, 68, 0.5) 0px 4px 12px
}
    
.formHeading {
    margin-bottom: 20px;
    text-align: center;
    font-size: clamp(20px, 1vw, 22px);
    color: rgba(255,255,255,1.00);
    text-transform:uppercase
}
    
.formDetails {
    margin-bottom: 10px;
    background-color: rgba(251,251,251,0)
}
    
.formLabel {
    display: block;
    margin-bottom: 5px;
    background-color: rgba(251,251,251,0)
}
    
.formInput {
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 0px;
    width: 92%;
    margin: 0 auto 0px auto;
    background-color: rgba(251,251,251,0);
    height: 20px;
    padding: 5px 15px;
    outline: none
}
    
.formInput:focus:invalid {
    border:1px solid rgba(162,0,2,1.00)
}
    
.formInput:focus:valid {
    border: 1px solid rgba(0,113,37,.7)
}
    
.formTextArea:focus:invalid {
    border:1px solid rgba(255,0,4,1.00)
}
    
.formTextArea:focus:valid {
    border: 1px solid rgba(0,204,20,1.00)
}
    
input:focus, textarea:focus, select:focus{
    outline: none
}
    
input:focus:invalid, textarea:focus {
    border:1px solid rgba(254,254,254,1.00)
}
    
input:focus:valid, textarea:focus {
    border: 1px solid #64C364
}

.formTextArea {
    border:  solid 1px rgba(255,255,255,.5);
    background-color: rgba(251,251,251,0);
    width: 92%;
    height: 300px;
    padding: 5px 15px;
    outline:none
}
    
.formSubmitBtn {
    width: 20%;
    margin-left: 40%;
    margin-top: 5px;
    background-color: rgba(251,251,251,.5);
    height: 30px;
    border: solid 1px rgba(255,255,255,1.00);
    color: rgba(0,0,0,1.00);
    cursor: pointer
}
    
.formSubmitBtn:hover {
    background-color: rgba(18,49,68,1);
    outline: none
}
    
.fillIn {
    text-align: center;
    margin-top: 25px
}
    
.formSent {
    text-align: center
}
    
.sendingForm {
    text-align: center;
    margin-top: 10px
}

#consent-popup {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(12, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 30px;
    transition: opacity 1s ease;
    background-color:rgba(18,49,68,1);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    width: 90%;
    margin: 0 auto
}

.consentClose {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
    margin-right: -20px;
    transform: rotate()
}

.x {
    width: 12px;
    height: 12px;
    cursor: pointer
}

.x:hover {

}

.consentImg {
    width: 25px;
    margin-right: 10px;
    margin-bottom: -5px;
    opacity: 0.8
}

.consentHeading {
    color: rgba(254,254,254,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentPara {
    color: rgba(255,255,255,1.00); 
    font-size: .9em;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    grid-column: span 9
}

.btnGroup {    
    grid-column: span 3;
    display: flex;
    justify-content: flex-end;
    margin-top: 0px
}

.consentReadMore {
    color: rgba(255,255,255,1.00); 
    font-size: 1em;
    cursor: pointer;
    text-decoration: none;
    margin-left: 5px;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"
}

.consentReadMore:hover {
    text-decoration: underline
}

#accept  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    background-color: rgba(255,255,255,1.00);
    height: 25px;
    border: 1px solid rgba(255,255,255,1.00);
    border-radius: 3px;
    transition: .3s;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-weight: 500;
    font-size: .9em
}

#accept:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2)
}

#decline  {
    display: block;
    padding: 0px 5px 0px 5px;
    margin-left: 10px;
    height: 25px;
    border-radius: 3px;
    transition: .3s;
    color: rgba(255,255,255,1.00);
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    border: 1px solid rgba(255,255,255,0);
    font-size: .9em
}

#decline:hover  {
    background-color: rgba(255,255,255,.2);
    color: rgba(255,255,255,1.00);
    border: 1px solid rgba(255,255,255,.2)
}
    
.hr {
    border-top: 1px solid rgba(18,49,68,0.4);
}

.hrLast {
    border-top: 1px solid rgba(18,49,68,0.4);
    margin: .5em 0 .8em 0
}
    
}

@media (min-width: 1200px){
 .fillerLink2 {
    display: block;
    grid-column: span 2;
}
    .imgPopUp {
    width: 70%;
    border-radius: 6px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
    
    .rsLogoPopUp {
    width: 35%;
    margin: 5% 0 0 0
}
    
    /* Modal box */
    #modal-box {
      display: none;
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 0em;
      width: 50%;
      max-width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 2px 10px rgba(0,0,0,0.6);
      border-radius: 4px;
      z-index: 1001;
      cursor: pointer;          /* show pointer to hint clickability */
    }
    
        /* Close button in top-right, above everything */
    #modal-close {
      position: absolute;
      top: .5em;
      right: 0.5em;
      background: rgba(76,121,188,.95);
      color: #fff;
      border: none;
      padding: 0.5em .75em;
      font-size: 1.2em;
      line-height: 1;
      cursor: pointer;
      border-radius: 2px;
      z-index: 1002;            /* sits above the modal box */
    }
    
    .implsionImgLinks {
    grid-column: span 12;
    width: 50%;
    margin: auto
}
    
    .dfLogo {
    width: 8%
}
    
    .galaFilmLogo {
    width: 4%;
    margin-bottom: 15px
}

.beetzLogo {
    width: 30%;
    margin-bottom: 10px;
    grid-column: span 12;
}
    
     .implsionTextTop {
    width:50%; 
    margin: auto; 
    text-align: center
}
 .implsionImgTop {
        width: 45%;
        margin: 10px 0 20px 0;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.6);
       
    } 
    
       .sphereAbacusLogo {
    width: 30%
    }
    
    .fillerLink {
    display: block;
        grid-column: span 3;
}
    .posterSpan {
    grid-column: span 4
}
    .newsSpan {
    grid-column: span 4
}
    
    .vidSpan {
    grid-column: span 3;
        width: 99%;
    margin: auto
}
    .implsionText {
    grid-column: span 6
}
    
.implsionCols {
    column-count: 3;
  column-gap: 40px;
  column-rule-style: solid ;
  column-rule-color: rgba(255,255,255,1.00);
  column-rule-width: 1px;
    text-align: left
}
    
.implsionProd {
    grid-column: span 12;
    text-align: center;
    width: 100%;
    margin: 0

}


    
}

@media (min-width: 1400px){
.fillerLink2 {
    display: block;
    grid-column: span 3;
}
    
    .implsionImgLinks {
    grid-column: span 12;
    width: 50%;
    margin: auto
}
 .dfLogo {
    width: 6%
}   
    .galaFilmLogo {
    width: 4%;
    margin-bottom: 10px
}


         .sphereAbacusLogo {
    width: 20%
    }
    
    
    .fillerLink {
    display: block
}
    
    
    
    
    .posterSpan {
    grid-column: span 3
}
    .newsSpan {
    grid-column: span 3
}
    
    .vidSpan {
    grid-column: span 3;
        width: 99%;
    margin: auto
}
    .implsionText {
    grid-column: span 3
}
    
.implsionCols {
    column-count: 3;
  column-gap: 40px;
  column-rule-style: solid ;
  column-rule-color: rgba(255,255,255,1.00);
    column-rule-width: 1px;
    text-align: left

    }

    



}







.creditNames {
    color: rgba(255,255,255,1.00);
    font-weight: 500;
}



.implsionListSpace {
    line-height: 30px
}


























.vidSpan2 {
    grid-column: span 6;
        width: 99%;
    margin: auto
}