@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@5fixedheader00&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,500;1,600;1,700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&family=Roboto:wght@700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap");



@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Bevan&display=swap");

/* font-family: 'Open Sans', sans-serif; */

@font-face {
  font-family: "venusris";
  src: url("../fonts/venus_rising.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {

  font-family:'Futura_Bold';

  src: url('../fonts/Futura_Bold.otf') format('opentype');

  font-weight: bold;

  font-style: normal;

}



:root {

  --color1: #13005a;

  --color2: #03c988;

  --color3: #1c82ad;

  --color4: #f3f3f0;

  --color5: #ffff;

  --color6: #0000001a;

  --color7: #999999;

  --color8: #f3f3f3;

  --color9: rgba(27, 36, 52, 255);

  --color10: #1b2434;

  --fontsize: 20px;

}



body {

  font-family: "Open Sans", sans-serif;

  font-size: 18px;

  overflow-x: hidden;

  box-sizing: border-box;

}



h1,

h2,

h3,

h4,

h5 {

  font-weight: bold;

  font-family: "Open Sans", sans-serif;

}



a {

  text-decoration: none;

}

p {

  font-family: "Poppins", sans-serif;

  text-align: justify;

  font-size: 16px;

}

.crop {

  object-fit: cover;

}



.text-justify {

  text-align: justify;

}



.separador {

  background: var(--color2);

  width: 40px;

  height: 2px;

}

.separador2 {

  background: var(--color1);

  width: 40px;

  height: 2px;

}



/* #header {

   -moz-box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

 -webkit-box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

 box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

}  */

#header {

  position: relative;

  z-index: 1030;

}

#header .bar-sup {

  display: flex;

  flex-direction: row;

  align-items: center;

  padding: 4px 7.5%;

  border-bottom: 0.5px solid rgba(190, 190, 190, 0.4);

}



#header .bar-sup :hover {

  color: var(--color3);

}

#header .bar-sup a {

  color: white;

  font-size: 0.85em;

  font-family: "Poppins", sans-serif !important;

}

/* #header nav.navbar {

  background-color: rgba(0, 0, 0, 0.5);

}  */



#header a.dropdown-item {

  font-size: 14px;

  padding-left: 1.4em;

  padding-right: 1.4em;

  font-weight: 600;

  color: var(--color7);

}



#header a.dropdown-item:focus,

#header a.dropdown-item:hover {

  color: var(--color2);

  background: white;

}



#h-principal span {

  font-size: 2.3rem;

  font-family: "venusris";

  font-weight: bold;

}

/* Estilos de la animacion tipeado */

.mascota {

  font-weight: bold;

  /* font-size: 3rem; */

  color: var(--color2);

  font-style: normal;

  text-transform: uppercase;

}



.fixed-top {

  position: fixed !important;

  -webkit-animation: slide-in-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  animation: slide-in-top 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

  -moz-box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

  -webkit-box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

  box-shadow: 0 3px 3px rgba(190, 190, 190, 0.75);

}

.fixed-top .navbar-brand span {

  color: var(--color1) !important;

}

.fixed-top .navbar {

  background-color: white;

}

.fixed-top .nav-item > a {

  color: black !important;

}

.fixed-top .bar-sup {

  background: var(--color2);

}



#servicios {

  padding-top: 5rem;

  padding-bottom: 6rem;

  background-color: #13005a;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2303C988'/%3E%3Cstop offset='1' stop-color='%2313005A'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231C82AD' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231C82AD' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");

  background-attachment: fixed;

  background-size: cover;

}



#card1 {

  border-top: 20px solid var(--color2);

  border-radius: 1rem;

}

#card2 {

  border-top: 20px solid var(--color3);

  border-radius: 1rem;

}

#card3 {

  border-top: 20px solid var(--color1);

  border-radius: 1rem;

}



.card-title {

  color: var(--color1);

}



#clientes {

  padding-top: 5rem;

  padding-bottom: 5rem;

  background-color: #13005a;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2303C988'/%3E%3Cstop offset='1' stop-color='%2313005A'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%231C82AD' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%231C82AD' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");

  background-attachment: fixed;

  background-size: cover;

}

/* ----------------------------------------------

* Generated by Animista on 2022-8-17 15:35:23

* Licensed under FreeBSD License.

* See http://animista.net/license for more info. 

* w: http://animista.net, t: @cssanimista

* ---------------------------------------------- */



/**

* ----------------------------------------

* animation slide-in-top

* ----------------------------------------

*/

@-webkit-keyframes slide-in-top {

  0% {

    -webkit-transform: translateY(-1000px);

    transform: translateY(-1000px);

    opacity: 0;

  }



  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}



@keyframes slide-in-top {

  0% {

    -webkit-transform: translateY(-1000px);

    transform: translateY(-1000px);

    opacity: 0;

  }



  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0);

    opacity: 1;

  }

}



#header .logo {

  width: 70px;

  /* height: 60px; */

}

#header .logo2responsive {

  display: none;

}

#header .navbar-brand {

  font-family: "Bevan", serif;

  /* font-family: "Playfair Display", serif; */

  font-weight: 100;

  color: white;

}



#header ul.nav-item {

  margin: 0 12px;

}



#header a.nav-link {

  font-size: 14px;

  padding: 0px;

  margin: 12px;

  /* letter-spacing: 1px; */

  /* text-transform: lowercase; */

  font-weight: 600;

  /* color: var(--color4); */

}



#header .navbar-light .navbar-nav .nav-link.active,

