* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
  background-image: url(../img/pexels-photo-301673.jpeg);
  width: 100%;
  min-height: 100%;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

/* Div background blanco con opacidad */
.white-opacity{
  width: 86.4em;
  background-color: #FFFFFF; 
  opacity: 0.7;
  border-radius: 3vh;
  padding-bottom: 2em;
  margin-top: 3em;
  margin-left: 3em;
  margin-bottom: 1em;
}

/* H1, título principal */
.title1{
  font-size: 4em;
  color: #FF5881;
  text-align: center;
  padding-bottom: 1.4vw;
  padding-top: 1.4vw;
}

.title2 {
  font-size: 3em;
  color: #FF5881;
  text-align: center;
  margin-bottom: 1.4vw;
  padding-top: 1.4vw;
  overflow-x: none;
}

/* Estilo para texto descriptivo */
.description-en{
  font-size: 1.6em;
  margin-left: 2vw;
  margin-right: 2vw;
  text-align: center;
}

/* Subtítulos para divs */
.subtitle{
  color:#3E3E3E;
  margin-top: 8vw;
  margin-bottom: 8vw;
}

/* Div movimiento horizontal */

.square{
  width: 12em;
  height: 12em;
  background-color: #FF475A;
  border: 2px solid #FF322F;
  border-radius: 3px;
  margin-bottom: 4em;
}


/* Estilo a las secciones de los divs con movimiento */

#toTheRight, #toTheLeft, {
  height: 70vh;
}

.subtitle2{
  margin-top: 3em;
  margin-bottom: 3em;
}

.example{
  width: 15em;
  text-align: justify;
  background-color: #FFFFFF; 
  opacity: 0.7;
  border-radius: 3vh;
  padding: 0.8em;
}

.img{
  width: 20em;
  margin-bottom: 3em;
}

/* Estilo para footer. */
footer {
  width: 101%;
  height: 3em;
  background-color:#a9404585;
  color: #FFF4FD;
  font-size: 1.5em;
  line-height: 3;
  text-align: center;
  margin-top: 2em;
  margin-bottom: -1em;
}