@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100;300;500;700;800;900&display=swap');

/* NEW CSS */
body { font-family:'Commissioner', "Arial", "serif"; color:#F9F9F9; font-size:16px; font-weight:300; position:relative; background: #9a64dc}
a { font-family:'Commissioner', "Arial", "serif"; color:#F9F9F9; font-size:16px; font-weight:300; text-decoration:none; }
a:hover { font-family:'Commissioner', "Arial", "serif"; color:#F9F9F9; font-size:16px; font-weight:300; text-decoration:none; }

a, img, input, button, textarea, select { outline:none; }

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

a, .trans { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }

#wrapper { position:relative; overflow:hidden; min-height: 100vh}

.no-scroll { overflow: hidden; }

.preload-wrapper { display: none}
.preload { position: fixed; z-index: 10; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.preloader { background-image: url(../images/preloader.svg); background-position: 50% 50%; background-repeat: no-repeat; display: block; width: 64px; height: 64px}
.preloader-text { text-transform: uppercase; font-size: 18px; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,1); padding-left: 20px; font-weight: bold}

.header { position:absolute; z-index:2; left:0; height:100px; right:0; top:0; background:url("../images/pattern.png") repeat-x 0 50%; background-size:auto 60px; animation:animBg 24s linear infinite; }
.footer { position:absolute; z-index:2; left:0; height:100px; right:0; bottom:0; background:url("../images/pattern.png") repeat-x 0 50%; background-size:auto 60px; animation:animBg 24s linear infinite; }

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


.logo { display:block; width:100%; max-width:480px; margin:150px auto 15vh auto; position: relative; z-index: 3}
.logo img { display:block; width:100%}

.anim_1, .anim_2, .anim_3, .anim_4 { position:absolute; z-index:1; height: 7vh}

.anim_1 { left: 0; top: 100px; animation:anim1 10s linear infinite;}
.anim_2 { left: 0; bottom: 100px; animation:anim2 12s linear infinite;}

.anim_3 { right: 0; top: 100px; animation:anim3 9s linear infinite;}
.anim_4 { right: 0; bottom: 100px; animation:anim4 11s linear infinite;}



@keyframes anim1 {
  100% {
    left:1vw; top: 130px
  } 75% {
    left:12vw; top: 35vh
  } 50% {
    left:5vw; top: 45vh
  } 20% {
    left:10vw; top: 25vh
  } 0% {
	left:1vw; top: 130px
  }
}

@keyframes anim2 {
  100% {
    left:1vw; bottom: 35vh
  } 75% {
    left:12vw; bottom: 130px
  } 50% {
    left:5vw; bottom: 25vh
  } 20% {
    left:10vw; bottom: 45vh
  } 0% {
	left:1vw; bottom: 35vh
  }
}



@keyframes anim3 {
  100% {
    right:1vw; top: 47vh
  } 75% {
    right:12vw; top: 15vh
  } 50% {
    right:5vw; top: 35vh
  } 20% {
    right:10vw; top: 20vh
  } 0% {
	right:1vw; top: 47vh
  }
}

@keyframes anim4 {
  100% {
    right:1vw; bottom: 130px
  } 75% {
    right:12vw; bottom: 19vh
  } 50% {
    right:5vw; bottom: 42vh
  } 20% {
    right:10vw; bottom: 15vh
  } 0% {
	right:1vw; bottom: 130px
  }
}



/* WEB FORM */
.web-form { padding-bottom:150px; position: relative; z-index: 3; width: 100%; max-width: 420px;margin: auto}


.web-form .file {  }
.web-form .file label { display:block; width: 100%; height: 60px; border:none; border-radius:10px; overflow:hidden; background: -webkit-linear-gradient(45deg, rgb(210, 239, 0), rgb(154, 100, 220));
background: -moz-linear-gradient(45deg, rgb(210, 239, 0), rgb(154, 100, 220));
background: linear-gradient(45deg, rgb(210, 239, 0), rgb(154, 100, 220)); box-shadow:0 0 10px rgba(0,0,0,0.5); cursor:pointer; position:relative; text-align: center; line-height: 58px; color: #fff; font-size: 24px; text-shadow: 0 0 2px rgba(0,0,0,1); font-weight: bold}
.web-form .file label:hover { box-shadow:0 0 10px rgba(0,0,0,1);}
.web-form .file input { display:none}

.web-form .button {padding-top:20px}
.web-form .button button { display:block; width: 100%; height: 60px; border:none; border-radius:10px; overflow:hidden; background: #d2ef00;; box-shadow:0 0 10px rgba(0,0,0,0.5); cursor:pointer; position:relative; text-align: center; line-height: 58px; color: #fff; font-size: 24px; text-shadow: 0 0 2px rgba(0,0,0,1); font-weight: bold}
.web-form .button button:hover { box-shadow:0 0 10px rgba(0,0,0,1);}

.success { text-align: center; padding-bottom: 150px; font-size: 28px; text-shadow: 0 0 2px rgba(0,0,0,1); line-height: 1.3; display: none }

@media (max-width:1200px) {
	#wrapper { width:100%; padding:0 10px}
	
	.anim_1, .anim_2, .anim_3, .anim_4 { display: none}
}

/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { 
	
	
}

/* Landscape phone to portrait tablet */
@media (max-width:767px) {
	.header { background-size:auto 50px; animation:animBg 40s linear infinite; }
	.footer { background-size:auto 50px; animation:animBg 40s linear infinite; }

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

/* Landscape phones and down */
@media (max-width:480px) { 
	
}