/*BBS JUNE 2018 UPDATE*/
.post-listing iframe {
    width: 100%;
}


.page-meta a.button{
        padding:10px 30px 10px 22px;
        margin-top:23px;
        margin-bottom:22px;
}

 
a.feature-link{
    color:#737373;
    text-decoration:none;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    font-family:open-sans, open sans, arial, sans-serif;
}

.related-projects a.project {
    color: #00aeef;
    text-decoration: none;
    font-size: 15.5px;
    font-family:"Chronicle Display A","Chronicle Display B",sans-serif;
    font-style: italic;
}
.related-projects a.project:hover{
    color: #59d1ca;
}

.related-projects a.project:after {
    content: " / ";
    color: #000;
    /* padding: 0 5px; */
}

.related-projects a.project:last-child:after {
    content: "";
}

a#testimonial {
    height: 320px;
    display: block;
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}
a#testimonial:after{
      content: "";
    background-image: url(https://cdn2.hubspot.net/hubfs/2479702/Template_Images/Icons/white%20play%20button.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 78px;
    width: 78px;
    position: absolute;
    top: 50%;
    pointer-events: none;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
}

/*corner triangles throughout template*/

.top-banner a.gallery-image{
    height:341px;
}


a.quote-box:after,a.gallery-image:after {
    content: "";
    position: absolute;
    bottom: 17px;
    right: 17px;
    width: 26px;
    height: 26px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(https://cdn2.hubspot.net/hubfs/2479702/Case%20Study%20Images/triangle%20icon.png);
}

/* Styles for dialog window */
#small-dialog {
    background-color:#00a8a3;
	padding: 20px 30px;
	text-align: left;
    max-width: 80vw;
    min-height: 80vh;
    /* max-height: 80vh; */
	margin: 40px auto;
	position: relative;
    color:#fff;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:relative;
    z-index:1;
    
}
#small-dialog .text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 60%;
    
}
a.quote-box{
    
    display:block;
    min-height:226px;
    padding:27px 55px;
    background-color:#00a8a3;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    text-decoration:none;
    position:relative;
    color:#fff;
    z-index:1;
}
.quote-box .text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 87%;
}
.quote-box .quote, #small-dialog .quote{
    font-family:"Chronicle Display A","Chronicle Display B",sans-serif;
    font-size:19px;
    font-weight:600;
    font-style:italic;
}
#small-dialog .quote{
    
    font-size:25px;
    line-height:1.3;
    
}

.quote-box .author, #small-dialog .author{
    font-family:open-sans, open sans, arial, sans-serif;
    font-size:13px;
    font-weight:600;
    text-align:right;
}
#small-dialog .author{
    
    font-size:18px; 
    text-transform:uppercase;
}

/*center using flexbox if possible.*/
html.flexbox a.quote-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

html.flexbox .quote-box .text {
    position: relative;
    width: 90%;
    transform: none;
    top: 0;
    left: 0;
}

@media(max-width:1140px){
    a.quote-box .text{
        font-size:16px;
        
    }
}
@media(max-width:768px){
    a.quote-box .text{
      width:95%;
        
    }
}


 a.gallery-image {
       display: block;
    width: 100%;
    height: 226px;
    margin: 0;
   
    background-size: cover;
    background-position: center;
    position:relative;
}



@media(min-width:320px) and (max-width:768px){
    
    a.gallery-image {
        display: inline-block;
        width: 50%;
        height: 226px;
        margin: 0;
        float: left; 
        background-size: cover;
        background-position: center;
    }
    
    a.gallery-image:nth-child(odd):first-child {
        display: block;
        width: 100%;
    }
}

@media(min-width:320px) and (max-width:768px){
    
    a.gallery-image {
        display: inline-block;
        width: 50%;
        height: 226px;
        margin: 0;
        float: left; 
        background-size: cover;
        background-position: center;
    }
    
    a.gallery-image:nth-child(odd):first-child {
        display: block;
        width: 100%;
    }
}

@media(min-width:930px){
     a.gallery-image {
        display: inline-block;
        width: 50%;
        height: 226px;
        margin: 0;
        float: left; 
        background-size: cover;
        background-position: center;
    }
    
    a.gallery-image:nth-child(odd):first-child {
        display: block;
        width: 100%;
    }
}






