.avenir{font-family: avenir;}
.transition-alt{transition: all 1s}
/* .mask{background: rgba(0,0,0,.74)} */
.mask{background: linear-gradient(0deg, rgba(90, 55, 49, 0.72), rgba(90, 55, 49, 0.72))}
.mask-alt{background: rgba(0, 0, 0, 0.5)}

.shadow{box-shadow: 3px 4px 11px 2px rgba(0, 0, 0, 0.22);}
.shadow-alt{box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .1);}

.text-shadow{text-shadow: 0px 4px 4px rgba(0, 0, 0, .25);}
.text-shadow-white{text-shadow: 0px 0px 4px rgba(255, 255, 255, .25);}

.icon.arrow-right-alt{background-image:  url("../icons-alt/right-arrow.svg");}
.icon.arrow-left-alt{background-image:  url("../icons-alt/right-arrow.svg");transform: rotate(180deg)}
.icon.arrow-down{background-image:  url("../icons-alt/right-arrow.svg");transform: rotate(90deg)}


@media(max-width:768px){
    #menu{max-height: 100vh; overflow: auto; left: 100%}
    #menu.opened{left: 0%}
}

@media(min-width:768px){
    #menu li{transition: all .5s;}
    #menu li ul{display: none; max-width: 25vw; width: 25vw}
    #menu li:hover{font-weight : 700}
    #menu li:hover ul{display: block; border-color: rgba(255,255,255,.15)}
    #menu li:hover ul li{border-color: rgba(255,255,255,.15)}
    #menu li ul li:hover{background-color: var(--gray-color);}
}

@media(max-width:768px){
    #menu li ul{display:none; max-width: auto;width: 100%}
    #menu li ul.opened{display: block;}
}

li.menu.active > span, li.menu.active > a{color: var(--warning-color); font-weight: bold}
#homeBanner{height: calc(100vh - var(--header-height));}

.about-fig{min-height : 30vw; height : 30vw;}
#home-article figure, .articles figure, .oeuvres figure, .oeuvre-fig{min-height : 26.67vw; height : 26.67vw;}
#last-video figure{min-height : 13vw; height : 13vw;}
.artists figure{min-height: 14.89583vw; height: 14.89583vw; min-width: 14.89583vw; width: 14.89583vw; border: 23px solid var(--success-color);}
.footer-fig{min-height : 60.4167vw; height : 60.4167vw;}
#contacts .media a {width : 3.33vw; height : 3.33vw;}
#contacts .map{min-height: 20vw; height: 20vw;}
#header .media a {width : 2vw; height : 2vw;}
::placeholder {color: var(--white-color);}
.os-filter::placeholder, #contacts ::placeholder, #reservations ::placeholder  {color: var(--success-color);}


@media(max-width:768px){
	/* #homeBanner{min-height: 200px; height: 200px} */
	.footer-fig{min-height : 300px; height : 300px;}
	.artists figure{height: 150px; width: 150px; border: 5px solid var(--success-color);}
	#contacts .media a {width : 30px; height : 30px;}
	#contacts .map{min-height: 150px; height: 150px;}
	#header .media a {width : 20px; height : 20px;}
}
.yt-preview{width: 56.5625vw; height: 31.6145vw}
.flickr-frame, .youtube-frame, #article .slide-box{height: 38vw;}
.encart figure, .video figure{height: 15vw}
.encart-alt figure{height: 10vw}
textarea{height: 12vw}

@media(max-width:768px){
	.quote{transform: translateY(-60%)}
	.quote span{font-size: 80px;}
	.yt-preview{width: 80vw; height: 40vw}
	.encart figure{height: 125px}
	.video figure{height: 180px}
	.encart-alt figure{height: 90px}
	.flickr-frame, .youtube-frame, #article .slide-box{height: 220px;}
	textarea{height: 100px}
}

#homeSlider  .slide{
	-webkit-transition: all 1s;
	transition: opacity 2s, z-index .2s 1.8s;
    position: absolute;
    left:0;
    top:0;
    overflow: hidden;
    opacity: 0;
    z-index: 0;
}
#homeSlider  .slide.active{opacity: 1; z-index: 1;}
#homeSlider .slide-dot.active{
	background-color: #fff;
}

/* .special, #menu li:hover > * > span{position: relative;} */
/* .special::before, .special::after, #menu li:hover a span, #menu li:active a span, #menu li:active span span{ */
	/* border-bottom : 2px solid var(--success-color); */
	/* transition: all .5s; */
/* } */

/* .special::before, .special::after, #menu li:hover > * > span::before, #menu li:hover > * > span::after{ */
    /* position: absolute; */
    /* height: var(--1px); */
    /* content: ""; */
    /* display: block; */
    /* right: 0px; */
    /* background: var(--warning-color); */
    /* transition: all .5s; */
    /* z-index: 1; */
/* } */

/* .special::before, #menu li:hover > * > span::before{ */
    /* bottom: calc(-1 * var(--1px)); */
    /* padding: 0px var(--20px); */
/* } */
/* .special::after, #menu li:hover > * > span::after{ */
    /* bottom: calc(-1 * var(--4px)); */
    /* padding: 0px 0px 0px var(--25px); */
/* } */
/* .special:hover::after{padding: 0px var(--20px);} */

/* .special.sl-black::before, .special.sl-black::after {background: var(--black-color)} */


#search .os-tab-head.active{
	border: 1px solid rgb(245,245,245);
	border-bottom: none;
	font-weight: 600;
}

#search .tabs{
	border: 1px solid rgb(245,245,245);
	border-top: none;
}
.article table{border-collapse: collapse;}
.article table *{border-color: var(--gray-color)}
.article table td{padding: var(--10px) calc(2 * var(--10px))!important; text-align: left!important}

.title-h2{margin-top: var(--10pxms); font-weight: 600; color: var(--success-color); text-transform: uppercase}
.title-h3{padding-left: calc(3 * var(--10px)); margin-top: var(--5px)}
.title-h4{padding-left: calc(3 * var(--20px)); margin-top: var(--5px)}
.title-h2{
	padding-top: var(--5px);
	padding-bottom: var(--5px);
	border-bottom: 1px solid #bfbfbf;
}