// Small screens
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 46.125em) {
  .site-branding{
  position: relative;
}
  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;}
body h1,
body h2,
body h3,
body h4,
body h5{font-size: 123%;}

body .content-area .bpl .blog-title {
    font-size: 1.2em;}

    body #tabletnav-comb .wpsw-social-links li a .social-icon {
        background: #eeeeee !important;
        color: #df4754 !important;
    }
    body #tabletnav-comb .social-icon:after {
    top: 0;
    left: 0;
    padding: 0;
    -webkit-box-shadow: 0 0 0 2px #22252c;
    -moz-box-shadow: 0 0 0 2px #22252c;
    -ms-box-shadow: 0 0 0 2px #22252c;
    -o-box-shadow: 0 0 0 2px #22252c;
    box-shadow: 0 0 0 2px #22252c;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
body #tabletnav-comb.topicnav::after {
    content: '';
    width:0;
    height:0;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewx(0);
}

    #tabletnav-comb.topicnav .social-area h3{color: #22252c;}

    #menu-tab-menu {
    margin-bottom: 0;
}
    .social-area {
        position: relative;
        background: #eee;
        padding-top: 0.1em;
        margin-top: 1em;
    }

    /*.social-area::after{
        content: '';
        width: 100%;
        height: 52%;
        position: absolute;
        background: inherit;
        z-index: -1;
        bottom: -4.4em;
    transform-origin: left bottom;
    transform: skewy(-6deg);
      }*/

  .carousel {
    margin: 0 auto;
}
.carousel-2 li{width:50%;}
/*.full{
    position: relative;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    float: left;
}*/
.blog-header {
    margin: 0.5em 0 0 0em;
}
.blog-content-area .entry-content {
    background: rgba(255, 255, 255, 1);


    z-index: 1;}
.blog-thumb .readblog{
    position: absolute;
    bottom: 0em;
    left: 1em;
    z-index: 8;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 300;
    word-spacing: 0.1em;
    letter-spacing: 0.1em;

    opacity: 1;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
}
.blog-thumb:hover .readblog{
  opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.blog-thumb .readblog hr{
  width: 30%;
    clear: both;
    margin: 0.25rem 0 1.1875rem;
    transition:   width 0.45s ease;
    }
.blog-thumb:hover .readblog hr{width: 30%;}

/*slideout nav*/
.desktopside {width: 0;}
.closeplus {right: 0em;}
.topicnav h3 {  margin: 1em 0 1em 1em;}
.topicnav-vertical {
  width: 100%;
z-index: 9;}
.topicnav-archive, .topicnav-contact {
    width: 100%;
  z-index: 9;}

.topicnav-left {
    	left: -100%;
    }
.topicnav-100left {
    	left: -100%;
    }
.topicnav-left.topicnav-open {
    	left: 0;
      z-index: 9;
    }

.topicnav-100left.topicnav-open {
    	left: 0;
      z-index: 9;
    }

  .closeplus .fa {
    margin-top: 0.25em;
}

#contactnav-comb.topicnav-100left.topicnav-open {
        left: 0em;
        z-index: 10;
        overflow-y:scroll;
        overflow-x: hidden;
    }

    #porfolionav-comb.topicnav-left {
        left: -923px;
    }

    #topicnav-comb.topicnav-left{
      left: -996px;
    }
    #archivenav-comb.topicnav-100left{left: -996px;}
    #contactnav-comb.topicnav-100left{left: -996px;}


    #topicnav-comb.topicnav-left.topicnav-open {
        left: 0em;
          z-index: 10;
    }
    #archivenav-comb.topicnav-100left.topicnav-open {
              left: 0em;
                z-index: 10;
          }
    #tabletnav-comb.topicnav-left {
      left: -990px;
    }
    #tabletnav-comb.topicnav-left.topicnav-open {
              left: 0em;
              z-index: 10;
          }




              #tabletnav-comb, #tabletnav-comb.topicnav {
              background: #eee;
              overflow-y: scroll;
              overflow-x: hidden;
            }

    #tabletnav-comb.topicnav::after{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        background: inherit;
        z-index: -1;
        bottom: 0;
        transform-origin: left bottom;
        transform: skewx(0);
      }

    #tabletnav-comb .wpsw-social-links li a{padding: 0.4em;}
    #tabletnav-comb .wpsw-social-links{margin: 0 1em 0 0.7em;}
    #tabletnav-comb.topicnav h3 {
          color: #22252c;
            border-left: 3px solid #df4754;
          font-size: 1.2em;}
    #tabletnav-comb.topicnav a {
              display: block;
              color: #22252c;
              font-size: 0.875rem;
              font-weight: 300;
              text-align: left;
              padding-left: 2.2em;
          }
      #tabletnav-comb .closeplus {
              width: 3em;
              height: 3em;
              position: absolute;
              top: 0;
              background: #eee;
              text-align: center;
              cursor: pointer;
          }

      #porfolionav-comb.topicnav-left.topicnav-open {
          left: -3em;
              z-index: 11;
      }
      #porfolionav-comb.topicnav-left{
        padding-left: 4.2em;

      }
      #porfolionav-comb.topicnav-left h3{
          font-size: 1.2em;
          margin-left: 0;
      }
      #porfolionav-comb.topicnav-left a{
      text-align: left;
      padding-left: 1em;

      }

      #porfolionav-comb.topicnav-left::after {
          content: '';
          width: 167%;
          height: 100%;
          position: absolute;
          background: inherit;
          z-index: -1;
          top: 0;
          right: -3em;
          transform-origin: right top;
          transform: skewx(-3.6deg);

      }
      #porfolionav-comb .closeplus {
          width: 3em;
          height: 3em;
          position: absolute;
          top: 0;
          right: -2.8em;
          background: #22252c;
          text-align: center;
          cursor: pointer;
      }
      #porfolionav-comb .closeplus .fa {
          color: #fff;
          margin-top: 0.25em;
      }


      #contactnav-comb .closeplus .fa {
          color: #fff;
          margin-top: 0.25em;
      }
    .new-here{  background:#fff;
      /*padding-top:0.4em;
      min-height: 20em;*/
    }
/*#TabletNav{font-size: 0.6em;}

#TabletNav .fa-stack {
        display: block;
        width: 2em;
        height: 2em;
        line-height: 3em;
        margin-top: -12px;
    }
*/
#TabletNav {
    float: right;
}
#masthead{
position: fixed;
    /* padding-bottom: 5em; */
    background: rgba(255, 255, 255, 0.90);
    top: 0;
    height: 2.7em;
      border-bottom: 1px solid #eee;
}
#page{padding-top: 2.6em;}

#blognav{
  /*background: #fff;*/
  list-style: none;
background: rgba(255, 255, 255, 0.90);
  margin: 0;
position: fixed;
bottom: 0;
height: 3.7em;
width: 100%;
border-top: 1px solid #eee;
}


  .Topic{
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;}

    #blognav li{
      float: left;
      width: 33%;
      text-align: center;
      /*background: rgba(255, 255, 255, 0.90);*/
      font-size: 0.8em;
    padding-bottom: 0.2em;

  }



    #BackBlog .fa-stack, #TopicNav .fa-stack, #ArchiveNav .fa-stack {
        display: block;
        font-size: 2em;
        height: 1.4em;
        line-height: 1.4em;
        margin-left: auto;
        margin-right: auto;
    }
  .blog #colophon, .single-post #colophon,
    .archive #colophon,
    .portfolio-template #colophon,
    .category #colophon,
    .date #colophon {
        margin-bottom: 6em;
    }
    .portfolio-container{position: relative; margin-bottom: 1.5em!important;}
    .portfolio-container .entry-title{ width: 100%;}
    .cat-area {

    background: #fff;
    position: absolute;

    right: 0;
}
.portfolio-container.cat-area i.fa {
    margin: 0 auto;
}

body #main .portfolio-container {
    border-top: 0;

}

.greyscale {
    margin-bottom: 1.5em;
    border-top: 4px solid #df4754;
}

body #main .portfolio-container .entry-title {
    width: 100%;
    margin-top: 0.7em;
}

body #main .cat-area i.fa {
    display: block;

    margin: 0em 0;
}

body #main .cat-area .fa-4x {
    font-size: 2.4em;
}


body  #portMobnav li a {
  float: left;
  width: 16.6%;
  text-align: center;
  background: rgba(255, 255, 255, 0.90);
  font-size: 0.1em;
  height: 9em;
  color:rgba(255, 255, 255, 0);
}
#menu-portfolio{margin-bottom: 0;}
#portMobnav{list-style: none;
  height: 3.4em;
  /*background: #444;*/
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
width: 100%;
position: fixed;
bottom: 0;
border-top: 1px solid #eee;}

#portMobnav li.traditional a,#portMobnav li.film a{border-left: 1px solid #eee;
    border-right: 1px solid #eee;}
    #portMobnav li.cgi a{border-left: 1px solid #eee;
      }

#portMobnav li.traditional a:after {
  font-size: 22em;
  height: 0em;
  padding: 0;
  display: block;
  margin-top: -0.3em;
background: rgba(255, 255, 255, 0.90);
color: #df4754;

}

#portMobnav li.cgi a:after {
  font-size: 22em;
  height: 0em;
  padding: 0;
  display: block;
  margin-top: -0.2em;
background: rgba(255, 255, 255, 0.90);
color: #df4754;
}


#portMobnav li.film a:after {
  font-size: 22em;
  height: 0em;
  padding: 0;
  display: block;
  margin-top: -0.2em;
background: rgba(255, 255, 255, 0.90);
color: #df4754;
}

#portMobnav li.photography a:after {
  font-size: 22em;
  height: 0em;
  padding: 0;
  display: block;
  margin-top: -0.3em;
background: rgba(255, 255, 255, 0.90);
color: #df4754;
}

#portMobnav li.web a:after {
  font-size: 22em;
  height: 0em;
  padding: 0;
  display: block;
  margin-top: -0.2em;
background: rgba(255, 255, 255, 0.90);
color: #df4754;
}

.a,.c,.d,.e, .g{height: 11em;
  /*width: 50%; float: left; */
  margin-bottom: 0;}
.b{height: 11em;  margin-bottom: 0;}
.a hr,.b hr, .c hr ,.d hr ,.e hr , .g hr{width: 0;}