#header .navbar-light .navbar-nav .show > .nav-link {

  border-bottom: 3px solid var(--color2);

}

#header a.nav-link {

  color: var(--color5);

}

#header a.nav-link:hover {

  color: var(--color5);

  border-bottom: 3px solid var(--color2);

}



#header a.dropdown-item {

  font-size: 14px;

  padding-left: 1.4em;

  padding-right: 1.4em;

  font-weight: 600;

  color: var(--color7);

}



#header a.dropdown-item:focus,

#header a.dropdown-item:hover {

  color: var(--color2);

  background: white;

}

/* botones */

.bn632-hover {

  width: 160px;

  font-size: 16px;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

  margin: 20px;

  height: 55px;

  text-align: center;

  border: none;

  background-size: 300% 100%;

  border-radius: 50px;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}



.bn632-hover:hover {

  background-position: 100% 0;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}



.bn632-hover:focus {

  outline: none;

}



.bn632-hover.bn18 {

  background-image: linear-gradient(

    to right,

    #25aae1,

    #40e495,

    #30dd8a,

    #2bb673

  );

  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);

}



.bn633-hover {

  width: 160px;

  font-size: 16px;

  font-weight: 600;

  color: #fff;

  cursor: pointer;

  margin: 20px;

  height: 55px;

  text-align: center;

  border: none;

  background-size: 300% 100%;

  background-color: transparent;

  border: 2px solid white;

  border-radius: 50px;

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}



.bn633-hover:hover {

  background-position: 100% 0;

  background-color: white;

  color: var(--color2);

  -moz-transition: all 0.4s ease-in-out;

  -o-transition: all 0.4s ease-in-out;

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}



.bn633-hover:focus {

  outline: none;

}



.class-boton {

  padding-bottom: 3rem;

}



.bn60 {

  background-color: #190c8d;

  color: #ffffff;

  font-size: 1.3em;

  font-weight: 600;

  position: relative;

  outline: none;

  border-radius: 50px;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

  height: 55px;

  width: 160px;

}

#confianza {

  padding-top: 7rem;

  padding-bottom: 7rem;

}

.titulo {

  text-align: center;

}



#bienvenidos-interno {

  margin-top: 4rem;

}

#footer #dates {

  position: relative;

  background: url(../img/web/admision.jpeg) no-repeat center;

  background-size: cover;

  padding: 2.5rem 0;

  z-index: 99;

}



#footer #dates::after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  z-index: -1;

  width: 100%;

  height: 100%;

  background: var(--color3);

}



#footer .redes {

  color: var(--color7);

  display: flex;

  margin-top: 2rem;

  justify-content: center;

}



#footer .redes a {

  font-size: 16px;

  color: var(--color7);

  border: 1px solid var(--color7);

  text-align: center;

  border-radius: 50%;

  width: 40px;

  height: 40px;

  margin-right: 10px;

  padding-top: 8px;

  display: inline-block;

}



#footer .redes .yt:hover {

  background: #dd4b39;

  color: var(--color4);

}



#footer .redes .fb:hover {

  background: #3b5998;

  color: var(--color4);

}



#footer .redes .tw:hover {

  background: #00aced;

  color: var(--color4);

}



#footer .redes .ig:hover {

  background: #df05a7;

  color: var(--color4);

}



#footer .date-info h5 {

  color: var(--color4);

}



#footer .date-info .text a {

  color: var(--color7);

  line-height: 2;

}



#footer .date-info .text a:hover {

  color: var(--color1);

}



#footer .barinf {

  border-top: 1px solid var(--color7);

  background: var(--color3);

  padding: 12px 0;

  color: var(--color7);

}

/* loading al iniciar */

#preload {

  background-color: rgb(255, 255, 255);

  width: 100%;

  height: 100vh;

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9999;

  transition: opacity 1s;

}



#preload.fade {

  opacity: 0;

}



#circulo {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 150px;

  height: 150px;

}



#loadEscudo {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



.loadmove {

  width: calc(100% - 0px);

  height: calc(100% - 0px);

  border: 4px solid transparent;

  border-top: 4px solid var(--color2);

  border-bottom: 4px solid var(--color3);

  border-radius: 50%;

  animation: rotar 0.98s linear infinite;

}



@keyframes rotar {

  100% {

    transform: rotate(360deg);

  }

}



@media (max-width: 700px) {

  .logo {

    display: none;

  }

  .logo2responsive {

    display: block !important;

  }

  .navbar-brand span {

    color: var(--color1) !important;

  }



  .nav-item > a {

    color: black !important;

  }

  .navbar {

    background-color: white;

  }

  .bar-sup {

    background: var(--color2);

  }

  .navbar-brand span {

    font-size: 2rem !important;

  }

  .fa-bars {

    color: var(--color1);

  }

  .fixed-top .navbar-brand span {

    font-size: 2rem !important;

  }

  .fixed-top .fa-bars {

    color: var(--color1);

  }

  #header .logo {

    width: 60px;

    /* height: 60px; */

  }

  #header .logo2responsive {

    width: 60px;

  }

  #header .barsup span {

    display: none;

  }



  #header span {

    font-size: 12px;

  }



  #footer .date-info {

    margin-top: 2rem;

    text-align: center;

  }

}



@media (min-width: 350px) and (max-width: 1024px) {

  .titulo {

    padding-top: 4rem;

  }

  #btn-contacto {

    display: none;

  }

  #img-portada {

    display: none;

  }

}