/*
Created by YoHack dev.cmedina[at]gmai....
Project: Endemico WEB
Aug 2020.
*/
    :root {
        --accent:#7E8E5D;
        --light:#F2EEE8;
        --link-base:rgba(255, 255, 255, 0.71);
        --link-hover:rgba(255,255,255,1);
        --primary: #E34C2B !important; 
        --primary-hover:#bf3b1e !important;
        --secondary:#3C3C3B !important;
    }
    
    html, body{ height: 100%; padding: 0px; margin:0px;}
    body{ background-color: var( --secondary); overflow-x: hidden;}
    
    a.text-primary:focus, a.text-primary:hover{ color: var(--primary-hover)!important; }
    
    a.btn { font-family: 'Barlow';   font-weight: normal; font-size: 16px; padding:5px 38px;  }
    a.btn>span {font-size: 40px; line-height: 6px;  font-weight: 100; font-style: normal;}
    
    a.nav-link{ color:var(--link-base); font-family: 'Roboto Mono'; font-weight: bold; font-size: 13px; transition: all 400ms; position: relative;}
    a.nav-link:hover{ color: var(--link-hover); text-decoration:  none; }
    .nav-link::before{transition: opacity 400ms; display: block; content: ''; position: absolute; left:10px; right:22px; bottom: 8px; height: 2px; background: var(--primary); opacity: 0;}
    .nav-item.active>.nav-link::before, .nav-item:hover>.nav-link::before{ opacity:1;}
    
    .dropdown-menu{ background: none; border:none; padding: 0px; margin: 0px;  font-family: 'Roboto Mono'; font-weight: bold; font-size: 13px; transition: all 400ms;}
    .dropdown-item{ color: var(--link-base)!important; position: relative; padding: 2px 9px; display: inline;  line-height: 22px; }
    .dropdown-item::before{ transition: opacity 400ms; display: block; content: ''; 
        position: absolute; left:10px; right:22px; bottom: 1px; height: 2px; cursor: pointer;
        background: var(--primary); opacity:0; }
    .dropdown-item.active, .dropdown-item:active { background:none!important; color: var(--link-hover)!important; }
    .dropdown-item.active::before {opacity: 1; }
    .dropdown-item:hover{ background: none!important; color: var(--link-hover)!important; }

    .list-bullet-light { list-style: none; }
    .list-bullet-light li { color: var(--light); padding: 3px 0px;  font-family: 'Roboto Mono'!important; position: relative; }
    .list-bullet-light li::before {
      content: "";  
      background: #3C3C3B;
      display: inline-block; 
      width: 8px; 
      height: 8px;
      border-radius: 4px;
      position: absolute;
      top:10px;
      left:-25px;
    }
    
    ul.roboto{ font-family: 'Roboto Mono'; }
    ul.roboto>li{padding: 3px 0px;}
    
    header{ position: absolute; top:0px; left:0px;  right:0px;}
    .subtitle { font-size: 24px;  line-height: 32px; font-family: 'Barlow'; font-weight: normal;}
    h1{ font-size: 100px; line-height: 96px; font-family: 'Barlow'; font-weight: 900;}
    h2{ font-size: 138px; line-height: 120px; font-family: 'Barlow'; font-weight: 900;}
    h2.ubi{ font-size: 124px!important;}
    h3{ font-size: 18px; line-height: 20px; font-family: 'Barlow'; font-weight:700; letter-spacing: 1px;}
    h4{ font-size: 60px; line-height: 64px; font-family: 'Barlow'; font-weight: 900; letter-spacing: 1px;}
    h4.fix { font-size: 74px; line-height: 80px;}
    h5{ font-size: 40px; line-height: 44px; font-family: 'Barlow'; font-weight: 900; letter-spacing: 1px;}
    
    h2.mini-bold{ font-size: 26px; line-height: 28px; letter-spacing: 1px; font-weight: 800;}
    
    /* TEXT AND COLORS */
    .text-primary{ color: var(--primary)!important; }
    .text-dark{ color:#3C3C3B;}
    .text-light{ color: var(--light)!important;}
    .text-accent { color:  var(--accent)!important;}
    
    .bg-primary{ background-color:  var(--primary)!important; }
    .bg-light { background-color: var(--light)!important;}
    .bg-dark { background-color: #3C3C3B!important;}
    .bg-accent { background-color: var(--accent); }
    
    p{ font-size: 15px; letter-spacing: 1px; }
    p.roboto{ font-family: 'Roboto Mono'; line-height: 22px; }
    p.roboto-light { font-family: 'Roboto Mono'; line-height: 22px; }
    p.barlow { font-family: 'Barlow';  font-weight: normal; line-height: 22px; font-size: 17px; font-weight: 300; }
    p.barlow>strong { font-weight: 700;}
    
    /* UTILS */
    /*.no-padding{ margin-left:-15px; margin-right: -15px;}*/
    .toUpper{ text-transform: uppercase;}
    
    .hk-pt-180 { padding-top:180px;}
    .hk-pt-138 { padding-top:138px;}
    .hk-pt-160 {padding-top:160px;}
    .hk-pt-220 { padding-top:220px;}
    .hk-pt-80 { padding-top:80px;}
    .hk-pt { padding-top: 110px;}
    .hk-pb{ padding-bottom: 150px;}
    
    .floating-image{ display: block; position: absolute; top:0px; left:0px; right:0px; height: auto; width: 100%; }
    .floating-title{ display: block; position: absolute; top:0px; left:0px; z-index: 9;}
    .floating-bg{ background: url(/pictures/masterplan.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}
    
    .video-container{ position: relative; background-color: black; overflow: hidden; height: 100vh; width: 100vw; z-index: -1;  }
    .video-container>video, .video-container>.video-bg{  position: absolute; top:50%; left:50%; min-width: 100vw; min-height: 100vh; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%);  transform: translateX(-50%) translateY(-50%); }
    
    .img-logo { display: block; width: 166px; height: auto;}
    .img-bg { background-position: center; background-size: cover; background-repeat: no-repeat;}
    .img-icon { height: 50px;}
    
    .mtable td, .mtable th{ padding: 6px 2px; vertical-align: top;}
    .breadcrumb { background: none; border: none; padding: 0px; margin: 0px;}
    
    /*SPECIFIC*/
    .infra h1 { font-size: 68px;}
    .amenidades h1{ font-size: 85px;}
    .yucatan h1 { font-size: 180px; position: absolute; z-index:10;}
    
    .social-icons{ list-style: none; padding: 0px; margin: 0px; display: flex;}
    .social-icons>li{ display: block; margin: 2px 12px;}
    .social-icons>li>a{color: var(--secondary)!important; }

    .footer-logo{ display: block; width: 150px; height: auto;}
    .container-xl{ max-width: 1250px;}
    .breadcrumb-item {font-family: 'Roboto Mono'; font-size: 11px; letter-spacing: 1px; color: var(--secondary)!important;}
    .breadcrumb-item a { color: #AEAEAE!important;}
    .breadcrumb-item:hover a{ text-decoration: none!important; color: var(--secondary)!important;}
    
    .form-control[type="text"]{ border: none; background: none; }
    .frm-line{ border-bottom: solid 1px #000;}
    
     .cover{ background-image: url(/pictures/frente.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;
    min-height: 870px;}
    .section-title{ position: absolute; top:50%; z-index: 20; font-size: 128px; line-height: 128px;
        transform: translateY(-50%); text-shadow: 0px 0px 10px #3C3C3B;
    }
   
    
    @media (max-width: 769px) {
        .hk-pt-180, .hk-pt-220, .hk-pt-138 { padding-top: 56px;}
        .hk-pt{ padding-top:20px;}
        .hk-pb{ padding-bottom: 0px;}
        
        div.hk-pt-160{ padding-top: 0px!important;}
        
        
        header{ background-color:#3C3C3B; z-index: 99; }
        h1, h2, h4{ font-size: 50px!important; line-height: 46px!important;}
        h2.ubi{ font-size: 55px!important; line-height: 50px!important;}
        h2.mini-bold{ font-size: 25px!important; line-height: 27px!important; letter-spacing: 1px; font-weight: 800;}
        h4.fix { font-size: 44px!important;}
        h5{ font-size: 35px!important; line-height: 40px!important;}
        
        .floating-title{ left:15px; }
        .floating-image{ position: relative; height: auto; width: auto; margin-top: 15px; margin-bottom: -40px; margin-left: auto; margin-right: auto; }
        
        .pt-5{ padding-top: 5px!important;}
        
        .infra .pt-5{ padding-top: 0px!important;}
        .infra h1.mt-5{ margin-top: 0px!important;}
        .infra h1 { font-size: 48px; line-height: 48px;}
        .infra .pb-4{ padding-bottom: 0px!important;}
        
        .cotizador h1.mt-5{ margin-top: 0px!important;}
        
        .amenidades h1{ font-size: 48px; line-height: 48px; }
        .amenidades .pt-4{ padding-top: 0px!important; }
        .amenidades .mt-5{ margin-top: 30px!important; }
        .amenidades .ml-5{ margin-left: 0px!important; }
        .amenidades .mb-3{ margin-bottom: 46px!important; }
        
        .floating-bg { min-height: 400px; }
        .center-sm{ margin: 18px auto!important; display: block; margin-bottom: 20px!important; }
        .pl-5, pr-5{ padding-left:0px!important; padding-right: 0px!important; }
        
        footer>div{ padding-top: 50px!important;}
        
        .cover{ display: none;}
        .section-title{  position: relative; top:0;  transform: translateY(0%); 
            margin: 0px 16px 36px 16px!important;  }   
        .sm-pb{ padding-bottom: 35px;}
        .sm-p{ padding: 0px 16px;}
        .sm-pt{ padding-top: 35px!important;}
        .sm-mt{ margin-top: 10px!important;}
        col-sm-6.sm-mt{ margin-top: 20px!important;}
        
        footer, footer .text-right { text-align: center!important;}
        footer .social-icons{ align-items: center; justify-content: center; margin-bottom: 30px!important;}
        footer .float-right{ float: none!important; display: block; margin:0 auto;}
    }
    
    @media (max-width: 576px) {
        .infra h1 { font-size: 36px!important; }
    }
    
    .vimeo-container { padding: 0px; margin: 0px;height:100vh;}
.vimeo-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden;}

.vimeo-wrapper iframe {width: 100vw; height: 56.25vw;  min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.video-overlay{ display: block; min-height: 100vh; width:100%;}
.floating-overlay{ margin: 0 auto; display: block;text-align: center; position: absolute;  left:50%; top:50%; transform: translate(-50%,-50%);}