/* 
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;
    --darkGray: #0D0D0D;
    --midGray: #212121;
    --altColor: #AC8A41;
    --mainFont: 'Playfair Display', sans-seriff;
    --textFont: 'DM Sans', sans-seriff;
}


.altColor {color: var(--altColor);}
.white{color: white;}



body, .category {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-color:#0c0c0c;
    overflow-x: hidden;
    transition: 0.5s;
}

.navbar-toggler {color: white;background: #212121;border-radius: 0px;padding: 8px 12px;}
.navbar-toggler-icon {background: none;height: fit-content; width: fit-content;}
.navbar-toggler:hover {background: var(--altColor);}
.closebtn {color: white; text-decoration: none;}
.closebtn:hover {color: var(--altColor);}
.side-titulo {font-family: var(--mainFont); font-size: 22px; font-weight: 600;}
.navMenu li {margin: 8px 0px;}
.navMenu a {color: #c0c0c0; font-family: var(--textFont); font-size: 22px; font-weight: 400;transition: var(--animated);text-decoration: none;}
.navMenu a:hover {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, .footer {background: #090909;}
.footer {color: white; font-family: var(--textFont);}


.topLogo a {font-family: var(--mainFont); font-size: 34px; color: #5A5A5A;transition: var(--animated);}
.topLogo a:hover {color: white;}

#menu-principal li {border: 1px solid #2A2A2A;padding: 20px 25px;}
#menu-principal li a {color: #888888; font-size: 20px; font-family: var(--textFont); padding: 10px 10px; text-decoration:none; transition:var(--animated); }
#menu-principal li a:hover {color: white;}

.topIcons a {font-size: 22px;color: white;border: 1px solid #2a2a2a; width: 50px; height: 50px; text-decoration: none;display: flex;justify-content: center; align-items:center; background: transparent;transition: var(--animated);}
.topIcons a:hover {color: var(--altColor);}

.homeLinks p {font-weight: 300;transition: var(--animated); transition: var(--animated);}
.homeLinks strong {color: var(--darkGray); font-size: 40px; font-weight: 600;transition: var(--animated);}
.homeButton {}

.homeLinks {background: transparent; transition: var(--animated); border-left: 0px solid transparent;}
.homeLinks:hover {background: var(--darkGray); border-left: 8px solid var(--altColor); }
.homeLinks:hover p {color: white;}
.homeLinks:hover strong {color: var(--altColor)}

.homeButton a {font-size: 16px; font-style: italic; font-weight: 500; transition: var(--animated);}
.homeButton i {font-size: 16px;}

.homeLinks:hover .homeButton a {margin-right: 20px; color: white;}
.homeLinks:hover .homeButton a:hover {color: var(--altColor); }



#imageDiv {position: relative;width: auto;height: 850px;overflow: hidden}

#imageDiv .img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;opacity: 0;transition: opacity 0.5s ease;pointer-events: none;}

#imageDiv .img.active {opacity: 1;}

.yoContb { background: var(--darkGray);}
.yoContw {background: white;}



.portfolioButton {background: transparent;border: 1px solid white;font-family: var(--textFont);color: white;font-size: 20px;letter-spacing: 1px;padding: 5px 20px;border-radius: 0px;transition: var(--animated);}
.portfolioButton:hover {background: var(--altColor); border: 1px solid var(--altColor); padding: 5px 35px; color: white; border-radius: 50px;}
.plecaBot p {width: 250px; margin: 0 auto;border-bottom: 4px solid var(--altColor);padding-bottom: 10px;}


/* NEW: wrap that moves */

.custom-gallery-container {display: flex;justify-content: space-between;gap: 20px;overflow: hidden; flex-direction: column;}
.gallery-column { width: auto;flex: 0 0 auto;}
.inner-scroll {display: flex;flex-direction: row;animation: scroll-right 50s linear infinite;width: max-content;}
.gallery-column.right .inner-scroll {animation: scroll-left 50s linear infinite;}
.custom-gallery-container:hover .inner-scroll {animation-play-state: paused;}

.inner-scroll a { width:250px;}
.gallery-column img {width: 100%;height: auto; display: block;box-sizing: border-box;margin: 0;padding: 0;}
.separator {width: 5px ;height: 50px;margin: auto 15px;border-radius: 100px;}


/* Seamless scroll keyframes */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-right {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}



