html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 2.6vh;
line-height: 2;
color: black;
}
h1, h2, h3, h4{
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-weight: bold;
}
/*
/* Globales*/
.contenedor{
max-width: 300rem;
width: 100%;
margin: 0 auto;
}
#random, #randomCarrera{
background-size: cover;
background-position: 0 5%;
background-attachment: fixed;
width: 100%;
min-height: 100vh;
}
@media (max-width: 1024px) {
#random, #randomCarrera{
background-position: center top;
}
}
.fondo{
background: linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,.05) 86.7%,rgba(0,0,0,0));
}
.space{
padding: 10%;
margin: 0;
}
::-webkit-scrollbar-x {
display: none;
}
.espacio{
height: 30vh;
background: linear-gradient(180deg,rgba(0,0,0,.7),rgba(0,0,0,.05) 86.7%,rgba(0,0,0,0));
}
@media (max-width: 1024px) {
#random, #randomCarrera{
background-size: contair;
background-attachment: fixed;
background-position: center center;
width: 100%;
min-height: 100vh;
}
}
/*Header*/
.header-fondo{
background: linear-gradient(180deg,rgba(0,0,0,.8),rgba(0,0,0,.05) 86.7%,rgba(0,0,0,0));
}
.fondo-no-index{
background-color: white;
padding-bottom: 5%;
}
.subcontheader{
display: flex;
justify-content: space-between;
align-items: center;
padding: 2%;
}
.logo{
flex-basis: calc(30% - 1rem);
display: flex;
justify-content: flex-start;
align-items: center;
}
.logo img{
width: 40%;
}
.barra-nav{
flex-basis: calc(70% - 1rem);
display: flex;
justify-content: flex-start;
flex-direction: column;
margin-top: 2%;
}
.tag-header{
border-bottom: 0.3vh solid #9cae62;
width: 60vw;
}
.barra-nav nav{
display: flex;
margin-top: 2%;
}
.barra-nav nav a{
color: white;
text-decoration: none;
margin-right: 7%;
border-bottom: 0.4vh solid transparent;
}
.barra-no-index nav a{
color: black!important;
font-weight: 400;
}
.barra-nav nav a:hover{
border-bottom: 0.4vh solid #9cae62;
transition-duration: 300ms;
transition-timing-function: ease;
}
@media (max-width: 1024px) {
.subcontheader{
display: none;
}
.header-fondo, .fondo-no-index{
position: fixed;
z-index: 3;
padding-bottom: 0;
}
}
/*Header Movil*/
.subcontheader-movil{
display: none;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 2% 0;
}
.logo-movil{
flex-basis: calc(70% - 1rem);
}
.logo-movil a{
display: flex;
justify-content: center;
align-items: center;
}
.menu-icono{
flex-basis: calc(30% - 1rem);
display: flex;
justify-content: center;
align-items: center;
color: black;
font-size: 3.7vh;
margin-bottom: -2%;
}
.cont-menu-movil {
height: 0%;
width: 100%;
position: fixed;
z-index: 4;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.8);
overflow-y: hidden;
transition: 0.5s;
}
.menu-movil {
position: relative;
top: 15%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.cont-menu-movil a {
padding: 2%;
text-decoration: none;
font-size: 5vh;
color: white;
display: block;
transition: 0.3s;
}
.cont-menu-movil a:focus {
color: #9cae62;
}
.cont-menu-movil .closebtn {
position: absolute;
top: 5%;
right: 10%;
font-size: 8vh;
}
@media (max-width: 1024px) {
.subcontheader-movil{
display: flex;
}
.logo-movil img{
width: 36%;
margin-left: 30%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.subcontheader-movil{
padding: 1% 0;
}
.logo-movil img{
width: 20%;
margin-left: 30%;
}
}
/*Footer*/
.footer-fondo{
background-color: white;
padding: 1% 5% 0 5%;
}
.subcontfooter{
display: flex;
flex-direction: column;
align-items: center;
}
.map-pagina{
margin: 2% 0;
}
.map-pagina nav{
display: flex;
justify-content: space-evenly;
align-items: center;
}
.map-pagina a{
font-size: 2.3vh;
font-weight: 600;
color: #3b64a5;
margin-right: 6vw;
text-decoration: none;
}
.map-pagina a:hover{
color: #c35534;
}
.subfooter{
display: flex;
flex-direction: column;
align-items: center;
background-color: #3b64a5;
width: 50vw;
padding: 1% 0;
}
.creditos nav{
display: flex;
justify-content: center;
align-items: center;
width: 40vw;
}
.creditos a{
color: white;
text-align: center;
text-decoration: none;
font-size: 2vh;
padding: 0 2%;
border-left: solid;
border-color: white;
border-width: 0.1vw;
}
.creditos a:first-of-type{
border-left: none;
}
.creditos a:hover, .creditos a:focus{
text-decoration: underline;
}
.tecbin p{
font-size: 1.8vh;
color: white;
margin: 0;
}
.tecbin a{
font-weight: 600;
color: white;
text-decoration: none;
}
.tecbin a:hover{
text-decoration: underline;
}
@media (max-width: 1024px) {
.map-pagina{
display: none;
}
.subfooter{
width: 90%;
margin-top: 10%;
padding-bottom: 0%;
}
.creditos{
width: 90%;
text-align: center;
}
.creditos nav{
flex-direction: column;
width: 100%;
}
.creditos a{
border: none;
margin: 1% 0;
text-decoration: underline;
}
.tecbin{
background-color: white;
padding: 1% 10%;
}
.tecbin a, .tecbin p{
font-weight: 600;
color: #3b64a5;
}
.tecbin a{
text-decoration: underline;
}
}
/*Contacto y Redes*/
.contacto-redes-fondo{
padding: 25% 5% 0 5%;
display: flex;
justify-content: center;
}
.contacto-redes{
display: flex;
justify-content: space-between;
align-content: center;
background-color: white;
padding: 5%;
margin-bottom: -3%;
}
.contacto-index{
flex-basis: calc(50% - 1rem);
display: flex;
flex-direction: column;
align-items: flex-end;
border-right: solid;
border-color: #3b64a5;
border-width: 0.3vw;
padding-right: 5%;
margin-right: 5%;
}
.contacto-index h4{
font-size: 3vh;
}
.contacto-index p{
text-align: right;
}
.contacto-index a{
font-size: 2.7vh;
text-decoration: none;
color: white;
background-color: #3b64a5;
padding: 2% 5%;
border: solid;
border-width: 0.3rem;
border-color: transparent;
}
.contacto-index a:hover, .contacto-index a:focus{
color:#3b64a5;
background-color: white ;
border-color: #3b64a5;
transition-duration: 300ms;
}
.redes-contacto-index{
flex-basis: calc(50% - 1rem);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.iconos-redes{
display: flex;
justify-content: space-between;
}
.iconos-redes a{
margin-right: 25%;
}
.iconos-redes img{
max-width: 3vw;
}
@media (max-width: 1024px) {
.contacto-redes{
flex-direction: column;
}
.contacto-index{
justify-content: center;
align-items: center;
border-right: none;
border-bottom: solid;
border-color: #3b64a5;
border-width: 0.3vw;
padding-right: 0;
margin-right: 0;
padding-bottom: 7%;
margin-bottom: 7%;
}
.contacto-index h4,
.contacto-index p,
.redes-contacto-index{
text-align: center;
}
.iconos-redes{
justify-content: center;
margin-left: 10%;
}
.iconos-redes img{
max-width: 10vw;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.contacto-redes{
flex-direction: row;
}
.contacto-index{
justify-content: center;
align-items: center;
border-bottom: none;
border-right: solid;
border-color: #3b64a5;
border-width: 0.3vw;
padding-bottom: 0;
margin-bottom: 0;
padding-right: 5%;
margin-right: 5%;
}
.contacto-index h4,
.contacto-index p,
.redes-contacto-index{
text-align: center;
}
.iconos-redes{
justify-content: center;
margin-left: 10%;
}
.iconos-redes img{
max-width: 4vw;
}
}
/*Patrocinadores*/
.patrocinadores-fondo{
background-color: #3b64a5;
display: flex;
justify-content: flex-end;
}
.patrocinadores{
margin: 10% 0;
padding: 5% 0;
background-color: white;
display: flex;
flex-direction: column;
}
.patrocinadores a{
margin: 1%;
}
.patrocinadores h3{
font-size: 6vh;
color: #c35534;
margin-left: 5%;
}
.grid-patrocinadores{
display: flex;
flex-direction: column;
align-items: center;
margin: 2% 0 2% 15%;
}
.row-patrocinadores-4{
display: flex;
justify-content: space-between;
margin: 2% 0;
}
.row-patrocinadores-5{
display: flex;
justify-content: space-between;
margin: 4% 0;
}
.grid-patrocinadores img{
max-width: 40%;
}
@media (max-width: 1024px) {
.patrocinadores h3{
font-size: 4vh;
}
.row-patrocinadores-4{
flex-direction: column;
align-items: center;
justify-content: center;
}
.row-patrocinadores-5{
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.patrocinadores h3{
font-size: 5vh;
}
.row-patrocinadores-4{
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.row-patrocinadores-5{
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/*INICIO*/
/*Sección de Frases*/
.frases{
display: flex;
justify-content: flex-end;
padding-bottom: 30%;
}
.cuadros-frases{
flex-basis: calc(30% - 1rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
margin-top: 20%;
margin-right: 12%;
margin-bottom: 5%;
}
.cuadro{
max-width: 30vw;
max-height: 30vw;
padding: 5%;
margin: 5%;
}
.cuadro-1{
background-color: #3b64a5;
}
.cuadro-2{
background-color: #c35534;
}
.cuadro-3{
background-color: #9cae62;
}
.cuadro h3{
width:40vw;
font-size: 7vh;
line-height: 1.5;
color: white;
letter-spacing: 0.4vw;
text-align: left;
margin: 0;
margin-left: -5%;
padding: 0 0 1% 0;
}
.cuadro p{
color: white;
font-size: 2.3vh;
text-align: left;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
.cuadros-frases{
margin: 30% 2%;
margin-top: 60vh;
}
.frases{
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 30%;
}
.cuadro{
max-width: 80%;
max-height: 100%;
margin-left: 10%;
}
.cuadro h3{
width: 100%;
font-size: 5vh;
margin: 0;
}
}
/*Widgets*/
.widgets{
background-color: rgba(0,0,0,.7);
display: flex;
padding: 0 5%;
}
.cuadros-info{
display: flex;
justify-content: flex-start;
}
.cuadro-info{
flex-basis: calc(25% - 1rem);
margin: 1%;
}
.cuadro-imagen{
z-index: 0!important;
}
.cuadro-imagen img{
width: 100%;
}
.texto-cuadros{
position: relative;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.6),rgba(255, 255, 255, 0.05),rgba(0,0,0,0));
z-index: 2!important;
margin-top: -55%;
padding: 15% 5% 5% 5%;
}
.texto-cuadros h3{
font-size: 6vh;
line-height: 1.5;
color: #9cae62;
letter-spacing: 0.3vw;
text-align: left;
margin: 0;
margin-top: 7%;
padding: 0;
}
.texto-cuadros h4{
font-family: 'Poppins', sans-serif;
font-weight: 400;
line-height: 1.5;
color: #4c4c4c;
letter-spacing: 0.3vw;
text-align: left;
margin: 0;
padding: 0 0 1% 0;
}
.tag-hover-titulo{
position: relative;
border-bottom: 0.5vh solid green;
padding-top: 1%;
width: 100%;
}
.texto-cuadros a{
text-decoration: none;
}
.texto-cuadros p{
color: #4c4c4c;
font-size: 2.3vh;
text-align: right;
margin-top: 15%;
margin-bottom: 0;
padding-bottom: 0;
}
.tag-hover-link{
position: relative;
border-bottom: 0.5vh solid transparent;
max-width: 8vw;
left: 60%;
}
.texto-cuadros p:hover + .tag-hover-link, .texto-cuadros p:focus + .tag-hover-link{
border-bottom-color: green;
}
.bloque-cuadro{
flex-basis: calc(50% - 1rem);
display: flex;
flex-direction: column;
margin-top: -10%;
}
.bloque-vertical{
max-width: 20vw;
margin: 2%;
}
.bloque-vertical h3,
.bloque-vertical h4,
.bloque-vertical p{
color: white;
}
.texto-vertical{
margin-top: -60%;
background: linear-gradient(0deg,rgba(195, 85, 52, 1) 50%,rgba(195, 85, 52, 0.8),rgba(195, 85, 52, 0.6),rgba(195, 85, 52, 0.05),rgba(0,0,0,0));
}
.tag-hover-link.tag-ver{
max-width: 4vw;
left: 71%;
}
.bloque-horizontal{
margin: 2%;
}
.horizontal-widget{
height: 60vh;
background-image: url("../images/widget-horizontal.jpg");
background-size: cover;
background-position: center center;
}
@media (max-width: 1024px) {
.widgets{
flex-direction: column;
align-items: center;
}
.cuadros-info{
flex-direction: column;
}
.bloque-cuadro{
margin-top: 1%;
}
.bloque-vertical{
max-width: 100%;
}
.bloque-horizontal{
display: none;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.cuadros-info{
flex-direction: row;
}
.bloque-cuadro{
margin-top: 0;
}
.bloque-vertical{
max-width: 60%;
}
.bloque-horizontal{
display: block;
max-width: 100%;
}
}
/*Widget 2*/
.widget-video{
display: flex;
flex-basis: calc(25% - 1rem);
}
.cuadro-video{
display: flex;
flex-direction:column;
align-items: flex-start;
max-height: 50vh;
margin-left: 2%;
margin-top: -30.5%;
background-color: #9cae62;
padding: 2% 1.5% ;
}
.cuadro-video h3{
font-size: 3vh;
line-height: 1.5;
color: white;
letter-spacing: 0.5vw;
text-align: left;
margin: 1% 3%;
padding-bottom: 1%;
}
iframe{
margin: 0;
padding: 0;
}
.cuadros-info-2{
display: flex;
justify-content: flex-end;
}
.cuadro-widget-1, .cuadro-widget-2{
flex-basis: calc(35% - 1rem);
display: flex;
flex-direction: column;
justify-content: center;
max-height: 30vh;
padding: 5%;
margin: 2% 0;
}
.cuadro-widget-1{
background-color: rgb(195, 85, 52);
margin-right: 2.5%;
}
.cuadro-widget-2{
background-color: rgb(59, 100, 165);
margin-right: 2%;
margin-left: 2.5%;
}
.cuadro-widget-1 h3, .cuadro-widget-2 h3{
margin: 0;
}
@media (max-width: 1024px) {
.cuadro-video{
display: flex;
margin-top: 1%;
max-height: 70vh;
max-width: 70vw;
}
.cuadro-video iframe{
max-width: 60vw;
}
.cuadros-info-2{
display: none;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.cuadro-video{
display: flex;
margin-top: 1%;
}
.cuadro-video iframe{
width: 50rem;
}
.cuadros-info-2{
display: none;
}
}
/*Saber Mas*/
.saber-mas{
background-color: rgba(0,0,0,.7);
display: flex;
flex-direction: column;
align-items: center;
padding: 20%;
}
.frase-saber-mas{
display: flex;
justify-content: space-evenly;
align-items: center;
}
.frase-saber-mas h2{
flex-basis: calc(60% - 1rem);
color: white;
font-size: 6vh;
text-align: right;
padding-right: 4rem;
margin-right: 2rem;
border-right: solid;
border-width: 0.3rem;
border-color: #9cae62;
}
.frase-saber-mas h2 span{
font-weight: 200;
font-size: 4vh;
}
.frase-saber-mas img{
flex-basis: calc(40%);
max-width: 30%;
}
.link-saber-mas{
margin-top: 10%;
}
.link-saber-mas a{
font-size: 3vh;
color: white;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
}
.link-saber-mas span{
font-weight: bold;
color: #9cae62;
}
.link-saber-mas a:hover, .link-saber-mas a:focus{
color: #9cae62;
transition-duration: 300ms;
}
@media (max-width: 1024px) {
.frase-saber-mas{
flex-direction: column-reverse;
}
.frase-saber-mas img{
flex-basis: 100%;
max-width: 100%;
width: 45vw;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.frase-saber-mas{
flex-direction: row;
}
.frase-saber-mas img{
flex-basis: 100%;
max-width: 30%;
width: auto;
}
}
/*Carrusel Shop*/
.carrusel-shop{
background-color: white;
background-attachment: fixed;
position: relative;
background-repeat: repeat-x;
padding: 5% 0;
}
.carrusel-titulo{
position: relative;
z-index: 1;
margin-top: -2%;
margin-left: 2%;
}
.carrusel-titulo h2{
font-size: 25vh;
letter-spacing: 0.5vw;
font-weight: 600;
color: #9cae62;
margin: 0;
}
.carrusel-form{
display: flex;
flex-direction: column;
align-items: center;
overflow-x: scroll;
}
.carrusel{
position: relative;
z-index: 2;
top: 0;
right: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-left: 90%;
}
.producto{
display: flex;
flex-direction: column;
align-content: center;
width: 25vw;
background-color:white;
padding: 1%;
margin: 1%;
}
.imagen-producto{
margin-top: 6%;
display: flex;
justify-content: center;
}
.imagen-producto img{
max-width: 20vw;
}
.descripcion-producto{
display: flex;
justify-content: flex-start;
margin-left: 8%;
}
.descripcion-producto h4{
font-size: 4vh;
letter-spacing: 0.2vw;
margin-top: 1.5%;
color: #4c4c4c;
}
.costo-fav-producto{
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 8%;
}
.costo-fav-producto p{
font-size: 3.8vh;
color: rgba(59, 100, 165, 0.8);
font-weight: 600;
margin: 0;
}
.costo-fav-producto a{
text-transform: uppercase;
font-size: 2.2vh;
color: #a6a6a4;
font-weight: 600;
text-decoration: none;
}
.costo-fav-producto a:hover, .costo-fav-producto a:focus{
color: #c35534;
transition-duration: 300ms;
}
.link-eshop{
display: flex;
justify-content: flex-end;
margin-top: 5%;
padding-right: 10%;
}
.link-eshop a{
font-size: 3vh;
color: #9cae62;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
}
.link-eshop span{
font-weight: bold;
color: #c35534;
}
.link-eshop a:hover, .link-eshop a:focus{
color: #c35534;
transition-duration: 300ms;
}
@media (max-width: 1024px) {
.carrusel-shop{
padding: 10% 0;
}
.carrusel-titulo h2{
font-size: 5vh;
}
.producto{
width: 80vw;
}
.imagen-producto img{
max-width: 100%;
max-height: 30vh;
}
.carrusel{
padding-left: 400%;
}
.link-eshop{
padding-right: 1%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.carrusel-titulo h2{
font-size: 10vh;
}
.producto{
width: 25vw;
}
.imagen-producto img{
max-width: 100%;
max-height: 60vh;
}
.carrusel{
padding-left: 90%;
}
}
/*Redes Sociales*/
.redes-sociales{
background-color: white;
background-attachment: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 8% 0;
}
.frames-redes-sociales{
background-color: #9cae62;
width: 90%;
padding: 5% 2%;
}
.frame-redes-sociales-movil{
display: none;
text-align: center;
background-color: #9cae62;
width: 100%;
padding: 5% 2%;
}
.redes-sociales-titulo{
padding-right: 5%;
margin: 2% 0;
}
.redes-sociales-titulo h3{
text-align: right;
color: rgb(59, 100, 165);
font-size: 9vh;
letter-spacing: 0.2vw;
margin: 1% 0;
}
.redes-sociales-titulo p{
text-align: right;
margin: 0;
}
.redes-sociales-titulo p a{
color: black;
font-weight: 600;
text-decoration: none;
}
.redes-sociales-titulo p a:hover, .redes-sociales-titulo p a:focus{
color: #c35534;
transition-duration: 300ms;
}
@media (max-width: 1024px) {
.redes-sociales{
padding: 10% 0;
justify-content: center;
align-items: center;
}
.redes-sociales-titulo{
padding-right: 0;
}
.redes-sociales-titulo h3{
font-size: 4vh;
}
.redes-sociales-titulo p,
.redes-sociales-titulo h3{
padding-right: 2%;
}
.frames-redes-sociales{
display: none;
}
.frame-redes-sociales-movil{
display: block;
margin: 10% 0;
padding: 2% 10%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.redes-sociales{
padding: 10% 0;
justify-content: center;
align-items: flex-end;
}
.redes-sociales-titulo{
padding-right: 0;
}
.redes-sociales-titulo h3{
font-size: 6vh;
}
.redes-sociales-titulo p,
.redes-sociales-titulo h3{
padding-right: 2%;
}
.frames-redes-sociales{
display: block;
}
.frame-redes-sociales-movil{
display: none;
}
}
/*NOSOTROS*/
/*Intro Viveros*/
.intro-viveros{
background-color: #9cae62;
padding: 5% 10%;
padding-bottom: 50%;
}
.con-intro-viveros{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.intro-vivero-texto-1{
flex-basis: calc(35% - 1rem);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.intro-vivero-texto-1 h3{
font-size: 3.5vh;
border-bottom: solid;
border-bottom-width: 0.5rem;
border-color: green;
margin-right: 25%;
margin-bottom: 15%;
}
.intro-vivero-texto-1 p{
padding-right: 10%;
font-size: 4vh;
font-weight: 600;
}
.intro-vivero-texto-2{
flex-basis: calc(65% - 1rem);
padding-top: 10%;
}
.carousel-intro{
margin-top: 15%;
}
.intro-img img{
width: 23vw;
}
@media (max-width: 1024px) {
.intro-viveros{
padding-top: 20%;
}
.con-intro-viveros{
flex-direction: column;
}
.intro-vivero-texto-1{
flex-direction: column-reverse;
}
.intro-vivero-texto-1 h3{
margin-top: 20%;
}
.intro-img{
margin-bottom: 5%;
}
.intro-img img{
width: 100vw;
}
.intro-vivero-texto-2{
flex-basis: calc(65% - 1rem);
padding-top: 1%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.intro-viveros{
padding-top: 15%;
}
.con-intro-viveros{
flex-direction: row;
}
.intro-vivero-texto-1{
flex-direction: column;
}
.intro-vivero-texto-1 h3{
margin-top: auto;
}
.intro-img{
margin-bottom: 1%;
}
.intro-img img{
width: 23vw;
}
.intro-vivero-texto-2{
flex-basis: calc(65% - 1rem);
padding-top: 10%;
}
}
/*Nosotros*/
.nosotros{
background-color: white;
padding: 10%;
padding-bottom: 0;
display: flex;
}
.nosotros h3{
font-size: 3.5vh;
}
.cont-nosotros{
display: flex;
flex-direction: column;
margin-top: -50%;
}
.imagen-nosotros img{
width: 75vw;
}
.texto-nosotros{
background-color: rgba(59, 100, 165,0.9);
width: 40vw;
padding: 7%;
margin: -30% 0 0 60%;
}
@media (max-width: 1024px) {
.texto-nosotros{
margin-top: 2%;
margin-left: 0;
width: 100%;
}
.imagen-nosotros img{
width: 100%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.texto-nosotros{
width: 40vw;
padding: 7%;
margin: -30% 0 0 60%;
}
.imagen-nosotros img{
width: 75vw;
}
}
/*Beneficios*/
.beneficios{
background-color: white;
padding: 10%;
display: flex;
flex-direction: column;
justify-content: center
}
.beneficios h3{
font-size: 3.5vh;
}
.cont-beneficios{
display: flex;
justify-content: space-between;
align-content: center;
}
.imagen-beneficios{
flex-basis: calc(60% - 1rem);
}
.texto-beneficios{
flex-basis: calc(40% - 1rem);
order: -1;
position: relative;
background-color: rgba(195, 85, 52, 0.9);
padding: 5%;
margin-top: 10%;
}
.cont-beneficios-2{
background-color: #9cae62;
padding: 5% 5%;
margin-top: 12%;
}
.cont-beneficios-2 span{
font-weight: 600;
}
@media (max-width: 1024px) {
.cont-beneficios{
flex-direction: column-reverse;
justify-content: center;
}
.texto-beneficios{
width: 100%;
margin-top: 1%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.cont-beneficios{
flex-direction: row;
justify-content: center;
margin-top: auto;
}
.texto-beneficios{
margin-top: 10%;
}
}
/*Unete*/
.unete{
background-color: rgba(0, 0, 0, .7);
padding: 10%;
display: flex;
flex-direction: column;
align-items: center;
}
.imagenes-unete{
display: flex;
justify-content: space-between;
align-items: center;
}
.imagenes-unete img{
width: 25vw;
margin: 5% 0;
}
#credencial{
width: 7vw;
transform: rotate(15deg);
border-radius: 2%;
margin-left: 20%;
margin-top: 15%;
}
.unete h3{
color: white;
font-size: 6vh;
letter-spacing: .2vw;
}
.unete p{
color: white;
font-size: 3.3vh;
font-weight: 300;
text-align: center;
margin: 2% 0;
}
.unete a{
color: white;
font-size: 2.8vh;
text-decoration: none;
text-align: center;
}
.unete a span{
color: #9cae62;
}
.unete a:hover, .unete a:focus{
color: #9cae62;
transition-duration: 300ms;
}
@media (max-width: 1024px) {
.unete{
padding: 20% 10%;
}
.imagenes-unete img{
width: 60%;
margin: 5% 0;
}
#credencial{
width: 20%;
}
.unete h3{
text-align: center;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.unete{
padding: 10%;
}
.imagenes-unete img{
width: 25vw;
margin: 5% 0;
}
#credencial{
width: 7vw;
}
.unete h3{
text-align: left;
}
}
/*Carrera*/
.pre-banner-carrera{
background-color: #3884c3;
display: flex;
justify-content: space-between;
padding: 2% 0;
}
.pre-banner-carrera img{
width: 25vw;
margin-left: 10%;
}
.pre-banner-carrera h2{
color: white;
text-align: right;
font-size: 10vh;
letter-spacing: 1vw;
margin-right: 5%;
}
.pre-banner-carrera h2 span{
font-size: 20vh;
}
.contenedor-carrera{
background-color: #3884c3;
padding: 5% 5%;
}
.texto-inicial-carrera{
padding: 0 20%;
}
.texto-inicial-carrera p{
text-align: center;
color: white;
font-size: 4vh;
}
.detalles-carrera{
display: flex;
justify-content: space-between;
}
.detalle-carrera-cont{
width: 30vw;
color: #ef9556;
background-color: white;
margin: 2%;
padding: 2%;
}
.detalle-carrera-cont p{
color: #ef9556;
font: 2vh;
}
.detalle-carrera-cont p t{
color: #dd3847;
font-weight: 600;
}
.detalle-carrera-cont p t a{
color: #dd3847;
}
.detalle-carrera-cont p span{
font-size: 1.7vh;
}
.detalle-carrera-cont img{
width: 25vw;
}
.link-carrera{
margin: 2%;
text-align: center;
}
.link-carrera a{
text-align: center;
color: white;
background-color:#274994;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 600;
letter-spacing: 1vw;
text-transform: uppercase;
font-size: 4vh;
text-decoration: none;
padding: 1%;
}
.link-carrera a:hover{
background-color: #728db2;
color: #dd3847;
transition: 0.3s;
}
.carrera-general{
display: none!important;
background-color: rgba(0,0,0,.7);
margin: 0;
display: flex;
padding: 10%;
padding-top: 5%;
}
.cont-carrera{
display: flex;
justify-content: space-between;
align-items: center;
}
.texto-carrera{
flex-basis: calc(60% - 1rem);
}
.texto-carrera h3{
color: white;
font-size: 8vh;
letter-spacing: 0.2vw;
margin-bottom: 10%;
}
.texto-carrera p{
color: white;
font-size: 2.5vh;
margin-bottom: 7%;
}
.texto-carrera h4{
color: white;
font-size: 4vh;
}
.imagen-carrera{
flex-basis: calc(40% - 1rem);
text-align: right;
}
.imagen-carrera img{
width: 15vw;
transform: rotate(15deg);
}
@media (max-width: 1024px) {
.pre-banner-carrera{
display: flex;
flex-direction: column;
justify-content: center;
padding: 5% 0;
margin-top: 60vh;
}
.pre-banner-carrera img{
width: 70vw;
margin-left: 10%;
}
.pre-banner-carrera h2{
font-size: 6vh;
}
.pre-banner-carrera h2 span{
font-size: 10vh;
}
.contenedor-carrera{
margin-top: -5%;
}
.texto-inicial-carrera{
padding: 0 20%;
}
.texto-inicial-carrera p{
text-align: center;
color: white;
font-size: 3vh;
}
.detalles-carrera{
display: flex;
flex-direction: column;
justify-content: center;
}
.detalle-carrera-cont{
width: auto;
color: #ef9556;
background-color: white;
margin: 2%;
padding: 2%;
}
.detalle-carrera-cont h4{
font-size: 5vh;
}
.detalle-carrera-cont img{
width: 82vw;
}
.link-carrera{
margin: 15% 2%;
}
.link-carrera a{
font-size: 6vh;
}
.cont-carrera{
flex-direction: column-reverse;
}
.imagen-carrera{
text-align: center;
margin: 30% 0 5% 0;
}
.imagen-carrera img{
width: 50%;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.carrera{
padding-top: 0;
}
.cont-carrera{
flex-direction: row;
}
.imagen-carrera{
text-align: right;
margin: 0;
}
.imagen-carrera img{
width: 15vw;
}
}
/*Contacto*/
.contacto{
background-color: #9cae62;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10%;
}
.contacto h3{
font-size: 6vh;
letter-spacing: 0.2vw;
color: white;
margin: 5% 0;
}
.contacto p{
font-size: 3.5vh;
text-align: center;
}
.contacto p span{
font-weight: 600;
}
.contacto a{
text-decoration: none;
color: white;
font-weight: 600;
background-color: #3b64a5;
margin: 5% 0;
padding: 1%;
border: solid;
border-width: 0.5rem;
border-color: transparent;
}
.contacto a:hover, .contacto a:focus{
color: #3b64a5;
background-color: white;
border-color: #3b64a5;
transition-duration: 300ms;
}
.redes-contacto-contacto{
display: flex;
flex-direction: column;
align-items: center;
}
.redes-contacto-contacto h4{
font-size: 4vh;
letter-spacing: 0.2vw;
text-align: center;
margin: 5% 0;
}
.iconos-redes-contacto{
display: flex;
justify-content: center;
align-items: center;
}
.iconos-redes-contacto a{
margin: 10% 20%;
}
.iconos-redes-contacto img{
width: 3.5vw;
}
@media (max-width: 1024px) {
.contacto{
padding-top: 20%;
}
.contacto h3{
text-align: center;
}
.iconos-redes-contacto img{
width: 12vw;
}
}
@media (max-width: 1024px) and (orientation:landscape) {
.contacto{
padding-top: 10%;
}
.contacto h3{
text-align: left;
}
.iconos-redes-contacto img{
width: 5vw;
}
}
/* iframe {
width: 100%;
height: 100vh; */
/* background-image: url("../images/portada_aves.png"); */
/* } */
/* .iframe-wrapper {
position: relative;
height: 800px;
width: 100%;
}
.iframe {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
min-width: 100%;
height: 100px;
min-height: 100%;
} */
object {
width: 100%; /* para hacerlo responsive */
height: 100vh; /* opcional, dependiendo de tus preferencias */
}
/*Error 404*/
.error{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #9cae62;
padding: 15%;
}
.error h3{
font-size: 7vh;
color: white;
letter-spacing: 0.2vw;
}
.error p{
font-size: 2.5vh;
letter-spacing: 0.2vw;
}