/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */
 *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-word-wrap: break-word;
  -moz-word-wrap: break-word;
  -ms-word-wrap: break-word;
  -o-word-wrap: break-word;
  word-wrap: break-word;
}

html{
  overflow-x: hidden;
  background-color: #ffffff;
}

a[href="http://www.faboba.com"]{
  display: none !important;
  visibility: hidden !important;
 }

/* CSS */
.color-1 {
  color: #3cb4e7 !important;
}
.color-2 {
  color: #76c9e0 !important;
}
.color-3 {
  color: #a8b7d7 !important;
}
.color-4 {
  color: #b578ba !important;
}
.color-5 {
  color: #d4a1c7 !important;
}

/* CSS Variables */
:root {
  --color-1: #3cb4e7;
  --color-2: #76c9e0;
  --color-3: #a8b7d7;
  --color-4: #b578ba;
  --color-5: #d4a1c7;
}

body.rd-home {
  background-image: url('../../../images/slideshow/fondo/background.jpg');
  background-attachment: fixed;
  background-size: auto;
  background-position: 50%, 50%;
}

.uk-block-default {
    background: hsl(40deg 27% 98% / 95%);
}


 /*HEADER*/

.uk-offcanvas-bar {
    background: var(--color-1);
}

#offcanvas ul.uk-nav > li > a {
    color: #ffffff;
}

html .uk-nav.uk-nav-offcanvas > li.uk-active > a {
    background: var(--color-4);
}

.menu .uk-navbar-nav > li > a{
  height: 35px;
  line-height: 35px;
  font-weight:600;
}
.menu .uk-navbar-nav > li > a::before {
    bottom: 0;
    height: 2px;
}

.menu .uk-navbar-nav > li > a.activo{
  color: #333333 !important;
}

a.tm-logo > img {
    width: 100%;
    max-width: 200px;
}

@media screen and (min-width: 768px){
  .tm-navbar-default.tm-navbar-container:not(.uk-active) .tm-logo-small  img {
      display: none;
  }
}

.tm-navbar-default.tm-navbar-container .tm-logo-small  img {
    width: 100%;
    max-width: 200px;
}

.tm-navbar-default.tm-navbar-container.uk-active .uk-container > .uk-flex {
    justify-content: space-between;
}

.tm-navbar-default.tm-navbar-container.uk-active {
    background: #fbfaf8;
    box-shadow: 0px 0px 10px 0px #eeeeee;
}

.header {
    position: absolute;
    width: 100%;
    z-index: 1;
    padding: 5px 0px;
}



/*SLIDESHOW*/
.mod_slideshow .uk-overlay-panel div > img {
    width: 100%;
    max-width: 350px;
    border-radius: 50%;
    border: 15px solid #eeeeee;
    box-shadow: 0px 0px 21px 0px #cccccc;
}

.mod_slideshow .uk-overlay-panel.uk-overlay-background.uk-overlay-fade {
   border: 0px;
   padding: 0px 25px;
   background: transparent;
}

.mod_slideshow .uk-overlay-panel.uk-overlay-background.uk-overlay-fade > div {
    height: 85%;
    display: flex;
    align-items: end;
}


/*TESTIMONIO*/

.rd-home div#tm-top-d {
    background: linear-gradient(0.25turn, #3cb4e7, #6db7d9, #997ad1, #d78eba, #f5c7e0);
}

.mod_testimonios {
    padding-top: 50px !important;
}

.mod_testimonios h3.uk-panel-title {
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.mod_testimonios h3.uk-panel-title::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    background: #ffffff;
    height: 3px;
    width: 160px;
    transform: translate(-50%, 0%);
}

div.yoo-zoo.rating {
    display: flex;
    justify-content: center;
}
div.yoo-zoo.rating > div{
     background-position: 3px 3px !important;
}

/*REDES*/
ul.uk-list.uk-flex.redes > li:not(:last-child) {
  margin-right: 15px;
}

ul.uk-list.uk-flex.redes > li > a {
  border-radius: 25px;
  background: var(--color-4);
  color: #ffffff;
  border-color: var(--color-4);
}

