/*  LAYERS REFERENCE */
/*  Parent Layers:
    no zindex -- Portfolio content
    z-index:1 -- Navigation 
    z-index:2 -- Splash 
    
    Masonry Item Layers:
    z-index:1 -- all .masonry-item
    z-index:2 -- a clicked on .masonry-item sits on top 

    Portfolio Item Layers:
    no zindex -- Portfolio content
    z-index:1 -- an clicked on .masonry-item sits above. 
    z-index:2 -- Details sits behind the img to slide out to the side
    z-index:3 -- The main image
    z-index:4 -- Lazy Loaded portfolio samples
    z-index:5 -- .details-intro overlay with hover #7
    z-index:7 -- .masonry-item > a hover over thumbnail
*/


html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    font-size: 62.5%;
    line-height: 1.38;
    font-weight: 500;
    color:#333;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.clearfix {
    float: left;
    clear: both;
    height: auto;
    width: 100%;
}
img, video {
  max-width: 100%;
  vertical-align: middle;
}
p:not(:last-child) {
  margin: 0 0 1em;
}

/* SPLASH */
#splash {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background:#F7FBEF;
    transition:;
    display: block;
    z-index: 2000;
}
#splash:after {
    content:"";
    background: ;
    width: 100px;
    height: 100px;
    display: block;
    margin: auto;
    position: absolute;
    z-index: 1;
    background: url(/images/vector-waterlogo.svg) no-repeat;
    top:87px;
/*    bottom:0;*/
    left:212px;
/*    right:0;*/
}
#splash .container {
   width: 100%;
   height: 50px;
   position: fixed;
/*   top: 50%;*/
    top:117px;
   left: 50%;
   margin-left: -25%;
/*   margin-top: -25px;*/
}
#splash .scroller {
   height: 50px;
   line-height: 50px;
   float: left;
   margin-left: 5px;
   overflow: hidden;
}
#splash .scroller span {
   display: block; 
   font-size: 200%;
   color: #000;
    font-family: helvetica neue, helvetica, arial, sans-serif;
    font-weight: 200;
}

#splash .scroller .inner {
   -webkit-animation: scroll 10s 1 ease-out;
   -moz-animation: scroll 10s 1 ease-out;
   animation: scroll 10s 1 ease-out;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}

#splash strong {
    font-weight: 400;
}
#splash .lgray {
    color:#ddd;
}

.blue {
   -webkit-animation: color 0.25s 1 linear;
   -moz-animation: color 0.25s 1 linear;
   animation: color 0.25s 1 linear;
   
      -webkit-animation-delay: 8s;
   -moz-animation-delay: 8s;
   animation-delay: 8s;
   
      -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   
}

.blueb {
   -webkit-animation: color 0.25s 1 linear;
   -moz-animation: color 0.25s 1 linear;
   animation: color 0.25s 1 linear;
   
         -webkit-animation-delay: 8.25s;
   -moz-animation-delay: 8.25s;
   animation-delay: 8.25s;
   
      -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
}


@-webkit-keyframes color {
   0%  {color: #000;}
   100% {color: #1db2b3;}
}

@-moz-keyframes color {
   0%  {color: #000;}
   100% {color: #1db2b3;}
}

@keyframes color {
   0%  {color: #000;}
   100% {color: #1db2b3;}
}

@-webkit-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}

@-moz-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}

@keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -50px;}
   44%  {margin-top: -50px;}
   55%  {margin-top: -100px;}
   66%  {margin-top: -100px;}
   77%  {margin-top: -150px;}
   88%  {margin-top: -150px;}
   100% {margin-top: -150px;}
}
#splash #splash_grid {
    display:flex;
    flex-wrap: wrap;
    width:100%;
    height:100%;
    opacity: .12;
}
#splash #splash_grid .splash_grid__droplet {
    width:20%;
    height: 33%;
    background: url(/images/vector-waterlogo.svg) no-repeat;
    background-size:100% 100%;
    background-color:azure;
}
#splash #splash_grid .splash_grid__droplet:nth-child(8) {
    opacity: 0;
}

