:root {
	--accent-color:#c4b890;
}

@font-face {
    font-family: "Andre";
    font-weight: bold;
    src: url("/fonts/Andre.otf") format("opentype");
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Standard syntax */
}

body, html {
	margin:0; padding:0;
	background-color:#000;
	/* background-image:radial-gradient(rgb(76, 0, 0), rgb(37, 0, 0), black); */
	color:#fff;
	font-family:"Poiret One", Arial, Helvetica, sans-serif;
	font-size:15pt;
}

h1, h2, h3, h4, h5, h6 {
	color:var(--accent-color);
}

#bg-video {
	position:fixed;
	left:0; top:0;
	width:100vw; height:100vh;
	z-index:0;
	object-fit:cover;
	filter:contrast(0.75) brightness(0.2);
}

#jumbotron {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	width:100vw; height:100vh;
	cursor:pointer;
}
#jumbotron-mobile-container {
	display:none;
}
#jumbotron .col:nth-child(1) {
	width:30%;
	z-index:1;
}
#jumbotron .col:nth-child(2) {
	width:40%;
	text-align:center;
	z-index:2;
}
#jumbotron .col:nth-child(3) {
	width:30%;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}

#jumbotron .col img {
	pointer-events:none;
}
#jumbotron .col img:first-child {
	width:200px;
	margin:2rem 0;
}
#jumbotron .col img:last-child {
	height:75%;
}

#jumbotron .col:nth-child(1) img:first-child {
	margin-left:5vw;
}
#jumbotron .col:nth-child(2) img:first-child {
	width:280px;
	margin-top:1rem;
}
#jumbotron .col:nth-child(3) img:first-child {
	margin-right:5vw;
}

@media(max-width:900px) {
	#jumbotron .col:nth-child(2) img:last-child {margin-left:-5vw;}
}

#logo-container {
	position:absolute;
	left:0; bottom:0;
	width:70vw; height:33vh;
	margin:0 15vw;
	padding:2rem 0;
	z-index:3;
	background-image: radial-gradient(black, transparent, transparent);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	pointer-events:none;
}
#logo-container img {
	width:65%;
	max-width:600px;
}
#logo-container small {
	color:rgba(255,255,255,0.75);
	text-transform:uppercase;
	margin-bottom:1rem;
	font-size:1rem;
	font-weight:bold;
}
#logo-container h2 {
	font-family:"Andre";
	font-size:28pt;
	margin:0;
	color:var(--accent-color);
}

#section1 {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background-image:radial-gradient(#444, #000);
	border-top:1px solid rgba(255,255,255,0.2);
	min-height:100vh;
	padding:3rem;
	box-sizing:border-box;
}
#section1-inner {
	width:100%;
	max-width:750px;
	box-sizing:border-box;
	padding:0;
}

#section1 p {width:100%;}
#section1 h2 {
	font-size:2rem;
	margin-top:60px;
}
#section1 .comp-header {
	display:flex;
	flex-direction:row;
	align-items:flex-end;
	border-bottom:0.5px solid var(--accent-color);
	margin-bottom:15px;
	margin-top:30px;
}
#section1 .comp-header img:first-child {
	height:120px;
	padding:0 15px 10px 0;
}
#section1 .comp-header img:last-child {
	height:90px;
	padding:0 15px 10px 0;
}
#section1 .comp-header.starz-header img:last-child {
	height:65px;
	margin-left:10px;
}


.scale-in-center {
	-webkit-animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

.slide-in-blurred-left {
	-webkit-animation: slide-in-blurred-left 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-left 1.5s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-300px) scaleX(1.5);
            transform: translateX(-300px) scaleX(1.5);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    -webkit-transform: translateX(-300px) scaleX(1.5);
            transform: translateX(-300px) scaleX(1.5);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

.slide-in-blurred-right {
	-webkit-animation: slide-in-blurred-right 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-right 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}
@-webkit-keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(300px) scaleX(1.5);
            transform: translateX(300px) scaleX(1.5);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}
