/* ================================================================

   slick-custom.css

   Dependent on the latest version of:  cdn.jsdelivr.net/jquery.slick/1.x.x/slick.css
   Source: https://github.com/kenwheeler/slick/

   Author: Brandon Leudke, www.LeudkeCreative.com

=================================================================== */


/* Responsive Video- See FitVids js
=================================================================== */

.slick-slider iframe,
.slick-slider video,
.video-box {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Option to limit to less than 1100px height */
.slick-slider .video-box {
  max-width: 1920px; /* width="1920" height="1080"  */

  /* 2. */
  max-height: 1100px;

}
.slick-slider .video-box.video-1080 {
  max-width: 1920px; /* width="1920" height="1080"  */
}
.slick-slider .video-box.video-720 {
  max-width: 1280px; /* width="1280" height="720"  */
}
/* Other
=================================================================== */

.slick-prev span, .slick-next span {
  /* display: block; */
  /* width: 100%; */
  /* height: 10%; */
  /* background: white; */
}

.slick-slider {
  margin-top: 0;
  margin-bottom: 15px;
  max-height: 1094px;
}

/* dot spacing  */
.slick-dots li {
  margin: 0 .2em;
}



.slick-dots li button:before {
    /* !BL@LC */
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-size: 6.5px; /* 6px */
}
.slick-dots li.slick-active button:before {
  opacity: 1; /* .75 */
  color: #F00;
}

.slick-list { }

/* .slick-initialized .slick-slide, .slick-initialized .slick-slide img { display: block; visibility: visible; } */ /* avoid FOUC */

/* fade filter
  http://kenwheeler.github.io/slick/#comment-1623633727
  http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
 */


/* this may cause fliker between slides */
    .slick-slide {
/*
    -webkit-transition: opacity 750ms ease-in-out;
    -moz-transition: opacity 750ms ease-in-out;
    -ms-transition: opacity 750ms ease-in-out;
    -o-transition: opacity 750ms ease-in-out;
    transition: opacity 750ms ease-in-out;
*/
    }


    .slick-slide {
      /* background: #ddd; */ /* on css transition, helps avoid the illusion of a flicker when the backgound is bright */
    }
    .slick-slide.slick-active {
      background: #FFF; ; /* Can use off-white #FCFCFC to reduce (or remove) bg color on active slide, in case image is NOT full width  */
    }


/* pointer, hand and grabbing */
.slick-list:hover {
    cursor: pointer;
    cursor: hand;
    cursor: -webkit-grab; cursor: -moz-grab;
}
.slick-list:active,
.slick-list.dragging
 {
    cursor: pointer;
    cursor: hand;
    cursor: -webkit-grabbing; cursor: -moz-grabbing;
}



.slick-slide img {

  z-index: 10;
  /* border:5px solid #FFF; */

/*
  display:block;
  width:100%;
*/


  /* responsive */
  display: block;
  max-width: 100%;
  height: auto;

/*
  height: 1150px;
  width: auto;
*/

  /* override width:100%; */
 width: auto;

  /* 1100px; */

  margin: 0 auto;


  /* http://codepen.io/jasondavis/pen/clfik */

  /* may not be necessary on img */
   /*  http://davidwalsh.name/translate3d
    http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/  */
  -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);


}


/* full size image placeholder - test  */

/*
.slick-slide .inner  {
    position:relative;
    background:  url("/assets/img/placeholder-2560x1100.png")no-repeat;
    background-size: cover;
    background-position: center;

    width: 100%;
    height: 1094px;
    display: block;
    opacity: .1;
    z-index: 0;
}
*/

.img-border {
  border-right: 5px solid #FFF;
}




.slider.slider-for {
  height: 600px;
  background: grey;
}
.slider.slider-nav {
  height: 120px;
}