.footer-container-wrapper{margin:0;}



.scroll-down{  
    position: absolute;
    top: -2px;
    z-index: 4;
    right: 0;
    border: 0;
    border-radius: 0;
   
    
    }
    .scroll-down button{
           border: 0;
            border-radius: 0;
            background: #00aeef;
            color: #fff;
            font-weight: bold;
            font-size: .8em;
            padding: 5px;
            text-align: center;
            position:relative;
            height:50px;
            width:50px;
    }
    .scroll-down button:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%) rotateZ(225deg);
        -ms-transform: translate(-50%,-50%) rotate(225deg);
            transform: translate(-50%,-50%) rotateZ(225deg);
    border: 3px solid #fff;
    height: 15px;
    width: 15px;
    border-bottom: 0;
    border-right: 0;
}


.portfolio-wrapper {
  overflow-y: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  background-image: url("https://cdn2.hubspot.net/hubfs/2479702/Template_Images/LMG-portfolio-BG-texture_03.jpg");
}

.portfolio-wrapper .page-meta { 
  background-image: url("/hubfs/2479702/Template_Images/LMG-porfolio-texture-blue_03_02.jpg");
 /* color: #fff;
 
  font-size: 14px;
  font-family: "Open Sans";
  line-height: 1.8;*/
}
.portfolio-wrapper .page-meta a{
    text-decoration:none; 
font-family:"Chronicle Display A","Chronicle Display B",sans-serif;
font-weight:300;
font-style:italic!important;
}

.portfolio-wrapper .page-meta-scrollable-region ,.portfolio-wrapper .filter-scrollable-region{
    padding:64px 12.68%;
}
/*
.portfolio-wrapper .page-meta h1 {
  font-size: 30px;
  font-family: TradeGothicLT-CondEighteen,sans-serif;
 margin-top:1em;
   color: #00aeef;
  text-transform: uppercase;
  line-height: 1.1;
  -webkit-transition:font-size .2s ease-out;
transition:font-size .2s ease-out;
  margin-top:0;
  margin-bottom:0;
}
*/
/*
.portfolio-wrapper .page-meta h2 {
  font-size: 37px;
  font-family: "bebas-neue", bebas-neue, bebas neue, arial, sans-serif;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
 -webkit-transition:font-size .2s ease-out;
transition:font-size .2s ease-out;
  margin-top:0;
  margin-bottom:12px;
}
*/


.portfolio-wrapper .filter-wrapper {
 /* padding: 50px;*/
}

.portfolio-wrapper.post-detail .filter-wrapper {
background-color:#fff;
}
.portfolio-wrapper.post-detail .filter-scrollable-region {
    padding: 0;
}
.portfolio-wrapper.post-detail .filter-scrollable-region .overview{
padding:64px 12.68%;
background-image: url(https://f.hubspotusercontent00.net/hubfs/2479702/Website/Our%20Work/Template_Images/LMG-portfolio-BG-texture_03.jpg);
}
.portfolio-wrapper.post-detail .filter-scrollable-region .tabs button{
    width:50%;
    border-radius:0;
    border:0;
    background-color:#d3d3d3;
    color:#fff;
    font-family:open-sans, open sans, arial, sans-serif;
    font-weight:bold;
    font-size:12.88px;
    padding:20px 5px;
    text-transform:uppercase;
    outline:0;
    cursor:pointer;
}
.portfolio-wrapper.post-detail .filter-scrollable-region .tabs button.active{
    background-color:#00aeef;
    outline:none;
}

.portfolio-wrapper.post-detail .filter-scrollable-region .tab-content-wrapper .tab-content{display:none;}
.portfolio-wrapper.post-detail .filter-scrollable-region .tab-content-wrapper .tab-content.active{display:block;}

.tab-content-wrapper {
    padding: 38px;
    color:#666;
}


.portfolio-wrapper .filter-wrapper h2 {
  font-size: 28px;
  font-family: "bebas-neue", bebas-neue, bebas neue, arial, sans-serif;
  color: #00aeef;
  text-transform: uppercase;
  line-height: 1;
  text-align: left;
  margin-top:7px;
}
.portfolio-wrapper .filter-wrapper fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  /*above styles are for reset*/
  padding: 8px;
  border-bottom: 1px solid #cecece;
  padding-bottom: 29px;
}
.portfolio-wrapper .filter-wrapper fieldset + fieldset legend {padding-top:29px;} 
.portfolio-wrapper .filter-wrapper fieldset:last-child{padding-bottom:15px;}

