/* COLORS
cream: #f2f2e7
red: #c7433e
yellow: #d8962a
green: #262e30
blue: #253254 */

* {
  box-sizing: border-box;
}

html {
  margin: 0 0;
  background-color: #f2f2e7;
  /* z-index: ; */
  /* min-width: 1200px; */
  height: 100%;
}


html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Space Mono', monospace;
  color: #262e30;
  font-size: 15px;
  margin: 0 0;
  /* min-width: 1200px; */
}

#fade {
   animation: fadein 2s ease;
}

@keyframes fadein {
    from {
        opacity:0;
        background-color: #253254;
    }
    to {
        opacity:1;
        background-color: #f2f2e7;
    }
  }


.wrapper {
  flex: 1 0 auto;
  min-height: calc(100vh - 63px);
}

.wrapperabout {
  flex: 1 1 auto;
  min-height: calc(100vh - 63px);
  overflow: hidden;
}

.logo {
  text-decoration: none;

}


/* SHAPES */

.hover {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
margin-top: 0px;
z-index: 0;
}

.shapes {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
bottom: 0;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
z-index: -1;
}

.shadow {
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}

.green {
  fill: #262e30;
}

.red {
  fill: #c7433e;
}

.blue {
  fill: #253254;
}

.yellow {
  fill: #d8962a;
}

.black {
  fill: #000;
}

.white {
  fill: #fff;
}

.blackshape {
  position: absolute;
  left: 400px;
  top: 100px;
  width: 1000px;
  z-index: -1;

}

.whitelong {
  position: absolute;
  left: 550px;
  top: 630px;
  z-index: -1;
  width: 770px;
  height: 30px;
  transform: rotate(137.8deg)
}

.blacklong {
  position: absolute;
  left: 590px;
  top: 670px;
  z-index: -1;
  width: 770px;
  height: 30px;
  transform: rotate(137.8deg)
}

.yellowsquig {
  stroke: #D8962A;
  fill: none;
  stroke-width: 16px;
  stroke-miterlimit: 10;
  position: absolute;
  left: 900px;
  top: 0px;
  z-index: 0;
  width: 100px;
  height: 400px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.squig polyline {
  stroke-dasharray: 500px;
  stroke-dashoffset: 500px;
  animation: dash 25s ease-in-out forwards;
}

@keyframes dash {
  0% {stroke-dashoffset: 500px;}
  25% {stroke-dashoffset: 0px;}
  50% {stroke-dashoffset: 500px;}
  100% {stroke-dashoffset: 0px;}
}

.greenrect {
  position: absolute;
  left: -200px;
  top: -500px;
  z-index: -2;
  width: 1200px;
  height: 1200px;
  transform: rotate(-30deg);
}

.redlong {
  position: absolute;
  left: 120px;
  top: 590px;
  width: 1200px;
  height: 150px;
  z-index: -1;
  transform: rotate(-30deg)
}

.bluetri {
  position: absolute;
  z-index: -3;
  top: 300px;
  left: 500px;
  width: 1500px;
}

.yellowlong {
  position: absolute;
  left: 950px;
  top: 500px;
  width: 800px;
  height: 100px;
  z-index: 0;
  transform: rotate(-60deg);
  transition: transform 0.3s ease-in-out;
}

.yellowlong:hover {
  position: absolute;
  left: 950px;
  top: 500px;
  z-index: 1;
  transform: rotate(-55deg);
}

.redrec {
  position: absolute;
  width: 500px;
  height: 400px;
  left: 905px;
  top: 500px;
  z-index: 1;
  transform: rotate(-42deg);
}

/* SHAPES ARTISTS */
.whitelong2 {
  position: absolute;
  left: 900px;
  top: 630px;
  z-index: -1;
  width: 500px;
  height: 30px;
  transform: rotate(137.8deg)
}

.blacklong2 {
  position: absolute;
  left: 900px;
  top: 670px;
  z-index: -1;
  width: 500px;
  height: 30px;
  transform: rotate(137.8deg)
}



/* SHAPES_RESOURCES */
.circle {
  position: absolute;
  z-index: -3;
  top: 300px;
  left: 700px;
  width: 1000px;
    animation: rise 10s ease-in-out infinite;
}

@keyframes rise {
    0% {top: 300px;}
    50% {top: 200px;}
    100% {top: 300px;}
  }

.redshort {
  position: absolute;
  left: 1050px;
  top: 400px;
  width: 500px;
  height: 60px;
  z-index: 0;
  transform: rotate(-35deg);
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}



.redshort1 {
  position: absolute;
  left: 1250px;
  top: 430px;
  width: 500px;
  height: 60px;
  z-index: 0;
  transform: rotate(-35deg);
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}

.bluelong {
  position: absolute;
  left: -150px;
  top: 750px;
  width: 1200px;
  height: 100px;
  z-index: 0;
  transform: rotate(-10deg);
}

.bluelong {
  position: absolute;
  left: -150px;
  top: 750px;
  width: 1200px;
  height: 100px;
  z-index: 0;
  transform: rotate(-10deg);
  transition: transform 0.3s ease-in-out;
}

.bluelong:hover {
  position: absolute;
  left: -150px;
  top: 750px;
  width: 1200px;
  height: 100px;
  z-index: 0;
  transform: rotate(-5deg);
}

/* END OF SHAPES */



h1 {
  display: inline;
  font-weight: 400;
  font-size: 15px;
  color: #f2f2e7;
}

h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 0px;
}

