/* Reset margin/padding */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	font-family: "Lucida Sans", sans-serif;
}

body{
	background-color: #000;
	color: #fff;
	overflow-y: scroll;
}
a{
	color: #cf1313;
}

/* Responsive */
.row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
	float: left;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Main */
.about{
	margin-top: 25px;
	color: #fff;
	padding: 25px;
	-webkit-animation: fadein 6s linear forwards;
	animation: fadein 6s linear forwards;
	opacity: 0;
	background: rgba(0, 0, 0, 0.8);
	position: relative;
	text-shadow: 1px 1px #000;
}
.about p{
	padding: 10px;
	margin-top: 10px;
}
.about-text1{
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:20%; left: 72%;
    z-index:1;
}
.about-text2{
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:35%; left: 2%;
    z-index:1;
}
.about-text3{
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:53%; left: 70%;
    z-index:1;
}
.about-text4{
    width:100%; height:0;
    font-size: 25px; line-height: 0;
    color:white;
    position:absolute; top:71%; left: 1%;
    z-index:1;
}

	)
.bg-image {
  /* Full height */
  height: 50%;
      display:block;
    max-width: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-bottom: solid #000 5px;
}

/* Images used */
.img1 { background-image: url("../images/about/2.png"); }
.img2 { background-image: url("../images/about/4.png"); }
.img3 { background-image: url("../images/about/1.png"); }
.img4 { background-image: url("../images/about/3.png"); }

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  font-size: 80px;
  border: 10px solid #f1f1f1;
  position: fixed; /* Stay fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}
.header-wrap{
	position: sticky;
	width: 100%;
}
.header{
	height: 80px;
	background-color: #000000;
	display: flex;
	justify-content: center;
}
.header .links{
	margin-left: 80px;
	margin-right: 50px;
}
.header ul li{
	float: left;
	list-style: none;
	margin-right: 100px;
	font-size: 20px;
	text-transform: uppercase;
	line-height: 80px;
}
.header a{
	color: #fff;
	text-decoration: none;
}
.header ul li a:hover{
	color: #000000;
}
.logo img{
	float: left;
	width: 200px;
	height: 95px;
}
.header .icon{
	width: 32px;
	height: 32px;
	float: left;
	margin: 23px 0 0 50px;
}
/* Media */
#myVideo {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
}
/* Dropdown */
.dropdown{
	position: relative;
	display: inline-block;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 210px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
	z-index: 1;
	color: #000;
	margin-top: 20px;

}
.dropdown-content li a{
	float: left;
	clear: both;
	color: #000;
	font-size: 18px;
}
.dropdown-content li{
	margin-left: 20px;
	line-height: 20px!important;
	margin-top: 5px;
	margin-bottom: 10px;
}
.dropdown-content li a:hover{
	color: #000!important;
	padding-left: 5px;
}
.dropdown-content li:hover{
	border-left: solid #000 1px;
}
.dropdown:hover .dropdown-content {
	display: block;
}
.tos{
	padding-left: 50px;
}
.tos li{
	list-style-type: upper-roman;
}
.adm-login{
	margin-top: 10%;
	padding: 20px;
	background-color: #cecece;
	color: #252525;
	border-top: solid #0f5b53 5px;
	-webkit-animation: fadein 4s linear forwards;
	animation: fadein 4s linear forwards;
	opacity: 0;
	min-height: 250px;
	box-shadow: 5px 10px #555;
	font-family: Tahoma, Geneva, sans-serif;
	float: left;
	width: 100%;
}