.slider h3 {
  background: grey;
  color: #3498DB;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}

.row.slick-filter {

}
@media (max-width: 767px) {
  .row.slick-filter [class^="col-"]:first-of-type {
    padding-left: 0;
  }
}


/* ====================================================================================================================================== */
/*
  !Slider Image - Responsive Aspect Ratio

  Purpose:
        - Responsize aspect ratio applied to the portrait images
        - Adjust height so that portrait images are not overly tall
        - Vertically Center the image
        - Prevent slider height from changing a litte (too jumpy) or changing at all
            - Also see js: adaptiveHeight: true / false


  Caveats:
        - Affects all slider iamges, but is likely not needed for the full size images
        - Slight but pleasant and equal cropping top and bottom

  TO DO:
        - If it helps with rendering speeds, etc., consider setting only to the portrait images, provided that the slideshow is not otherwise ill affected
        - Also see js: adaptiveHeight: true / false
        - Find a method that prevents cropping, if the image doesn't get too small
            - See what comes of future responsive image support

*/
/* =================================================================== */
/*
  Proportional Ratios:

  A. Actual img ratio in slick slider:

      1100/2560  = 42.9687%;    1:2.33

      height:width ratio    =  1100/2560  = 0.4296875      = 42.9687vw
      width: height ration  =  2560/1100  = 2.3272727273   = 232.7272vh

  B. Smaller due to vertical scrollbar / chrome   TO DO: Try 1096w, but need to check various breakpoints

         6
      1096/2542

      height:width ratio    =  1096/2542 =  0.4311565696   = 43.1156vw
      width: height ration  =  2542/1096  = 2.3193430657   = 231.9343vh

  C. Slightly smaller due to vertical scrollbar / chrome   TO DO: Try 1096w, but need to check various breakpoints

         2
      1092/2542

      height:width ratio    =  1092/2542 =  0.4295830055   = 42.9583vw
      width: height ration  =  2542/1092  = 2.3278388278   = 232.7838vh

*/
/* =================================================================== */

/* 1. Crop bottom  http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css */
/*
.slick-slide .inner {
	width: 100%;
	padding-bottom: 42.96875%;
	position: relative;
}

.slick-slide .inner img {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	text-align: center;
}
*/


/* 2. http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/   This method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d.   */

/*
.slick-slide .inner {

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

}

.slick-slide .inner img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
*/



/* 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/
*/

          .slick-slide .inner.disabled-by-virture-of-this-long-class {
              width: 100vw;
              height: 42.9687vw;  /* height:width ratio =  1100/2560 = .4296875  */
              background: pink;
              max-height: 100vh;
              max-width: 232.7272vh; /* width:height ratio = 2560/1100 = 2.3272727273 */
              margin: auto;
          /*     position: absolute; */
              top:0;bottom:0; /* vertical center */
              left:0;right:0; /* horizontal center */
          }

/* minimal styles required - to confirm in other browsers */
.slick-slide .inner {
  height: 42.9687vw;
  max-height: 100vh;
/*   background: pink; */
/*     height: 43.1156vw;  *//* See B. */
/*     height: 42.9583vw;  *//* See C. */
}
.slick-slide img {
  max-height: 100%;
/* can't use these, because they cause cropping
   max-height: 100vh;
   max-height: 1096px;
*/
}



/* =================================================================== */

/* Other - in progress - seems to have not effect when using 3., above  */


.slick-slider,
.slick-slide.item {
/*   max-height: 1100px; */
/*     max-height: 1096px; */ /* See B.  */
/*       max-height: 1092px; */ /* See C.  */


}




/* =================================================================== */



/*  NOTE: don't use max-height on the portrait images, as it crops the image at breakpoints */
/*
  .slick-slide img.portrait {
    max-height: 1090px;
  }
*/



                /* http://www.fredparke.com/blog/css-padding-trick-responsive-intrinsic-ratios */

                /* 1:1 ratio */

          /*
               .slick-slide .item.portrait {
                  width: 33.33333%;
                  float: left;

                }
                 .portrait .inner {
                  position: relative;
                  padding-bottom: 100%;
                  height: 0;

                }
                .portrait .slick-slide img.portrait {
                  position: absolute;
                  top: 0;
                  left: 0;
                  max-height: 1094px;
                  width: 100%;
                  height: 100%;
                }
          */


  /*
  .slick-slide img:before {
    content: "";
    display: block;
    padding-top: 100%;
  }
  */

  /*
  @media (min-width: 768px) {
    .slick-slide img {
      height: 800px;
    }
  }
  @media (min-width:1200px) {
    .slick-slide img {
      height: 1150px;
    }
  }
  */


/*! Manually adjust height so that portrait images are not overly tall
=================================================================== */
/*
  !BL@LC  150224 Disabled for now, to allow full height of fluid video

*/
/*
@media (max-width:400px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 131px;
  }
}
@media (min-width:401px) and (max-width:767px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 288px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 402px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 492px;
  }
}

@media (min-width:1200px) and (max-width: 1440px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 612px;
  }
}
@media (min-width:1441px) and (max-width:1760px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 750px;
  }
}
@media (min-width:1761px) and (max-width: 1900px) {
  .slick-slider,
  .slick-slide.item,
  .slick-slide img {
    max-height: 810px;
  }
}
*/

/* ======================================================================================================================================



/*! Slick Filter
=================================================================== */

.slick-filter-wrapper {
    margin: 1em auto 1rem;
    display: block;
    text-align: center;
    display: table;
    /* display: flex; */  /* !BL@LC  http://css-tricks.com/snippets/css/a-guide-to-flexbox/ */


     /* Option to postion on the left as with the project page */
         /* position: absolute;
            width: auto;
            margin-top: 430px;
            background: #FFF;
            color: #666;
            left: 30px;
            width: auto;
            top: 0;
            z-index: 9999;
            left: -200px;
          */
}
ul.project-carousel-filter { margin: 0; padding: 0; font-size: .9em; }
.project-carousel-filter li { list-style: none; margin: 0; padding: 0; display: inline-block; margin: 0 .75em; line-height: 1em; height: 1em;}
.project-carousel-filter a.active { color: #F00; text-decoration: none !important; }


.slick-filter-wrapper.filter-list-align-left  { margin-left: 0; text-align: left; display: block; }
.slick-filter-wrapper.filter-list-align-right { margin-right: 0; text-align: right; display: block; }

.slick-filter-wrapper.filter-list-align-right  .project-carousel-filter { margin-top: 2.5em; } /* if .slick-dots is position:absolute; */


.slick-filter-wrapper.filter-list-align-left   .project-carousel-filter li { margin-left: 0; }
.slick-filter-wrapper.filter-list-align-right  .project-carousel-filter li { margin-right: 0; }


/* Slider > Dots
=================================================================== */
.slick-dots.project {
  bottom: auto;
  margin-top: .25em;
  margin-bottom: -.5em;

    position: relative; /* see below: align-right */
    /* width: auto; */
}
.slick-dots-align-right .slick-dots.project {
  margin-top: 0;
  bottom: -32px;
  z-index: 10;
}

.slick-dots-align-left .slick-dots {
  text-align: left;
}
.slick-dots-align-right .slick-dots {
  text-align: right;
  width: auto;
  right: 0;
  /* due to the position: relative  */

  position: absolute;
    right: 16.666666666666664%; /* force pull-2 on right, to match offset-2 on left */
  right: 25px;
}

.project-carousel-2.slick-dots-align-right .slick-dots {
/*   right: 150px; */
  right: 180px;
}


.slick-dots-align-left .slick-dots li:first-child, .slick-dots-align-left .slick-dots li:first-child button { margin-left: 0; margin-right: 5px; padding-left: 0; }
.slick-dots-align-right .slick-dots li:first-child, .slick-dots-align-right .slick-dots li:first-child button { margin-left: 0; /* margin-right: -5px; */ /* padding-right: 0; */ }

@media (min-width: 768px) {
  .slick-dots-align-right { margin-bottom: 5px; }

  .slick-dots-align-left .slick-dots li:first-child, .slick-dots-align-left .slick-dots li:first-child button { margin-left: 15px; padding-left: 0; }
  .slick-dots-align-right .slick-dots li:first-child, .slick-dots-align-right .slick-dots li:first-child button { /* margin-right: -5px; */ /* padding-right: 0; */ }
}

/* use slick responsive */
/*
@media (max-width: 768px) {
  .slick-dots { display: none !important; }
}
*/


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

#home .home-slider-wrapper {
  position: absolute;
  top: 170px;
  left: 0;

  display: block;
  width: 100%;
  height: 100%;
}
#home .v-2 .home-slider-wrapper {
  top: 0;
}

