/* custom.css
=================================================================== */



/* greenwaystudio.ca */

.logo img {
    max-width: 100%;
}

.project-list .project-list-item img {
  filter: saturate(30%) brightness(105%)
}

.content-background {
  padding-top: 20px; /* large logo */
}

#profile .content-background .row {
  padding-bottom: 2.75em;
  border-bottom: 1px solid #ccc;
  margin-bottom: 2.7em;
}


/* Profile */

/* vertically separate rows with space */

#profile .content-background .row:nth-child(n+2) h2 {
  padding-top: 2em;
}

h2 {  font-size: 1.5rem; }


/* projects */


/* http://apps.eky.hk/css-triangle-generator/ */
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;

  /* isosceles */
    /* border-width: 0 0 150px 150px; */
  /* scalene */
    border-width: 0 0 150px 200px;


    border-style: inset; /* if Firefox renders a strange gray border */
    -webkit-transform:rotate(360deg); /* for a better anti-aliasing in webkit browser   */

    color: inherit;
}


@media (max-width: 1200px) {
  .project-categories div.parents,
  ul.projects-extra-controls {
    display: inline-block;
  }
}

#change-layout,
.search-projects {
  display: none;
}

#all-projects .categories-background, #projects-map .categories-background, .categories-background {
  z-index: 10;
}


/* Temporarily Disabled
=================================================================== */

/* body classes
======================== */

/* Temporarily hide text below images  project-moudules > figcaption
 Note: prefix .project- added because class numbers cannot start with a zero
*/

/* spedific pages */
.project-0603 figcaption,
.project-0848 figcaption {
  display: none;
}

/* all project pages
======================== */
/* all pages */
.project figcaption {
  display: none;
}

/* share
======================== */
/*
.share {
  display: none;
}
*/


/* use with pull-right to align or flush right  */
header .main-navigation,
footer {
/*   padding-right: 25px; */
}

  @media (min-width:1200px) {

    /* !BL@LC */
    .project-list-wrapper {
/*
        margin-right: 22px;
        padding-left: 40px;
*/


    }

    /* !BL@LC - bg website */
    #all-projects .project-list-wrapper,
    #profile .project-list-wrapper {
      padding-left: 110px !important;
    }

    .no-padding-lg {
      padding-right:0;
/*       padding-left:0; */
    }

/*
    .wrapper.project {
      margin: 0;
    }
    .wrapper.project > .row:nth-child(n+2) {
      margin: 0 25px;
      padding: 0;
    }
    .project .main-image {
      padding: 0;
    }
*/
    .wrapper.project > .row:first-child {
      margin: 0 -41px;
    }

    /* manually align */
    .project-title {
      margin-left: 25px;
    }
    /* full bleed images */
    .project-modules {
      margin: 0 -25px;
    }

  }




/* helper styles
=================================================================== */

.no-gutter > [class*='col-'],
.no-padding {
    padding-right:0;
    padding-left:0;
}






/*
body {
  padding-top: 5px;
    background: white;
}
header.desktop {
  min-height: 45px;
  padding: .75em 0 .75em;
}
header .main-navigation a {
  margin-right: 2em;
  line-height: 1;
}
.logo-text {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 1em;
}
  footer {
    margin: 1em 0 1.5em;
  }
*/

#home .credits-photography {
  display: none;
}
/* default - mobile first
=================================================================== */
.wrapper {
/*   max-width: 938px!important; */
    /*   max-width: 735px!important; */
}
/* 758px
=================================================================== */
@media (min-width: 768px) {
/*
  body,
  body#all-projects, body#contact, body#profile, body#people,
  body#projects {
    padding-top: 45px;
  }
  header.desktop {
    padding: 1em 0 0;
  }
  header .main-navigation a {
  margin-right: 2em;
  line-height: 1;
  }
  .logo-text {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 0;
  }
*/
}
/* 1366x768 (MacBook Air 11")
=================================================================== */
@media (min-width:1200px) and (max-width:1366px) {
  .wrapper {
/*     max-width: 800px!important; */
  }
}
/* dev
=================================================================== */
@media (min-width: 1367px) and (max-height:1440px)   {
  .wrapper {
          /*     max-width: 825px!important; */
  }
}
/* 1440x900 (MBP 15" & MacBook Air 13")   thru   1900x1200 (iMac 24")
=================================================================== */
@media (min-width: 1441px) and (max-height:1900px)   {
/*
  body,
  body#all-projects, body#contact, body#profile, body#people,
  body#projects {
    padding-top: 50px;
  }
  header.desktop {
    min-height: 50px;
    padding: 1em 0 1em;
  }
  .wrapper {
    max-width: 1200px!important;
  }
*/

}
/* 2560x1440 (iMac 27") and higher
=================================================================== */
@media (min-width: 1901px)   {
  .wrapper {
/*     max-width: 1400px!important; */
  }
}
/* Other
=================================================================== */
.col-sm-offset-fixed, .col-lg-offset-fixed {
  margin-left: 0 !important;
}

