 <style type="text/css">
  	
 body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 100;
}

h2 {
  font-size: 1.1em;
  margin-top: 2em;
  text-align: center;
  z-index: 100;
}

main {
  width: 80%;
  margin: auto;
  z-index: 100;
}

#modal {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;

}
#modal p {
  width: 65%;
  height: 40%;
  position: absolute;
  top: -200px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}
 
#mostrar-modal {
  display: none;
  z-index: 100;
}
#mostrar-modal + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal + label:hover {
  background: #38678f;
}
#mostrar-modal:checked ~ #modal {

  top: 0;
}
#mostrar-modal:checked ~ #cerrar-modal + label {
  display: block;
}

#cerrar-modal {
  display: none;
}
#cerrar-modal + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal:checked ~ #modal {
  top: -100vh;
}
#cerrar-modal:checked + label {
  display: none;
}


/*************************************MODAL 1****************************************/

#modal1 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal1 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal1 {
  display: none;
  z-index: 100;
}
#mostrar-modal1 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal1 + label:hover {
  background: #38678f;
  z-index: 100;
}
#mostrar-modal1:checked ~ #modal1 {
  top: 0;
}
#mostrar-modal1:checked ~ #cerrar-modal1 + label {
  display: block;
}

#cerrar-modal1 {
  display: none;
}
#cerrar-modal1 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal1:checked ~ #modal1 {
  top: -100vh;
}
#cerrar-modal1:checked + label {
  display: none;
}

/**********************************************MODAL 2***************************/

#modal2 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal2 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal2 {
  display: none;
  z-index: 100;
}
#mostrar-modal2 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal2 + label:hover {
  background: #38678f;
}
#mostrar-modal2:checked ~ #modal2 {
  top: 0;
}
#mostrar-modal2:checked ~ #cerrar-modal2 + label {
  display: block;
}

#cerrar-modal2 {
  display: none;
}
#cerrar-modal2 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal2:checked ~ #modal2 {
  top: -100vh;
}
#cerrar-modal2:checked + label {
  display: none;
}

/************************************MODAL 3***************************/
#modal3 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal3 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal3 {
  display: none;
  z-index: 100;
}
#mostrar-modal3 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal3 + label:hover {
  background: #38678f;
}
#mostrar-modal3:checked ~ #modal3 {
  top: 0;
}
#mostrar-modal3:checked ~ #cerrar-modal3 + label {
  display: block;
}

#cerrar-modal3 {
  display: none;
}
#cerrar-modal3 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal3:checked ~ #modal3 {
  top: -100vh;
}
#cerrar-modal3:checked + label {
  display: none;
}

/********************************MODAL 4 *****************************************/
#modal4 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal4 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal4 {
  display: none;
}
#mostrar-modal4 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal4 + label:hover {
  background: #38678f;
}
#mostrar-modal4:checked ~ #modal4 {
  top: 0;
}
#mostrar-modal4:checked ~ #cerrar-modal4 + label {
  display: block;
}

#cerrar-modal4 {
  display: none;
}
#cerrar-modal4 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal4:checked ~ #modal4 {
  top: -100vh;
}
#cerrar-modal4:checked + label {
  display: none;
}

/***************************************MODAL 5 *************************************/
#modal5 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal5 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal5 {
  display: none;
}
#mostrar-modal5 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal5 + label:hover {
  background: #38678f;
}
#mostrar-modal5:checked ~ #modal5 {
  top: 0;
}
#mostrar-modal5:checked ~ #cerrar-modal5 + label {
  display: block;
}

#cerrar-modal5 {
  display: none;
}
#cerrar-modal5 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal5:checked ~ #modal5 {
  top: -100vh;
}
#cerrar-modal5:checked + label {
  display: none;
}


/***********************************MODAL 6**********************************************/
#modal6 {
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  position: fixed;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all .5s;
  z-index: 100;
}
#modal6 p {
  width: 60%;
  height: 40%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-size: 1em;
  text-align: center;
  z-index: 100;
}

#mostrar-modal6 {
  display: none;
}
#mostrar-modal6 + label {
  background: steelblue;
  display: table;
  margin: auto;
  color: #fff;
  line-height: 3;
  padding: 0 1em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 100;
}
#mostrar-modal6 + label:hover {
  background: #38678f;
}
#mostrar-modal6:checked ~ #modal6 {
  top: 0;
}
#mostrar-modal6:checked ~ #cerrar-modal6 + label {
  display: block;
}

#cerrar-modal6 {
  display: none;
}
#cerrar-modal6 + label {
  position: absolute;
  top: 22em;
  right: 20em;
  z-index: 110;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  background: tomato;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50%;
  display: none;
  transition: all .5s;
}
#cerrar-modal6:checked ~ #modal6 {
  top: -100vh;
}
#cerrar-modal6:checked + label {
  display: none;
}

  </style>

  