/****
Created by YoHack dev.cmedina[at]gmai....
Project: Campo Magno
Jan 2021.
*****/

@font-face {
    font-family: 'Empirica Head';
    src: url('fonts/EmpiricaHeadExtraLight.woff2') format('woff2'),
        url('fonts/EmpiricaHeadExtraLight.woff') format('woff'),
        url('fonts/EmpiricaHeadExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Empirica Head';
    src: url('fonts/EmpiricaHead-Italic.woff2') format('woff2'),
        url('fonts/EmpiricaHead-Italic.woff') format('woff'),
        url('fonts/EmpiricaHead-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Empirica Head';
    src: url('fonts/EmpiricaHead.woff2') format('woff2'),
        url('fonts/EmpiricaHead.woff') format('woff'),
        url('fonts/EmpiricaHead.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?1');
  src:  url('fonts/icomoon.eot?1#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?1') format('truetype'),
    url('fonts/icomoon.woff?1') format('woff'),
    url('fonts/icomoon.svg?1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mini-fill-4:before {
  content: "\e900";
}
.icon-fill-4:before {
  content: "\e904";
}
.icon-mini-fill-8:before {
  content: "\e901";
}
.icon-fill-8:before {
  content: "\e905";
}
.icon-mini-fill-10:before {
  content: "\e902";
}
.icon-fill-10:before {
  content: "\e906";
}
.icon-mini-fill-26:before {
  content: "\e903";
}
.icon-fill-26:before {
  content: "\e907";
}



    :root {
      --gray:#D8D8D8;
      --light:#FFFFFF;
      --lightgray:#F2EEE8;
      --mustard:#F9B74B;
      --marron:#B68435;
      --gold:#E8B652;
      --darkgray:#6C634C;
      --lightyellow:#F8EDBF;
      --dark:#3C3C3B;


      --link-base:#FFFFFF;
      --primary-hover:red;
    }

    html, body{ height: 100%; padding: 0px; margin:0px;}
    body{ background-color: var(--darkgray); overflow-x: hidden;}

    /* COLORS */
    .gray-bg{background-color: var(--gray);}
    .marron-bg{background-color: var(--marron);}
    .gold-bg{background-color: var(--gold);}
    .mustard-bg{ background-color: var(--mustard);}
    .lightyellow-bg{ background-color: var(--lightyellow);}
    .darkgray-bg{ background-color: var(--darkgray);}
    .white-bg { background-color:#FFFFFF; }

    .darkgold-text{color:var(--darkgray);}
    .gold-text{color:var(--gold);}
    .darkgray-text{color:var(--marron);}
    .lightyellow-text{color:var(--lightyellow);}


    .doublegolden-bg{
        background:
        -webkit-linear-gradient(left, #B68435 0%, #B68435 100%),
        -webkit-linear-gradient(left, #E8B652 0%, #E8B652 100%);
        background:
        -o-linear-gradient(left, #B68435 0%, #B68435 100%),
        -o-linear-gradient(left, #E8B652 0%, #E8B652 100%);
        background:
        linear-gradient(to right, #B68435 0%, #B68435 100%) ,
        linear-gradient(to right, #E8B652 0%, #E8B652 100%); 
        background-position: left, center;
        background-size: 35%, 100%;
        background-repeat: no-repeat , no-repeat;
    }

    

    .barlow{ font-family: 'Barlow'!important;  font-weight: normal; }
    .barlow-bold { font-family: 'Barlow'!important;  font-weight: bold;}
    .empirica{ font-family: 'Empirica Head'!important; }

    .img-logo{ display: block; height: 45px;}

    a.text-primary:focus, a.text-primary:hover{ color: var(--primary-hover)!important; }
    a.btn { font-family: 'Empirica Head'!important;   font-weight: normal; padding-left: 38px; padding-right: 38px; letter-spacing: 1px;  }

    a.nav-link{
      color:var(--link-base);  font-size: 15px; transition: all 400ms; position: relative;
      font-family: 'Empirica Head'; font-weight: normal; font-style: normal;
    }
    a.nav-link:hover{ color: var(--link-hover); text-decoration:  none; }
    a.nav-link::before,a.nav-link::after{ opacity: 0;
      transition: opacity 600ms; display: block; content: ''; position: absolute; left:50%; margin-left: -4px;
      height: 10px; width: 10px; background-position: center; background-repeat:no-repeat; background-size: 8px 8px;
      background-image: url('/assets/sun@2x.png'); border:none;}
    a.nav-link::after{ top:-6px;  }
    a.nav-link::before{ bottom:-6px; }

    .nav-item.active>.nav-link::before, .nav-item:hover>.nav-link::before,
    .nav-item.active>.nav-link::after, .nav-item:hover>.nav-link::after{ opacity:1!important;}

    .fixed-top{ background-color: transparent;  transition: background-color 300ms linear;}
    .fixed-top.scrolled { background-color: var(--darkgray)!important; }

    .banner-container{ position: relative; background-color: black; overflow: hidden; height: 100vh; width: 100vw; z-index: -1;  }
    .banner-img{  position: absolute; top:0px; left:0px; right:0px; min-height: 100vh; width: auto; height: auto; z-index: 0;
      background-image: url("/pictures/main.png"); background-repeat: no-repeat; background-size: cover; background-position: center;}
    h1 { position:absolute; top:49%; font-family: 'Empirica Head'; font-weight:lighter; color:#F8EDBF; font-size: 70px; margin-left:8%; margin-right: 28%; margin-top: -70px;}

    .stars-bg{ background: url('/pictures/stars-bg.png'); 
    }

    .use-fullsize{ height: 100vh; width: 100vw; }
    .use-padding{ padding: 110px 0px;}
    .fix-navbar{margin-top: 82px; }


    h2{ font-family: 'Empirica Head'!important; font-weight:lighter; color:#F8EDBF; font-size: 60px; position: relative; line-height: 65px;}
    h2>i{ line-height:  60px; color:#E8B652;}
    h3{ font-family: 'Empirica Head'!important; font-weight:lighter; color:#F8EDBF; font-size: 50px; position: relative; line-height: 50px;}
    
    .floating-quote{ display: block; width: 100%; position: absolute; top:-80px; left:-40px;}
    
    /* BUTTONS */
    .btn-gray{ border:solid 1px #6C634C; color:#6C634C; }
    .btn-gray:hover{ background-color:#6C634C; color:#F8EDBF; }
    .float-btn { width: 70px; height: 70px; display:block; position: absolute; top:50%; left:50%; margin-top: -35px; margin-left: -35px; cursor: pointer;}

    .social-icons{ list-style: none; padding: 0px;}
    .social-icons>li{display:inline-block; padding: 0px 10px; }
.social-icons>li i{ color: #3C3C3B;}
.social-icons>li i:hover{color: #B68435;}



    .simbologia{ display: block; list-style: none; padding: 0px; padding-left: 4px;}
    .simbologia > li { line-height: 30px; font-family: 'Barlow'; letter-spacing: 1px; padding: 8px 28px 8px 0px; display: inline-block;}
    .simbologia > li > i { display:block; float:left;  height: 28px; width: 28px; border-radius: 14px; margin-right: 10px; line-height: 34px;}
    
    .available{ background-color: #057A53;}
    .locked{ background-color: #E8D703;}
    .sold { background-color: #CC0F01;}
    

    ul.with-bullet>li{ line-height: 32px;}
    ul.with-bullet>li .bullet{ font-size: 12px; margin-right: 10px; color:#E8B652; }
    ul.no-bullet{ list-style: none;  padding: 0px; }
    ul.dark-circle>li{position: relative; line-height: 38px; font-family: 'Empirica Head'!important; font-weight:lighter; font-size: 18px; padding-left: 40px; }
    ul.dark-circle>li>b{ display: block; position: absolute; height: 28px; width: 28px;  background: var(--darkgray); border-radius: 14px; text-align: center; left:0px; top:4px; color:white; margin-right: 18px; line-height: 28px;}
    ul.double-col{column-count: 2; }

    

    .empirica-light{ font-family: 'Empirica Head'!important;font-weight: 200; font-style: normal;}
    .font-15{font-size: 15px;}
    .font-20{font-size: 20px;}
    .font-50{ font-size: 50px;}
    .font-65{ font-size: 65px;}
    .font-76{ font-size: 76px; line-height: 70px;}
    .lh-95{ line-height: 95px;}

.compass{ background-image: url('/pictures/compass.svg'); background-position: bottom right; background-size: contain; background-repeat: no-repeat;}

.dropdown-menu{ border-color: #B68435; background-color: #6c634c; min-width: auto; color:white;}
.dropdown-item{ color:white;}

.breadcrumb{ background: none;}
.breadcrumb a {color:#e8b652!important; font-style: italic;}


.img-bg{ background-position: center; background-size: cover; background-repeat: no-repeat; margin-bottom: 10px; min-height: 240px; /*border: solid 5px #FFF; box-shadow: 0px 0px 4px #999; */position: relative; cursor: pointer; transition: 400ms all;}
.gallery-title{ position: absolute; bottom:10px; left:0px; right: 0px; color:white; padding: 3px 8px; margin: 0px; background: rgba(0,0,0,0.55); transition: 400ms all;}
.btn-center{ display: block; position: absolute; top:50%; left:50%; font-size: 60px; margin-left: -22px; margin-top: -22px;color: rgba(255, 255, 255, 0.8); opacity: 0; transform: scale(2.2); transition: 400ms all;}

.img-bg:hover{ box-shadow: 0px 0px 5px 2px #888; transform: rotate(-2deg);}
.img-bg:hover > .gallery-title{ background-color: rgba(0, 0, 0, 0.85);}
.img-bg:hover > .btn-center { opacity: 1; transform: scale(1);}


/*ANIMATIONS*/
.star {
	display: block;
	position: absolute;
    font-size: 28px;
    color:#E8B652;
	overflow: hidden;
	z-index: 2;
}
.star.light{color:#F8EDBF!important}

    .star.slow {
        animation: glitter 12s linear 0s infinite normal;
	-webkit-animation: glitter 12s linear 0s infinite normal;
	-moz-animation: glitter 12s linear 0s infinite normal;
	-ms-animation: glitter 12s linear 0s infinite normal;
	-o-animation: glitter 12s linear 0s infinite normal;
    }
    
    .star.fast{
        animation: glitter 5.5s linear 0s infinite normal;
	-webkit-animation: glitter 5.5s linear 0s infinite normal;
	-moz-animation: glitter 5.5s linear 0s infinite normal;
	-ms-animation: glitter 5.5s linear 0s infinite normal;
	-o-animation: glitter 5.5s linear 0s infinite normal;
    }
    
/*css3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
	0%   { -webkit-transform: scale(1.0); opacity: 1; }
	25%  { -webkit-transform: scale(0.5); opacity: 0; }
	50%  { -webkit-transform: scale(1.0); opacity: 1; }
	75%  { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0%   { -moz-transform: scale(1.0); opacity: 1; }
	25%  { -moz-transform: scale(0.5); opacity: 0; }
	50%  { -moz-transform: scale(1.0); opacity: 1; }
	75%  { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}







    @media (max-width: 992px) {
        .lg-pt{padding-top: 30px;}
        ul.double-col{column-count: 1;}
    }


    @media (max-width: 769px) {
        .md-pt{padding-top: 30px;}
        .floating-quote{ width: 85%;  top:-46px; left:0px;}
        ul.double-col{column-count: 2;}
        .md-center{text-align: center;}
        .md-full{ margin: 0px; padding: 0px;}
        .md-mt{ margin-top: 48px;}
        .use-padding{padding-top:30px; padding-bottom:30px;}
        .md-pb-0{ padding-bottom: 0px!important;}
        .md-pt-0{ padding-top: 0px!important;}
        .md-pt{ padding-top: 30px!important;}
        .md-mt-0{ margin-top: 0px!important;}
        .md-no-padding{padding-top: 0px; padding-bottom: 0px;}
        .doublegolden-bg{ background:#E8B652; }
        .fixed-top{ background-color: var(--darkgray)!important; }
        .navbar-nav{ overflow-y: scroll;}
        
        .nav-item:hover{ color:red;}
        a.nav-link::before{content:''; display: none;}
        a.nav-link::after{ left:auto; right: 30px; margin-left: 0px; background-image: url('/assets/sun@2x.png'); border:none;}
        a.nav-link::after{ top:14px  }
        
       
        .font-76{ font-size: 60px;}
        .lh-95{ line-height: 65px;}
        .font-65{ font-size: 50px;  line-height: 52px;}
        .compass{ background: none;}
    }


    @media (max-width: 741px) {
        h1{font-size: 50px!important; top:45%;}
        h3{font-size: 42px}
    }

    @media (max-width: 520px) {
        .font-76{ font-size: 48px!important; line-height: 52px; }
        h2{font-size: 40px!important; }
        .lh-95{ line-height: 55px;}
        h3{font-size: 38px}
        .fix-mt{margin-top:3rem !important}
    }