@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
.war{
	display:none;
}
@media only screen and (max-width: 738px) {
	.slider{
		display:none;
	}
.war{
	display:block;
}
}

body{
	margin:0;
	font-family: 'Montserrat';
	overflow-x: hidden;
	background-color: #000;
	overflow-y: hidden;
}


@keyframes rainbow { 
    0%{background-position:0% 82%}
    50%{background-position:100% 19%}
    100%{background-position:0% 82%}
}
.wrapper { 
	margin:auto;}

#playbtn {
	box-shadow: 0px 10px 14px -7px #276873;
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px #3d768a;
	height: 80px;
	width: 200px;
	background: linear-gradient(124deg, #ec612c, #e81d1d, #f2bb46, #ffee54, #58af57, #68c4e9, #0128f2, #772ef4, #431ac9);
	background-size: 1800% 1800%;
	animation: rainbow 18s ease infinite;
	position: absolute;
    left: 50%;
    
    top: 50%;
     transform: translate(-50%, -50%);
    
}
#playbtn:hover {
	background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
	background-color:#88b3bb;
}

.col-sm-4, .col-md-4, .col-lg-5, .col-xl-6
{
    margin: auto;
}
#my_audio{
	display: none;
}
.intro-audio{
	display: none;
}
#blanksection{
	height:40px;
}
.home .caption h1{
	font-size:42px;
	color:#ffffff;
	margin:0;	
}
.home .slide.active .caption h1{
	opacity:0;
	animation: captionText .5s ease forwards;
	animation-delay:1s;
}

#pickaColor {
		color: white;
		text-align: center;
		font-size: 20px;
		letter-spacing: 4px;
		opacity: 0;
		position: absolute;
		left: 50%;
		top: 57vh;
		transform: translate(-50%, -50%)!important;
	  }
	

.button-label{
    color: rgb(253, 253, 253);
    opacity: 0;
    animation: fadeIn 2s ease-in-out 3s;
    animation-fill-mode: forwards;
    animation-delay: 12s;
}

#yellowButton {
	background-image: linear-gradient(to right, #ffee54,#f2bb46);
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.19)));
}
#synthesisButton {
	background-image: linear-gradient(to right, #772ef4, #f2bb46);
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.19)));
}
*{
	box-sizing: border-box;
}

.home{
	height: 100vh;
	overflow:hidden;
	position: relative;
}

.home .slide{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index:1; 
	display:none;
	padding:0 15px;
	background-color: #000;
}
.home .slide.active{
	display: flex;
}
@keyframes slide{
	0%{
		transform:scale(1.1);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(31, 29, 29, 0.7);
		opacity:1;
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(59, 56, 56, 0);
		opacity:1;
	}

	100% {
		box-shadow: 0 0 0 0 rgba(87, 74, 74, 0);
		opacity:1;
	}
}


.home .caption h1{
	font-size:42px;
	color:#ffffff;
	margin:0;	
}
.home .slide.active .caption h1{
	opacity:0;
	animation: captionText .5s ease forwards;
	animation-delay:1s;
}
.home .caption p{
	margin:auto;
}
.home .slide.active .caption p{
	opacity:0;
	animation-delay:1.2s;
}
.home .caption a{
 display: inline-block;
 background-color: #000000;
 text-decoration: none;
 color:#ffffff;
}

.home .slide.active .caption a{
	opacity:0;
	animation: captionText .5s ease forwards;
	animation-delay:1.4s;
}

@keyframes captionText{
	0%{
		opacity:0; transform: translateX(-100px);
	}
	100%{
	 opacity:1; transform: translateX(220px);	
	}
}




#background-video {
	width: 100%;
	height:100%;
	object-fit: cover;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -100;
  }



@keyframes fadeIn {
  from {
  	opacity: 0;
  }
  to {
 	opacity: 1;
  }
}
@keyframes space {
	0% {letter-spacing: 80px;
	opacity:1}
	100% {opacity:1} 
  }


@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;} 
 } 

 @keyframes spin {
    0% {
        transform:rotateX(0deg);
		letter-spacing: 20px;
		opacity:0.5;}
	50%{
		transform:rotateX(180deg);
		letter-spacing: 15px;
		opacity:0.7;}
    100%{
        transform:rotateX(360deg);
		letter-spacing: 10px;
		opacity:1;}
}

#ce_input{
	background: black;
	border: none;
  }

.introductory-page{
    display: block;
}

#intro-img-1{
	opacity: 1;
	animation: fadeIn 4s ;
	margin-top: 3%;
	margin-bottom:0.5%;
	padding-left:3px;
	padding-right:3px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#intro-img-2{
	opacity: 1;
	animation: fadeIn 4s ;
	padding-left:1.5%;
	padding-right:3px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;

}
#intro-logo-2{
	text-align: center;
	margin-left: auto;
	margin-right:auto;
}
#intro-logo-1{
	text-align: center;
	margin-left: auto;
	margin-right:auto;
}
@media only screen and (min-height: 800px){
	#intro-img-1{
		margin-top: 20vh;
	}

	  .csbuttons{
		  right: 5%;
		}
		.next-button{
			margin-top:48vh !important;
		}
}



