@charset "UTF-8";

body{
	width:100vw;
	overflow-x:hidden;
}

.navbar{
	z-index: 3;
	background-color:#030B11;
	position: sticky;
		top:0;
	text-align: right;
}
 


.nav-item{
	font-family: aktiv-grotesk-extended, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
}



.navbar-light .navbar-nav .nav-item .nav-link{
	color: white;
	padding-left:1em;
	padding-right:1em;
}

.navbar-light .navbar-nav .nav-item .nav-link:hover{
	color: #c20120;
}


.nav-logo{
	width: 40px;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-bg{
	position:sticky;
	top:0;
	left:0;
	height:65px;
	background-color:black;
	width:100vw;
}

.jumbotron {
	border-radius:0;
	z-index:-1;
	background:white;
	right:0;
	
}
/* CSS Document */
.project-hero{
	margin:auto;
	padding:0;
	min-height:760px;
	right:0;
	
	 

}

.cont-2{
	height:100%;
	width:100%;
	overflow-x: hidden;
	overflow-y: hidden;
}
/*
.lex{
	background-image: url("../images/lex-storm/lex-3.jpg");
	background-size: cover;
	height:100vh;
	width:100vw;
	backgound-color:white;
	top:0;
	position: absolute;
	background-position: top center;
	clip-path: ellipse(100% 60% at 60% 39%);
}
*/
.lex{
	background-image: url("../images/lex-storm/lex-2.jpg");
	background-size: cover;
	height:auto;
	min-height:755px;
	width:100vw;
	backgound-color:white;
	top:0;
	right:0;
	position: absolute;
	background-position: 80% 0%;
	clip-path: url(#blood);
	box-shadow: inset 0 0 0 1000px rgba(3,11,17,.2);
}

.project-title-lex{
	width:50%;
	position: absolute;
	top:25%;
	left:75px;
	transform: translate(0%, 0%);
	color:white;
	text-align:left;
	text-shadow: 2px 2px 6px black;
}

.project-title-lex h1{
	font-family: bookmania, serif;
	font-weight: 900;
	font-style: normal;
	font-size: 7em;
	line-height: .9em;
	letter-spacing: 2px;
}
.project-title-lex h2{
	font-size: 2.5vw;
	text-transform:uppercase;
	letter-spacing: 5px;
	font-family: aktiv-grotesk-extended, sans-serif;
	font-weight: 400;
	font-style: normal;
	
}

@media (min-width: 1080px){
	.project-title-lex{
		left:15%;
		width:40%;
	}
	.project-title-lex h1{
		font-size:8em;
	}	
	.project-title-lex h2{
	font-size: 1.75em;
	}
}

.project-title-lex h2.woof{
	display: none;
}

@media (max-width: 956px){
	.project-title-lex{
		top:40%;
	}
}


@media (max-width: 576px) { 
	.project-title-lex{
		top:35%;
		text-align:center;
	}
	.project-title-lex h1{
		font-size:4.5em;
		line-height: 1em;
	}
	.project-title-lex h2{
		display: none;
	}
	.project-title-lex h2.woof{
		display: block;
		font-size:1.5em;
		line-height: 2em;
	}
	.lex{
		box-shadow: inset 0 0 0 1000px rgba(3,11,17,.45);
	}
	
}


.long{
	height:2000px;
}

.quote{
	max-width:980px;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	padding: 0 30px;
}

.quote h2{
	font-family: bookmania, serif;
	font-weight: 900;
	font-style: normal;
	font-size: 2.5em;
	align-content: center;
	text-align: center;
}




.about{
	margin-top:3em;
	
}

.space-below{
	margin-bottom:48px;
}

.about-picture{
	margin-left:auto;
	margin-right:auto;
	display:block;
	width:100%;
	max-width:280px;
	border-radius: 5px;
}

p.about-bio{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 300;
	font-style: normal;
	font-size:1.5em;
	margin:auto .5em auto 0;
	
}

@media (max-width: 768px){
p.about-bio{
	margin: 2em .75em 0 .75em;
	text-align: center;
	font-size:1em;
}		
}

.about-icon{
	display: block;
	width:40px;
	margin:30px auto auto auto;
}

.about-icon-email{
	width:50px;
	margin:35px auto auto auto;
}

.about-icon-backstage{
	width:40px;
	margin:30px auto auto auto;
}

.about-icon-instagram{
	width:40px;
	margin:32px auto auto auto;
}

img.about-link:hover{
	transform: scale(1.15);
	transition: .1s;
	
}

.moon-divide{
	display: block;
	width:450px;
	margin:5em auto;
	overflow-x: hidden;
}

hr.line-divide{
	display: block;
	width:450px;
	margin:4em auto;
	border-top: 2px dotted black;
}

@media (max-width: 576px) {
	.moon-divide{
		width:100%;
	}
	hr.line-divide{
		width:100%;
	}
}

.parallax {
	/* Set a specific height */
	min-height: 500px;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/lex-storm/coat.jpg");
	box-shadow: inset 0 0 0 1000px rgba(3,11,17,.4);
	background-position: 35% 0%;
	
}

.parallax-design {
	/* Set a specific height */
	min-height: 500px;
	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/lex-storm/inspector-design/design-parallax.jpeg");
	box-shadow: inset 0 0 0 1000px rgba(3,11,17,.5);
	background-position: 60% 0%;
	margin-top:48px;
	
}


@supports (-webkit-touch-callout: inherit) {
  .parallax {
  background-attachment: scroll;
  }
}

.acting-header{
	color:white;
	text-align: center;
	position: relative;
}

.acting-header h2{
	width:100%;
	font-family: bookmania, serif;
	font-weight: 900;
	font-style: normal;
	font-size: 8em;
	letter-spacing: 2px;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 576px) {
	
	.acting-header h2{
		font-size:25vw;
	}
}

.acting{
	max-width:1260px;
	overflow: hidden;
	border-radius: 5px;
	padding:0 30px;
}

.design{
	max-width:1260px;
	border-radius: 5px;
	padding:0 30px;
}


.performance-info{
	max-width: 500px;
	padding:20px 20px;
	margin: 0px auto 3em auto;
	background-color:#FE3D5C;
	width: 100%;
	height: auto;
	border-radius: 5px;
	position: relative;
	
}
/*

@media (max-width: 576px) {
	.performance-info{
		margin-left:5px;
		margin-right:5px;
		width:auto;
	}
}
*/

.ticket-border{
	border: 2px solid white;
	border-radius:5px;
	width:100%;
	height:100%;
	padding:15px 10px 10px 10px;
}

/*ticket stub bs*/
.cut-out {
			border-radius: 40px;
			width: 40px;
			height: 40px;
			display: block;
			position: absolute;
			background: white;
			
		}
.top-left{
	left: 0;
	top: 0;
	transform: translate(-50%, -50%)
}
.bottom-left{
	left: 0;
	bottom: 0;
	transform: translate(-50%, 50%)
}

.top-right{
	right: 0;
	top: 0;
	transform: translate(50%, -50%)
}
.bottom-right{
	right: 0;
	bottom: 0;
	transform: translate(50%, 50%)
}

.dotted-border-left{
	top:35px;
	left:-5px;
	bottom: 35px;
	border-left: 10px dotted white;
	position: absolute;
}
.dotted-border-right{
	top:35px;
	right:-5px;
	bottom: 35px;
	border-right: 10px dotted white;
	position: absolute;
}

h3.character-name{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.25em;
	font-size:1.4em;
}

h3.date{
	font-size:1.2em;
}

h4.details{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 800;
	font-style: normal;
	line-height: 1.25em;
	font-size:1.75em;
}

p.more-info{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.4em;
	font-size:1.1em;
}

.play-title{
	font-style: italic;
	
}

a.red-link{
	color:black;
	text-decoration: underline;
	font-weight: 500;
}

a.red-link:hover{
	color:white;
}

.red{
	font-weight:800;
	color: white;
}



#gallery {
   line-height:0;
   -webkit-column-count:4; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:4;
   -moz-column-gap:5px;
   column-count:4;
   column-gap:5px;
}

#gallery img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
	border-radius: 5px;
}