#all-projects .content-background {
/*   min-height: 1400px; */
}

.project h1 {
  font-size: 1.1em;
  padding-top: .5em;
  color: #AAA;
  font-weight: 400;
}
.project {
  padding-bottom: 0;
}

.project-list .project-list-item {
/*   margin-bottom: 0; */
  -webkit-flex-basis: calc(100%/2 - 1px) !important;
  flex-basis: calc(100%/2 - 1px) !important;

/*   max-height: 852px; */
padding-top: 150%;

  overflow: hidden;
}
.project-list .project-list-item a {
/*
  margin:0 1em;
  position: relative;
*/
}
.project-list .project-list-item:hover .title {
/*   color: #FFF; */
}
.project-list .project-list-item .title {
/*
  position: absolute;
  bottom: 0;
  left: 0;
  color: #FFF;
  padding: 1em 1em 1.1em 1.5em;
*/

/*   width: 100%; */

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */


}
.project-list .project-list-item .sub-title {
/*   display: inline-block; */
    display: block;
  padding-right: 1em;
}
.project-list .project-list-item .stage {
/*   display: inline-block; */
    display: block;  
  font-size: .75rem;
  color: #888;
    color: orange;
    
}
.project-list .project-list-item .stage a {
    color: orange;
}
/* aor = architect of record */
.project-list .project-list-item .aor {
/*   display: inline-block; */
    display: block;  
  color: #0073ff;
    color: #5db1ff;
  font-size: .75rem;
  margin: 0;
}

    /* DWELL magazine LOGO */
    .project-list .project-list-item a svg.article {
      display: block; margin-top: 2px; height: 10px; width: auto;
      opacity: .7;
      fill: #0014c0;
    }
    .project-list .project-list-item a:hover svg.article {
      opacity: 1;
      fill: #4558ff;
    }

.project-list .project-list-item .categories {
  display: none;


}
.project-list .project-list-item img {
/*
  -webkit-filter: none;
  filter: none;
*/
}

          /* temp */
          .credit {
            position: absolute;
            bottom: 1em;
            right: 1em;
            color: white;
            font-size: 12px;
            text-shadow: 1px 1px 0 #838383;
            display: block;
          }


.quote-box img.james-beard-award {
  width: 50px;
  margin-right: 1em;
  margin-top: -.25em;
}
/* 1200px
=================================================================== */
@media (min-width: 1200px) {
  .quote-box img.james-beard-award {
    width: 150px;
    margin-top: -1em;
  }
}
/*  Copyright
=================================================================== */

  .copyright-terms.copyright-2 {
    margin: 0;
    font-size: 12px;
  }
  .copyright-terms.copyright-2 li {
    margin-right: 0;
    display: block;
    float: left;
    clear: both;
  }
  .copyright-terms.copyright-2  li:last-of-type {
    margin-left: 0;
  }
/*
  .copyright-terms.copyright-2 li:last-of-type {
    margin-left: 0;
    margin-right: 0;
     display: block;

  }
*/

/*  home > slick-slider
=================================================================== */

#home .slick-slider {
/* max-height: 1094px; */
/*     max-height: none; */
}
#home .slick-slide .inner {
/*
  height: 42.9687vw;
  max-height: 100vh;
*/
    /*
      height: auto;
      max-height: none;
    */
}
@media (max-width:767px) {
  
  .home-slider.full-background  .inner {
      background-size: contain;
    height: 50vw;
  }
}

/* projects > slick-slider  */

#projects .slick-slider {
/*
    max-height: 1187px;
    max-height: none;
*/
  }

#projects .slick-slide {
/*     max-height: none; */

  }

#projects .slick-slide .inner {
  height: auto;
}


#home .slick-dots {
/*
  position: absolute;
  bottom: -50px;
*/
}

#projects .slick-dots li {
  margin: 0 .15em;
}
.project-carousel-2.slick-dots-align-right .slick-dots {
  right: 80px;
}


/* Quote Slides
=================================================================== */

.quote-box * {
  line-height: 1.1;
}

