/* Custom Stylesheet */
:root {
  --color-bg-1:#17223b;
  --color-bg-2:#263859;
  --color-bg-3:#6b778d;
  --color-text:rgba(256,256,256,0.5);
  --color-primary-1:#FC4E4E;
  --color-primary-2:#FF0066;
  --bg-primary:linear-gradient(var(--color-primary-1), var(--color-primary-2));
  --color-secondary:#46b5d1;
}


@font-face {
  font-family: 'Helvetica';
  src: url('../assets/fonts/HelveticaNeue.ttc');
  font-display: swap;
}
* {
  font-family: 'Helvetica', sans-serif !important;
  font-size: 18px; 
}

body {
  background: var(--color-bg-1); 
  color: var(--color-text) !important ; 
  border-right:4px solid var(--color-primary-1);}
  ::-webkit-scrollbar {width: 0px;background: transparent;}
  ::-webkit-scrollbar-thumb {background: var(--color-primary-1);
}

.m-tb-50 {margin: 50px auto !important;}
.m-tb-100 {margin: 100px auto !important;}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.grid-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 600px) {
  .grid-2col {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    align-items:center;
    column-gap: 50px;
  }
  .grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-gallery img:nth-child(4n+1) {
    grid-column: auto / span 2;
    grid-row: auto / span 2;
  }
}

h1,h2,h3,h4,h5,h6 {
  color:var(--color-text)!important;
  font-weight: bold !important;
}

* .highlight {
  background: var(--bg-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: inherit;
}
.subtitle {
  font-size:18px ;
}

footer a {color: inherit !important;}



/* SIDE NAV */
.sidenav { background: var(--color-bg-2) !important; color: var(--color-text) !important; width: calc(100vw - 4px) !important;}
.sidenav  a { color: var(--color-text) !important; font-size: 60px !important; line-height: 90px !important; height: auto !important; }
.sidenav-overlay {background-color: rgba(0,0,0,0) !important;}
.sidenav span {width: 100%;text-align: center;}
.sidenav li {line-height: inherit;}

.btn-nav {position: fixed;  width: 50px;  height: 100px;  right: 3px; top:80vh;  z-index: 9999;  background-image: url(../assets/side_btn.svg);padding-left: 10px; cursor: pointer;}
.line{fill:none;stroke:#fff;stroke-width:6;transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}.line1{stroke-dasharray:60 207;stroke-width:6}.line2{stroke-dasharray:60 60;stroke-width:6}.line3{stroke-dasharray:60 207;stroke-width:6}.opened .line1{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}.opened .line2{stroke-dasharray:1 60;stroke-dashoffset:-30;stroke-width:6}.opened .line3{stroke-dasharray:90 207;stroke-dashoffset:-134;stroke-width:6}
/* ---- */

/* LOGO */
#logo-container {
  content: url("../assets/la-ola-logo.svg");
  width: 50px;
  opacity: 0.7;
  transition: 0.3s;
  margin: 10px 0;
}
#logo-container:hover {opacity: 1;transition: 0.5s;}

.sidenav #logo-container {margin: 10px auto}

@media (min-width: 600px) {
  #logo-container {
    margin: 20px 0 0 20px;
  }
  footer #logo-container {
    margin: 0px;
  }
  .btn-nav {
    top:0;
  }
}
/* ---- */



footer { background: transparent!important;color: var(--color-text)!important; }
footer .socialicon img { width: 40px; margin: 2px;}
footer img {filter: opacity(0.5);}
footer .socialicon img:hover {filter:invert(55%) sepia(85%) saturate(3638%) hue-rotate(329deg) brightness(110%) contrast(125%);cursor: pointer;}
footer .footer-copyright { font-size: 12px !important; color: var(--color-text) !important; opacity: 0.3;}

/* TEAM SECTION */
#team .card {
  background-color: var(--color-bg-1);
}

/* SERVICE */
.hiddenContent {display: none;}

#service .service_wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 20px;
  grid-auto-rows: 1fr;
  margin-bottom: 20px;
}
@media (min-width: 600px) {
  #service .service_wrapper {
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
  }
  #service .service_wrapper .grid_col_1_3{
    grid-column: 1 / 3;
  }
  #service .service_wrapper .grid_col_2_4{
    grid-column: 2 / 4;
  }
}
#service .card { 
  background: var(--color-bg-3)!important;
  border-radius: 10px !important;
  cursor: pointer;
  margin: 0;
}
#service .card h5 {
  color:rgba(256,256,256,0.7) !important;
}
.card::after{ content:''; width: 80%; height: 4px; background: var(--color-primary-1); position:absolute; bottom:0px; margin:0 10%; border-radius:20px 20px 0 0; opacity: 0; transition: 1s;}  
.card:hover::after { opacity: 1; transition: 0.5s;}