h3 {
  font-size: 25px;
  font-weight: 700;
}

h4 {
  font-size: 20px;
  font-weight: normal;
}

.header-inner {
  background-color: #000;
  padding: 10px;
  margin-top: 10px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

nav {
  padding: 10px;
  z-index: 10000;
}

nav li {
  padding: 0.25em 0 0 0.5em;
  list-style-type: none;
}

nav a {
  display: block;
  color: #fff;
  font-weight: 700;
  transition: 350ms color;
}

nav a:link {
  display: block;
  color: #fff;
  text-decoration: none;
}

nav a:visited {
  display: block;
  color: #fff;
}

nav a:hover {
  display: block;
  color: #dd962a;
}

nav a:active {
  display: block;
  color: #dd962a;
}

.menu-toggle {
  position: absolute;
  top: 21px;
  left: 95%;
  width: 20px;
  height: 30px;
  z-index: 111111;
  background-color: rgba(0, 0, 0, 0);
  padding: 20px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  position: absolute;
/*   height: 9px;
  width: 100%;
  background: #d3531a; */
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Icon 4 */

.menu-toggle span:nth-child(1) {
  height: 3px;
  width: 100%;
  background: #f2f2e7;
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.menu-toggle span:nth-child(2) {
  height: 3px;
  width: 100%;
  background: #f2f2e7;
  top: 7px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.menu-toggle span:nth-child(3) {
  height: 5px;
  width: 100%;
  background: #f2f2e7;
  top: 15px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

body.open .menu-toggle span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top:  0px;
  left: 0px;
}

body.open  .menu-toggle span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

body.open  .menu-toggle span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 25px;
  left: 0px;
}

nav {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #253254;
  text-align: left;
}

nav ul {
  position: absolute;
  top:  40%;
  left: 30%;
  transform: translate(-50%, -50%);
}

nav a {
  font-size: 36px;
  margin: 0.5em 0;
  line-height: .4em;
}

.open nav {
  display: block;
  z-index: 1001;
}

.content {
  /* z-index: 100; */
  /* position: relative; */
  margin-left: 50px;
  margin-right: 50px;
  /* margin-bottom: -50px; */
  /* min-height: 800px; */
  /* width: 1200px; */
}

.contentbox {
  width: 800px;
  background-color: rgba(242, 242, 231, 0.8);
  padding: 20px;
  margin-left: -50px;
  margin-top: 70px;
}

.innerbox {
  width: 700px;
  padding: 20px;
  margin-left: 50px;
  margin-top: 0px;
}

/* QUOTES */

.largequote {
  font-size: 36px;
  font-weight: 700;
  width: 800px;
  color: #f2f2e7;
  margin-bottom: 5px;
  margin-left: 100px;
  margin-top: 100px;
  animation: 2s ease 1.5s fadein1;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadein1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.smallquote {
  font-size: 15px;
  font-weight: 700;
  width: 800px;
  color: #f2f2e7;
  margin-left: 100px;
  margin-bottom: 5px;
}

.speaker {
  text-align: right;
  width: 800px;
  margin-top: 0px;
  color: #f2f2e7;
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

/* ARTISTS */
.artshape {
  /* margin: 60px; */
  transition: box-shadow 350ms;
  transition: all 2s ease;
}

.artshape:hover {
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
  cursor: pointer;
}

.artshape.open {
  transition: all 2s ease;
  display: inline-block;
  width: 315px;
  height: 600px;
  transform:rotate(0deg);
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
}

.artshape1 {
  /* margin: 60px; */
  transition: box-shadow 350ms;
  transition: all 2s ease;
}

.artshape1:hover {
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
  cursor: pointer;
}

.artshape1.open {
  transition: all 2s ease;
  display: inline-block;
  width: 315px;
  height: 450px;
  transform:rotate(0deg);
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5)
}

.artshape2 {
  /* margin: 60px; */
  transition: box-shadow 350ms;
  transition: all 2s ease;
}

.artshape2:hover {
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);
  cursor: pointer;
}

.artshape2.open {
  transition: all 2s ease;
  display: inline-block;
  width: 315px;
  height: 500px;
  transform:rotate(0deg);
  animation-play-state: paused;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5)
}

.one {
  background-color: #c7433e;
  color: #f2f2e7;
}

.two {
  background-color: #d8962a;
  color: #f2f2e7;
}

.three {
  background-color: #253254;
  color: #f2f2e7;
}

.four {
  background-color: #262e30;
  color: #f2f2e7;
}


h3 {
  font-size: 20px;
  text-align: center;
  margin-bottom: 50px;
  margin-top: 0px;
}

h3.one, p.one {
  margin-top: 0px;
  transition: color 2s ease;
  background-color: rgba(0, 0, 0, 0);
  color: #f2f2e7;
}

h3.three, p.three {
  background-color: rgba(0, 0, 0, 0);
}

/* .keyartsts {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  margin-top: 0px;
  z-index: -1;
} */


.malevich {
  position: absolute;
  top: 15px;
  left: 140px;
  width: 200px;
  height: 200px;
  animation: malevich 9s ease infinite ;
}

@keyframes malevich {
    0%{transform:rotate(0deg)}
    50%{transform:rotate(-5deg)}
    100%{transform:rotate(0deg)}
}

.el {
  position: absolute;
  top: 20px;
  left: 440px;
  width: 200px;
  height: 80px;
  animation: el 9s ease infinite 350ms;
}

@keyframes el {
    0%{transform:rotate(0deg)}
    50%{transform:rotate(5deg)}
    100%{transform:rotate(0deg)}
}

.rod {
  position: absolute;
  top: 20px;
  left: 990px;
  width: 95px;
  height: 200px;
  animation: rod 9s ease infinite 600ms ;
}

@keyframes rod {
    0%{transform:rotate(0deg)}
    50%{transform:rotate(-5deg)}
    100%{transform:rotate(0deg)}
}

.olga {
  position: absolute;
  top: 20px;
  left: 730px;
  width: 150px;
  height: 150px;
  animation: olga 9s ease infinite 900ms ;
}
@keyframes olga {
    0%{transform:rotate(0deg)}
    50%{transform:rotate(5deg)}
    100%{transform:rotate(0deg)}
}

[data-target] {
  display:none;
}

.artistinner {
  width: 200px;
  height: inherit;
  color: rgba(0, 0, 0, 0);
  z-index: 100;
}

.artistinner.open {
  display: inline-block;
  width: 215px;
  z-index: 100;
  margin: 50px;
}

.bio {
  width: inherit;
  margin-top: 0px;
  transition: color 2s ease;
}

.open {
  transform:rotate(0deg)
}

[data-target] {
display: none;
}

.keyartists {
  width: 95%;
  position: absolute;
  top: 150px;
  bottom: 0;
  overflow: hidden;
  margin-top: 0px;
  z-index: 0;
  }
}

.artistbox.open {
display: inline-block;
width: 315px;
z-index: 1000;
opacity: 1;
}

.artistbox.open:nth-child(1) {
  position: relative;
  left: 175px;
  top: -300px;
}

.artistbox.open:nth-child(2) {
  position: relative;
  left: 200px;
  top: -300px;
}

.artistbox.open:nth-child(3) {
  position: relative;
  left: 225px;
  top: -300px;
}

.artistbox.open:nth-child(4) {
  position: relative;
  left: 250px;
  top: -300px;
}

.exit {
  position: relative;
  top: 0;
  right: 0;
  margin-top: 0px;
  width: 315px;
}

.exit p {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0px;
  font-size: 20px;
}


/* GALLERY */

.gallery {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 100px;
  margin-left: 40px;
}

.gallery img {
  margin-left: 40px;
  width: 350px;
  transition: all 300ms ease;
}

.gallery img:hover {
  box-shadow: 5px 5px 20px rgba(0,0,0,0.5);

}
.row1 {
  display: flex;
  align-items: flex-start;
  margin-left: 40px;
}

.row2 {
  display: flex;
  align-items: flex-start;
  margin-top: 40px;
  margin-left: 40px;
  margin-bottom: 100px;
}

.artwork {
  display: inline-block;
  width: 350px;
  margin-left: 40px;
  text-align: center;
  font-size: 12px;
}

a:link {
  text-decoration: none;
}



/* RESOURCES */

.resources {
  font-size: 30px;
  list-style-type: none;
  z-index: 1000;
}

.resources a:link {
  color: #262e30;
  text-decoration: underline;
  transition: 350ms color;
}

.resources a:visited {
  color: #262e30;
}

.resources a:hover {
  color: #c7433e;
}

.resources a:active {
  color: #c7433e;
}

/* FOOTER */

footer {
  flex-shrink: 0;
  z-index: 1000;

}

.footerinner {
  color: #f2f2e7;
  background-color: #000;
  text-align: center;
  width: 100%;
  padding: 1px;
  margin-top: 10px;
  margin-left: 0;
  margin-right: 0;
}


.footerinner a  {
  color: #fff;

}

.footerinner a:link  {
  color: #fff;
}

.footerinner a:visited  {
  color: #fff;
}

.footerinner a:hover  {
  color: #fff;
}

.footerinner a:active  {
  color: #fff;
}

/* LAYOUTS */

/* 75-25 */

/* .layout-75-25 {
  display: flex;
}

.layout-75-25 .layout-item:nth-child(1) {
  flex: 1 1 75%;
  padding-right: 25px;
}

.layout-75-25 .layout-item:nth-child(2) {
  flex: 1 1 20%;
  padding-left: 25px;
  padding-right: 25px;
}

/* 25-50-25 */

/* .layout-25-50-25 {
  display: flex;
}

.layout-25-50-25 .layout-item:nth-child(1), .layout-25-50-25 .layout-item:nth-child(3) {
  flex: 1 1 25%;
  padding-right: 25px;
}

.layout-25-50-25 .layout-item:nth-child(2) {
  flex: 1 1 50%;
  padding-left: 25px;
  padding-right: 25px;
} */


/* layout-33-33-33 */

/* .layout-33-33-33 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.layout-33-33-33 .layout-item {
  flex: 1 1 33.333%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.layout-33-33-33 .layout-item:nth-child(3n+1) {
  padding-right: 10px;
}

.layout-33-33-33 .layout-item:nth-child(3n+2) {
  padding-right: 5px;
  padding-left: 5px;
}

.layout-33-33-33 .layout-item:nth-child(3n+3) {
  padding-left: 10px;
}
.layout-33-33-33 .layout-item img{
  width: 100%;
} */




/* LIGHTBOX */

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #262e30;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 1;
  display: none;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin-left: 300px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: #f2f2e7;
}

.lb-data .lb-number {
  display: none;
  /* clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999; */
}

.lb-data .lb-caption {
  position: absolute;
  top: 500px;
  left: 900px;
  line-height: 1.3em;
  padding: 15px;
  background-color: rgba(242, 242, 231, 0.8);
  color: #262e30;
  font-size: 30px;
  font-weight: normal;
}

.lb-data .lb-close {
  display: none;
}