/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
/* Body & overall layout */
body {
    font-family: 'Cinzel', serif;
    line-height: 1.6;
    background: rgba(0,0,0,1);
    background:rgba(20,20,20,1);
    overflow-x: hidden;
    color:rgba(100,100,100,1);
}
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: rgba(20,20,20,1);
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ff7f50;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #fe9772;
  }
/* Header */
header {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
    
}
.but{
    display: none;
}
nav{
    position: fixed!important;
    top:0;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 10vh;
    /* background: transparent; */
    /* background:rgba(20,20,20,1); */
    z-index: 13;
    transition: .3s ease;
}
.logo{
    position: absolute;
    left:5%;
    top:50%;
    transform: translateY(-50%);
    color:white;
    text-align: left;
    line-height: 1;
}
.logo h1{
    font-family: 'Cinzel',serif;
    font-weight: 400;
}
.logo p{
    font-family: 'Cinzel',serif;
    font-size: .8rem;
    font-weight: 200!important;
    padding-left:.1rem;
}

nav .socials{
    
    display: flex;
    justify-content: space-evenly;
    align-items:center;
    position: absolute;
    right:5%;
    top:50%;
    transform: translateY(-50%);
    width: 125px;

}

.socials a{
    text-decoration: none;
    color:white;
}

 nav ul ,.mobile-nav-links ul {
    list-style-type: none;
    display: flex;
    align-items: center;
}

 nav ul li ,.mobile-nav-links ul li{
    display: inline;
    margin: 0 15px;
    font-size: .9rem;
}

 a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Cinzel',serif;
}
 a,.socials i{
    transition: .3s ease;
}
.nav-links a{
    mix-blend-mode: difference;
}
.nav-links a:hover,.socials i:hover{
    /* color:#ff7f50;
 color:#ff7f50; */
    color:#ff7f50;
 color:#ff7f50;
}
.nav-links a.active{
    color:#ff7f50;
 color:#ff7f50;
}
/* index reveal */
.overlay,.overlay2{
    /* color: white; */
    /* background: transparent; */
    color:#ff7f50;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: clip-path 10ms;
    /* background: radial-gradient(
        circle 500px at 50% 50% , transparent 10%, rgba(0,0,0,1)
        ); */
        display: grid;
        place-items: center;
    }
    .overlay2{
        background: transparent;
    z-index: 10;
    /* pointer-events: none; */
    }
    .overlay.show{
    /* clip-path: circle(180px at var(--x, 50%) var(--y, 50%)); */
    /* background: radial-gradient(
        circle 295px at var(--x, 50%) var(--y, 50%) , transparent 80%, rgba(0,0,0,.8) 95%,rgba(0,0,0,.9) 98%
    ); */
    z-index: 11;
}
.overlay2.show{
    /* clip-path: circle(260px at var(--x, 50%) var(--y, 50%)); */
    /* background: radial-gradient(
        circle 150px at var(--x, 50%) var(--y, 50%) , transparent 70%,rgba(0,0,0,.8) 90%  ,rgba(0,0,0,1)  
    ); */
    background: radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), transparent 80%, rgba(0, 0, 0, .5) 90%, rgba(0, 0, 0, .6) 95%, rgba(0, 0, 0, .75));
}

/* .revealed-area{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle 500px at 50% 50% , transparent 10%, rgba(0,0,0,1)
    );
    background: transparent;
    pointer-events: none;
    transition: .3s ease;
} */


/* hero */ 
.scroll{
    position: absolute;
    bottom:1%;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    cursor: pointer;
    /* width:30px;
    height: 40px; */
}
.scroll i{
    font-size: 2rem;
    position: relative;
    transition: .3s ease;
}
.scroll i:nth-of-type(1){
bottom:-14px;
font-size:1rem;
}
.scroll:hover > i:nth-of-type(1){
    transform: translateY(8px);
    }
.scroll:hover > i:nth-of-type(2){
transform: translateY(10px);
}
.swiper {
    width: 100%;
    height: 100%;
    /* filter:grayscale(.2); */
  }
