Difference between revisions of "Template:Bolivia/Humanpractice"

 
(26 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
   <style>
 
   <style>
−
:root {
+
:root {
 
   --azul: #00507d;
 
   --azul: #00507d;
 
   --celeste: #00c7dc;
 
   --celeste: #00c7dc;
 
   --morado: #7b0068;
 
   --morado: #7b0068;
−
   --verde: #6dc72a;
+
   --verde: hsl(94, 65%, 47%);
−
   --bg-celeste: #d0e7f5c4;
+
   --bg-azul: #6ec72a0a;
 
   --tamanioletras: 16px;
 
   --tamanioletras: 16px;
 +
  --bg-celeste: #00c6dc25;
 +
  --dorado: #efb810;
 
}
 
}
  
Line 20: Line 22:
 
   font-size: 80px;
 
   font-size: 80px;
 
   font-weight: 600;
 
   font-weight: 600;
−
  font-family: "Righteous", cursive;
 
 
}
 
}
  
 
article,
 
article,
 
section {
 
section {
−
  margin-top: 6em !important;
 
−
 
 
   margin-bottom: 3em !important;
 
   margin-bottom: 3em !important;
 
}
 
}
  
 
p {
 
p {
−
   font-family: "Open Sans", sans-serif;
+
   font-family: "Open Sans", sans-serif !important;
−
  font-size: var(--tamanioletras);
+
 
   line-height: 30px;
 
   line-height: 30px;
 +
  font-size: var(--tamanioletras);
 +
}
 +
 +
.lista {
 +
  font-size: var(--tamanioletras);
 +
}
 +
 +
h2 {
 +
  text-align: center;
 +
  font-family: "Righteous", cursive;
 +
}
 +
h3 {
 +
  font-family: "Righteous", cursive;
 
}
 
}
  
Line 43: Line 54:
 
   color: var(--azul);
 
   color: var(--azul);
 
}
 
}
−
.text-celeste {
+
 
−
   color: var(--celeste);
+
.text-verde {
 +
   color: var(--verde);
 
}
 
}
  
Line 56: Line 68:
 
   height: 70vh;
 
   height: 70vh;
 
   overflow: hidden;
 
   overflow: hidden;
−
  white-space: ;
 
 
}
 
}
  
Line 109: Line 120:
 
   background-size: cover;
 
   background-size: cover;
 
}
 
}
−
 
 
/* keyframes*/
 
/* keyframes*/
  
Line 140: Line 150:
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100%;
 
   height: 100%;
−
   background-image: linear-gradient(to right, var(--morado), var(--verde));
+
   background-image: linear-gradient(to right, var(--verde), transparent);
 
   opacity: 0.4;
 
   opacity: 0.4;
 
   position: absolute;
 
   position: absolute;
Line 149: Line 159:
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100%;
 
   height: 100%;
−
   padding-bottom: 13vh;
+
   padding-bottom: 20vh;
 
   position: relative;
 
   position: relative;
 
   display: flex;
 
   display: flex;
Line 162: Line 172:
 
.logo-arsenito {
 
.logo-arsenito {
 
   margin-left: 20px;
 
   margin-left: 20px;
−
   width: 15%;
+
   width: 20%;
 
   position: absolute;
 
   position: absolute;
−
   /* height: 100px; */
+
   /* height : 100px; */
 
   right: 5%;
 
   right: 5%;
−
   bottom: 20px;
+
   bottom: -20px;
 
}
 
}
  
 
.title-small {
 
.title-small {
−
   color: var(--celeste);
+
   color: var(--verde);
 
   font-weight: 600;
 
   font-weight: 600;
 
}
 
}
Line 229: Line 239:
  
 
.nav-link:hover {
 
.nav-link:hover {
−
   color: var(--celeste) !important;
+
   color: var(--azul) !important;
 
}
 
}
  
Line 237: Line 247:
  
 
.my-nav {
 
.my-nav {
−
   background-image: linear-gradient(to right, var(--morado), var(--verde));
+
   background-image: linear-gradient(to right, var(--celeste), var(--verde));
 
   opacity: 0.9;
 
   opacity: 0.9;
 
   transition: 0.3s ease-in-out;
 
   transition: 0.3s ease-in-out;
Line 245: Line 255:
 
   position: relative;
 
   position: relative;
 
}
 
}
 +
 
.nav-item:after {
 
.nav-item:after {
 
   position: absolute;
 
   position: absolute;
Line 261: Line 272:
 
   width: 100%;
 
   width: 100%;
 
}
 
}
−
 
+
    .icono-entre{
−
/* HASTA AQUI ES EL BANNER Y NAVBAR */
+
    width: 50%;
−
 
+
    margin: 0 auto;
 +
    }
 