@media only screen and (max-width: 992px) {
  [data-inviewport="fade"]::after { opacity: 0;transition: 0.5s;}
  [data-inviewport="fade"].is-inViewport::after{ transition: 3s;opacity: 1;}
  /*.service_wrapper [data-inviewport="fade"]:nth-child(odd) {left: calc(100vw - 60px);transition: 0.5s;}
  .service_wrapper [data-inviewport="fade"]:nth-child(even) {left:calc((100vw - 60px) * -1);transition: 0.5s;}
  .service_wrapper [data-inviewport="fade"].is-inViewport{ left:0;transition: 2s;opacity: 1;}
  */
}



.tabs { background: transparent !important;}
.tabs .tab a { color:var(--color-primary-1) !important; opacity: 0.5;}
.tabs .tab a:focus, .tabs .tab a:focus.active { color:var(--color-primary-1) !important; opacity: 1; background-color: transparent !important;}
.tabs .tab a:hover, .tabs .tab a.active { color:var(--color-primary-1) !important; opacity: 1; background-color: transparent !important;}
.tabs .indicator { height: 3px; background: var(--bg-primary) !important; margin: 0 20px; border-radius: 4px 4px 0 0; }


.iconbg { width: 100px; height: 100px; padding: 0px; margin: 0 20px 0px 0; }
.i1 { content:url("../assets/icons/montana.svg");}
.i2 { content:url("../assets/icons/design.svg");}
.i3 { content:url("../assets/icons/develop.svg"); }
.i4 { content:url("../assets/icons/photovideo.svg"); }
.i5 { content:url("../assets/icons/ecommerce.svg"); }
.i6 { content:url("../assets/icons/inbound.svg"); }
.i7 { content:url("../assets/icons/uxui.svg"); }
.i8 { content:url("../assets/icons/crm.svg"); }
.i9 { content:url("../assets/icons/sem.svg"); }
.i10 { content:url("../assets/icons/keyword.svg"); }
.i11 { content:url("../assets/icons/seo.svg"); }
.i12 { content:url("../assets/icons/analytics.svg"); }
.i13 { content:url("../assets/icons/social.svg"); }
.i14 { content:url("../assets/icons/email.svg"); }
.i15 { content:url("../assets/icons/bbdd.svg"); }
.i16 { content:url("../assets/icons/flipp.svg"); }
.i17 { content:url("../assets/icons/inbound.svg"); }
/* ---- */


/* BTNs STYLE */
h2 a,h3 a,h4 a {font-size: 14px; float:right; color:var(--color-secondary);}
  .btn {background: var(--bg-primary)!important; border-radius: 50px !important;padding: 15px 30px !important;line-height: initial !important; height:auto !important;margin: 10px 10px 10px 0;}
  .btn.alter { background: transparent !important; border: 1px solid var(--color-text); color:var(--color-text)}
/* ---- */






#index-banner h1 { 
  font-size: 2.4rem;
  text-transform: uppercase;
  font-weight: bold; 
}
#index-banner, #errorpage {
  height: 90vh;
}
@media (min-width: 600px) {
  #index-banner h1 {
    font-size: 6.2rem;
  }
}




.bg_2 { padding: 50px 0 !important;background-color:var(--color-bg-2); }

.wave {display: block; width: 100%; height: 60px; max-height: 60px; margin: 0; z-index:5; bottom:0; position:relative; left:0px; float:left; transform: rotate(180deg); top: -51px;}
.wave2 {display: block; width: 100%; height: 60px; max-height: 60px; margin: 0; z-index:5; bottom:0; position:relative; left:0px; float:left;}
.parallax1 > use{animation: move-forever1 10s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.parallax2 > use{animation: move-forever2 8s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.parallax3 > use{animation: move-forever3 6s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.parallax4 > use{animation: move-forever4 4s linear infinite; &:nth-child(1){animation-delay: -2s;}}
@keyframes move-forever1{0%{transform: translate(85px, 0%);}100%{transform: translate(-90px, 0%);}}@keyframes move-forever2{0%{transform: translate(-90px, 0%);}100%{transform: translate(85px, 0%);}}@keyframes move-forever3{0%{transform: translate(85px, 0%);}100%{transform: translate(-90px, 0%);}}@keyframes move-forever4{0%{transform: translate(-90px, 0%);}100%{transform: translate(85px, 0%);}}

.wave .parallax1 use, .wave2 .parallax1 use {fill: var(--color-text) !important;}
.wave .parallax2 use, .wave2 .parallax2 use {fill: var(--color-bg-3) !important;}
.wave .parallax3 use, .wave2 .parallax3 use {fill: var(--color-bg-2) !important;}
.wave .parallax4 use, .wave2 .parallax4 use {fill: var(--color-bg-1) !important;}


/* CTA Contacto */
#contact .container {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 50px;
  grid-auto-rows: 1fr;
  align-items:center;
}
@media (min-width: 600px) {
  #contact .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ---- */


/* PORTFOLIO HOME */
.swiper-container {
  width: 100%;
  min-width: 300px;
  height: 660px;
  max-height: 534px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: var(--color-bg-2);
  border-radius: 20px;
  width: 300px !important;
  background-size: cover;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}



/* PRICE LIST */
.price_list {
  font-size: 1.3em;
  color: var(--main-title-color)!important;
}
.price_list tr {
  border-bottom: 1px solid #555555;
}
.price_list tr td:last-child {
  text-align: right;
}


table.rrss-price-table {
  margin-bottom: 30px;
}
table.rrss-price-table tbody tr{
  border-bottom: 1px solid var(--color-bg-3);
  text-align: center;
}
table.rrss-price-table thead th {
  text-align: center;
  background: var(--color-primary-1);
  border-radius: 10px 10px 0 0;
  text-transform: uppercase;
}
table.rrss-price-table tfoot th {
  text-align: center;
  border: none;
}



/* PREGUNTAS FRECUENTES */
.collapsible {
  border:none !important;
}
.collapsible-header {
  background: transparent !important;
  border-bottom:none !important;
}




/* SERIVICE SECTION */
#service-banner {
  display: grid;
  height: 95vh;
  margin-top: -65px;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 1fr;
  align-items:center;
}

#service-banner .container h1 {
  margin: 0;
}
#service-banner .container h3 {
  font-size: 1.92rem;
}

