:root {
    --green-color: #005918;    
    --grey-color: #707070;    
    
    --section-margin: 2.75vw;
    --work-item-margin: 2vh;

    
    --mobile-margin: 20px;
}

html,body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
    font-family: 'Baskervville', serif;
    margin: 0;
    padding: 0;
    background:white; 
    color: var(--black-color);    
    margin:auto;
    position: relative;
}



/* HEADER */

header{
    position:fixed;
    width: 100%;
    left: 50%;
    max-width: 100%;
    transform: translate(-50%);
    top: 0px;
    z-index: 100;
    border-bottom: 0px solid #C4C4C4;
}

header .header-container{
    align-items: center;
    position: relative;
    z-index: 99;
    justify-content: normal;
    
    background: #fff;
}

header .logo-container {
    background: var(--green-color);
    padding: 20px 15px;
}
header .logo-container img {
    width: 20%;
    min-width: 300px;
}

header .logo-img{
    margin-right: 10px;
}

/* NAV */

#hamb img{cursor: pointer;}
#hamb .cross{display: none;}

nav{
    background: white;
    transition: all 0.6s ;
    width: 100%;
    
}

.nav-container {
    margin-left: 20px;
    justify-content: space-between;
    width: 100%;
}

nav .nav-item.bold {
    font-weight: bold;
    color: var(--green-color);
}

nav .nav-item.nav-item-collapsed {
    width: 80px;
    font-size: 0.9vw;
    padding: 4px 20px;
    cursor: pointer;
    position: relative;
}

nav .nav-item.nav-item-collapsed.active .nav-collapsed {
    padding: 7px ;    
    width: 80px;
    padding: 7px 20px;
}

nav .nav-item.nav-item-collapsed.active .nav-collapsed a {
    font-size: 0.9vw;    
    text-align: left;
    padding: 4px 0;
}

nav .nav-collapsed {
    position: absolute;
    background: white;
    padding: 0px;
    text-align: center;
    color: black;
    right: 0;
}

nav .nav-collapsed a {
    display: block;
}

nav .nav-item.nav-item-collapsed img{

    vertical-align: top;
    margin-top: 4px;
    width: 8px;
}

nav.active{
   transform:translate(-50%, 0%);
}

nav .nav-collapsed{
    transition: 0.5s height;
    overflow: hidden;
    height: 0;
}

nav a{
    color: var(--grey-color);
    padding: 4px 20px;
    font-size: 0.8vw;
    text-decoration: none;       
}

body.lodge nav a.lodge ,
body.estancia nav a.estancia ,
body.activities nav a.activities ,
body.walnut nav a.walnut ,
body.stables nav a.stables {
    font-weight: bold;
    color: var(--green-color);
}

header.mobile .logo-img {
    margin: 10px 0;
}

header.mobile .header-container {
    justify-content: center;
}
header.mobile #hamb {
    position: absolute;
    right: 15px;
    top: 40px;

}

header.mobile .logo-img {
    margin-right: 0;
}

nav.mobile {
    position: fixed;
    z-index: 98;
    background: white;
    top: 103px;
    left: 50%;
    width: 100%;
    border-top: 1px solid #BAB9B2;
    transition: all 0.6s;
    transform: translate(-50%, -110%);
    height: calc(100vh - 65px);
}
nav.mobile.active {
    transform: translate(-50%, 0%);
}

a.nav-item.nav-item-lang {
    display: inline-block;
    width: auto;
    margin-top: 40px;
}

a.nav-item.nav-item-lang.nav-item-active {
    color: var(--green-color);
} 

nav.mobile a {
    width: 100%;
    display: block;
    font-size: 20px;
    
}

/* main */
main{
    margin-top: 60px;
}

.wrapper {
    width: 45%;
    margin: 0 auto;
}
.wrapper-wide .wrapper {
    width: 60%;
}

/* hero-photo */
.hero-photo{
    height: calc(100vh - 100px);
    background-size: cover;
    background-position: center center;
    position: relative;
}
.hero-photo.wrapped {
    padding: 20%;
}

.hero-photo-wrapped {
    padding: 60px;
}

.hero-photo.small{
    height: 60vh;
    height: calc(100vh - 220px);
}

.hero-photo .text-container{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    color: #EAE9DE;
}

.hero-photo .text-container h3{
    line-height: 90%;
    margin-bottom: 20px;
}