.swiper-wrapper{
    height: 94%;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom:50px;
}
  .swiper-slide {
    background-position: center;
    background-size: cover;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    object-position: center center;
  }
  .swiper-button-prev,.swiper-button-next{
    color:rgba(250,250,250,1);
    z-index: 11;
  }
  .swiper-pagination-bullet{
    background: white!important;
  }
#hero {
    /* padding: 20px 0; */
    position: relative;
    width:100%;
    height: 100vh;
    color:white;
    display: grid;
    place-items:center;
}

#hero video,.overlay video{
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    object-fit: cover;
    transition: 1s ease;
    opacity: 1;
    
}
.overlay video.active{
    filter:brightness(.8) blur(1px) grayscale(0.2);
    opacity: 1;
    /* animation: colour 3.5s forwards 1 ease; */
}

#hero video.active{
    opacity: 1;
    filter:brightness(0.3) blur(2px) grayscale(.7);
    /* animation: colour 3.5s forwards 1 ease; */
}
section h1{
    font-family: 'Cinzel',serif;
    font-size: 5rem;
    font-weight: 400;
    width:100%;
    text-align: center;
}
.hero-heading,.overlay-hero-heading {
    font-size: 5em;
    font-weight: 400;
    font-family: 'Cinzel' , serif;
    scale: 0;
    transition: .8s ease;
}
.hero-heading.active{
    position: absolute;
    top: 50%;
    /* opacity: 0; */
    scale: 1;
    transform: translateY(-50%);
}
#hero h3 ,.overlay h3{
    position: absolute;
    mix-blend-mode: difference;
    bottom:38%;
    text-align: center;
    opacity: 0;
    font-family: 'Cinzel',serif;
    font-weight: 300;
    transition: .8s ease;
}
.hero-heading.active, #hero h3.active,.overlay-hero-heading.active,.overlay h3{
    /* left: 50%; */
    scale: 1;
    opacity: 1!important;
}

#hero p {
    font-size: 1.5em;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
}
#hero img{
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/* Section Styles */
section {
    padding: 50px 5%;
    width:100%;
    height:100vh;
    background: rgba(20,20,20,1)!important;
    color:rgba(190,190,190,1);
    position: relative;
}

section h2 {
    margin: 20px auto;
    color:#ff7f50;
color:#ff7f50;
    /* color:teal; */
    font-size: 2rem;
    /* font-family: 'Cinzel',serif; */
    font-family: 'Cinzel',serif;
}
section h3{
    color:white;
    color:rgba(220, 220, 220, 1);
    font-family: 'Cinzel',serif;
    font-size: 2.5rem;
    font-weight: 400;
}

section p{
    font-family: 'Cinzel',serif;
}
#biography {
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
}
#biography p{
    line-height: 1.5;
    margin:5px auto;
    width:80%;
}
.left-holder ,.right-holder{
    width:100%;
    height:80%;
    margin: auto;
}
.left-holder h3{
    width: 70%;
    margin-top:50px;
    line-height: 1.3;
}

.right-holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:10px;
}
.right-holder span{
    width:120px;
    margin: 20px auto;
}
.right-holder span button,button{
    border-radius: 20px;
}

/* shows section */
#shows{
    margin-top:30px;
}
#shows ul {
    list-style-type: none;
}

#shows ul li {
    margin-bottom: 10px;
}
.shows-wrapper{
    display: flex;
    flex-direction: row;
    padding: 1rem;
}
.shows-tabs{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap:10px;
    grid-template-columns: repeat(3,1fr);
}
.shows-tabs img{
    width:350px;
    height: 200px;
    transition: all .3s ease;
    cursor: pointer;
    border-radius: 5px ;
    border: .1px solid black;
    object-fit: cover;
    box-shadow: 1px 1px .5rem black;
}
.shows-tabs img:hover{
transform: scale(1.05);
border: 3px solid rgba(150,150,150,1);
}
.shows-tabs.hide{
    display: none;
}
.shows-list{
    width: 20%;
    margin-top:7%;
}
.shows-list-select{
    cursor: pointer;
    font-family: 'Cinzel',serif;
    transition: .3s ease;
    font-weight: 500;
}
.shows-list-select.active{
    color:#ff7f50;
 color:#ff7f50;
    font-weight: 800;
}
.shows-list-select:hover{
    color:#ff7f50;
 color:#ff7f50;
}
.shows-gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    height:100%;
}
.shows-gallery h4{
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin: 10px auto 50px;
}


