:root {
	--color0: #f9f9dc;
	--color1: #cc241d;
	--color2: #98971a;
	--color3: #d79921;
	--color4: #458588;
	--color5: #b16286;
	--color6: #689d6a;
	--color7: #7c6f64;
	--color8: #928374;
	--color9: #9d0006;
	--color10: #79740e;
	--color11: #b57614;
	--color12: #076678;
	--color13: #8f3f71;
	--color14: #427b58;
	--color15: #3c3836;
	--color16: #a89984;
	--color256: #f9f9dc;
	--color257: #3c3836;
}

* {box-sizing: border-box;}

body {
	background-color: var(--color0) !important;
	color: var(--color15);
	font-family: 'Roboto', sans-serif;
	margin: 0;
	margin-top: 0;
	padding: 0;
}

header {
	background-color: var(--color15);
	color: var(--color0);
	height: 75px !important;
	position: fixed !important;
	width: 100% !important;
	z-index: 1;
}
.title {
	float: left;
	margin-left: 35px;
}
@media only screen and (max-width: 330px) {
.title {text-indent: -9999px;}
}
.logo {
	float: left;
	margin: 7px 0 0 0;
	height: 70px;
}

.container{
	padding: 0 2rem;
	margin: 0 auto;
	display: flex;
	position: relative;
}
.container li a {text-decoration: none; color: var(--color16);}
.container ul{list-style: none;}

.logo-container{
	float: left;
	height: 70px;
}

.nav-btn{
	flex: 3;
	display: flex;
}

.nav-links{
	flex: 2;
}

.nav-links > ul{
	display: flex;
	float: right;
	justify-content: center;
	align-items: center;
}

.nav-link{
	position: relative;
}

.nav-link > a{
	line-height: 3rem;
	padding: 0 .8rem;
	letter-spacing: 1px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: .5s;
}

.nav-link > a > i{
	margin-left: .2rem;
}

.nav-link:hover > a{
	transform: scale(1.1);
    	color: var(--color0);
}

.dropdown{
	position: absolute;
	top: 100%;
	right: 0;
	width: 15rem;
	transform: translateY(10px);
	opacity: 0;
	pointer-events: none;
	transition: .5s;
}

.dropdown ul{
	position: relative;
}

.dropdown-link > a{
	display: flex;
	background: var(--color15);
	padding: .5rem 1rem;
	align-items: center;
	justify-content: space-between;
	transition: .3s;
}

.dropdown-link:hover > a{
    	color: var(--color0);
}

.dropdown-link:not(:nth-last-child(2)){
	border-bottom: 1px solid #efefef;
}

.dropdown-link i{
	transform: rotate(-90deg);
}

.dropdown-link{
	position: relative;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
	transform: translate(0, 0);
	opacity: 1;
	pointer-events: auto;
}

.hamburger-menu-container{
	flex: 1;
	display: none;
	align-items: center;
	justify-content: flex-end;
}

