/*estilos generales*/
 
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: 'open sans';
 }
 /*Header*/
 
 header {
     width: 100%;
     height: 600px;
     /*degradado sobre el wallpaper*/
     background: #9cecfb;
     /* fallback for old browsers */
     background: -webkit-linear-gradient(to top, #9cedfbd7, #65c6f7cc, #0062ffc7), url(Background.svg);
     ;
     /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to top, #9cedfbd7, #65c6f7cc, #0062ffc7), /*imagen para el wallpaper*/
     url(Background.svg);
     /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     background-size: cover;
     background-attachment: fixed;
     position: relative;
 }
 
 nav {
     text-align: right;
     padding: 30px 50px 0 0;
 }
 
 nav>a {
     color: white;
     font-size: 25px;
     font-weight: 600;
     /*quita el subrayado*/
     text-decoration: none;
     /*separa una opcion de la otra en el menu superior*/
     margin-right: 10px;
 }
 
 nav>a:hover {
     text-decoration: underline;
 }
 /*efecto tipon Swipe*/
 
 .wave {
     position: absolute;
     bottom: 0;
     width: 100%;
 }
 
 header .textos-header {
     display: flex;
     height: 450px;
     width: 100%;
     align-items: center;
     justify-content: center;
     /*para separar los textos del header:*/
     flex-direction: column;
     text-align: center;
 }
 
 .textos-header h1 {
     font-size: 100px;
     color: white;
 }
 
 .textos-header h2 {
     font-size: 30px;
     font-weight: 300;
     color: white;
     padding: 0 0 0 0;
 }
 /*juegos*/
 
 .panel {
     background: #f2f2f2;
     padding: 0 0 60px 0;
 }
 
 .container {
     width: 95%;
     max-width: 1000px;
     margin: auto;
     /*evitar que se salgan los elementos del margen o esconderlos*/
     overflow: hidden;
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
     max-width: 1000px;
     margin: auto;
 }
 
 .container>p {
     font-size: 20px;
     text-align: justify;
 }
 
 .Concept {
     padding: 10px;
     width: 45%;
     margin-bottom: 10px;
     margin-block: auto;
     overflow: hidden;
     position: relative;
 }
 
 .subtitle {
     color: #0062ffc7;
     font-size: 25px;
     font-weight: bolder;
 }
 
 .Concept>h4 {
     color: #0062ffc7;
     font-size: 20px;
     font-weight: bolder;
     padding: 0;
 }
 
 .Concept>p {
     font-size: 20px;
     text-align: justify;
 }
 
 .Concept>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 
 .contenedor>a {
     padding: 60px 0;
     width: 90%;
     max-width: 1000px;
     margin: auto;
     /*evitar que se salgan los elementos del margen o esconderlos*/
     overflow: hidden;
 }
 
 .titulo {
     color: #002CC7;
     font-size: 50px;
     text-align: center;
     margin-bottom: 50px;
 }
 
 .galeria {
     display: flex;
     justify-content: space-evenly;
     flex-wrap: wrap;
 }
 
 .img-portafolio {
     width: 23%;
     margin-bottom: 10px;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     box-shadow: 0 0 6px rgba(0, 0, 0, .5);
 }
 
 .img-portafolio>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 
 .img-portafolio>a {
     text-decoration: none;
 }
 
 .hover-galeria {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     transform: scale(0);
     background: hsla(240, 75%, 22%, 0.7);
     transition: transform .5s;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 
 .hover-galeria img {
     width: 50px;
     color: white
 }
 
 .hover-galeria p {
     font-weight: bolder;
     font-size: 25px;
     color: white;
     overflow: hidden;
 }
 
 .img-portafolio:hover .hover-galeria {
     transform: scale(1);
 }
 
 .respuesta {
     text-align: center;
     list-style: none;
     display: none;
     padding: 5px;
 }
 
 .respuesta>p {
     font-size: 20px;
     text-align: justify;
 }
 
 .respuesta>img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 
 #btnCheck:checked~.respuesta {
     display: block;
 }
 
 input {
     display: none;
 }
 
 label {
     transform: translateX(620px) translateY(-350px);
     text-align: center;
     margin: auto;
     cursor: pointer;
 }
 
 label>h4 {
     font-size: 20px;
 }
 /*footer o parteinferior de la página */
 
 footer {
     width: 100%;
     background-color: #202020;
     color: white;
 }
 
 .container-footer {
     width: 100%;
     background-color: #101010;
 }
 
 .footer {
     max-width: 100%;
     margin: auto;
     justify-content: space-between;
     padding: 20px;
 }
 
 .footer p {
     text-align: center;
     color: #c7c7c7;
     padding: 5px;
 }