body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.responsive{position:relative;height:0}.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.responsive.ratio-169{padding-bottom:56.25%}.responsive.ratio-1610{padding-bottom:62.5%}.responsive.ratio-219{padding-bottom:42.8571%}.responsive.ratio-43{padding-bottom:75%}.responsive.ratio-32{padding-bottom:66.6666%}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}

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

#logo_jw{
  margin-top: 14px;
  margin-bottom: -49px;
  margin-left: calc(50% - 26px);
  margin-right: calc(50% - 26px);
  width: 53px;
  z-index: 10;
  display: block;
  position: fixed;
}

.nav
{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

.nav ul
{
  position: relative;
}

.nav ul li
{
  text-align: center;
  list-style:none;
 }

.nav ul li a{
  color:#000;
  text-decoration: none;
  font-family: kade;
  font-weight: 400;
  font-size: min(10vw, 5vh);
  /*text-transform: uppercase;*/
  padding: 0.5vh 0.1vw;
  display: inline-flex;
  transition-duration: 0.4s;
  transition-timing-function: ease-in-out;  
  visibility:visible;
  z-index: 2;
}

.nav ul:hover li a
{
  color: #000;
  
}

.nav ul li:hover a{
  color:#FFF;
  text-shadow: 0px 0px 6px #0002;
 }

.nav ul li a:before{
content: '';
position: absolute;
justify-content: center;
align-items: center;
opacity: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
visibility: visible;
z-index: -4;
}



.nav ul li a:hover:before{
  opacity: 1;
  width: 100vw;
  height: 100vh;
  z-index: -10;
  visibility: visible;
}

.nav ul li:nth-child(9n+1) a:before{
  background-image: url(/files/portfolio/images/main/jw_me.jpg);
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;

}

.nav ul li:nth-child(9n+2) a:before{
  background: url(/files/portfolio/images/main/jw_a-b.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+3) a:before{
  background-image: url(/files/portfolio/images/main/jw_unic.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+4) a:before{
  background-image: url(/files/portfolio/images/main/jw_s_f_s.jpg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: cover;
}

.nav ul li:nth-child(9n+5) a:before{
  background-image: url(/files/portfolio/images/main/jw_autow.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+6) a:before{
  background-image: url(/files/portfolio/images/main/jw_zeyko.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+7) a:before{
  background-image: url(/files/portfolio/images/main/jw_pos.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

//.nav ul li:nth-child(9n+8) a:before{
  background-image: url(/files/portfolio/images/main/jw_khg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+8) a:before{
  background-image: url(/files/portfolio/images/main/jw_vig.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.nav ul li:nth-child(9n+9) a:before{
  background-image: url(/files/portfolio/images/main/jw_saml.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}



a{
  text-decoration: none;
}


h1{
  font-family: kade, 'open sans', sans-serif; 
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  line-height: 1.7rem;
  padding-bottom: 10px;
}

h2{
  font-family:kade, 'open sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding-bottom: 10px;
}

h3{
  font-family:kade, 'open sans', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  padding-bottom: 10px;
}
}

.copy{
  font-family: 'open sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}


p{
  font-family: 'open sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}
p a{
  color: #022a4f;
}

.intro{
  height:100vh;
  position: relative;
}

#vid{
  height:100%;
  width:auto;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  }

  
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display:none;
  }


body, form, figure {
    margin: 0;
    padding:0
    }

img {
    border:0
}

header, footer, nav, section, aside, article, figure, figcaption {
    display:block
}

body {
    font-size:100.01%
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar {
    display:none;
}

select, input, textarea {
    font-size:99%
}



#main, #left, #right {
    float: left;
    position:relative
}

#main {
    width:100%
}

#left {
    margin-left:-100%
}

#right {
    margin-right:-100%
}


#header{
    width: 100%;
    position: fixed;
    background: #fff;
    z-index: 9;
    margin-bottom: 10px;
    display:block;
}

#logo_jw_grid{
  margin-top: 14px;
  margin-left: calc(50% - 26px);
  margin-right:calc(50% - 26px);
  width: 53px;
  z-index: 10;
}

#footer{
    background: #000;
    z-index: 8;
    width: 100%;
    height: 35px;
    position:fixed;
    bottom:0;
    clear:both;
    font-family: kade, 'open sans', sans-serif;
font-weight: 400;
font-size: 1rem;
text-decoration: none;
}

#footer p{
    padding-top:2px;
}



#main .inside {
    min-height:1px
}

.ce_gallery > ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style:none
}

.ce_gallery > ul li {
    float:left
}

.ce_gallery > ul li.col_first {
    clear:left
}


.block {
    overflow:hidden
}

.clear, #clear {
    height: .1px;
    font-size: .1px;
    line-height: .1px;
    clear:both
}

.invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width:1px
}

.custom {
    display:block
}

#container:after, .custom:after {
    content: "";
    display: table;
    clear: both
}




 



img {
    max-width: 100%;
    height:auto
}

.ie7 img {
    -ms-interpolation-mode:bicubic
}

.ie8 img {
    width:auto
}

.audio_container audio {
    max-width:100%
}

.video_container video {
    max-width: 100%;
    height:auto
}

.responsive {
    position: relative;
    height:0
}

.responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.responsive.ratio-169 {
    padding-bottom:56.25%
}

.responsive.ratio-1610 {
    padding-bottom:62.5%
}

.responsive.ratio-219 {
    padding-bottom:42.8571%
}

.responsive.ratio-43 {
    padding-bottom:75%
}

.responsive.ratio-32 {
    padding-bottom: 66.6666%
}

#wrapper {
    width: 100%;
    margin:0;
}




#container{
    position:relative;
    margin: 0 10vw;
}




.mod_article [class * =ce_], .mod_article [class * =mod_] {
    margin-left: 10px;
    margin-right:10px
}

.mod_article .mod_newsreader, .mod_article .mod_eventreader {
    margin-left: 0;
    margin-right:0
}

.mod_article [class * =layout_] > *, .mod_article [class * =event_] > * {
    margin-left: 10px;
    margin-right:10px
}

.mod_article.grid1, .mod_article.grid2, .mod_article.grid3, .mod_article.grid4, .mod_article.grid5, .mod_article.grid6, .mod_article.grid7, .mod_article.grid8, .mod_article.grid9, .mod_article.grid10, .mod_article.grid11, .mod_article.grid12 {
    margin-left: 0;
    margin-right:0
}

#main .inside {
    overflow:hidden
}



.grid1 {
    width: calc(100% - 10px);
    margin: 5px;
    float: left;

    
}
.grid2 {
  width: calc(50% - 10px);
  margin: 5px;
  float: left;
   }
.grid3 {
  width: calc(100% / 3 - 10px);
  margin: 5px;
  float: left;
  }

.grid4 {
  width: calc(25% - 10px);
  margin: 5px;
  float: left;
}

.grid5 {
  width: calc(20% - 10px);
  margin: 5px;
  float: left;
  }

.grid6 {
  width: calc(100% / 3 * 2 - 10px);
  margin: 5px;
  float: left;
  }

.grid7 {
  width: calc(100% / 7 - 10px);
  margin: 5px;
  float: left;
}

.grid8 {
  width: calc(100% / 8 - 10px);
  margin: 5px;
  float: left;
}

.grid9 {
  width: calc(100% / 9 - 10px);
  margin: 5px;
  float: left;
}

.grid10 {
  width: calc(10% - 10px);
  margin: 5px;
  float: left;
}

.grid11 {
  width: calc(100% / 11 - 10px);
  margin: 5px;
  float: left;
}

.grid12 {
  width: calc(100% / 12 - 10px);
  margin: 5px;
  float: left;
}



.mod_article.grid1 {
    width:80px
}

.mod_article.grid2 {
    width:160px
}

.mod_article.grid3 {
    width:240px
}

.mod_article.grid4 {
    width:320px
}

.mod_article.grid5 {
    width:400px
}

.mod_article.grid6 {
    width:480px
}

.mod_article.grid7 {
    width:560px
}

.mod_article.grid8 {
    width:640px
}

.mod_article.grid9 {
    width:720px
}

.mod_article.grid10 {
    width:800px
}

.mod_article.grid11 {
    width:880px
}

.mod_article.grid12 {
    width:960px
}

.offset1 {
    margin-left:90px !important
}

.offset2 {
    margin-left:170px !important
}