/* MENU LATERAL ICONOs */
 
/* MENU LATERAL ICONOs */
  
Line 271: Line 283:
 
   top: 200px;
 
   top: 200px;
 
   border-right: 5px solid;
 
   border-right: 5px solid;
−
   border-color: var(--morado);
+
   border-color: var(--verde);
−
   height: 230px;
+
   height: 450px;
 
   display: flex;
 
   display: flex;
 
   justify-content: center;
 
   justify-content: center;
 
   align-items: center;
 
   align-items: center;
 
   flex-direction: column;
 
   flex-direction: column;
−
  /* border: 1px solid #000; */
 
 
   width: 250px;
 
   width: 250px;
 
}
 
}
Line 289: Line 300:
 
   color: black;
 
   color: black;
 
}
 
}
 +
 
.box-icon:hover {
 
.box-icon:hover {
−
   color: var(--morado);
+
   color: var(--verde);
 
}
 
}
  
Line 308: Line 320:
 
   width: 40px;
 
   width: 40px;
 
   height: 40px;
 
   height: 40px;
 +
  cursor: pointer;
 +
}
 +
 +
.iconSubMenu {
 +
  width: 20px;
 +
  height: 20px;
 
   cursor: pointer;
 
   cursor: pointer;
 
}
 
}
Line 314: Line 332:
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 
   cursor: pointer;
 
   cursor: pointer;
 +
  font-size: 16px;
 +
  color: var(--verde);
 +
}
 +
.text-submenu {
 +
  font-size: 14px;
 +
  cursor: pointer;
 +
  color: black;
 +
}
 +
.text-menu:hover {
 +
  color: var(--azul);
 +
}
 +
.text-submenu:hover {
 +
  color: var(--azul);
 +
}
 +
a {
 +
  text-decoration: none;
 +
}
 +
.title {
 +
  font-family: "Righteous", cursive;
 
}
 
}
  
Line 322: Line 359:
 
}
 
}
  
−
.lista > li {
+
.my-carousel {
−
   font-family: "Open Sans", sans-serif;
+
   width: 70%;
−
  list-style: none;
+
−
  line-height: 50px;
+
 
}
 
}
  
−
/* PARALLAX seccion result*/
+
.my-carousel2 {
−
.parallax {
+
   width: 40%;
−
  margin-top: 50px;
+
−
  margin-bottom: 50px;
+
−
  background-image: url("ImagenesResultadosesperados/T--Bolivia--espectedresults_banner.jpg");
+
−
  min-height: 300px;
+
−
  background-attachment: fixed;
+
−
  background-position: center;
+
−
  background-repeat: no-repeat;
+
−
  background-size: contain;
+
−
   width: 100%;
+
 
}
 
}
  
−
.bg-title {
+
@media (max-width: 990px) {
−
  min-height: 300px;
+
   .menulateral {
−
  width: 64.8%;
+
    display: none;
−
  background-image: radial-gradient(#00c6dca4, transparent);
+
   }
−
   position: absolute;
+
   .my-carousel2 {
−
  color: white;
+
     width: 100%;
−
  display: flex;
+
−
   justify-content: center;
+
−
  align-items: center;
+
−
}
+
−
 
+
−
@media (max-width: 425px) {
+
−
   .bg-title {
+
−
    min-height: 300px;
+
−
     width: 94%;
+
−
    background-image: linear-gradient(270deg, #00c6dc4d, transparent);
+
−
    position: absolute;
+
−
    color: white;
+
−
    display: flex;
+
−
    justify-content: center;
+
−
    align-items: center;
+
 
   }
 
   }
 
}
 
}
  
−
.bg-azul {
+
.carusel_1 {
−
   background-image: linear-gradient(270deg, var(--bg-celeste), transparent);
+
   width: 70%;
−
   padding-top: 30px;
+
   margin: 0 auto;
−
  padding-bottom: 30px;
+
−
  display: flex;
+
−
  justify-content: center;
+
−
  align-items: center;
+
−
  font-size: 20px;
+
 
}
 
}
  
−
.bg-morado {
 
−
  background-image: linear-gradient(
 
−
    270deg,
 
−
    #7b00682d,
 
−
    rgba(255, 255, 255, 0.445)
 
−
  );
 
−
  padding-top: 30px;
 
−
  padding-bottom: 30px;
 
−
  display: flex;
 
−
  justify-content: center;
 
−
  align-items: center;
 
−
  font-size: 20px;
 
−
}
 
−
.cardFigure {
 
−
  background-color: #00507d1f;
 
−
  padding: 10px;
 
−
}
 
 
/* Linea del tiempo */
 
/* Linea del tiempo */
  
Line 421: Line 410:
 
   content: "";
 
   content: "";
 
   position: absolute;
 
   position: absolute;
−
   top: 35px;
+
   top: 40px;
 
   bottom: 50px;
 
   bottom: 50px;
 
   left: 27px;
 
   left: 27px;
−
   height: 93%;
+
   height: 91%;
 
   width: 3px;
 
   width: 3px;
 
   background-image: linear-gradient(#32cd32, #7b0068);
 
   background-image: linear-gradient(#32cd32, #7b0068);
Line 435: Line 424:
 
     left: 50%;
 
     left: 50%;
 
     margin-left: -2px;
 
     margin-left: -2px;
−
     height: 91%;
+
     height: 86%;
 
   }
 
   }
 
}
 
}
Line 441: Line 430:
 