ul.uk-list.uk-flex.redes > li > a:hover{
  border-color: var(--color-5);
}

ul.uk-list.uk-flex.redes > li > a::after{
  background: var(--color-5);
}

div#tm-footer {
    background: var(--color-1);
    padding: 25px 0px;
}

.tm-footer p {
    margin: 0px;
  color:#ffffff;
}

/*PORTFOLIO*/
.uk-tab > li > a {
    color: #444444;
    font-weight: 500;
    text-transform: capitalize;
    font-size: 16px;
}

.uk-tab > li.uk-active > a {
    background: #b375b8;
    color: #ffffff;
}

ul#portfolio {
    max-height: 780px;
    overflow-y: auto;
}

/* Para navegadores WebKit (Chrome, Safari) */
ul#portfolio::-webkit-scrollbar {
    width: 12px; /* Ancho de la barra de desplazamiento */
}

ul#portfolio::-webkit-scrollbar-track {
    background: rgb(179 117 184 / 80%); /* Color de fondo de la pista */
}

ul#portfolio::-webkit-scrollbar-thumb {
    background: rgb(179 117 184 / 80%); /* Color de la barra de desplazamiento */
    border-radius: 6px; /* Bordes redondeados */
}

ul#portfolio::-webkit-scrollbar-thumb:hover {
    background: rgb(179 117 184 / 100%); /* Color de la barra de desplazamiento al pasar el ratón */
}

/* Para Firefox */
ul#portfolio {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: rgb(179 117 184 / 80%) #e7e7e7; /* Color de la barra de desplazamiento y de la pista */
}

/*SERVICIOS*/
.mod_servicios .uk-panel.uk-panel-hover {
  padding: 0px;
  padding-bottom: 25px;
  transition: all 0.3s ease-in-out 0s;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgb(204 204 204 / 80%);
}

.mod_servicios .uk-panel.uk-panel-hover > div + h3,
.mod_servicios .uk-panel.uk-panel-hover > div + h3 + div,
.mod_servicios .uk-panel.uk-panel-hover > div + h3 +div + p {
    padding: 0px 10px 0px 10px;
}

.mod_servicios >  div.uk-grid > div {
    margin-top: 35px;
}

.mod_servicios .uk-panel.uk-panel-hover:hover {
    background:#ffffff;
    box-shadow: 0px 0px 21px 0px #cccccc;
}


.mod_nosotros h3.uk-h2,
.mod_servicios h3.uk-panel-title,
.mod_portfolio h3.uk-panel-title,
.mod_contactanos h3.uk-panel-title{
    color: var(--color-1);   
    font-size: 36px;
    position: relative;
  	line-height: 40px;
}

.mod_nosotros,
.mod_servicios {
    padding-top: 35px;
  
}
.mod_nosotros h3.uk-h2::before,
.mod_servicios h3.uk-panel-title::before,
.mod_portfolio h3.uk-panel-title::before,
.mod_contactanos h3.uk-panel-title::before{
    content:'';
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 4px;
    width: 50px;
    background: var(--color-4);
}
.mod_servicios .uk-panel.uk-panel-hover > div > img {
    width: 100%;
    height: 240px;
    object-fit: contain;
    padding: 25px;
    transition: all 0.3s ease-in-out 0s;
    transform: scale(0.7);
}

.mod_servicios .uk-panel.uk-panel-hover:hover > div > img {
    transform: scale(0.9);
}

.mod_servicios h3.uk-h3 > a {
    color: #333333;
}

/*NOSOTROS*/
.mod_nosotros h3.uk-h2{
  margin-bottom:35px;  
}

.about-content .uk-panel-box {
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
}

.about-content .uk-panel-box i.uk-icon {
    font-size: 24px;
    color: #52b6e4;
    transition: all 0.3s;
}

.about-content .a-icon {
    margin-right: 20px;
}

.about-content .uk-panel-box:hover i.uk-icon{
     font-size: 26px;
 }

 .about-content .uk-panel-box:hover a.link-line{
     font-size: 18px;
 }

 .about-content a.link-line {
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s;
}

.about-content .uk-panel-box::before {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background: #61b8e1;
    transition: all 0.3s;
}

