body {
  color: #f5f5f5;
  background-image: linear-gradient(-90deg , #0c0c0d, #1d1d1d);
  font-family: 'Open Sans', sans-serif;
}

.tappin {
  max-width: 350px;
  max-height: 125px;
  width: 100%;
}

.app {
  text-align: center;
  max-width: 1620px;
  margin: 0 auto;
}

.app i {
  font-size: 80px;

  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 1;
}

.selection {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

article {
  position: relative;
  width: 300px;
  /*height: 200px;*/
  margin: 5px;
  float: center;
  border: 2px solid #50bcf2;
  box-sizing: border-box;
  border-radius: 5px;
}

.out {
  position: relative;
  width: 300px;
  /*height: 200px;*/
  margin: 5px;
  float: left;
  border: 2px solid #ff1212;
  box-sizing: border-box;
  border-radius: 5px;
  color: #a5a5a5;
}

.nop {
  border: 2px solid #555555 !important;
  color: #555555 !important;
}

.a-green {
  position: relative;
  width: 300px;
  /*height: 200px;*/
  margin: 5px;
  float: left;
  border: 2px solid #00c52d;
  box-sizing: border-box;
  border-radius: 5px;
}

article div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  transition: .5s ease;
  border-radius: 5px;
}

article span {
  padding: 10px;
}

article input {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  opacity: 0;
  cursor: pointer;
  border-radius: 10px;
}

input[type=checkbox]:checked ~ div {
  background-color: #50bcf2;
  border-radius: 2px;
}

input[type=checkbox]:checked ~ div.d-green{
  background-color: #00c52d;
  border-radius: 2px;
}

input[type=checkbox]:checked ~ div span b.change-color {
  color: #000000;
  transition: .5s ease;
}

input[type=checkbox]:checked ~ div span b.change-color-green {
  color: #000000;
  transition: .5s ease;
}

input[type=text] {
  padding: 5px 10px;
  border: 1px solid #50bcf2;
  border-radius: 5px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
}
input[type=email] {
  padding: 5px 10px;
  border: 1px solid #50bcf2;
  border-radius: 5px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  background-color: transparent;
}

.upgrade-btn {
  display: block;
  margin: 30px auto;
  width: 200px;
  padding: 10px 20px;
  border: 2px solid #50bcf2;
  border-radius: 50px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s ease;
  background-color: transparent;
}

.upgrade-btn2 {
  display: block;
  margin: 30px auto;
  width: 350px;
  padding: 10px 20px;
  border: 2px solid #50bcf2;
  border-radius: 50px;
  color: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s ease;
  background-color: transparent;
}

.upgrade-btn:hover {
  background-color: #50bcf2;
}

.upgrade-btn2:hover {
  background-color: #50bcf2;
}

.exit-btn {
  position:absolute;
  height:50px;
  width:50px;
  top:0;
  left:0;
  border: 2px solid #ff1212;
  color: #ff1212;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  transition: .3s ease;
  background-color: transparent;
}

.exit-btn:hover {
  background-color: #ff1212;
  color: #f5f5f5;
}

.blue-color {
  color: #50bcf2;
}

.change-color {
  color: #50bcf2;
}

.change-color-green {
  color: #00c52d;
}

.gray-color {
  color: #888;
}

.social i:before {
  width: 14px;
  height: 14px;
  position: fixed;
  color: #fff;
  background: #0077B5;
  padding: 10px;
  border-radius: 50%;
  top:5px;
  right:5px;
}

@keyframes slidein {
  from {
    margin-bottom: 100%;
    width: 500%;
  }

  to {
    margin: 0%;
    width: 100%;
  }
}