body {
  margin: 0px;
  background-color: #fff;
  font-family: Quicksand;
  max-width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
}
a {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  font-weight: normal;
}
@font-face {
  font-family: "Ubuntu";
  src: url("../fonts/Ubuntu.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
  font-weight: bold;
}
.sombra {
  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
  -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.36);
}
.sombra-texto {
  text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.4);
}
.centrado {
  display: flex;
  justify-content: center;
  align-items: center;
}
.centrado-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
p {
  font-family: Ubuntu;
}
/* Barra de navegación */

.navbar_boton {
  color: #333;
  background-position: bottom;
  background-image: -webkit-linear-gradient(0deg, #009045, #70a83b, #a3bd31);
  background-size: 0% 0%;
  margin-bottom: 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.navbar_boton:hover {
  color: #000;
  background-size: 100% 5%;
  animation-name: ani_btn;
  animation-duration: 1.4s;
}
@keyframes ani_btn {
  0% {
    background-size: 0% 5%;
  }
  15% {
    background-size: 100% 5%;
  }
  37% {
    background-size: 78% 5%;
  }
  50% {
    background-size: 100% 5%;
  }
  64% {
    background-size: 91% 5%;
  }
  70% {
    background-size: 100% 5%;
  }
  100% {
    background-size: 100% 5%;
  }
}

/* Banner */
div#header {
  overflow: hidden;
  position: relative;
  min-height: 40vh;
}
.img-banner {
  width: 100%;
  height: auto;
}
div.titulo {
  margin-top: 25%;
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 35%;
  left: 0px;
}
div.titulo > div {
  cursor: pointer;
  user-select: none;
  border: solid 13px #fff;
  display: inline-block;
  padding: 0.7em 3em;
  border-radius: 70px;
  filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.6));
  animation-duration: 8s;
}
h1.titulo {
  /*box-shadow: none;*/
  text-shadow: 2px 1px 3px #121212dd;
  color: #fff;
  display: inline-block;
  line-height: 1.1em;
}

