@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
}


/* FONTS */
.fnt-roboto {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400;
}
.fnt-roboto-Light {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300;
}
.fnt-roboto-Bold {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
}

/* BUTTON */
.btn-Enabled { cursor: pointer !important; }

.btn-Disabled { cursor: not-allowed !important; }

/* BACKGROUNDS */
.bg-CDLGreen { background-color: #166837 !important; }

.bg-Contacto { background-color: #CBD3BF !important; }

/* TEXT */
.txt-CDLGreen { color: #166837 !important; }

.txt-Bold { font-weight: bold !important; }

.txt-Italic { font-style: italic !important; }

.txt-Centered { text-align: center !important; }

.txt-Upper { text-transform: uppercase !important; }

.txt-Lower { text-transform: lowercase !important; }

.txt-Justify { text-align: justify !important; }

.txt-Shadow { text-shadow: 2px 2px 3px #888888 !important; }

.txt-Link { text-decoration: none !important; cursor: pointer !important; }

.txt-Nolink { text-decoration: inherit !important; cursor: default !important; }

.txt-Pointer { cursor: pointer !important; }

.txt-Black { color: Black !important; }

.txt-Gray { color: Gray !important; }

.txt-Silver { color: Silver !important; }

.txt-LightGray { color: LightGray !important; }

.txt-WhiteSmoke { color: WhiteSmoke !important; }

.txt-SteelBlue { color: SteelBlue !important; }

.txt-White { color: White !important; }

.superTxt { font-size: 9em; font-weight: bolder; }

.extraTxt { font-size: 4em; font-weight: bolder; }

/* ICONS */
.icn-fb {
    color: #4267B2 !important;
}
.icn-ig {
    background: -webkit-linear-gradient(321deg, rgba(138,58,185,1) 0%, rgba(233,89,80,1) 16%, rgba(188,42,141,1) 34%, rgba(252,204,99,1) 50%, rgba(251,173,80,1) 66%, rgba(205,72,107,1) 84%, rgba(76,104,215,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.icn-tw {
    color: #1DA1F2 !important;
}
.icn-li {
    color: #0072b1  !important;
}
.icn-wa {
    color: #4FCE5D !important;
}
.icn-mg {
    color: #0078FF !important;
}

/* HEADER */
.nav-link {
    font-weight: bold;
    color: White !important;
}

.nav-link:hover {
    color: #003300 !important;
}

footer {
    background-color:#166837;
}


/* MAIN */
.inpt-contacto-sm::-webkit-input-placeholder {
    color: White;
    font-size: 13px;
}
.inpt-contacto-sm::-moz-placeholder {
    color: White;
    font-size: 13px;
}
.inpt-contacto-sm:-ms-input-placeholder {
    color: White;
    font-size: 13px;
}
.inpt-contacto-sm::placeholder {
    color: White;
    font-size: 13px;
}
#main-queretaro p {
    margin: auto;
    text-align: center;
}
#main-master_plan {
    position: relative;
    background-color: #333333;
    color: White;
}
#master_plan-img {
    position: relative;
    
    max-width: 50%;
}
#club-circulo {
    position: absolute;
    top: 26%;
    right: -19%;
    max-width: 23%;
}
#kayak-circulo {
    position: absolute;
    bottom: -3%;
    left: 39%;
    max-width: 20%;
}
#master_plan-infobkgnd {
    position: relative;
    background: url("../../assets/img/master_plan-bkgnd2.svg") no-repeat scroll left center;
    background-size: cover;
}
#macrolote-21 {
    position: absolute;
    bottom: 3%;
    left: 44%;
    max-width: 35%;
}
#macrolote-19 {
    position: absolute;
    top: 23%;
    right: 20%;
    max-width: 22%;
}
#macrolote-23 {
    position: absolute;
    top: 27%;
    left: 29%;
    max-width: 15%;
}
#macrolote-60 {
    position: absolute;
    top: 1%;
    left: 15%;
    max-width: 19%;
}
#macrolote-59 {
    position: absolute;
    top: 6%;
    left: 33%;
    max-width: 18%;
}
#main-amenidades {
    background: url("../../assets/img/Canadas_Lago-vista2.jpg") no-repeat fixed center bottom;
    background-size: contain;
}
.amenidad-overlay {
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.5);
    overflow: hidden;
    width: 91%;
    height: 50px;
    transition: .5s ease;
}
.amenidad-container:hover .amenidad-overlay {
    height: 100%;
}
.amenidad-text {
    position: absolute;
    top: 10px;
    text-align: center;
    color: white;
}
.amenidad-text h4 {
    font-weight: bold;
    white-space: nowrap;
}
.amenidad-text p {
    padding: 2rem;
    padding-top: 5rem;
    text-align: justify;
}
.amenidad-space {
    height: 250px;
}
#main-ubicacion {
    background-color: #333333;
    color: White;
}
#mapa-text {
    position: absolute; 
    bottom: 2vw;
}
.inpt-contacto {
    width: 90%;
    outline: unset;
    border: 0px;
    border-bottom:  1px solid #166837;
    color: #166837;
    font-size: 22px;
    background: transparent;
}
.inpt-contacto::-webkit-input-placeholder {
    color: #166837;
    font-size: 22px;
    opacity: 0.7;
}
.inpt-contacto::-moz-placeholder {
    color: #166837;
    font-size: 22px;
    opacity: 0.7;
}
.inpt-contacto:-ms-input-placeholder {
    color: #166837;
    font-size: 22px;
    opacity: 0.7;
}
.inpt-contacto::placeholder {
    color: #166837;
    font-size: 22px;
    opacity: 0.7;
}
.social-bar {
    position: fixed;
    top: 50%;
    background-color: rgba(211,211,211,0.5);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: 1px solid LightGray;
    border-right: 1px solid LightGray;
    border-bottom: 1px solid LightGray;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}