/* FRAMEWORK */
nav {
    width: 314px;
    position: fixed;
    padding-right: 28px;
    margin-left:20px;
}
#footer {
    width: 100%; 
    margin: 64px 0 0;
}
#browse {
    margin: 202px 80px 60px 321px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#browse .item {
    width: 31%;
    position: relative;
}
#browse img {
    max-width: 100%;
}
#details {
    display: block;
}

/* NAV */
nav img {
    width: 120px;
    float: right;
    margin-top: 75px;
    margin-right: -16px;
    margin-left: 16px;
}
nav img:first-child {
    width: 100px;
    height: 100px;
    top: 18px;
    position: absolute;
    right: 21px;
    margin:0;
}
nav ul {
    list-style-type: none;
    float:right;
    clear: both;
}
nav a {
    padding: 8px;
    display: block;
    text-decoration: none;
}


/* TYPOGRAPHY */
body > * {
    font-size: 14px;
    font-size: 1.4rem;
}
h2 {
    font-size: 24px;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 11px;
    line-height: 1.18;
}
h3 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.18;
}

nav a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    text-align: right;
}
.teal-bold {
    color: #1db2b3;
    font-weight: 600;
    font-style: italic;
}


/* COLORS */
nav a {
    color: #1db2b3;
}
#footer {
    background: #444; 
    color:#fff;
}


/* MASONRY */
.masonry-wrapper {
    padding: 1.5em;
    max-width: 1198px;
    margin-right: 0;
    margin-left: 368px; 
    margin-top: 38px;
}
.masonry {
    display: grid;
    grid-template-columns: repeat(1, minmax(100px,1fr));
    grid-gap: 32px;
    grid-auto-rows: 0;
    position: relative;
}
#footer .masonry-wrapper {
    padding-bottom: 9px 
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .masonry {
        grid-template-columns: repeat(2, minmax(46%,1fr));
    }
}
@media only screen and (max-width: 1279px) and (min-width: 1024px) {
    .masonry {
        grid-template-columns: repeat(2, minmax(378px,1fr));
    }
}
@media only screen and (min-width: 1280px) {
    .masonry {
        grid-template-columns: repeat(2, minmax(378px, 1fr));
    }
}
@media only screen and (min-width: 1625px) {
    .masonry {
        grid-template-columns: repeat(3, minmax(378px,1fr));
    }
}
/*
@media only screen and (min-width: 1500px) {
    .masonry {
        grid-template-columns: repeat(4, minmax(100px,1fr));
    }
}
*/
@media only screen and (max-width: 1625px) {
    
}
#portfolio .masonry-item {
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));
    transition: all .25s ease-in-out;
    position: relative;
}
.masonry-item:hover {
/*    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));*/
}
.masonry-item > a {
    display: block;
    width:100%;
    height: 100%;
    position:absolute;
    z-index: 7;
}
.masonry-item.showDetails > a {
    display: none;
}
.masonry-item > a i:before {
    opacity: 0;
    
}
.masonry-item > a:hover i:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 100px;
    color: rgba(255,255,255,.3);
    display: block;
    width: 113px;
    height: 100px;
    opacity: 1;
    transition: opacity .8s ease-in-out;
    
}
.masonry-wrapper .masonry-item {
    opacity: 1;
    transition: all .5s ease-in-out;
    z-index: 1;
}
.masonry-wrapper.dim .masonry-item.showDetails {
    z-index: 2;
}
.masonry-wrapper.dim .masonry-item:not(.showDetails) {
    opacity: .15;
}
.masonry-wrapper.dim .masonry-item:hover {
    opacity: 1;
}
#portfolio .masonry-item img {
    transition: all .5s ease;
    position: relative;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    z-index: 3;
    height: auto !important;
    max-width: none;
    width: auto;
    transform: scale(.5, .5);
}
#portfolio .masonry-item.col2-sm img, 
#portfolio .masonry-item.col3-md img {
    transition: all .5s ease;
    position: relative;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    right:100%;
}
#portfolio .masonry-item.showDetails img {
    transition: all .5s ease;
    transform: scale(1,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    background: #fff;
}
#portfolio .masonry-item.col3-md.showDetails img, 
#portfolio .masonry-item.col2-sm.showDetails img {
    transition: all .5s ease;
    transform: scale(1,1);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    right:100%;
}
#portfolio .masonry-item.showDetails .portfolio-images {
    position: absolute;
    top:0;
    left:0;
}
#portfolio .masonry-item.showDetails .portfolio-images img {
    position: absolute;
}
#portfolio .masonry-item.col3-md.showDetails .portfolio-images, 
#portfolio .masonry-item.col2-sm.showDetails .portfolio-images {
    left:100%;
}
@media only screen and (max-width: 1799px) {
/*
    .masonry-wrapper.dim .masonry-item.showDetails {
        z-index: 2;
    }
    .masonry-item.showDetails img {
        transform-origin: 0;
    }
*/
}