@media (max-width: 1169px) {
 
@media (max-width: 1169px) {
 
   #cd-timeline::before {
 
   #cd-timeline::before {
−
     height: 90%;
+
     height: 85%;
 
   }
 
   }
 
}
 
}
Line 615: Line 604:
 
     padding: 1em;
 
     padding: 1em;
 
     width: 45%;
 
     width: 45%;
 +
  }
 +
 +
  .cajaizq {
 +
    opacity: 0;
 +
    transition: all 5s;
 +
  }
 +
  .movercajaizq {
 +
    animation: movercajaizq 3s;
 +
  }
 +
  @keyframes movercajaizq {
 +
    0% {
 +
      transform: translateX(-200px);
 +
    }
 +
    100% {
 +
      transform: translateX(0);
 +
    }
 +
  }
 +
 +
  .cajader {
 +
    opacity: 0;
 +
    transition: all 5s;
 +
  }
 +
  .movercajader {
 +
    animation: movercajader 3s;
 +
  }
 +
  @keyframes movercajader {
 +
    0% {
 +
      transform: translateX(200px);
 +
    }
 +
    100% {
 +
      transform: translateX(0);
 +
    }
 
   }
 
   }
  
Line 666: Line 687:
  
 
/* Collage de fotos reuniones */
 
/* Collage de fotos reuniones */
 +
 +
@media (max-width: 767px) {
 +
  .text-banner {
 +
    width: 100vw;
 +
    height: 70%;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: end;
 +
    margin-left: 0;
 +
    padding-bottom: 0;
 +
  }
 +
  .titulo-principal {
 +
    margin-top: 2vh;
 +
    font-size: 50px;
 +
    font-weight: 400;
 +
    color: white;
 +
  }
 +
  .team {
 +
    display: flex;
 +
    align-items: end;
 +
    justify-content: center;
 +
  }
 +
  .text-video {
 +
    background-color: var(--azul);
 +
    width: 100%;
 +
    min-height: 34vh;
 +
    padding: 56px;
 +
  }
 +
  .nav-item {
 +
    margin-left: 30px;
 +
    font-size: 18px;
 +
  }
 +
  /* .fila-banner {
 +
            padding-left: 10vw;
 +
            z-index: 10;
 +
            padding-left: 0;
 +
        } */
 +
}
 +
.hero {
 +
  width: 100%;
 +
  height: 550px;
 +
  position: relative;
 +
}
 +
 +
.hero video {
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  opacity: 0.9;
 +
}
 +
 +
@media (max-width: 991px) {
 +
  .hero {
 +
    height: 400px;
 +
  }
 +
}
 +
 +
@media (max-width: 767px) {
 +
  .hero {
 +
    height: 300px;
 +
  }
 +
}
 +
@media (max-width: 360px) {
 +
  .hero {
 +
    height: 150px;
 +
  }
 +
}
 +
 +
.icono-entre {
 +
  width: 60%;
 +
  margin: 0 auto;
 +
}
  
 
.container-collaje {
 
.container-collaje {
 
   position: relative;
 
   position: relative;
−
   width: 70%;
+
   width: 100%;
−
   height: 400px;
+
   height: 900px;
 
   margin: 0 auto;
 
   margin: 0 auto;
−
  background-color: rgba(0, 0, 0, 0.05);
 
 
   box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.06);
 
   box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.06);
 
}
 
}
  
−
.container-collaje .coll-img {
+
.coll-img {
 +
  position: absolute;
 +
  width: 100%;
 +
  height: 100%;
 +
  transition: transform 0.3s ease-out;
 +
}
 +
.coll-img2 {
 
   position: absolute;
 
   position: absolute;
 
   width: 100%;
 
   width: 100%;
Line 683: Line 781:
 
}
 
}
 
