@font-face {
    font-family: Mondwest;
    font-weight: 600;
    font-style: normal;
    src: url("fonts/Mondwest-Bold.otf") format("opentype");
}
@font-face {
    font-family: Mondwest;
    font-weight: 400;
    font-style: normal;
    src: url("fonts/Mondwest-Regular.otf") format("opentype");
}


body { 
font-family: 'Mondwest', sans-serif;
 font-weight: 400;
 margin: 0;  
 padding: 0; 
 color: #1A1A1A;
 background: #F2F2F2;
}

a { color: #1A1A1A; text-decoration: none; }
h2 {padding-left:16px; font-size: 2.25rem;  font-weight: 400; margin: 20px 0;}
h3 {padding-left:16px; font-size: 1.5rem;  font-weight: 400; margin: 6px 0;     padding-top: 7px;}
h4 { padding-left:16px; font-size: 1.125rem;  font-weight: 400; margin: 6px 0;}
h5 { padding-left:16px; font-size: 1.25rem;  font-weight: 400; margin: 6px 0;}

.btn {
    display: block;
    width: fit-content;
    padding: 0 30px;
    height: 50px; 
    line-height: 54px; 
    font-size: 1.25rem; 
    text-align: center; 
    border-bottom: 2px solid #1A1A1A; 
    border-right: 2px solid #1A1A1A;
    margin:10px auto;
    background-color: #FFF;
}
.btn svg {padding-left:30px;     margin-bottom: -5px;}

input, select { font-family: 'Mondwest', sans-serif; font-weight: 600; }
.clear {clear: both;}
.close {display: inline-block; cursor: pointer;}

@media only screen and (min-width: 768px) {
    .only-mobile {display: none}
}

.body-wrap { 
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    position: relative;}

header {
	position: relative;
    transition: all .5s;
}

.container {
    position: relative;
}

header .top-bar {
   box-sizing: border-box;
    width: 100%;
    height: 60px;
    background-color: #F2F2F2;
    border-bottom: 2px solid #1A1A1A;
    position: relative;
}

header .menu {
    float: left; 
    display: inline-block;
     padding:15px; 
     cursor: pointer;
 }

header .open-menu {
    position: absolute; 
    top:0; 
    left:0; 
    background-color: #CCFF66; 
    width: 60px; 
    height: 60px; 
    padding-top: 16px; 
    text-align: center; 
    display: none; 
    border-right: 2px solid #1A1A1A; 
    cursor: pointer;
}
header .nav {
    position: absolute; 
    top:60px; z-index: 20; 
    left:0; 
    background-color: #CCFF66; 
    width: 100%;  
    text-align: left; 
    display: none;   
    border-bottom: 2px solid #1A1A1A;
}
header .nav ul {
    margin:30px 16px; 
    padding: 0; 
}
header .nav ul li {
    font-size:2.25rem; 
    color:#1A1A1A; 
    list-style: none; 
    padding:16px 0; 
}

header .nav ul li ul{ display: none;}




header .lang-switch {
    float: right; 
    display: inline-block; 
    padding: 0 16px; 
    line-height: 60px;
}

header .logo { 
    display: inline-block; 
    margin: 8px auto; 
    padding-left: 40px;
}
header .logo:hover { 
    transform: rotate(10deg); 
}
header .container {
    text-align: center;
}


.artist-menu {
    padding: 30px 0px 0px; 
    margin:0; 
    background-color: #FFF; 
    position: relative;     
    width: 100%;
}
.artist-menu ul {
    margin: 0; 
    padding: 0; 
    text-align: center;  
    position: relative;    
    width: 100%;
}



.artist-menu ul li  { 
    width: 184px;
    height:184px; 
    list-style: none;
    background-color: #CCFF66; 
    display: inline-block;
    margin:4px 4px;
    box-sizing: border-box;
    text-align: center;
    font-size: 5rem;
    border-right:2px solid #000000;
    border-bottom: 2px solid #000000;
     overflow: hidden;
     position: relative;
     }

 .artist-menu ul li .li-in {width: 170px; display: inline-block; line-height: 176px;}
 .artist-menu ul li.rd3 {width:552px;} 
 .artist-menu ul li.rd2 {width:365px;}  
  .artist-menu ul li .li-in.chess svg { width:35%; height: auto;}
  .artist-menu ul li .dots {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 80%;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    display: block;
    text-align: center;
    line-height: 6px;
    }
  .artist-menu ul li  .dots svg {display: inline-block; margin:3px;}


@media only screen and (min-width: 800px){
    .artist-menu ul li .li-in {  width: 176px; line-height: 188px;}
    .artist-menu ul li  { width: 184px; height: 184px;  font-size: 7.25rem; }
    .artist-menu ul li.rd3 {width:573px;} 
    .artist-menu ul li.rd2 {width:378px;} 
	.artist-menu ul li .li-in.chess svg { width:42%; height: auto; }
    .artist-menu ul li .dots {top: 77%; height: 14px;}
 } 

@media only screen and (max-width: 640px) {
    .artist-menu ul li .li-in {  width: 110px; line-height: 110px;}
    .artist-menu ul li  { width: 110px; height: 110px;  font-size: 3.25rem; }
    .artist-menu ul li.rd3 {width:345px;} 
    .artist-menu ul li.rd2 {width:230px;}  
 } 

@media only screen and (max-width: 440px) {
    .artist-menu ul li .li-in {  width: 90px; line-height: 90px;}
    .artist-menu ul li  { width: 90px; height: 90px;  font-size: 2.75rem;}
    .artist-menu ul li.rd3 {width:290px;} 
    .artist-menu ul li.rd2 {width:190px;}  
 } 

 @media only screen and (max-width: 414px) {
    .artist-menu ul li .li-in {  width: 80px; line-height: 90px; }
    .artist-menu ul li  { width: 88px; height: 88px;  font-size: 3.38rem; }
    .artist-menu ul li.rd3 {width:285px;} 
    .artist-menu ul li.rd2 {width:186px;}
	.artist-menu ul li .li-in.chess svg { width:40%; height: auto; }
    .artist-menu ul li .dots {top: 77%;}
 } 
@media only screen and (max-width: 390px) {
    .artist-menu ul li .li-in {  width: 82px;  line-height: 88px;}
    .artist-menu ul li  { width: 82px; height: 82px;  font-size: 3.04rem;}
    .artist-menu ul li.rd3 {width:267px;} 
    .artist-menu ul li.rd2 {width:174px;}
	.artist-menu ul li .li-in.chess svg { width:40%; height: auto; }
    .artist-menu ul li .dots {top: 77%;}
 } 

@media only screen and (max-width: 375px) {
    .artist-menu ul li .li-in {  width: 78px;  line-height: 82px;}
    .artist-menu ul li  { width: 78px; height: 78px;  font-size: 2.84rem;}
    .artist-menu ul li.rd3 {width:256px;} 
    .artist-menu ul li.rd2 {width:167px;}
	.artist-menu ul li .li-in.chess svg { width:40%; height: auto; }
    .artist-menu ul li .dots {top: 77%;}
 } 

@media only screen and (max-width: 360px) {
    .artist-menu ul li .li-in {  width: 74px;  line-height: 78px;}
    .artist-menu ul li  { width: 74px; height: 74px;  font-size: 2.78rem;}
    .artist-menu ul li.rd3 {width:243px;} 
    .artist-menu ul li.rd2 {width:158px;}
	.artist-menu ul li .li-in.chess svg { width:40%; height: auto; }
    .artist-menu ul li .dots {top: 77%;}
 }  

@media only screen and (max-width: 340px) {
    .artist-menu ul li .li-in {  width: 67px;  line-height: 67px;}
    .artist-menu ul li  { width: 67px; height: 67px;  font-size: 2.15rem;}
    .artist-menu ul li.rd3 {width:222px;} 
    .artist-menu ul li.rd2 {width:145px;}    
 }   

 


#popup-green {cursor: pointer; height: 100%;}


.programma {
    width:100%; 
    background-color: #FFF; 
    padding:16px 0px 30px;     
    box-sizing: border-box;
    position: relative;
}

.programma img {
 width: 100%;
}

.programma p {
    padding: 0px 0px 10px; 
    margin: 0; 
    color: #555; 
    font-size: 1rem; 
    line-height: 1.5rem;
}

.programma .text-wrap {
    padding: 0px 16px; 
    margin: 0; 
    color: #555; 
    font-size: 1rem; 
    line-height: 1.5rem;
}
.programma .text-wrap h3 {
	padding-left: 0px;
}

.back {
    height: 40px; 
    line-height: 42px; 
    background-color: #FFF;
    border-bottom:2px solid #1A1A1A;
    width: 100%;
    box-sizing: border-box;
    padding-left:16px;
    font-size: 1.125rem;
}

.back .wrap {display: inline-block; }
.back svg {
    margin-right: 16px; 
    vertical-align: middle;
    margin-top: -4px;
    }
.back .listen {float: right; cursor: pointer;} 


.audio {width:100%; display: none; border-bottom:2px solid #1A1A1A; }
.audio audio {width: 100%;}

.programma.kuratora {
    border-bottom:2px solid #1A1A1A; 
    background-color: #F2F2F2;  
    border-top:2px solid #1A1A1A;
	margin-top: -2px;
}

.programma.kuratora h5{
    padding-left:0px;
}

.sponsors {
    width:100%; 
    background-color: #FFF; 
    padding:40px 0 40px 0;     
    box-sizing: border-box;
}

.prog-item {margin-bottom: 70px;}


.sponsors  img {
    width: 100%; 
    vertical-align: middle;
}
.sponsors h3 {
    font-size: 1.5rem; 
    font-weight: 400;
	padding-left: 16px;
}

footer {
    width:100%; 
    height:60px; 
    line-height: 60px;
    border-top:2px solid #1A1A1A;
}
footer .copyright {
    padding-left:16px; 
    background-color: #CCFF66; 
}



.artist-name {font-size: 1.375rem; text-align: center; margin: 10px 0;}
.artists-work {width:100%; text-align: center; font-size: 2.25rem; }
.artists-work .arrow-left {float: left; display: inline-block; margin-left:16px;}
.artists-work .arrow-right {float: right; display: inline-block; margin-right:16px;}

.artists-work .work-name {display: inline-block; width:600px;}

@media only screen and (max-width: 414px) {
.artists-work .work-name {display: inline-block; width:300px;}
}

@media only screen and (max-width: 375px) {
.artists-work .work-name {display: inline-block; width:270px;}
}

@media only screen and (max-width: 360px) {
.artists-work .work-name {display: inline-block; width:260px;}
}

.work-year {text-align: center; width: 100%; margin: 3px 0 8px;}
.artist-dots {text-align: center; width: 100%; margin:6px 0 15px;}
.artist-dots .dots svg {margin:2px; }

.sm-img {padding:8px; margin-bottom: 20px;}
.sm-img img {margin:6px; width:80px; cursor: pointer;}

.top-accord {
    width: 100%;
    border-bottom: 2px solid #1A1A1A;
    font-size: 1.5rem;
    line-height: 65px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    padding: 5px 16px 0;

}


.top-accord.first { 
       border-top: 2px solid #1A1A1A; 
}


.sub-accord {
    width:100%; display: none;
}

.top-accord.open .sub-accord {
    display: block; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: initial; 
    transition: height 0.5s linear; 
    padding: 0;
}

.top-accord.open .sub-accord.artists, .top-accord.open .sub-accord.programme { background-color: #F7F7F7; border-top:1px solid #282828; }

.top-accord.open .sub-accord.artists .wrap {width: 100%; padding: 0 16px; box-sizing: border-box; columns: 3;     line-height: 1.75rem;}
.top-accord.open .sub-accord.programme .wrap {width: 100%; padding: 0 16px; box-sizing: border-box; columns: 1;   line-height: 1.75rem;}
.top-accord.open .sub-accord.artists .wrap a, .top-accord.open .sub-accord.programme .wrap a {color: #282828; }
.top-accord.open .sub-accord.artists .wrap a:hover, .top-accord.open .sub-accord.programme .wrap a:hover {text-decoration: underline; }

.accord-ico-wrap {
  float: right;
  width: 30px;
  height: 20px;
  box-sizing: border-box;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
    margin-top: 22px;
}

.accord-ico {
  width: 30px;
  height: 40px;
  position: absolute;
  top:0;
  transition: 0.2s;
}

.top-accord.open .accord-ico{
 top:-20px;
}


.map {width: 100%; position: relative;}
.map img {width:100%;}
.map .lc {position: absolute; height: 5.5%; width: 9%; }
.map .lc.rd2{width:20%;}
.map .lc.rd3{width:30%;}
.map .lc:hover {border:2px solid black;}