.social-bar i {
    display: block;
    text-align: center;
    padding: 16px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}
.social-bar i:hover {
    font-size: 2em !important;
    cursor: pointer;
}
.chat-icns {
    position: fixed;
    bottom: 20%;
    right: 3%;
    cursor: pointer;
}
.chat-open, .chat-close {
    position: fixed;
    bottom: 5%;
    right: 3%;
    cursor: pointer;
}
.chat-open:hover > .fa-circle {
    color: SteelBlue !important;
}
.chat-txt {
    position: fixed;
    bottom: 5.5%;
    right: 9%;
    padding: 0.7em;
    font-size: medium;
    color: #166837;
    border: 3px solid #4FCE5D;
    border-radius: 25px;
    background-color: WhiteSmoke;
}


/* FOOTER */
.footer-text, .footer-text:hover {
    text-decoration: none !important; 
    cursor: pointer !important;
    color: White;
    padding-left: 1.5rem;
    border-left: 1px solid White;
}

.footer-icon {
    padding-right: .7rem;
}

.footer-icon, .footer-text a, .footer-text:hover {
    text-decoration: none !important; 
    cursor: pointer !important;
    color: White;
}


/*  PHONE SCREEN */
@media only screen and (max-width: 767px) { 
    header {
        border-bottom: 0px solid Red;
    }
    .navbar-nav {
        /*border: 1px solid Red;*/
        border-top: 1px solid White !important;
    }
    #main-hero_img {
        position: relative;
        background: url("../../assets/img/Canadas_Lago-vista_lg.jpg") no-repeat scroll center top;
        background-size: cover;
        width: 100%;
        height: 515px;
    }
    #hero_img-txt {
        position: absolute;
        left: 4rem;
        top: 3rem;
        font-size: 4.5vw;
        color: White;
    }
    #hero_img-txt span {
        font-size: 6vw;
        font-weight: bold;
    }
    .footer-text, .footer-icon{
        font-size: 3vw;
    }
    #main-quienes_somos {
        position: absolute;
        width: 100%;
        height: 30vw;
        bottom: 0px;
        display:inline-block; /* or whatever or absolute position that allows to size it */
        -webkit-clip-path:polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        clip-path:polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        background:#166837;
        color: White;
    }
    #main-quienes_somos p {
        font-size: 2.5vw;
    } 
    #main-quienes_somos span {
        font-size: 5vw;
    }
    #contacto-sm {
        display: none;
    }
    #main-queretaro p {
        width: 85%;
        font-size: 2.3vw;
    }
    #main-queretaro span {
        font-weight: bold;
        font-size: 12vw;
    }
}

