body {
      height: 100%;
      background-color: white;
      color: #202124;
    -webkit-font-smoothing: antialiased;
          font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 16px;
        font-weight: 400;
        word-spacing: 1px;
        letter-spacing: .02em;
}

a {
    color: #202124;
   text-decoration: none;
}

a:hover {
    color: blue;
}

header, footer, div.page {
text-transform: uppercase;

}

footer {
    margin-top:16px;
}

header h1 {
    color: #202124;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 8px 0 0;
    padding: 0;
}

div.page {
  
}

.still {

  margin: 0 0 0 0em;
 display:flex;
 align-items: center;
 width:auto;
       vertical-align: middle;
           white-space: nowrap;
     
}

still img:hover {
 cursor:pointer;
    pointer-events: auto;
}
.still img {
    vertical-align: middle;
    z-index:3;
/*    max-height:220px;*/
/*max-height:24vh;*/

width:24vw;
   transition: all 0.2s ease-in-out;


}

#wrapper > div.about > img {
  width:450px;
  max-width:80%;
  padding:.5em;
}


.caption{
     text-align: center; margin: 1em 0;
    position:relative;
    top:-30px;
 
color:#ffffff;
opacity:0;
   transition: all 0.45s ease-in-out;
   z-index: 5;
   font-size:.8em;
}


.caption2{

     text-align: center; margin: 1em 0;
    position:relative;
    top:-25px;


color:#ffffff;
opacity:0;
   transition: all 0.45s ease-in-out;
   z-index: 5;
   font-size:.8em;
}


.still img:hover {
 transform: scale(1.05);
}

.still img:hover + .caption {
    opacity: 1;
}

.grid-item img:hover {
 transform: scale(1.05);
}

.grid-item img:hover + .caption {
    opacity: 1;
}




.still2 > a > video:hover {
 transform: scale(1.05);
   cursor:pointer;
}

.still2 a video:hover + .caption2 {
    opacity: 1;
}



          .still2 > a > video {
    
        margin:auto;
        display:inline-block;
       /*  transform: scale(1.05);*/
      }



div.video {

        margin:auto;
        display:inline-block;

}

.still2.commercial{
     width:32vw;
        margin:auto;
        display:inline-block;
}

.still2 video {
   width:100%;
        margin:auto;
        display:inline-block;
      transform: scale(1.03);
}

.work {
  padding-left:1vw;
  margin:auto;
 align-items: center;
 display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    padding-top: 1rem;
}



.image img{
    width: auto;
    margin:auto;
    margin-top:32px;
    display:block;
    max-height:90vh;
    max-width:95vw;
  }




 p{
 font-size:1em;
 max-width: 550px;

 } 

#videos > div {


width:95%;
max-width:1000px;
margin:auto;
margin-bottom:40px;

}

iframe {

    width:100%;
}

.vimeo-player {
    max-width: 800px;
    max-height: 60vh;
    transform: translateY(-4rem);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
  margin-top:15px;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 99%; 
  height: 90%; 
}

.buttons {
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:80%;
}


    button {
      text-shadow: 2px 2px 2px #000000;
        text-transform: uppercase;
            background: none;
       /*    mix-blend-mode: difference;*/
        display: inline-block;

        font-size: 1.1em;
/*      -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;*/
        padding: 0.75em;
        border-radius: 5px;
        color: #ffffff;
        cursor: pointer;
        border: none;
        width: 100%;
        height: 80%;
        padding-top:15%;
    }
    button:focus,
    button:hover {
        
    }
    #status ul li span {
        font-weight: bold;
        color: #C00;
        text-transform: uppercase;
          text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
    }





.current-time {
          cursor: pointer;
    position: absolute;
    bottom: 12%;
    left: 15%;
    width:70%;
    opacity:.5;


    }

    #fullscreen-button {
 filter: drop-shadow( 1px 1px 2px #000000);
text-transform: uppercase;
           position: absolute;
   bottom: 8%;
    left: 83%;
    padding:1em;
       width: 10%;
        height: 10%;
    }



    #controls{

        z-index:2;

        opacity:0;
         transition: all .5s ease-in-out;
    }

    #controls:hover{
              cursor: pointer;
        opacity:1;
         
    }


    .buttons,
