@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Spectral&display=swap');





body { 

font-family: 'Spectral', serif;

 font-weight: 400;

 margin: 0;  

 padding: 0; 

 color: #000;

 background: #FFF;

}



h2, h3, h4, h5 {font-family: 'IBM Plex Sans', sans-serif;}

a { color: #1A1A1A; text-decoration: none; }

h2 {padding-left:16px; font-size: 2.25rem;  font-weight: 400; margin: 20px 0;}

h3 {font-size: 1.5rem; font-weight: 700; margin: 0; padding-top: 7px; border-bottom: 10px solid #000; width: 90%; padding: 0;}

h4 { font-size: 1rem;  font-weight: 700; margin: 6px 0;}

h5 {  font-size: 0.8rem;  font-weight: 700; margin: 6px 0;}


blockquote {  font-size: inherit; border: none; padding: 0; margin: 0; margin-top: 20px;overflow-y: hidden; max-height: 100px; position: relative;}
blockquote::after {content: 'Expand text';  width: 100%; background-image: linear-gradient(transparent, transparent, #ffffff); position: absolute;
    bottom: 0; z-index: 10; display: block; text-align: center; padding-top: 100px; text-decoration: underline;    cursor: pointer;}

blockquote.full {height: 100%; overflow: inherit; max-height: inherit; }
blockquote.full::after {content: inherit;}

.btn {

    display: block;

    width: fit-content;

    padding: 0 30px;

    height: 50px; 

    line-height: 50px; 

    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: 'Spectral', 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: 1200px;

    margin-right: auto;

    margin-left: auto;

    position: relative;

    height: 100%;

}



header {

	position: relative;

    transition: all .5s;

}



header .top-bar {

    box-sizing: border-box;

    width: 100%;

    height: 120px;

    background-color: #C3FFE7;

    position: relative;

    border-bottom:  10px solid #000;

}



header .logo { 

    display: inline-block; 

    margin: 22px auto; 

    padding-left: 20px;

}

header .logo img { 

height: 70px;

}



header .nav { 

    text-align: left; 

    display: none;

    background-color: #FFF;

    width: 100%;

    position: relative;

    z-index: 10;

}



header .nav ul {

    margin: 1.4em;

    padding: 0; 



}



header .nav ul:after {clear: both; content: "";}

header .nav ul li {

	font-family: 'IBM Plex Sans', sans-serif;

    font-size: 1.6rem;

    color: #1A1A1A;

    list-style: none;

    padding: 16px;

    display: block;

    font-weight: 700;

}







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

header .menu {display: inline-block; float: right; padding: 38px 20px; }

header .open-menu {display:none; float: right; padding: 38px 20px;}

.menu svg, .open-menu svg {fill: #FFF;}





@media only screen and (min-width: 768px) {

    header .nav  {display: inline-block; float: right; background-color: inherit; width: initial; height: initial;}

    header .menu {display: none;}

    header .open-menu {display: none;}

   .menu svg {fill: none;}

    header .nav ul li {display: inline-block;}

    .only-mobile {display: none;}

}



.front-big-image {

	width: 100%;

	position: relative;

	height: 640px;

	background-color: #000;

}

.front-text-1, .front-text-2 {

	position: absolute;

	font-family: 'IBM Plex Sans', sans-serif;

	color: #FFF;

	text-transform: uppercase;

	font-size: 1.5rem;

	font-weight: 700;

}

.front-text-1 {width: 100%; text-align: center; bottom: 25%;}

.front-text-2 {width: 100%; text-align: center; bottom: 20%;}

.front-svg-img { width: 100%; text-align: center; top: 10%; position: absolute; width:100%;}

.front-svg-img img {width: 80%;}

@keyframes frp-dowm {

  from {bottom:7%;}

  to {bottom:5%;}

}

.moving-down { position: absolute; bottom:5%; width: 100%; animation-name: frp-dowm; animation-duration: 2s;  animation-iteration-count: infinite; text-align: center; z-index: 10; color: #666;}





@media only screen and (min-width: 768px) {

 .front-text-1, .front-text-2 {top: 45%; }   

.front-text-1 {left: 2%; width: initial;}

.front-text-2 {right: 2%; width: initial;}

.moving-down {display: none;}

.front-svg-img {width: 100%;}

.front-svg-img img {width: initial;}



}



.library-list {margin: 40px 20px; position: relative;}

.library-list h5 {margin: 0px;}

.library-list .item-wrap { margin: 40px 0px;  display: block;}

.library-list .lib-item-wrap  {  margin: 40px 0px;  }



.library-item, .lib-item {display: inline-block; margin: 20px 0px; padding-bottom: 10px; border-bottom: 1px solid #d9d9d9; position: relative; }

.lib-item {margin: 20px 0px; }
.lib-item h5 { margin-left: -10px; font-weight: 600; font-size: 1em;}
.lib-item .clear-tags { position: absolute; bottom: 10px; left:10px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.7em; cursor: pointer; }
.lib-item .clear-tags span {text-decoration: underline;}
.lib-item .tag-wrap {margin: 20px 0;}
.lib-item .tag-wrap .tag {background-color: #C3FFE7; display: inline-block; padding: 5px 10px; border-radius: 10px; margin: 5px; font-weight: 600; font-family: 'IBM Plex Sans', sans-serif; cursor: pointer;}
.lib-item .tag-wrap .tag:hover, .lib-item .tag-wrap .tag.active {color:#FFF; background-color:#007948;  }
.month-filter {font-family: 'IBM Plex Sans', sans-serif; display: inline-block; font-weight: 600; margin-top: 0px; margin-left: 40px;}
.month-filter select {font-family: 'IBM Plex Sans', sans-serif;  font-weight: 400;}

.text-item {padding-bottom: 10px; border-top: 1px solid #d9d9d9; font-family: 'IBM Plex Sans', sans-serif; font-size: 1.25rem;}
.text-item .item-date { display: inline-block; margin-left: 20px;}
.lib-item h2 {color: #999; font-family: 'IBM Plex Sans', sans-serif; font-size: 1.25rem; font-weight: 600; margin:10px 0; padding: 0; }

.library-item p, .lib-item p {font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; color: #565656;}

.library-item .item-date, .lib-item .item-date {font-family: 'IBM Plex Sans', sans-serif; font-size: 0.8rem; font-weight: 700;}

.library-item .image, .lib-item .image {width:100%; height: 180px; background-position: center; background-size: cover; background-color: #C3FFE7;}

.lib-item.exhib .image { width:80%; height: 140px; }

.lib-item.exhib h3 {font-size: 2.5rem;}
.lib-item.contacts h3 {border-bottom: none;}
.lib-item.contacts p {font-weight: bold;}
.lib-item.contacts a { color: #00912a;}

.lib-item.exhib h4 {font-size: 1.5rem; font-weight: 600; width: 80%;}

ul.lib-item-topnav {margin-top: 20px; float: left;}

ul.lib-item-topnav li {display: inline-block; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; font-weight: 700; padding:10px 20px 0 0; }

ul.lib-item-topnav li a.active {color: #999;}



.lbr-slide {display: none;}

@media only screen and (min-width: 768px) {

.library-list .item-wrap { overflow: hidden; display: grid; grid-template-columns: 33.3% 33.3% 33.4%;}

.library-item, .lib-item {margin: 10px 30px;}

.lbr-slide {position: absolute; top: 45%; width: 20px; font-size: 30px; display: block;}

.lbr-slide:hover {color: #999; cursor: pointer;}

.lbr-slide.right {right: -20px;}

.lbr-slide.left {left: -20px;}

.library-item::after, .lib-item::after {content: ''; position: absolute; border-right: 1px solid #d9d9d9; display: block; width: 0; top: 10%; right: -31px; height: 80%;}

.lib-item:nth-child(3n+3)::after {  border-right: 0;}

.library-list .lib-item-wrap  { display: grid;  grid-template-columns: 400px 400px 400px; }
.library-list .lib-item-wrap.double  { display: grid;  grid-template-columns: 400px 800px; }
.month-filter {margin-top: 30px; margin-left: 200px;}


}





.about-project {margin: 40px 20px; position: relative;}

.about-project h5 {margin-left: -20px;}

.project-excerpt {width: 100%; font-family: 'IBM Plex Sans', sans-serif; font-size: 1.5rem; font-weight: 700; margin: 15px; }

.project-text {width: 100%; margin: 15px; color: #565656;}

.project-text h3 { border-bottom: 0; color:#000;     width: initial; }

.project-right {width: 100%;  margin: 15px; color: #565656;}

.project-right img {width: 100%;}

.project-right .img-right {width: 100%;}

.project-right.single-exhibition-img {}

.learn-more {background-color: #C3FFE7; padding: 10px 60px; border-radius: 10px; width: fit-content; font-weight: 700; margin-top: 30px; font-family: 'IBM Plex Sans', sans-serif; }

.project-sponsors {margin: 40px 60px; position: relative;  padding: 20px; }

.project-sponsors img {height: 70px; margin: 10px;}

.project-sponsors img.lcca-img{height: 40px; margin: 25x 10px;}

.project-map {margin: 5px; position: relative; }

.map-wrap {width: 100%; position: relative;}

.map-wrap img {width: 100%;}

.map-wrap h2 {position: absolute; top: 0px; left: 10px; font-weight: 700; font-size: 1.5rem; margin: 0; padding: 0;}

.map-wrap .city{position: absolute; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; font-weight: 700;}

.map-wrap .citys::before{ content: ''; display: inline-block; width: 12px; height: 12px;  margin-right: 10px;border-radius: 6px; background-color: #565656; }

.exhibition-materials {margin-top: 50px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.8rem; font-weight: 700;}

.exhibition-materials h5 { margin-left: 0px; }

.exhibition-materials a {color: #00912a; margin-top: 5px; line-height: 1.5rem;}



hr {    border: 0; border-top: 1px solid #d9d9d9;  margin: 10px 30px}



.about-project-excerpt {width: 100%;}

.project-institutions{background-color: #C3FFE7; margin: 40px 0px; position: relative; padding: 20px 50px; overflow: hidden;}

.institution-slider {position: relative;}

.pop-img-right {position: relative; top:initial; left: initial;}
.pop-img-right.poped {position: fixed; z-index: 1; padding: 100px 10%; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; box-sizing: border-box;  background-color: rgba(0,0,0,0.9); }
.right-img-slider {position: relative;}
.pop-img-right.poped .right-img-slider{margin: auto;  display: block;  width: 80%;  max-width: 900px;}

.single-inst {position: relative;}

.gallery-slide{color: #FFF; text-shadow: 0px 0px 10px #5a5a5a;  top: 35%; }
.inst-slide, .gallery-slide {position: absolute; top: 0%; width: 20px; font-size: 30px; padding:30% 0;}
.pop-img-right.poped .gallery-slide { font-size: 80px; }

.inst-slide:hover, .gallery-slide:hover {color: #999; cursor: pointer;}

.inst-slide.right {right: -20px;}

.inst-slide.left {left: -20px;}


.gallery-slide.right {right: 10px; padding-left: 15%;}

.gallery-slide.left {left: 10px; padding-right: 15%; }



ul.project-nav, ul.institution-nav {list-style: none; padding: 0; margin: 0;}

ul.project-nav li {display: inline-block; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; font-weight: 700; padding: 0px 20px 20px 0;}

ul.project-nav li.active a, ul.project-nav li:hover a{color:#999; }

ul.institution-nav li {display: inline-block; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem; padding: 0px 20px 20px 0;}

ul.institution-nav li a {text-decoration: underline;}

ul.institution-nav li a:hover {text-decoration: none; color:#999;}



.single-inst h3{width: 90%; margin: 20px 0 30px;}

.inst-excerpt {   width: 100%;  margin: 20px 60px 20px 0;}

.inst-bottom-left {  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem;  float: left;  width: 66%;  margin: 10px 0;}

.inst-bottom-right {  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem;  float: left;  width: 33%;  margin: 10px 0;}

.inst-bottom-left a, .inst-bottom-right a{ color: #00912a;  }



h3.exhibition-title { font-size: 2.2rem; display: inline-block; padding-right: 100px; width: inherit; margin-top: 0px; }





@media only screen and (min-width: 768px) {

.library-list {margin: 40px 30px; position: relative;}    

.about-project {margin: 40px 30px; position: relative;}

.project-map {margin: 40px 60px; position: relative; }

.project-excerpt {width: calc( 66% - 60px); float: left; padding: 30px; margin: 0;}

.project-text {width: calc( 66% - 60px); float: left; padding: 30px; margin: 0;}

.project-right {width: calc( 33% - 60px); float: right; padding: 30px; margin: 20px 0 0;}

.project-right.single-exhibition-img {width: 33%;  padding: 30px 0; } 

.single-inst h3{width: 25%; margin: 20px 0 30px;}

.inst-excerpt {    float: left;  width: calc( 66% - 60px ); }

.map-wrap h2 {top: 20px; }

  }  





.top-accord { font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; width: 100%; border-bottom: 1px solid #d7d7d7; font-weight: 700; position: relative; cursor: pointer; box-sizing: border-box; padding: 15px 16px 10px;}

.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 {

  width: 30px;

  height: 20px;

  box-sizing: border-box;

    line-height: 20px;

    text-align: center;

    overflow: hidden;

    position: relative;

      display: inline-block;

}



.accord-ico, {

  width: 20px;

  height: 30px;



  top:0;

  transition: 0.2s;



}



.open-pluss, .open-minuss {display: block; width: 20px; height: 30px; color: #bbb;}



.top-accord.open .accord-open{

    margin-top: -30px;

}



footer {font-family: 'IBM Plex Sans', sans-serif; margin: 60px; font-size: 0.8rem;}

footer a{margin: 0 20px; text-decoration: underline;}

footer a:hover {text-decoration: none;}

.copyright {display: inline-block; font-weight: 700;}



@media only screen and (min-width: 768px) {

.top-accord { width: 70%;}

    }



.to-popup {cursor: pointer;}

.popup {

  position: fixed; /* Stay in place */

  z-index: 1; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}



.popup img { margin: auto; display: block; width: 80%; max-width: 900px;}

.popup .close, .poped .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s;}

.close:hover,.close:focus { color: #bbb; text-decoration: none; cursor: pointer;}