/* PORTFOLIO IMAGES */
.masonry-item img.lozad,
.masonry-item .portfolio-images img {
    display: none;
    z-index: 1;
    opacity: 0;
}
.masonry-item.showDetails img.lozad {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    transition: opacity .4s ease;
}
.masonry-item.showDetails.col3-md img.lozad {
    left:auto;
    right: 0;
}
ul.details_captions {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin:0;
}
ul.details_captions li {
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    padding: 0 0 0 6px;
}
.masonry-item.showDetails.image-1 > img,
.masonry-item.showDetails.image-2 > img,
.masonry-item.showDetails.image-3 > img,
.masonry-item.showDetails.image-4 > img,
.masonry-item.showDetails.image-5 > img,
.masonry-item.showDetails.image-6 > img,
.masonry-item.showDetails.image-7 > img,
.masonry-item.showDetails.image-8 > img {
    opacity: 0;
}
.masonry-item.showDetails.image-0 div.portfolio-images img:nth-child(1),
.masonry-item.showDetails.image-0 ul.details_captions li:nth-child(1),
.masonry-item.showDetails.image-1 div.portfolio-images img:nth-child(2),
.masonry-item.showDetails.image-1 ul.details_captions li:nth-child(2),
.masonry-item.showDetails.image-2 div.portfolio-images img:nth-child(3),
.masonry-item.showDetails.image-2 ul.details_captions li:nth-child(3),
.masonry-item.showDetails.image-3 div.portfolio-images img:nth-child(4),
.masonry-item.showDetails.image-3 ul.details_captions li:nth-child(4),
.masonry-item.showDetails.image-4 div.portfolio-images img:nth-child(5),
.masonry-item.showDetails.image-4 ul.details_captions li:nth-child(5),
.masonry-item.showDetails.image-5 div.portfolio-images img:nth-child(6),
.masonry-item.showDetails.image-5 ul.details_captions li:nth-child(6),
.masonry-item.showDetails.image-6 div.portfolio-images img:nth-child(7),
.masonry-item.showDetails.image-6 ul.details_captions li:nth-child(7),
.masonry-item.showDetails.image-7 div.portfolio-images img:nth-child(8),
.masonry-item.showDetails.image-7 ul.details_captions li:nth-child(8) {
    opacity: 1;
    transition: opacity .4s ease;
}


/* PORTFOLIO DETAILS */
.details {
    opacity: 0;
    position: absolute;
    left: 0;
    top:0;
    transition: left .4s ease;
    min-width: 100%;
    width:100%;
    z-index: 2;
}
.details_intro h2 ~ .teal-bold {
    margin-bottom: 18px;
    position: relative;
    left: 5px;
    top: -2px;
}
a.view-project {
    display: inline-block;
    padding: 1px;
    color: #666;
    text-decoration: none;
    font-weight: 700;
    margin-bottom: 14px;
    border-bottom: 1px dashed;
    position: relative;
    top: -11px;
    margin-left: 20px;
}
a.view-project:hover {
    color: #1db2b3;
}
a.view-project i {
    left: -18px;
    top: 4px;
    position: absolute
}
div.details_intro em {
    font-weight: 500;
}
.masonry-item.showDetails .details {
    display: block;
    position: absolute;
    left: 200%;
    width: 100%;
    top: 0;
    opacity: 1;
    transition: left .4s ease-in-out;
    transition-delay: .4s;
    padding: 26px 10% 21px 5%;
    background: #fff;
    min-height: 197%;
}
.masonry-item.showDetails .details h2 ~ div.teal-bold,
.masonry-item:not(.showDetails) .details h2 ~ a.view-project {
    display: none;
}