/* Hyphenation and Word Break
=================================================================== */
/* https://css-tricks.com/almanac/properties/h/hyphenate/ */
.hyphenate {

}
.hyphenate-off,
#profile p,
.quote-box * {
 -ms-word-break: keep-all;
     word-break: keep-all;

   /* Non standard for webkit */
/*        word-break: break-word; */

    -webkit-hyphens: none;
       -moz-hyphens: none;
            hyphens: none;


            clear: both; /* !BL@LC - 190918 */
}

.quote-box p {
  margin: 0 0 1.375em;  /* match body > p */
}

.quote-box small {
  font-size: 72%;
 }
.quote-box .align-bottom {
  position: absolute;
  bottom: 0;
}
.quote-box img {
/*     width: 35%; */
  max-height: 180px;
  max-width: 55%; /* for small devices */
  margin:0;
}
.quote-box img.portrait{
  max-height: 200px;
}

/* quote over whitewashed slide image
=================================================================== */
.quote-overlay .inner > img {
  opacity: .2;
}
.quote-overlay .quote-box {
  width: 100%;
  color: white;
  padding: 1em 2.5em .1em;
}
.quote-overlay .quote-box {
  position: absolute;
  top: 0;
  background: none;
  color: black;
}
.quote-overlay .quote-box p {
  text-shadow: 1px 1px 2px #FFF;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 1px 1px 50px rgba(255, 255, 255, 0.25);
  display: block;
}

        /* DISABLED quote with gray background
        =================================================================== */

        /* 3. !BL@LC http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css
             Fiddle: http://jsfiddle.net/danield770/8VJ38/3/
        */

        /*  height: 1100px;
            width: 865px;     0.7862654321*1100 = 864.89197531 */

         .gray-bg .quote-box {
          width: 100%;
            width: 100vw;
          height: 127.167vw;  /* height:width ratio =    1100/865 = 1.27167  */
          background: #666;
          max-height: 100vh;
          max-width: 78.63vh; /* width:height ratio =   865/1100 = 0.7863*/
            max-width: 100vh;
          margin: auto;
        /*   position: absolute; */
        /*   top:0;bottom:0;  *//* vertical center */
        /*   left:0;right:0; */ /* horizontal center */

          color: white;
          padding: 1em 2.5em .1em;
          font-size: .85em;
        }


/* 1200px
=================================================================== */
@media (min-width: 1200px) {
  .quote-box img {
    max-height: 200px;
  }
  .quote-box img.portrait{
   max-height: 300px;
  }
  /* improve readability of long sentences */
  .quote-overlay .quote-box p {
    max-width: 80%;
  }
}



      /* dev temp
      =================================================================== */
      .quote-2 {
        position: absolute;
        top: 0;
        left:0;
        padding: 1em 2.25em .1em;
        font-size: .85em;
        color: white;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);


          background: rgba(255, 255, 255, 0.77);
          color: #000;
          width: 100%;
          text-shadow: none;
            font-size: 1em !important;

      }
      .quote-2 * {
        word-break: keep-all;
      }