.value-input {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}


.value-input {
    margin: 0.5em 0 0;
        cursor: pointer;
}

.buttons button,
.value-input input,
.value-input button {
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}


#checkboxes{
  position:sticky;
    position: -webkit-sticky;
  top: 0; /* required */

  background-color: black !important;
}


.description {
   margin-left:3.5em;
}



/*MOBILE*/

    @media only screen and (max-width: 600px) {

      div.about {
         font-size: 14px;
      }

      #wrapper{
        overflow-x:hidden;
      }


      body > header > a {
        margin-left: .85em !important;
      }


      body > footer > span {

        font-size:14px;
      }


      .caption2{

        top:40px;
      }


      #menu {
        padding-top:1em;
        font-size: 14px;
            margin-left: 1.2em;
            left:0px;
      }

      body{
        margin:0px;
        overflow-x:hidden;
      }



      .image img{
    width:88vw;
    max-width:95vw;
    margin:auto;
    margin-top:32px;
    display:block;
}




.description {
   margin-left:1em;
   padding-top:1em;
}

      .work {
          padding-left:0em;
         max-width: 100% !important;
          width:99%;
          overflow-x:hidden;
      }


      .work2 {
          margin:auto;
      }

      .still {
        margin:auto;
        width:24%;
   
      }

      .still music-video {
        margin:auto;
        width:30%;
   
      }


            .still2 {
        margin:auto;
      max-width:24%;
      }



      .still img {
        width:90%;
        max-width:24vw;
        margin:auto;
      }

      .buttons {
    opacity:0;
    height:90%;
}

        .embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
30  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 

}

         p{
 font-size:16px;
 max-width: 550px;
 margin:auto;
 } 

        .current-time {

    left: 22%;
    width:55%;
    bottom:5%;



    }


  #fullscreen-button {
    left: 76%;
    bottom:7%;
    }


    button {
        text-transform: uppercase;
            background: none;
       /*    mix-blend-mode: difference;*/
        display: inline-block;

        font-size: 1.3em;

    }





         #controls{
        opacity:.6;
      
    }

    }


/*menu*/

#Photo{ display:inline-block; 

  margin-right:1em;}

#Music-Video {
  margin-right:1em;
}


#Commercial {
  margin-right:1em;
}



#menu{ position:absolute; 
top:26px;
right:1em;}

#menu:hover{
  cursor:pointer;
}


/*
masonry*/



    #masonry-effect {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .item {
        flex-direction: column;
    /*    margin-right: 1.5rem;
        margin-bottom: 1.5rem;*/
      color: white;
        position: relative;
       box-sizing: border-box;
 
    }




    

.grid-item {
 padding:10px; padding-bottom: 0px; 
    transition: all 0.45s ease-in-out;
}

.grid-item { width: 16%; }
/* 2 columns */
.width2 { width: 16%; 

}

.grid-item img {

  display: block;
  width: 100%;
  height: auto !important;
   transition: all 0.45s ease-in-out;
}


/*
ABOUT ME*/

 div.about {
  margin-left:1em;
 }

body > div.about > img {
  width:80%;
padding-top:1em;
padding-bottom:1em;
  max-width:500px;
}

body > div.about > p {
      font-weight: 300;
  margin-top:2em;
  max-width:500px;
  width:90%;

}

.avatar {
  display:inline-block;
}

#bio{
  display:inline-block;
}


@media only screen and (max-width: 1023px) and (min-width: 768px) {
  .masonry {
    grid-template-columns: repeat(4, minmax(50px,1fr));
  }

    

}
@media only screen and (min-width: 1024px) {
  .masonry {
    grid-template-columns: repeat(4, minmax(100px,1fr));
  }
}