@import url('https://fonts.googleapis.com/css?family=sans-serif&display=swap');

@media screen and (max-width:1920px) {
body{
  background-color: black;
  padding:0px;
  margin:0px;
  height: 100vh;
  overflow-x: hidden;
}
#particles-js{
  position: absolute;
  height: 200vh;
  width: 100%;
}
.container{
  position: relative;
  left: 0%;
  top: 20%;
  background: #000;
  width: 600px;
  height: 805px;
  margin: 0 auto;
  border-radius: 15px;
  border-bottom: 1px solid #000;
  margin-top: 0px;
  z-index: 10;
}
.container .inb{
  position: relative;
}
.container .paragraph{
  color: white;
  font-family: sans-serif;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
  z-index: 10;
  /*text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);*/
}
.container .register{
  background: linear-gradient(180deg,#000000, #485563, #29323c);
  border: 3px solid black;
  height: 100%;
  top: -15px;
  padding: 30px;
  border-radius: 25px;
  box-shadow: 0 0 10px rgba(33,156,243,0.5),
              0 0 20px rgba(33,156,243,0.5),
              0 0 30px rgba(33,156,243,0.5),
              inset 0 0 10px rgba(33,156,243,1);
}
.container .register .inb{
  position: relative;
}
.container .register .inb input,select{
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: white;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.container .register .inb1 select{
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: white;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.container .register .inb1 option{
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: black;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.container .register .inb input[name="regd"],
.container .register .inb input[name="clg"],
.container .register .inb input[name="name"],
.container .register .inb input[name="dept"]{
  text-transform: uppercase;
}
.container .register .inb label{
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 23px;
  font-family: 'sans-serif';
  font-weight: bold;
  color: white;
  pointer-events: none;
  transition: 0.5s;
}
.container .register .inb1 label{
  position: absolute;
  top: 42%;
  left: 1.5em;
  padding: 10px 0;
  font-size: 23px;
  font-family: 'sans-serif';
  font-weight: bold;
  color: white;
  pointer-events: none;
  transition: 0.5s;
}
.container .register .inb input,select:focus ~ label,
.container .register .inb input:valid ~ label{
  top: -30px;
  left: 0;
  color: #03a9f4;
  font-size: 19px;
  text-shadow:  0 0 10px rgba(33,156,243,1);
}
.container .register .inb1 input,select:focus ~ label,
.container .register .inb1 input:valid ~ label{
  top: -30px;
  left: 0;
  color: #03a9f4;
  font-size: 19px;
  text-shadow:  0 0 10px rgba(33,156,243,1);
}
.container .register .selection{
  width: 225px;
  height: 35px;
  border-radius: 30px;
  outline: none;
}

.container .register .check img{
  width: 50px;
  height: 50px;
}
.container .register .check .chek-checked{
  background-position: 0 0;
  border: 3px solid #2fbcdf;
}
.container .register .check .ntg{
  display: none;
}

.container .register .inb ul{
  position: relative;
  margin: 20px 0px;
  top: 30px;
  left: -4%;
  width: 40%;
  height: 100px;
}
.container .register .years{
  position: relative;
  width: 200px;
  padding: 10px;
  background: linear-gradient(180deg, #000000,#252525);
  box-sizing: border-box;
  border-radius: 20px;
  border: 3px solid black;
  height: 230px;
}
.container .register .years .year{
  position: absolute;
  left: 15%;
  display: flex;
  font-size: 25px;
  color: white;
  font-weight: bold;
  text-shadow:  0 0 10px rgba(33,156,243,1);
}
.container .register .years ul input[type="radio"]{
  position: absolute;
  height: 100%;
  width: 100%;
  visibility: hidden;
}
.container .register .years ul input[type="radio"]::before{
  content: '';
  position: absolute;
  top: 15%;
  left: -15%;
  width: 50px;
  height: 50px;
  line-height: 45px;
  font-family: 'sans-serif';
  font-size: 45px;
  text-align: center;
  background-color: #1c1c1c;
  border: 3px solid black;
  visibility: visible;
  cursor: pointer;
  border-radius: 10px;
  transition: 0.5s;
}
.container .register .years ul input[type="radio"]:nth-child(2){
  left: 70%;
}
.container .register .years ul input[type="radio"]:nth-child(3){

  top: 50%;
}
.container .register .years ul input[type="radio"]:nth-child(4){
  left: 70%;
  top: 50%;
}
.container .register .years ul input[type="radio"]:nth-child(1)::before{
  content: '1';
}
.container .register .years ul input[type="radio"]:nth-child(2)::before{
  content: '2';
}
.container .register .years ul input[type="radio"]:nth-child(3)::before{
  content: '3'
}
.container .register .years ul input[type="radio"]:nth-child(4)::before{
  content: '4';
}
.container .register .years ul input[type="radio"]:checked::before{
  background-color: black;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(33,156,243,0.5),
              0 0 20px rgba(33,156,243,0.5),
              0 0 30px rgba(33,156,243,0.5),
              inset 0 0 10px rgba(33,156,243,1);
}
.container .register .events{
  position: absolute;
  width: 300px;
  padding: 10px;
  bottom: 0%;
  left: 45%;
  background: linear-gradient(180deg, #000000,#252525);
  box-sizing: border-box;
  border-radius: 20px;
  border: 3px solid black;
  height: 230px;
}
.container .register .events .eve{
  position: absolute;
  left: 15%;
  display: flex;
  font-size: 25px;
  color: white;
  font-weight: bold;
  text-shadow:  0 0 10px rgba(33,156,243,1);
}
.container .register .events ul input[type="checkbox"]{
  position: absolute;
  height: 100%;
  width: 100%;
  visibility: hidden;
}
.container .register .events ul input[type="checkbox"]::before{
  content: '';
  position: absolute;
  top: 15%;
  left: -10%;
  width: 50px;
  height: 50px;
  line-height: 45px;
  font-family: 'sans-serif';
  font-size: 45px;
  text-align: center;
  background-color: #1c1c1c;
  border: 3px solid black;
  visibility: visible;
  cursor: pointer;
  border-radius: 10px;
    transition: 0.5s;
}
.container .register .events ul input[type="checkbox"]:nth-child(2){
  left: 80%;
}
.container .register .events ul input[type="checkbox"]:nth-child(3){
  top: 50%;
}
.container .register .events ul input[type="checkbox"]:nth-child(4){
  left: 80%;
  top: 50%;
}
.container .register .events ul input[type="checkbox"]:nth-child(5){
  left: 50%;
  top: 50%;
  transform: translate(0,-25%);
}
.container .register .events ul input[type="checkbox"]:nth-child(1)::before{
  content: '1';
}
.container .register .events ul input[type="checkbox"]:nth-child(2)::before{
  content: '2';
}
.container .register .events ul input[type="checkbox"]:nth-child(3)::before{
  content: '3'
}
.container .register .events ul input[type="checkbox"]:nth-child(4)::before{
  content: '4';
}
.container .register .events ul input[type="checkbox"]:nth-child(5)::before{
  content: '5';
}
.container .register .events ul input[type="checkbox"]:checked::before{
  background-color: black;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(33,156,243,0.5),
              0 0 20px rgba(33,156,243,0.5),
              0 0 30px rgba(33,156,243,0.5),
              inset 0 0 10px rgba(33,156,243,1);
}
.container .register .events p{
  position: absolute;
  font-size: 18px;
  font-weight: 5000px;
  font-family: 'sans-serif';
  color: white;
  transition: 0.5s;
  opacity: 0;
  pointer-events: none;
}
.container .register .events p.eve1{
  top: 45%;
  left: 10%;
  transform: translate(-10%,-10%);
}
.container .register .events p.eve2{
  left: 60%;
  top: 45%;
  transform: translate(-10%,-10%);
}
.container .register .events p.eve3{
  top: 50%;
  left: 10%;
  transform: translate(-10%,-10%);
}
.container .register .events p.eve4{
  left: 70%;
  top: 50%;
  transform: translate(-10%,-10%);
}
.container .register .events p.eve5{
  left: 44%;
  top: 42%;
  transform: translate(-10%,-10%) rotateY(360deg);
}
.container .register .events ul input[type="checkbox"]:nth-child(1):hover ~ p.eve1{
  top: 10%;
  left: 10%;
  transform: translate(-10%,-10%);
  opacity: 1;
}
.container .register .events ul input[type="checkbox"]:nth-child(1):checked ~ p.eve1{
  top: 10%;
  left: 10%;
  transform: translate(-10%,-10%);
  opacity: 1;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
}
.container .register .events ul input[type="checkbox"]:nth-child(2):hover ~ p.eve2{
  top: 10%;
  transform: translate(-10%,-10%);
  opacity: 1;
}
.container .register .events ul input[type="checkbox"]:nth-child(2):checked ~ p.eve2{
  top: 10%;
  transform: translate(-10%,-10%);
  opacity: 1;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
}
.container .register .events ul input[type="checkbox"]:nth-child(3):hover ~ p.eve3{
  top: 83%;
  transform: translate(-10%,-10%);
  opacity: 1;
}
.container .register .events ul input[type="checkbox"]:nth-child(3):checked ~ p.eve3{
  top: 83%;
  transform: translate(-10%,-10%);
  opacity: 1;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
}
.container .register .events ul input[type="checkbox"]:nth-child(4):hover ~ p.eve4{
  top: 83%;
  transform: translate(-10%,-10%);
  opacity: 1;
}
.container .register .events ul input[type="checkbox"]:nth-child(4):checked ~ p.eve4{
  top: 83%;
  transform: translate(-10%,-10%);
  opacity: 1;
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
}
.container .register .events ul input[type="checkbox"]:nth-child(5):hover ~ p.eve5{
  transform: translate(-10%,-10%) rotateY(0deg);
  opacity: 1;
}
.container .register .events ul input[type="checkbox"]:nth-child(5):checked ~ p.eve5{
  color: #fff;
  text-shadow:  0 0 10px rgba(33,156,243,1),
                0 0 10px rgba(33,156,243,1);
  transform: translate(-10%,-10%) rotateY(0deg);
  opacity: 1;
}
.container .register .btn{
  position: absolute;
  bottom: -17%;
  left: 50%;
  transform: translate(-50%,0);
  padding: 10px;
  width: 90%;
  background: #1f1f1f;
  color: #efefef;
  font-family: 'sans-serif';
  line-height: 30px;
  font-size: 30px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}
.container .register .btn:focus{
  outline: none;
}
.container .register .btn:hover{
  box-shadow: 0 0px 10px rgba(0,0,0,1);
}
.discrip p{
  margin: 15px;
  font-size: 28px;
  font-family: sans-serif;
  color: black;
}
.contact{
  position: absolute;
  bottom: -160%;
  left: 0;
  width: 100%;
  height: 60vh;
  background-color: #343a40;
}

.contact .map{
  position: absolute;
  top: 5%;
  right: 5%;
  width:40%;
  height:90%;
}
.contact .info{
  position: absolute;
  top: 5%;
  left: 5%;
  width: 40%;
  height: 90%;
  color: white;#0052D4;
}
.contact .info .address .line1{
  position: absolute;
  top: 45%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address .line2{
  position: absolute;
  top: 41%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address .line3{
  position: absolute;
  top: 47%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address .line4{
  position: absolute;
  top: 54%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address .line5{
  position: absolute;
  top: 61%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address .line6{
  position: absolute;
  top: 68%;
  left: 8%;
  font-size: 20px;
  font-family: sans-serif;
  color: white;#0052D4;
}
.contact .info .address i{
  position: absolute;
  top: 30%;
  font-size: 20px;
  line-height: 30px;
  margin: 20px;
}
.contact .info img{
  position: absolute;
  top: 0;
  left: 10%;
  width: 130px;
  height: 130px;
}
.contact .info i{
  position: absolute;
  color: white;#0052D4;
  //text-shadow: 0 0 20px rgba(255,255,255,0.7);
  line-height: 30px;
  margin: 20px;
}
.contact .info i:nth-child(2){
  top: 60%;
}
.contact .info i:nth-child(3){
  top: 70%;
}
.contact .info i:nth-child(4){
  top: 80%;
}
.contact .info i:nth-child(n+5){
  top: 90%;
}
.contact .info i a{
  color: white;#0052D4;
  //text-shadow: 0 0 20px rgba(255,255,255,0.7);
  line-height: 30px;
  margin: 20px 4px;
  font-size: 20px;
}
}

@media screen and (max-width:1600px) {
  body{
    background-color: black;
    padding:0px;
    margin:0px;
    height: 100vh;
    overflow-x: hidden;
  }
  #particles-js{
    position: absolute;
    height: 200vh;
    width: 100%;
  }
  .container{
    position: relative;
    left: 0%;
    top: 30%;
    background: #000;
    width: 600px;
    height: 805px;
    margin: 0 auto;
    border-radius: 15px;
    border-bottom: 1px solid #000;
    margin-top: 0px;
    z-index: 10;
  }
  .container .inb{
    position: relative;
  }
  .container .paragraph{
    color: white;
    font-family: 'sans-serif';
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    z-index: 10;
    /*text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15);*/
  }
  .container .register{
    background: linear-gradient(180deg,#000000, #485563, #29323c);
    border: 3px solid black;
    height: 100%;
    top: -15px;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(33,156,243,0.5),
                0 0 20px rgba(33,156,243,0.5),
                0 0 30px rgba(33,156,243,0.5),
                inset 0 0 10px rgba(33,156,243,1);
  }
  .container .register .inb{
    position: relative;
  }
  .container .register .inb input{
    width: 100%;
    padding: 8px 0;
    font-size: 20px;
    color: white;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  .container .register .inb input[name="regd"],
  .container .register .inb input[name="clg"],
  .container .register .inb input[name="name"]{
    text-transform: uppercase;
  }
  .container .register .inb label{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 23px;
    font-family: 'sans-serif';
    font-weight: bold;
    color: white;
    pointer-events: none;
    transition: 0.5s;
  }
  .container .register .inb input:focus ~ label,
  .container .register .inb input:valid ~ label{
    top: -30px;
    left: 0;
    color: #03a9f4;
    font-size: 19px;
    text-shadow:  0 0 10px rgba(33,156,243,1);
  }
  .container .register .selection{
    width: 225px;
    height: 35px;
    border-radius: 30px;
    outline: none;
  }

  .container .register .check img{
    width: 50px;
    height: 50px;
  }
  .container .register .check .chek-checked{
    background-position: 0 0;
    border: 3px solid #2fbcdf;
  }
  .container .register .check .ntg{
    display: none;
  }

  .container .register .inb ul{
    position: relative;
    margin: 20px 0px;
    top: 30px;
    left: -4%;
    width: 40%;
    height: 100px;
  }
  .container .register .years{
    position: relative;
    width: 200px;
    padding: 10px;
    background: linear-gradient(180deg, #000000,#252525);
    box-sizing: border-box;
    border-radius: 20px;
    border: 3px solid black;
    height: 230px;
  }
  .container .register .years .year{
    position: absolute;
    left: 15%;
    display: flex;
    font-size: 25px;
    color: white;
    font-weight: bold;
    text-shadow:  0 0 10px rgba(33,156,243,1);
  }
  .container .register .years ul input[type="radio"]{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
  }
  .container .register .years ul input[type="radio"]::before{
    content: '';
    position: absolute;
    top: 15%;
    left: -15%;
    width: 50px;
    height: 50px;
    line-height: 45px;
    font-family: 'sans-serif';
    font-size: 45px;
    text-align: center;
    background-color: #1c1c1c;
    border: 3px solid black;
    visibility: visible;
    cursor: pointer;
    border-radius: 10px;
    transition: 0.5s;
  }
  .container .register .years ul input[type="radio"]:nth-child(2){
    left: 70%;
  }
  .container .register .years ul input[type="radio"]:nth-child(3){

    top: 50%;
  }
  .container .register .years ul input[type="radio"]:nth-child(4){
    left: 70%;
    top: 50%;
  }
  .container .register .years ul input[type="radio"]:nth-child(1)::before{
    content: '1';
  }
  .container .register .years ul input[type="radio"]:nth-child(2)::before{
    content: '2';
  }
  .container .register .years ul input[type="radio"]:nth-child(3)::before{
    content: '3'
  }
  .container .register .years ul input[type="radio"]:nth-child(4)::before{
    content: '4';
  }
  .container .register .years ul input[type="radio"]:checked::before{
    background-color: black;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(33,156,243,0.5),
                0 0 20px rgba(33,156,243,0.5),
                0 0 30px rgba(33,156,243,0.5),
                inset 0 0 10px rgba(33,156,243,1);
  }
  .container .register .events{
    position: absolute;
    width: 300px;
    padding: 10px;
    bottom: 0%;
    left: 45%;
    background: linear-gradient(180deg, #000000,#252525);
    box-sizing: border-box;
    border-radius: 20px;
    border: 3px solid black;
    height: 230px;
  }
  .container .register .events .eve{
    position: absolute;
    left: 15%;
    display: flex;
    font-size: 25px;
    color: white;
    font-weight: bold;
    text-shadow:  0 0 10px rgba(33,156,243,1);
  }
  .container .register .events ul input[type="checkbox"]{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
  }
  .container .register .events ul input[type="checkbox"]::before{
    content: '';
    position: absolute;
    top: 15%;
    left: -10%;
    width: 50px;
    height: 50px;
    line-height: 45px;
    font-family: 'sans-serif';
    font-size: 45px;
    text-align: center;
    background-color: #1c1c1c;
    border: 3px solid black;
    visibility: visible;
    cursor: pointer;
    border-radius: 10px;
      transition: 0.5s;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(2){
    left: 80%;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(3){
    top: 50%;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(4){
    left: 80%;
    top: 50%;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(5){
    left: 50%;
    top: 50%;
    transform: translate(0,-25%);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(1)::before{
    content: '1';
  }
  .container .register .events ul input[type="checkbox"]:nth-child(2)::before{
    content: '2';
  }
  .container .register .events ul input[type="checkbox"]:nth-child(3)::before{
    content: '3'
  }
  .container .register .events ul input[type="checkbox"]:nth-child(4)::before{
    content: '4';
  }
  .container .register .events ul input[type="checkbox"]:nth-child(5)::before{
    content: '5';
  }
  .container .register .events ul input[type="checkbox"]:checked::before{
    background-color: black;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(33,156,243,0.5),
                0 0 20px rgba(33,156,243,0.5),
                0 0 30px rgba(33,156,243,0.5),
                inset 0 0 10px rgba(33,156,243,1);
  }
  .container .register .events p{
    position: absolute;
    font-size: 18px;
    font-weight: 5000px;
    font-family: 'sans-serif';
    color: white;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
  }
  .container .register .events p.eve1{
    top: 45%;
    left: 10%;
    transform: translate(-10%,-10%);
  }
  .container .register .events p.eve2{
    left: 60%;
    top: 45%;
    transform: translate(-10%,-10%);
  }
  .container .register .events p.eve3{
    top: 50%;
    left: 10%;
    transform: translate(-10%,-10%);
  }
  .container .register .events p.eve4{
    left: 70%;
    top: 50%;
    transform: translate(-10%,-10%);
  }
  .container .register .events p.eve5{
    left: 44%;
    top: 42%;
    transform: translate(-10%,-10%) rotateY(360deg);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(1):hover ~ p.eve1{
    top: 10%;
    left: 10%;
    transform: translate(-10%,-10%);
    opacity: 1;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(1):checked ~ p.eve1{
    top: 10%;
    left: 10%;
    transform: translate(-10%,-10%);
    opacity: 1;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(2):hover ~ p.eve2{
    top: 10%;
    transform: translate(-10%,-10%);
    opacity: 1;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(2):checked ~ p.eve2{
    top: 10%;
    transform: translate(-10%,-10%);
    opacity: 1;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(3):hover ~ p.eve3{
    top: 83%;
    transform: translate(-10%,-10%);
    opacity: 1;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(3):checked ~ p.eve3{
    top: 83%;
    transform: translate(-10%,-10%);
    opacity: 1;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(4):hover ~ p.eve4{
    top: 83%;
    transform: translate(-10%,-10%);
    opacity: 1;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(4):checked ~ p.eve4{
    top: 83%;
    transform: translate(-10%,-10%);
    opacity: 1;
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
  }
  .container .register .events ul input[type="checkbox"]:nth-child(5):hover ~ p.eve5{
    transform: translate(-10%,-10%) rotateY(0deg);
    opacity: 1;
  }
  .container .register .events ul input[type="checkbox"]:nth-child(5):checked ~ p.eve5{
    color: #fff;
    text-shadow:  0 0 10px rgba(33,156,243,1),
                  0 0 10px rgba(33,156,243,1);
    transform: translate(-10%,-10%) rotateY(0deg);
    opacity: 1;
  }
  .container .register .btn{
    position: absolute;
    bottom: -7%;
    left: 50%;
    transform: translate(-50%,0);
    padding: 10px;
    width: 90%;
    background: #1f1f1f;
    color: #efefef;
    font-family: 'sans-serif';
    line-height: 30px;
    font-size: 30px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
  }
  .container .register .btn:focus{
    outline: none;
  }
  .container .register .btn:hover{
    box-shadow: 0 0px 10px rgba(0,0,0,1);
  }
  .contact{
    position: absolute;
    bottom: -150%;
    left: 0;
    width: 100%;
    height: 60vh;
    background-color: #343a40;
  }

  .contact .map{
    position: absolute;
    top: 5%;
    right: 5%;
    width:40%;
    height:90%;
  }
  .contact .info{
    position: absolute;
    top: 5%;
    left: 5%;
    width: 40%;
    height: 90%;
    color: white;#0052D4;
  }
  .contact .info .address .line1{
    position: absolute;
    top: 35%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line2{
    position: absolute;
    top: 41%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line3{
    position: absolute;
    top: 47%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line4{
    position: absolute;
    top: 54%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line5{
    position: absolute;
    top: 61%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line6{
    position: absolute;
    top: 68%;
    left: 8%;
    font-size: 20px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address i{
    position: absolute;
    top: 30%;
    font-size: 20px;
    line-height: 30px;
    margin: 20px;
  }
  .contact .info img{
    position: absolute;
    top: 0;
    left: 10%;
    width: 130px;
    height: 130px;
  }
  .contact .info i{
    position: absolute;
    color: white;#0052D4;
    //text-shadow: 0 0 20px rgba(255,255,255,0.7);
    line-height: 30px;
    margin: 20px;
  }
  .contact .info i:nth-child(2){
    top: 60%;
  }
  .contact .info i:nth-child(3){
    top: 70%;
  }
  .contact .info i:nth-child(4){
    top: 77%;
  }
  .contact .info i:nth-child(n+5){
    top: 84%;
  }
  .contact .info i a{
    color: white;#0052D4;
    //text-shadow: 0 0 20px rgba(255,255,255,0.7);
    line-height: 30px;
    margin: 20px 4px;
    font-size: 20px;
  }
}

@media screen and (max-width:1080px) {
  .contact{
    position: absolute;
    bottom: -158%;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #343a40;
  }

  .contact .map{
    position: absolute;
    top: 5%;
    right: 5%;
    width:45%;
    height:50%;
  }
  .contact .info{
    position: absolute;
    top: 5%;
    left: 5%;
    width: 45%;
    height: 90%;
    color: white;#0052D4;
  }
  .contact .info .address .line1{
    position: absolute;
    top: 25.5%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line2{
    position: absolute;
    top: 30%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line3{
    position: absolute;
    top: 34%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line4{
    position: absolute;
    top: 38%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line5{
    position: absolute;
    top: 42%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address .line6{
    position: absolute;
    top: 46%;
    left: 15%;
    font-size: 8px;
    font-family: sans-serif;
    color: white;#0052D4;
  }
  .contact .info .address i{
    position: absolute;
    top: 15%;
    font-size: 8px;
    //line-height: 30px;
    //margin: 20px;
  }
  .contact .info img{
    position: absolute;
    top: 0;
    left: 10%;
    width: 70px;
    height: 70px;
  }
  .contact .info i{
    position: absolute;
    color: white;#0052D4;
    //text-shadow: 0 0 20px rgba(255,255,255,0.7);
    //line-height: 30px;
    //margin: 20px;
    font-size: 8px;
  }
  .contact .info i:nth-child(2){
    top: 0%;
  }
  .contact .info i:nth-child(3){
    top: 40%;
  }
  .contact .info i:nth-child(4){
    top: 44%;
  }
  .contact .info i:nth-child(n+5){
    top: 47%;
  }
  .contact .info i a{
    color: white;#0052D4;
    //text-shadow: 0 0 20px rgba(255,255,255,0.7);
    //line-height: 30px;
    //margin: 20px 4px;
    font-size: 7px;
  }
}