.hamburger-menu{
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.hamburger-menu div{
	width: 1.6rem;
	height: 3px;
	border-radius: 3px;
	background: var(--color0);
	position: relative;
	z-index: 1001;
	transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after{
	content: '';
	position: absolute;
	width: inherit;
	height: inherit;
	 background: var(--color0);
	border-radius: 3px;
	transition: .5s;
}

.hamburger-menu div:before{transform: translateY(-7px);}
.hamburger-menu div:after{transform: translateY(7px);}

#check{
	position: absolute;
	top: 50%;
	right: 1.5rem;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	z-index: 90000;
	cursor: pointer;
	opacity: 0;
	display: none;
}
#check:checked ~ .hamburger-menu-container .hamburger-menu div{background-color: transparent;}
#check:checked ~ .hamburger-menu-container .hamburger-menu div:before{transform: translateY(0) rotate(-45deg);}
#check:checked ~ .hamburger-menu-container .hamburger-menu div:after{transform: translateY(0) rotate(45deg);}

@keyframes animation{
	from{
		opacity: 0;
		transform: translateY(15px);
	}
	to{
		opacity: 1;
		transform: translateY(0px);
	}
}

@media (max-width: 800px){
.hamburger-menu-container{display: flex;}

#check{display: block;}

.nav-btn{
	position: fixed;
	height: calc(100vh - 3rem);
	top: 4.65rem;
	left: 0;
	width: 100%;
	background: var(--color15);
	color: var(--color0);
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateX(100%);
	transition: .65s;
}

#check:checked ~ .nav-btn{transform: translateX(0);}

#check:checked ~ .nav-btn .nav-link,
#check:checked ~ .nav-btn {animation: animation .5s ease forwards var(--i);}

.nav-links{
 	flex: initial;
 	width: 100%;
 }

.nav-links > ul{
        flex-direction: column;
	float: left;
}

.nav-link{
        width: 100%;
        opacity: 0;
        transform: translateY(15px);
}

.nav-link > a{
        line-height: 1;
        padding: 1.6rem 2rem;
}

.nav-link:hover > a{
        transform: scale(1);
	background: var(--color15);
	color: var(--color0);
}

.dropdown, .dropdown.second{
        position: initial;
        top: initial;
        left: initial;
        transform: initial;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
	background: var(--color15);
	color: var(--color0);
        padding: 0;
        display: none;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{display: block;}

.nav-link:hover > a > i,
.dropdown-link:hover > a > i{transform: rotate(360deg);}

.dropdown-link > a{
	background: var(--color15);
	color: var(--color0);
        padding: 1.2rem 2rem;
        line-height: 1;
}

.dropdown.second .dropdown-link > a{padding: 1.2rem 2rem 1.2rem 3rem;}

.dropdown.second .dropdown.second .dropdown-link > a{padding: 1.2rem 2rem 1.2rem 4rem;}

.dropdown-link:not(:nth-last-child(2)){border-bottom: none;}

.nav-link:hover .arrow{
	background: var(--color15);
	color: var(--color0);
}

.dropdown .dropdown .arrow{display: none;}

.dropdown-link:hover > a{
	background: var(--color15);
	color: var(--color0);
}

.dropdown-link:first-child:hover ~ .arrow{
	background: var(--color15);
	color: var(--color0);
}

.nav-link > a > i{
        transform: rotate(-90deg);
        transition: .7s;
}

.dropdown i{
        transition: .7s;
}
}

.laterale {
	float: left;
	height: 95vh;
	position: fixed;
	transform: rotate(-180deg);
	writing-mode: vertical-rl;
}
.laterale a {
	color: var(--color15);
	float: left;
	list-style: none;
	text-decoration: none;
   }
.laterale a:hover {color: var(--color1);}

@media only screen and (max-width: 600px) {
.laterale a {padding: 16px 1px 13px 5px;}
}
@media only screen and (min-width: 600px) and (max-width: 800px){
.laterale a {padding: 16px 12px 13px 3px;}
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
.laterale a {padding: 16px 15px 13px 5px;}
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
.laterale a {padding: 16px 19px 13px 5px;}
}
@media only screen and (min-width: 1200px){
.laterale a {padding: 16px 3.65% 13px 5px;}
}

.form-popup {
	display: none;
	position: fixed;
	bottom: 0;
	z-index: 9;
}

.form-container {
	max-width: 300px;
	padding: 10px;
	background-color: var(--color15);
	color: var(--color0);
	text-align: center;
}

.form-container input {
	width: 100%;
	padding: 15px;
	font-family: 'Roboto', sans-serif;
	margin: 5px 0 22px 0;
	border: none;
	background: var(--color0);
}
.form-container textarea {
	width: 100%;
	height: 95px;
	padding: 15px;
	margin: 5px 0 22px 0;
	resize: none;
	border: none;
	background: var(--color0);
}

.form-container .btn {
	background-color: var(--color2);
	color: white;
	padding: 16px 20px;
	font-family: 'Roboto', sans-serif;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:10px;
	opacity: 0.8;
}

.form-container .cancel {
	background-color: var(--color1);
}

.open-button {
	cursor: pointer;
}

.form-container .btn:hover, .open-button:hover {opacity: 1;}

.content {
	float: right;
	width: 95%;
	height: 100%;
	margin-top: 75px;
	padding-right: 5%;
	vertical-align: center;
	text-align: center;
}
.content a {text-decoration: var(--color1); color: var(--color1);}
.content img {float: left; margin: 60px; width: 30%;}
.content p {font-family: 'Roboto', sans-serif; font-style: italic;}

@media only screen and (max-width: 445px) {
.content {text-align: center;}
.content img {width: 64.5%;}
}
@media only screen and (min-width: 445px) and (max-width: 800px){
.content img {float: left; margin: 60px; width: 35%;}
}

.tz-gallery {
	float: right;
	width: 95%;
	margin-top: 75px;
	column-count: 3;
	column-gap: 1px;
	padding-right: 5%;
}
.item {
	display: block;
	max-width: 100%;
	text-align: center;
	padding: 10px;
}
.item img{max-width:100%; height: auto;}

@media only screen and (max-width: 600px) {
.tz-gallery {
	column-count: 1;
    }
}
@media only screen and (min-width: 600px) and (max-width: 800px){
.tz-gallery {
        column-count: 2;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
.tz-gallery {
        column-count: 3;
    }
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
.tz-gallery {
        column-count: 4;
    }
}
@media only screen and (min-width: 1200px){
.tz-gallery {
        column-count: 5;
    }
}
.baguetteBox-button {
    background-color: transparent !important;
}

.footer {
	color: var(--color16);
	position: fixed;
	bottom: 0;
	right: 0;
	transform: rotate(-180deg);
	writing-mode: vertical-rl;
}