@media (max-width: 992px) {
   #gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}

@media (max-width: 768px) {
   #gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 576px) {
   #gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}

#gallery-everybody {
   line-height:0;
   -webkit-column-count:3; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:3;
   -moz-column-gap:5px;
   column-count:3;
   column-gap:5px;
}

#gallery-everybody img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
	border-radius: 5px;
}





@media (max-width: 768px) {
   #gallery-everybody {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 576px) {
   #gallery-everybody {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}

#gallery-midsummer {
   line-height:0;
   -webkit-column-count:3; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:3;
   -moz-column-gap:5px;
   column-count:3;
   column-gap:5px;
}

#gallery-midsummer img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
	border-radius: 5px;
}





@media (max-width: 768px) {
   #gallery-midsummer {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 576px) {
   #gallery-midsummer {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}

#gallery-inspector {
   line-height:0;
   -webkit-column-count:4; /* split it into 5 columns */
   -webkit-column-gap:5px; /* give it a 5px gap between columns */
   -moz-column-count:4;
   -moz-column-gap:5px;
   column-count:4;
   column-gap:5px;
}

#gallery-inspector img {
   width: 100% !important;
   height: auto !important;
   margin-bottom:5px; /* to match column gap */
	border-radius: 5px;
}

@media (max-width: 992px) {
   #gallery-inspector {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
   }
}

