/*////////////
SLIDER
/////////////*/

.g3k.slider
{
  height: 80vh;
  min-height: 28em;
  background-color: #333;
  background-color: var(--color-1);
  color: #fff;
  position: relative;
  line-height:30px;  
  overflow: hidden;
  max-height: 30em;
}

.g3k .slide
{
  opacity: 0;
  position: absolute;  
  min-height: 100%;
  background-color: inherit;
  top: 0;
  left: 0;
  text-align: center;
  color: #fff !important;
  overflow: hidden;
  background-attachment: fixed;
  background-position: center;
  will-change: width;
  background-size: cover; 
  transition: all ease 1s; 
  padding: 1em;
  width: 100%;
}

.g3k .slide.selected
{
  color: #fff;
  z-index: 4;
  animation: arriba ease 1s forwards;
  opacity: 1;
}

.g3k .slide:not(.principal)::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 50vh;
    background: inherit;
    top: 8em;
    top: 12vh;
    left: 0;
    filter: blur(5px);
}

.g3k .slide:not(.principal) .title {
    margin-top: 12vh;
    text-align: justify !important;
}

.g3k .slide .title
{
  font-size: 20px;
  line-height: 1.5em;
  font-weight: 400;
  padding-bottom: 0.2em;
}

.g3k .slide .title b
{
  display: block;
  padding: 0;
  font-weight: bold;
  font-size: 1.2em;
}

.g3k .slide .link
{
  color: #fff;
  background-color: rgba(0,0,0,.1);
  text-decoration: none;
  padding: 0.2em 1em;
  font-weight: 100;
  border: solid 1px white;
  border-radius: 25px;
  display: inline-block;
  margin-top: 0.5em;
  will-change: transform, color;
  transition: all ease .3s;
}

.g3k .slide .link:hover
{
  transform: scale(1.1);
  background-color: rgba(0,0,0,.4);
}

.g3k .slide .title,
.g3k .slide p,
.g3k .slide .link
{
  position: relative;
  color: #fff;
}

.g3k .slide.principal figure
{
  width: 100%;
  background-image: url('http://ita-sa.com/static/images/itatpls/slide3-2.png');
/*   background-color: rgba(0,0,0,.1); */
  padding: 0;
  position: relative;
  left: 0;
  bottom: 0;
  min-height: 22em;
  background-repeat: no-repeat;
  background-size: auto 20em;
  background-position: 17% 100%;
}

.g3k .slide.principal figure p
{
  margin-right: calc(1em + 15vw);
  text-align: left;
  font-size: 0.8em;
  width: 18em;
  padding: 3em .5em .5em;
  box-shadow: inset 0 -1px 0;
  position: relative;
  text-shadow: 0 0 0.5em rgba(0,0,0,.5);
}

.g3k .slide.principal figure p b
{
  display: inline-block;
  width: 100%;
  padding: 0;
}

.g3k .slide.principal .icon::before {
    content: '';
    position: absolute;
    display: block;
    width: calc(10vw + 1em);
    height: 1px;
    background-color: white;
    bottom: 0;
    right: 100%;
    transform-origin: bottom right;
    transform: rotateZ(-30deg);
    transition: transform ease .5s;
}

.g3k .slide.principal .icon::after
{
  background-color: rgba(255,255,255,1);
  box-shadow: 0 0 0 .5em rgba(255,255,255,.5);
  font-size: 1.2em;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
  position: absolute;
  left: calc(100% - 1em);
  top: 50%;
  color: var(--color-claro);
  text-shadow: none;
}

.g3k .slide.principal .icon.hacienda::after
{
  content: '\f19c';
}

.g3k .slide.principal .icon.seguridad::after
{
  content: '\f05b';
}
.g3k .slide.one
{
  background-image: url('../images/banner.jpg');
  background-size: cover;
}
.g3k .slide.second
{
  background-image: url('../images/banner2.jpg');
  background-size: cover;
}

