html,
body{
  font-family: 'Lato';
  margin: 0;
  background-color: white;
  height: 100vh;
  
}

.container{
  display: grid;
  grid-template: 1.5fr 1fr 1fr .5fr / .2fr .2fr .2fr .2fr .2fr;
  grid-gap: 0;
  height: 100vh;
  width: 100vw;
  grid-template-areas:"nada1N nada1N nada1B nada1B nada1B" 
                      "logo logo login login nada2B" 
                      "nada3N nada3N nada3B nada3B nada3B"
                      "info info nada4B nada4B nada4B";
}

.nada1N{
  grid-area: nada1N;
  background-color: black;
}

.nada1B{
  grid-area: nada1B;
  background-color: white;
}

.nada2B{
  grid-area: nada2B;
  background-color: white;
}

.logo{
  grid-area: logo;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 19px;
  background-color: black;
}

@keyframes runa1 {
  0% {
    transform: translate(16px, 35px) rotateZ(0);
  }
  50% {
    transform: translate(16px, 35px) rotateZ(0);
  }
  62% {
    transform: translate(0, 0) rotateZ(0);
  }
  70% {
    transform: translate(0, 0) rotateZ(0);
  }
  85% {
    transform: translate(0, 0) rotateZ(360deg);
  }
  100% {
    transform: translate(16px, 35px) rotateZ(360deg);
  }
}

@keyframes runa2 {
  0% {
    transform: translate(-9px, -25px) rotateZ(0);
  }
  50% {
    transform: translate(-9px, -25px) rotateZ(0);
  }
  62% {
    transform: translate(0, 0) rotateZ(0);
  }
  70% {
    transform: translate(0, 0) rotateZ(0);
  }
  85% {
    transform: translate(0, 0) rotateZ(-360deg);
  }
  100% {
    transform: translate(-9px, -25px) rotateZ(-360deg);
  }
}


svg {
  fill: white;
  width: 60%;
  height: 60%;
}

.anima1 {
  transform: translate(16px, 35px) rotateZ(360deg);
  animation: runa1 5s ease infinite forwards;
  transform-origin: 180px 180px;
}

.anima2 {
  transform: translate(-9px, -25px) rotateZ(-360deg);
  animation: runa2 5s ease infinite forwards;
  transform-origin: 225px 225px;
}

.login{
  margin-left: 15%;
  display: grid;
  justify-items: start;
  grid-area: login;
  padding: 9px;
  background-color: white;
}

.login h1 {
  margin: 5px 0px 5px 0px; 
  font-family: 'Montserrat'; 
  font-weight: bold;
  font-size: 35px;
}

.login form {
  display: block; 
  width: 25vw;
}

.login div input {
  margin: 0px 0px 0px 0px; 
  font-size: 15px; 
  font-weight: bold;
}

.login button {
  margin: 65px 0px 0px 0px; 
  border-radius: 5px; 
  padding: 10px 30px; 
  border: none; 
  font-family: 'Montserrat';
  width: 60%; 
  margin-top:30px; 
  color:white; 
  background-color: #0071E3; 
  border-radius: 15px; 
  font-weight: 600; 
  font-size: 15px;
  cursor: pointer;
}

.nada3N{
  grid-area: nada3N;
  background-color: black;
}

.nada3B{
  grid-area: nada3B;
  background-color: white;
}

.nada4B{
  grid-area: nada4B;
  background-color: white;
}

.info{
  grid-area: info;
  display: block;
  text-align: center;
  justify-content: center;
  padding-top: 9px;
  background-color: black;
  color: white;
}

.info p {
  margin: 0;
}


/* input style */

form {
margin: 0px 0px 0px 0px;
}
.input-field {
position: relative;
width: 90%;
height: 44px;
line-height: 44px;
margin: 35px 0px 0px 0px;
font-size: 13px;
display: flex;
justify-content: center;
}

.label1, .label2 {
  height: ;
position: absolute;
top: 0;
left: 0;
color: black;
cursor: text;
padding: 0px;
margin-left:10px;
}

input {
width: 100%;
border: 0;
outline: 0;
padding: 15px;
border: 2px solid #d3d3d3;
box-shadow: none;
color: #066664;
border-radius: 5px;
transition: border-color .25s;
display: flex;
justify-content: center;
}

input:focus {
border: 3px solid ;
}

.label2{
color: transparent;
position: absolute;
top: -45px;
}

input:focus~.label1,
input:valid~.label1{
  font-size: 13px;
  font-weight: 700;
  top: -35px;
  color: black;
  animation-name: anim;
  animation-duration: .25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  
}


input:focus~.label2,
input:valid~.label2{
  font-size: 13px;
  font-weight: 700;
  top: -35px;
  color: black;
  animation-name: anim2;
  animation-duration: .25s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;

}



@keyframes anim {
0% {
transform: translate3d(0, 60%, 0);
}
70%, 71% {
transform: translate3d(0, 125%, 0);
opacity: 0;

}
100% {
color: transparent;
transform: translate3d(0, 130%, 0);
opacity: 1;



}
}

@keyframes anim2 {
0% {
  transform: translate3d(0, -50%, 0);
  opacity: 0;
}

70%, 71%{
  transform: translate3d(-5px, -25%, 0);
  opacity: 0;
}


100% {
  transform: translate3d(-10px, 0, 0);
  opacity: 1;
  animation-timing-function: ease-out;
  
}
}

/* input style end */

/* Checkbox estilo */
.containerCheckbox {
display: flex;
justify-content: start;
align-items: center;
position: absolute;
padding-left: 19px;
margin: 0px 0px 15px 15px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}

/* Hide the browser's default checkbox */
.containerCheckbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}

