/**************************
**** VARIABLES | BEGIN ****
**************************/

@font-face {
     font-family: 'RobotoSlab';
     src: url('../fonts/RobotoSlab/RobotoSlab-Medium.ttf') format('truetype');
}
@font-face {
     font-family: 'RobotoSlabLight';
     src: url('../fonts/RobotoSlab/RobotoSlab-Light.ttf') format('truetype');
}
@font-face {
     font-family: 'RobotoSlabSemiBold';
     src: url('../fonts/RobotoSlab/RobotoSlab-SemiBold.ttf') format('truetype');
}
@font-face {
     font-family: 'Alata';
     src: url('../fonts/Alata/Alata.ttf') format('truetype');
}
@font-face {
     font-family: 'CrimsonText';
     src: url('../fonts/CrimsonText/CrimsonText.ttf') format('truetype');
}
:root {
     --color-primary: #A78363;
     --color-oldprimary: #82926B;
     --color-secondary: #F8F3ED;
     --color-oldsecondary: #C28E60;
     --color-tertiary: #554130;
     --color-light: #F8F3ED;
     --color-dark: #2C2828;

     --font-roboto: 'RobotoSlab';
     --font-robotolight: 'RobotoSlabLight';
     --font-robotosemibold: 'RobotoSlabSemiBold';
     --font-londrina: "Londrina Solid", sans-serif;
     --font-gabarito: "Gabarito", serif;
     --font-averia: "Averia Sans Libre", sans-serif;
     --font-secondary: 'Alata';
     --font-oldsecondary: 'Alata';
     --font-tertiary: 'CrimsonText';
     --font-oldtertiary: 'CrimsonText';

     --font-light: 300;
     --font-regular: 400;
     --font-medium: 500;
     --font-semibold: 600;
     --font-bold: 700;
     --font-extrabold: 800;
     --font-black: 900;

     --font-size-xxs: clamp(11px, 1vw, 13px);
     --font-size-xs: clamp(14px, 1vw, 16px);
     --font-size-s: clamp(15px, 1.2vw, 20px);
     --font-size-m: clamp(17px, 1.25vw, 25px);
     --font-size-xm: clamp(27px, 1.88vw, 34px);
     --font-size-l: clamp(28px, 2.65vw, 48px);
     --font-size-xl: clamp(33px, 3.8vw, 60px);
     --font-size-xxl: clamp(46px, 5.06vw, 140px);

     --line-height-xxs: clamp(11px, 1.1vw, 13px);
     --line-height-xs: clamp(16px, 1.1vw, 19px);
     --line-height-s: clamp(17px, 1.3vw, 21px);
     --line-height-m: clamp(22px, 1.5vw, 26px);
     --line-height-xm: clamp(26px, 1.8vw, 32px);
     --line-height-l: clamp(30px, 2.68vw, 50px);
     --line-height-xl: clamp(34px, 3.82vw, 62px);
     --line-height-xxl: clamp(46px, 5.06vw, 140px);

     --space-xxsmall: clamp(5px, 0.4vw, 10px);
     --space-xsmall: clamp(8px, 1.8vw, 22px);
     --space-small: clamp(10px, 2.2vw, 50px);
     --space-normal: clamp(12px, 6vw, 200px);
     --space-medium: clamp(16px, 12vw, 260px);
     --space-large: clamp(14px, 18vw, 148px);
     --space-xlarge: clamp(100px, 20vw, 200px);

     --header-height : clamp(80px,13vw,140px);
     --header-smallheight : clamp(58px,9vw,78px);
}
/*
@media screen and (max-width: 1920px) {
     :root {
          --space-normal: clamp(12px, 5.5vw, 150px);
          --space-medium: clamp(16px, 8vw, 200px);
     }
}
@media screen and (max-width: 1199px) {
     :root {
          --space-normal: clamp(12px, 5vw, 70px);
          --space-medium: clamp(16px, 6vw, 80px);
     }
}
*/

/************************
**** VARIABLES | END ****
************************/

/*****************************
**** HEADER STYLE | BEGIN ****
*****************************/