#service-banner .shadow {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom:0;
  background-color: var(--color-bg-1);
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}


@media (min-width: 600px) {
  #service-banner {
    height: 60vh;
  }
  .mouse {
    display: none;
  }
}
/* ---- */









/* SUCCESS SECTION */
#success-banner {
  margin-top: -65px;
}
#success-banner .container {
  height: 150px;
  margin-top: 175px;
}
#success-banner .container h1 {
  margin: 0;
}
#success-banner .container h3 {
  font-size: 1.92rem;
}


/* Class for when element is above threshold*/
.pin-top {
  position: relative;
}

/* Class for when element is below threshold*/
.pin-bottom {
  position: relative;
}

/* Class for when element is pinned */
.pinned {
  position: fixed !important;
}
.block{
  height: 100vh;
  position: relative;
}
.block nav {
  box-shadow: none !important;
  background-color: transparent !important;
  width: calc(100vw - 4px) !important;
}
.block .wrapper_grid {
  display: grid;
  height: 100vh;
}
.block .wrapper_grid .container{
  grid-template-columns: repeat(1, 1fr);
  align-self: center;
}
.pushpin-wave {
  position: absolute !important;
}

.wave_top_push_1 {display: block; width: 100%; height: 60px; max-height: 60px; margin: 0; z-index:5; bottom:0; position:relative; left:0px; float:left; transform: rotate(180deg);}
.wave_top_push_1 .parallax1 use {fill: var(--color-text) !important;}
.wave_top_push_1 .parallax2 use {fill: var(--color-bg-3) !important;}
.wave_top_push_1 .parallax3 use {fill: var(--color-bg-2) !important;}
.wave_top_push_1 .parallax4 use {fill: var(--color-bg-1) !important;}

.wave_top_push_1 .parallax1 > use{animation: move-forever1 12s linear infinite; &:nth-child(1){animation-delay: -2s;} }
.wave_top_push_1 .parallax2 > use{animation: move-forever2 10s linear infinite; &:nth-child(1){animation-delay: -2s;} }
.wave_top_push_1 .parallax3 > use{animation: move-forever3 8s linear infinite; &:nth-child(1){animation-delay: -2s;} }
.wave_top_push_1 .parallax4 > use{animation: move-forever4 6s linear infinite; &:nth-child(1){animation-delay: -3s;} }


.wave_top_push_2 {display: block; width: 100%; height: 60px; max-height: 60px; margin: 0; z-index:5; bottom:0; position:relative; left:0px; float:left; transform: rotate(180deg);}
.wave_top_push_2 .parallax1 use {fill: var(--color-bg-3) !important;}
.wave_top_push_2 .parallax2 use {fill: var(--color-bg-1) !important;}
.wave_top_push_2 .parallax3 use {fill: var(--color-bg-3) !important;}
.wave_top_push_2 .parallax4 use {fill: var(--color-bg-2) !important;}

.wave_top_push_2 .parallax1 > use{animation: move-forever1 14s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.wave_top_push_2 .parallax2 > use{animation: move-forever2 12s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.wave_top_push_2 .parallax3 > use{animation: move-forever3 10s linear infinite; &:nth-child(1){animation-delay: -2s;}}
.wave_top_push_2 .parallax4 > use{animation: move-forever4 8s linear infinite; &:nth-child(1){animation-delay: -3s;}}













.mouse{
  margin: 100px auto;
  margin-bottom: -100px;
  width: 25px;
}.mouse-icon{
   width: 25px;
   height: 45px;
   border: 2px solid rgba(256,256,256,0.5);
   border-radius: 15px;
   cursor: pointer;
   position: relative;
   text-align: center;
}.mouse-wheel{
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  background-color: white;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
 -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down;
}
@-webkit-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@-moz-keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}@keyframes wheel-up-down {
	0% {
	    margin-top: 2px;
	    opacity: 0;
	}
	30% {
	    opacity: 1;
	}
	100% {
	    margin-top: 20px;
	    opacity: 0;
	}
}