/*variables*/
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  scroll-behavior: smooth;
}

/*comienza header*/
header {
  background-image: linear-gradient(to bottom right, #172CE6 80%, gold);
  background-position: center;
  width: 100vw;
  height: 150px;
  -webkit-animation-name: animacionheader;
          animation-name: animacionheader;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  justify-content: center;
  align-items: center;
}

h1 {
  color: gold;
  font-size: 20px;
  font-weight: bolder;
  font-family: sans-serif;
  width: 90%;
  text-align: center;
  text-shadow: #F2A80C 20px 15px 5px;
}

nav {
  justify-content: flex-end;
  flex-direction: row-reverse;
  z-index: 5;
}
nav li {
  height: 50px;
  width: 65vw;
  background-color: black;
  border: solid gold 2px;
  text-align: center;
}
nav a {
  color: gold;
}
nav a:hover {
  color: #F2A80C;
  transition: all 1s;
}

.navbar-toggler {
  background-color: #F2A80C;
  color: black;
}
.navbar-toggler:hover {
  background-color: #F5EEB8;
}

.dropdown-menu {
  border: solid gold 2px;
  background-color: #F5EEB8;
}

.dropdown-item {
  background-color: #F5EEB8;
  border-radius: 5px;
}
.dropdown-item:hover {
  background-color: #F2A80C;
  transition: all 0.5s;
}

/*termina header*/
/*comienza main*/
main {
  background-color: #F5EEB8;
}
main img {
  width: 95%;
  height: 95%;
  padding: 0;
  border: #F2A80C 5px solid;
  border-radius: 15px 0px 15px 5px;
  box-shadow: gold 0 0 15px inset;
}

.backg1 {
  background-image: linear-gradient(33deg, #172CE6 25%, gold 40%, #172CE6);
}

.backg2 {
  background-image: linear-gradient(63deg, #F2A80C 30%, #fc0d0d 40%, #172CE6);
}

.backg3 {
  background-image: linear-gradient(78deg, #fc0d0d 25%, gold 35%, #F2A80C);
}

h2 {
  text-decoration: underline;
  color: #F2A80C;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

h3 {
  font-weight: bold;
  text-align: center;
}

h4 {
  text-align: center;
}

p {
  text-align: justify;
  padding: 35px;
}

.no__padding {
  padding: 0;
}

.pieFoto {
  color: #172CE6;
  text-align: center;
}

.redes__cont {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  list-style: none;
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.redes img {
  list-style: none;
  width: 10vw;
  height: auto;
  box-sizing: unset;
  background: none;
  border: none;
  box-shadow: none;
}
.redes img:hover {
  -webkit-animation: skew 0.3s ease-in 0s 1;
          animation: skew 0.3s ease-in 0s 1;
}

iframe {
  position: relative;
  left: 15vw;
  width: 70vw;
  height: 35vw;
}

form {
  display: block;
}

label {
  display: block;
  margin: 10px;
}

.formEscribir, .botonEnviar {
  background-color: #F2A80C;
  border: none;
  border-radius: 5px;
}
.formEscribir:focus, .botonEnviar:focus {
  background-color: gold;
  -webkit-animation: bordermoves 1s linear 0s infinite;
          animation: bordermoves 1s linear 0s infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  transition: all 1s;
}

.botonEnviar {
  width: 15vw;
  height: 35px;
  font-size: large;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.botonEnviar:hover {
  transform: scale(1.2, 1.2);
}

.girar {
  -webkit-animation: girar 8s linear 0s infinite;
          animation: girar 8s linear 0s infinite;
}

#margen {
  padding-left: 30px;
}

.top__button {
  color: #172CE6;
  border: #172CE6 solid 2px;
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  border-radius: 20px;
  font-size: 35px;
  width: fit-content5px;
}

.show__md {
  display: none;
}

/*termina main*/
/*comienza footer*/
footer {
  height: 150px;
  width: 100%;
  background-color: rgb(236, 129, 35);
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-position-y: bottom;
}
footer img {
  width: 100px;
  height: 100px;
}
footer ul {
  list-style-image: url(../imgs/atomo.ico);
}
footer a {
  color: black;
}
footer a:hover {
  color: gold;
}
footer li {
  color: black;
}

/*termina footer*/
/* mediaq tablet*/
@media only screen and (min-width: 576px) {
  /*comienza header*/
  header {
    flex-flow: column nowrap;
    align-items: center;
  }
  h1 {
    font-size: 33px;
    text-align: center;
  }
  nav li {
    width: 45vw;
  }
  /*termina header*/
  /*comienza main*/
  p {
    font-size: medium;
    text-align: justify;
  }
  .redes img {
    width: 5vw;
  }
  .show__md {
    display: inherit;
  }
  /*termina main*/
}
/*mediaq desk*/
@media only screen and (min-width: 768px) {
  h1 {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
    font-size: 35px;
  }
  nav li {
    font-size: medium;
  }
  h2 {
    font-size: x-large;
  }
  h3 {
    font-weight: bold;
    text-align: center;
    font-size: large;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  h4 {
    font-size: large;
  }
  p {
    font-size: medium;
    font-weight: normal;
  }
  .top__button {
    font-size: 50px;
  }
}
/*mediaq xl*/
@media only screen and (min-width: 992px) {
  .desk__center {
    text-align: center;
  }
  nav li {
    width: 15vw;
  }
  footer {
    height: 200px;
  }
  footer img {
    width: 150px;
    height: 150px;
  }
}
@media only screen and (min-width: 1200px) {
  .rellenar {
    line-height: 3rem;
  }
  p {
    font-size: large;
    padding: 2rem;
  }
  h2 {
    font-size: xx-large;
  }
  h3 {
    font-size: x-large;
  }
}
@-webkit-keyframes animacionheader {
  0% {
    background-color: gold;
  }
  10% {
    background-image: linear-gradient(to right, #172CE6, gold 90%);
  }
  20% {
    background-image: linear-gradient(to right, #172CE6, gold 80%);
  }
  30% {
    background-image: linear-gradient(to right, #172CE6, gold 70%);
  }
  40% {
    background-image: linear-gradient(to right, #172CE6, gold 60%);
  }
  50% {
    background-image: linear-gradient(to right, #172CE6, gold 50%);
  }
  60% {
    background-image: linear-gradient(to bottom right, #172CE6 60%, gold);
  }
  70% {
    background-image: linear-gradient(to bottom right, #172CE6 70%, gold);
  }
  80% {
    background-image: linear-gradient(to bottom right, #172CE6 80%, gold);
  }
  90% {
    background-image: linear-gradient(to bottom right, #172CE6 90%, gold);
  }
  100% {
    background-image: linear-gradient(to bottom right, #172CE6 95%, gold);
  }
}
@keyframes animacionheader {
  0% {
    background-color: gold;
  }
  10% {
    background-image: linear-gradient(to right, #172CE6, gold 90%);
  }
  20% {
    background-image: linear-gradient(to right, #172CE6, gold 80%);
  }
  30% {
    background-image: linear-gradient(to right, #172CE6, gold 70%);
  }
  40% {
    background-image: linear-gradient(to right, #172CE6, gold 60%);
  }
  50% {
    background-image: linear-gradient(to right, #172CE6, gold 50%);
  }
  60% {
    background-image: linear-gradient(to bottom right, #172CE6 60%, gold);
  }
  70% {
    background-image: linear-gradient(to bottom right, #172CE6 70%, gold);
  }
  80% {
    background-image: linear-gradient(to bottom right, #172CE6 80%, gold);
  }
  90% {
    background-image: linear-gradient(to bottom right, #172CE6 90%, gold);
  }
  100% {
    background-image: linear-gradient(to bottom right, #172CE6 95%, gold);
  }
}
@-webkit-keyframes bordermoves {
  0% {
    border: dashed;
  }
  100% {
    border: dotted;
  }
}
@keyframes bordermoves {
  0% {
    border: dashed;
  }
  100% {
    border: dotted;
  }
}
@-webkit-keyframes girar {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@keyframes girar {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(160deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
@-webkit-keyframes skew {
  0% {
    transform: skew(1deg);
  }
  50% {
    transform: skew(-10deg);
  }
  100% {
    transform: skew(1deg);
  }
}
@keyframes skew {
  0% {
    transform: skew(1deg);
  }
  50% {
    transform: skew(-10deg);
  }
  100% {
    transform: skew(1deg);
  }
}/*# sourceMappingURL=estilo.css.map */