.a{margin-bottom:2em; }
body #main .portfolio-heading {
    margin-top: 7.8em;
}
.fbp-container {
    margin-top: -2em;
}

.fbp{clear: both;}
.slide-out #portMobnav, .slide-out #blognav {
    opacity: 0;
}

#portMobnav, #blognav {
    -webkit-transition: -webkit-transform .58s;
    -ms-transition: -o-transform .58s ;
    -o-transition: -o-transform .58s ;
    transition: transform .58s ;
}
.slide-out #portMobnav, .slide-out #blognav  {
    -webkit-transform: translate3d( 0, 100px, 0 );
    -ms-transform: translate3d( 0, 100px, 0 );
    -o-transform: translate3d( 0, 100px, 0 );
    transform: translate3d(  0, 100px, 0 );
}


} /* max-width 640px, mobile-only styles, use when QAing mobile issues */


@media only screen and (max-width: 46.125em) and (orientation:landscape){
body #main .cat-area {
    text-align: center;
    background: #fff0;
    width: 18%;
    margin-bottom: 10em;
    top: 9em;
}

}

@media only screen and (max-width: 46.125em) and (orientation:portrait){
.cat-area {
    text-align: right;
    margin-top: 0;
}

body #main .cat-area i.fa {
    display: initial;
    text-align: left;
    margin: 0em 0;
    vertical-align: -webkit-baseline-middle;
}

/*body #main .cat-area {
      background: rgba(255, 255, 255, 0.23);
    top: 10.5em;
    right: 1em;
    width: 50%;
    color: #df4754;
}*/
body #main .cat-area {

  top: 4px;
  left: 0.9em;
  width: 95%;
  color: #df4754;
  padding: 0.1em 0 0em 0.5em;
  text-align: left;
  background: #ffffffd1;
}

body #main .cat-area .fa-4x {
    font-size: 2.4em;
}

}


// Medium screens
@media only screen and (min-width: 46.688em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }

  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}
  .site-branding{
  position: relative;
  height: 13.8em;
  }

  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;}
  /*.page .content-area{padding-right: 0.9375rem;}*/
  /*topbar styling*/
  .top-bar {
    overflow-x: hidden;
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
.title-area{display: none;}
.blog-header {
    margin: 0.5em 0 0 -2em;
}
.blog-content-area .entry-content {
    background: rgba(255, 255, 255, 1);
    padding: 1em;
    margin: 2em 1.5em 2em -2.5em;
    z-index: 1;}

     .blog-thumb .readblog{
       position: absolute;
       bottom: 1em;
       left:9em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.8em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;

         opacity: 1;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,0,0);
             transform: translate3d(0,0,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
     }
     .blog-thumb .readblog hr{
       width: 0%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }
     .blog-thumb:hover .readblog hr{width: 30%;}
     /*slideout nav*/
     .desktopside {width: 10.3em;}
     .closeplus {right: -2.9em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 80%;}

     .topicnav-left {
         	left: -240px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     .topicnav-left.topicnav-open {
         	left: 10.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 10.3em;
         }
.portfolio-template-portfolio-video iframe{margin: 0 20%;}

.portfolio-container .entry-title{position: absolute;
bottom: 1em; left: 0.33em; width: 100%;}

 } /* min-width 641px, medium screens */

@media only screen and (min-width: 46.688em) and (max-width: 64em) and (orientation : portrait) {
.medium-1{width: 100%;}
  .medium-11{width: 100%;}
  #masthead .site-branding {
    position: relative;
     height: 0em;
}
#masthead .desktopside {
    position: fixed;
    background: #fff;
    height: 4.5em;
    width: 100%;
}
#masthead {
    z-index: 8;
    height: 4.4em;
}
    .site-title a{  position: absolute;
          top: 0em;
          left: 0.4em;
          background: url(images/sb-logo3.svg) no-repeat;
          width: 49px;
          height: 63px;
          background-size: 100%;}
#TabletNav{
  float: left;
  /*margin-left: 8em;*/
  position: fixed;
  left: 8em;
  top:0.1em;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  padding-bottom: 0.6em;
}
#blognav{float: right;
    list-style: none;
    margin: 0;
position: fixed;
right: 2em;
border-left:1px solid #eee;
border-right:1px solid #eee;

  }

#blognav li{float: left;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
.Topic{border-left:1px solid #eee;
border-right:1px solid #eee;.}

#TopicNav .fa-stack{display: block;}
#TabletNav .fa-stack{display: block;}
#ArchiveNav .fa-stack{display: block;}

.content-area .bpl .blog-title {
            font-size:1em;
            line-height: 1.4em;}

#blognav a, #TabletNav{color:#22252c; }

    .new-here h1, .new-here h2{font-size: 100%;}
    .a, .b, .c, .d, .e, .f, .g {
      min-height: 13em;
  }

#ArchiveNav,#TabletNav,#TopicNav{z-index: 2;}

  .new-here{  background:#fff;
    padding-top:0.4em;
    min-height: 13em;
  }

#porfolionav-comb.topicnav-left {
    left: -370px;
}

#topicnav-comb.topicnav-left{
  left: -306px;
}

#topicnav-comb.topicnav-left.topicnav-open {
    left: 0em;
      z-index: 10;
}
#archivenav-comb.topicnav-100left.topicnav-open {
          left: 0em;
            z-index: 10;
      }
#tabletnav-comb.topicnav-left {
  left: -306px;
}
#tabletnav-comb.topicnav-left.topicnav-open {
          left: 0em;
          z-index: 10;
      }



#tabletnav-comb.topicnav {
          background: #eee;}


#tabletnav-comb.topicnav::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewx(-3.7deg);
  }
#tabletnav-comb.topicnav h3 {
      color: #22252c;
        border-left: 3px solid #df4754;}
#tabletnav-comb.topicnav a {
          display: block;
          color: #22252c;
          font-size: 0.875rem;
          font-weight: 300;
          text-align: center;
      }
  #tabletnav-comb .closeplus {
          width: 3em;
          height: 3em;
          position: absolute;
          top: 0;
          background: #eee;
          text-align: center;
          cursor: pointer;
      }

  #porfolionav-comb.topicnav-left.topicnav-open {
      left: 17em;
          z-index: 10;
  }
  #porfolionav-comb.topicnav-left{padding-left: 2.7em;}

  #porfolionav-comb.topicnav-left::after {
      content: '';
      width: 167%;
      height: 100%;
      position: absolute;
      background: inherit;
      z-index: -1;
      top: 0;
      right: -3em;
      transform-origin: right top;
      transform: skewx(4.6deg);
  }

  .intro-text {
      margin-top: 1em;
      margin-left: 0.6em;
  }
  .fbp-container {
      padding: 0 1em 1em 1em;
  }

  #TabletNav .fa-stack,
  #BackBlog .fa-stack,
  #TopicNav .fa-stack,
  #ArchiveNav .fa-stack {
      display: block;
  font-size: 2em;

  }

  #BackBlog .fa-stack,
  #TopicNav .fa-stack,
  #ArchiveNav .fa-stack{
      /*line-height: 3.3em;*/
      margin: 0 auto;
          height: 1.6em;
  }

  #TabletNav .fa-stack{
    margin: 0 auto 0.1em auto;
    height: 1.6em;}

  .topicnav a:hover {
      background: #df4754;
  }
  #blognav a, #TabletNav {
      /*color: #22252c;*/
      color: #df4754;
      text-align: center;
      font-size: 0.8em;
  }
  #blognav li{  text-align: center;   padding-bottom: 0.7em;}

  .greyscale h1 {
      font-size: 1.3rem;
  }
  .entry-title {
      margin-left: 0em;
      line-height: 1.29em;

  }
  .portfolio-heading .entry-title{
    background: rgba(255, 255, 255, 0.79);
    margin-left: 0.17em;}

  .portfolio-container .entry-title{
    margin-left: -0.33em;
    font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.79);}
  .portfolio-container .cat-area {font-size: 0.7em;}
  .portfolio-container .fa-4x {
      font-size: 4em;
  }
  .portfolio-container .cat-area i.fa {
      display: block;
      text-align: center;
      margin: 1.6em auto 0.8em;
  }
  .portfolio-template-portfolio-video iframe {
      margin: 0 13%;
  }

  #contactnav-comb.topicnav-100left.topicnav-open {
      left: 0em;
      z-index: 10;
  }

  .portfolio-container .entry-title{position: absolute;
  bottom: 1em; left: 0.33em; width: 100%;}

}

@media only screen and (min-width: 46.688em) and (max-width: 64em) and (orientation:landscape) {
  .medium-2{}
    .medium-10{}
      .site-title a{  position: absolute;
            top: 1em;
            left: 0.2em;
            background: url(images/sb-logo3.svg) no-repeat;
            width: 63px;
            height: 63px;
            background-size: 100%;}

.content-area .bpl .blog-title {
              font-size:1em;
              line-height: 1.4em;}
.a, .b, .c, .d, .e, .f, .g {
    min-height: 17em;}
.new-here{  background:#fff;
      padding-top:0.4em;
      min-height: 17em;
    }


.desktopside {
      width: 5.282em;
}
.intro-text {
    margin-top: 1em;
    margin-left: 0.6em;
}
.fbp-container {
    padding: 0 1em 1em 1em;
}
#TabletNav{
  position: fixed;
  top:15.55em;
  display: block;
  margin: 0;
    width: 6.6em;
      padding-bottom: 0.969em;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

#TabletNav .fa-stack,
#BackBlog .fa-stack,
#TopicNav .fa-stack,
#ArchiveNav .fa-stack {
    display: block;
font-size: 2em;

}

#BackBlog .fa-stack,
#TopicNav .fa-stack,
#ArchiveNav .fa-stack,
#TabletNav .fa-stack {
    /*line-height: 3.3em;*/
    margin: 0 auto;
        height: 1.6em;
}
.topicnav a:hover {
    background: #df4754;
}
#blognav a, #TabletNav {
    /*color: #22252c;*/
    color: #df4754;
    text-align: center;
    font-size: 0.8em;
}
#blognav li{  text-align: center;   padding-bottom: 0.7em;}
#blognav{position: fixed;
  list-style: none;
  top:30em;
  margin: 0;
  width: 5.3em;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.Topic{border-top: 1px solid #eee;
border-bottom: 1px solid #eee;}
  #tabletnav-comb.topicnav-left.topicnav-open {
        left: 5.3em;
    }
  #tabletnav-comb.topicnav {
        background: #eee;}


