* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#div {
    width: 100%;
    height: 100vh;
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 4s ease-out;
    -webkit-transition: all 4s ease-out;
}

#details {
    width: 40%;
    float: left;
    position: relative;
    padding: 20px;
    z-index: 99;
}

#imgdiv_parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
    overflow: hidden;
    z-index: -1;
}

div#imgdiv {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

#imgdiv img.imgsmall {
    margin: 0 auto;
    padding: 50px 0px;
    max-width: 100%;
    max-height: 100%;
}

#imgdiv img.img_full_size {
    margin: 0 auto !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

#imgdiv video {
    margin: 0 auto !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
}

#content {
    width: 50%;
    padding: 20px;
    pointer-events: none;
    word-wrap: break-word;
}

#caption {
    padding: 20px;
    pointer-events: none;
    position: absolute;
    left: 0px;
    bottom: 0px;
    opacity: inherit;
    z-index: 1;
}

/* #tooltip {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    color: rgb(253, 231, 231);
    position: absolute;
    display: none;
    opacity: 0;
    transition: all 3s ease-out;
    -webkit-transition: all 3s ease-out;
    pointer-events: none;
    transform: translate(-100%, -100%);
    -webkit-transform: translate(-100%, -100%);
} */

a {
    text-decoration: none;
    transition: all 0.75s ease-out;
    -webkit-transition: all 0.75s ease-out;
    color: black;
}

a:hover {
    text-decoration: none;
    transition: all 0.75s ease-out;
    -webkit-transition: all 0.75s ease-out;
    opacity: 0;
}

.information {
    display: none;
}

div.toggle {
    cursor: pointer;
}

#caption-container {
    z-index: 10;
}

.information.visible {
    display: block;
}

#imgdiv img.img_full_size {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}

#div p {
    position: sticky;
    z-index: 100;
}


/* Attention
*************************/

.attention {
    animation: color-change 3s infinite;
  }
  
@keyframes color-change {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }


/* Select Work 
*************************/

#details-work {
    width: 100%;
    z-index: 100;
    float: left;
    background-attachment: fixed;
    
  }

#selectwork {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.selectwork-info {
  min-width: 20%;
  margin-right: 1vw;
  position: sticky;
  top: 20px;
}

.selectwork-image img {
  width: 75%;
  padding-bottom: 2vw;
}

.selectwork-image video {
    width: 75%;
    padding-bottom: 2vw;
}

.selectwork-image video[poster] {
    width: 75%;
    padding-bottom: 2vw;
}


/* Responsive
*************************/
@media screen and (max-width: 768px) {
    #content {
        width: 100%;
    }

    #imgdiv img.img_full_size {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    #details-work {
        width: 100%;
        position: relative;
    }

    #selectwork {
      padding: 20px;
      width: 100%;
      display: flex;
      flex-flow: column wrap;
    }

    .selectwork-info {
      padding-bottom: 1vw;
      position: static;
    }

    .selectwork-image img {
        width: 100%;
        padding-bottom: 20px;
      }
      
      .selectwork-image video {
          width: 100%;
          padding-bottom: 20px;
      }
      
      .selectwork-image video[poster] {
          width: 100%;
          padding-bottom: 20px;
      }
}

@media screen and (max-width: 520px) {
    #content {
        padding: 20px;
    }

    #details {
        width: 100%;
        position: relative;
        padding: 20px;
    }

    #caption {
        padding: 22px;
        bottom: 10% !important;
    }

    #imgdiv img.imgsmall {
        padding: 0px !important;
        margin: 0% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}