.masonry-item.col2-sm.showDetails .details,
.masonry-item.col3-md.showDetails .details {
    left: -200%;
    opacity: 1;
}
.masonry-item.col2-md.showDetails .details {
    left: -100%;
    opacity: 1;
}
.details a.close {
    color: #fff;
    text-decoration: none;
    display: block;
    position: absolute;
    top: 12px;
    right: 14px;
    /* border-top: 1px solid; */
    /* border-right: 1px solid; */
    height: 28px;
    width: 28px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    transition: left .3s ease;
    border-radius: 30px;
    background: #bebebe;
}
.details a.close:hover {
    color:#fff;
    background: #666;
}
.details > a.next {
    text-decoration: none;
    position: absolute;
    display: block;
    padding: 6px 20px;
    /* border-bottom: 1px solid; */
    left: -1px;
    top:2px;
    text-align: center;
    color: #1db2b3;
    font-weight: bold;
}

/*
.col3-md .details a.close,
.col2-md .details a.close,
.col2-sm .details a.close {
    right:auto;
    left:0;
    border-right:none;
    border-left: 1px solid;
    
}
*/
.masonry-item:not(.showDetails) > a:hover ~ div.details {
    opacity: 1;
    z-index: 5;
    height: 100%;
    transition: opacity .3s ease;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.85+32,0.45+75,0+99 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.85) 32%, rgba(0,0,0,0.45) 75%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 32%,rgba(0,0,0,0.45) 75%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.85) 32%,rgba(0,0,0,0.45) 75%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.masonry-item:not(.showDetails) > a:hover ~ div.details > *:not(.details_intro) {
    opacity:0;
}
.masonry-item:not(.showDetails) > a:hover ~ div.details > div.details_intro {
    color:#fff;
    padding:16px 36px;
}
ul.details_images, ul.details_categories {
    margin:18px 0;
    padding:0;
    min-height: 30px;
    position: relative;
    z-index: 2;
}
ul.details_images {
    left:6px;
    margin-bottom: 0;
}
ul.details_categories {
    padding-left: 21px;
    margin-top:0;
    margin-bottom: 0;
    clear: both;
    float: left;
}
ul.details_categories li {
    float: left;
    width: 50%;
    white-space: nowrap;
}
ul.details_images li {
    list-style-type: none;
    float: left;
}
/*
ul.details_images:before {
    content: "Samples";
    color: #1db2b3;
    font-weight: 600;
    font-style: italic;
    position: relative;
    top: 3px;
    float: left;
    margin-right: 14px;
}
*/
ul.details_images li a,
.teal-badge {
    color: #fff;
    font-weight: 700;
    background: #1db2b3;
    border-radius: 40px;
    display: inline-block;
    width: 26px;
    text-align: center;
    text-decoration: none;
    height: 26px;
    font-family: sans-serif;
    padding-top: 3px;
    margin-right: 15px;
    font-style: normal;
    position: relative;
}
ul.details_images li a.selected:after {
    content: "";
    width: 32px;
    height: 32px;
    background: none;
    border-radius: 40px;
    border: 1px solid #1db2b3;
    display: block;
    top: -3px;
    left: -3px;
    position: absolute;
}
.teal-badge {
    margin-right:6px;
}

/* ABOUT ALICE*/
#about h3 {
    color:#ddd;
    font-size:42px;
    margin-top:36px;
    font-weight: 800;
}
#about .block {
    width: 200%;
    font-size: 28px;
    text-align: center;
    opacity: .3;
    margin-bottom: 0;
    margin-top:0;
    position: relative;
    top:14px;
}
#about .dud .block {
    opacity: 0;
}

/* 1280 - 1625 */
@media only screen and (max-width: 1624px) and (min-width: 1280px) {
    
    #wrapper {
        min-width: 1280px;
        max-width: 1440px;
        margin: 0 auto;
    }
    
    .masonry-wrapper {
        max-width: 832px;
        margin-left: 24%; 
    }
    nav {
        width: 20%;
    }