.about-content .uk-panel-box:hover::before {
    bottom: 0;
}

.mod_nosotros .uk-grid.uk-grid-match .uk-flex > h3 {
    margin-right: 15px;
    font-size: 51px;
    margin-bottom: 0px;
    color: #333333;
    line-height: 54px;
    font-weight: 600;
}

.mod_nosotros .uk-grid.uk-grid-match .uk-flex > p {
    font-weight: 600;
    margin: 0px;
}

.mod_nosotros .uk-margin > h3 {
    margin: 0px;
}

.mod_nosotros .uk-margin > p {
    margin: 10px 0px;
}

.mod_nosotros img {
    border-radius: 20px;
}

/*Whatsapp Icon Float*/
.ws-content {
    position: fixed;
    right: 5%;
    bottom: 5%;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #3fa443;
    box-shadow: 2px 2px 30px 4px #c9c9c9d4;
}

.ws-content > a {
    color: #ffffff;
    font-size: 28px;
}

/*TESTIMONIO*/
.mod_testimonios .uk-margin > img {
    width: 100%;
    max-width: 130px;
    border: 4px solid #ffffff;
    border-radius: 50%;
}

.mod_testimonios .uk-margin > h4 {
    margin: 30px 0px 0px 0px;
}

.mod_testimonios .uk-margin > h4 + p {
    margin: 0px;
}

.mod_testimonios .uk-overlay-hover:hover h3 {
    color:var(--color-1);
}
 .mod_testimonios .uk-overlay-hover:hover h4, .mod_testimonios .uk-overlay-hover:hover p {
    color:var(--color-4);
}

.mod_testimonios .uk-overlay-hover h3, .mod_testimonios .uk-overlay-hover h4, .mod_testimonios .uk-overlay-hover p {
    transition: all 0.3s;
}

.mod_testimonios .uk-overlay-hover {
    transition: all 0.3s;
    border-radius:15px;
}

.mod_testimonios .uk-overlay-hover:hover {
    background: #ffffff;
}

.uk-button {
    border-radius: 20px;
    line-height: 40px;
    min-height: 35px;
    padding: 0px 25px;
    font-size: 16px;
}

.mod_testimonios .uk-slidenav-previous {
    left: -30px;
}

.mod_testimonios .uk-slidenav-next {
    right: -30px;
}

/*PORTFOLIO*/
.mod_portfolio figure.uk-overlay.uk-overlay-hover > .uk-overlay-panel {
    background: rgb(82 178 227 / 50%);
}

.mod_portfolio figure.uk-overlay.uk-overlay-hover > .uk-overlay-panel h3 {
    color: #ffffff;
    font-size: 22px;
    margin: 0;
}

body div#tm-bottom-a {
    padding-top: 100px;
}

.mod_portfolio h3.uk-panel-title + div {
    margin-top: 50px;
}
.uk-overlay a.uk-button:hover {
    color: #ffffff !important;
}

/*CONTACTOS*/

div#uk-contacto form.uk-form input, div#uk-contacto form.uk-form textarea {
    width: 100%;
    border: 1px solid #cccccc !important;
    padding: 0px 6px;
    border-radius: 5px;
}

div#uk-contacto form.uk-form .uk-form-controls {
    margin-bottom: 15px;
}

div#uk-contacto form.uk-form input::placeholder,
div#uk-contacto form.uk-form textarea::placeholder {
    color: #999999;
}

div#uk-contacto form.uk-form input {
    height: 35px;
}

.mod_servicios label {
    color: var(--color-1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.mod_servicios label > input {
    position: relative;
    width: 40px;
    appearance: none;
    height: 15px;
    margin-left: 15px;
}

.mod_servicios label > input::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #d9d9d9;
    border-radius: 15px;
}

.mod_servicios label > input::before {
    content: '';
    width: 15px;
    height: 15px;
    background: #9E9E9E;
    position: absolute;
    z-index: 2;
    left: 0;
    right: auto;
    border-radius: 50%;
    transition: all 0.3s ease-in-out 0s;
}

.mod_servicios label > input:checked::before {
    background: #03A9F4;
    right: auto;
    left: 70%;
}

#rd-servicios input, #rd-servicios select {
    width: 1000%;
}