#tabletnav-comb.topicnav::after{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  bottom: 0;
  transform-origin: left bottom;
  transform: skewx(-3.7deg);
}
  #tabletnav-comb.topicnav h3 {
    color: #22252c;
      border-left: 3px solid #df4754;}
    #tabletnav-comb.topicnav a {
        display: block;
        color: #22252c;
        font-size: 0.875rem;
        font-weight: 300;
        text-align: center;
    }
  #tabletnav-comb .closeplus {
        width: 3em;
        height: 3em;
        position: absolute;
        top: 0;
        background: #eee;
        text-align: center;
        cursor: pointer;
    }

  #porfolionav-comb.topicnav-left.topicnav-open {
    left: 20.4em;
}
  #porfolionav-comb.topicnav-left{padding-left: 2.7em;}

#porfolionav-comb.topicnav-left::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    top: 0;
    right: -3em;
    transform-origin: right top;
    transform: skewx(4.6deg);
}

#topicnav-comb.topicnav-left.topicnav-open,
#archivenav-comb.topicnav-100left.topicnav-open,
#contactnav-comb.topicnav-100left.topicnav-open {
    left: 5.3em;
}

.greyscale h1 {
    font-size: 1.3rem;
}
.entry-title {
    margin-left: 0em;
    line-height: 1.29em;

}
.portfolio-heading .entry-title{
  background: rgba(255, 255, 255, 0.79);
  margin-left: 0.17em;}

.portfolio-container .entry-title{
  margin-left: -0.33em;
  font-size: 1.3rem;
background: rgba(255, 255, 255, 0.79);}
.portfolio-container .cat-area {font-size: 0.7em;}
.portfolio-container .fa-4x {
    font-size: 4em;
}
.portfolio-container .cat-area i.fa {
    display: block;
    text-align: center;
    margin: 1.6em auto 0.8em;
}
.portfolio-template-portfolio-video iframe {
    margin: 0 13%;
}

.portfolio-container .entry-title{position: absolute;
bottom: 1em; left: 0.33em; width: 100%;}

}/*END Tablet Devices landscape */




@media only screen and (min-width: 46.688em) and (max-width: 64em) {

  #menu-portfolio li{height: 52.78px; overflow:hidden;}
#menu-portfolio  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
#menu-portfolio .film a,
#menu-portfolio  .photography a,
#menu-portfolio  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
#menu-portfolio  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-branding{
  position: relative;
  height: 13.8em;
  }
  .content-area .bpl .blog-title {
    font-size:1em;
    line-height: 1.4em;}

  /*.page .content-area{padding-right: 0.9375rem;}*/
  .site-title{position: fixed;}

  .closeplus .fa {
    color: #fff;
    margin-top: 0.25em;
}
#tabletnav-comb .closeplus .fa {
    color: #22252c;
    margin-top: 0.25em;
}

     .blog-header {
         margin: 0.5em 0 0 -2.3em;
     }
     .blog-content-area .entry-content {
         background: rgba(255, 255, 255, 1);
         padding: 1em;
         margin: 2em 1.5em 2em -2.5em;
         z-index: 1;}
     .blog-thumb .readblog{
       position: absolute;
       bottom: 0.3em;
       left:1em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.3em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;
         background: -moz-linear-gradient(top, rgba(62,58,58,0.65) 0%, rgba(201,200,200,0) 83%, rgba(229,229,229,0) 100%);
         background: -webkit-linear-gradient(top, rgba(62,58,58,0.65) 0%,rgba(201,200,200,0) 83%,rgba(229,229,229,0) 100%);
         background: linear-gradient(to bottom, rgba(62,58,58,0.65) 0%,rgba(201,200,200,0) 83%,rgba(229,229,229,0) 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a63e3a3a', endColorstr='#00e5e5e5',GradientType=0 );
         opacity: 1;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,0,0);
             transform: translate3d(0,0,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
     }
     .blog-thumb .readblog hr{
       width: 30%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }

     /*slideout nav*/
     /*.desktopside {width: 10.3em;}*/
     .closeplus {right: -2.9em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 80%;}

     .topicnav-left {
         	left:-286px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     /*.topicnav-left.topicnav-open {
         	left: 10.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 10.3em;
         }*/

         .portfolio-container .entry-title{position: absolute;
         bottom: 1em; left: 0.33em; width: 100%;}

} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/*// Large screens*/
@media only screen and (min-width: 64.063em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }

  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}

  .site-branding{
  position: relative;
  height: 13.8em;
  }
  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;
  }
  /*.page .content-area{padding-right: 0.9375rem;}*/
  .site-title{position: fixed;}
  /*topbar styling*/
  .top-bar {
    overflow-x: hidden;
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
.title-area{display: none;}
  .top-bar-section li.current-menu-item,
  .top-bar-section li.current_page_item,
  .top-bar-section li.current_page_parent,
  .top-bar-section li:hover {border-left: 3px solid #df4754;
    background: #fff;
  -webkit-transition: border-color .48s ease;
  -ms-transition: border-color .48s ease;
  -o-transition: border-color .48s ease;
  transition: border-color .48s ease}

   .top-bar-section li .current-menu-item:hover,
   .top-bar-section li .current_page_item:hover,
   .top-bar-section li .current_page_parent:hover{
     border-left: 0px solid #df4754;}

     .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     ul.sub-menu.dropdown {
         margin-left: -3px;
     }
     .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s, opacity .28s;
         -ms-transition: -o-transform .28s, opacity .28s;
         -o-transition: -o-transform .28s,  opacity .28s ;
         transition: transform .28s,  opacity .28s;
         opacity: 0;
     }
     .fixed .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);
