/* 
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, featumain-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
:root {
    --animated: all .3s ease-in-out;
    --mainColor: #0099A8;
    --darkColor: #363C40;
    --blackColor: #1F1F1F;
    --altColor: #009CA6;
    --grayColor: #CDCDCD;
    --whiteColor: #FFFFFF;
    --lightGray: #BFBFBF;
    --mainFont: 'Mulish', sans-seriff;
    --textFont: 'Open Sans', sans-seriff;
}


.mainColor {color:var(--mainColor);}
.blackColor {color:var(--blackColor);}
.navColor {color:var(--navColor);}
.altColor {color: var(--altColor);}
.darkColor {color: var(--darkColor);}
.grayColor {color: var(--grayColor);}
.mainFont{ font-family:var(--mainFont);}
.white {color: white;}
.whiteColor {color: var(--whiteColor);}
a {color: var(--mainColor);}
.noSpace, .noSpace p {padding: 0px; margin: 0px;}

.sidenav {height: 0;width: 100%;position: fixed;z-index: 9999;top: 0;left: 0;background-image: linear-gradient(180deg, #1F1F1F 90%, #0099A8 90%);;overflow-x: hidden;transition: 0.5s;filter: drop-shadow(0px 3px 6px black);}



.navbar-toggler {border: none;padding: 10px 15px; background: var(--blackColor);transition: var(--animated);}
.navbar-toggler:hover {background: var(--altColor);}
.navbar-toggler-icon {background-image: none; width: auto; height: auto;}
.navbar-toggler-icon i {color: white; transition: var(--animated);}
.navbar-toggler:hover i {color: var(--blackColor); }
.closebtn {text-decoration: none;}
.sidenav .fa-window-close {color: var(--altColor);}
.sidenav .navMenu {margin-top: 25px;text-align: center;}
.side-titulo {color: white;font-size: 16px;font-weight: 300;}
.sidenav .navbar-nav li {margin: 5px 0px}
.sidenav .navbar-nav li a {color: white;font-size: 20px;text-decoration: none;}


body {font-family: var(--textFont);}


.header {position: relative; z-index: 2;}
.page-id-7 .header {position: absolute;}
.header:not(.page-id-7 .header) {filter: drop-shadow(0px 5px 5px rgb(1, 1, 1, .4));}

.menuCont {background: white;}
.elementor-page-7 .menuCont {background: transparent;}

.headerRow {background: var(--blackColor); color: white;position: relative;}
.headerTopleft i {color: #009CA6; font-size: 18px;}
.headerTopright a {display: flex;width: 40px; height: 40px; align-items:center; justify-content:center; background:white; color: var(--darkColor); font-size:18px;text-decoration:none; border-radius:100px;margin: 0px 10px; transition:var(--animated);  }
.headerTopright a:hover {background: var(--mainColor); color: white;}

.headerNavBar {font-size: 14px;}



#menu-principal {border-bottom: 2px solid var(--darkColor);}
#menu-principal li {padding: 8px;}
#menu-principal li a {font-family: var(--mainFont);color: var(--blackColor); padding: 10px 15px; margin: 0px 0px;text-decoration: none; font-size: 16px; font-weight: 800; position: relative; transition: var(--animated);}
#menu-principal li a:hover {color: var(--mainColor);}

#menu-principal li a:after {content: '';display: block;width: 100%;height: 4px;background: var(--mainColor);position: absolute;bottom: -3px;left: 0;transform: scaleX(.1);transform-origin: center;opacity: 0;transition: var(--animated);}
#menu-principal li a:hover:after {transform: scaleX(.8);opacity: 1;}




.footer {background: var(--blackColor); color: white; font-family: var(--mainFont);}
.footerTitle {color: var(--altColor);}

.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-icon {margin-inline: 0px !important;}

.blackButton, .greenButton {font-family: var(--textFont); font-size:18px; font-weight:600; background: var(--blackColor);color:white;border: none;border-radius: 100px; padding: 10px 30px;transition: var(--animated);}
.blackButton, .greenButton:hover {background: white; color: var(--blackColor); padding: 10px 40px;}



.greenButton {background: var(--altColor);}
.greenButton:hover {background: var(--blackColor); color: white;}

.homePleca:before {content: '';position: absolute;left: -355px;top: 50%;transform: translateY(-50%);width: 300px;height: 12px;background-color: var(--blackColor);border-radius: 10px;}

.homeButton {background: var(--blackColor);transition: var(--animated); padding: 8px 20px; font-family:var(--textFont); font-size: 18px; font-weight: 700; color:white; border-radius:100px;  }
.homeButton:hover {background: var(--altColor); padding:8px 35px; color:white;  }

.servicioPleca:before {content: '';position: absolute;left: -160px;top: 50%;transform: translateY(-50%);width: 130px;height: 12px;background-color: var(--blackColor);border-radius: 10px;}

.nosotrosList {color: red;}
.nosotrosList li {font-family: var(--mainFont); font-weight: 700; color: var(--darkColor); font-size: 20px; list-style-type: none;}

.nosotrosList li:before {display: inline-block;font-family: "Font Awesome 5 Free";font-weight: 900; content: "\f0c8";font-size: 10px; position: relative; bottom: 3px; left: -5px; color: var(--altColor);}

.formContact input, .formContact select , .formContact textarea {max-width: 450px; font-family: var(--textFont); color: #7F7F7F; font-size: 16px; border: none; border-radius: 0px; border-left: 6px solid var(--blackColor);}

.formContact input[type='submit'] {background: transparent;padding: 8px 20px;font-family: var(--mainFont);font-size: 16px;font-weight: 700;border: 1px solid white;color: white;border-radius: 0px;transition: var(--animated);}
.formContact input[type='submit']:hover {background: var(--blackColor); border: 1px solid var(--blackColor); padding: 8px 30px;}

.butonServhome {background: transparent;color: white;padding: 5px 20px;border: 2px solid white;border-radius: 100px;font-family: var(--mainFont);font-size: 16px;font-weight: 600;transition: var(--animated);}

.butonServhome:hover {background: var(--altColor);color: white;padding: 5px 30px; border: 2px solid var(--altColor);}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {


}



/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {
    .homePleca:before {left: -160px;width: 130px;top: 90%;}
    .homeLogo {width: 550px;}



}



/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .homePleca:before {top: 90%;}
    .homeLogo {width: 600px;}

}



/* X-Large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) {
    .homePleca:before {left: -220px;width: 180px; top: 90%;}
    .homeButton {padding: 10px 35px; }
    .homeButton:hover {padding:10px 45px; }



}



/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {
    
    #menu-principal li a {font-size: 18px; padding: 10px 25px;}
    .homeLogo {width: 650px;}
    .homePleca:before {left: -360px;width: 310px;top: 90%;}


}


/* No Bootstrap Class (larger desktops, 1900px and up) */

@media (min-width: 1900px) { 
    .headerNavBar {font-size: 16px;}
    .homeLogo {width: 750px;}

}