@media (min-width: 768px) {
  #home .home-slider-wrapper {
    top: 0;
  }
}

.home-slider.slick-slider {
/* max-height: 1094px; */
  max-height: none;
/*
  position: absolute;
  top: 0;
  left: 0;
*/
}
.home-slider .slick-slide .inner {
/*
  height: 42.9687vw;
  max-height: 100vh;
*/
  height: auto;
  max-height: none;
}


.home-slider .slick-dots {
  position: absolute;
  bottom: 30px;
  text-align: right;
  right: 18px;
}

.home-slider .slick-dots li button:before {
  opacity: .5;
  color: #FFF;
  font-size: 10px;
}
.home-slider .slick-dots li.slick-active button:before {
  opacity: 1;
/*   color: #F00; */
 color: #FFF;
}

/* .full-background
  with background images
  without .slide-slide so that the style appley when javascript is disabled (no-js)
=================================================================== */
.home-slider.full-background .slick-dots {
  position: fixed;
  bottom: 115px;
  text-align: right;
  right: 18px;
}

/* javascript disabled (no-js)
  the following styles are declared without .slide-slide
  so that the style apply when javascript is disabled (no-js)
=================================================================== */

.home-slider.full-background .inner {
  display: block;
/*
  width: 100%;
  height: 100%;
*/

/*
  width: 2560px;
  height: 1440px;
*/

/*
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
*/
}