/*=====================================================
  Box
=====================================================*/
#boxes {
	text-align: center;
	pointer-events: none;
	z-index: 20;

  }
  #boxes {
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.267)));
  }
  #newboxes{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	pointer-events: initial;
	z-index: 20;
	-webkit-box-reflect: below -8px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.567)));
 
}

  .newbox{
	height: 137.52px;
	width: 74.88px;
	display: inline-flex;
	margin-left:3px;
	margin-right:3px;
	margin-top:-100px;
	display: inline-block;
	border-radius: 7%;
	z-index: 21; 
	cursor: pointer;
  }
 
  
  .box {
	position: relative;
	height: 137.52px;
	width: 74.88px;
	display: inline-flex;
	margin-left:3px;
	margin-right:3px;
	border-radius: 9px;
	opacity:0;
	max-width: 100%;
	cursor: pointer;
  }
  
#red {
    background-image: linear-gradient(to right, #842431, #d13632);
	animation: fadeIn 0.1s ease-in-out ;
	animation-fill-mode: forwards;
	margin-left: 0px!important;
	animation-delay:0.2s;
}
#orange {
    background-image: linear-gradient(to right, #ec612c, #f2b95d);
	animation: fadeIn 0.3s ease-in-out ;
	animation-fill-mode: forwards;
	animation-delay:0.3s;
}
#yellow {
    background-image: linear-gradient(to right, #f2bb46, #ffee54);
	animation: fadeIn 0.5s ease-in-out ;
	animation-fill-mode: forwards;
	animation-delay:0.4s;
}
#green {
    background-image: linear-gradient(to right, #58af57, #bdd252);
	animation: fadeIn 0.6s ease-in-out ;
	animation-fill-mode: forwards;
	animation-delay:0.5s;
}
#blue {
    background-image: linear-gradient(to right, #68c4e9, #5bbfea);
	animation: fadeIn 0.7s ease-in-out ;
	animation-fill-mode: forwards;
	animation-delay:0.6s;
}
#indigo {
    background-image: linear-gradient(to right, #0128f2,  #140c88);
	animation: fadeIn 1s ease-in-out ;
	animation-fill-mode: forwards;
	animation-delay:0.7s;
}
#purple {
    background-image: linear-gradient(to right, #772ef4, #431ac9);
	animation: fadeIn 1.2s ease-in-out ;
	animation-fill-mode: forwards;
	margin-right: 0px!important;
	animation-delay:0.8s;
}
#newred {
    background-image: linear-gradient(to right, #842431, #d13632);
}
#neworange {
    background-image: linear-gradient(to right, #ec612c, #f2b95d);
}
#newyellow {
    background-image: linear-gradient(to right, #f2bb46, #ffee54);
}
#newgreen {
    background-image: linear-gradient(to right, #58af57, #bdd252);
}
#newblue {
    background-image: linear-gradient(to right, #68c4e9, #5bbfea);
}
#newindigo {
    background-image: linear-gradient(to right, #0128f2,  #140c88);
}
#newpurple {
    background-image: linear-gradient(to right, #772ef4, #431ac9);
}
.move{
	
	transform: translateY(-210);
}
#btntxt{
	position: relative;
	bottom: -35px;
}


textarea{
	width:100%;
    min-height: 45vh;
    background-color: transparent;
    border-style: solid;
    text-align: center;
	padding: 5px;
	font-size: 2em !important;
	color: white;
	outline: none;
	border:none;
}
::placeholder {
	color: rgba(255, 255, 255, 0.644);}
	
#email-section{
    border: 1px;
    border-style: solid;
    border-color: white;
	width: fit-content;
    margin: auto;
}
#email{
	color: white;
	text-align: center;
	background-color: transparent;
	height:33px;
	outline: none;
	border: none;
	width: 100%;
	font-size:1.2em;
}

#form-s6
{	
	width: 60%;
    margin-top: 20%;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    margin: auto;
    margin-top: 35vh;
}

#email{
	color:white;
}

.arrow-buttons{
	background: transparent;
	border:none;
	outline:none;
}
#sendemail{
	vertical-align: middle;
}

.next-button{
display:none;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 25.5%;
	opacity:0;
	
}

.arrow-img{
	background: url("images/arrowbutton.png");
	width: 45px;
    height: 31px;
}
	
.csbuttons{
    text-align: center;
    width: 180px;
    font-size: 22px;
    border-radius: 10px;
    height: 73px;
    color: rgb(253, 253, 253);
    opacity: 0;
    animation: fadeIn 2s ease-in-out 3s;
    animation-fill-mode: forwards;
    animation-delay: 12s;
	outline: none;
	border: none;
}
.container.position{
    position: fixed;
    right: 6%;
    bottom: 6%;
	justify-content: flex-end;
	width: fit-content;
}
.arrow-image{
	
	width: 42px;
	height: 29px;
	text-align: center;
    font-size: unset;
    border-radius: 10px;
    color: rgb(253, 253, 253);
    opacity: 0;
    animation: pulse 2s infinite;
    animation-fill-mode: forwards;
    animation-delay: 14s;
	position: absolute;
}
.position-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
}

.c{ 
	color: whitesmoke;
	margin-top: 10vh;
}

#next{
   margin-top:10vh;
    margin-left: auto;
    margin-right: auto;
	opacity:0;
	animation: fadeIn 1s;
    animation-fill-mode: forwards;
	animation-delay: 12s;
pointer-events: none;
}



.button-label{
	text-transform: uppercase;
	
}

.col-sm-12, .col-md-12, .col-lg-8, .col-xl-9{
	width:85% !important;
	margin: auto;
}
.position-arrow{
	display: none !important;
}
.position-button{
	display:none !important;
}
.yellow-label{
	opacity: 0;
}