/* Create a custom checkbox */
.checkmark {
position: absolute;
display: inline;
top: 3px;
left: 0;
height: 13px;
width: 13px;
background-color: white;
border-radius: 50%;
border: 1px solid grey;

}

/* On mouse-over, add a grey background color */
.containerCheckbox:hover input ~ .checkmark {
background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCheckbox input:checked ~ .checkmark {
background-color: #066664;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}


/* Show the checkmark when checked */
.containerCheckbox input:checked ~ .checkmark:after {
display: block;
}

/* Style the checkmark/indicator */
.containerCheckbox .checkmark:after {
left: 4px;
top: 3px;
width: 3px;
height: 5px;
border:  solid white;
border-radius: 1px 1px 1px 1px ;
border-width: 0 2px 2px 0px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

/*buttonNaica*/

.buttonNaica{
border: 1px solid black;
color: white;
background-color: black;
text-decoration: none;
font-weight: 700;
border-radius: 5px;
width: 300px;
height: 45px;
position: absolute;
top: 22.5px;
bottom:0;
right: 0;
left: 50px;
}

/* .buttonNaica:hover{
animation: buttonTransition;
animation-duration: .3s;
animation-fill-mode: forwards;
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
} */

.buttonNaica~.buttonNaicaContainer:hover{
  animation: buttonTransition;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
  transform-origin: center;
  width:400px;
  height:100px;
}
.buttonNaicaContainer{
  position: relative;
  top: 0;
  bottom:0;
  right: 0;
  left: -25px;
  width: 350px;
  height: 70px;
  background-color: transparent;
  
}

@keyframes buttonTransition{
  0% {
      background-color: black;
      color: white;
      transform: scale3d(0.6, 0.6, .98);  
  }

  100% {
      background-color: transparent;
      color: black;
      transform: scale3d(1, 1, .98);
  }
}

/*-------------------------- */
		/*-BOTONES-*/
/*-------------------------- */

/* Common button styles */
.button {
	font-size: 15px;
	font-weight: 700;
	float: left;
	width: 100%;
	display: block;
    padding:8px;
    margin-left: 5px;
	border: none;
	background: none;
	color: inherit;
    position: relative;
    z-index: 1;
    
}
	
/*--- Transition------*/

.button--transition::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	-webkit-transform: scale3d(0.6, 0.6, .98);
	transform: scale3d(0.6, 0.6, .98);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}


.button--transition:hover::before {
	-webkit-transform: scale3d(1, 1, .99);
	transform: scale3d(1, 1, .99);
	opacity: 1;
}



/*--- Transition-blanco -----*/

.button--transition-blanco.button--inverted {
	background: #fff;
	color: #000;
}
.button--transition-blanco::before {
	border: 1px solid #000;
}
.button--transition-blanco.button--inverted::before {
	border-color: #FFF;
}

.button--transition-blanco.button--inverted:hover {
	background-color: transparent;
	color: #FFF;
}


/*--- Transition-negro -----*/

.button--transition-negro.button--inverted {
	background: #000;
	color: #fff;
}
.button--transition-negro::before {
	border: 1px solid #fff;
}
.button--transition-negro.button--inverted::before {
	border-color: #000;
}

.button--transition-negro.button--inverted:hover {
	background-color: transparent;
	color: #000;
}

@media screen and (max-width: 768px) {
  html,
  body{
      font-family: 'Lato';
      margin: 0;
      background-color: white;
      
  }
  .container{
      display: grid;
      grid-template: 1fr 1fr 400px 50px 1fr / 1fr 350px 1fr;
      grid-gap: 0;
      height: 100vh;
      width: 100vw;
      grid-template-areas:"nada1 nada1 nada1" 
                          "nada2 logo nada3" 
                          "nada2 login nada3"
                          "info info info" 
                          "nada4 nada4 nada4";
  }

  .nada1{
    grid-area: nada1;
    background-color: white;
  }

  .nada2{
    grid-area: nada2;
    background-color: white;
  }

  .logo{
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 19px;
    background-color: white;
  }

  svg {
    fill: black;
    width: 190px;
    height: 190px;
  }

  .login{
    grid-area: login;
    display: block;
    text-align: center;
    /* border: 1px solid black; */
    /* border-radius: 9px; */
    padding: 9px;
    /* box-shadow: 1px 2px 3px #888888; */
    background-color: white; 
  }

  .login{
    margin-left: 0;
    display: grid;
    justify-items: center;
    grid-area: login;
    padding: 9px;
    background-color: white;
  }
  
  .login h1 {
    margin: 5px 0px 5px 0px; 
    font-family: 'Montserrat'; 
    font-weight: bold;
    font-size: 35px;
  }
  
  .login form {
    display: table; 
    width: 100%;
    text-size-adjust: auto;

  }
  
  .login div input {
    margin: 0px 0px 0px 0px; 
    font-size: 15px; 
    font-weight: bold;
  }

  .input-field {
    position: relative;
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 35px 0px 0px 0px;
    font-size: 13px;
    display: flex;
    justify-content: center;
  }
  
  .login button {
    margin: 65px 0px 0px 0px; 
    border-radius: 5px; 
    padding: 10px 30px; 
    border: none; 
    font-family: 'Montserrat';
    width: 60%; 
    margin-top:30px; 
    color:white; 
    background-color: #0071E3; 
    border-radius: 15px; 
    font-weight: 600; 
    font-size: 15px;
  }

  .nada3{
    grid-area: nada3;
    background-color: white;
  }

  .info{
    grid-area: info;
    display: block;
    justify-content: center;
    padding-top: 9px;
    background-color: white;
    color: #000;
  }

  .nada4{
    grid-area: nada4;
    background-color: white;
  }
}