.offset3 {
    margin-left:250px !important
}

.offset4 {
    margin-left:330px !important
}

.offset5 {
    margin-left:410px !important
}

.offset6 {
    margin-left:490px !important
}

.offset7 {
    margin-left:570px !important
}

.offset8 {
    margin-left:650px !important
}

.offset9 {
    margin-left:730px !important
}

.offset10 {
    margin-left:810px !important
}

.offset11 {
    margin-left:890px !important
}

.offset12 {
    margin-left:970px !important
}

.mod_article.offset1 {
    margin-left:80px !important
}

.mod_article.offset2 {
    margin-left:160px !important
}

.mod_article.offset3 {
    margin-left:240px !important
}

.mod_article.offset4 {
    margin-left:320px !important
}

.mod_article.offset5 {
    margin-left:400px !important
}

.mod_article.offset6 {
    margin-left:480px !important
}

.mod_article.offset7 {
    margin-left:560px !important
}

.mod_article.offset8 {
    margin-left:640px !important
}

.mod_article.offset9 {
    margin-left:720px !important
}

.mod_article.offset10 {
    margin-left:800px !important
}

.mod_article.offset11 {
    margin-left:880px !important
}

.mod_article.offset12 {
    margin-left:960px !important
}



[class * =grid] {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    display:inline;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;  
}




@media (min-width: 768px) and (max-width: 979px) {
    #wrapper {
        width:100%;
        margin: 0 auto;
        }
        
    #container {
        margin:0;
    }    


    #container, .inside {
            position:relative;
            margin: 0 5vw;
        }


        .grid1 {
            width: calc(100% - 6px);
            margin: 3px;
            float: left;            
        }

        .grid2 {
          width: calc(50% - 6px);
          margin: 3px;
          float: left;
        }

        .grid3 {
          width: calc(50% - 6px);
          margin: 3px;
          float: left;
        }
        
        .grid4 {
          width: calc(25% - 6px);
          margin: 3px;
          float: left;
        }
        
        .grid5 {
          width: calc(20% - 6px);
          margin: 3px;
          float: left;
        }

        .grid6 {
          width: calc(50% - 6px);
          margin: 3px;
          float: left;
        }

        .grid7 {
          width: calc(100% / 7 - 6px);
          margin: 3px;
          float: left;
        }

        .grid8 {
          width: calc(100% / 8 - 6px);
          margin: 3px;
          float: left;
        }

        .grid9 {
          width: calc(100% / 9 - 6px);
          margin: 3px;
          float: left;
        }

        .grid10 {
          width: calc(10% - 6px);
          margin: 3px;
          float: left;
        }

        .grid11 {
          width: calc(100% / 11 - 6px);
          margin: 3px;
          float: left;
        }
        
        .grid12 {
          width: calc(100% / 12 - 6px);
          margin: 3px;
          float: left;
        }

    .mod_article.grid1 {
        width:62px
    }

    .mod_article.grid2 {
        width:124px
    }

    .mod_article.grid3 {
        width:186px
    }

    .mod_article.grid4 {
        width:248px
    }

    .mod_article.grid5 {
        width:310px
    }

    .mod_article.grid6 {
        width:372px
    }

    .mod_article.grid7 {
        width:434px
    }

    .mod_article.grid8 {
        width:496px
    }

    .mod_article.grid9 {
        width:558px
    }

    .mod_article.grid10 {
        width:620px
    }

    .mod_article.grid11 {
        width:682px
    }

    .mod_article.grid12 {
        width:744px
    }

    .offset1 {
        margin-left:72px !important
    }

    .offset2 {
        margin-left:134px !important
    }

    .offset3 {
        margin-left:196px !important
    }

    .offset4 {
        margin-left:258px !important
    }

    .offset5 {
        margin-left:320px !important
    }

    .offset6 {
        margin-left:382px !important
    }

    .offset7 {
        margin-left:444px !important
    }

    .offset8 {
        margin-left:506px !important
    }

    .offset9 {
        margin-left:568px !important
    }

    .offset10 {
        margin-left:630px !important
    }

    .offset11 {
        margin-left:692px !important
    }

    .offset12 {
        margin-left:754px !important
    }

    .mod_article.offset1 {
        margin-left:62px !important
    }

    .mod_article.offset2 {
        margin-left:124px !important
    }

    .mod_article.offset3 {
        margin-left:186px !important
    }

    .mod_article.offset4 {
        margin-left:248px !important
    }

    .mod_article.offset5 {
        margin-left:310px !important
    }

    .mod_article.offset6 {
        margin-left:372px !important
    }

    .mod_article.offset7 {
        margin-left:434px !important
    }

    .mod_article.offset8 {
        margin-left:496px !important
    }

    .mod_article.offset9 {
        margin-left:558px !important
    }

    .mod_article.offset10 {
        margin-left:620px !important
    }

    .mod_article.offset11 {
        margin-left:682px !important
    }

    .mod_article.offset12 {
        margin-left:744px !important
    }
}





