/* 
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: #76dddd;
    --altColor: #ffac00 ;
    --darkColor: ;
    --whiteColor: ;
    --darkGray: ;
    --lightGray: ;
    --mainFont: 'Montserrat', sans-seriff;
    --textFont: 'Arimo', 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); }
.pBlue {color: #00b2be;}


.noSpace, .noSpace p {padding: 0px; margin: 0px;}

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

.sidenav {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color:#0c0c0c;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
}

.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 {}


.logo {width: 150px; padding: 5px;}

.homeBanner .slick-slide {min-height: 550px;}

.slick-arrow {z-index: 2;}
.slick-prev {left: 15px;}
.slick-next {right: 15px;}



.somosBanner .slick-arrow {background: #76dddd;width: 35px;height: 35px;}
.somosBanner .slick-arrow:hover {background: black;}
.somosBanner .slick-arrow:before {opacity: 1;}



.butonWhite, .buttonBlue, .buttonYellow, .buttonBorder {color: black; background: white; padding: 10px 25px; border-radius: 100px; font-weight: 700; font-size: 15px; transition: var(--animated);}
.butonWhite:hover, .buttonBlue:hover, .buttonYellow:hover, .buttonBorder:hover {color: black; background: white; padding: 10px 35px;}

.buttonBlue {background: var(--mainColor);}
.buttonBlue:hover {background: black; color:var(--mainColor); }

.buttonYellow {background: var(--altColor); color: white;}
.buttonYellow:hover {background: black; color:var(--altColor); }

.buttonBorder {background: transparent; border: 2px solid white; color: white;}
.buttonBorder:hover {background: black; border: 2px solid black; color: white;}


#menu-principal li {margin: 0px 5px;}
#menu-principal li a { color: black;font-size:16px; font-weight: 500; padding:0px 10px; position: relative; text-decoration: none;}
#menu-principal li.current-menu-item a:after {opacity: 1; transform: scaleX(.8); background: var(--altColor);}
#menu-principal li a:after {content: ''; width: 100%; background: var(--mainColor); height: 3px; display: block; position: absolute; bottom: -5px; transform: scaleX(.25); opacity: 0;transform-origin: center; transition: var(--animated);}
#menu-principal li a:hover:after {transform: scaleX(.8); opacity: 1;}

#menu-principal .loginClass a {background: var(--mainColor); color:black; padding:10px 10px; font-weight: 700; border-radius:100px; transition:var(--animated); }
#menu-principal .loginClass a:after {display: none;}
#menu-principal .loginClass a:hover {background: black; color: var(--mainColor); }

.rightMenu {background: var(--mainColor);position: absolute;top: 85px;right: 0;display: flex;flex-direction: column;height: 240px; width: 0;overflow: hidden;padding: 0;box-sizing: border-box;z-index: 99;transition: width 0.4s ease, padding 0.3s ease;}

.rightMenu a {color: black;text-decoration: none;font-size: 20px;font-weight: 500;margin: 5px 0;white-space: nowrap; transition: var(--animated);}
.rightMenu a:hover {color: var(--altColor);}

#menuBtn {border: none;color: black; background: transparent;font-size: 30px;transition: var(--animated);}
#menuBtn:hover {background: black; color: var(--mainColor);}

.homeIcons .elementor-element {width: 100%;}

.footer {padding: 0px 25px; }
.footerLogos {margin-left: 40px;}
.footerLogos a {font-size: 30px; margin: 0px 15px;}
.footerLogos a i.fa-youtube {color: red;}
.footer ul {padding: 0px;}
.footerNav li {list-style-type: none; }
.footerNav a {margin: 0px;font-size: 30px; font-family:font-family: 'Montserrat' !important;; color: black; text-decoration:none; font-size:15px; }
.footerNav i {width: 35px; color: var(--mainColor); font-size: 22px;}
.footerTitle {color: #55bab7; font-size: 20px; font-family:'Montserrat' !important; font-weight:700; } 

.footerLinks a {display: flex; margin: 10px;position: relative;font-family:'Montserrat' ; color: black; text-decoration:none; font-size:15px; }

.footerLinks i {color: #55bab7; font-size: 20px; margin-right: 5px;}


.footerNavfirst {position: relative;}


.navbar-toggler {padding: 8px 12px;}
.navbar-toggler-icon {background: none; height: fit-content; width: fit-content;}

.navbar-toggler:hover {background: var(--mainColor);}
.closebtn {text-decoration: none; color:var(--altColor); }
#mySidenav {background: #fffffff0; text-align: center;}
.side-titulo {font-weight: 600;}
#mySidenav li {margin: 4px 0px;}
#mySidenav .menu-item-42 a {background: var(--mainColor); padding: 5px 10px; border-radius: 100px;color: black;}
.navMenu a {color: #494949;font-size: 18px; text-decoration: none; font-weight: 400; margin: 5px 0px;}

.blogCont {transition: var(--animated);}
.blogCont:hover {background: #ebebeb; border-radius: 25px;}
.blog-date {font-weight: 600; font-size: 16px; text-transform: capitalize; color: #8c8c8c; font-family: var(--textFont);}
.blog-title {min-height: 110px;}
.blog-title a {font-family: var(--mainFont);font-size: 20px;color: black; font-weight: 600;}
.blog-exc {font-size: 16px;color: #6f6f6f;font-family: var(--textFont);letter-spacing: .5px;}
.blog-btn {background: var(--mainColor);color: #ffffff;padding: 8px 20px;border-radius: 100px;font-weight: 600;font-size: 16px; transition: var(--animated);}
.blog-btn:hover {background: black; color: var(--mainColor);}

.page-numbers {background: #dbdbdb;width: 35px;height: 35px;display: inline-flex;justify-content: center;align-items: center;font-size: 20px;font-weight: 600;color: black; transition: var(--animated);}
.page-numbers.current {background: var(--altColor);}
.page-numbers:hover {background: black; color: var(--mainColor);}

.blogCont:hover .blogImg {border-radius: 25px;}
.blogImg {width: 350px; transition: var(--animated);}

.footLogo {width: 200px;}

.contactLink {background: var(--mainColor); color: black; border-radius: 100px; padding: 5px 20px; font-weight: 600; transition: var(--animated);}
.contactLink:hover {background: black; color: var(--mainColor);}

.formContacto {max-width: fit-content; margin: 0 auto;}

.formContacto p {color: black; font-weight: 600;}
.formContacto input[type="submit"] {background: var(--mainColor); color: black; font-weight: 600; border: none; border-radius: 100px; padding: 10px 25px; transition: var(--animated);}
.formContacto input[type="submit"]:hover {background: black; color: var(--mainColor);}

.buttonTopcom a {background: var(--mainColor);padding: 14px 15px !important;border-radius: 100px;transition: var(--animated);}
.buttonTopcom a:hover {background: var(--altColor) !important;}
.buttonTopcom a:after {display: none !important;}

.navMenu .buttonTopcom a {padding: 5px 10px !important;}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .footerNav a {margin: 5px 10px;}
    .footerNavfirst:after {right: 40px; top: 25%;}


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .butonWhite, .buttonBlue, .buttonYellow, .buttonBorder {font-size: 22px;}
    .blogImg {width: 100%; }
    

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .homeBanner .slick-slide {min-height: 650px;}
    .butonWhite, .buttonBlue, .buttonYellow, .buttonBorder {font-size: 28px;}
    .somosBanner .slick-prev {left: 20%;}
    .somosBanner .slick-next {right: 20%;}


}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .footer {padding: 0px;}
    .homeBanner .slick-slide {min-height: 750px; display: flex; justify-content: center;}
    .rightMenu {top: 116px;}

 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
    .footer {padding: 0% 5%; }
    #menu-principal li a {font-size:18px;}
    .blog-title {min-height: 85px;}
    #menu-principal li a {padding: 0px 15px;}




}

/* No Bootstrap Class (larger desktops, 1900px and up) */
@media (min-width: 1900px) { 
    .footer {padding: 0% 10%; }
    .blogCont {width: 25%; }
    #menu-principal li a {font-size:20px;}
    #menu-principal li a {padding: 0px 25px;}
    #menu-principal .loginClass a {padding: 10px 20px;}

}