.categoryCont {width: 100%;} 
.categoryCont a, .pagination a {background: transparent;color: var(--darkGray); padding: 5px 15px;border-radius: 100px;font-size: 16px;font-weight: 600; margin: 0px 10px; transition: var(--animated);}
.categoryCont a:hover, .pagination a:hover {background: var(--darkGray);color: var(--altColor); padding: 5px 15px;border-radius: 100px;font-size: 16px;font-weight: 600; transition: var(--animated);}
.categoryCont a.current, .pagination span.current {background: #828282;padding: 5px 15px;border-radius: 100px;font-size: 16px;font-weight: 600;color: white;}




.latest-post {margin-bottom: 40px;}
.post-thumbnail {background-size: cover;background-position: center;height: 200px;position: relative;}
.post-thumbnail-link {position: absolute;top: 0; left: 0;width: 100%;height: 100%;display: block;text-indent: -9999px;}
.post-info {display: flex;flex-direction: column;justify-content: space-between;height: 100%;}
.postCategory a {    display: inline-block;font-size: 16px;color: #7E7E7E;text-decoration: none;font-weight: 600;font-style: italic; transition: var(--animated);}
.postCategory a:hover {color: var(--altColor);}
.postDate {display: inline-block;font-size: 0.8rem;color: #7E7E7E;}
.postTitle a {font-family: var(--mainFont);font-size: 30px;line-height: 35px;font-weight: 600;color: var(--darkGray);text-decoration: none;transition: var(--animated);}
.postTitle a:hover {color: var(--altColor);}
.postContent {font-size: 16px; color: var(--darkGray); font-weight: 300; }
.postLink {background: var(--darkGray); padding: 5px 15px; font-size: 14px; font-weight: 700;color: var(--altColor);border-radius: 100px; text-decoration: none; transition: var(--animated);}
.postLink:hover {background: var(--altColor); padding: 5px 20px; color: white;}

.archive .post-thumbnail {height: 350px;}
.pagination {width: fit-content;}
.pagination a {text-decoration: none; margin: 0px 5px; padding: 5px 12px;}
.pagination a:hover {padding: 5px 12px;}

.catTitlel {font-size: 45px; color: var(--darkGray); font-family: var(--textFont);}
.catTitle {font-size: 60px;font-family: var(--mainFont);font-weight: 600;color: var(--altColor);}

.slick-dots {width: 100%; bottom: 25px;}
.slick-dotted.slick-slider {margin-bottom: 0px;}

.blogGallery .slick-dots {width: 100%;bottom: -70px;}

.slick-dots li {margin: 0px 10px; width: 30px;}
.slick-dots li button {background:#2E2E2E; width: 100%; height: 5px; padding: 0px; border-radius: 0px;}

.slick-dots li button:before { color:#2E2E2E; content:''; }
.slick-dots li button:hover, .slick-dots li button:active, .slick-dots li button:focus {background: var(--altColor); }
.slick-dots .slick-active button {background: var(--altColor);}

.conversemos {border:2px solid var(--altColor);color: var(--altColor); padding: 5px 15px;font-size: 22px; transition: var(--animated); letter-spacing: 1px;}
.conversemos:hover {color: white; background:var(--altColor); border-radius:50px; }
.conversemos i {font-size: 10px; transition: var(--animated);opacity: 0;}
.conversemos:hover i {font-size: 20px;opacity: 1;}

.conversemosProx {border:2px solid #505050;color: #505050; padding: 5px 15px;font-size: 22px; transition: var(--animated); letter-spacing: 1px;}

.formContacto input, .formContacto select, .formContacto textarea {background: white; border-radius: 0px; border-left: 4px solid var(--altColor);}
.formContacto input[type="submit"] {background: var(--darkGreen);color: white;font-size: 18px;font-weight: 600; letter-spacing: 1px;padding: 8px 25px;border: none; padding: ; border-radius: 100px;display: block; transition: var(--animated);}
.formContacto input[type="submit"]:hover {background: var(--altColor);color: white; padding: 8px 30px; }

.blogGallery .slick-slide img {width: 100%;}
.blogGallery .slider-nav .slick-slide img {padding: 5px;}
.blogGallery .slick-prev:before, .slick-next:before {color: var(--darkGray);}

.btnAll {display: block;background: #828282;width: fit-content;padding: 10px 20px;margin-bottom: 25px;border-radius: 100px;text-decoration: none; color: white;font-weight: 600;transition: var(--animated);}
.btnAll:hover {background: var(--darkGray); color: var(--altColor);}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .post-thumbnail {height: 250px;}

}

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

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .blogGallery .slider-nav .slick-slide img {padding: 15px;}

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .custom-gallery-container {flex-direction: row; }
    .gallery-column {width: 48%; height: 1550px;overflow: hidden;position: relative;padding: 0px;}
    .gallery-column img {width: 100%;}
    .inner-scroll {display: flex;flex-direction: column;animation: scroll-up 30s linear infinite; width: auto;}
    .inner-scroll a {width: 100%;}
    .gallery-column.right .inner-scroll {animation: scroll-down 30s linear infinite;}
    .separator {width: 80%;height: 6px;margin: 15px auto;border-radius: 100px;}

    .post-thumbnail {width: 300px;}

    .blogGallery .slick-dots {bottom: -30px;}


    /* Seamless scroll keyframes */
    @keyframes scroll-up {
        0% { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }

    @keyframes scroll-down {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0); }
    }

    .slick-dots {width: 25%;}

    .topIcons a {width: 75px; height: 75px; }

    .yoContb {height:50%; }
    .yoContw {height:50%;}

    .portfolioCont .portfolioLink {opacity: 0; transition: .5s ease-in-out; margin-bottom: 0px;}
    .portfolioCont:hover .portfolioLink {opacity: 1; margin-bottom: -75px; background: var(--darkGray);}
    .slick-dots li button {width: 50px; }
    .archive .post-thumbnail {width: 450px; height: 300px;}
 
}

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


}

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

}