﻿body {
   background-color: #262626;
}

.container {
   position: absolute;
   width: 100%;
   height: 100%;
}

.content {
   width: 100%;
   /*height: 100%;*/
   position: relative;
   max-width: 320px;
   /*max-height: 318.4px;*/
   margin: 0 auto 70px auto;
   /*top: calc(50% - (318.4px / 2));*/

   min-height: calc(320px * 1.5);
   /*top: 50%;*/
   /*margin-bottom: 70px;*/
}


.node {
   width: 156px;
   height: 156px;
   border-radius: 12px;
   background-size: cover;
   float: left;
}
   .node:hover:not(.node-4) {
      cursor: pointer;
   }

   .node.node-img a {
      display: block;
      width: 100%;
      height: 100%;
   }

.video-node {
   width: 320px;
   height: 156px;
   overflow: hidden;
   margin: 0 !important;
   z-index: 999 !important;
   transform: scale(1);
}

   .video-node iframe {
      width: 100%;
      height: 100%;
   }

.gallery {
   position: absolute;
   right: 0;
   /*bottom: 0;*/
   left: 0;

   overflow: hidden;
   top: calc(320px / 2);
   /*height: 100%;*/
}

.node-text {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #313131;
   border-radius: 25px;
}

.node-1 {
   margin-right: 8px;
   margin-bottom: 8px;
}

.node-2 {
   margin-bottom: 8px;
}

.node-3 {
   /*margin-bottom: 8px;*/
   margin-right: 8px;
}

.node-4 {
   background-color: #313131;
   position: relative;
}

   .node-4 p {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      width: 100%;
      text-align: center;
      color: white;
      font-family: roboto;
      font-size: 18px;
      padding: 5px;
   }

#mixed-media {
}


   #mixed-media .node-1 {
      background-image: url('../../../images/mix02.jpg');
   }

   #mixed-media .node-2 {
      background-image: url('../../../images/mix03.jpg');
   }

   #mixed-media .node-3 {
      background-image: url('../../../images/mix01.jpg');
   }

   #mixed-media .node-4 {
   }


#photography {
}

   #photography .node-1 {
      background-image: url('../../../images/photo01.jpg');
   }

   #photography .node-2 {
      background-image: url('../../../images/photo02.jpg');
   }

   #photography .node-3 {
      background-image: url('../../../images/photo03.jpg');
   }

#video-art {
}

   #video-art .node-1 {
      background-image: url('../../../images/vid01.jpg');
   }

   #video-art .node-2 {
      background-image: url('../../../images/vid02.jpg');
   }

#video-art .node-3 {
   background-color: #313131;
}
#video-art .node-4 {
   background-color: #313131;
   position: absolute;
   bottom: 0;
   clear: both;
   float: left;
}
#performance .node-1 {
   background-color: #313131;
}