@media (max-width: 768px) {
   #gallery-inspector {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
   }
}

@media (max-width: 576px) {
   #gallery-inspector {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
   }
}


.picture-wall{

	margin-top:3em;
	margin-left:auto;
	margin-right:auto;

}

.carousel-inner{
	border-radius: 5px;
}


.carousel .carousel-indicators li{
	width:8px;
	height:8px;
	border-radius:100%;
}
.carousel-indicators {
	z-index: 1;
	margin: 0;
}


video.everybody-video{
	margin-top:48px;
}

.video{
	border-radius: 5px;
}


@media (max-width: 767px) { 
	.everybody-video{
	margin: 3em 0 0 0;
	
	}

}

.cover{
	width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius: 5px;
}

.design-project{
	margin: 0 24px;
}

@media (max-width: 992px) { 
	.design-project{
		margin:12;
	}
}

h3.design-project-header{
	font-family: bookmania, serif;
	font-weight: 900;
	font-style: normal;
	line-height: 1.25em;
	font-size:2.2em;
}

.italic{
	font-style:italic;
	color:#c20120;
}

p.design-project-details{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1.5em;
	font-size: 1.25em;
	margin-top:10px;
}

@media (max-width: 992px) { 
	p.design-project-details{
	margin-bottom:48px;
	}

}

#scrolly{
	
	width:100%;
	height:inherit;
	
}

#scrolling-wrapper {
 
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	padding: 0 30px 15px 30px;
}

#scrolly-2{
	
	width:100%;
	height:inherit;
	
}

#scrolling-wrapper-2 {
 
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
	-webkit-overflow-scrolling: touch;
  padding: 0 30px 15px 30px;

}

.project-card-3 {
	border-radius:5px;
	padding: 15px 15px 0 15px;
	border: solid 2px #c20120;
  width: 270px;
  height: 535px;
 display: inline-block;
	margin: 0 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;

  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
	
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.center{
	border-radius:5px;
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
	border-radius: 5px;
}

/* Style the front side (fallback if image is missing) */


/* Style the back side */
.flip-card-back {

  transform: rotateY(180deg);
}

p.card-caption{
	letter-spacing:1px;
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 1em;
	position: absolute;
	bottom:5px;
	left:50%;
	transform: translate(-50% , 0);
	margin-bottom:5px;
}

.footer{
	max-width:1260px;
	margin-top: 4em;
}

.dot-break{
	border-top:dotted 2px black;
}

h2.contact{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 800;
	font-style: normal;
	line-height: 1.25em;
	font-size: 1.7em;
	margin-top: 20px;
	margin-bottom:20px;
	color:#c20120;
}

p.contact-info{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 1.2em;
	line-height: 40px;
}

.footer-insta{
	width: 40px;
}

.footer-backstage{
	width:35px;
	margin: 0 20px 0 0;
}

.footer-email{
	width:45px;
	margin: 0 10px 0 20px;
}

a.real-red-link{
	color:black;
	text-decoration: underline;
}

a.real-red-link:hover{
	color:#c20120;
}