html{
	height: 100%;
}

body {
	margin: 0;
	width: 100%;
	height: 100vh;
	color: #fff;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 1000% 1000%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#loadmidd{
  position: fixed;
  width: 100%;
  height: 100%;
  background: #D35400;
  background-size: cover;
	z-index: 999999;
}

.loadimag{
  margin-left: 44%;
    padding-top: /*220px;*/18%;
    width: 160px;
  height: auto;
}

.loadword{
  margin-left: /*620px;*/45.5%;
}

.sk-folding-cube {
  margin-left: /*auto*/48.5%;
  /*padding-top: 18%;*/
  /*margin-top: 300px;*/
  width: 30px;
  height: 30px;
  position: relative;
  /*padding-bottom: */
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

#loadmidd:hover .sk-folding-cube{
  transition: 0.2s;
  margin-top: 5%;
  transition: 1s;
}

#loadmidd:hover .loadimag{
  transition: 2s;
padding-top: 14%;
transition: 1s;  
}

#loadmidd:hover .loadw:after{
  transition: 2s;
  content: 'LEIOTHRIXX';
  opacity: 1;
}


.leo{
	max-width: 160px;
	height: auto;
}

.bg-light{
	background: transparent !important;
	transition: 1s ease;
}

.bg-light.scrolled{
    transform: translateY(-100%);
}

.bg-light.scrolledup{
	background: lightblue !important;
	height: 30%;
	transition: 1s ease;
}

.bg-light.scrolledup #tog{
	background: lightblue !important;
    background-size: cover;
}

#to{
	color:black;
	font-size: 50px;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
	padding-top: 240px;
}

 #start{
	border: 1px solid black;
	width: 10%;
	/*box-shadow: text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 8px 14px rgba(0,0,0,0.2),
 	             0px 12px 14px rgba(0,0,0,0.1);*/
}

#dayone{
	color:black;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}

.desc{
	border: 1px solid black;
	width: 20%;
}

.dayoneconcon{
	width: 265px;
  height: 383px;
   display: inline-grid;
   padding: 4px;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}

.dayoneconcon.slideright:hover
{
  
  background-color: #eaab00; 

  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),  url('data:image/gif;base64,R0lGODlhAQABAPAAAOqrAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=='),
url('data:image/gif;base64,R0lGODlhAQABAPAAAP///////yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');
  background-repeat: no-repeat;
  background-size: 0 2px, 0 100%, 0% 2px;
  background-position: bottom center, bottom center, top center;
  -webkit-animation: drawBorderFromCenter 0.6s;
  }


@-webkit-keyframes drawBorderFromCenter {
    0% {
      background-size: 0 2px, 0 0, 100% 100%;
    }
    20% {
      background-size: 100% 2px, 100% 0, 100% 100%;
    }
    66%
    {
      background-size: 100% 2px, 100% 98%, 100% 100%;
    }
    99%
    {
      background-size: 100% 2px, 100% 98%, 0 2px;
    }
}


.inaug{
	background: url("mata.jpg");
	background-repeat: no-repeat;
    background-size: cover;
}

.fashion{
	background: url("fashion.jpg");
	background-repeat: no-repeat;
    background-size: cover;		
}

.trashion{
	background: url("trashion.jpg");
	background-repeat: no-repeat;
    background-size: cover;		
}

.magician{
	background: url("magician.jpg");
	background-repeat: no-repeat;
    background-size: cover;
}

.micrap{
	background: url("micrap.jpg");
	background-repeat: no-repeat;
    background-size: cover;
}

.band{
	background: url("band.jpg");
	background-repeat: no-repeat;
    background-size: cover;
}

.djeven{
	background: url("djevening.png");
	background-repeat: no-repeat;
    background-size: cover;	
}