div.subtitulo-texto {
  position: absolute;
  text-align: center;
  width: 57%;
  bottom: 28%;
}
div.subtitulo-texto > div {
  user-select: none;
  border: solid 9px #fff;
  display: inline-block;
  padding: 0.7em 1.7em 0.5em 1.7em;
  border-radius: 70px;
  filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.6));
  animation-duration: 8s;
}
h2.subtitulo-texto {
  /*box-shadow: none;*/
  text-shadow: 2px 1px 3px #121212dd;
  color: #fff;
  display: inline-block;
  line-height: 1.1em;
  font-size: 1.3em !important;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  #header {
    min-height: 0px;
  }
  .img-banner {
    width: auto;
    height: 70vh;
  }
  div.titulo {
    margin-top: 25px;
    margin-bottom: 25px;
    position: relative;
  }
  div.titulo > div {
    filter: none;
    border: solid 8px #333;
    animation-duration: 3s;
    padding: 0.7em 2em 0.5em 2em;
  }
  h1.titulo {
    font-weight: bolder;
    color: #000;
    text-shadow: none;
    font-size: 1.9em;
  }
  div.subtitulo-texto > div {
    border: solid 5px #fff;
    padding: 0.7em 1em 0.5em 1em;
  }
  div.subtitulo-texto {
    bottom: 32%;
  }
  h2.subtitulo-texto {
    font-size: 1.5em;
  }
  .sombra-texto {
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  div.titulo > div {
    border: solid 10px #fff;
  }
  h1.titulo {
    font-size: 2em;
  }
  .sombra-texto {
    text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
  }
  div.subtitulo-texto > div {
    border: solid 5px #fff;
    padding: 0.4em 1.2em 0.1em 1.2em;
  }
  div.subtitulo-texto {
    width: 69%;
    bottom: 46%;
  }
  h2.subtitulo-texto {
    font-size: 0.6em !important;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  div.titulo > div {
    border: solid 14px #fff;
  }
  h1.titulo {
    font-size: 3em;
  }
  .sombra-texto {
    text-shadow: 0px 4px 1px rgba(0, 0, 0, 0.4);
  }
  div.subtitulo-texto > div {
    border: solid 5px #fff;
  }
  h2.subtitulo-texto {
    font-size: 1em !important;
  }
  div.subtitulo-texto {
    width: 62%;
    bottom: 40%;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  h1.titulo {
    font-size: 4em;
  }
  div.subtitulo-texto > div {
    border: solid 5px #fff;
  }
  h2.subtitulo-texto {
    font-size: 1.5em !important;
  }
  div.subtitulo-texto {
    width: 70%;
    bottom: 31%;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
  h1.titulo {
    font-size: 5.5em;
  }
  h2.subtitulo-texto {
    font-size: 1.8em !important;
  }
  div.subtitulo-texto {
    width: 70%;
    bottom: 27%;
  }
}

/* Secciones */
section.seccion {
  background-image: url("../img/fondo-secction.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
}

section.style-2 {
  background-image: url("../img/fondo-secction-3.svg");
}

section.style-3 {
  background-image: url("../img/fondo-secction-2.svg");
}

section.seccion > div {
  padding-left: 5em;
  padding-right: 5em;
}

div.imagen-servicio {
  position: relative;
}

img.imagen-servicio {
  width: 85%;
  height: auto;
}
img.imagen-visible {
  width: 90%;
}

img.imagen-rotacion {
  width: 100%;
  height: auto;
  border-radius: 15%;
  filter: drop-shadow(3px 2px 2px rgba(0, 0, 0, 0.5));
  transition: 1s all ease-in-out;
}
div.base-imagen-rotacion {
  width: 80%;
  background: linear-gradient(
    60deg,
    rgba(183, 113, 0, 1) 0%,
    rgba(219, 156, 30, 1) 13.7%,
    rgba(255, 154, 15, 1) 29.1%,
    rgba(219, 163, 33, 1) 38.5%,
    rgba(255, 181, 7, 1) 48.9%,
    rgba(255, 131, 36, 1) 56.6%,
    rgba(248, 126, 3, 1) 63.6%,
    rgba(241, 209, 0, 1) 76%,
    rgba(242, 139, 0, 1) 86.7%,
    rgba(241, 137, 0, 1) 100%
  );
  border-radius: 15%;
  transition: 1s all ease-in-out;
}
div.base-imagen-rotacion {
  transform: rotate(-15deg);
}
div.base-imagen-rotacion:hover {
  transform: rotate(15deg);
}
div.base-imagen-rotacion:hover > div.base-imagen-rotacion-inv {
  transform: rotate(55deg);
}
div.base-imagen-rotacion:hover > div.base-imagen-rotacion-inv > * {
  transform: rotate(-70deg);
}

.base-imagen-rotacion.style-2 {
  background: linear-gradient(
    60deg,
    rgba(196, 104, 121, 1) 0%,
    rgba(129, 50, 65, 1) 29.1%,
    rgba(117, 68, 77, 1) 54%,
    rgba(121, 56, 69, 1) 76%,
    rgba(121, 56, 69, 1) 100%
  );
}
.base-imagen-rotacion.style-3 {
  background: linear-gradient(
    60deg,
    rgba(131, 196, 104, 1) 0%,
    rgba(115, 166, 94, 1) 29.1%,
    rgba(89, 154, 62, 1) 54%,
    rgba(131, 196, 104, 1) 76%,
    rgba(131, 196, 104, 1) 100%
  );
}

div.base-imagen-rotacion-inv {
  width: 100%;
  background: linear-gradient(
    60deg,
    rgba(183, 113, 0, 1) 0%,
    rgba(241, 137, 0, 1) 18.2%,
    rgba(241, 137, 0, 1) 47.6%,
    rgba(249, 191, 91, 1) 84.3%,
    rgba(243, 194, 81, 1) 100%
  );
  border-radius: 15%;
  transition: 1s all ease-in-out;
}
div.base-imagen-rotacion-inv {
  transform: rotate(-55deg);
}

.base-imagen-rotacion-inv.style-2 {
  background: linear-gradient(
    60deg,
    rgba(203, 83, 83, 1) 0%,
    rgba(213, 129, 129, 1) 13.7%,
    rgba(162, 81, 81, 1) 29.1%,
    rgba(210, 115, 115, 1) 38.5%,
    rgba(209, 133, 133, 1) 48.9%,
    rgba(235, 129, 129, 1) 56.6%,
    rgba(255, 104, 104, 1) 63.6%,
    rgba(255, 73, 73, 1) 76%,
    rgba(255, 101, 101, 1) 86.7%,
    rgba(255, 101, 101, 1) 100%
  );
}
.base-imagen-rotacion-inv.style-3 {
  background: linear-gradient(
    60deg,
    rgba(87, 133, 68, 1) 0%,
    rgba(69, 116, 50, 1) 29.1%,
    rgba(102, 173, 73, 1) 54%,
    rgba(130, 152, 121, 1) 76%,
    rgba(130, 152, 121, 1) 100%
  );
}

div.base-imagen-rotacion-inv > * {
  transform: rotate(70deg);
}

div.subtitulo {
  font-family: Montserrat;
  font-weight: 900 !important;
  color: #fff;
  width: 82%;
  height: 100%;
  margin-left: 8%;
  margin-top: 4%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

div.invertido {
  direction: rtl;
}

div.subtitulo > h2 {
  font-weight: 600;
  font-size: 2.2em;
}

.container-fluid {
  max-width: 100vw;
}

.verde {
  background-color: #009045 !important;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  div.subtitulo > h2 {
    font-size: 1.4em;
  }
  div.subtitulo {
    width: 100%;
    min-height: 160px;
    background-size: 100% 100%;
  }
  .imagen-servicio {
    display: none;
  }
  .imagen-visible {
    display: inline;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  div.subtitulo > h2 {
    font-size: 1em;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  div.subtitulo > h2 {
    font-size: 1.5em;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  div.subtitulo > h2 {
    font-size: 2em;
  }
}



@media only screen and (min-width: 1490px) {
  div.subtitulo > h2 {
    font-size: 2.5em;
  }
}

@media only screen and (min-width: 1700px) {
  div.subtitulo > h2 {
    font-size: 3.1em;
  }
}