@media (max-width: 767px) {
    #wrapper {
        margin: 0;
        width:auto;
    }
    #container, .inside {
        position:relative;
        margin: 0;
    }
    #container {
        padding-left: 0;
        padding-right:0;
        margin: 0;
        
    }

    #main, #left, #right {
        float: none;
        width:auto
    }

    #left {
        right: 0;
        margin-left:0
    }

    #right {
        margin-right:0
    }

    .grid1 {
        width: 100%;
        margin: 2px 0;
        float: left;
        padding-left: 1vw;
        padding-right: 1vw;    
    }

    .grid2 {
        width: 100%;
        margin: 2px 0;
      float: left;
      padding-left: 1vw;
        padding-right: 1vw;
    }
    .grid3 {
        width: 100%;
        margin: 2px 0;
      float: left;
      padding-left: 1vw;
        padding-right: 1vw;
    }
    
    .grid4 {
      width: calc(50% - 4px);
      margin: 2px;
      float: left;
    }
    
    .grid5 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }
    .grid6 {
        width: 100%;
        margin: 2px;
      float: left;
      padding-left: 1vw;
        padding-right: 1vw;
    }

    .grid7 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }

    .grid8 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }

    .grid9 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }

    .grid10 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }

    .grid11 {
        width: calc(50% - 4px);
        margin: 2px;
      float: left;
    }
    
    .grid12 {
        width: calc(100% / 4 - 4px);
        margin: 2px;
      float: left;
    }

    [class*grid] {
        /*float: none !important;*/
        display: block !important;
        width:auto !important
    }

    [class * =offset] {
        margin-left: 10px !important
    }

    
}



#content {
    padding-top:60px;
}

.float_left {
    float:left;
    padding-left: 15px;
}

.float_right {
    float:right;
    padding-right: 15px;
}

.margin-top_1{
    margin-top:1vh;
}

.margin-top_2{
    margin-top:2vh;
}

.margin-top_3{
    margin-top:3vh;
}


.fadein{
opacity: 0;
transform: translate(0, 13vh);
transition: all 0.7s ease-out;
}

.fadein.visible{
    opacity: 1;
    transform: none;
}

#herovid{
    z-index:-1;
}

#display_portfolio{
    margin-top:-13vh;
    z-index: 1;
    position: relative;
    color: #fff;
}

#copy_portfolio{
    margin-bottom: 18vh;
width: 64%;
margin-left: auto;
margin-right:auto;
font-family: 'open sans', sans-serif;
}

#display{
    font-size: 6vw;
    font-family: kade,'open sans', sans-serif;
}

.copy ul{
    list-style-type: none;
    padding-bottom: 5px;
    padding-left: 15px;
    list-style-position: outside;
    font-family: 'open sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    }
.copy ul li{
    padding-bottom:.4rem;
}

.ce_vimeo.grid1.block{
    margin-left: calc(50% - 320px);
    margin-right: calc(50% - 320px;)
    margin-top: 4vh;
}


iframe {
    width:100%;
    height: max(19vh, 22vw);
    border: none;
}


#portrait {
    width: min(45vh, 45vw);
    margin-right: auto;
    margin-left: auto;
    z-index: -1;
}
    
#display_me{
    margin-top:-13vh;
    margin-bottom: 12vh;
    z-index: 1;

}

#copy_me{
    margin-bottom: 18vh;
width: 64%;
margin-left: auto;
margin-right:auto;
font-family: 'open sans', sans-serif;
}