/* 
Theme Name: PlayaProjects - 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: #004B26;
    --altColor: #00A850;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: #212121 ;
    --lightGray: #727272;
    --mainFont: 'Playfair Display', sans-seriff;
    --textFont: 'Roboto', sans-seriff;
}

.mainColor{ color:var(--mainColor); }
.altColor{ color:var(--altColor); }
.darkColor{ color:var(--darkColor); }
.whiteColor{ color:var(--whiteColor); }
.darkGray{ color:var(--darkGray); }
.lightGray{ color:var(--lightGray); }
.mainFont{ font-family:var(--mainFont); }
.textFont{ font-family:var(--textFont); }


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, white 90%, var(--mainColor) 90%);
    overflow-x: hidden;
    transition: 0.5s;
}

.navbar-toggler {background: var(--darkGray); color: white;}
.navbar-toggler:hover {background: var(--altColor);}
.navbar-toggler-icon {background: none; width: auto; height: auto;}
.closebtn {color: var(--altColor); text-decoration: none;}
.side-titulo {color: var(--mainColor); font-weight: 600;}
.navMenu li {margin: 5px 0px;}
.navMenu li a {color: var(--darkGray); font-weight: 500; font-size: 20px; text-decoration: none;}

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


.greenButton {background: var(--mainColor);color: white;font-family: var(--textFont);padding: 8px 25px;border-radius: 100px;font-weight: 600;transition: var(--animated);}
.greenButton:hover {background: var(--altColor); padding: 8px 35px; color:white; }

.grayButton {background: var(--lightGray);color: white;font-family: var(--textFont);padding: 8px 25px;border-radius: 100px;font-weight: 600;transition: var(--animated);}
.grayButton:hover {background: var(--altColor); padding: 8px 35px; color:white; }


.page-id-12 .header {position: absolute; top: 0px; background: transparent; z-index: 2;}
.header:not(.page-id-12 .header) {filter: drop-shadow(0px 5px 6px rgb(1, 1, 1, .25));background: white;z-index: 2;position: relative;}
.logo {width: 75px; margin: 0 auto;}
.page-id-12 .logo {display: none;}

#menu-principal {border-bottom: 2px solid #CBCBCB;}
#menu-principal li {padding: 8px;}
#menu-principal li a {font-family: var(--textFont);color: var(--lightGray); padding: 10px 25px; margin: 0px 0px;text-decoration: none; font-size: 18px; font-weight: 800; position: relative; transition: var(--animated);}
#menu-principal li.current-menu-item a {color: var(--darkGray);}
#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: -4px;left: 0;transform: scaleX(.1);transform-origin: center;opacity: 0;transition: var(--animated);}
#menu-principal li a:hover:after {transform: scaleX(.8);opacity: 1;}

.topIcons a {display: flex;align-items: center;justify-content: center;text-decoration: none; width:40px; height:40px; background: var(--mainColor); color:white; font-size:20px; border-radius:100px; transition:var(--animated);}
.topIcons a:hover {background: var(--altColor);}


.serviciosIcon .elementor-icon-box-icon {padding: 12px; background: #f5f5f5; transition:var(--animated); }
.serviciosIcon .elementor-icon-box-icon svg g {fill: var(--altColor); transition:var(--animated);}
.serviciosIcon .elementor-icon-box-icon:hover { background: var(--darkGray); } 
.serviciosIcon .elementor-icon-box-icon:hover svg g {fill: white;}

.plecaLeft {position: relative;}
.plecaLeft:before {content: '';background: var(--mainColor);height: 125px;width: 12px;position: absolute;top: 50%;z-index: 2;left: -5px;transform: translateY(-50%);;transition: var(--animated);}
.plecaLeft:hover:before {background: var(--altColor);height: 180px;}
.plecaLeft:hover .grayButton {background: var(--mainColor);}
.plecaLeft:hover .grayButton:hover {background: var(--altColor);}


.ulGreen ul li {list-style-type: none;}
.ulGreen ul li:before {content: '•';color: var(--altColor);position: relative;left: -2px;font-size: 55px;line-height: 0;bottom: -13px;}

.buttonWhite {background: var(--darkGray);color: white;font-family: var(--textFont);padding: 8px 25px;border-radius: 100px;font-weight: 600;transition: var(--animated);}
.buttonWhite:hover {background: white; padding: 8px 35px; color:var(--darkGray); }
.buttonWhite i {color: white; transition: var(--animated);}
.buttonWhite:hover i {color: var(--altColor);}

.formContacto input, .formContacto select, .formContacto textarea {background: white; font-family: var(--textFont); font-size: 18px; font-weight: 500; color:#7F7F7F; border: none;border-left: 5px solid var(--altColor);  border-radius: 0px;}
.formContacto input[type="submit"] {background: white; color: var(--darkGray); font-weight: 600; font-size: 16px; letter-spacing: 1px;  padding: 8px 25px; border-radius: 100px; transition: var(--animated); border: none;}
.formContacto input[type="submit"]:hover {background: var(--altColor); padding: 8px 35px; color:white; }



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

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 


}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 

}