.hero-photo.small h3{
    font-size: 32px;
    width: 60%;
}
.hero-photo h1 ,
.hero-photo h2 {
    font-size: 2.5rem;
    font-weight: normal;
    font-family: 'IM Fell English', serif;
}



/* title text */
.title-text {
    text-align: center;
}
.title-text h3{    
    font-size: 2.5rem;
    font-weight: normal;
    line-height: 2.5rem;
    color: var(--green-color); 
    font-family: 'IM Fell English', serif;
}

.title-text p {
    margin: 50px 0 20px;
    padding: 0 0px;
    font-size: 1.1rem;
    line-height: 1.4rem;
}

.title-text a {
    color: var(--green-color);
    text-decoration: none;
    font-size: 1.1rem;
    padding-right: 20px;
    background: url(/assets/img/home/arrow-right.svg) right center no-repeat;
    background-size: auto 50%;
    transition: all .2s ease-in-out;
} 
.title-text a:hover {
    padding-right: 30px;
}

.title-text img {
    width: 30%;
    min-width: 150px;
    margin: 60px auto;
    display: block;
} 

.title-text.smaller-image img {
    max-width: 100px;
    min-width: 50px;
}

.m-top-50 {
    margin-top: 50px;
}

.m-bottom-50 {
    margin-bottom: 50px;
}

.m-top-100 {
    margin-top: 100px;
}

.m-bottom-100 {
    margin-bottom: 100px;
}


/* footer */

footer{
    padding:15px 15px 110px;
    margin-top: 20px;
    padding-top: var(--mobile-margin);
    color:var(--green-color);
    border-top: 1px solid #BAB9B2;
    text-align: center;
}

footer a {
    color:var(--green-color);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2rem;
}

footer > div{
    justify-content: center;
}

footer .contact-us {
    margin-top: 20px;
}

footer .grid-social{
    margin-top: var(--mobile-margin);
}


.half-photo-wrapper {
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;

}
.half-photo-wrapper img {
    width: 49.9%;
    margin-bottom: 15px;
}

form {
    width: 100%;    
    max-width: 500px;
    margin: 0 auto;
    transform: translateX(-35px);
}

label{
    width: 80px;
}

.form-group {
    text-align: left;
    display: flex;
    margin-bottom: 20px;
}

form {
    overflow: hidden;
}

input, 
textarea {
    width: 100%;
    border: 1px solid #707070;
    border-radius: 0;
    padding: 10px;
}

textarea {
    resize: none;
    height: 150px;
}

section.map {

    width: 90%;
    margin: 40px auto;
    height: 80vh;
}
section.map #map {
    height: 80vh;
}

input#submit {
    width: auto;
    text-align: right;
    float: right;
    background: none;
    border: 0;
    color: var(--green-color);
    cursor: pointer;
    background: url(/assets/img/arrow-right-form.png) right center no-repeat;
    background-size: 7px auto;
    padding-right: 10px;
    font-family: 'Baskervville', serif;
    font-size: 0.8rem;
}

.map {
    margin-top: 50px;
    margin-bottom: 50px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
	  -webkit-filter: grayscale(99%); /* Chrome 19+ & Safari 6+ */
	  -webkit-backface-visibility: hidden;  /* Fix for transition flickering */
}


.mobile {
    display: block;
}
.desktop {
    display: none;
}

.hero-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.hero-link .text-container {
    transition: all .4s ease-in-out;
}
.hero-link:hover .text-container {
    transform: translate(-50%, -80%);
}


@media (min-width: 768px) {
    .desktop {
        display: block;
    }
    .mobile {
        display: none;
    }
}

@media (max-width: 768px) {
    
    .hero-photo.background-mobile-right {
        background-position: -67% center;
    }

    .hero-photo .text-container {
        left: 20%;
        transform: translate(0%, -50%);
        left: 15%;
        width: 70%;
    }
    .hero-photo-wrapped {
        padding: 10%;
    }
    .hero-photo-wrapped .hero-photo .text-container {
        width: 90%;
        left: 5%;
    }
    .wrapper {
        width: 80%;
    }
    .wrapper-wide .wrapper {
        width: 80%;
    }
    .half-photo-wrapper img {
        width: 100%;
    }
    .margin-wrapper {
        margin: 0;
    }
}