#rd-servicios .uk-form-controls {
    margin-bottom: 15px;
}

div#modalForm > div {
    width: 100%;
    max-width: 380px;
}


#selectServ option:checked {
    background-color: var(--color-4);
}

#selectServ option {padding: 5px 5px;}

.mod_servicios > div.uk-grid {
    justify-content: center;
}

a.uk-button::before {
    background: var(--color-4) !important;);
}

a.uk-button:hover {
    border-color: var(--color-4);
}

@media screen and (max-width: 768px){
    .mod_portfolio ul.uk-tab {
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        overflow-x: auto;
    }
    
    .mod_portfolio ul.uk-tab a {
        min-width: max-content;
    }
}

.uk-modal-dialog p.uk-text-large {
    color: var(--color-1);
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 25px;
}

.uk-modal-dialog h1 {
    margin-bottom: 0px;
}


/* ANIMACION SVG */

.circle{fill:none;stroke:#3cb4e7; stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}

        .circle-dash{fill:none;stroke:#3cb4e7; stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}

        .check{fill:none;stroke:#b578ba; stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

        .check-dash{fill:none;stroke:#b578ba; stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}

        .check {

          stroke-dasharray: 60 100;

          animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;

          -webkit-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;

          -moz-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;

          -o-animation: check 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards 0.15s;

          opacity: 0;

        }



        @-webkit-keyframes check {

          from {stroke-dashoffset: 60;

          opacity: 1;}



          to {stroke-dashoffset: 00;

          opacity: 1;}



        }



        @-moz-keyframes check {

          from {stroke-dashoffset: 60;

          opacity: 1;}



          to {stroke-dashoffset: 00;

          opacity: 1;}



        }



        @keyframes check {

          from {stroke-dashoffset: 60;

          opacity: 1;}



          to {stroke-dashoffset: 00;

          opacity: 1;}



        }



        .check-dash {

          stroke-dasharray: 10 100;

          animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;

          -webkit-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;

          -moz-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;

          -o-animation: check-dash 1.2s cubic-bezier(0.5, 0, 0.6, 1) forwards;

        }



        @-webkit-keyframes check-dash {

          from {stroke-dashoffset: 120;}



          to {stroke-dashoffset: 45;}



        }



        @-moz-keyframes check-dash {

          from {stroke-dashoffset: 120;}



          to {stroke-dashoffset: 45;}



        }



        @keyframes check-dash {

          from {stroke-dashoffset: 120;}



          to {stroke-dashoffset: 45;}



        }



        .circle {

          stroke-dasharray: 300 300;

          animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;

          -webkit-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;

          -moz-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;

          -o-animation: circle 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.15s;

          opacity: 0;

        }



        @-webkit-keyframes circle {

          from {stroke-dashoffset:300;

          opacity: 1;}



          to {stroke-dashoffset:0;

          opacity: 1;}



        }



        @-moz-keyframes circle {

          from {stroke-dashoffset:300;

          opacity: 1;}



          to {stroke-dashoffset:0;

          opacity: 1;}



        }



        @keyframes circle {

          from {stroke-dashoffset:300;

          opacity: 1;}



          to {stroke-dashoffset:0;

          opacity: 1;}



        }



        .circle-dash {

          stroke-dasharray: 10 300;

          animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;

          -webkit-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;

          -moz-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;

          -o-animation: circledash 1.5s cubic-bezier(0.5, 0, 0.5, 1) forwards 0.05s;

          opacity: 0;

        }



        @-webkit-keyframes circledash {

          from {stroke-dashoffset:320;

          opacity: 1;}



          to {stroke-dashoffset: 20;

          opacity: 1;}



        }



        @-moz-keyframes circledash {

          from {stroke-dashoffset:320;

          opacity: 1;}



          to {stroke-dashoffset: 20;

          opacity: 1;}



        }



        @keyframes circledash {

          from {stroke-dashoffset:320;

          opacity: 1;}



          to {stroke-dashoffset: 20;

          opacity: 1;}





        }