.coll-img:active {
 
.coll-img:active {
−
   transform: scale(1);
+
   transform: scale(0.6);
 
   z-index: 1;
 
   z-index: 1;
 +
  border-radius: 10px;
 
}
 
}
  
 +
.coll-img2:active {
 +
  transform: scale(0.4);
 +
  z-index: 1;
 +
  border-radius: 10px;
 +
}
 
.coll-img img {
 
.coll-img img {
 
   width: 100%;
 
   width: 100%;
−
   height: 100%;
+
   border: 2px solid black;
−
   max-width: 100%;
+
   border-radius: 10px;
 
}
 
}
 +
 +
.coll-img2 img {
 +
  width: 100%;
 +
  border: 2px solid black;
 +
  border-radius: 10px;
 +
}
 +
 
.i_1 {
 
.i_1 {
−
   transform: translate(21%, -23%) scale(0.4);
+
   transform: translate(-35%, -35%) scale(0.3);
 
}
 
}
 
.i_2 {
 
.i_2 {
−
   transform: translate(-26%, -22%) scale(0.4);
+
   transform: translate(-5%, -32%) scale(0.3);
 
}
 
}
 
.i_3 {
 
.i_3 {
−
   transform: translate(-26%, 22%) scale(0.4);
+
   transform: translate(-35%, -13%) scale(0.3);
 
}
 
}
 
.i_4 {
 
.i_4 {
−
   transform: translate(21%, 23%) scale(0.4);
+
   transform: translate(-5%, -14%) scale(0.3);
 
}
 
}
 
.i_5 {
 
.i_5 {
−
   transform: translate(-1%, -13%) scale(0.4);
+
   transform: translate(25%, -29%) scale(0.3);
 +
}
 +
.i_6 {
 +
  transform: translate(25%, -13%) scale(0.3);
 +
}
 +
.i_7 {
 +
  transform: translate(-10%, -2%) scale(0.2);
 +
}
 +
.i_8 {
 +
  transform: translate(10%, 1%) scale(0.2);
 +
}
 +
.i_9 {
 +
  transform: translate(-35%, 10%) scale(0.3);
 +
}
 +
.i_10 {
 +
  transform: translate(30%, 20%) scale(0.2);
 +
}
 +
.i_11 {
 +
  transform: translate(35%, 9%) scale(0.3);
 +
}
 +
.i_12 {
 +
  transform: translate(10%, 22%) scale(0.2);
 +
}
 +
.i_13 {
 +
  transform: translate(-35%, 48%) scale(0.3);
 +
}
 +
.i_14 {
 +
  transform: translate(10%, 24%) scale(0.2);
 +
}
 +
.i_15 {
 +
  transform: translate(-35%, 29%) scale(0.3);
 +
}
 +
.i_16 {
 +
  transform: translate(-10%, 25%) scale(0.2);
 +
}
 +
 
 +
.tam {
 +
  height: 700px;
 +
}
 +
.card-certificados {
 +
  transition: 0.3s ease-in-out;
 +
  margin: 0 auto;
 +
}
 +
.card-certificados:hover {
 +
  box-shadow: 10px 10px 15px 2px #bfbfbfa3;
 +
  opacity: 1;
 +
  transform: scale(1.02);
 +
}
 +
.container-collaje-2 {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 1000px;
 +
  margin: 0 auto;
 +
  box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.06);
 +
}
 +
 
 +
.i_1-2 {
 +
  transform: translate(-35%, -35%) scale(0.3);
 +
}
 +
.i_2-2 {
 +
  transform: translate(-5%, -30%) scale(0.3);
 +
}
 +
.i_3-2 {
 +
  transform: translate(-35%, -16%) scale(0.3);
 +
}
 +
.i_4-2 {
 +
  transform: translate(-5%, -15%) scale(0.3);
 +
}
 +
.i_5-2 {
 +
  transform: translate(25%, -26%) scale(0.3);
 +
}
 +
.i_6-2 {
 +
  transform: translate(25%, -11%) scale(0.3);
 +
}
 +
.i_7-2 {
 +
  transform: translate(-10%, -3%) scale(0.2);
 +
}
 +
.i_8-2 {
 +
  transform: translate(10%, -3%) scale(0.2);
 +
}
 +
.i_9-2 {
 +
  transform: translate(-35%, 6%) scale(0.3);
 +
}
 +
.i_10-2 {
 +
  transform: translate(10%, 19%) scale(0.2);
 +
}
 +
.i_11-2 {
 +
  transform: translate(29%, -1%) scale(0.2);
 +
}
 +