opacity: 1;
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s;
         -ms-transition: -o-transform .28s;
         -o-transition: -o-transform .28s;
         transition: transform .28s
     }
     .top-bar-section ul li.news-area:not(.has-form) > a{background: #fff;}
     /*.top-bar-section ul li.news-area:not(.has-form){background:#F0F0F0;}
     .fixed .top-bar-section ul li.news-area:not(.has-form){background:#Fff;}*/
     .top-bar-section .has-dropdown > .dropdown, .top-bar-section .has-dropdown.not-click > .dropdown {
       opacity: 0;
         -webkit-transition:   opacity .48s ease;
         -ms-transition:   opacity .48s ease;
         -o-transition:   opacity .48s ease;
         transition:   opacity .48s ease;
     }

     .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{  opacity: 1;
     -webkit-transition:   opacity .48s ease;
     -ms-transition:   opacity .48s ease;
     -o-transition:   opacity .48s ease;
     transition:   opacity .48s ease;}
     /*topbar sticky*/
     .fixed .top-bar .title-area, .fixed .top-bar-section ul li  {
         float:left;
     }

     .fixed .top-bar-section li.current-menu-item,
     .fixed .top-bar-section li.current_page_item,
     .fixed .top-bar-section li.current_page_parent,
     .fixed .top-bar-section li:hover {border-left: 0px solid #df4754;
       border-bottom: 3px solid #df4754;
         background: #fff;
     -webkit-transition: border-color .48s ease;
     -ms-transition: border-color .48s ease;
     -o-transition: border-color .48s ease;
     transition: border-color .48s ease}

     .fixed .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     .fixed ul.sub-menu.dropdown {
         margin-top: 3px;
     }
     .blog-header {
         margin: 0.5em 0 0 -2em;
     }
     .blog-content-area .entry-content {
         background: rgba(255, 255, 255, 1);
         padding: 1em;
         margin: 2em 1.5em 2em -2.5em;
         z-index: 1;}
     .blog-thumb .readblog{
       position: absolute;
       bottom: 1em;
       left:9em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.8em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;

         opacity: 0;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,-30px,0);
             transform: translate3d(0,-30px,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
     }
     .blog-thumb .readblog hr{
       width: 0%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }
     .blog-thumb:hover .readblog hr{width: 30%;}
     /*slideout nav*/
     .desktopside {width: 13.3em;}
     .closeplus {right: -2.9em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 80%;}

     .topicnav-left {
         	left: -240px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     .topicnav-left.topicnav-open {
         	left: 13.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 13.3em;
         }
.portfolio-template-portfolio-video iframe{margin: 0 20%;}
.a, .b, .c, .d, .e, .f, .g{min-height:20em;}
.new-here{  background:#fff;
  padding-top:0.4em;
  min-height: 20em;
}

#menu-portfolio li{height: 54.22px; overflow:hidden;}
.greyscale{ -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;
  -o-transition: all .48s ease;
  transition: all .48s ease;}

  .greyscale:hover{ -webkit-filter: grayscale(0);
    filter: grayscale(0);}

.greyscale .entry-title{opacity: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;
-o-transition: all .48s ease;
transition: all .48s ease;}

.greyscale:hover .entry-title{  opacity: 100;}
.greyscale hr{  width: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;
}
.greyscale:hover hr{  width: 40%;}
.greyscale h1{font-size: 1.8rem;}
.entry-title{  margin-left:-0.33em;
  line-height: 1.29em;}

  .portfolio-container .entry-title{position: absolute;
  bottom: 1em; left: 0.33em; width: 100%;}

} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}
  .site-branding{
  position: relative;
  height: 13.8em;
  }
  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;}

  /*.page .content-area{padding-right: 0.9375rem;}*/
  .site-title{position: fixed;}
  /*topbar styling*/
  .top-bar {

    /*overflow-x: hidden;*/
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
  .blog-header {
      margin: 0.5em 0 0 -2em;
  }
  .blog-content-area .entry-content {
      background: rgba(255, 255, 255, 1);
      padding: 1em;
      margin: 2em 1.5em 2em -2.5em;
      z-index: 1;}
.title-area{display: none;}
  .top-bar-section li.current-menu-item,
  .top-bar-section li.current_page_item,
  .top-bar-section li.current_page_parent,
  .top-bar-section li:hover {border-left: 3px solid #df4754;
    background: #fff;
  -webkit-transition: border-color .48s ease;
  -ms-transition: border-color .48s ease;
  -o-transition: border-color .48s ease;
  transition: border-color .48s ease}

   .top-bar-section li .current-menu-item:hover,
   .top-bar-section li .current_page_item:hover,
   .top-bar-section li .current_page_parent:hover{
     border-left: 0px solid #df4754;}

     .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s

padding-bottom: 0.3em;
     }
     ul.sub-menu.dropdown {
         margin-left: -3px;
     }
     .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s, opacity .28s;
         -ms-transition: -o-transform .28s, opacity .28s;
         -o-transition: -o-transform .28s,  opacity .28s ;
         transition: transform .28s,  opacity .28s;
         opacity: 0;
     }
     .fixed .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);
         opacity: 1;
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s;
         -ms-transition: -o-transform .28s;
         -o-transition: -o-transform .28s;
         transition: transform .28s
     }
     .top-bar-section ul li.news-area:not(.has-form) > a{background: #fff;}
     /*.top-bar-section ul li.news-area:not(.has-form){background:#F0F0F0;}
     .fixed .top-bar-section ul li.news-area:not(.has-form){background:#Fff;}*/
     .top-bar-section .has-dropdown > .dropdown, .top-bar-section .has-dropdown.not-click > .dropdown {
       opacity: 0;
         -webkit-transition:   opacity .48s ease;
         -ms-transition:   opacity .48s ease;
         -o-transition:   opacity .48s ease;
         transition:   opacity .48s ease;
     }

     .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{  opacity: 1;
     -webkit-transition:   opacity .48s ease;
     -ms-transition:   opacity .48s ease;
     -o-transition:   opacity .48s ease;
     transition:   opacity .48s ease;}
     /*topbar sticky*/
     .fixed .top-bar .title-area, .fixed .top-bar-section ul li  {
         float:left;
     }

     .fixed .top-bar-section li.current-menu-item,
     .fixed .top-bar-section li.current_page_item,
     .fixed .top-bar-section li.current_page_parent,
     .fixed .top-bar-section li:hover {border-left: 0px solid #df4754;
       border-bottom: 3px solid #df4754;
         background: #fff;
     -webkit-transition: border-color .48s ease;
     -ms-transition: border-color .48s ease;
     -o-transition: border-color .48s ease;
     transition: border-color .48s ease}

     .fixed .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     .fixed ul.sub-menu.dropdown {
         margin-top: 3px;
     }
     .blog-thumb .readblog{
       position: absolute;
       bottom: 1em;
       left:9em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.8em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;

         opacity: 0;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,-30px,0);
             transform: translate3d(0,-30px,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#22252c+0,e5e5e5+100&0.65+0,0+83 */
background: -moz-linear-gradient(top, rgba(62,58,58,0.65) 0%, rgba(201,200,200,0) 83%, rgba(229,229,229,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(62,58,58,0.65) 0%,rgba(201,200,200,0) 83%,rgba(229,229,229,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(62,58,58,0.65) 0%,rgba(201,200,200,0) 83%,rgba(229,229,229,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a63e3a3a', endColorstr='#00e5e5e5',GradientType=0 ); /* IE6-9 */
     }
     .blog-thumb .readblog hr{
       width: 0%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }
     .blog-thumb:hover .readblog hr{width: 30%;}
     /*slideout nav*/
     .desktopside {width: 13.1em;}
     .closeplus {right: -2.5em;}
     .closeplus .fa{color: #fff; margin-top: 0.25em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 79%;}

     .topicnav-left {
         	left: -640px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     .topicnav-left.topicnav-open {
         	left: 13.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 13.3em;
         }

.portfolio-template-portfolio-video iframe{margin: 0 20%;}
.a, .b, .c, .d, .e, .f, .g{min-height:20em;}
.new-here{  background:#fff;
  padding-top:0.4em;
  min-height: 20em;
}

#menu-portfolio li{height: 54.22px; overflow:hidden;}
.greyscale{ -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;
  -o-transition: all .48s ease;
  transition: all .48s ease;}

  .greyscale:hover{ -webkit-filter: grayscale(0);
    filter: grayscale(0);}

.greyscale .entry-title{opacity: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;
-o-transition: all .48s ease;
transition: all .48s ease;}

.greyscale:hover .entry-title{  opacity: 100;}
.greyscale hr{  width: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;
}
.greyscale:hover hr{  width: 40%;}
.greyscale h1{font-size: 1.8rem;}
.entry-title{  margin-left:-0.33em;
  line-height: 1.29em;}

  .portfolio-container .entry-title{position: absolute;
  bottom: 1em; left: 0.33em; width: 100%;}

 } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/*// XLarge screens*/
@media only screen and (min-width: 90.063em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}

        .content-area .bpl .blog-title {
          font-size:1.5em;
          line-height: 1.4em;}

  .site-branding{
  position: relative;
  height: 13.8em;
  }
  /*.page .content-area{padding-right: 0.9375rem;}*/
  .site-title{position: fixed;}
  /*topbar styling*/
  .top-bar {

    overflow-x: hidden;
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
.title-area{display: none;}
  .top-bar-section li.current-menu-item,
  .top-bar-section li.current_page_item,
  .top-bar-section li.current_page_parent,
  .top-bar-section li:hover {border-left: 3px solid #df4754;
    background: #fff;
  -webkit-transition: border-color .48s ease;
  -ms-transition: border-color .48s ease;
  -o-transition: border-color .48s ease;
  transition: border-color .48s ease}

   .top-bar-section li .current-menu-item:hover,
   .top-bar-section li .current_page_item:hover,
   .top-bar-section li .current_page_parent:hover{
     border-left: 0px solid #df4754;}

     .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     ul.sub-menu.dropdown {
         margin-left: -3px;
     }
     .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s, opacity .28s;
         -ms-transition: -o-transform .28s, opacity .28s;
         -o-transition: -o-transform .28s,  opacity .28s ;
         transition: transform .28s,  opacity .28s;
         opacity: 0;
     }
     .fixed .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);
opacity: 1;
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s;
         -ms-transition: -o-transform .28s;
         -o-transition: -o-transform .28s;
         transition: transform .28s
     }
     .top-bar-section ul li.news-area:not(.has-form) > a{background: #fff;}
     /*.top-bar-section ul li.news-area:not(.has-form){background:#F0F0F0;}
     .fixed .top-bar-section ul li.news-area:not(.has-form){background:#Fff;}*/
     .top-bar-section .has-dropdown > .dropdown, .top-bar-section .has-dropdown.not-click > .dropdown {
       opacity: 0;
         -webkit-transition:   opacity .48s ease;
         -ms-transition:   opacity .48s ease;
         -o-transition:   opacity .48s ease;
         transition:   opacity .48s ease;
     }

     .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{  opacity: 1;
     -webkit-transition:   opacity .48s ease;
     -ms-transition:   opacity .48s ease;
     -o-transition:   opacity .48s ease;
     transition:   opacity .48s ease;}
     /*topbar sticky*/
     .fixed .top-bar .title-area, .fixed .top-bar-section ul li  {
         float:left;
     }

     .fixed .top-bar-section li.current-menu-item,
     .fixed .top-bar-section li.current_page_item,
     .fixed .top-bar-section li.current_page_parent,
     .fixed .top-bar-section li:hover {border-left: 0px solid #df4754;
       border-bottom: 3px solid #df4754;
         background: #fff;
     -webkit-transition: border-color .48s ease;
     -ms-transition: border-color .48s ease;
     -o-transition: border-color .48s ease;
     transition: border-color .48s ease}

     .fixed .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     .fixed ul.sub-menu.dropdown {
         margin-top: 3px;
     }
     .blog-header {
         margin: 0.5em 0 0 -2em;
     }
     .blog-content-area .entry-content {
         background: rgba(255, 255, 255, 1);
         padding: 1em;
         margin: 2em 1.5em 2em -2.5em;
         z-index: 1;}
     .blog-thumb .readblog{
       position: absolute;
       bottom: 1em;
       left:9em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.8em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;

         opacity: 0;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,-30px,0);
             transform: translate3d(0,-30px,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
     }
     .blog-thumb .readblog hr{
       width: 0%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }
     .blog-thumb:hover .readblog hr{width: 30%;}
     /*slideout nav*/
     .desktopside {width: 13.3em;}
     .closeplus {right: -2.9em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 80%;}

     .topicnav-left {
         	left: -240px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     .topicnav-left.topicnav-open {
         	left: 13.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 13.3em;
         }
.portfolio-template-portfolio-video iframe{margin: 0 20%;}
.a, .b, .c, .d, .e, .f, .g{min-height:20em;}
.new-here{  background:#fff;
  padding-top:0.4em;
  min-height: 20em;
}

#menu-portfolio li{height: 54.22px; overflow:hidden;}

.greyscale{ -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;
  -o-transition: all .48s ease;
  transition: all .48s ease;}

  .greyscale:hover{ -webkit-filter: grayscale(0);
    filter: grayscale(0);}

.greyscale .entry-title{opacity: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;
-o-transition: all .48s ease;
transition: all .48s ease;}

.greyscale:hover .entry-title{  opacity: 100;}
.greyscale hr{  width: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;
}
.greyscale:hover hr{  width: 40%;}
.greyscale h1{font-size: 1.8rem;}
.entry-title{  margin-left:-0.33em;
  line-height: 1.29em;}

 } /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }

  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}
  .site-branding{
  position: relative;
  height: 13.8em;
  }

  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;}

  /*.page .content-area{padding-right: 0.9375rem;}*/
  .site-title{position: fixed;}
  /*topbar styling*/
  .top-bar {

    overflow-x: hidden;
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
.title-area{display: none;}
  .top-bar-section li.current-menu-item,
  .top-bar-section li.current_page_item,
  .top-bar-section li.current_page_parent,
  .top-bar-section li:hover {border-left: 3px solid #df4754;
    background: #fff;
  -webkit-transition: border-color .48s ease;
  -ms-transition: border-color .48s ease;
  -o-transition: border-color .48s ease;
  transition: border-color .48s ease}

   .top-bar-section li .current-menu-item:hover,
   .top-bar-section li .current_page_item:hover,
   .top-bar-section li .current_page_parent:hover{
     border-left: 0px solid #df4754;}

     .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     ul.sub-menu.dropdown {
         margin-left: -3px;
     }

     .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s, opacity .28s;
         -ms-transition: -o-transform .28s, opacity .28s;
         -o-transition: -o-transform .28s,  opacity .28s ;
         transition: transform .28s,  opacity .28s;
         opacity: 0;
     }
     .fixed .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);
opacity: 1;
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s;
         -ms-transition: -o-transform .28s;
         -o-transition: -o-transform .28s;
         transition: transform .28s
     }
     .top-bar-section ul li.news-area:not(.has-form) > a{background: #fff;}
     /*.top-bar-section ul li.news-area:not(.has-form){background:#F0F0F0;}
     .fixed .top-bar-section ul li.news-area:not(.has-form){background:#Fff;}*/
     .top-bar-section .has-dropdown > .dropdown, .top-bar-section .has-dropdown.not-click > .dropdown {
       opacity: 0;
         -webkit-transition:   opacity .48s ease;
         -ms-transition:   opacity .48s ease;
         -o-transition:   opacity .48s ease;
         transition:   opacity .48s ease;
     }

     .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{  opacity: 1;
     -webkit-transition:   opacity .48s ease;
     -ms-transition:   opacity .48s ease;
     -o-transition:   opacity .48s ease;
     transition:   opacity .48s ease;}
     /*topbar sticky*/
     .fixed .top-bar .title-area, .fixed .top-bar-section ul li  {
         float:left;
     }

     .fixed .top-bar-section li.current-menu-item,
     .fixed .top-bar-section li.current_page_item,
     .fixed .top-bar-section li.current_page_parent,
     .fixed .top-bar-section li:hover {border-left: 0px solid #df4754;
       border-bottom: 3px solid #df4754;
         background: #fff;
     -webkit-transition: border-color .48s ease;
     -ms-transition: border-color .48s ease;
     -o-transition: border-color .48s ease;
     transition: border-color .48s ease}

     .fixed .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     .fixed ul.sub-menu.dropdown {
         margin-top: 3px;
     }
     .blog-header {
         margin: 0.5em 0 0 -2em;
     }
     .blog-content-area .entry-content {
         background: rgba(255, 255, 255, 1);
         padding: 1em;
         margin: 2em 1.5em 2em -2.5em;
         z-index: 1;}
     /*slideout nav*/
     .desktopside {width: 13.3em;}
     .closeplus {right: -2.9em;}
     .topicnav h3 {  margin: 3em 0 2.7em 1em;}
     .topicnav-vertical {
       width: 240px;}
     .topicnav-archive, .topicnav-contact {
         width: 80%;}

     .topicnav-left {
         	left: -240px;
         }
     .topicnav-100left {
         	left: -100%;
         }
     .topicnav-left.topicnav-open {
         	left: 13.3em;
         }

     .topicnav-100left.topicnav-open {
         	left: 13.3em;
         }
.portfolio-template-portfolio-video iframe{margin: 0 20%;}
.a, .b, .c, .d, .e, .f, .g{min-height:20em;}
.new-here{  background:#fff;
  padding-top:0.4em;
  min-height: 20em;
}

#menu-portfolio li{height: 54.22px; overflow:hidden;}
.greyscale{ -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;
  -o-transition: all .48s ease;
  transition: all .48s ease;}

  .greyscale:hover{ -webkit-filter: grayscale(0);
    filter: grayscale(0);}

.greyscale .entry-title{opacity: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;
-o-transition: all .48s ease;
transition: all .48s ease;}

.greyscale:hover .entry-title{  opacity: 100;}
.greyscale hr{  width: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;
}
.greyscale:hover hr{  width: 40%;}
.greyscale h1{font-size: 1.8rem;}
.entry-title{  margin-left:-0.33em;
  line-height: 1.29em;}

  .portfolio-container .entry-title{position: absolute;
  bottom: 1em; left: 0.33em; width: 100%;}
 } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/*/ XXLarge screens*/
@media only screen and (min-width: 120.063em) {

  .cgi a{
    padding: 0.25em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }
  .film a,
  .photography a,
  .web a{
    /*padding: 0.3em 0 0 0;*/
  padding: 0;
  height: 54.22px;
  }
  .traditional a{
    padding: 0.3em 0 0 0;
  /*padding: 0;*/
  height: 54.22px;
  }

  .full {
      position: relative;
      padding-left: 0;
      padding-right: 0;
      float: left;
  }
  .site-title a{  position: absolute;
        top: 1em;
        left: 2.7em;
        background: url(images/sb-logo3.svg) no-repeat;
        width: 73px;
        height: 80px;
        background-size: 100%;}
  .site-branding{
  position: relative;
  height: 13.8em;
  }

  .content-area .bpl .blog-title {
    font-size:1.5em;
    line-height: 1.4em;}

  /*.page .content-area{padding-right: 0.9375rem;}*/
.site-title{position: fixed;}
.blog-header {
    margin: 0.5em 0 0 -2em;
}
  /*topbar styling*/
  .top-bar {
    overflow-x: hidden;
  position: fixed;
  height: 100%;
  }
  .top-bar .title-area {
      float:none;
  }
  .top-bar-section ul li {
       float: none;
  }
.title-area{display: none;}
  .top-bar-section li.current-menu-item,
  .top-bar-section li.current_page_item,
  .top-bar-section li.current_page_parent,
  .top-bar-section li:hover {border-left: 3px solid #df4754;
    background: #fff;
  -webkit-transition: border-color .48s ease;
  -ms-transition: border-color .48s ease;
  -o-transition: border-color .48s ease;
  transition: border-color .48s ease}

   .top-bar-section li .current-menu-item:hover,
   .top-bar-section li .current_page_item:hover,
   .top-bar-section li .current_page_parent:hover{
     border-left: 0px solid #df4754;}

     .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(10%, 0, 0);
         transform: translate3d(10%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     ul.sub-menu.dropdown {
         margin-left: -3px;
     }
     .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(100%, 0, 0);
         transform: translate3d(100%, 0, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s, opacity .28s;
         -ms-transition: -o-transform .28s, opacity .28s;
         -o-transition: -o-transform .28s,  opacity .28s ;
         transition: transform .28s,  opacity .28s;
         opacity: 0;
     }
     .fixed .top-bar-section ul li.news-area:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);
opacity: 1;
         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .28s;
         -ms-transition: -o-transform .28s;
         -o-transition: -o-transform .28s;
         transition: transform .28s
     }
     .top-bar-section ul li.news-area:not(.has-form) > a{background: #fff;}
     /*.top-bar-section ul li.news-area:not(.has-form){background:#F0F0F0;}
     .fixed .top-bar-section ul li.news-area:not(.has-form){background:#Fff;}*/
     .top-bar-section .has-dropdown > .dropdown, .top-bar-section .has-dropdown.not-click > .dropdown {
       opacity: 0;
         -webkit-transition:   opacity .48s ease;
         -ms-transition:   opacity .48s ease;
         -o-transition:   opacity .48s ease;
         transition:   opacity .48s ease;
     }

     .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown{  opacity: 1;
     -webkit-transition:   opacity .48s ease;
     -ms-transition:   opacity .48s ease;
     -o-transition:   opacity .48s ease;
     transition:   opacity .48s ease;}
     /*topbar sticky*/
     .fixed .top-bar .title-area, .fixed .top-bar-section ul li  {
         float:left;
     }

     .fixed .top-bar-section li.current-menu-item,
     .fixed .top-bar-section li.current_page_item,
     .fixed .top-bar-section li.current_page_parent,
     .fixed .top-bar-section li:hover {border-left: 0px solid #df4754;
       border-bottom: 3px solid #df4754;
         background: #fff;
     -webkit-transition: border-color .48s ease;
     -ms-transition: border-color .48s ease;
     -o-transition: border-color .48s ease;
     transition: border-color .48s ease}

     .fixed .top-bar-section ul li:hover:not(.has-form) > a{
       -webkit-transform: translate3d(0, -10%, 0);
         transform: translate3d(0, -10%, 0);

         -webkit-animation-timing-function: ease-in;
         animation-timing-function: ease-in;

         -webkit-transition: -webkit-transform .48s;
         -ms-transition: -o-transform .48s;
         -o-transition: -o-transform .48s;
         transition: transform .48s
     }
     .fixed ul.sub-menu.dropdown {
         margin-top: 3px;
     }
     .blog-content-area .entry-content {
         background: rgba(255, 255, 255, 1);
         padding: 1em;
         margin: 2em 1.5em 2em -2.5em;
         z-index: 1;}
     .blog-thumb .readblog{
       position: absolute;
       bottom: 1em;
       left:9em;
       z-index: 8;
         color: #fff;
         text-transform: uppercase;
         font-size: 1.8em;
         font-weight: 300;
         word-spacing: 0.1em;
         letter-spacing: 0.1em;

         opacity: 0;
             -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
             transition: opacity 0.35s, transform 0.35s;
             -webkit-transform: translate3d(0,-30px,0);
             transform: translate3d(0,-30px,0);
     }
     .blog-thumb:hover .readblog{
       opacity: 1;
         -webkit-transform: translate3d(0,0,0);
         transform: translate3d(0,0,0);
     }
     .blog-thumb .readblog hr{
       width: 0%;
         clear: both;
         margin: 0.25rem 0 1.1875rem;
         transition:   width 0.45s ease;
         }
     .blog-thumb:hover .readblog hr{width: 30%;}
/*slideout nav*/
.desktopside {width: 13.3em;}
.closeplus {right: -2.9em;}
.topicnav h3 {  margin: 3em 0 2.7em 1em;}
.topicnav-vertical {
  width: 240px;}
.topicnav-archive, .topicnav-contact {
    width: 80%;}

.topicnav-left {
    	left: -240px;
    }
.topicnav-100left {
    	left: -100%;
    }
.topicnav-left.topicnav-open {
    	left: 13.3em;
    }

.topicnav-100left.topicnav-open {
    	left: 13.3em;
    }

.portfolio-template-portfolio-video iframe{margin: 0 20%;}
.a, .b, .c, .d, .e, .f, .g{min-height:20em;}
.new-here{  background:#fff;
  padding-top:0.4em;
  min-height: 20em;
}

#menu-portfolio li{height: 54.22px; overflow:hidden;}

.greyscale{ -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;
  -o-transition: all .48s ease;
  transition: all .48s ease;}

  .greyscale:hover{ -webkit-filter: grayscale(0);
    filter: grayscale(0);}

.greyscale .entry-title{opacity: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;
-o-transition: all .48s ease;
transition: all .48s ease;}

.greyscale:hover .entry-title{  opacity: 100;}
.greyscale hr{  width: 0;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;
}
.greyscale:hover hr{  width: 40%;}
.greyscale h1{font-size: 1.8rem;}
.entry-title{  margin-left:-0.33em;
  line-height: 1.29em;}

  .portfolio-container .entry-title{position: absolute;
  bottom: 1em; left: 0.33em; width: 100%;}

} /* min-width 1921px, xxlarge screens */

/*font-family: 'Raleway', sans-serif;
font-family: 'Lato', sans-serif;
#141618
#303133
#1b1d1f
#22252c
*/
/*.site-title, .entry-title {
  margin-left: -0.33em;
line-height: 43px;
}*/
.row {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 90rem;
}

/*#161616
#E83737
#635D5D
#FFFEF9
#EFEFEF*/
body{background: #fff;}
body, p{font-family: 'Raleway', sans-serif; font-weight:300; color:#141618;}
h1, h2, h3, h4, h5, h6{font-family: 'Lato', sans-serif; text-transform: uppercase;}


.entry-title h1,
.entry-title h2 ,
.entry-title,
/*.site-title,*/
.page-title,
.blog-title{
  border-left: 3px solid #df4754;
padding: .2em 1em .1em .3em;
  color:#22252c;
  background:#fff;
  /*display: inline;*/
  letter-spacing: .1em;
  font-weight: 300;
  }

#primary .entry-title a{font-weight: 300;  color:#22252c;}
#primary .entry-title a:hover{color: #df4754;}
  .intro-text {
  margin-top: 1em;
  }
.front{display: block;}


/*.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4{
   border-left: 3px solid #df4754;
  padding: .2em 1em .1em .3em;
  margin-left:-0.33em;
  margin-bottom: 1em;

  letter-spacing: .1em;
}*/

 h1{font-weight: 300;}
 h2{font-weight: 300;}
h3,
h4{font-weight: 400;}

  h1 {
      font-size: 1.8rem;
  }
  h2{ font-size: 1.5rem;}
  .blog-header {
    /*position: absolute;
    top: 1em;
    left: 1.5em;*/
}
hr {
    border: solid #df4754;
    border-width: 3px 0 0;
    width: 20%;
    clear: both;
    margin: 1.25rem 0 1.1875rem;
    height: 0;
}
.entry-content {

    /*background: white;*/
    /*padding-top: 1em;*/
}


/*.site-title{      margin-left: -0.33em;
    line-height: 43px;}*/
  .entry-title, .page-title{
    padding: .2em 0.3em .1em .3em;

}
  .content-area h1 a,
  .content-area h2 a,
  .content-area h1 a:visited,
  .content-area h2 a:visited{color:#fff;  font-weight: 300;}

a, a:visited{color:#df4754;   font-weight: 400;}
a:hover{color:#141618;}
.content-area h1 a:hover,
.content-area h2 a:hover{color:#df4754;}
#old-browser{}
  /*.hero-bg{min-height: 43em;background: url(images/backgroundtest.svg) no-repeat center;
    background-size: 101.19%;}*/
  .fc1{min-height: 20em;background:#a1a0a0;}
    .fc2{min-height: 20em;background: #696969;}
    .fbp1{min-height: 20em;background:#a6a6a6;}
      .fbp2{min-height: 20em;background:#7c7c7c;}
        .fbp3{min-height: 20em;background:#cdcdcd;}
        .fbl{min-height: 4em;
          background:#df4754;
          transition: background 0.3s ease;}
        .fbl h3{ color:#fff;
          margin-top: .86em;
            font-size: 1.25em;
            text-align: center;
            color:#fff;
                border: none;}
        .fbl:hover{background:#22252c;}

    .hentry{margin: 0;}

 .bpl .month{background:#22252c;
  text-align:right;
  padding-right:1em;
  color:#fff;
  text-transform: uppercase;
  transition: background 0.3s ease;
  }

.bpl:hover .month {background:#df4754;}

.fbp .day{text-align: right;
  font-size:2em;
  font-weight: 600;
  color:#22252c;
margin: -0.2em 0 -0.4em 0em;
padding-right: 0.5em;}

.fbp .year{text-align: right;
  font-weight: 400;
  color:#22252c;
  padding-right: 1em;}

.fbp:nth-child(odd) {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  }
  .fbp h6{color:#696969; font-size:0.7em;}
  .fbp-container{padding: 0 1em 1em 1em;}
.content-area .bpl .blog-title {

  line-height: 1.4em;
  transition: color 0.3s ease;}
.content-area .bpl:hover .blog-title{color:#df4754;}




/*Nav*/

#menu-tab-menu {list-style: none; margin-left: 0;}

/*.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
  background: rgba(0, 0, 0, 0);
    color: #22252c;
    -webkit-transform: translate3d(10%, 0, 0);
      transform: translate3d(10%, 0, 0);

      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;

      -webkit-transition: -webkit-transform .48s;
      -ms-transition: -o-transform .48s;
      -o-transition: -o-transform .48s;
      transition: transform .48s
}
.side-nav li{border-color:#fff;
  -webkit-transition: border-color .48s;
  -ms-transition: border-color .48s;
  -o-transition: border-color .48s;
  transition: border-color .48s
}

.side-nav li:hover{  border-left: 3px solid #df4754;

  -webkit-transition: border-color .48s;
  -ms-transition: border-color .48s;
  -o-transition: border-color .48s;
  transition: border-color .48s

}


 .side-nav li.current-menu-item, .side-nav li.current_page_item, .side-nav li.current_page_parent{border-left: 3px solid #df4754;}
 .current-menu-item:hover, .current_page_item:hover, .current_page_parent:hover{border-left: 0px solid #df4754;}

.side-nav li a:not(.button) {
    display: block;
    color: #df4754;
    margin: 0;
    padding: 0.4375rem 0.875rem;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform .48s;
    -ms-transition: -o-transform .48s;
    -o-transition: -o-transform .48s;
    transition: transform .28s
}
.side-nav {
    display: block;
    margin: 0;
    padding: 0.875rem 0;
    list-style-type: none;
    list-style-position: outside;
  font-family: 'Raleway', sans-serif; font-weight: 400;

}*/




/*topbar styling*/
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button){
  color: #df4754;
     background: #fff;
}
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button){
 color: #22252c;
    background: #fff;
}
.top-bar-section ul li:hover:not(.has-form) > a {
     background-color: #fff;
  color: #22252c;
     background: #fff;
}
.top-bar,
.contain-to-grid,
.top-bar-section li:not(.has-form) a:not(.button):hover,
.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) {
    background: #fff;
      font-family: 'Raleway', sans-serif;
      font-weight: 400;
      font-size: 0.875rem;
}
.top-bar-section li:not(.has-form) a:not(.button):hover{color: #22252c;}
.top-bar .name h1 a,
.top-bar .name h2 a,
.top-bar .name h3 a,
.top-bar .name h4 a,
.top-bar .name p a,
.top-bar .name span a,
.top-bar-section li:not(.has-form) a:not(.button){
    color: #df4754;
    padding-top: 0.36em;
    padding-bottom: 0.3em;
}


.top-bar-section li:not(.has-form) a:not(.button):hover {}
.top-bar-section li{
border-color: #fff;
-webkit-transition: border-color .48s ease;
-ms-transition: border-color .48s ease;
-o-transition: border-color .48s ease;
transition: border-color .48s ease}

.top-bar-section ul li:not(.has-form) > a{
color: #df4754;
margin: 0;
padding: 0.4375rem 0.875rem;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .48s;
-ms-transition: -o-transform .48s;
-o-transition: -o-transform .48s;
transition: transform .48s}

.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
    color: #0c0c0c;
    display: block;
}
.top-bar.expanded .title-area {
    background: #fff;
}

/*Portfolio Nav*/
.top-bar-section .work.has-dropdown.hover > .dropdown, .top-bar-section .work.has-dropdown.not-click:hover > .dropdown,
.top-bar-section .work .has-dropdown ul .sub-menu .dropdown{position:fixed; width: 100%; height: 100%;}
.top-bar-section .dropdown{position:fixed; width: 100%; height: 100%;}
/*topbar sticky*/

.fixed .title-area{display:block;}
.fixed .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
  -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #22252c;
    background: transparent;
}

/*FOOTER*/
#colophon{background: #22252c;}

/*blog index*/


.blog-single{position: relative; min-height: 12em;}
.blog-single  .entry-title {
    position: absolute;
    top: 0;
    z-index: 8;
}
.blog-single .entry-meta {
    margin-top: 4em;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 8;
}
.tint {
margin: 0;
}

.tint:before {

  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  -moz-transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -o-transition: background .3s linear;
  transition: background .3s linear;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#df4754+0,22252c+99&0+15,0.38+100 */
  background: -moz-linear-gradient(top, rgba(223,71,84,0) 0%, rgba(194,66,78,0) 15%, rgba(34,37,44,0.38) 99%, rgba(34,37,44,0.38) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(223,71,84,0) 0%,rgba(194,66,78,0) 15%,rgba(34,37,44,0.38) 99%,rgba(34,37,44,0.38) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(223,71,84,0) 0%,rgba(194,66,78,0) 15%,rgba(34,37,44,0.38) 99%,rgba(34,37,44,0.38) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00df4754', endColorstr='#6122252c',GradientType=0 ); /* IE6-9 */

}

.tint:hover:before {

}
/*img.attachment-header{position:absolute; top:0; left:0; z-index:0;}*/

.blog-content-area .post {
    margin: 2em 0;
    position: relative;
    overflow: hidden;
}
.blog-thumb:hover .blog-header{ color:red;}

.blog-thumb{position: relative;}
/*img.attachment-post-thumbnail.size-post-thumbnail.wp-post-image,
img.lazy.attachment-post-thumbnail.size-post-thumbnail.wp-post-image.lazy-loaded,*/
.blog-thumb img.attachment-large.size-large.wp-post-image{
    /*position: absolute;
    top: 0;
    left: 0;
    z-index: -1;*/
transition: filter 0.20s ease-in;
transition: -webkit-filter 0.20s ease-in;
}

.blog-thumb:hover img.attachment-large.size-large.wp-post-image{
  -webkit-filter: blur(2px);
  filter: blur(2px);
  z-index: 0;

  }


.blog-content-area .entry-meta{
  position: absolute;
  top:0;
  left: 0;
  z-index: 8;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#22252c+0,df4754+100&0.35+0,0+76,0+99 */
  /*background: -moz-linear-gradient(top, rgba(34,37,44,0.35) 0%, rgba(178,63,74,0) 76%, rgba(221,71,84,0) 99%, rgba(223,71,84,0) 100%); /* FF3.6-15*/
  /*background: -webkit-linear-gradient(top, rgba(34,37,44,0.35) 0%,rgba(178,63,74,0) 76%,rgba(221,71,84,0) 99%,rgba(223,71,84,0) 100%); /* Chrome10-25,Safari5.1-6 */*/
  /*background: linear-gradient(to bottom, rgba(34,37,44,0.35) 0%,rgba(178,63,74,0) 76%,rgba(221,71,84,0) 99%,rgba(223,71,84,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */*/
  /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5922252c', endColorstr='#00df4754',GradientType=0 ); /* IE6-9 */*/*/

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#22252c+0,22252c+100&0.35+43,0+100 */
  background: -moz-linear-gradient(left, rgba(34,37,44,0.35) 0%, rgba(34,37,44,0.35) 43%, rgba(34,37,44,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(34,37,44,0.35) 0%,rgba(34,37,44,0.35) 43%,rgba(34,37,44,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(34,37,44,0.35) 0%,rgba(34,37,44,0.35) 43%,rgba(34,37,44,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5922252c', endColorstr='#0022252c',GradientType=1 ); /* IE6-9 */
  }
.entry-meta .day{font-size: 7em;
    font-weight: 400;
    color: #fff;
    line-height: 0.46em;
    margin-left: -0.0459em;}

.entry-meta .month{margin:0.28em 0 0 0; color:#fff; font-weight: 400; font-size: 1.4em;text-transform:uppercase;}
.entry-meta .year{     margin-top: -.7em;
    color: #fff;
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: .5em;
    background: #22252c;
    border-left: 3px solid #df4754;
    padding: 0em .9em .2em .71em;
    display: inline-block;}

    .cat-links, .edit-link {
      display: block;
    padding: 0 1em;
}
.tags-links{  display: block;
padding: 0 1em;}

.cat-links a:hover{color:#df4754; }
.comments-link{clear:both; padding-left:1em;}
/*.blog-container:nth-child(odd){background: #e8e8e8; z-index: -2;}*/
/*.entry-content {
    background: rgba(255, 255, 255, 0.90);
    padding: 1em;
    margin: 5em 2em 1.5em;
}
.blog-header {
    margin-top: 1em;
}*/

/*Gallery*/
.carousel{overflow: hidden;}
.clearing-thumbs li{padding:0;}
.no-p{margin-bottom: -1.25em;}



.carousel .th{border:none;}
.carousel .th:hover, .carousel .th:focus {
    box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0);

}
.carousel li{position: relative;}


.carousel span:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: rgba(165, 165, 165, 0);
  -moz-transition: background .38s ease, color .48s ease;
    -webkit-transition: background .38s ease, color .48s ease;
    -o-transition: background .38s ease, color .48s ease;
    transition: background .38s ease, color .48s ease;
    background: rgba(20, 40, 80, 0.0);
}

.carousel span:hover:before,
.carousel span:focus:before  {
  background: rgba(42, 74, 73, 0.28);
  content: "\f2ed";
  font-family: FontAwesome;
  padding-top: 25%;
    text-align: center;
      color: rgba(255, 255, 255, 0.66);
    font-size: 1.8em;
    }
/*42, 74, 73, 0.28*/
.clearing-container .carousel span:hover:before{font-size:0;}
/*PAGINATION*/
ul.pagination li a, ul.pagination li button {
    display: block;
    padding: 0.0625rem 0.625rem 0.0625rem;
    color: #df4754;
    background: none;
    border-radius: 0;
    font-weight: normal;
    font-size: 1em;
    line-height: inherit;
    transition: border 300ms ease-in;
}
ul.pagination li.current a, ul.pagination li.current button {
    background: none;
font-size:1.4em;
    color: #22252c;
    font-weight: 800;
    cursor: default;
}
ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
    background: none;

        color: #df4754;
}
ul.pagination li:hover a, ul.pagination li a:focus, ul.pagination li:hover button, ul.pagination li button:focus {
    background: #22252c;
    color:#fff;
}

.site-content {
    -webkit-transition: opacity .28s;
    -ms-transition: opacity .28s;
    -o-transition:  opacity .28s;
    transition: opacity .28s;
}
.slide-out .site-content {
    opacity: 0;
}

.content-area {
    -webkit-transition: -webkit-transform .28s;
    -ms-transition: -o-transform .28s ;
    -o-transition: -o-transform .28s ;
    transition: transform .28s ;
}
.slide-out .content-area {
    -webkit-transform: translate3d( 0, 100px, 0 );
    -ms-transform: translate3d( 0, 100px, 0 );
    -o-transform: translate3d( 0, 100px, 0 );
    transform: translate3d(  0, 100px, 0 );
}

/*loading Cude*/
.loading{
  display: none;
  position: fixed;
  padding-top: 27%;
    top:0;
    left: 0;
    right: 0;
  bottom:0;
    margin: auto;
    z-index: 10;
    background: #fff;
  }
  /*.loading:before{ content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);}*/

.sk-folding-cube {

  margin: 20px auto;
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
          border: 1px solid #22252c;
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #df4754;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
          background: #22252c;
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
          background: #22252c;
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}
#page{
position: relative;}


/*.sheild{background: url(images/sheldlol2.svg) no-repeat;
    background-size: 100%;
    position: absolute; top: 0; left: -1em;
    width: 14em;
    height: 25em;}*/
.site-title{text-indent:-9999em;}
/*.site-title a{position: absolute;
  top: .5em;
    left: 1.8em;
      background: url(images/sb-logo3.svg) no-repeat;
      width: 125px;
      height: 125px;
  background-size:100%;}*/




.entry-header {
    margin-top: 0.5em;
}
.portfolio-heading{margin-top:.5em;}

.new-here{
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;}
.new-here:hover {background:#df4754;}

.new-here h1, .new-here h2{ opacity: 100;
  -webkit-transition: all .48s ease;
-ms-transition: all .48s ease;f
-o-transition: all .48s ease;
transition: all .48s ease;

}
.new-here h1{
animation-name: fadeInLeft;
animation-delay: 2s;
}


.new-here:hover h1, .new-here:hover h2{ opacity: 0;}
.new-here hr{
  -webkit-transition: all .48s ease;
  -ms-transition: all .48s ease;f
  -o-transition: all .48s ease;
  transition: all .48s ease;}
.new-here:hover hr{ width:0;}
.cta p{color: #fff;
text-transform: uppercase;
font-size: .9em;
font-weight: 300;
word-spacing: 0.1em;
letter-spacing: 0.1em;}
.new-here .cta{
    position: absolute;
    bottom: 1em;
    left: 8em;
    z-index: 8;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.8em;
    font-weight: 300;
    word-spacing: 0.1em;
    letter-spacing: 0.1em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);}

.new-here:hover .cta{opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}

.a{background: url(images/3d.jpg) no-repeat;
background-size: cover;
background-position: left;}

.b{background: url(images/web.jpg) no-repeat;
background-size: cover;
background-position: center;}

.c{background: url(images/tradional.jpg) no-repeat;
background-size: cover;
background-position: left;}

 .d{background: url(images/printmaking.jpg) no-repeat;
 background-size: cover;
 background-position: center;}

  .e{background: url(images/film.jpeg) no-repeat;
  background-size: cover;
  background-position: center;}

   .f{}

    .g{background: url(images/photography.jpg) no-repeat;
    background-size: cover;
    background-position: center;}
.clearing-assembled{overflow: hidden;}
[class*="block-grid-"] {
    display: block;
    padding: 0;
     margin: 0 ;
}

.panel {
    border-style: solid;
    border-width: 0;
    border-color: #d8d8d8;
    margin-bottom: 0rem;
    padding:  0 0.9375rem 0 0.9375rem;
    background: #22252c;
    color: #ffffff;
    overflow: hidden;
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl {
    color: #fff;
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6{
margin-bottom: 0.5rem;
margin-top: 0.2rem;
    line-height: 1.4;}

.panel-block{
      width: 100%;
      overflow: hidden;
    margin-bottom: 0rem;

    background: #22252c;
    color: #ffffff;
}
.panel-block h1, .panel-block h2, .panel-block h3, .panel-block h4, .panel-block h5, .panel-block h6, .panel-block p, .panel-block li, .panel-block dl {
    color: #fff;
}
.panel-block h1,
.panel-block h2,
.panel-block h3,
.panel-block h4,
.panel-block h5,
.panel-block h6{
margin-bottom: 0.5rem;
margin-top: 0.2rem;
    line-height: inherit;}

.panel-block p > img{margin-bottom: -1.25rem;}

/*#blognav{position:fixed; top:40%;left:1em;}*/

/*#masthead {
    z-index: 99;
}
.desktopside {
    position: fixed;
    z-index: 22;
    background: #fff;
    height: 100%;
    width: 15em;
    -ms-transform: skewX(-5deg);
    -moz-transform: skewX(-5deg);
    -webkit-transform: skewX(-5deg);
     transform: skewX(-5deg);
    -ms-transform-origin: 100% 0%;
    -moz-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}*/


/* General styles for all menus */
#masthead{z-index: 10;}

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
    border-right: solid 3px #4e4e4e;

}


/*//////////*/
.closeplus {
    width: 3em;
    height: 3em;
    position: absolute;
    top: 0;
    background: #22252c;
    text-align: center;
    cursor: pointer;
}

.closeplus .fa:hover {
    color: #df4754;
}
.desktopside {
    position: fixed;
    background: #fff;

    top:0;
    left: 0;
    height: 100%;
    /*z-index: 11;*/
}

.topicnav {
	background: #22252c;
	position: fixed;
}

.topicnav h3 {
	color: #fff;
	font-size: 1.9em;

    font-weight: 300;
    padding: 0.1em 0.4em;
    border-left: 3px solid #df4754;
}

.topicnav a {
	display: block;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 300;
  text-align: center;


}

.topicnav a:hover {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#df4754+0,df4754+100&1+0,0+97 */
background: -moz-linear-gradient(left, rgba(223,71,84,1) 0%, rgba(223,71,84,0) 97%, rgba(223,71,84,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(223,71,84,1) 0%,rgba(223,71,84,0) 97%,rgba(223,71,84,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(223,71,84,1) 0%,rgba(223,71,84,0) 97%,rgba(223,71,84,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df4754', endColorstr='#00df4754',GradientType=1 ); /* IE6-9 */
}

.topicnav a:active {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#df4754+0,df4754+100&1+0,0+97 */
background: -moz-linear-gradient(left, rgba(223,71,84,1) 0%, rgba(223,71,84,0) 97%, rgba(223,71,84,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(223,71,84,1) 0%,rgba(223,71,84,0) 97%,rgba(223,71,84,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(223,71,84,1) 0%,rgba(223,71,84,0) 97%,rgba(223,71,84,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#df4754', endColorstr='#00df4754',GradientType=1 ); /* IE6-9 */
	color: #fff;
}


/* Orientation-dependent styles for the content of the menu */

.topicnav-vertical {

    height: 100%;
    top: 0px;
	z-index: 9;

}
.topicnav-archive, .topicnav-contact, #topicnav-comb{

    height: 100%;
    top: 0px;
	z-index: 9;
}

.topicnav-contact a{
 /*border-bottom: 1px solid #df4754;*/
 padding: .5em;
}
 .topicnav-contact.topicnav a:hover{background: none;}

.topicnav-archive a,.topicnav-vertical a {
	/*border-bottom: 1px solid #df4754;*/
	padding: 1.1em;
}

.topicnav-horizontal {
	width: 100%;
	/*height: 150px;*/
	left: 0;
	z-index: 1000;
	overflow: hidden;
}

.topicnav-horizontal h3 {
	height: 100%;
	width: 20%;
	float: left;
}

.topicnav-horizontal a {
	float: left;
	width: 20%;
	padding: 0.8em;
	border-left: 1px solid #df4754;
}
.topicnav-horizontal li{list-style: none; float:left; 	width: 20%;}

/* Vertical menu that slides from the left or right */



.topicnav-right {
	right: -240px;
}



.topicnav-right.topicnav-open {
	right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.topicnav-top {
	top: -250px;
}

.topicnav-bottom {
	bottom: -150px;
}

.topicnav-top.topicnav-open {
	top: 0px;
}/* Push classes applied to the body */

.topicnav-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.topicnav-push-toright {
	left: 240px;
}

.topicnav-push-toleft {
	left: -240px;
}


.topicnav-bottom.topicnav-open {
	bottom: 0px;
}

/* Transitions */

.topicnav,
.topicnav-push {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

/* Example media queries */

/*@media screen and (max-width: 55.1875em){

	.topicnav-horizontal {
		font-size: 75%;
		height: 110px;
	}

	.topicnav-top {
		top: -110px;
	}

	.topicnav-bottom {
		bottom: -110px;
	}

}

@media screen and (max-height: 26.375em){

	.topicnav-vertical {
		font-size: 90%;
		width: 190px;
	}.topicnav-left.topicnav-open {
	left: 13.3em;

}

.topicnav-100left.topicnav-open {
	left: 13.3em;

}

	.topicnav-left,
	.topicnav-push-toleft {
		left: -190px;
	}

	.topicnav-right {
		right: -190px;
	}

	.topicnav-push-toright {
		left: 190px;
	}
}*/


/*.contain-to-grid .sticky .fixed +.top-bar-section {

    overflow-x: none;
}*/
.page-header{margin-left: .2em;}
.ArchiveCompact a{text-align: left;
  display: inline;
  padding:0 0 0 .3em;
  font-weight: 700;
  border-left: 1px solid #df4754; }
.ArchiveCompact {list-style: none; color: #fff; text-align: center;}
.ArchiveCompact li{margin: 1em;}
.ArchiveCompact .emptymonth{ color: #fff;}
.ArchiveCompact strong a{
  font-size: 1.6em;
  font-weight: 300;
    padding: 0.1em 0.4em;
    border-left: 3px solid #df4754;
    border-bottom: 0;}


    /*body.portfolio-template-portfolio-video {
        background: #000;
    }*/

.cat-area i.fa{ display: block;
  text-align: center; margin: 0.8em auto;}
.cat-area{text-align: center; background: #fff;}
/*.portfolio-details{
border-left: 1px solid #eee;
border-right: 1px solid #eee;}*/
.portfolio-details {padding-top: 1.5em;}
.portfolio-container{border-top: 1px solid #eee;
position: relative;
}

.clearing-assembled .clearing-container .visible-img{background:#22252c;}

#menu-portfolio {
    list-style: none;
    margin-left: 0;
}


.cgi a:after{content: "\f1af";
font-family:"FontAwesome";
font-size: 2.2em;
    color: #df4754;
    display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    padding-left: 3.4em;}


.film a:after{content: "\f1f2";
font-family:"FontAwesome";
font-size: 2.4em;
color:#df4754;
display: inline-block;
/*height: 100%;*/
vertical-align: middle;
padding-left:2.4em;}


.photography a:after{content: "\f163";
font-family:"FontAwesome";
font-size: 2.4em;
color:#df4754;
display: inline-block;
/*height: 100%;*/
vertical-align: middle;
padding-left: 2.3em;}


.traditional a:after{content: "\f2a7";
font-family:"FontAwesome";
font-size: 2.2em;
    color: #df4754;
    display: inline-block;
    /* height: 100%; */
    vertical-align: middle;
    padding-left: 3.2em;}


.web a:after{content: "\f197";
font-family:"FontAwesome";
font-size: 2.6em;
color:#df4754;
display: inline-block;
/*height: 100%;*/
vertical-align: middle;
padding-left: 1em;
}
.topicnav::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: left bottom;
    transform: skewx(-3.7deg);
}

.cgi a:hover:after,
.film a:hover:after,
.photography a:hover:after,
.traditional a:hover:after,
.web a:hover:after{color:#fff;}
#menu-portfolio .film a, #menu-portfolio .photography a, #menu-portfolio .web a {
    /* padding: 0.3em 0 0 0; */
    padding: 0;
    height: 54.22px;
}

#menu-portfolio .traditional a, #menu-portfolio .cgi a{padding: 0.3em 0 0 0;   height: 54.22px;}

body .social-icon:after {
    top: 0;
    left: 0;
    padding: 0;
    -webkit-box-shadow: 0 0 0 1px #fff;
    -moz-box-shadow: 0 0 0 1px #fff;
    -ms-box-shadow: 0 0 0 1px #fff;
    -o-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
}
#contactnav-comb .frm_forms{padding-left: 1em;}
#contactnav-comb .social h3{
    margin-top: -4.3em;
    margin-bottom: 3.3em;
    margin-left: 0.2em;
  }
#contactnav-comb .frm_style_formidable-style.with_frm_style .form-field {
    margin-bottom: 0;
}

.frm_style_formidable-style.with_frm_style input[type=text],
.frm_style_formidable-style.with_frm_style input[type=password],
.frm_style_formidable-style.with_frm_style input[type=email],
.frm_style_formidable-style.with_frm_style input[type=number],
.frm_style_formidable-style.with_frm_style input[type=url],
.frm_style_formidable-style.with_frm_style input[type=tel],
.frm_style_formidable-style.with_frm_style input[type=phone],
.frm_style_formidable-style.with_frm_style input[type=search],
.frm_style_formidable-style.with_frm_style select,
.frm_style_formidable-style.with_frm_style textarea,
.frm_form_fields_style, .frm_style_formidable-style.with_frm_style .frm_scroll_box .frm_opt_container,
.frm_form_fields_active_style,
.frm_form_fields_error_style,
.frm_style_formidable-style.with_frm_style .chosen-container-multi .chosen-choices,
.frm_style_formidable-style.with_frm_style .chosen-container-single .chosen-single {
    color: #555555;
    background-color: #ffffff;
    border-color: #cccccc;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 0px;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    padding: 6px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    font-weight: normal;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.frm_style_formidable-style.with_frm_style .frm_compact .frm_dropzone.dz-clickable .dz-message,
.frm_style_formidable-style.with_frm_style input[type=submit],
.frm_style_formidable-style.with_frm_style .frm_submit input[type=button],
.frm_style_formidable-style.with_frm_style .frm_submit button,
.frm_form_submit_style,
.frm_style_formidable-style.with_frm_style.frm_login_form input[type=submit] {
    width: auto;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    height: auto;
    line-height: normal;
    text-align: center;
    background: #22252c;
      border-width: 0;
      border-left: 3px;
      border-color: #df4754;
      border-style: solid;
      color: #ffffff;
      cursor: pointer;
      font-weight: 300;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      text-shadow: none;
      padding: 11px 15px;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -ms-box-sizing: border-box;
      -moz-box-shadow: 0 0 0 #eeeeee;
      -webkit-box-shadow: 0 0 0 #eeeeee;
      box-shadow: 0 0 0 #eeeeee;
    margin-top: 24px;
    margin-left: 0;
    margin-right: 0;
    vertical-align: middle;
}

.frm_style_formidable-style.with_frm_style input[type=submit]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit input[type=button]:hover,
.frm_style_formidable-style.with_frm_style .frm_submit button:hover,
.frm_style_formidable-style.with_frm_style.frm_login_form input[type=submit]:hover {
    background: #eee;
    border-color: #df4754;
    color: #22252c;
}

.frm_style_formidable-style.with_frm_style label.frm_primary_label,
.frm_style_formidable-style.with_frm_style.frm_login_form label {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: normal;
    text-align: left;
    margin: 0;
    padding: 0 0 3px 0;
    width: auto;
    display: block;
}

.frm_style_formidable-style.with_frm_style p.description,
.frm_style_formidable-style.with_frm_style div.description,
.frm_style_formidable-style.with_frm_style div.frm_description,
.frm_style_formidable-style.with_frm_style .frm-show-form > div.frm_description,
.frm_style_formidable-style.with_frm_style .frm_error {
    margin: 0;
    padding: 0;
      font-family: 'Lato', sans-serif;
    font-size: 12px;
    color: #fff;
    font-weight: 300;
    text-align: left;
    font-style: normal;
    max-width: 100%;
}