button {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}
.lightbox{
    display: none;
    width: 100%;
    height: 100vh;
    position: relative;
}
.lightbox.active{
    display: block;
    position: fixed;
    left:0;
    top:0;
    z-index: 15;
    background:rgba(0,0,0,.9);
}
.title-row{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    position: relative;
    width: 80%;     
}
.lightbox h2{
    color:rgba(190,190,190,1);
    font-size: 1.6rem;
}
.lightbox .description{
    position: relative;
    width:100%;
    top:-20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.show-arrow-left,.show-arrow-right{
    cursor: pointer;
    font-size: 2rem;
    position: absolute;
    display: grid;
    place-items:Center;
}
.show-arrow-left span,.show-arrow-right span{
    font-size:1rem;
    text-decoration: underline;
}
.show-arrow-left i,.show-arrow-right i{
    display: none;
}
.show-arrow-left{
    left:0;
}
.show-arrow-right{
    right:0;
}
.arrow {
    border: solid #ff7f50;
    border-width: 0 8px 8px 0;
    display: inline-block;
    padding: 8px;
    position: absolute;
    top:50%;
    cursor: pointer;
    transition: .3s ease;
    scale: 1;
  }
  
  .right {
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform: rotate(-45deg);
    right:5%;
    pointer-events: all;
  }
  .right:hover ,.left:hover{
scale: 1.15;
  }
  
  .left {
    transform: rotate(135deg) translateY(-50%);
    -webkit-transform: rotate(135deg);
    left:5%;
    pointer-events: all;
  }
  .left.hide,.right.hide{
    opacity: 0;
    pointer-events: none;
  }
.lightbox-wrapper{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    gap:20px;
    padding:1rem;
}
.lightbox-img-holder{
    width:70%;
    height:80%;
    position: relative;
    /* margin-top:30px; */
}
.lightbox-img-holder img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .3s ease;
    opacity: 1;
}

.lightbox-img-holder img.fade{
opacity: 0;
}

.close {
    position: absolute;
    right:5%;
    top:5%;
    cursor: pointer;
}
.close i{
    font-size: 2rem;
}
/* Awards section */

.awards-wrapper h3{
    /* color:#ff7f50; */
 color:#ff7f50;
    text-align: center;
    /* text-shadow: 0px 0px .5rem yellow; */
    text-shadow: 0px 0px .5rem #ff3800;
    
}

.awards-wrapper h4, .awards-wrapper h5{
    font-family: 'Cinzel',serif;
}
.awards-wrapper h4{
    font-weight: 500;
    font-size: 1.2rem;
    width:50%;
}
.awards-wrapper h5{
    font-weight: 400;
    font-size: 1.1rem;
    color:rgba(150,150,150,1);
    font-style: italic;
}
.awards-wrapper{
    display: grid;
    width:100%;
    /* height: 90%; */
    place-items:center;
    grid-template-columns: repeat(1,1fr);
}
.award{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:15px;
    height: 200px;
    width: 100%;
    border-top: 1px solid rgba(150,150,150,1);
    /* border-bottom: 1px solid rgba(150,150,150,1); */
    padding:.5rem 0;
    text-align: center;
}
/* .award > *{
    margin: 10px 0;
} */