.i_12-2 {
 +
  transform: translate(10%, 22%) scale(0.2);
 +
}
 +
.i_13-2 {
 +
  transform: translate(-35%, 33%) scale(0.3);
 +
}
 +
.i_14-2 {
 +
  transform: translate(-35%, 18%) scale(0.3);
 +
}
 +
.i_15-2 {
 +
  transform: translate(-35%, 3%) scale(0.3);
 +
}
 +
.i_16-2 {
 +
  transform: translate(-10%, 25%) scale(0.2);
 +
}
 +
.container-collaje-3 {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 800px;
 +
  margin: 0 auto;
 +
  box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.06);
 +
}
 +
.i_1-3 {
 +
  transform: translate(-40%, -40%) scale(0.2);
 +
}
 +
.i_2-3 {
 +
  transform: translate(30%, -40%) scale(0.2);
 +
}
 +
.i_3-3 {
 +
  transform: translate(-40%, -13%) scale(0.2);
 +
}
 +
.i_4-3 {
 +
  transform: translate(-15%, -32%) scale(0.3);
 +
}
 +
.i_5-3 {
 +
  transform: translate(10%, -40%) scale(0.2);
 +
}
 +
.i_6-3 {
 +
  transform: translate(-15%, -9%) scale(0.3);
 +
}
 +
.i_7-3 {
 +
  transform: translate(15%, -7%) scale(0.3);
 +
}
 +
.i_8-3 {
 +
  transform: translate(-15%, 14%) scale(0.3);
 +
}
 +
.i_9-3 {
 +
  transform: translate(40%, -12%) scale(0.2);
 +
}
 +
.i_10-3 {
 +
  transform: translate(15%, 16%) scale(0.3);
 +
}
 +
.i_11-3 {
 +
  transform: translate(15%, 31%) scale(0.3);
 +
}
 +
.i_12-3 {
 +
  transform: translate(10%, 22%) scale(0.3);
 +
}
 +
.i_13-3 {
 +
  transform: translate(-15%, 33%) scale(0.3);
 +
}
 +
.i_14-3 {
 +
  transform: translate(-40%, 15%) scale(0.2);
 +
}
 +
 
 +
.container-collaje-4 {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 800px;
 +
  margin: 0 auto;
 +
  box-shadow: 0 0 40px 5px rgba(255, 255, 255, 0.06);
 +
}
 +
.i_1-4 {
 +
  transform: translate(-35%, -35%) scale(0.3);
 +
}
 +
.i_2-4 {
 +
  transform: translate(35%, -35%) scale(0.3);
 +
}
 +
.i_3-4 {
 +
  transform: translate(1%, -29%) scale(0.3);
 +
}
 +
.i_4-4 {
 +
  transform: translate(-35%, -15%) scale(0.3);
 +
}
 +
.i_5-4 {
 +
  transform: translate(35%, -14%) scale(0.3);
 +
}
 +
.i_6-4 {
 +
  transform: translate(1%, -9%) scale(0.3);
 +
}
 +
.i_7-4 {
 +
  transform: translate(-35%, 6%) scale(0.3);
 +
}
 +
.i_8-4 {
 +
  transform: translate(1%, 14%) scale(0.3);
 +
}
 +
.i_9-4 {
 +
  transform: translate(35%, 7%) scale(0.3);
 +
}
 +
.i_10-4 {
 +
  transform: translate(35%, 29%) scale(0.3);
 +
}
 +
.i_11-4 {
 +
  transform: translate(-35%, 29%) scale(0.3);
 
}
 
}
  
 
@media (max-width: 921px) {
 
@media (max-width: 921px) {
 
   .container-collaje {
 
   .container-collaje {
−
     position: relative;
+
     height: 480px;
−
     width: 80%;
+
  }
−
     height: 360px;
+
  .container-collaje-2 {
 +
     height: 500px;
 +
  }
 +
  .container-collaje-3 {
 +
    height: 580px;
 +
  }
 +
  .container-collaje-4 {
 +
    height: 600px;
 +
  }
 +
  .tam {
 +
     height: 420px;
 
   }
 
   }
 
}
 
}
Line 718: Line 1,031:
 
   .container-collaje {
 
   .container-collaje {
 
     position: relative;
 
     position: relative;
−
     width: 90%;
+
     height: 380px;
−
     height: 360px;
+
  }
 +
  .container-collaje-2 {
 +
    height: 400px;
 +
  }
 +
  .container-collaje-3 {
 +
    height: 400px;
 +
  }
 +
  .container-collaje-4 {
 +
     height: 400px;
 
   }
 
   }
 
}
 
}
 +
 