@keyframes slide-in-blurred-right {
  0% {
    -webkit-transform: translateX(300px) scaleX(1.5);
            transform: translateX(300px) scaleX(1.5);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0) scale(1);
            transform: translateX(0) scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

.puff-in-center {
	-webkit-animation: puff-in-center 1 cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px) brightness(200%);
            filter: blur(4px) brightness(200%);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px) brightness(100%);
            filter: blur(0px) brightness(100%);
    opacity: 1;
  }
}

/* MEDIA QUERIES FOR MEDIUM SCREENS */

@media (min-width:768px) {
	#jumbotron a.col {
		transition:0.5s ease-in-out;
	}
	#jumbotron a.col:hover {
		transform:scale(105%);
	}
	#jumbotron a.col:nth-child(1) {
		transform-origin:left;
	}
	
	#jumbotron a.col:nth-child(2) {
		transform-origin:center;
	}
	
	#jumbotron a.col:nth-child(3) {
		transform-origin:right;
	}
}

@media (max-width:767px) {
	
	#bg-video {display:none;}

	#jumbotron {
		position:relative;
	}
	#jumbotron a.col, #jumbotron a.col:nth-child(3) { /* all jumbotron columns */
		display:flex;
		flex-direction:column-reverse;
		align-items:flex-end;
		justify-content:flex-end;
		margin-top:15%;
	}
	#jumbotron a.col:nth-child(1) { /* first jubotron column */
		align-items:flex-start;
	}
	#jumbotron a.col img { /* all jumbotron images */
		object-fit:contain;
		position:relative;
	}
	#jumbotron a.col img:nth-child(2) { /* all dancers */
		top:0;
		width:100%;
		z-index:1;
	}
	#jumbotron a.col img:nth-child(1) { /* all logos */
		z-index:2;
		top:-5%;
		width:auto;
		height:80px;
	}
	#jumbotron a.col:nth-child(1) img { /* elite dancers */
		width:85%;
	}
	#jumbotron a.col:nth-child(2) img { /* prestige chair and logo */
		
	}
	#jumbotron a.col:nth-child(2) img:nth-child(2) { /* prestige chair only */
		left:12.5%;
		top:10%;
		width:120%;
	}
	#jumbotron a.col:nth-child(1) img:nth-child(1) { /* elite logo only */
		top:-5%;
		left:-10%;
		height:80px;
		width:auto;
	}
	#jumbotron a.col:nth-child(2) img:nth-child(1) { /* prestige logo only */
		top:5%;
		justify-self:center;
		height:90px;
		left:calc(0.25 * (767px - 100vw));
		position:relative;
	}
	#jumbotron a.col:nth-child(3) img:nth-child(1) { /* starz logo only */
		height:55px;
	}
	
	#logo-container {
		position:absolute;
		top:0;
		padding:0;
		height:20vh;
	}
	#logo-container img {
		width:auto;
		height:110px;
		margin:1rem auto 0 auto;
	}
	#logo-container small, #logo-container h2 {
		display:inline;
		font-family: "Poiret One", Arial, Helvetica, sans-serif;
		font-size:15pt;
		text-transform:uppercase;
		color:var(--accent-color);
		margin:0;
	}

	#section1 {
		padding:2rem;
	}
	#section1-inner {
		max-width:none;
	}
	#section1 .comp-header {
		flex-direction:column;
	}
	#section1 .comp-header img:first-child {
		height:150px;
	}

}

@media (max-width:600px) {
	#jumbotron a.col, #logo-container {display:none !important;}
	#jumbotron-mobile-container {
		display:flex;
		flex-direction:row;
		width:100%;
		position:relative;
		cursor:default;
	}
	#jumbotron-mobile-container a {
		flex:1;
		flex-grow:1;
		z-index:1;
		margin-top:33%;
	}
	#jumbotron-mobile-container img {
		position:absolute;
		left:0; top:0;
		width:100%; height:100%;
		object-fit:contain;
		z-index:0;
	}
}