/* Footer */
footer {
    background-color:rgba(20,20,20,1);
    color: white;
    text-align: center;
    padding: 30px 0;
    width:100%;
    height: 100%;
    position: relative;
    /* border-top: .5px solid white; */
}
footer p{
    /* margin-top: 20px; */
    font-size: .8rem;
    font-family: 'Cinzel',serif;
    font-weight: 300;
}

footer form input[type="email"] {
    padding: 10px;
    width: 300px;
    margin-right: 10px;
    border-radius: 20px;
    border: none; 
}

footer form button {
    padding: 10px 20px;
    background-color: #555;
    color: white;
    border: none;
}

footer form button:hover {
    background-color: #777;
}
footer .socials{
    width: 50%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

/* contact page */
#contact{
    position: relative;
    width: 100%;
    height: 100%;
}
#contact h1{
    margin:40px auto;
}
.contact-wrapper{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.contact-details{
    display: flex;
    width:100%;
    justify-content: space-around;
    align-items: flex-start;
}
.details{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap:10px;

}
.details a,.details span{
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    font-weight: 200;
    /* margin: 5px auto; */
    text-align: center;
    color: rgba(190, 190, 190, 1);
}
.details i{
    margin:auto;
    color:#ff7f50;
 color:#ff7f50;
}
.contact-form-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    margin:50px 10px;
}
.contact-left-holder,.contact-right-holder{
    display: flex;
    flex-direction: column;
    width:65%;
    height: 100%;
}
.contact-left-holder{
    display: none;
}
.contact-right-holder form{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap:10px;
}
.names{
    display: flex;
    justify-content: flex-start;
    gap:10px;
}
#firstname, #lastname{
    width:50%;
    flex-direction: row;
}
form input{
    height:40px;
    padding:.5rem;
    background: rgba(200,200,200,1);
}
form input[type="email"]{
    width:100%;
}
form textarea{
    height:200px;
    padding:.5rem;
    background: rgba(200,200,200,1);
}
form input::placeholder, textarea::placeholder{
    font-size:.8rem;
    font-family: 'Cinzel',serif;
    color:black;
}

/*work test*/
.dropdown {
    position: relative;
    display: inline-block;
    color:white;
    cursor: pointer;
    background:rgba(0,0,0,.9);
    width:150px;
    /* border-radius: 30px 30px 0 0 ; */
    padding:.5rem 0;
    z-index: 5;
    display: none;
  }
  .dropdown span{
    display: grid;
    place-items: center;
  }
  .dropdown i{
    display: grid;
    place-items: center;
  }
  .work-holder-new{
    margin-top: 20px;
    width:100%;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,.9);
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    height: 100px;
    /* border-radius: 0 0 30px 30px; */
    /* cursor: pointer; */
  }
  .dropdown-content p:hover{
    border-right:1px solid white;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    padding:1rem;
  }
  .full-cv{
    position: fixed;
    right:1%;
    bottom:35%;
    z-index: 5;
  }
.cta{
    position: fixed;
    left:-110px;
    bottom:20%;
    width:150px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    background: white;
    transition: .3s ease;
    z-index: 11;
}
.b-top{
    position: fixed;
    right:0;
    bottom:20%;
    /* width:50px; */
    z-index: 11;
    display: none;
    
}
.b-top button{
    border-radius: 0;
    background: white;
    color:black;
    /* width: 50px; */
    
}
.cta button,.cta a {
    height: 100%;
    width:35%;
    border-radius: 0;
    display: grid;
    place-items: center;
    background:white;
    transition: .3s ease;
}


.cta button i,.cta a i{
    font-size: 1.5rem;
    color:black;
}
/* .cta a i{
    color:green;
} */
.cta.active{
    left:-45px;
}