body {
     margin: 0;
     position: relative;
     background-color: #c0a68e;
}
header {
     width: 100%;
     height: var(--header-height);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0;
     position: fixed;
     top: 0;
     left: 0;
     transition: 0.2s;
     z-index: 9;
}
header.smallnav {
     height: var(--header-smallheight);
     background-color: var(--color-secondary);
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
     transition: 0.2s;
}
header.smallnav .burger {
     top: 6px;
     transition: 0.2s;
}
.cursorpointer {
     cursor: pointer;
}
#home-logo {
     display: block;
     height: 85%;
     width: auto;
     position: relative;
     margin-left: var(--space-normal);
     overflow: hidden;
}
#home-logo img {
     height: 100%;
     width: 100%;
     position: relative;
     object-fit: scale-down;
}
header.smallnav #home-logo img {
     position: relative;
     width: 100%;
     height: 100%;
}
#main-nav {
     position: relative;
     width: 90%;
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     margin-right: var(--space-normal);
     transition: 0.24s;
}
.main-nav-item {
     width: auto;
     height: 100%;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     position: relative;
}
.main-nav-mainitem {
     position: relative;
     text-decoration: none;
     color: var(--color-tertiary);
     width: auto;
     height: 100%;
     text-align: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     font-size: var(--font-size-m);
     font-weight: var(--font-medium);
     line-height: var(--line-height-xxl);
     letter-spacing: 0;
     font-family: var(--font-averia);
     padding: 0 var(--space-xsmall);
     z-index: 1;
     transition: 0.28s;
     background-color: transparent;
}
.main-nav-item:hover .main-nav-mainitem {
     transition: 0.28s;
     color: black;
     text-shadow: 0 0 6px #00000007;
     background-color: white;
}
.main-nav-subitems {
     opacity: 0;
     display: none;
     position: absolute;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     top: var(--header-height);
     z-index: 2;
     left: 0;
     width: auto;
     min-width: 100%;
     padding: 0;
     background-color: transparent;
     border-radius: 2px;
     transition: 0.28s;
}
header.smallnav .main-nav-subitems {
     top: var(--header-smallheight);
}
.main-nav-item:hover .main-nav-subitems {
     opacity: 1;
     display: flex;
     transition: 0.28s;
}
.main-nav-subitem {
     position: relative;
     text-decoration: none;
     color: white;
     width: 100%;
     height: 100%;
     text-align: left;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
     white-space: nowrap;
     padding: calc(8px + 0.25vw) calc(6px + 0.25vw);
     font-size: var(--font-size-s);
     line-height: var(--line-height-m);
     letter-spacing: 0.5px;
     font-family: var(--font-secondary);
     text-shadow: 0 0 0 #00000050;
     box-shadow: 0 0 0 #00000050;
     transition: 0.28s;
     background-color: var(--color-primary);
}
.main-nav-subitem:hover {
     transition: 0.28s;
     color: black;
     box-shadow: 0 0 16px #00000081;
     background-color: white;
}
.logomobile {
     display: none;
}