/*  TABLET SCREEN */
@media only screen and (min-width: 768px) and (max-width: 1200px) { 
    header {
        border-bottom: 0px solid Lime;
    }
    .navbar-nav {
        /*border: 1px solid Lime;*/
        font-size: small;
        margin: auto !important;
        text-align: center !important;
    }
    #main-hero_img {
        position: relative;
        background: url("../../assets/img/Canadas_Lago-vista_lg.jpg") no-repeat scroll center top;
        background-size: contain;
        width: 100%;
        height: 515px;
    }
    #hero_img-txt {
        position: absolute;
        left: 3vw;
        top: 27vw;
        color: White;
        font-size: 1.5em;
    }
    #hero_img-txt span {
        font-weight: bold;
        font-size: 1.5em;
    }
    .footer-text, .footer-icon{
        font-size: 3vw;
    }
    #main-quienes_somos {
        position: absolute;
        width: 100%;
        height: 25vw;
        bottom: 0px;
        display:inline-block; /* or whatever or absolute position that allows to size it */
        -webkit-clip-path:polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        clip-path:polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        background:#166837;
        color: White;
    }
    #contacto-sm {
        display: none;
    }
    #main-queretaro p {
        width: 78%;
        font-size: 2.1vw;
    }
    #main-queretaro span {
        font-weight: bold;
        font-size: 12vw;
    }
}

/*  PC SCREEN */
@media only screen and (min-width: 1190px) {
    header {
        border-bottom: 0px solid Purple;
    }
    .navbar-nav {
        /*border: 1px solid Purple;*/
        margin: auto !important;
        text-align: center !important;
    }
    #main-hero_img {
        position: relative;
        background: url("../../assets/img/Canadas_Lago-vista_lg.jpg") no-repeat scroll center top;
        background-size: contain;
        width: 100%;
        height: 855px;
    }
    #hero_img-txt {
        position: absolute;
        left: 3vw;
        top: 27vw;
        color: White;
    }
    #hero_img-txt span {
        font-weight: bold;
    }
    .footer-text, .footer-icon{
        font-size: 2vw;
    }
    #main-quienes_somos {
        position: absolute;
        width: 100%;
        height: 20vw;
        bottom: 0px;
        display: inline-block; /* or whatever or absolute position that allows to size it */
        -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        background: #166837;
        color: White;
    }
    #contacto-sm {
        position: absolute;
        left: 7vw;
        bottom: 1em;
        width: 25%;
        border-radius: 15px;
    }
    .inpt-contacto-sm {
        margin-bottom: 0.3em;
        width: 80%;
        outline: unset;
        border: 0px;
        border-bottom:  1px solid White;
        background: transparent;
        color: #166837;
    }
    #main-queretaro p {
        width: 53%;
        font-size: 1.5vw;
    }
    #main-queretaro span {
        font-weight: bold;
        font-size: 10vw;
    }
    #master_plan-txt {
        position: absolute;
        right: 0;
        top: 0;
    }
    #main-ubicacion {
        position: relative;
        width: 100%;
        height: 1310px;
    }
    .btn-gmaps {
        position: absolute;
        bottom: 20vw;
        left: 2vw;
    }
    #mapa-infobkgnd {
        position: absolute;
        width: 100%;
        height: 20vw;
        bottom: 0px;
        display:inline-block; /* or whatever or absolute position that allows to size it */
        -webkit-clip-path:polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
        clip-path:polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
        background: WhiteSmoke;
        color: Black;
    }
}

/*  PC WIDE SCREEN */
@media only screen and (min-width: 1400px) {
    header {
        border-bottom: 0px solid Orange;
    }
    .navbar-nav {
        /*border: 1px solid Purple;*/
        margin: auto !important;
        text-align: center !important;
    }
    #main-hero_img {
        position: relative;
        background: url("../../assets/img/Canadas_Lago-vista_lg.jpg") no-repeat scroll center top;
        background-size: contain;
        width: 100%;
        height: 1035px;
    }
    #hero_img-txt {
        position: absolute;
        left: 3vw;
        top: 27vw;
        color: White;
    }
    #hero_img-txt span {
        font-weight: bold;
    }
    .footer-text, .footer-icon{
        font-size: 2vw;
    }
    #main-quienes_somos {
        position: absolute;
        width: 100%;
        height: 18vw;
        bottom: 0px;
        display: inline-block; /* or whatever or absolute position that allows to size it */
        -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
        background: #166837;
        color: White;
    }
    .inpt-contacto-sm {
        margin-bottom: 0.8em;
    }
    #main-ubicacion {
        position: relative;
        width: 100%;
        height: 1830px;
    }
    .chat-icns {
        bottom: 15%;
    }
    .chat-txt {
        right: 8%;
    }
}