.cta.active > button{
    transform: rotateY(180deg);
}
.theatre-holder,.dance-holder,.film-holder{
    display: none;

}
.theatre-holder.active,.dance-holder.active,.film-holder.active{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.theatre-holder .work,.film-holder .work{
    grid-template-columns: repeat(3,1fr);
    width:100%;
    padding:0.5rem;
}
.work-holder-new h3{
    margin:30px auto;
}
.work-holder-new .work{
    border-top :1px solid rgba(100,100,100,1);
    border-bottom:1px solid rgba(100,100,100,1);
}
.dance-holder .work{
    grid-template-columns: repeat(2,1fr);
    width:100%;
    padding:0.5rem;
}
.work-holder-new .heads{
    color:white;
}
.work-holder-new .heads{
    grid-template-columns: repeat(3,1fr);
}
.work-holder-new .dance-holder .heads{
    grid-template-columns: repeat(2,1fr);
}
/* .work-holder-new .work .title{
    font-size:2rem;
} */
/* Work page */
#work h1{
    margin:50px auto;
}

#work{
    height: 100%;
    width: 100%;
}
#work h3 , #work h4 {
    font-family: 'Cinzel',serif;
    text-align: center;
}
.theatre ,.dance ,.film {
    margin:50px auto;
}
.work,.heads{
    border-top:1px solid rgb(150,150,150);
    /* border-bottom:1px solid rgb(150,150,150); */
    display: grid;
    place-items:center;
    gap:10px;
    grid-template-columns: repeat(4,1fr);
}
.dance .work,.dance .heads{
    border-top:1px solid rgb(150,150,150);
    /* border-bottom:1px solid rgb(150,150,150); */
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.heads.hide{
    display: none;
}
.work.flex,.dance.flex{
    display: flex!important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.work h3{
    /* color:#ff7f50; */
 color:#ff7f50;
}
.title{
font-size:1.2rem;
}
.director > *, .choreo > *, .film-director > *{
    font-weight: 400;
    font-style: italic;
}
/* .work.flex > .director > * , .work.flex > .choreo > *{
    font-weight: 300;
    font-style: italic;
} */
.theatre.grid,.dance.grid,.film.grid{
    display: grid;
    place-items:center;
    grid-template-columns: repeat(2,1fr);
}
.work{
    padding:1.5rem 0;
}
.heads h5{
    font-size:1rem;
    /* margin:auto 1.5%; */
    padding:1rem 0;
    
}

/* Bio page */
#bio {
    width: 100%;
    height: 100%;
    margin:50px auto;
}
#biography h1{
    display: block;
    width: 100%;
}
.glow{
    transition: .3s ease;
}
.glow:hover{
    animation: glow infinite alternate ease 1s;
    cursor: crosshair;
}
.bio-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin:100px auto;
    position: relative;
    z-index: 1;
}
#bio .left-holder,#bio .right-holder{
    display: grid;
    place-items: center;
    text-align: center;
    margin:20px auto;
}
#bio img{
    width: 300px;
    height: 300px;
    position: relative;
    border-radius: 50%;
    transition: all .3s ease;
    object-fit: cover;
    object-position: 50% -36px;
}
/* #bio img:hover{
    transform: scale(1.05);
    filter: drop-shadow(0px 15px 14px white);
} */
.bio-wrapper h3{
    color:#ff7f50;
 color:#ff7f50;
}
.bio-wrapper p{
width: 80%;
text-align: center;
line-height: 1.5;
margin: 10px auto;
}
#education{
    height: 100%;
}
#education p{
    font-family: 'Cinzel',serif;
    line-height: 1.5;
    margin:20px auto;
}

