html{

    padding: 0;
    height: 100vh;
    margin: 0px;
    font-family:Noto Sans JP,sans-serif;


}

body{

  margin:0;
  padding:0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: fixed;

}


.wrapper{

  margin:0;
  padding:0;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -10%;
  position: absolute;

  background-position: center center;
  background-image: url('../imagenes/fondo.png');
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;

}


section{

  top:10%;
  width:50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: fixed; /*para que permanezca fija mientras el fondo se mueve*/

}

section img{

  width: 200px;

}

h1{

  font-size: 1.1rem;
  margin-bottom: 20px;
  min-width: 200px;
    text-align: center;
}

form input{

	width: 100%;
	border-radius: 5px;
	margin-bottom: 20px;
    opacity: 0.7;
    line-height: 2;

/* Para que todos los input tengan su tamaño alineado*/
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
       -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
            box-sizing: border-box;

}

.btn{

  background-color: orange;
  color: white;
  font-size: .9rem;

}


span{ font-family:FontAwesome;}/*para los iconos de los input text*/


.btn:hover{

  border: thin solid rgba(0, 0, 0, 0.8);
  font-weight: bold;
  opacity: 1;
  cursor: pointer;

}

.form-control:focus{

  opacity: 1;

}


@media (min-width: 420px) {

    section {

      left: 15%;
      top: 10%;
      width: 30%;

    }

}

@media (max-width:720px) and (orientation: landscape){

  section {

    top: 20px;

  }

}

@media (min-width: 825px) {

  section {

    width: 35%;

  }

  section input {

      line-height: 3;

    }

    section h1 {

      font-size: 2.0rem;

    }

    #formdata{

      max-width: 303px;

    }

}

@media (max-height: 360px) {

  section img {

      width: 150px;

  }

}