/* ------------------------------------ Click on login and Sign Up to  changue and view the effect
---------------------------------------
*/

* {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  font-family: "Open Sans", sans-serif;
}

.cotn_principal {
  position: absolute;
  width: 100%;
  display: flex;
  height: 100%;

}


.regist{
  overflow-y: overlay;
  height: inherit;
  height: -webkit-fill-available;
}

.cont_form_sign_up > textarea {
  text-align: left;
  padding: 15px 5px;
  margin-left: 10px;
  margin-top: 20px;
  width: 260px;
  border: none;
  color: #757575;
}

.cont_form_sign_up > select {
  text-align: left;
  padding: 15px 5px;
  margin-left: 10px;
  margin-top: 20px;
  width: 260px;
  border: none;
  color: #757575;
}

.cont_centrar {
  display: flex;
  align-self: center;
  width: 100%;
}

.cont_login {
  position: relative;
  width: 640px;
}

.cont_back_info {
  position: relative;
  float: left;
  width: 640px;
  height: 280px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.cont_forms {
  position: absolute;
  overflow: hidden;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 280px;
  background-color: #eee;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_forms_active_login {
  box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
  height: 420px;
  top: -60px;
  left: 0px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_forms_active_sign_up {
  box-shadow: 1px 10px 30px -10px rgba(0, 0, 0, 0.5);
  height: 420px;
  top: -60px;
  left: 320px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_img_back_grey {
  position: absolute;
  width: 950px;
  top: -80px;
  left: -116px;
}

.cont_img_back_grey > img {
  width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.2;
  animation-name: animar_fondo;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.cont_img_back_ {
  position: absolute;
  width: 950px;
  top: -80px;
  left: -116px;
}

.cont_img_back_ > img {
  width: 100%;
  opacity: 0.3;
  animation-name: animar_fondo;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.cont_forms_active_login > .cont_img_back_ {
  top: -20px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_forms_active_sign_up > .cont_img_back_ {
  top: -20px;
  left: -435px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_info_log_sign_up {
  position: absolute;
  width: 640px;
  height: 280px;
  top: 0px;
  z-index: 1;
}

.col_md_login {
  position: relative;
  float: left;
  width: 50%;
}

.col_md_login > h2 {
  font-weight: 400;
  margin-top: 70px;
  color: #757575;
}

.col_md_login > p {
  font-weight: 400;
  margin-top: 15px;
  width: 80%;
  color: #37474f;
}

.btn_login {
  background-color: #26c6da;
  border: none;
  padding: 10px;
  width: 200px;
  border-radius: 3px;
  box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}

.col_md_sign_up {
  position: relative;
  float: left;
  width: 50%;
}

.cont_ba_opcitiy > h2 {
  font-weight: 400;
  color: #fff;
}

.cont_ba_opcitiy > p {
  font-weight: 400;
  margin-top: 15px;
  color: #fff;
}
/* ----------------------------------
background text    
------------------------------------
 */
.cont_ba_opcitiy {
  position: relative;
  background-color: rgba(120, 144, 156, 0.55);
  width: 80%;
  border-radius: 3px;
  margin-top: 60px;
  padding: 15px 0px;
}

.btn_sign_up {
  background-color: #08509a;
  border: none;
  padding: 10px;
  width: 200px;
  border-radius: 3px;
  box-shadow: 1px 5px 20px -5px rgba(0, 0, 0, 0.4);
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
.cont_forms_active_sign_up {
  z-index: 2;
}

@-webkit-keyframes animar_fondo {
  from {
    -webkit-transform: scale(1) translate(0px);
    -moz-transform: scale(1) translate(0px);
    -ms-transform: scale(1) translate(0px);
    -o-transform: scale(1) translate(0px);
    transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.5) translate(50px);
    -moz-transform: scale(1.5) translate(50px);
    -ms-transform: scale(1.5) translate(50px);
    -o-transform: scale(1.5) translate(50px);
    transform: scale(1.5) translate(50px);
  }
}
@-o-keyframes identifier {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}
@-moz-keyframes identifier {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}
@keyframes identifier {
  from {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
  }
}
.cont_form_login {
  position: absolute;
  opacity: 0;
  display: none;
  width: 320px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_forms_active_login {
  z-index: 2;
}

.cont_form_sign_up {
  position: absolute;
  width: 320px;
  float: left;
  opacity: 0;
  display: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.cont_form_sign_up > input {
  text-align: left;
  padding: 15px 5px;
  margin-left: 10px;
  margin-top: 20px;
  width: 260px;
  border: none;
  color: #757575;
}

.cont_form_sign_up > h2 {
  margin-top: 50px;
  font-weight: 400;
  color: #757575;
}

.cont_form_login > input {
  padding: 15px 5px;
  margin-left: 10px;
  margin-top: 20px;
  width: 260px;
  border: none;
  text-align: left;
  color: #757575;
}

.cont_form_login > h2 {
  margin-top: 110px;
  font-weight: 400;
  color: #757575;
}
.cont_form_login > a,
.cont_form_sign_up > a {
  color: #757575;
  position: relative;
  float: left;
  margin: 10px;
  margin-left: 30px;
}

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: -webkit-fill-available;
  height: 100%;
  top: 0;
  left: 0;
  background: #4a4a4a;
  overflow: hidden;
}

.background span {
  width: 28vmin;
  height: 28vmin;
  border-radius: 28vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 45;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.background span:nth-child(0) {
  color: #5db9e6;
  top: 47%;
  left: 51%;
  animation-duration: 11s;
  animation-delay: -10s;
  transform-origin: -22vw -16vh;
  box-shadow: -56vmin 0 7.828337783152134vmin currentColor;
}
.background span:nth-child(1) {
  color: #5db9e6;
  top: 16%;
  left: 65%;
  animation-duration: 42s;
  animation-delay: -45s;
  transform-origin: 19vw 25vh;
  box-shadow: -56vmin 0 7.1962921701927325vmin currentColor;
}
.background span:nth-child(2) {
  color: #08509a;
  top: 60%;
  left: 23%;
  animation-duration: 34s;
  animation-delay: -19s;
  transform-origin: 21vw 23vh;
  box-shadow: 56vmin 0 7.2393723940707915vmin currentColor;
}
.background span:nth-child(3) {
  color: #08509a;
  top: 83%;
  left: 28%;
  animation-duration: 26s;
  animation-delay: -40s;
  transform-origin: -21vw 6vh;
  box-shadow: 56vmin 0 7.6632670346478085vmin currentColor;
}
.background span:nth-child(4) {
  color: #5db9e6;
  top: 55%;
  left: 73%;
  animation-duration: 13s;
  animation-delay: -18s;
  transform-origin: -8vw 11vh;
  box-shadow: 56vmin 0 7.864064126621406vmin currentColor;
}
.background span:nth-child(5) {
  color: #08509a;
  top: 91%;
  left: 93%;
  animation-duration: 31s;
  animation-delay: -34s;
  transform-origin: 20vw -12vh;
  box-shadow: 56vmin 0 7.20765871643136vmin currentColor;
}
.background span:nth-child(6) {
  color: #5db9e6;
  top: 21%;
  left: 6%;
  animation-duration: 43s;
  animation-delay: -47s;
  transform-origin: 2vw -4vh;
  box-shadow: 56vmin 0 7.29165704980381vmin currentColor;
}
.background span:nth-child(7) {
  color: #5db9e6;
  top: 31%;
  left: 46%;
  animation-duration: 55s;
  animation-delay: -37s;
  transform-origin: 25vw 18vh;
  box-shadow: 56vmin 0 7.225571521401692vmin currentColor;
}
.background span:nth-child(8) {
  color: #08509a;
  top: 7%;
  left: 90%;
  animation-duration: 46s;
  animation-delay: -46s;
  transform-origin: -24vw 8vh;
  box-shadow: -56vmin 0 7.1534385105017675vmin currentColor;
}
.background span:nth-child(9) {
  color: #08509a;
  top: 82%;
  left: 27%;
  animation-duration: 25s;
  animation-delay: -3s;
  transform-origin: -24vw -17vh;
  box-shadow: 56vmin 0 7.746041847056115vmin currentColor;
}
.background span:nth-child(10) {
  color: #08509a;
  top: 24%;
  left: 17%;
  animation-duration: 41s;
  animation-delay: -5s;
  transform-origin: 15vw 23vh;
  box-shadow: 56vmin 0 7.752717970443339vmin currentColor;
}
.background span:nth-child(11) {
  color: #08509a;
  top: 83%;
  left: 62%;
  animation-duration: 23s;
  animation-delay: -46s;
  transform-origin: 8vw 21vh;
  box-shadow: -56vmin 0 7.76526266897447vmin currentColor;
}
.background span:nth-child(12) {
  color: #5db9e6;
  top: 94%;
  left: 2%;
  animation-duration: 52s;
  animation-delay: -23s;
  transform-origin: -12vw 11vh;
  box-shadow: -56vmin 0 7.477463120106472vmin currentColor;
}
.background span:nth-child(13) {
  color: #08509a;
  top: 29%;
  left: 8%;
  animation-duration: 48s;
  animation-delay: -30s;
  transform-origin: 17vw 24vh;
  box-shadow: -56vmin 0 7.369873219853775vmin currentColor;
}
.background span:nth-child(14) {
  color: #08509a;
  top: 42%;
  left: 13%;
  animation-duration: 45s;
  animation-delay: -25s;
  transform-origin: 17vw 21vh;
  box-shadow: 56vmin 0 7.22914719806702vmin currentColor;
}
.background span:nth-child(15) {
  color: #08509a;
  top: 53%;
  left: 29%;
  animation-duration: 49s;
  animation-delay: -12s;
  transform-origin: 17vw 16vh;
  box-shadow: 56vmin 0 7.374641371100668vmin currentColor;
}
.background span:nth-child(16) {
  color: #08509a;
  top: 48%;
  left: 56%;
  animation-duration: 18s;
  animation-delay: -7s;
  transform-origin: 18vw -15vh;
  box-shadow: -56vmin 0 7.963566185044303vmin currentColor;
}
.background span:nth-child(17) {
  color: #5db9e6;
  top: 36%;
  left: 11%;
  animation-duration: 55s;
  animation-delay: -19s;
  transform-origin: 19vw -20vh;
  box-shadow: 56vmin 0 7.9572730068847415vmin currentColor;
}
.background span:nth-child(18) {
  color: #08509a;
  top: 92%;
  left: 25%;
  animation-duration: 16s;
  animation-delay: -38s;
  transform-origin: 19vw 5vh;
  box-shadow: -56vmin 0 7.624988655280514vmin currentColor;
}
.background span:nth-child(19) {
  color: #08509a;
  top: 36%;
  left: 20%;
  animation-duration: 35s;
  animation-delay: -48s;
  transform-origin: -3vw -1vh;
  box-shadow: 56vmin 0 7.405554950084358vmin currentColor;
}