.home-slider.full-background  .inner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100vh;
  width: auto;
  display: block;
}

/* this method works, but we're gonna' use inline styles on the page instead, for ease of updating right there on the page */
/*
.home-slider.full-background .slick-slide:nth-child(1) .inner {
  background-image: url(/images/dau-home-1.jpg);
}
.home-slider.full-background .slick-slide:nth-child(2) .inner {
  background-image: url(/images/dau-home-15.jpg);
}
.home-slider.full-background .slick-slide:nth-child(3) .inner {
  background-image: url(/images/dau-home-16.jpg);
}
*/


/*
.home-slider.full-background with CSS background

            <div class="item">
              <a href="/project/0603-atrium.php" title="800 Yates / Atrium" class="inner"></a>
            </div>
            <div class="item">
              <a href="/project/0603-atrium.php" title="800 Yates / Atrium" class="inner"></a>
            </div>
            <div class="item">
              <a href="/project/0424-home-hardware.php" title="Hardware Store - 1911 Oak Bay Avenue" class="inner"></a>
            </div>

*/

/* ================================================================

   slick-custom-arrow.css

   Dependent on: slick-custom.css

   Author: Brandon Leudke, www.LeudkeCreative.com

=================================================================== */

/* new */
.slick-prev,
.slick-next {
   position: absolute;
  /* text-indent: -9999px;  */
  background: none;

/*
   top: 0;
   bottom: 0;
*/
   width: 30px;

   margin: 0;
   padding: 0;
   height: 100%;
}


/* ================================= */

  .slick-prev:before,
  .slick-next:before {
    font-family: sans-serif; /* override slick font  */
    font-family: "Proxima Nova";
    font-style: normal;
    font-weight: 100;

    font-size: 50px;
    color: #B8B8B8;

    margin: 0;
            /* http://davidwalsh.name/css-vertical-center*/
            /*
              display: inline-block;
              height: 100%;

              position: absolute;

              top: 40%;
            	transform: 	ranslateY(-50%);
            */

    width: 100%;
    /* height: 600px; */
    /* text-align: center; */
    /* line-height: 100%; */ /* where the magic happens */
    /* z-index: 9998; */
    /* position: relative; */

}
  .slick-prev:before {

  }
  .slick-next:before {

  }