.g3k .slide.third
{
  background-image: url('../images/banner3.jpg');
  background-size: auto 100%;
  background-position: -40em 0;
}

.g3k .slide.before
{
  z-index: 3;
}

.btn-slider{
  text-decoration: none;
  color: white;
  padding: 0.5em 1.2em;
  display: inline-block;
  text-align: center;
  position: absolute;
  bottom: 50%;
  z-index: 10;
  font-size: 1px;
  color: rgba(255,255,255,0);
  opacity: 0;
  transition: ease all .5s;
  transform: translateY(50%)
}

.g3k.slider:hover .btn-slider
{
  opacity: 1;
}

.btn-slider::before
{
  content: '';
  font-size: 3.5rem;
  color: white;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
}

.btn-slider.prev
{
  left: 0;
}

.btn-slider.prev::before
{
  content: '\f104';
}

.btn-slider.next
{
  right: 0;
}

.btn-slider.next::before
{
  content: '\f105';
}

/*BOTONES DE NAVEGACION SLIDER*/

.list
{  
  text-align: center;
  padding: 0.5em;
}

.list .item
{
  display: inline-block;
}

.list .link
{
  text-decoration: none;
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #efeffe;
  margin-bottom: 0.2em;
}

.list.nav-hash
{
  position: absolute;
  bottom: 1em;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%)
}

.list.nav-hash .item
{
  height: 2em;
  width: 2em;
  line-height: 2em;
  cursor: pointer;
}

.list.nav-hash .item::before
{
  content: '';
  background-color: rgba(0,0,0,.5);
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1);
}

.list.nav-hash .item:hover::before,
.list.nav-hash .item.infocus:hover::before
{
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}

.list.nav-hash .item.infocus::before
{
  background-color: white;
}


/*////////////////////////
ANIMACIONES ============
//////////////////////////*/

.anima,
.selected .title,
.selected .parragraph,
.selected .link,
.selected .mano,
.selected .mano .icon,
.g3k .slide.principal.selected .icon::after
{
  animation: aparece-arriba ease 1s;
}

.anima.reverse,
.not-selected .title,
.not-selected .parragraph,
.not-selected .link,
.not-selected .mano,
.not-selected .mano .icon,
.g3k .slide.principal.selected .icon::after
{
  animation-direction: reverse;
}

.anima-aparece-arriba,
.selected .title,
.selected .parragraph,
.selected .link,
.g3k .slide.principal.selected .icon::after
{  animation-name: aparece-arriba;  }

.anima-aparece-abajo,
.selected .mano
{  animation-name: aparece-abajo;  }


.anima-aparece-izquierda,
.selected .mano .icon,
.not-selected .title,
.not-selected .parragraph,
.not-selected .link,
.not-selected .mano,
.not-selected .mano .icon
{  animation-name: aparece-izquierda;  } 

.anima-effect_bouncing,
.selected .title,
.selected .parragraph,
.selected .link,
.selected .mano .icon,
.not-selected .title,
.not-selected .parragraph,
.not-selected .link,
.not-selected .mano .icon,
.g3k .slide.principal.selected .icon::after
{  animation-timing-function: 
  cubic-bezier(.87,-.41,.19,1.44);  }

.anima-effect_ease,
.selected .mano
{  animation-timing-function: ease;  } 

.anima-modo_backwards,
.selected .title,
.selected .parragraph,
.selected .link,
.selected .mano,
.selected .mano .icon,
.g3k .slide.principal.selected .icon::after
{  animation-fill-mode: backwards;  } 

.anima-modo_both,
.g3k .slide.principal.selected .icon::after
{  animation-fill-mode: both;  } 

.anima-duration_0-5s,
.not-selected .title,
.not-selected .parragraph,
.not-selected .link,
.not-selected .mano,
.not-selected .mano .icon,
.g3k .slide.principal.selected .icon::after
{  animation-duration: 0.5s;  }