.portfolio-wrapper .filter-wrapper fieldset:last-of-type {
  border-bottom: 0;
}
.portfolio-wrapper .filter-wrapper fieldset .custom-checkbox {
    display: inline-block;
    height: 14px;
    width: 14px;
    box-sizing: border-box;
    margin-right: 10px;
    border: 1px solid #c1c1c1;
    /* border-radius: 4px; */
    position: relative;
    overflow: hidden;
    /* box-shadow: 1px 2px 6px rgba(0,0,0,0.18); */
}
.portfolio-wrapper .filter-wrapper fieldset .custom-checkbox:before {
 content: "";
    position: absolute;
    height: 12px;
    width: 12px;
    display: inline-block;
    background-size: 11px;
    background-position: center;
    background-repeat: no-repeat;
    /* top: 50%; */
    /* left: 50%; */
    /* -webkit-transform: translate(-50%, -50%) scale(0); */
    /* transform: translate(-50%, -50%) scale(0); */
    top: 0;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
}
.portfolio-wrapper .filter-wrapper fieldset .custom-checkbox:after {
  /*content: "";
  position: absolute;
  height: 7px;
  width: 7px;
  display: inline-block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #ececec;
  box-sizing: border-box;
 
  background: #f4f4f4;

  
  background: -webkit-linear-gradient(top, #f4f4f4 0%, #dadada 100%);
  
  background: linear-gradient(to bottom, #f4f4f4 0%, #dadada 100%);
  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#dadada', GradientType=0);
  
  border: 1px solid #d4d4d4;
  z-index: 0;*/
}
/*.portfolio-wrapper .filter-wrapper fieldset label:hover > .custom-checkbox {
  display: inline-block;
  height: 14px;
  width: 14px;
  border: 3px solid #c1c1c1;
}*/
.portfolio-wrapper .filter-wrapper fieldset input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.portfolio-wrapper .filter-wrapper fieldset input[type=checkbox]:checked + label > .custom-checkbox:before {
 /* -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transition: -webkit-transform .2s ease-out;
  transition: -webkit-transform .2s ease-out;
  transition: transform .2s ease-out;
  transition: transform .2s ease-out, -webkit-transform .2s ease-out;*/
  content:"";
  background-image:url('https://f.hubspotusercontent00.net/hubfs/2479702/Website/Our%20Work/Template_Images/checkbox_x.png');
}
.portfolio-wrapper .filter-wrapper fieldset label {
  display: block;
  padding:  0;
  position: relative;
}
.portfolio-wrapper.listing .filter-wrapper{ color:#777777;}
.portfolio-wrapper .filter-wrapper fieldset legend {
  box-sizing: border-box;
  color: inherit;
  white-space: normal;
  display: block;
  width: 100%;
  padding: 0;
  color:#777777;
  margin-bottom: 0;
  font-size: 1em;
  font-weight: bold;
  line-height: inherit;
  padding-top: 10px;
  position: relative;
  margin-left:24px;
  margin-left:0;
  font-size:16px;
}
.portfolio-wrapper .filter-wrapper .input-wrapper{
    font-size:14px;
}
.portfolio-wrapper .portfolio-listing {
  background-color: rgba(50, 50, 50, 0.2);
  text-align: left;
}
@supports (display: flex) {
  .portfolio-wrapper .portfolio-listing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
}
.portfolio-wrapper .portfolio-listing .portfolio-card {
  position: relative;

  height: 272px;
  display: inline-block;
  background-size:cover;
  background-position:center;
  z-index:1;
  overflow:hidden;
  
  
}
.portfolio-card .text .button-wrapper{max-height:0px;opacity:0; overflow:hidden;transition:all 1s ease-out;}
@media(min-width:769px){
.portfolio-card:hover .text .button-wrapper{max-height:400px; opacity:1; transition:all 1s ease-in;}

}
.portfolio-card .text .button.transparent{float:left;}
.portfolio-wrapper .portfolio-listing .portfolio-card .bg{
    display:block;
    width:100%;
    height:100%;
    z-index:-1;
    background-size:cover;
    background-position:center;
    transform:scale(1);
    position:absolute;
    transition:transform .3s ease;
}
.portfolio-wrapper .portfolio-listing .portfolio-card:hover .bg{
  
    transform:scale(1.3);
}

.portfolio-wrapper .portfolio-listing .portfolio-card:hover {
         /* filter: brightness(125%);*/
       
}
@supports (display: flex) {
  .portfolio-wrapper .portfolio-listing .portfolio-card {
    -webkit-box-flex: 1;
        -ms-flex: 1 50%;
            flex: 1 50%;
  }
}
.portfolio-wrapper .portfolio-listing .portfolio-card:before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  top: 0;
  
  -webkit-transition:-webkit-transform .3s ease-out;
transition:-webkit-transform .3s ease-out;
transition:transform .3s ease-out;
transition:transform .3s ease-out, -webkit-transform .3s ease-out;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.86+100 */
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, transparent 40%, rgba(0, 0, 0, 0.86) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.86) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#db000000', GradientType=0);
  /* IE6-9 */
  
}
.portfolio-wrapper .portfolio-listing .portfolio-card:hover:before{
background:rgba(88, 208, 203, 0.59);
}