/*  http://character-code.com/arrows-html-codes.php
   &#10094;
   &#10095; */

  .slick-prev {
    left: -25px; }
    [dir="rtl"] .slick-prev {
      left: auto;
      right: -25px; }
    .slick-prev:before {
       content: "‹";  } /* left */
      [dir="rtl"] .slick-prev:before {
        content: "›"; }  /* right */


  .slick-next {
    right: -25px; }
    [dir="rtl"] .slick-next {
      left: -25px;
      right: auto; }
    .slick-next:before {
      content: "›"; } /* right */
      [dir="rtl"] .slick-next:before {
        content: "‹"; } /* left */


  .slick-prev:hover,
  .slick-next:hover {
      background: rgba(255, 255, 255, 0.05);
     }
/* One-Side Only http://css-tricks.com/almanac/properties/b/box-shadow/
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box. */
.slick-prev:hover {
  -webkit-box-shadow: 25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Firefox 3.5 - 3.6 */
  box-shadow:         25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
.slick-next:hover {
  -webkit-box-shadow: -25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    -25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Firefox 3.5 - 3.6 */
  box-shadow:         -25px 0 30px -17px rgba(255, 255, 255, 0.05);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

/* diminished arrow when nothing prev or next */
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
  opacity: 0.1;  /* 0.25 */
}


/* =========== Theme #2  =========== */

.project-title-overlay {
  position: absolute;
  z-index: 9998;
  padding-bottom: 60px;

      display: none;
}
.project-title-overlay,
.project-carousel-2 .slick-prev,
.project-carousel-2 .slick-next {
   z-index: 9998;
   top: 30px;
   bottom: auto;
   height: auto;

       top: auto;
       bottom: -77px;

          bottom: -44px;
          /* !BL@LC 190830 */
          bottom: -59px;


}
}
.project-title-overlay div h1 {
  margin: 0;
  padding: 0 2em;
  color: #fff;


  background: rgba(0, 0, 0, 0.25);
  display: inline-block;

  line-height: 60px;
  height: 60px;

  white-space: nowrap;

  text-shadow: 1px 1px 25px rgba(0, 0, 0, 0.81);
}
/*
.project-title-overlay div h1:before {
  font-size: 80px;
  margin: 0;
  color: #FFF;

  background: rgba(0, 0, 0, 0.2);
  display: inline-block;

  line-height: 48px;
  height: 60px;
  background: black;
  width: 100%;
}
*/

.slick-dots-align-right .slick-dots.project
{ margin-top: 70px; }
/*
  .slick-slider.slider-nav  {
    margin: 0;
  }
*/
  .slick-slider.slider-nav {
/*     margin-left: 25px; */
    margin-top: .8em;

    top: 0;
    margin-top: 0;
    margin-bottom: 0;

/*
    margin: 0 auto;
    text-align: center;
    float: none;
*/

/*
    float: right;
    margin-right: 100px;
*/
}


.slick-slider.slider-nav.slick-initialized {
  display: block;  /*  !important; */
}

  .slider-nav div img {
    width: 80% !important; display:block; margin:auto; padding: 1%;
  }

  .slider-nav .slick-slide {
    cursor:pointer;

          width: auto !important;


  }

  .slider-nav .slick-slide,
  .slider-nav .slick-slide h3  {
    padding: 5px .4em;
    margin: 0;
/*     width: auto !important; */
    font-size: 14px;
  }
  .slider-nav .slick-slide h3 {
    display: inline-block;
    padding-right: .5em;
    font-weight: 300;
    float: right;
    position: relative;

        /* hide just the dots - option: sed main.js - can use jquery to add the class "hidden" */
        display: none;


  }

  .slider-nav .slick-slide:first-of-type h3 .nav-cat {
    margin-left: 0;
    padding-left: 0;
    border: 0;
  }
  .slider-nav .nav-active,
  .slider-nav .nav-active .nav-cat
   {
    color: #F00;
  }


    span.nav-cat {
      font-size: 13px;
      color: #777;
      line-height: normal;
      display: inline-block;
      margin-left: 1.4em;

      border-left: 1px solid #E4E4E4;
      padding-left: 1em;
      padding-right: .75em;
      float: left;

      margin-left: 0;
      border: none;
    }

    span.nav-cat:hover {
      color: #000;
      }