@media (max-width: 540px) {
 
@media (max-width: 540px) {
 
   .container-collaje {
 
   .container-collaje {
 
     position: relative;
 
     position: relative;
−
    width: 90%;
+
     height: 300px;
−
     height: 320px;
+
 
   }
 
   }
−
}
+
   .container-collaje-2 {
−
@media (max-width: 400px) {
+
     height: 300px;
−
   .container-collaje {
+
−
    position: relative;
+
−
    width: 90%;
+
−
     height: 280px;
+
 
   }
 
   }
−
}
+
   .container-collaje-3 {
−
@media (max-width: 767px) {
+
     height: 300px;
−
   .text-banner {
+
−
    width: 100vw;
+
−
     height: 70%;
+
−
    display: flex;
+
−
    justify-content: center;
+
−
    align-items: end;
+
−
    margin-left: 0;
+
−
    padding-bottom: 0;
+
 
   }
 
   }
−
   .titulo-principal {
+
   .container-collaje-4 {
−
     margin-top: 2vh;
+
     height: 300px;
−
    font-size: 50px;
+
−
    font-weight: 400;
+
−
    color: white;
+
 
   }
 
   }
−
   .team {
+
   .tam {
−
     display: flex;
+
     height: 800px;
−
    align-items: end;
+
−
    justify-content: center;
+
 
   }
 
   }
−
   .text-video {
+
 
−
     background-color: var(--azul);
+
   .tam {
−
    width: 100%;
+
     height: 250px;
−
    min-height: 34vh;
+
−
    padding: 56px;
+
 
   }
 
   }
−
   .nav-item {
+
}
−
     margin-left: 30px;
+
@media (max-width: 400px) {
−
     font-size: 18px;
+
   .container-collaje {
 +
     position: relative;
 +
     height: 300px;
 
   }
 
   }
 
}
 
}
−
.hero {
+
 
 +
/* ************* BOTON DESCARGA ******************/
 +
 
 +
a:hover {
 +
  text-decoration: none !important;
 +
}
 +
 
 +
.dedcription-btn {
 +
  text-decoration: none;
 
   width: 100%;
 
   width: 100%;
−
  height: 550px;
 
 
   position: relative;
 
   position: relative;
 +
  display: inline-block;
 +
  border-radius: 30px;
 +
  background-color: #fcfcfc;
 +
  color: var(--verde);
 +
  text-align: center;
 +
 +
  padding: 9px 0;
 +
  transition: all 0.3s;
 +
  padding-right: 40px;
 +
  margin: 20px 5px;
 +
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.116);
 
}
 
}
  
−
.hero video {
+
.dedcription-btn .btn-icon {
 +
  width: 92px;
 +
  height: 45px;
 +
  float: right;
 
   position: absolute;
 
   position: absolute;
 +
  border-radius: 30px 30px 30px 0;
 +
  right: 0px;
 +
  top: 0px;
 +
  transition: all 0.3s;
 +
}
 +
 +
.name-descripeion {
 +
  position: relative;
 +
  z-index: 9999;
 +
}
 +
 +
.btn-icon::after {
 +
  content: "";
 +
  width: 0;
 +
  height: 0;
 +
  border-top: 45px solid #fcfcfc;
 +
  border-right: 40px solid transparent;
 +
  position: absolute;
 +
  top: 0px;
 +
  left: 0px;
 +
}
 +
 +
.dedcription-btn:hover .btn-icon {
 
   width: 100%;
 
   width: 100%;
−
   height: 100%;
+
   border-radius: 30px;
−
  opacity: 0.9;
+
 
}
 
}
  
−
@media (max-width: 991px) {
+
.dedcription-btn:hover .btn-icon::after {
−
  .hero {
+
  display: none;
−
    height: 400px;
+
   opacity: 0.1;
−
   }
+
 
}
 
}
  
