/* 
Theme Name: Playa Projects - Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

:root {
    --dgray: #1b1b1b;
    --green: #0aa763;
    --teko: "Teko", sans-serif;
    --rob: "Roboto", sans-serif;
    --animated: all .3s ease-in-out;
}


.teko {font-family: var(--teko);}
.rob {font-family: var(--rob);}
.green {color: var(--green);}
.noSpace {margin: 0px; padding: 0px;}
.noSpace p {margin: 0px; padding: 0px;}


.sidenav {
    height: auto;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10px;
}

.sidenav .menu-item-has-children .sub-menu {left: auto; right: 0px; width: 370px;}

.sidenav .menu-item-2119 > a:after, .sidenav .menu-item-2160 > a:after {
    display: inline-block;
    content: '-';
    margin-left: 30px;
    bottom: 5px;
    margin-right: 0px;
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 900;
    content: "\f078";
}

.sticky-top {z-index: 98;}


/*Header*/
.header {background: var(--dgray); padding: 15px 0px 10px 0px;}
.headerSocials a {background: transparent;font-size: 24px;padding: 8px 10px; margin: 0px 0px; border-radius: 8px;color: var(--green);border: 2px solid #2f2f2f; transition: var(--animated);}
.headerSocials a:hover {background: var(--green); color: var(--dgray);border: 2px solid var(--green);}
.logo {width: 125px;}



/*Menu*/
.menu-item a {font-family: var(--teko);text-transform: uppercase;color: #4d4d4d;margin: 0px 20px;font-size: 32px; line-height: 40px; transition: var(--animated);}
.current-menu-item a {color: var(--green);}
.menu-item a:hover {color: white}

#menu-item-2160:hover {cursor: none;}

.navbar li:after {content: '';display: block;width: 0%;height: 3px;background: transparent;margin: 0 auto;transition: var(--animated);}
.navbar li:hover:after {width: 80%; background: var(--green);}

.menu-item-has-children .sub-menu {display: block;position: fixed;top: 62px;opacity: 0;padding: 0px;width: 400px;z-index: -1;height: 0;transition: var(--animated);}
.menu-item-has-children .sub-menu li {background: var(--dgray);color: white;padding: 8px 0px;list-style-type: none;transform: scaleY(0);transition: var(--animated);transform-origin: top;}
.menu-item-has-children .sub-menu li:after {display: none;}
.menu-item-has-children .sub-menu li a:before {display: inline-block;content: '-';margin-left: 0px;margin-right: 5px;font-family: "Font Awesome 5 Free";font-size: 15px;font-weight: 900;color: var(--green);content: "\f054";opacity: 0;transition: .25s linear;}
.menu-item-has-children:hover .sub-menu {display: block;position: fixed;padding: 0px;opacity: 1;height: auto;z-index: 1;}
.menu-item-has-children:hover .sub-menu li {transform: scaleY(1.0);}
.menu-item-has-children .sub-menu li a:hover:before {margin-left: 5px;opacity: 1;}
.navbar-toggler {border: 2px solid white; transition: var(--animated);}
.navbar-toggler:hover, .navbar-toggler:focus, .navbar-toggler:active {background: white; color: var(--green); outline: none; box-shadow: none;}
.navbar-toggler-icon {width: auto; height: auto; color: white;}
.navbar-toggler:hover .navbar-toggler-icon, .navbar-toggler:focus .navbar-toggler-icon, .navbar-toggler:active .navbar-toggler-icon {color: var(--green);}
.sidenav .menu-principal-container {margin-top: 10px;}

.fa-window-close {color: var(--green);}


.side-titulo {color: #d1d1d1;font-family: var(--teko);font-size: 22px;letter-spacing: 0px;text-transform: uppercase;font-weight: 500;}
.sideSocials a {color: #646464;font-family: var(--rob);font-weight: 500;font-size: 18px;}
.sideSocials a i {color: var(--green);}



/* Banner */

.carousel {height: 45vh;}
.carousel-inner {overflow: visible;}
.carousel-control-prev,
.carousel-control-next {border: none;height: 85px;width: 85px;margin: auto auto -20px auto;border-radius: 100px; transition: var(--animado); background:#8b8b8b; outline:none; }
.carousel-control-prev{padding: 10px 15px 5px 10px; left: -15px;transform: scale(.40);}
.carousel-control-next{padding: 10px 10px 5px 15px; right: -15px;transform: scale(.40);}
.carousel-control-prev:hover,.carousel-control-prev:active,.carousel-control-prev:focus,
.carousel-control-next:hover,.carousel-control-next:active,.carousel-control-next:focus {background: var(--green); outline: none;}
.carousel-control-next-icon, .carousel-control-prev-icon {width: 2.5rem; height: 2.5rem;}

.carousel-indicators {bottom: -40px;}
.carousel-indicators .active {background-color: var(--green) !important;}

.floating {animation-name: floating;animation-duration: 3s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;margin-left: 30px;margin-top: 5px;}

.carousel-caption {right: 0%; padding: 10px;}

.captionOne {top: 50%; left: 0%; text-align: left;}
.captionOne .desc {margin: 0px 0px 0px 0px;}
.captionOne .title {font-size: 45px; line-height: 45px; font-weight: 500;text-transform: uppercase;}
.captionOne .underGreen {text-decoration: underline;text-decoration-color: var(--green);text-underline-offset: 10px;}
.captionOne .subTitle {font-size: 22px;font-weight: 100;}

.captionTwo {top: 15%; left: 0%; text-align: left;}
.captionTwo .desc {margin: 0px 0px 0px 0px;background: #1b1b1b73;padding: 10px; transition: var(--animated);}
.captionTwo .desc:hover {background:#1b1b1b99; }
.captionTwo .title {font-size: 28px; line-height: 30px; font-weight: 500;text-transform: uppercase;}
.captionTwo .underGreen {text-decoration: underline;text-decoration-color: var(--green);text-underline-offset: 10px;}
.captionTwo .subTitle {font-size: 18px;font-weight: 100;}
.captionTwo .subTitle3{font-size: 18px; font-weight: 300;}

.buttonBannergray {margin-top: 15px;background: var(--dgray);font-size: 16px;font-family: var(--rob);font-weight: 500;color: white;border-radius: 100px;padding: 5px 25px;letter-spacing: 2px;border: none; transition: var(--animated);}
.buttonBannergray:hover, .buttonBannergray:active, .buttonBannergray:focus {padding: 5px 30px; background:var(--green); color:var(--dgray); }

.clientesLogo {position: relative;width: auto; padding: 15px;}
.clientesLogo .imgHover {padding:15px;position: absolute;top: 0;right: 0;left: 0;bottom: 0;object-fit: contain;opacity: 0;transition: var(--animated);}
.clientesLogo:hover .imgHover {opacity: 1;background-color: #f7f7f7;}
.clientesLogo.simple:hover .imgHover {opacity: 1;background-color: var(--dgray);}
.w75 {width: 75%;margin: 0 auto;}

/* Nosotros */
.underGreen {text-decoration: underline;text-decoration-color: var(--green);text-underline-offset: 10px;}
.listValores li{list-style-type: none; margin: 10px 0px; line-height: 24px;}
.listValores b {font-family: var(--teko);text-transform: uppercase;font-size: 22px;letter-spacing: 1px;font-weight: 600;}
.valoresSubtitle .green {color: var(--green);font-size: 26px;font-weight: 500;letter-spacing: 1px;}

/* Servicios */
.textoInvertido .elementor-widget-container {transform: rotate(-90deg); margin: 0px 0px 5px 0px;}
.servicesCards {transition: var(--animated); border-radius: 5px; border: 4px solid white;}
.servicesCards:hover {background: var(--green); border-radius: 30px; border: 4px solid var(--green); filter: drop-shadow(0px 3px 5px rgb(0,0,0,.4));}
.servicesCards:hover .icon i {color: white;}
.servicesCards .title .elementor-heading-title {min-height: 55px;}
.servicesCards:hover .title .elementor-heading-title {color: white;}
.servicesCards .text {transition: var(--animated);}
.servicesCards:hover .text {color: white !important;}

.servicesCards .cardsBoton .elementor-button {width: 75%; height: auto; transition: var(--animated); opacity: 1;z-index: -1;}
.servicesCards:hover .cardsBoton .elementor-button {width: 95%; height: auto; opacity: .75;z-index: 2; transition: var(--animated);}
.servicesCards:hover .cardsBoton .elementor-button:hover {opacity: 1; letter-spacing: 2px;}


/* Cursos General */
.cursosBoton .elementor-button {background: var(--green);padding: 15px 30px;border-radius: 10px;border: 4px solid white; transition: var(--animated);}
.cursosBoton .elementor-button:hover {background: white; padding: 15px 45px; border-radius: 100px; border: 4px solid var(--green);}
.cursosBoton .elementor-button:hover .elementor-button-text {color: var(--dgray); letter-spacing: 4px;}
.cursosBoton .elementor-button-text {font-size: 34px;font-weight: 400;letter-spacing: 2px; transition: var(--animated);}
.cursosList a {color: var(--dgray);font-size: 24px;font-family: var(--rob);font-weight: 300;padding: 5px 0px; transition: var(--animated); background: white;}
.cursosList a:hover {background: var(--green); color: white;}
.cursosList a::after {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f053";margin-left: 10px;font-size: 20px;color: #b8b8b8;opacity: 1;transition: var(--animated);}
.cursosList a:hover::after{opacity: 0; margin-left: 5px;}
.cursosList a::before {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f054";margin-right: 15px;font-size: 20px;color: var(--green);opacity: 0;transition: var(--animated);}
.cursosList a:hover::before {opacity: 1; margin-right: 5px;margin-left: -15px;}
.cursosSubtitle .green {color: var(--green);font-size: 26px;font-weight: 500;letter-spacing: 0px;}

.elementor-counter-number {padding-left: 5px;}

/* Estilos Cursos */
.service-item-1 .service-area {position: relative;margin-right: 10px;margin-bottom: 30px;}
.service-item-1 .service-title{font-family: var(--teko);color: #4D4D4D;font-size: 28px;font-weight: 500;line-height: 28px;transition: var(--animated);text-transform: uppercase;}
.service-area:hover .service-title {color: white}  
.service-item-1 .service-content p {font-size: 18px;font-family: var(--rob);font-weight: 400;text-align: left; transition: var(--animated);}
.service-area:hover .service-content p {color: white;} 
.service-content ul li {text-align: left; font-family: var(--rob);}

  .service-item-1 .service-area:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 100%;
    width: 100%;
    border-width: 4px;
    border-color: #4d4d4d;
    border-style: solid;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  
  .service-item-1 .service-area:hover:before {
    left: 10px;
    top: 10px;
  }
  
  .service-item-1 .service-area .service-inner:after {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    opacity: 0;
    z-index: -1;
    background-color: var(--green);
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    -webkit-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transform: perspective(400px) rotateX(-90deg);
    -ms-transform: perspective(400px) rotateX(-90deg);
    transform: perspective(400px) rotateX(-90deg);
  }
  
  .service-item-1 .service-area:hover .service-inner:after {
    opacity: 1;
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
  }
  
  .service-item-1 .service-inner {
    background: #f7f7f7;
    padding: 40px 20px;
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 4%);
    margin-bottom: 10px;
    text-align: center;
    position: relative;
    z-index: 9;
    min-height: 460px;
  }
  
  .service-item-1 .service-icon {
    background: var(--jnj-primary-color);
    color: var(--jnj-white-color);
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 40px;
    display: inline-block;
    margin-bottom: 15px;
  }
  
  .service-item-1 .service-area:hover .service-icon {
    background-color: rgb(255 255 255 / 20%);
  }
  
  .service-item-1 .service-area:hover .service-content p,
  .service-item-1 .service-area:hover .service-title a {
    color: var(--jnj-white-color);
  }

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}


/*Contacto*/
.ligray {color: #979797;font-weight: 300;font-family: var(--rob);font-size: 20px;}
.contactIcons .elementor-icon-list-item,
.contactIcons .elementor-icon-list-item a {transition: var(--animated); padding: 0px; border-radius: 20px;}
.contactIcons .elementor-icon-list-item a:hover {margin-left: 25px; background: #272727; border-radius: 100px;}

/* Contacto*/
.formContacto > p,
.formContacto > div > p {margin: 0px;}
.formContacto input,
.formContacto .wpcf7-select {background: #F0F0F0;border-radius: 10px;border: none;padding: 10px 20px;color: var(--dblue);font-family: var(--rob);}
.formContacto textarea {font-family: var(--rob); border-radius: 10px;}

.formContacto input[type="submit"] {background: var(--green); padding: 10px 30px; color: white; font-size: 16px; font-weight: 500; letter-spacing: 3px; border-radius: 50px; margin-top: 15px; transform-origin: left; transition: var(--animated); opacity: .85; border: var(--green);}
.formContacto input[type="submit"]:hover {padding: 10px 50px; opacity: 1;}
.contactSubtitle {color: #d4d4d4;font-weight: 500;font-size: 28px; font-family: var(--teko);}
.inicioContact span {letter-spacing: 0px;}
.formContacto .wpcf7-response-output {color: white; font-size: 18px; font-weight: 400;}

.not-visible {display: none;}
.visible-pdf {display: flex;}

.wpcf7-spinner {display: block;}
.formDescargas input[type="submit"] {background: transparent;color: white;border: 3px solid var(--green);font-size: 20px;font-family: var(--rob);text-transform: uppercase;font-weight: 500;border-radius: 100px;padding: 10px 30px;letter-spacing: 1px;transition: var(--animated); opacity: .75; margin-top: 25px;}
.formDescargas input[type="submit"]:hover {padding: 10px 45px; background: var(--green); opacity: 1;}

.formDescargas input[type=email], 
.formDescargas input[type=number], 
.formDescargas input[type=tel], 
.formDescargas input[type=text]{border: 1px solid #666;transition: var(--animated);background: #d8d8d8;color: var(--dgray);border-radius: 100px;padding: 12px 15px;font-size: 20px;font-family: var(--rob);font-weight: 500;outline: none;text-align: center;}
#wpcf7-f1584-p1576-o1 .wpcf7-response-output {border-color: #46b450;text-align: center;background: white;color: var(--dgray);font-weight: 600;}


.cardDescarga p {    height: 150px;
    width: 250px;
    background: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; transition: var(--animated);}

.cardDescarga p:hover {border-radius: 75px;}

.cardDescarga a {color: white;font-size: 28px;font-family: var(--teko);letter-spacing: 1px;width: 100%;height: 100%;padding-top: 35px;}

.footer {background: var(--dgray); color: white;}

.tYc {transition: var(--animated); font-family: var(--teko);font-size: 20px;}
.tYc:hover {color: white; letter-spacing: 1px;}




/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .captionOne {top: 5%; left: 0%;}
  .captionTwo {top: 5%; left: 0%;}
  .captionOne .desc {padding: 15px;}
  .captionOne .title {font-size: 50px;}
  .captionOne .subTitle {font-size: 35px;}
  .captionTwo .title {font-size: 42px;}
  .captionTwo .subTitle {font-size: 26px;}
  .cursosList a {font-size: 28px;}

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .contactIcons .elementor-icon-list-item a {padding: 10px 25px;}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .captionOne .desc {padding: 50px 210px 50px 50px;}

  .carousel-control-prev,
  .carousel-control-next {margin: auto;}

  .carousel-control-prev{transform: scale(.65); left: 0px;}
  .carousel-control-next{transform: scale(.65); right: 0px;}

  .captionOne {top: 5%;left: 3%;right: 0;}
  .captionTwo {top: 15%;left: 7%;right: 7%;}
  .captionTwo .subTitle3 {font-size: 32px;}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .carousel-inner {overflow: hidden;}
  .trp-floater-ls {display: none;}

  .carousel-indicators {bottom: 0;}
  .carousel-caption {padding-top: 1.25rem;padding-bottom: 1.25rem;}

  .captionOne {top: 10%; left: 5%; text-align: left;}
  .captionOne .desc {margin: 20px 0px 0px 35px; padding: 20px 0px 0px 0px;}

  .captionTwo {top: 10%; left: 5%; text-align: left;}
  .captionTwo .desc {margin: 20px 0px 0px 35px;background: #1b1b1b73;padding: 35px; transition: var(--animated);}
  .logoBanner {width: 500px;filter: drop-shadow(0px 0px 15px rgb(0,0,0,.5));}

  .captionOne .title{font-size: 55px; line-height: 55px;}
  .captionTwo .title{font-size: 55px; line-height: 55px;}

  .carousel-caption {right: 15%;}

  .captionOne .subTitle {font-size: 36px;font-weight: 100;}
  .captionTwo .subTitle {font-size: 36px;font-weight: 100;}
  .captionTwo .subTitle3{font-size: 30px; font-weight: 300;}

  .captionTwo .desc {padding: 35px;}
  .buttonBannergray {margin-top: 50px;font-size: 22px;font-weight: 500;padding: 12px 35px;}
  .buttonBannergray:hover, .buttonBannergray:active, .buttonBannergray:focus {padding: 12px 55px;}
  .servicesCards .cardsBoton .elementor-button {opacity: 0;}

  .logoBanner {width: 400px;}
  .menu-item a {font-size: 28px; margin: 0 10px;}
  .headerSocials a {font-size: 18px;padding: 6px 8px;}
  .contactSubtitle {font-size: 32px;}

  .carousel {height: 80vh;}


}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  .clientesLogo {width: 360px;max-width: 100%;max-width: 100%;}
  .captionOne {top: 20%;}
  .captionOne .desc {margin: 65px 0px 0px 35px;}

  .captionTwo {top: 20%;}
  .captionTwo .desc {margin: 65px 0px 0px 35px;}

  .carousel {height: 90vh;}
  .menu-item a {font-size: 30px; }

}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 
  .carousel {height: 100vh;}
  .menu-item a {font-size: 32px; }



}