/*
    #portfolio .masonry-item img {
        transform: scale(.39, .39);
    }
*/
    #portfolio .masonry-item.showDetails img {
        transform: scale(.7,.7);
    }
/*    #portfolio .masonry-item.col3-md.showDetails img, */
    #portfolio .masonry-item.col2-sm.showDetails img {
        transform: scale(.7,.7);
    }
/*
    #portfolio .masonry-item.col3-md.showDetails img, 
    #portfolio .masonry-item.col3-md img {
        right:156%;
    }
*/
    .masonry-item.showDetails .details {
        width: 100%;
        left:139.5%;
    }
    .masonry-item.col2-sm.showDetails .details, 
    .masonry-item.col2-md.showDetails .details {
        left:-139%;
    }
    .masonry-item.col2-md.showDetails .details {
        left:-100%;
    }
    ul.details_images:before {
        display: block;
        margin-bottom: 12px;
        float: none;
    }
    #about .block {
        width: 100%;
    }
}

/*1024 - 1279*/
@media only screen and (max-width: 1279px) and (min-width:1024px) {
     #wrapper {
        min-width: 1024px;
        max-width: 1140px;
        margin: 0 auto;
    }
    
    .masonry-wrapper {
        max-width: 832px;
        margin-left: 18%; 
    }
/*
    .masonry-wrapper {
        max-width: 832px;
        margin-left: 177px; 
    }
*/
    nav {
        width: 14%;
    }
    nav ul {
        padding: 0;
    }
    ul.details_images:before {
        display: block;
        margin-bottom: 12px;
        float: none;
    }
    ul.details_categories li {
        width: 100%;
    }
    .masonry-item.showDetails .details {
        left: 96.5%;
        min-height: 157.5%;
        min-width: auto;
    }
    #portfolio .masonry-item.showDetails img {
        transform: scale(.7,.7);
    }
    #portfolio .masonry-item.showDetails:not(.col2-sm) img {
        left:-43%;
    }
    #portfolio .masonry-item.col3-md.showDetails img, 
    #portfolio .masonry-item.col2-sm.showDetails img {
        transform: scale(.7,.7);
    }
    .masonry-item.showDetails:not(.col2-sm) img {
        left:-4.5%;
    }
    .masonry-item.showDetails:not(.col2-sm) img.lozad {
        left:-4.5%;
    }
    .masonry-item.showDetails.col2-sm img.lozad {
        left:-100%;
    }
    .masonry-item.col3-md.showDetails img, .masonry-item.col2-sm.showDetails img {
        transform: scale(.8,.8);
    }
    .masonry-item.col2-sm.showDetails .details, .masonry-item.col3-md.showDetails .details {
        left: -140%;
    }
    
}
@media only screen and (max-width: 1279px) {
    #splash .container {
        top: 197px;
        padding: 0 26px;
    }
    #splash:after {
        content: "";
        background: ;
        width: 100px;
        height: 100px;
        display: block;
        margin: auto;
        position: absolute;
        z-index: 1;
        background: url(/images/vector-waterlogo.svg) no-repeat;
        top: 87px;
        left: 50%;
        margin-left: -25%;
    }
    #about .masonry {
        display: flex;
        flex-wrap:wrap;
    }
    #about .alice-img {
        transform: none;
        width: 100%;
        max-width: 280px;
        max-height: 380px;
    }
    #about .masonry .masonry-item {
        flex-grow: 44%;
        width: 44%;
    }
    #about .block {
        width:100%;
        margin-top:36px;
    }
    #about .dud {
        display: none;
    }
    #about .masonry .masonry-item:nth-child(1) {
        order:1;
    }
    #about .masonry .masonry-item:nth-child(3) {
        order:2;
        max-height: 200px;
    }
    #about .masonry .masonry-item:nth-child(2) {
        order:3;
    }
    #about .masonry .masonry-item:nth-child(4) {
        order:4;
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 2;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+61 */
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    }
    #about .masonry .masonry-item:nth-last-child(2) {
        order:5;
    }
    #about .masonry .masonry-item:nth-last-child(1) {
        order:6;
    }
}
@media only screen and (max-width: 1023px) {
    #wrapper {
        width:100%;
        margin: 0 auto;
        max-width:832px;
    }
    
    #splash .container {
        top: 197px;
        padding: 0 26px;
        left: 30px;
        margin-left: 0;
    }
    #splash:after {
        content: "";
        background: ;
        width: 100px;
        height: 100px;
        display: block;
        margin: auto;
        position: absolute;
        z-index: 1;
        background: url(/images/vector-waterlogo.svg) no-repeat;
        top: 87px;
        left: 30px;
        margin-left: 0%;
    }
    
    .masonry-wrapper {
        max-width: 832px;
        margin-left: 24%; 
    }
    nav {
        width: 100%;
        height: 51px;
        position:relative;
    }
    nav img:first-child {
        width: auto;
        height: 100px;
        top: -34px;
        position: absolute;
        left: 0;
        margin: 0;
        right: auto;
    }
    nav img:nth-child(2) {
        display: none;
    }
    nav ul {
        padding: 0;
        margin-left: 100px;
        float: none;
        height: 40px;
        margin-top: 35px;
    }
    nav ul li {
        float: left;
        margin: 0 18px;
    }
    
    .masonry-wrapper {
        max-width: 832px;
        margin-left: 0;
        padding-left:1.5em;
        padding-right:1.5em;
    }
    .masonry-item img {
        transform: none;
        max-width: 100%;
    }
    ul.details_images li {
        margin-bottom: 14px;
    }
    #portfolio .masonry-item.showDetails img {
        transform: scale(.6,.6);
    }
    #portfolio .masonry-item.showDetails:not(.col2-sm) img {
        left:0%;
    }
    #portfolio .masonry-item.col3-md.showDetails img, 
    #portfolio .masonry-item.col2-sm.showDetails img {
        transform: scale(.6,.6);
    }
    #portfolio .masonry-item img {
        transform: scale(.5, .5);
    }
    .masonry-item.showDetails .details {
        left: 119.5%;
        width: 90%;
        min-width: 90%;
    }
    .masonry-item.col2-sm.showDetails .details, 
    .masonry-item.col3-md.showDetails .details {
        left: -110%;
        
    }
}