−
@media (max-width: 767px) {
+
.btn-icon i {
−
   .hero {
+
  position: absolute;
−
     height: 300px;
+
  right: 25px;
 +
  top: 15px;
 +
  color: #fff;
 +
}
 +
 
 +
.dedcription-btn:hover {
 +
  color: #fff !important;
 +
}
 +
 
 +
.descarga {
 +
  background-color: var(--verde) !important;
 +
}
 +
 
 +
.hover-box {
 +
  display: flex;
 +
  width: 100%;
 +
  height: 100vh;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
 
 +
.boton {
 +
  width: 80%;
 +
  margin: 0 auto;
 +
}
 +
 
 +
.my-carousel {
 +
  width: 70%;
 +
}
 +
 
 +
.my-carousel2 {
 +
  width: 40%;
 +
}
 +
 
 +
.img {
 +
  border-radius: 10px;
 +
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.116);
 +
}
 +
 
 +
.img:hover {
 +
  border-radius: 10px;
 +
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.116);
 +
  transform: scale(1.02);
 +
}
 +
 
 +
 
 +
 
 +
/* BOTON FLOTANTE */
 +
 
 +
.wrapper {
 +
    width          : 50px;
 +
    height        : 50px;
 +
    position      : fixed;
 +
    border-radius  : 100%;
 +
    display        : flex;
 +
    justify-content: center;
 +
    margin-top    : 6rem;
 +
    bottom        : 50px;
 +
    right          : 50px;
 +
    z-index        : 100;
 +
}
 +
 
 +
.wrapper .fab {
 +
    background-color: var(--verde);
 +
    width          : 50px;
 +
    height          : 50px;
 +
    position        : relative;
 +
    z-index        : 3;
 +
    border-radius  : 100%;
 +
    box-shadow      : 0 2px 4px rgba(0, 0, 0, 0.4);
 +
    display        : flex;
 +
    justify-content : center;
 +
    align-items    : center;
 +
    animation      : fab-animation-reverse 0.4s ease-out forwards;
 +
}
 +
 
 +
.wrapper .fab::before,
 +
.wrapper .fab::after {
 +
    content      : "";
 +
    display      : block;
 +
    position    : absolute;
 +
    border-radius: 4px;
 +
    background  : #fff;
 +
}
 +
 
 +
.wrapper .fab::before {
 +
    width : 4px;
 +
    height: 18px;
 +
}
 +
 
 +
.wrapper .fab::after {
 +
    width : 18px;
 +
    height: 4px;
 +
}
 +
 
 +
.wrapper .fac {
 +
    width          : 32px;
 +
    height        : 150px;
 +
    border-radius  : 64px;
 +
    position      : absolute;
 +
    background    : #fff;
 +
    z-index        : 2;
 +
    padding        : 0.5rem 0.5rem;
 +
    box-shadow    : 0 2px 4px rgba(0, 0, 0, 0.4);
 +
    opacity        : 0;
 +
    top            : -110px;
 +
    display        : flex;
 +
    flex-direction : column;
 +
    justify-content: space-around;
 +
    align-items    : center;
 +
    transition    : opacity 0.2s ease-in, top 0.2s ease-in, width 0.1s ease-in;
 +
 
 +
}
 +
 
 +
.wrapper .fac a {
 +
    color  : var(--icon-color);
 +
    opacity: 0.8;
 +
}
 +
 
 +
.wrapper .fac a:hover {
 +
    transition: 0.2s;
 +
    opacity  : 1;
 +
    color    : var(--verde);
 +
}
 +
 
 +
.wrapper input {
 +
    height      : 100%;
 +
    width        : 100%;
 +
    border-radius: 100%;
 +
    cursor      : pointer;
 +
    position    : absolute;
 +
    z-index      : 5;
 +
    opacity      : 0;
 +
}
 +
 
 +
.wrapper input:checked~.fab {
 +
    animation: fab-animation 0.4s ease-out forwards;
 +
}
 +
 
 +
.wrapper input:checked~.fac {
 +
    width: 32px;
 +
    height: 180px;
 +
    animation: fac-animation 0.4s ease-out forwards 0.1s;
 +
    top: -195px;
 +
    opacity: 1;
 +
}
 +
 
 +
@keyframes fab-animation {
 +
    0% {
 +
        transform: rotate(0) scale(1);
 +
    }
 +
 
 +
    20% {
 +
        transform: rotate(60deg) scale(0.93);
 +
    }
 +
 
 +
    55% {
 +
        transform: rotate(35deg) scale(0.97);
 +
    }
 +
 
 +
    80% {
 +
        transform: rotate(48deg) scale(0.94);
 +
    }
 +
 
 +
    100% {
 +
        transform: rotate(45deg) scale(0.95);
 +
    }
 +
}
 +
 
 +
@keyframes fab-animation-reverse {
 +
    0% {
 +
        transform: rotate(45deg) scale(0.95);
 +
    }
 +
 
 +
    20% {
 +
        transform: rotate(-15deg);
 +
    }
 +
 
 +
    55% {
 +
        transform: rotate(10deg);
 +
    }
 +
 
 +
    80% {
 +
        transform: rotate(-3deg);
 +
    }
 +
 
 +
    100% {
 +
        transform: rotate(0) scale(1);
 +
    }
 +
}
 +
 
 +
@keyframes fac-animation {
 +
    0% {
 +
        transform: scale(1, 1);
 +
    }
 +
 
 +
    33% {
 +
        transform: scale(0.95, 1.05);
 +
    }
 +
 
 +
    66% {
 +
        transform: scale(1.05, 0.95);
 +
    }
 +
 
 +
    100% {
 +
        transform: scale(1, 1);
 +
    }
 +
}
 +
 
 +
/* end flotante */
 +
 
 +
 
 +
 
 +
/* ************************** */
 +
 
 +
 
 +
 
 +
 
 +
input {
 +
    height  : 40px;
 +
    left    : 0;
 +
    opacity : 0;
 +
    position: absolute;
 +
    top    : 0;
 +
    width   : 40px;
 +
}
 +
 
 +
 
 +
 
 +
.toggle {
 +
    position: relative;
 +
    display : inline-block;
 +
}
 +
 
 +
label.toggle-item {
 +
    width          : 4em;
 +
    background      : var(--azul);
 +
    height          : 1.5em;
 +
    display        : inline-block;
 +
    border-radius  : 50px;
 +
    margin          : 0px;
 +
    position        : relative;
 +
    transition      : all 0.3s ease;
 +
    transform-origin: 20% center;
 +
    cursor          : pointer;
 +
}
 +
 
 +
label.toggle-item:before {
 +
    content      : "";
 +
    position    : absolute;
 +
    display      : block;
 +
    transition   : all 0.2s ease;
 +
    width        : 2.3em;
 +
    height      : 2.3em;
 +
    top          : 0.25em;
 +
    left        : 0.25em;
 +
    border-radius: 2em;
 +
    border      : 2px solid #88cf8f;
 +
    transition  : 0.3s ease;
 +
}
 +
 
 +
 
 +
#transparent:checked+label:before {
 +
    content  : "";
 +
    position : absolute;
 +
    transform: translateX(59px);
 +
}
 +
 
 +