/* navigation on side
=================================================================== */
/*
@media (min-width: 768px) {
  body {
    padding-top: 35px;
  }


  .slick-slider {
    max-height: 1187px;
  }
  .slick-slide {

  }
  .slick-slide .inner {
    height: auto;
    max-height: none;
  }
}
@media (max-width: 767px) {
  header.desktop {
  	display: none!important;
  }
  header.mobile {
    display: block;
    position: relative;
  }
}



header.desktop {
  position: absolute;
  right: 30px;
  width: 300px;
}

header.desktop .main-navigation a {
  margin-right: 0;
  display: block;
}
*/
/* 400px
=================================================================== */
@media (max-width:400px) {
  header .main-navigation a {
    margin-right: 5%;
    font-size: .75em;
  }
  .logo-text {
    font-size: 18px;
  }
}
/* 768px
=================================================================== */
@media (min-width: 768px) {
  /* remove padding to align left and right edges */
/*
  header [class*='col-'],
  footer [class*='col-'] {
    padding: 0;
  }
  #profile .content-background [class*='col-'],
  #people .content-background [class*='col-'],
  #book .content-background [class*='col-']   {
    padding-left: 0;
    padding-right: 0;
  }
*/
  /* ------ */

  .project-list .project-list-item {
/*     margin-bottom: 0; */
    -webkit-flex-basis: calc(100%/5 - 1px) !important;
    flex-basis: calc(100%/5 - 1px) !important;
  }
  .project-list .project-list-item a {
        /*     margin:0; */
/*     border: 1px solid #FFF; */
  }
  .copyright-terms.copyright-2 {
    text-align: left;
  }
  .copyright-terms.copyright-2 li {
    margin-right: 5em;
    display: inline-block;
    clear: none;
  }
  .copyright-terms.copyright-2  li:last-of-type {
    float: right;
    margin-right: 0;
  }
  .project-title {
    padding-left: 0;
  }


  #projects .slick-slide .inner {
  /*     height: 84.7857vw; */  /* height:width ratio =    1187/1400 = 0.8478571429  */
  /*     max-height: none; */
      height: 45.9687vw;
  /*
      background: #F1F1F1;
        background: #EAEAEA;
  */
       background: #F7F7F7;
  /*      background: white; */

    }

  #projects .slick-slide img {
  /*   max-height: 100%; */
  /*   height: 1100px; */
  }


  .quote-box {
    padding: 2em 2em .1em;
    font-size: 1.1em;
    height: 100%; /* match slick-slide */
  }
  .quote-box * {
    line-height: 1;
  }
  .quote-box p {
    margin: 0 0 .9em;
  }

      .gray-bg .quote-box  {
        max-width: 78.63vh; /* width:height ratio =   865/1100 = 0.7863*/
        max-width: 50vh;
      }
     .quote-2 {
        padding: 2em 4.25em .1em;
        font-size: .9em;
      }


  .project-carousel-2 .slick-prev {
     right: 40px;
  }
  .project-carousel-2 .slick-next {
    right: 0;
  }
}
/* 1200px
=================================================================== */
@media (min-width:1200px) {
/*
  .project-list-wrapper {
    padding-left: 0;
  }
*/
  .projects-filter { /* temp */
/*     margin-top: 50px; */
  }
  .quote-box {
    font-size: 1.4em;
  }
  .quote-box * {
    line-height: 1.15;
  }
  .quote-box p {
    margin: 0 0 .9em;
  }


      .gray-bg .quote-box  {
        max-width: 80vh;
      }
      .quote-2 {
       font-size: 1.6em;
      }
  /* !BL@LC - bg website */
/*
  .logo {
    margin-left: 108px;
  }
*/

}
/* 1440px
=================================================================== */
@media (min-width: 1440px) {
 #profile p {
/*    font-size: .9em; */
   margin: 0 0 1.175em;
 }
  .quote-box {
    font-size: 1.5em;
  }
  .quote-box * {
    line-height: 1.2;
  }
  .quote-box p {
    margin: 0 0 1em;
  }

      .gray-bg .quote-box  {
        max-width: 70vh;
      }
     .quote-2 {
       font-size: 1.6em;
      }

  #home footer {
    margin: 0;
  }
}
/* 2000px
=================================================================== */
@media (min-width:2000px) {
  /* !BL@LC */
/*
  .project-list-wrapper {
    padding-left: 0;
  }
*/
  .quote-box {
    font-size: 1.65em;
  }
  .quote-box * {
    line-height: 1.25;
  }
}


/* Dev
=================================================================== */
                /* http://caniuse.com/#search=vw */


                /**
                 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
                 *
                 * To overcome this, create media queries that target the width, height, and orientation of iOS devices.
                 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing
                 * the height of element `.foo` —which is a full width and height cover image.
                 *
                 * iOS Resolution Quick Reference: http://www.iosres.com/
                 */

                 .foo {
                    height: 100vh;
                    width: 100vw;
                    background: url(cover.jpg) center center / cover no-repeat;
                 }


                /**
                 * iPad with portrait orientation.
                 */
                @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
                  .foo {
                    height: 1024px;
                  }
                }

                /**
                 * iPad with landscape orientation.
                 */
                @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
                  .foo {
                    height: 768px;
                  }
                }

                /**
                 * iPhone 5
                 * You can also target devices with aspect ratio.
                 */
                @media screen and (device-aspect-ratio: 40/71) {
                  .foo {
                    height: 500px;
                  }
                }



/* NEW
=================================================================== */

@media (min-width: 1200px) {
/*
  .wrapper {
    margin: auto;
  }
  #all-projects .project-list-wrapper {
    padding-left: 0 !important;
  }
  .profile-img,
  .img-responsive {
    padding-right: 0;
    padding-left: 0;
  }
*/

}


/*
body {
  padding-top: 90px !important;
}
*/

 #all-projects.look-book .gn-projects {
   color: inherit;
 }
.look-book .gn-look-book,
#look-book .gn-look-book {
  color: #F00;
}

.item .inner img { width: 100%;}