.anima-duration_0-8s,
.selected .title,
.selected .parragraph,
.selected .link
{  animation-duration: .8s;  }

.anima-duration_1-6s,
.selected .mano,
.selected .mano .icon
{  animation-duration: 1.6s;  }

.anima-delay_0s,
.selected .title,
.selected .parragraph
{  animation-delay: 0;  }

.anima-delay_0-1s,
.not-selected .parragraph
{  animation-delay: 0.1s;  }

.anima-delay_0-2s,
.not-selected .link
{  animation-delay: 0.2s;  }

.anima-delay_0-3s,
.selected .parragraph,
.selected .mano
{  animation-delay: 0.3s;  }

.anima-delay_0-6s,
.selected .link,
.selected .mano .icon
{  animation-delay: 0.6s;  }

.anima-delay_0-8s,
.selected .mano .icon.seguridad
{  animation-delay: 0.8s;  }

.anima-delay_2s,
.g3k .slide.principal.selected .icon::after
{  animation-delay: 2s;  }


@keyframes aparece-arriba
{
  from{ opacity: 0; transform: translateY(-60vh);}  
}

@keyframes aparece-abajo
{
  from{ opacity: 0; transform: translateY(60vh);}  
}

@keyframes aparece-izquierda
{
  from{ opacity: 0; transform: translateX(-60vw);}  
}

@keyframes aparece-derecha
{
  from{ opacity: 0; transform: translateX(60vw);}  
}






/*////////////////////////
MEDIA QUERIES ============
//////////////////////////*/

@media (max-width: 480px) 
{
  .g3k .slide.principal figure
  {
    background-position: bottom center;
    background-size: 10em auto;
    min-height: 24em;
  }
  
  .g3k .slide.principal figure p  {
    margin-left: 0;
    margin: auto;
    transform: translateX(-1em)
  }
  
.g3k .slide .title
  {
    font-size: 17px;
  }
  
  .g3k .slide.principal .icon::before
  {
    opacity: 0;
  }
  
}


@media (max-width: 768px) 
{
 .g3k .slide .title{
    font-size: 17px;
  }

 .g3k .slide .parragraph{
    font-size: 17px;
    display: none;
  }
}

@media (max-width: 992px){  

.g3k .slide:not(.principal) .title {
    margin-top: 3vh;
    text-align: justify !important;
}

}