@media only screen and (max-width: 843px) {
    #splash .container {
        top: 197px;
        padding: 0 26px;
        left: 30px;
        margin-left: 0;
        width: calc(100% - 56px);
        text-align: center;
        height: 80px;
    }
    #splash .scroller {
        height: 80px;
        line-height: 34px;
    }
    #splash .scroller span {
        height: 80px;
    }
    #splash:after {
        top: 87px;
            left: 0;
        right: 0;
        margin: auto;
    }
    @-webkit-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -80px;}
   44%  {margin-top: -80px;}
   55%  {margin-top: -160px;}
   66%  {margin-top: -160px;}
   77%  {margin-top: -240px;}
   88%  {margin-top: -240px;}
   100% {margin-top: -240px;}
}

@-moz-keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -80px;}
   44%  {margin-top: -80px;}
   55%  {margin-top: -160px;}
   66%  {margin-top: -160px;}
   77%  {margin-top: -240px;}
   88%  {margin-top: -240px;}
   100% {margin-top: -240px;}
}

@keyframes scroll {
   11%  {margin-top: 0px;}
   22%  {margin-top: 0px;}
   33%  {margin-top: -80px;}
   44%  {margin-top: -80px;}
   55%  {margin-top: -160px;}
   66%  {margin-top: -160px;}
   77%  {margin-top: -240px;}
   88%  {margin-top: -240px;}
   100% {margin-top: -240px;}
}
    #about .masonry .masonry-item {
        flex-grow: 98%;
        width: 98%;
    }
    #about .masonry .masonry-item:nth-child(1) {
        position: relative;
        z-index: 2;
    }
    #about .masonry .masonry-item:nth-child(3) {
        order: 3;
        max-height: 200px;
        position: absolute;
        top: 165px;
        right: 16px;
    }
    #about .masonry .masonry-item:nth-child(2) {
        order:4;
        position: relative;
        z-index: 2;
        background: #fff;
        padding-top:8px;
    }
    #about .masonry .masonry-item:nth-child(4) {
        order:2;
        width: 66%;
        padding-right: 12px;
        width: 66%;
        min-width: 350px;
    }
    #about .block {
        margin-bottom: 50px;
        margin-top: 37px;
    }
    #portfolio .masonry-item img {
        transform: scale(1, 1);
        width: 100%;
    }
    .masonry-item > a {
        display: none !important;
    }
    .masonry {
        display: flex;
        position: relative;
        flex-direction: column;
    }
    #portfolio .masonry-item {
        display: flex;
        flex-direction: column;
    }
    #portfolio .masonry-item > img {
        display: none;
    }
    .details {
        opacity: 1;
        position: static;
        left: 0;
        top: 0;
        transition: left .4s ease;
        min-width: 100%;
        width: 100%;
        z-index: 3;
        order:1;
        margin-bottom: 16px;
    }
    .details_captions {
        order: 2;
    }
    .portfolio-images {
        order:3;
    }
    .details a.next, .details a.close, .teal-bold {
        display: none !important;
    }
    .masonry-item .portfolio-images {
        display: block;
        position: relative;
        z-index: 10;
        opacity: 1;
        top:0;
        left:0;
    }
    .masonry-item:not([class*="image-"]) .portfolio-images img:first-child, 
    .masonry-item:not([class*="image-"]) .details_captions li:first-child {
        display: block;
        opacity: 1;
    }
    .masonry-item .details_captions li {
        position: relative;
        display: none;
    }
    .masonry-item.image-1 > img,
    .masonry-item.image-2 > img,
    .masonry-item.image-3 > img,
    .masonry-item.image-4 > img,
    .masonry-item.image-5 > img,
    .masonry-item.image-6 > img,
    .masonry-item.image-7 > img,
    .masonry-item.image-8 > img {
        opacity: 0;
    }
    .masonry-item.image-0 div.portfolio-images img:nth-child(1),
    .masonry-item.image-0 ul.details_captions li:nth-child(1),
    .masonry-item.image-1 div.portfolio-images img:nth-child(2),
    .masonry-item.image-1 ul.details_captions li:nth-child(2),
    .masonry-item.image-2 div.portfolio-images img:nth-child(3),
    .masonry-item.image-2 ul.details_captions li:nth-child(3),
    .masonry-item.image-3 div.portfolio-images img:nth-child(4),
    .masonry-item.image-3 ul.details_captions li:nth-child(4),
    .masonry-item.image-4 div.portfolio-images img:nth-child(5),
    .masonry-item.image-4 ul.details_captions li:nth-child(5),
    .masonry-item.image-5 div.portfolio-images img:nth-child(6),
    .masonry-item.image-5 ul.details_captions li:nth-child(6),
    .masonry-item.image-6 div.portfolio-images img:nth-child(7),
    .masonry-item.image-6 ul.details_captions li:nth-child(7),
    .masonry-item.image-7 div.portfolio-images img:nth-child(8),
    .masonry-item.image-7 ul.details_captions li:nth-child(8) {
        opacity: 1;
        transition: opacity .4s ease;
        display: block;
    }
}
@media only screen and (max-width: 640px) {
    #about .block {
        margin-bottom: 0;
        margin-top: 120px;
    }
}
@media only screen and (max-width: 360px) {
    #about .masonry .masonry-item:nth-child(3) {
        order: 3;
        max-height: 200px;
        position: absolute;
        top: 324px;
        right: 0;
    }
    #about .masonry .masonry-item:nth-child(4) {
        min-width: 275px;
    }
    #about .block {
        margin-top: 120px;
        padding-bottom: 12px;
    }
    #portfolio .masonry-item img {
        transform: scale(.4, .4);
    }
    nav ul li {
        margin: 0 12px;
    }
    nav ul {
        position: relative;
        margin-left: 0;
        top: 42px;
    }
    .masonry {
        display: flex;
        position: relative;
        flex-direction: column;
    }

}