.adm-login input{
	padding: 5px;
}
.adm-panel{
	margin-top: 80px;
	padding: 20px;
	background: rgba(0, 0, 0, 0.4);
	border-top: solid #fff 1px;
	-webkit-animation: fadein 4s linear forwards;
	animation: fadein 4s linear forwards;
	opacity: 0;
	min-height: 800px;
}
.aw-links{
	font-family: Arial;
	color: #26867c;
	text-decoration:none;
	padding-left: 5px;
	font-weight: bold;
	text-shadow: 2px 2px 2px #cf1313;
	font-size: 16px;
}
.aw-links:hover{
	color: #1EB6A7;
}
.login-area{
	margin-top: 10%;
	padding: 20px;
	background-color: #cecece;
	color: #252525;
	border-top: solid #0f5b53 5px;
	-webkit-animation: fadein 4s linear forwards;
	animation: fadein 4s linear forwards;
	opacity: 0;
	min-height: 250px;
	box-shadow: 5px 10px #555;
	font-family: Tahoma, Geneva, sans-serif;
	float: left;
	width: 100%;

}
.login-area form{
	margin-top: 20px;
	margin-left: 10px;
	text-align: left;
}
button{
	padding: 3px;
	font-weight: bold;
	background: #ddd;
	float: left;
	border: solid #888 1px;
}
button:hover{
	font-weight: bold;
	border: solid #1eb6a7 1px;
	background: #ddd;
}
.login-area .avatar img {
	border: solid #1eb6a7 5px;
	height: 75px;
	width: 75px;
	float: right;
}
.login-area .login-info, h3{
	background-color: #ddd;
	width: 43%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-left: solid #1eb6a7 5px;
	font-size: 12px;
	float: left;

}
.login-area span{
	padding-left: 10px;
}
.login-area .login-links{
}
.login-area .login-links ul{
	list-style: none;
	min-height: 45px;
	font-size: 12px;
}
.login-area .form{
	float: left;
	width: 100%;
}
.login-area .login-links ul li a{
	float: left;
	text-decoration: none;
	border-bottom: solid #1EB6A7 2px;
	padding-bottom: 5px;
	margin-right: 10px;
	margin-top: 10px;
	color: #252525;
	font-weight: bold;
}
.login-area .login-links ul li a:hover{
	border-bottom: solid #1EB6A7 2px;
	color: #b61e2d;
}
.login-area input{
	padding: 5px;
	margin-bottom: 10px;

}
.login-area p{
	margin-bottom: 8px;
	margin-top: 8px;
}
.login-area h3{
	border-left: solid #1eb6a7 5px;
	width: 32.5em;
	padding-bottom: 5px;
	padding-left: 10px;
	color: #093632;
	font-size: 12px;
}
.login-area label{
	font-weight: bold;
	font-size: 12px;
}
.login-area hr{
	border:none;
	margin-bottom: 15px;
}
.tooltip {
	font-family: Arial;
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	padding-left: 5px;
	color: #b61e2d;
}

.tooltip .tooltiptext {
	font-size: 12px;
	visibility: hidden;
	width: 280px;
	background-color: rgb(0, 0, 0, 0.5);
	color: #fff;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}

#gradient
{
  width: 100%;
  padding: 0px;
  margin: 0px;

}
@-webkit-keyframes fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.group-area h1{
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #fff;
	text-shadow: 3px 3px #000;
	margin-top: 10px;
}
.group-presentation{
	margin-top: 10px;
	padding-top: 30px;
	background: rgba(0, 0, 0, 0.4);
}
.group-presentation img{
	border: solid #fff 1px;
	width: 200px;
	height: 200px;
	-webkit-animation: fadein 6s linear forwards;
	animation: fadein 6s linear forwards;
	opacity: 0;
}
.group-presentation .description{
	margin-top: 25px;
	color: #fff;
	padding: 25px;
	-webkit-animation: fadein 6s linear forwards;
	animation: fadein 6s linear forwards;
	opacity: 0;
}
.group-presentation .description ul li{
	list-style: none;
	font-size: 20px;
	font-family: calibri;
}
.group-presentation .description ul{
	padding: 10px;
}
.index-box{
	position: fixed;
	top: 225;
	left: 100;
	padding: 20px;
	text-shadow: 2px 2px #0f5b53;
	display: none;
}
.index-box ul li{
	list-style: none;
	float: left;
	margin-right: 30px;
	margin-top: 50px;
	padding-bottom: 10px;
}
.index-box ul li a{
	text-decoration: none;
	border-bottom: solid #fff 2px;
	padding-bottom: 10px;
	color: #fff;
}
.index-box ul li a:hover{
	border-bottom: solid #1EB6A7 2px;
	color: #1EB6A7;
}
.index-box h1{
	margin-bottom: 10px;
}
.index-footer{
	position: fixed;
	bottom: 0;
	padding: 20px;
	opacity: 0.1;
}

/* Load index-box */
.animate-bottom {
	position: relative;
	-webkit-animation-name: animatebottom;
	-webkit-animation-duration: 3s;
	animation-name: animatebottom;
	animation-duration: 3s;
}

@-webkit-keyframes animatebottom {
	from { bottom:-100px; opacity:0 }
	to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
	from{ bottom:-100px; opacity:0 }
	to{ bottom:0; opacity:1 }
}
.dynamic-content {
    display:none;
}
.buttonbox{
	width: 100%;
	height: 120px;
	padding: 20px;
	border-top: solid #26867c 5px;
	background: rgba(0, 0, 0, 0.2);
}
.buttonbox input{
	padding: 10px;
}
.wlbox p{
	background: rgba(0, 0, 0, 0.2);
	padding: 10px;
	border-left: solid #26867c 5px;
}