/* ------ Removal of default padding, margin & list style ------ */

*{
	margin: 0px; padding: 0px; list-style-type: none;
	text-decoration: none;
}
html{
	min-height: 100%; min-width: 100%; position: relative;
}
body {
	overflow: hidden;
}

@font-face {
    font-family: calibril; src: url(CALIBRIL.ttf);
}

/* -------- Load -------- */

#l-sn {
	width: 100%; height: 100vh; position: fixed;
	top: 0; background-color: rgb(81,174,238); 
	text-align: center; z-index: 5;
}
#l-sn p{
	position: relative; top: 40%; font-family: arial;
	font-size: 26pt; font-weight: 600; color: white;
	animation: prefade 2s infinite;
}

#ani-cont{
	width: 100%; height: 100px;
	margin: 50px 0 0 0; text-align: center;
	position: relative; top: 40%;
}
#left-cont {
	width: 200px; height: 25px; display: inline-block;
	animation: drawArc1 1s linear infinite;
}

#left, #right, #center {
	display: inline-block; width: 25px;
	height: 25px; border-radius: 50%;
	background-color: white;
}

#center {
	margin: 0 15px;	animation: expand 1s infinite; 
}


/* -------- Nav -------- */

nav {
	width: 100%;
	transition: .5s; position: absolute; top: 0px; z-index: 3;
}

.nav-sel a {
	font-family: calibril; font-size: 13pt; color: white;
}
.nav-sel p {
	display: none;
}

.banner {
	background-color: rgba(255,255,255,0.7); text-align: center;
}
.banner p {
	display: none;
}

.banner, .nav-sel {
	padding: 0 10%;
}

.nav-sel {
	background-color: rgba(0,0,0,0.7);
}
.nav-sel a {
	padding: 15px; border-bottom: solid 3px rgba(0,0,0,0);
	transition: .3s; display: inline-block; 
}
.nav-sel a:hover {
	border-bottom: solid 3px rgb(133,248,253); box-shadow: 0 5px 2px rgba(133,248,253,.5);
	color: rgb(133,248,253); text-shadow: 0 0 10px rgb(133,248,253), 0 0 10px rgb(133,248,253);
}


/* -------- Hide Side Nav -------- */

.nav-tab {
	display: none;
}
#side-nav {
	display: none;
}


/* --------------------------- Medium sized screens -------------------------- */

@media screen and (max-width:1680px){
	
/* -------- nav -------- */

	
}


/* --------------------------- Tablet sized screens -------------------------- */

@media screen and (max-width:1200px){
	
/* -------- nav -------- */
.social {
	padding: 10px 2%;
}

.banner, .nav-sel {
	padding: 0 2%;
}
.nav-sel {
	text-align: center;
}

.nav-sel a {
	padding: 10px 7.5px;
}

}


/* --------------------------- Mobile sized screens -------------------------- */

@media screen and (max-width:680px){

/* -------- Hide Nav -------- */

.nav-sel p {
	display: block;
}

.banner p {
	font-size: 28pt; padding: 25px 10px; float: left; display: block;
}
.banner img {
	width: 203px;
}


.nav-tab {
	background-color: rgba(255,255,255,0.5);
	display: block;
}
.nav-tab img {
	height: 60px;
}
.nav-tab p {
	font-size: 10pt; color: white; text-align: center;
	background-color: rgb(162,0,0);
}


.side-btt {
	margin: 5px 0 0 10px; font-size: 28pt; font-weight: 600;
	color: black; cursor: pointer; float: left;
}


/* -------- Side Nav -------- */

.nav-sel {
	height: 100%; width: 0; padding: 60px 0 0 0; position: fixed; 
	top: 0; left: 0; background-color: black; overflow-x: hidden; 
	display: block; transition: width 0.5s; z-index: 2;
}
.nav-sel a {
	width: 200px; margin: 0 5px; padding: 12px 8px; font-size: 25px;
	font-family: arial; overflow-x: hidden; color: gray;
	text-decoration: none; display: block; transition: color 0.3s;
}
.nav-sel p {
	font-size: 28px; font-weight: 600; color: white; 
	position: relative; right: 25px; float: right; 
}
.nav-sel a:hover{
	color: white;
}


#cover {
	height: 100%; width: 0; position: fixed; top: 0; 
	left: 0; transition: background-color .5s; z-index: 1;
}


/* -------- Background -------- */

#background {
	height: 60px;
}

#closebtn {
	position: absolute;
	top: 0;
	left: 175px;
	font-size: 36px;
}

}



@keyframes prefade{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes zoom{
  0%{
    opacity: 0;
  }

  50%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes expand{
  0%{
	transform: scale(1);
  }

  15%{
	transform: scale(1);
  }
  
  50%{
	transform: scale(1.4);
  }
  
  65%{
	transform: scale(1.4);
  }

  100%{
    transform: scale(1);
  }

}

@keyframes drawArc1 {
  0%{
	transform: rotate(0deg);
  }
  15%{
	transform: rotate(0deg);
  }
  40%{
	transform: rotate(160deg);
  }
  50%{
	transform: rotate(180deg);
  }
  65%{
	transform: rotate(180deg);
  }
  90%{
	transform: rotate(340deg);
  }
  100%{
    transform: rotate(360deg);
  }
}