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

   custom.css

   Dependent on: main.css

   Author: Brandon Leudke, www.LeudkeCreative.com

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



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

/* profile img captions */
figcaption.photographer {
  font-size: .75rem;
  position: absolute;
  bottom: 4.1em;
  padding: 0;
  right: 5px;
  color: white !important;
  opacity: .75;
}
figcaption.photographer a {
  color: white !important;  
}  

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

    .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;
}




/* Projects > Projects List > mixItUp 2.x   .projects-filter
=================================================================== */


.clearSelection {
  text-transform: uppercase;
  color: #333;
  font-weight: 100;
/*
  font-size: .9rem;
  margin-bottom: .25em;
*/
}

.clearSelection {
  color: inherit;
  text-decoration: underline;
/*
	display: none;
  display: block;
*/
  font-size: inherit;
  padding: 0;
  margin-bottom: 0;
  float: none;
  text-decoration: none;
  clear: none;
}
.clearSelection.show-all {

}

.project-list .project-list-item {
  display: none;
  opacity: 1; /* 0; */

  float: none; /* display: inline does the job   - TO DO: Remove elsewhere  */
}
.project-list .project-list-item img {
  max-width: 100%; /* TO DO: update elsewhere  */
}
@media (min-width:1201px) and (max-width:1440px)  {  /* <====================== TO CHECK */
  /* .list */
  .project-list.list .project-list-item {
    -webkit-flex-basis: calc(100%/3 - 1px) !important;
    flex-basis: calc(100%/3 - 1px) !important;
  }
  .project-list.list .project-list-item img {
    max-width: 115px;
    float: left;
    margin-right: 1em;
  }
  .project-list.list .project-list-item .title { padding-top: 0; /* display: inline !important; margin-left: 2em; */  }

/*   .project-list.list .project-list-item .categories { visibility: visible; height: auto; color: #bbb; font-weight: 100;} */

}

@media (min-width: 1441px) {
  /* .list */
  .project-list.list .project-list-item {
    -webkit-flex-basis: calc(100%/4 - 1px) !important;
    flex-basis: calc(100%/4 - 1px) !important;
  }
  .project-list.list .project-list-item img {
    max-width: 115px;
    float: left;
    margin-right: 1em;

    margin-bottom: 2em; /* */
  }
  .project-list.list .project-list-item .title { padding-top: 0; /* display: inline !important; margin-left: 2em; */  }

  /* show the categories and keep the text from flowing under the image */
  .project-list.list .project-list-item .categories { visibility: visible; height: auto; color: #bbb; font-weight: 100;}
  .project-list.list .project-list-item img {   margin-bottom: 2em; }
}

ul.projects-extra-controls  {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  position: relative;
  display: block;
}
ul.projects-extra-controls li {
  margin: 0 0 .5em 0;
  font-weight: 200;
  color: #333;
}
ul.projects-extra-controls .search {
  color: #222;

}

ul.projects-extra-controls input {
  padding: 2px;
  border: 1px solid #EEE;
  border-bottom: 1px solid #f1f1f1;
  color: #000;
  font-weight: 300;
}
@media (max-width: 1200px) {
 ul.projects-extra-controls  {
    margin: -1em 0 2em;

      display: none;
  }
  ul.projects-extra-controls li {
    display: inline-block;
/*     padding-left: 15px; */
    padding-right: 5px;
  }

}

/* mixItUp > search */

.search-projects {
  position: relative;
  width: 170px;
}
.search-projects.icon input {
/*   padding:5px; */

  padding: 0;
/*   margin-left: -2px; */

  border: none;
	outline: thin dotted #EEE;
  outline-offset: 1px;

}
.search-projects.icon input:hover,
.search-projects.icon input:focus  {
	text-decoration: none;
	outline: thin solid #DDD;
  outline-offset: 1px;
/*
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;

 outline: 1px auto -webkit-focus-ring-color;
  outline-offset: 1px;
 */

}


      input[type="search"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        /* -webkit-appearance: textfield; */
          -webkit-appearance: searchfield;

      }
      input[type="search"]::-webkit-search-cancel-button,
      input[type="search"]::-webkit-search-decoration {
        /*   -webkit-appearance: none; */
      /*   -webkit-appearance: searchfield-cancel-button; */
      }
      /*
      input[type="search"]::-webkit-search-decoration,
      input[type="search"]::-webkit-search-cancel-button,
      */
      input[type="search"]::-webkit-search-results-button,
      input[type="search"]::-webkit-search-results-decoration {
      /*   display: none; */
      }

/* A. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741
  =================================================================== */
::-webkit-input-placeholder { /* WebKit browsers */
    color: #aaa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #aaa;
   opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #aaa;
   opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: #aaa !important;
}

/* B. http://stackoverflow.com/questions/19285640/font-awesome-icon-inside-text-input-element
  =================================================================== */
/*   Fiddle with browser prefixed selectors: http://jsfiddle.net/gA4rx/78/ */

/* Note that you need to define each browser-specific selector as a seperate rule. If you combine them the browser will ignore it.
   Also see: https://css-tricks.com/snippets/css/style-placeholder-text/  */

/* Usage:

  <input type="search" id="input" class="icon" placeholder="&#61442; ">

*/

/* Edits made based on A:

  reduced   input:-ms-input-placeholder   to just one colon (not two)
  added     icon:-moz-placeholder
  added     comments

*/
.search-projects.icon input::-webkit-input-placeholder { /* WebKit browsers */
    font-family:'FontAwesome';
}
.search-projects.icon:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-family:'FontAwesome';
}
.search-projects.icon input::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-family:'FontAwesome';
}
.search-projects.icon input:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-family:'FontAwesome';
}