/*
          .slider-nav .slick-slide h3.dot {
            border-left: 1px solid #808080;
          }
*/
          .bottom-lines span.nav-cat {
            position: relative;
            font-size: 13px;
            color: #777 !important;
            line-height: normal;
            z-index: 9999;
            display: block;
            border-left: 1px solid #808080;
            /* height: 100%; */
            /* bottom: -1em; */
            padding-top: 1.25em;
            box-sizing: content-box;
            padding-left: .25em;
            margin-top: -.25em;

          }

      .slider-nav .slick-slide:first-of-type span.nav-cat {

          margin-left: 0;
          padding-left: 0;
          border: 0;

      }


/* Dots */

/*
.slick-nav-dots {
    position: absolute;
    bottom: -45px;

    display: block;

    width: 100%;
    padding: 0;

    list-style: none;

    text-align: center;
}
*/
.slick-nav-dots .slick-slide  {
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0;
    /*  margin: 0 1px; */
    padding: 0;


    cursor: pointer;

          width: auto !important; /* dup */

          margin-top: 1em;
}

        .bottom-lines.slick-nav-dots .slick-slide  {
                  margin-bottom: 2em;
        }


.slick-nav-dots .dot {
/*
    font-size: 0;
    line-height: 0;
*/

    display: block;

    width: 20px !important;
    height: 20px;
    padding: 8px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;

    font-weight: normal;
}
.slick-nav-dots .dot:hover,
.slick-nav-dots .dot:focus {
    outline: none;
}
.slick-nav-dots .dot:hover:before,
.slick-nav-dots .dot:focus:before {
    opacity: 1;

      -webkit-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
}
.slick-nav-dots .dot:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;


          left: 0px;
          top: -.3em;

    	-webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;

}
/* .slick-nav-dots .slick-active h3.dot:before, */
.slick-nav-dots .nav-active .dot:before {
    opacity: .75;
    color: black;
      color: #F00;
}



          /* TEST / TEMPp two slider navs  */

            .slider-nav-1 {

            }
            .slider-nav-1 h3 {
              display: none !important;
            }
            .slider-nav-2 {
          /*
              position: absolute;
              right: 0;
              top: auto;
          */

            }
            .slider-nav-2 span {
              display: none !important;
            }




@media (min-width: 768px) {

  .slick-prev,
  .slick-next {
     width: 60px;
  }

  /* new */
  .slick-prev:before,
  .slick-next:before {
    font-size: 80px;
    margin: 0;
    /*   padding-bottom: 12px; */
    /*  line-height: 60px; */


    display: inline-block;

    line-height: 48px;
    height: 60px;

    /* option: white on square box */
    color: #FFF;
    background: rgba(0, 0, 0, 0.25);
  }



        .project-carousel-2 .slick-prev:before,
        .project-carousel-2 .slick-next:before {
              font-size: 40px;

              line-height: 25px;
              height: 30px;

              /* option: REMOVE white on square box */
              /* color: #B8B8B8;
              background: none; */
        }

  .slick-prev {
    left: 0; }
    [dir="rtl"] .slick-prev {
      left: auto;
      right: 25px; }



  .slick-next {
    right: 0; }
    [dir="rtl"] .slick-next {
      left: 25px;
      right: auto; }


          /* no rtl styles here, yet */

          .project-carousel-2 .slick-prev {
          /*   right: 8.333333333333332%; */
            right: 110px;
            left: auto;
                  width: 30px;
                  right: 70px;
          }
          .project-carousel-2 .slick-next {
          /*
            right: 8.333333333333332%;
            right: 4.1666666667%;
          */
            left: auto;
            right: 30px;
                  width: 30px;
          }
}

@media (max-width: 767px) {

  .slick-prev, .slick-next {
    top: 40% !important;
    bottom: auto !important;
  }
  .slick-prev {
    left: 0;
  }
  .slick-next {
    right: 0;
  }
  .slick-prev:before, .slick-next:before {
  color: #FFF;
  }
}