/*theatre page */
#theatre{
    width: 100%;
    height: 100%;
    margin:50px auto;  
}
.arrows-holder{
    width: 50%;
    height: 100%;
    position: relative;
    z-index: 5;
    /* top:100px; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:2rem;
    margin:auto;
}
.arrows-holder i{
    cursor: pointer;
}
.work-switch-container{
    width:60%;
    height:150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top:150px;
    transform-style: preserve-3d;
    z-index: 5;
    position: relative;
    perspective: 500px;
    /* perspective-origin: center; */
    transform: rotate3d(1, 0, 0, -15deg);
    
}
.work-switch{
    display: flex;
    transform-style: preserve-3d;
    /* perspective: -200px; */
    transform: rotateY(0deg);
    transform-origin: center;
    /* background: blue; */
    width: 200px;
    height: 100px;
    transition: .3s ease;
    margin: auto;
}
.switches{
    width:200px;
    text-align: center;
    color:rgba(190,190,190,1);
    background: rgba(20,20,20,1);
    position: absolute;
    border: .5px groove rgba(190,190,190,1);
    /* box-shadow: 2px 2px .2rem .1rem rgba(190,190,190,1) inset; */
}
.work-left{
    transform: rotateY(60deg) scale(-1,1);
    left: -50px;   
    
}
.work-right{
    transform: rotateY(120deg);
    left: 50px;
}
.work-center{
    transform: translateZ(86px);
}
.light_center {
    transform-origin: center top;
    height: 75vh;
    left: 1.05vw;
    top: 0px;
    rotate: 0deg;
    position: absolute;
    width: 98.5vw;
    z-index:-10;
    background:
      conic-gradient(
        at 50% 5%,
        transparent 43%,
        hsl(0, 0%, 100%) 47%,
        hsl(0, 0%, 100%) 53%,
        transparent 57.5%
        )
      50% -25px / 100% 100%;
        
      background-blend-mode: overlay;
      background-repeat: no-repeat;
      mix-blend-mode: screen;
      opacity: 1;
      filter: blur(10px);
      mask-image: radial-gradient(
        circle at 50% 0%,
        black 5%,
        transparent 70%
      );
      -webkit-mask-image: radial-gradient(
      circle at 50% 0%,
      black 5%,
      transparent 70%
    );
    z-index: 5;
    /* display: none; */
  }
  /* .light_left {
    transform-origin: center top;
    height: 120vh;
    left: -41.95vw;
    top: 0px;
    rotate: -28deg;
    position: absolute;
    width: 98.5vw;
    z-index: -10;
    background: conic-gradient(at 50% 5%, transparent 43%, hsl(0, 0%, 100%) 47%, hsl(0, 0%, 100%) 53%, transparent 57.5%) 50% -25px / 100% 100%;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 1;
    filter: blur(10px);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
    z-index: 1;

    pointer-events: none;
  }
  
  .light_right {
    transform-origin: center top;
    height: 120vh;
    left: 43.05vw;
    top: 0px;
    rotate: 32deg;
    position: absolute;
    width: 98.5vw;
    z-index: -10;
    background: conic-gradient(at 50% 5%, transparent 43%, hsl(0, 0%, 100%) 47%, hsl(0, 0%, 100%) 53%, transparent 57.5%) 50% -25px / 100% 100%;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    opacity: 1;
    filter: blur(10px);
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
    mask-image: radial-gradient(circle at 50% 0%, black 5%, transparent 70%);
    z-index: 1;
    pointer-events: none;
  } */

.theatre-portfolio{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:30px;
}
.theatre-portfolio h4{
    font-weight: 100;
    font-style: italic;
}
.theatre-portfolio span{
    font-weight: 500!important;
    font-style: normal;
    color:rgba(200,200,200,1)
}
.theatre-show{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
}
.theatre-left{
    display: flex;
    flex-direction: column;
    width: 35%;
    align-self: flex-start;
    gap:15px;
}
.theatre-left p{
    font-size:.9rem;
    font-family: sans-serif;
}
.theatre-left h3{
    font-size:1.5rem;
    color:#ff7f50;
 color:#ff7f50;
}
.theatre-right,.theatre-right-images{
    width: 100%;
    height: 100%;
    display: grid;
    place-items:center ;
    grid-template-columns: repeat(4,1fr);
    gap:20px;
}
.theatre-right img{
    width: 200px;
    height: 120px;
    transition: .3s ease;
    border: 1px solid rgba(10, 10, 10, 1);
    cursor: pointer;
    object-fit: cover;
    box-shadow: 1px 1px .5rem black;
}
.theatre-right img:hover{
    scale: 1.05;
    border:1px solid rgba(190,190,190,1);
}
#theatre .lightbox-img-holder{
    width: 85%;
    height: 85%;
    position: relative;
    /* bottom:25px; */
}
.mobile-nav-links{
    display: none;
}