.comedy{
	background: url("comedy.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.poetry{
	background: url("poetry.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.beatbox{
	background: url("beatbox.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.instrum{
	background: url("instrum.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.solosing{
	background: url("solosing.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.duetsing{
	background: url("duetsing.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.groupsing{
	background: url("groupsing.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.photo{
	background: url("photograph.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.toon{
	background: url("toon.png");
	background-repeat: no-repeat;
    background-size: cover;	
}
.graf{
	background: url("graf.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.debate{
	background: url("debate.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.futsal{
	background: url("futsal.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.renecoat{
	background: url("rene.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.bollquiz{
	background: url("bquiz.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}

.quiz{
	background: url("quiz.jpg");
	background-repeat: no-repeat;
    background-size: cover;	
}


.grey{
	color: darkgray;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}

/* .smal{
	font-size: 2em;
} */
	
	.yellow{
	color: #DA621E;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}


.black{
	color: black;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}

.white{
	color:white;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
}

.blurr{
	background:rgba(0,0,0,0.8);
    margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
}


.moveup{
	/*transform: translateY(160px);*/
	bottom: -160px;
	position: relative;
	/*transition: 60s;*/
}

.moveupp{
max-width: 60px;
height: auto;
bottom: -200px;
position: relative;	
opacity: 0;
}

.chupbut{
	bottom: -220px;
	position: relative;
	opacity: 0;
}

.butto{
	background-color: transparent;
	color: white;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
	font-size: 17px;
	/*letter-spacing: 1px;*/
	width:160px;
    height: 40px;
	text-align: center;
	border:none;
	border-radius: 4px;
}

.dayoneconcon:hover .moveup{
	transition: 0.5s;
    bottom: -110px;	
}

.dayoneconcon:hover .moveupp{
 transition: 0.5s;
 bottom: -130px;
 opacity: 1;
}

.dayoneconcon:hover .chupbut{
	transition: 0.5s;
    bottom: -150px;
	opacity: 1;
}

.butto:hover{
    background-color: transparent;
	color: black;
	box-shadow: 0px 7px 15px 5px black;
}

.registered{
	margin-left: 43%;
	background-color: green;
	color: white;
	text-shadow: 0px 4px 10px rgba(0,0,0,0.4),
 	             0px 12px 14px rgba(0,0,0,0.2),
 	             0px 8px 14px rgba(0,0,0,0.1);
	font-size: 17px;
	/*letter-spacing: 1px;*/
	width:160px;
    height: 40px;
	text-align: center;
	border-radius: 4px solid black;
}

/* .middl{
	text-align: center;
} */

.registered:hover{
    background-color: transparent;
	color: black;
	box-shadow: 0px 7px 15px 5px black;
}


/*#inaug:hover .moveupp:after{
	background: url("inaugr.png");
	opacity: 1;
}*/

/*#inaug:hover h3:after*/

/*#inaug:hover .moveupp:after{
	content: '->';
	opacity:1;
	bottom:20px;
	transition:0.3s;
}*/

wid{
	width: 100%;
}

#mob {
  display: none;
}
 

.last{
    background-color: black;
    color: white;
}

.lastsmall{
    font-size: 1px;
}

.change{
    color: white;
    text-decoration: none;
    margin-left: 60px;
} 

.com{
    padding-top: 10px;
    margin-left: 60px;
}

.fol{
    text-align: right;
}

a.change:hover{
    color: grey;
    text-decoration:none;
    transition: 0.5s;
}

a span{
    position: relative;
    transition: 0.6s;
}

a:hover .one{
    padding-right: 73px;
}

a:hover .two{
    padding-right: 73px;
}

a:hover .one:after {
  content: 'Youtube';
  position: absolute;
  opacity: 1;
  left: 40px;
  transition: 0.3s;
}

a:hover .two:after{
content: 'Instagram';
  position: absolute;
  opacity: 1;
  left: 35px;
  transition: 0.3s;
}


/* @media all and (min-width: 500px) {
	
	.leo{
		max-width: 100px;
	}
	
  #desk {
    display: inline-block;
  }
  #mob {
    display: none;
  } */
	
 /* .logoname:after{
		content:'';
		opacity: 1;
	}  */
	
/* } */

@media all and (max-width: 720px){
	.logoname:after{
		content: 'LEOTHRIXX';
		opacity: 1;
	}
}

@media all and (max-width: 4000px){
	.logoname:after{
		content: 'LEOTHRIXX';
		opacity: 1;
}
}


@media all and (max-width: 500px){
	
		#loadmidd{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(211,84,0,1);
  background-size: cover;
  z-index: 999999;
}
	
	.loadimag{
  margin-left: 32%;
    padding-top: /*220px;*/48%;
    width: 160px;
  height: auto;
}

.loadword{
  margin-left: /*620px;*/38.5%;
}
	
	#loadmidd:hover .sk-folding-cube{
  transition: 0.2s;
  margin-top: 25%;
  transition: 1s;
}

#loadmidd:hover .loadimag{
  transition: 2s;
padding-top: 28%;
transition: 1s;  
}

#loadmidd:hover .loadw:after{
  transition: 2s;
  content: 'LEIOTHRIXX';
  opacity: 1;
}
	
		#tog{
			background: lightblue !important;
    background-size: cover;
	}
	
	.leo{
		max-width: 99px;
	}
	
	#leo{
        margin-left: 40px;
    } 	

	.logoname:after{
		content:'';
		opacity: 1;
	}
	
	#mob {
    display: inline-block;
  }
  #desk {
    display: none;
  }
	.fol{
    text-align: left;
}	
	.dayoneconcon{
	 margin-left: 45px;	
	}
	
	.registered{
		margin-left: 0px;
	}
	
	}