/* BURGER MENU */
.burger {
     width: 50px;
     height: 50px;
     position: fixed;
     top: 20px;
     right: 20px;
     border-radius: 4px;
     z-index: 10;
     display: none;
}
.burger span {
     position: relative;
     margin-top: 9px;
     margin-bottom: 9px;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-left: -15px;
     margin-top: -1.5px;
}
.burger span, .burger span::before, .burger span::after {
     display: block;
     width: 30px;
     height: 3px;
     background-color: var(--color-primary);
     outline: 1px solid transparent;
     -webkit-transition-property: background-color, -webkit-transform;
     -moz-transition-property: background-color, -moz-transform;
     -o-transition-property: background-color, -o-transform;
     transition-property: background-color, transform;
     -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
     -o-transition-duration: 0.3s;
     transition-duration: 0.3s;
}
.burger span::before, .burger span::after {
     position: absolute;
     content: "";
}
.burger span::before {
     top: -9px;
}
.burger span::after {
     top: 9px;
}
.burger.clicked span {
     background-color: transparent;
}
.burger.clicked span::before {
     -webkit-transform: translateY(9px) rotate(45deg);
     -moz-transform: translateY(9px) rotate(45deg);
     -ms-transform: translateY(9px) rotate(45deg);
     -o-transform: translateY(9px) rotate(45deg);
     transform: translateY(9px) rotate(45deg);
}
.burger.clicked span::after {
     -webkit-transform: translateY(-9px) rotate(-45deg);
     -moz-transform: translateY(-9px) rotate(-45deg);
     -ms-transform: translateY(-9px) rotate(-45deg);
     -o-transform: translateY(-9px) rotate(-45deg);
     transform: translateY(-9px) rotate(-45deg);
}
.burger:hover {
     cursor: pointer;
}
nav.burgermenu {
     background-color: var(--color-secondary);
     display: none;
     position: fixed;
     z-index: 9;
     top: 0;
     right: 0;
     height: calc(100vh - var(--space-medium)*2);
     box-shadow: unset;
     max-width: 320px;
     width: 100%;
     padding: var(--space-medium) var(--space-normal);
     overflow-y: auto;
     -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
     -ms-transform: translateX(100%);
     -o-transform: translateX(100%);
     transform: translateX(100%);
     -webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     -moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     -o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
     transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
nav.burgermenu.show {
     -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
     -ms-transform: translateX(0px);
     -o-transform: translateX(0px);
     transform: translateX(0px);
     box-shadow: 0 0 85px #000000a6;
}
nav.burgermenu.show ul.main li {
     -webkit-transform: translateX(0px);
     -moz-transform: translateX(0px);
     -ms-transform: translateX(0px);
     -o-transform: translateX(0px);
     transform: translateX(0px);
     opacity: 1;
}
nav.burgermenu.show ul.main li:nth-child(1) {
     transition-delay: 0.15s;
}
nav.burgermenu.show ul.main li:nth-child(2) {
     transition-delay: 0.3s;
}
nav.burgermenu.show ul.main li:nth-child(3) {
     transition-delay: 0.45s;
}
nav.burgermenu.show ul.main li:nth-child(4) {
     transition-delay: 0.6s;
}
nav.burgermenu.show ul.main li:nth-child(5) {
     transition-delay: 0.75s;
}
nav.burgermenu.show ul.main li:nth-child(6) {
     transition-delay: 0.9s;
}
nav.burgermenu.show ul.main li:nth-child(7) {
     transition-delay: 1.05s;
}
nav.burgermenu.show ul.main li:nth-child(8) {
     transition-delay: 1.2s;
}
nav.burgermenu.show ul.main li:nth-child(9) {
     transition-delay: 1.35s;
}
nav.burgermenu.show .about, nav.show .social, nav.show ul.sub {
     -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
     -ms-transform: translateY(0px);
     -o-transform: translateY(0px);
     transform: translateY(0px);
     opacity: 1;
     transition-delay: 0.85s;
}
nav.burgermenu ul.main {
     list-style-type: none;
     padding: 0 0 0 28px;
}
nav.burgermenu ul.main li {
     margin-bottom: 20px;
     -webkit-transform: translateX(40px);
     -moz-transform: translateX(40px);
     -ms-transform: translateX(40px);
     -o-transform: translateX(40px);
     transform: translateX(40px);
     opacity: 0;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
nav.burgermenu ul.main li:last-of-type {
     margin-bottom: 0px;
}
nav.burgermenu ul.main li a {
     text-decoration: none;
     display: block;
     padding: calc(4px + 0.2vw) 0;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
nav.burgermenu ul.main li a:hover {
     color: var(--color-tertiary);
}
nav.burgermenu .about {
     margin-top: 40px;
     -webkit-transform: translateY(30px);
     -moz-transform: translateY(30px);
     -ms-transform: translateY(30px);
     -o-transform: translateY(30px);
     transform: translateY(30px);
     opacity: 0;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
}
nav.burgermenu .about p {
     color: #ffffff;
     font-family: "Spectral", serif;
     font-size: 1.05rem;
     letter-spacing: 0.5px;
     line-height: 170%;
}
nav.burgermenu .social {
     margin-top: 40px;
     position: relative;
     padding: 0 0 30px 28px;
     -webkit-transform: translateY(30px);
     -moz-transform: translateY(30px);
     -ms-transform: translateY(30px);
     -o-transform: translateY(30px);
     transform: translateY(30px);
     opacity: 0;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
}
nav.burgermenu .social a {
     display: inline-block;
     width: 30px;
     height: 30px;
     margin-right: 25px;
}
nav.burgermenu .social a:last-of-type {
     margin-right: 0px;
}
nav.burgermenu .social a:hover svg path, nav .social a:hover svg circle {
     fill: #b7ac7f;
}
nav.burgermenu .social a svg {
     width: 100%;
     height: 100%;
}
nav.burgermenu .social a svg path, nav .social a svg circle {
     fill: #ffffff;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
nav.burgermenu.show .social {
     opacity: 1;
}
nav.burgermenu ul.sub {
     list-style-type: none;
     margin-top: 40px;
     -webkit-transform: translateY(30px);
     -moz-transform: translateY(30px);
     -ms-transform: translateY(30px);
     -o-transform: translateY(30px);
     transform: translateY(30px);
     opacity: 0;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
}
nav.burgermenu ul.sub li {
     margin-bottom: 10px;
}
nav.burgermenu ul.sub li:last-of-type {
     margin-bottom: 0px;
}
nav.burgermenu ul.sub li a {
     color: #ffffff;
     font-family: "Raleway", sans-serif;
     letter-spacing: 1px;
     font-size: 0.9rem;
     text-decoration: none;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
nav.burgermenu ul.sub li a:hover {
     color: #b7ac7f;
}
.overlay {
     position: fixed;
     display: none;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     opacity: 0;
     visibility: hidden;
}
.overlay.show {
     opacity: 0.8;
     visibility: visible;
}

@media screen and (min-width: 1921px) {
     .main-nav-mainitem {
          padding: 0 var(--space-small);
     }
}
@media screen and (max-width: 991px) {
     .logomobile {
          display: block;
     }
     .logodesktop {
          display: none;
     }
}
@media screen and (max-width: 959px) {
     #main-nav {
          display: none;
     }
     .burger, nav.burgermenu, .overlay {
          display: block;
     }
}
@media screen and (max-width: 767px) {

}

/***************************
**** HEADER STYLE | END ****
***************************/