/* https://github.com/mathiasbynens/jquery-placeholder
  See js
  =================================================================== */

input, textarea { color: #000; }
.placeholder { color: #aaa; }







/* Textbox with a clear button completely in CSS, 0 lines of JavaScript
   http://codepen.io/shidhincr/pen/ICLBD
   Modified by !BL@LC
 =================================================================== */
/* .search-wrapper, */
.search-box,
.close-icon {
	position: relative;
/* 	padding: 10px; */
}
.search-box {
/* 	width: 80%; */
/*   width: 85%; */
  width: 144px;
	border: 1px solid #ccc;
  outline: 0;
  border-radius: 15px;
/*   margin-right: 10px; */
}
.search-box:focus {
/* 	box-shadow: 0 0 15px 5px #b0e0ee; */
	border: 1px solid #bebede;
}
.close-icon {
	border:1px solid transparent;
	background-color: transparent;
	display: inline-block;
	vertical-align: middle;
  outline: 0;
  cursor: pointer;
  /* move a little */
  margin-top: 2px;

  /* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
    As a few people have pointed out, 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.  */
  -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
  transform-style: preserve-3d;

      position: absolute;
      top: .3em;
      right: 20px;
}
.close-icon:after {
	content: "\00D7"; /* Unicode Character 'MULTIPLICATION X' (U+2715) */
  display: inline-block;


  /*   http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  background-color: #A8A8A8;
  z-index: 1;
  right: 0;
  top: 0;
  /* bottom: 0; */
  margin: auto;
  padding: 1px;
  border-radius: 50%;

  color: #FFF;
  font-weight: normal;

  /* box-shadow: 0 0 2px #FFF; */
  cursor: pointer;

  height: 10px;
  width: 10px;
  line-height: .5;
  font-size: 21px;
  text-align: center;
/*   text-indent: .02em; */


  /* locate inside input, at the right end */

/* position: absolute;
  right: 18px; */

}
/* No background */
.close-icon:after {
  background: white; /* need a bg to cover the default browser icon */
  color: #333;
}

/* ~ General sibling combinator */
.search-box:not(:valid) ~ .close-icon,
.search-box:invalid ~ .close-icon {
	display: none;
}
/*
.search-box::-ms-clear:invalid ~ .close-icon,
.search-box::-ms-clear:invalid ~ .close-icon:after {
    display: none !important;
}
*/

/*
input[type=text]::-ms-clear ~ .close-icon {
    display: none;
}
*/


/*
:not(:valid) ~ .close-icon,
:invalid ~ .close-icon,

::-ms-clear ~ .close-icon,
::-ms-reveal ~ .close-icon,

::-ms-clear ~ .close-icon:after,
:not(:valid) ~ .close-icon

{
	display: none;
}
*/

/* toggle grid and list views */
/* See main.js */
#change-layout {
    font-family:'FontAwesome';
    text-transform: uppercase;
    color: #333;
    font-weight: 100;

    cursor: pointer;
}
#change-layout:before {
    font-family: 'FontAwesome';
    color: #999;
    position: relative;
/*     left: -10px; */
    margin-right: .5em;

    /* keep the text of varied length evenly spaced from the icon */
    display: inline-block;
    min-width: 15px;
}
#change-layout.toggle-icon:before/*
,
#change-layout.grid-view-icon:before
*/ {
    /* show grid icon */
    content: "\f00a"; /* Grid Icon http://fortawesome.github.io/Font-Awesome/icon/th/   <i class="fa fa-th"></i> */
}
#change-layout.list-view-icon:before {
    /* start - show list icon */
    content: "\f0c9" !important; /* List Icon http://fortawesome.github.io/Font-Awesome/icon/bars/ */
}
#change-layout span {
  visibility: hidden;
}


/* mixItUp */

.fail-message {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.fail .fail-message{
  opacity: 1;
  pointer-events: all;
}

.fail-message:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.fail-message span{
  display: inline-block;
  font-weight: 100; /* 500; */
/*   color: white; */
/*   font-size: 16px; */
  vertical-align: middle;
}


.more-info.more-info-nav {
  position: absolute;
  bottom: -44px;
  right: 132px;
  font-size: .9em;
  color: #A6A6A6;
  line-height: 30px; /* to match button height */
}