*{margin: 0; padding: 0; box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{font-family: 'Changa', sans-serif; background: #8f4084;}
header{width: 100%; height: 750px; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed;position: relative;overflow: hidden; background-image: linear-gradient(to right, hsla(234, 59%, 28%, 0.5), hsla(341, 56%, 49%, 0.5)), url(../img/mayes.jpg);}
.wave{position: absolute; bottom: 0; width: 100%;}
table{border-collapse: collapse;}
td,th{padding: 5px 5px; border: 1px double black;}
.contenedor-sobre-nosotros{display: flex; justify-content: space-evenly;}
.sobre-nosotros .contenido-textos{width: 48%;}
.titulo{color: #fff;font-size: 30px;text-align: center;margin-bottom: 60px;}
.contenido-textos h3{margin-bottom: 15px;}
.contenido-textos h3 span{ background: hsl(199, 100%, 50%);color: #000000;border-radius: 50%;display: inline-block;text-align: center;width: 30px;height: 30px;padding: 2px;box-shadow: 0 0 6 0 rgba(0, 0, 0, .5);margin-right: 5px;}
.contenido-textos p{padding: 0px 0px 30px 15px;font-weight: 300;text-align: justify;}
@media (max-width: 10000px){
table tr{display: flex;flex-direction: column;border: 5px double black;padding: 1em;margin-bottom: 1em;}
table{ width: 100%;font-size: .9m;}
table thead{display: none;}}
.btn{ position: relative; padding: 10px 60px; text-decoration: none; color: #fff; letter-spacing: 10px; text-indent: 10px; z-index: 2; border: 1px solid black; }
.btn-4::after{ content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: linear-gradient(90deg, rgb(255, 30, 143), rgb(19, 227, 255), rgb(251, 255, 20), rgb(255, 15, 15)); background-size: 300%; border-radius: 5px; z-index: -1; transition: all 0.4s ease; }
.btn-4:hover::after{ background-position: 100%; filter: blur(15px); }
.btn-4::before{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: linear-gradient(90deg, rgb(255, 30, 143), rgb(19, 227, 255), rgb(251, 255, 20), rgb(255, 15, 15)); background-size: 300%; border-radius: 5px; z-index: -1; }
.btn-4:hover::before{ background-position: 100%;}
.new{ display: flex; justify-content: center;}
.btn-0{ position: relative; padding: 10px 10px; text-decoration: none; color: black; letter-spacing: 10px; text-indent: 10px; z-index: 2;  background: hsl(0, 43%, 58%); }
.btn-1{ overflow: hidden; border: 3px solid hsla(0, 77%, 42%, 0.993); z-index: 2; }
.btn-1::before{ content: ""; position: absolute; width: 100%; height: 200%; left: 0; top: -200%; background-color: #cc0303; border-radius: 50%; transition: all 0.6s ease; z-index: -1;}
.btn-1:hover:before{ top: 0; border-radius: 0%; }
.btn-5{ position: relative; padding: 10px 10px; text-decoration: none; color: black; letter-spacing: 10px; text-indent: 10px; z-index: 2; background: hsl(155, 37%, 46%); }
.btn-6{ overflow: hidden; border: 3px solid #89ce08; z-index: 2; }
.btn-6::before{ content: ""; position: absolute; width: 100%; height: 200%; left: 0; top: -200%; background-color: #7bff00; border-radius: 50%; transition: all 0.6s ease; z-index: -1; }
.btn-6:hover:before{ top: 0; border-radius: 0%; }
nav{text-align: right;padding: 30px 50px 0 0;}
nav > a{color: #fff;font-weight: 300;text-decoration: none;margin-right: 10px;}
nav > a:hover{text-decoration: underline;}
header .textos-header{ display: flex; height: 430px;width: 100%;align-items: center;justify-content: center;flex-direction: column;text-align: center;}
.textos-header h1{font-size: 50px;color: #fff;}
.textos-header h2{font-size: 30px;font-weight: 300;color: #fff;}
footer{ background: #414141; padding: 60px 0 30px 0;margin: auto;overflow: hidden;}
.contenedor-footer{ display: flex; width: 90%; justify-content: space-evenly; margin: auto;padding-bottom: 50ps; border-bottom: 1px solid #ccc;}
.content-foo{ text-align: center;}
.content-foo h4{ color: #fff;  border-bottom: 3px solid #af20d3; padding-bottom: 5px;  margin-bottom: 10px;}
.content-foo p{ color: #ccc;}
a{ color: aqua; text-decoration: none;}
a:hover{ text-decoration: underline;}
.titulo-final{ text-align: center;  font-size: 20px; margin: 20px 0 0 0; background: #9e9797;}
@media screen and (max-width:900px){ 
header{ background-position: center;}
.contenedor-footer{ flex-direction: column;border: none;}
.content-foo{  margin-bottom: 20px; text-align: center;}
.content-foo h4{ border: none;}
.content-foo p{  color: #fff;  border-bottom: 1px solid #efefef;padding-bottom: 20px;}
.titulo-final{  font-size: 20px;}
.contenedor-sobre-nosotros{ flex-direction: column; justify-content: center; align-items: center;}
.sobre-nosotros .contenido-textos{ width: 90px;  padding-bottom: 20px; }}
@media screen and (max-width:500px) {
nav{ text-align: center; padding: 30px 0 0 0;}
nav > a{ margin-right: 5px;}
.textos-header h1{font-size: 35px;}
.textos-header h2{ font-size: 20px;}
.contenedor-footer{  flex-direction: column;  border: none;}
.content-foo{margin-bottom: 20px;   text-align: center;}
.content-foo h4{border: none;}
.content-foo p{ color: #fff; border-bottom: 1px solid #efefef; padding-bottom: 20px;}
.titulo-final{font-size: 20px;}
.sobre-nosotros .contenido-textos{ width: 95%;}}