@keyframes spin{
    100%{
        transform: rotateY(360deg);
    }
}
@keyframes glow {
    0%{
        text-shadow: 0px 5px 1rem transparent;
    }
    100%{
        text-shadow: 0px 5px 1rem yellow;
    }
}
@keyframes colour{
    0%{
        filter:grayscale(1)   blur(10px) brightness(0);
    }
    100%{
        filter: grayscale(.7) blur(0) brightness(1);
    }
}

@media screen and (min-width:300px) and (max-width:480px) {
    nav{

    }
    .switch{
        display: none!important;
    }
    nav ul,nav .socials{
        display: none;
    }

    .logo h1{
        font-size:1.5rem
    }
    .logo p{
        font-size: .7rem;
    }
    .but{
        position: absolute;
        width:50px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:5px;
        cursor: pointer;
        top:10px;
        right:3%;
    }
    .bar{
        width:30px;
        height:3px;
        background: white;
        z-index: 10;
        opacity: 1;
        transition: .3s ease;
    }
  
    .but.active > .bar{
        background: red;
    }
    .but.active > .bar:nth-of-type(2){
        opacity: 0;
    }
    .but.active > .bar:nth-of-type(1){
        transform: rotateZ(45deg) translateY(11px);
    }
    .but.active > .bar:nth-of-type(3){
        transform: rotateZ(-45deg) translateY(-12px);
    }
    .mobile-nav-links{
        position: absolute;
        width:100%;
        height:100vh;
        background-color:rgba(10, 10, 10, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:10px;
        left:-100%;
        transition: .3s ease;
    }
    .mobile-nav-links.active{
        left:0;
    }
    .mobile-nav-links ul{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mobile-nav-links ul li{
        font-size:1.5rem ;
    }
    .overlay,.overlay2{
        display: none;
    }
    .hero-heading{
        font-size: 2rem;
    }
    #hero h3{
        font-size: .8rem;
        bottom:45%;
    }
    #hero video.active{
        filter:brightness(0.8) blur(0) grayscale(.5);
    }
    section{
        height: 100%;
    }
    section h1{
        font-size: 3rem;
    }
    section h2{
        margin: auto;
    }
    .shows-gallery h4{
        font-size: 1.2rem;
    }
    .shows-wrapper{
        flex-direction: column;
    }
    .shows-tabs{
        grid-template-columns: repeat(2,1fr);
    }
    .shows-tabs img{
        width:150px;
        height: 100px;
    }
    .shows-list{
        width: 100%;
        display: flex;
    flex-wrap: wrap;
    order: 2;
    }
    #shows ul{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .award{
        height:auto;
    }
    .awards-wrapper h4{
        width:100%;
    }
    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    footer .socials{
bottom:25px;
position: relative;
    }
    footer p{
        margin:30px 0 10px;
    }
    footer .logo p{
        margin:0;
    }
    .cta,.b-top{
        bottom:5%;
    }
    .title-row{
        width: 100%;
    }
    .show-arrow-left,.show-arrow-right{
        top:50px;
    }
    #theatre{
        margin: 50px auto 0;
    }
    .theatre-show{
        flex-direction: column;
        margin: 20px auto;
    }
    .theatre-portfolio{
        gap:10px;
    }
    .theatre-left{
        width: auto;
        margin-bottom:20px;
    }
    .theatre-left h3{
        font-size: 1.2rem;
    }
    .theatre-right{
        grid-template-columns: repeat(2,1fr);
        gap:10px;
    }
    .theatre-right img{
        width: 160px;
        height: 100px;
    }
    .contact-right-holder{
        width: auto;
    }
    .lightbox h2{
        font-size: 1.2rem;
    }
    .full-cv{
        position: absolute;
        top:150px;
    }
    .light_center{
        /* width:74vw; */
    }
}