.checkcross label:before {
 +
    content : "";
 +
    position: absolute;
 +
    content : none;
 +
}
 +
 
 +
.checkcross .check {
 +
    border-radius: 50%;
 +
    width        : 1em;
 +
     height       : 1em;
 +
    position    : absolute;
 +
    background  : #8BC34A;
 +
    transition  : 0.4s ease;
 +
    top          : 5.5px;
 +
    left        : 5.5px;
 +
}
 +
 
 +
.checkcross .check:before,
 +
.checkcross .check:after {
 +
    content      : "";
 +
    position    : absolute;
 +
    height      : 4px;
 +
    border-radius: 10px;
 +
    background  : #fff;
 +
    transition  : 0.4s ease;
 +
}
 +
 
 +
 
 +
#checkcross:checked+label .check {
 +
    left      : 54px;
 +
    transform : rotate(360deg);
 +
    background: #c34a4a;
 +
}
 +
 
 +
 
 +
.text-name {
 +
        font-size: 8px;
 +
    position: relative;
 +
    top: -3px;
 +
    right: -71px;
 +
}
 +
 
 +
.text-dorado {
 +
  color: var(--dorado);
 +
}
 +
.premio {
 +
  position: relative;
 +
  padding: 10px;
 +
  border-radius: 10px;
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  overflow: hidden;
 +
}
 +
.premio2 {
 +
  position: relative;
 +
  z-index: 10;
 +
}
 +
 
 +
.premio::before {
 +
  content: "";
 +
  position: absolute;
 +
  width: 110%;
 +
  height: 100%;
 +
  background: linear-gradient(var(--azul), var(--verde));
 +
  animation: animate 5s linear infinite;
 +
}
 +
.premio::after {
 +
  content: "";
 +
  position: absolute;
 +
  inset: 4px;
 +
  background: #fcfbf3;
 +
  border-radius: 16px;
 +
}
 +
@keyframes animate {
 +
  0% {
 +
    transform: rotate(0deg);
 +
  }
 +
  100% {
 +
    transform: rotate(360deg);
 
   }
 
   }
 
}
 
}
−
@media (max-width: 360px) {
+
 
−
   .hero {
+
.premio2 .img_p1 {
−
     height: 150px;
+
  width: 90%;
 +
  margin: auto;
 +
}
 +
.premio2 .img_p2 {
 +
  width: 70%;
 +
  margin: auto;
 +
}
 +
 
 +
@media (max-width: 700px) {
 +
   .premio2 .img_p1 {
 +
     width: 55%;
 +
  }
 +
  .premio2 .img_p2 {
 +
    width: 35%;
 +
  }
 +
  .premio2 h1 {
 +
    font-size: 23px;
 +
  }
 +
  .premio2 h3 {
 +
    font-size: 17px;
 
   }
 
   }
 
}
 
}

Latest revision as of 14:45, 17 December 2021