/* really Small devices (cellphones, 480px and up) */
@media (min-width: 480px) {  
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  
  .g3k .slide
  {
    padding: 0em 3em;
  }
  
  .g3k .slide.principal figure
  {
    width: 80%;
    min-height: 18em;
    background-size: auto 16em;
    bottom: -1em;
    background-position: 0% 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .g3k .slide.principal .icon::before
  {
    width: calc(10vw + 8em);
    transform: rotateZ(-30deg);
  }
  
  .g3k .slide.principal figure p
  {
    padding: 2em 2em .5em;
    width: 42.5vw;
    margin-right: calc(2em + 5vw);
  }  
  
  .g3k .slide.principal .icon::after
  {
    font-size: 1.6em;
    height: 2.5em;
    width: 2.5em;
    line-height: 2.5em;
    top: initial;
    transform: translateY(-1em);
  }
  
  .g3k .slide.principal figure p.seguridad
  {
    padding-top: 2em;
  }
  
  .g3k .slide.principal figure p.hacienda
  {
    padding-top: 6em;
  }
  
  .g3k .slide.principal .icon.seguridad::before 
  {
    transform: rotateZ(30deg);
  }
  
  /*=========
  ANIMACIONES
  =========*/
  .anima-aparece-arriba,
  .selected .mano .icon
  {  
    animation-name: aparece-arriba;  
    animation-delay: 1s;
  }
  
  .selected .mano .icon.hacienda
  {
    animation-delay: 1s;
  }
  
}

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
  
  .g3k.slider
  {
    height: 20em;
    min-height: 28em;
  }
  
  .g3k .slide:not(.third)
  {
    text-align: left;
  }
  
  .g3k .slide .title,
  .g3k .slide p
  {
    padding-left: 3vw;
  }
  
  .g3k.slider .slide .title
  {
    margin-top: 6vh;
  }
  
  .g3k .slide p
  {
     font-size: 14px; 
  }
  
  .g3k .slide .link
  {
    margin-left:  3vw;
  }
  
  .g3k .slide.principal 
  {
    padding-right: 60%;
    padding-right: calc(60% + 1.5em);
  }
  
  .g3k .slide.principal figure
  {
    width: 60%;
    max-width: 50em;
    position: absolute;
    min-height: initial;
    top: 0;
    bottom: 0;
    left: initial;
    right: 0;
    background-size: auto 22em;
    margin-right: 0;
    transform: none;
  }
  
  .g3k .slide.principal figure p {
    width: 22em;
    margin-right: initial;
    position: absolute;
    left: 16em;
    padding: 2em 0 .5em 3em;
  }  
  
  .g3k .slide.principal figure p.seguridad,
  .g3k .slide.principal figure p.hacienda
  {
    padding-top: 1em;
  }
  
  .g3k .slide.principal figure p.hacienda {
    top: 4em;
  }
  .g3k .slide.principal figure p.seguridad {
    top: 16em;
  }
  .g3k .slide.principal .icon::before {
    width: 6em;
    transform: rotateZ(-30deg);
  }
  .g3k .slide.principal .icon.seguridad::before {
    transform: rotateZ(30deg);
  }    
  .g3k .slide:not(.principal)::before
  {
    top: 0;
    width: 60%;
    max-width: 50em;
    height: 100%;
  }  
  
  .g3k .slide.second p {
    max-width: 50em;
    margin: 0;
  }
  
  .g3k .slide.third
  {
    text-align: right;
    background-position: 55% -10vh;
    background-size: cover;
  }  
  .g3k .slide.third::before
  {
    left: initial;
    right: 0;
  }
  
  .g3k .slide.third .title, 
  .g3k .slide.third p
  {
    padding-left: 1em;
    padding-right: 3vw;
  }
  
  .g3k .slide.third .link
  {
    margin-left: initial;
    margin-right: 3vw;
  }
  
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
  
  .g3k.slider 
  {
    font-size: 1.1em;
    min-height: 20em;
  }
  
  .g3k .slide:not(.principal)::before {
    max-width: 45em;
  }
  
  .g3k .slide.third
  {
    text-align: left;
    padding-right: 2em;
    padding-right: 5vw;   
    background-size: 115% auto;
    background-position: 50% 0%;
  }  
  
  .g3k .slide.principal figure p.hacienda {
    top: 4em;
  }
  
  .g3k .slide.principal figure p.seguridad {
    top: 14em;
  }
  
  .g3k .slide.third::before
  {
    left: initial;
    right: 0;
    max-width: 30em;
  }  
  
  .g3k .slide.principal figure
  {
    background-size: auto 90%;
  }
  
  .g3k.slider .slide .title {
    margin-top: 4vh;
  }
  
  .g3k .slide.third .title, 
  .g3k .slide.third p
  {
    padding-left: 1rem;
  }
  
  .g3k .slide.third .link
  {
    margin-left: 1rem;
  }
  
  .g3k .slide.principal .icon::before {
    width: 8em;
    transform: rotateZ(-30deg);
  }
  
  .g3k .slide.principal .icon.seguridad::before {
    transform: rotateZ(30deg);
  }
  
  .g3k .slide.principal figure p
  {
    padding: 2em 0 .5em 2em;
  }

}


@media (min-width: 1600px) {  
  
  .g3k .slide .title, 
  .g3k .slide p
  {
    padding-left: 10vw;
  }
  
  .g3k.slider .link
  {
    margin-left: 10vw;
  }

}