.portfolio-wrapper .portfolio-listing .portfolio-card .text {
  position: absolute;
  bottom: 0;
  padding: 0 10%;
}
.portfolio-wrapper .portfolio-listing .portfolio-card .text .title {
  color: #fff;
  font-size: 25px;
  font-family: "bebas-neue", bebas-neue, bebas neue, arial, sans-serif;
  color: #fff;
  line-height: 1;
  text-align: left;
 /* font-weight:600;*/
  font-style:normal;
      margin-bottom: 13px;
}
.portfolio-wrapper .portfolio-listing .portfolio-card .text .view-project {
  font-style: italic;
  font-size: 15.72px;/*original font size*/
  font-size:18px;
  font-family: "Chronicle Display A","Chronicle Display B",sans-serif;
  font-weight:600;
  color: #00aeef;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 25px;
  text-align: left;
      margin-top: 12px;/*original spacing*/
      margin-top:2px;
      position:relative;
}
.portfolio-wrapper .portfolio-listing .portfolio-card:hover .text .view-project{
    color:#fff;
}
.portfolio-wrapper .portfolio-listing .portfolio-card .text .view-project:after{
     content: "\25B6 \FE0E";
    padding-left: 8px;
    font-family:arial;
    font-style:normal;
    position: absolute;
    font-size: 7px;
  /*  right: 8px;*/
    top: 50%;
   /* color: #fff;*/
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*layout for browsers that don't support flex and grid*/
.portfolio-wrapper {
  display: block;
 
  overflow: hidden;
}

.portfolio-wrapper,.portfolio-wrapper .page-meta,
.portfolio-wrapper .filter-wrapper,
.portfolio-wrapper .portfolio-listing{
   
  position:relative;/*fixes weird gap below portfolio body - don't ask why, it just works.*/
}
@media(min-width:769px){
    .portfolio-wrapper,.portfolio-wrapper .page-meta,
.portfolio-wrapper .filter-wrapper,
.portfolio-wrapper .portfolio-listing{
    height: 816px;
  height:calc(100vh - 155px);/* the px value number needs to be the height of the header.*/
  min-height:168px;
}
}



.portfolio-wrapper .page-meta,
.portfolio-wrapper .filter-wrapper,
.portfolio-wrapper .portfolio-listing {
  display: inline-block;
  float: left;
  margin: 0;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x:hidden;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  
}
@media (min-width: 500px) {
  .portfolio-wrapper .page-meta,
  .portfolio-wrapper .filter-wrapper {
    width: 50%;
  }
  
}
@media (min-width: 769px) {
  .portfolio-wrapper .page-meta,
  .portfolio-wrapper .filter-wrapper {
    width: 33.333%;
  }
}
@media (min-width: 1000px) {
  .portfolio-wrapper .page-meta,
  .portfolio-wrapper .filter-wrapper {
    width: 25%;
  }
}
@media (max-width: 500px) {
  .portfolio-wrapper .filter-wrapper {
    display: none;
  }
  .portfolio-wrapper.post-detail .filter-wrapper{display:block;}
}
@media (max-width: 500px) {
  .portfolio-wrapper .page-meta {
    height: auto !important;
  }
  .portfolio-wrapper.post-detail .filter-wrapper{order:3;}
}
.portfolio-wrapper .portfolio-listing {
  overflow-y: scroll;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
@media (max-width: 768px) {
  .portfolio-wrapper .portfolio-listing {
      -webkit-box-flex:2;
      -webkit-flex:2 100%;
      -ms-flex:2 100%;
      flex:2 100%;
    width: 100%;
    height: auto !important;
  }
}
@media (min-width: 769px) {
  .portfolio-wrapper .portfolio-listing {
    width: 33.333%;
  }
}
@media (min-width: 1000px) {
  .portfolio-wrapper .portfolio-listing {
    width: 50%;
  }
}

.portfolio-wrapper .portfolio-listing .portfolio-card {
  display: block;
  width: 100%;
  float: left;
}

@media (min-width: 500px) {
  .portfolio-wrapper .portfolio-listing .portfolio-card {
 display: inline-block;
  width: 50%;
  float: left;
    }
}
@media (min-width: 769px) {
  .portfolio-wrapper .portfolio-listing .portfolio-card {
  display: block;
  width: 100%;
  float: left;
    }
}
@media(min-width:905px){
    .portfolio-wrapper .portfolio-listing .portfolio-card {
  display: inline-block;
  width: 50%;
  float: left;
 }
}
@media(min-width:1500px){
    .portfolio-wrapper .portfolio-listing .portfolio-card {
  display: inline-block;
  width: 33.3333%;
  float: left;
 }
}
@media(min-width:1750px){
    .portfolio-wrapper .portfolio-listing .portfolio-card {
  display: inline-block;
  width: 25%;
  float: left;
 }
}

@supports (display: flex) {
  .portfolio-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
  }
  @media (min-width: 500px) {
    .portfolio-wrapper .page-meta,
    .portfolio-wrapper .filter-wrapper {
      width: 50%;
    }
  
  }
  @media (min-width: 769px) {
    .portfolio-wrapper .page-meta,
    .portfolio-wrapper .filter-wrapper {
      width: 25%;
      max-width: 350px;
      -webkit-box-flex:1;-webkit-flex:1 25%;-ms-flex:2 25%;flex:2 25%;
    }
    .portfolio-wrapper .portfolio-listing{
        -webkit-box-flex:2;-webkit-flex:1 33%;-ms-flex:1 33%;flex:1 33%;
    }
    
  }
  @media(min-width:850px){
      
      .portfolio-wrapper .portfolio-listing{
        -webkit-box-flex:2;-webkit-flex:2 50%;-ms-flex:2 50%;flex:2 50%;
    }
      }

}

/*maybe un-comment this when microsoft edge more consistently handles grid, otherwise this was more for prototyping*/
/*
@supports ((display: -ms-grid) or (display: grid)) {
  //disable non-grid widths to progressively enhance
  .portfolio-wrapper .page-meta,
  .portfolio-wrapper .filter-wrapper,
  .portfolio-wrapper .portfolio-listing {
    width: auto;
  }

  .portfolio-wrapper {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    grid-template-areas: "PageMeta" "Portfolio-Listing";
  }
  @media (min-width: 500px) {
    .portfolio-wrapper {
      -ms-grid-columns: 1fr 1fr;
          grid-template-columns: 1fr 1fr;
      grid-template-areas: "PageMeta FilterWrapper" "Portfolio-Listing Portfolio-Listing";
    }
  }
  @media (min-width: 768px) {
    .portfolio-wrapper {
      -ms-grid-columns: 1fr 1fr 1fr 1fr;
          grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas: "PageMeta FilterWrapper Portfolio-Listing Portfolio-Listing";
    }
  }
  .portfolio-wrapper .page-meta {
    grid-area: PageMeta;
  }
  .portfolio-wrapper .filter-wrapper {
    grid-area: FilterWrapper;
  }
  .portfolio-wrapper .portfolio-listing {
    grid-area: Portfolio-Listing;
  }
}
*/