/* 
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: #2D2D2D;
    --altColor: ;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: ;
    --lightGray: ;
    --mainFont: 'Outfit', 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: 0px;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color:#0c0c0cfa;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
}

.navbar-toggler {padding: 0px;}
.navbar-toggler-icon {background: none;width: auto; height: auto; padding: 10px 15px;background: var(--mainColor);
    color: white;}
.closebtn {text-decoration: none; color: white;}
.navMenu li {margin: 5px 0px;}
.navMenu li a {color: white !important; font-weight: 400;}
.side-titulo {color: #979797; font-size: 18px; font-weight: 500;}

body {font-family: var(--mainFont);}
.footer {background: #2D2D2D; color: white;}

.carousel-control-prev,
.carousel-control-next {border: none;height: 65px;margin: auto;border-radius: 100px;width: 65px; transition: var(--animated); background:var(--mainColor); outline:none; }
.carousel-control-prev{padding: 10px 15px 5px 10px; left: -8px;transform: scale(.65);}
.carousel-control-next{padding: 10px 10px 5px 15px; right: -8px;transform: scale(.65);}
.carousel-control-prev:hover,.carousel-control-prev:active,.carousel-control-prev:focus,
.carousel-control-next:hover,.carousel-control-next:active,.carousel-control-next:focus {}

.header {background: white;filter: drop-shadow(0px 2px 5px rgb(0, 0, 0, .4)); position: relative; z-index: 2;}
.header .logo {width: 80px;}
.navbar-nav {text-align: center;}
.navbar-nav li a {padding: 5px 10px; text-decoration:none; position:relative; font-family:var(--mainFont); color:#979797; font-size: 18px;font-weight: 500; transition:var(--animated); }
.navbar-nav li a:hover {color: #2D2D2D;}
#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: inline-flex;justify-content: center;align-items: center;width: 35px; height: 35px; margin: 0px 5px; border: 2px solid var(--mainColor);border-radius: 100px; font-size: 18px; color: var(--mainColor); text-decoration: none;transition: var(--animated);}
.topIcons a:hover {background: var(--mainColor); color: white;}

.buttonGray {background: var(--mainColor); color: white; font-family: var(--textFont); font-size: 18px; font-weight: 500;padding: 5px 20px; border-radius: 100px; transition: var(--animated);}

.cartRentals .buttonGray {background: #BFBFBF;}
.cartRentals:hover .buttonGray {background: var(--mainColor); color: white;}
.buttonGray:hover {padding: 5px 30px;}

.cartRentals .cartImage {border: 15px solid white; transition: var(--animated);}
.cartRentals:hover .cartImage {border: 15px solid var(--mainColor);}

.cartRentals .elementor-icon {border-radius: 100px;padding: 25px;background: #F1F1F1;border: 10px solid transparent !important; transition: var(--animated);}

.cartRentals:hover .elementor-icon {border: 10px solid var(--mainColor) !important; background: white;}
.iconAccesories .elementor-icon {background: #F1F1F1; border-radius: 100px; padding: 20px;}

.catImg{transition: var(--animated);border-radius: 0px 0px 0px 0px;}
.catImg:hover {background: var(--mainColor); border-radius: 25px;}
.catImg .buttonGray {background: #BFBFBF;}
.catImg img {border: 15px solid white; transition: var(--animated);}
.catImg:hover .catTitle {color: white !important;}
.catImg:hover img {border: 15px solid var(--mainColor);}
.catImg:hover .buttonGray {background: white; color: var(--mainColor);}

.aLink {color: #C9C9C9; text-decoration: none;transition: var(--animated);}
.aLink:hover {color: white; letter-spacing: 1px;}
.aLink a {color: #C9C9C9;}
.formContacto { padding-right: 100px;}
.formContacto input, .formContacto textarea, .formContacto select {border-radius: 0px;border: none; color: var(--mainColor); filter: drop-shadow(3px 3px 1px rgb(0,0,0,.3));}
.formContacto input[type="submit"] {background: var(--mainColor);border:none; border-radius: 0px; color: white;filter: none;opacity: .8;transition: var(--animated);}
.formContacto input[type="submit"]:hover {letter-spacing: 2px;opacity: 1;}

button:hover, button:focus {background: #bfbfbf !important;}

/* 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) {
    .header .logo {width: 85px;}
 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .header .logo {width: 125px;}
    .navbar-nav li a {font-size: 22px;}
    .topIcons a {padding: 5px 20px;width: 50px; height: 50px;}


}

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

}