:root{
	--blue:#07b8fb;
	--mint:#90ffc4;
	--dpurple1:#030623;
	--dpurple2:#321356;
	--purple:#5d12b3;
	--lpurple:#a969f2;
	--hotpink:#ff5398;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

*:focus {
  outline:none;
}

img {
	display:block;
	max-width:100%;
}

.wrap {
  position:relative;
  width:1220px;
  padding:0 10px;
  max-width:100%;
  margin:0 auto;
  clear:both;
}

#burger,
#mobnav {
  display:none;
}

html,
body {
	min-height:100%;
}

body {
    font-size:62.5%;
    font-family: 'Exo', sans-serif;
    background-color: rgb(6,10,58);
	color:#fff;
}

header {
	position:fixed;
	width:6%;
	height:100%;
	background-color:var(--dpurple1);
	padding:1.5% 0;
	left:0;
	top:0;
	z-index:100;
}

    nav {
    	float:left;
    	width:100%;
    }
  
		nav ul {
			float:left;
			clear: left;
			width:100%;
			list-style: none;
		}

			nav ul li {
				float:left;
				clear:left;
				width:100%;
			}

				nav ul li a {
					float:left;
					clear:left;
					width:100%;
					padding:0 2em;
					margin-bottom:2em;
					text-decoration: none;
					position: relative;
				}

					nav img {
						float:left;
						clear:left;
						width:100%;
					}

					nav img.blue {
						display:none;
					}

					nav ul li a:hover img.purple,
					.active img.purple {
						display:none;
					}

					nav ul li a:hover img.blue, 
					.active img.blue {
						display:block;
						filter:drop-shadow(0 0 8px var(--blue));
					}

					nav a p {
						float:left;
						clear:left;
						color:var(--lpurple);
						font-size:0.9em;
						width:100%;
						text-align: center;
						text-transform: uppercase;
						margin-top:0.5em;
					}

					nav a:hover p,
					.active p {
						color:var(--blue);
					}

					.subnav {
						position:absolute;
						left:100%;
						width:200px;
						display:none;
					}

						.subnav li {
							float:left;
							clear:left;
							width:100%;
						}

							.subnav li a {
								float:left;
								clear:left;
								width:100%;
								color:var(--lpurple);
								background-color:var(--dpurple1);
								padding:1em;
								margin:0;
								text-transform: uppercase;
								letter-spacing: 0.025em;
								border-bottom:1px solid var(--purple);
							}

								.subnav li a:hover {
									color:var(--blue);
								}

								.subnav li:last-of-type a {
									border-bottom:0;
								}

					nav li:hover .subnav {
						display:block;
					}

					nav .newdot {
						position: absolute;
						left: 2.5em;
						top:0.25em;
						width:0.75em;
						height:0.75em;
						background-color:var(--mint);
						border-radius:10em;
						z-index:6;
					}

    #logo {
		float:left;
    }
  
		#logo img {
			width:100%;
		}

.flex {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
	font-weight:normal;
}

.main p,
.main li{
	font-size:1.4em;
	line-height:1.6;
	margin-bottom:1em;
}

	.main p a,
	.main li a,
	.main td a {
		color:var(--blue);
	}

.main ul,
.main ol {
	margin:2em;
}

  .main li {
    padding-left:1em;
  }


.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
	margin-bottom:1em;
}

input,
textarea {
	background-color:#f1f4f4;
	border:1px solid #dee1e1;
	padding:0.5em;
	font-size:1.4em;
}

.robot input {
	float:left;
	width:12px;
	margin-right:1em;
}

input[type="submit"] {
	float:left;
	clear:left;
	text-decoration: none;
	cursor: pointer;
	border:none;
	outline:none;
}

.pager-nav,
.pager-nav ul{
	float:left;
	Clear:left;
	width:100%;
	text-align: center;
	padding:0;
	margin:0;
}

.pager-nav {
	margin-bottom:5%;
}

	.pager-nav ul li {
		display:inline-block;
		padding:0;
		margin:0;
	}
	
		.main .pager-nav ul li a {
			display:block;
			border:1px solid var(--purple);
			border-radius:10em;
			padding:0.5em 1em;
			color:#fff;
			text-decoration: none;
			margin:0.25em;
		}
		
			.main .pager-nav ul li a:hover,
			.main .pager-nav ul li.active a{
				background-color:var(--blue);
			}

.errortext {
	color:red;
	font-weight:bold;
}

.left {
	float:left;
}

.right {
	float:right;
}

.blue {
	color:var(--blue);
}

.red {
	color:var(--hotpink);
}

.mint {
	color:var(--mint);
}

.mint-fade {
	background: linear-gradient(0deg, rgba(0,180,255,1) 0%, rgba(117,255,182,1) 100%);
}

.pink-fade {
	background: linear-gradient(180deg, rgba(114,0,255,1) 0%, rgba(255,83,182,1) 100%);
}

.two-col {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap:1.5em;
}

	.two-col label {
		width:100%;
	}

.three-col {
	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap:1.5em;
}

.round-btn {
	display:inline-block;
	font-size:1.4em;
	border:1px solid var(--blue);
	color:#fff;
	text-decoration: none;
	padding:0.75em 1.5em;
	border-radius: 10em;
	margin:0 1em 1em 0;
}

	.round-btn:hover {
		background-color:var(--blue);
	}
  
footer {
  clear:both;
}

	.main .copyright {
		font-size:1em;
		color:var(--purple);
	}

@media screen and (max-width:1199px) {
	nav ul li a p{
		font-size:0.8em;
	}
}

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

	nav ul li a {
		margin-bottom:1em;
	}

	nav ul li a p{
		display:none;
	}
  
	header {
	  	top:unset;
	    bottom:0;
	    left:0;
	    width:100%;
	    height:auto;
	    z-index:20;
	    padding:1em;
	    background-color:var(--dpurple1);
	}


	nav ul {

	}

		nav ul li {
			clear:none;
			float:left;
			margin:0 0.75em 0 0;
			width:auto;
		}

		  	nav ul li a {
		  		float:left;
		  		margin:0;
		  		padding:0;
		  	}

		  		nav ul li a img {
		  			height:3.75em;
		  			width:auto;
		  		}

		  		nav ul li:hover .subnav {
		  			display:none;
		  		}

		  		nav .newdot {
		  			left:0.25em;
		  		}
  
  #burger {
    width:32px;
	/*display:block;*/
  }  
        
		#mobnav li a.tri {
          position:absolute;
          float:none;
          clear:none;
          right: 0;
          top: 0;
		  width:3em;
		  height:3.1em;
          border:none;
		  padding:0.4em;
        }
		
			.tri img {
				position:relative;
				display:block;
				top:50%;
				transform: translateY(-50%);
			}
}

@media screen and (max-width:499px) {
	.main {
	}
}