/* -------------------------------- 

Projects Slider

-------------------------------- */
.cd-projects-wrapper {
  /*position: fixed;*/
  z-index: 1;
  top: 0;
  left: 0;
  /*width: 100%;*/
  /*height: 100%;*/
  visibility: hidden;
  /*background-color: #0f1926;*/
  -webkit-transition: visibility 0s 0.5s;
  -moz-transition: visibility 0s 0.5s;
  transition: visibility 0s 0.5s;
}
.cd-projects-wrapper::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
.cd-projects-wrapper.projects-visible {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}
@media only screen and (min-width: 900px) {
  .cd-projects-wrapper::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

.cd-slider {
  padding-top: 10vh;
  height: 100%;
  overflow-y: auto;
}
.projects-visible .cd-slider {
  /* smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
	margin-left: -15px;
}
.cd-slider li {
  opacity: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  -webkit-transition: opacity 0s 0.5s;
  -moz-transition: opacity 0s 0.5s;
  transition: opacity 0s 0.5s;
  /* Force hardware acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  list-style:none;
}
.cd-slider li.slides-in {
  -webkit-transition: opacity 0s 0s;
  -moz-transition: opacity 0s 0s;
  transition: opacity 0s 0s;
  opacity: 1;
  -webkit-animation: cd-translate 0.5s;
  -moz-animation: cd-translate 0.5s;
  animation: cd-translate 0.5s;
}
.cd-slider a {
  display: block;
  height: 100%;
  width: 100%;
}
.cd-slider img {
  display: block;
  width: 100%;
}
@media only screen and (min-width: 900px) {
  .cd-slider {
    padding: 0;
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .cd-slider::after {
    clear: both;
    content: "";
    display: table;
  }
  .cd-slider li {
    position: relative;
    float: left;
    width: 30vw;
    top: 50%;
    -webkit-transform: translateX(400%) translateY(-50%) rotate(-10deg);
    -moz-transform: translateX(400%) translateY(-50%) rotate(-10deg);
    -ms-transform: translateX(400%) translateY(-50%) rotate(-10deg);
    -o-transform: translateX(400%) translateY(-50%) rotate(-10deg);
    transform: translateX(400%) translateY(-50%) rotate(-10deg);
    -webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
    -moz-transition: opacity 0s 0.3s, -moz-transform 0s 0.3s;
    transition: opacity 0s 0.3s, transform 0s 0.3s;
  }
  .cd-slider li.slides-in {
    /* this class is used to trigger the entrance animation */
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .cd-slider li.slides-in:first-of-type {
    /* change transition duration/delay for the entrance animation */
    -webkit-transition: -webkit-transform 0.55s 0s;
    -moz-transition: -moz-transform 0.55s 0s;
    transition: transform 0.55s 0s;
  }
  .cd-slider li.slides-in:nth-of-type(2) {
    -webkit-transition: -webkit-transform 0.53s 0.05s;
    -moz-transition: -moz-transform 0.53s 0.05s;
    transition: transform 0.53s 0.05s;
  }
  .cd-slider li.slides-in:nth-of-type(3) {

    -webkit-transition: -webkit-transform 0.5s 0.1s;
    -moz-transition: -moz-transform 0.5s 0.1s;
    transition: transform 0.5s 0.1s;
  }
  .cd-slider li.slides-in:nth-of-type(4) {
    -webkit-transition: -webkit-transform 0.48s 0.15s;
    -moz-transition: -moz-transform 0.48s 0.15s;
    transition: transform 0.48s 0.15s;
  }
  .cd-slider.next li.current {
    /* next slide animation */
    -webkit-animation: cd-slide-1 0.5s;
    -moz-animation: cd-slide-1 0.5s;
    animation: cd-slide-1 0.5s;
  }
  .cd-slider.next li.current + li {
    -webkit-animation: cd-slide-2 0.5s;
    -moz-animation: cd-slide-2 0.5s;
    animation: cd-slide-2 0.5s;
  }
  .cd-slider.next li.current + li + li {
    -webkit-animation: cd-slide-3 0.5s;
    -moz-animation: cd-slide-3 0.5s;
    animation: cd-slide-3 0.5s;
  }
  .cd-slider.next li.current + li + li + li + li {
    -webkit-animation: cd-slide-4 0.5s;
    -moz-animation: cd-slide-4 0.5s;
    animation: cd-slide-4 0.5s;
  }
  .cd-slider.next li.current + li + li + li + li + li {
    -webkit-animation: cd-slide-5 0.5s;
    -moz-animation: cd-slide-5 0.5s;
    animation: cd-slide-5 0.5s;
  }
  .cd-slider.next li.current + li + li + li + li + li ~ li {
    -webkit-animation: cd-slide-6 0.5s;
    -moz-animation: cd-slide-6 0.5s;
    animation: cd-slide-6 0.5s;
  }
  .cd-slider.prev li {
    /* previous slide animation */
    -webkit-animation: cd-slide-7 0.5s;
    -moz-animation: cd-slide-7 0.5s;
    animation: cd-slide-7 0.5s;
  }
  .cd-slider.prev li.previous {
    /* previous slide animation - the previous class is used to target the slide which was visible right before the current one */
    -webkit-animation: cd-slide-1 0.5s;
    -moz-animation: cd-slide-1 0.5s;
    animation: cd-slide-1 0.5s;
  }
  .cd-slider.prev li.previous + li {
    -webkit-animation: cd-slide-2 0.5s;
    -moz-animation: cd-slide-2 0.5s;
    animation: cd-slide-2 0.5s;
  }
  .cd-slider.prev li.previous + li + li {
    -webkit-animation: cd-slide-3 0.5s;
    -moz-animation: cd-slide-3 0.5s;
    animation: cd-slide-3 0.5s;
  }
  .cd-slider.prev li.current + li {
    -webkit-animation: cd-slide-4 0.5s;
    -moz-animation: cd-slide-4 0.5s;
    animation: cd-slide-4 0.5s;
  }
  .cd-slider.prev li.current + li + li {
    -webkit-animation: cd-slide-5 0.5s;
    -moz-animation: cd-slide-5 0.5s;
    animation: cd-slide-5 0.5s;
  }
  .cd-slider.prev li.current, .cd-slider.prev li.current + li + li ~ li {
    -webkit-animation: none;
    -moz-animation: none;
    animation: none;
  }
}

@-webkit-keyframes cd-slide-1 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-85%);
  }
}
@-moz-keyframes cd-slide-1 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(-85%);
  }
}
@keyframes cd-slide-1 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-85%);
    -moz-transform: translateY(0) translateX(-85%);
    -ms-transform: translateY(0) translateX(-85%);
    -o-transform: translateY(0) translateX(-85%);
    transform: translateY(0) translateX(-85%);
  }
}
@-webkit-keyframes cd-slide-2 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-55%);
  }
}
@-moz-keyframes cd-slide-2 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(-55%);
  }
}
@keyframes cd-slide-2 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-55%);
    -moz-transform: translateY(0) translateX(-55%);
    -ms-transform: translateY(0) translateX(-55%);
    -o-transform: translateY(0) translateX(-55%);
    transform: translateY(0) translateX(-55%);
  }
}
@-webkit-keyframes cd-slide-3 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-23%);
  }
}
@-moz-keyframes cd-slide-3 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(-23%);
  }
}
@keyframes cd-slide-3 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-23%);
    -moz-transform: translateY(0) translateX(-23%);
    -ms-transform: translateY(0) translateX(-23%);
    -o-transform: translateY(0) translateX(-23%);
    transform: translateY(0) translateX(-23%);
  }
}
@-webkit-keyframes cd-slide-4 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(23%);
  }
}
@-moz-keyframes cd-slide-4 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(23%);
  }
}
@keyframes cd-slide-4 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(23%);
    -moz-transform: translateY(0) translateX(23%);
    -ms-transform: translateY(0) translateX(23%);
    -o-transform: translateY(0) translateX(23%);
    transform: translateY(0) translateX(23%);
  }
}
@-webkit-keyframes cd-slide-5 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(55%);
  }
}
@-moz-keyframes cd-slide-5 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(55%);
  }
}
@keyframes cd-slide-5 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(55%);
    -moz-transform: translateY(0) translateX(55%);
    -ms-transform: translateY(0) translateX(55%);
    -o-transform: translateY(0) translateX(55%);
    transform: translateY(0) translateX(55%);
  }
}
@-webkit-keyframes cd-slide-6 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(65%);
  }
}
@-moz-keyframes cd-slide-6 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(65%);
  }
}
@keyframes cd-slide-6 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(65%);
    -moz-transform: translateY(0) translateX(65%);
    -ms-transform: translateY(0) translateX(65%);

    -o-transform: translateY(0) translateX(65%);
    transform: translateY(0) translateX(65%);
  }
}
@-webkit-keyframes cd-slide-7 {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-95%);
  }
}
@-moz-keyframes cd-slide-7 {
  0%, 100% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(0) translateX(-95%);
  }
}
@keyframes cd-slide-7 {
  0%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(0) translateX(-95%);
    -moz-transform: translateY(0) translateX(-95%);
    -ms-transform: translateY(0) translateX(-95%);
    -o-transform: translateY(0) translateX(-95%);
    transform: translateY(0) translateX(-95%);
  }
}
/* -------------------------------- 

Project slider navigation

-------------------------------- */
.cd-slider-navigation {
  display: none;
}
.cd-slider-navigation li {
  list-style:none; }
.cd-slider-navigation a {
  position: absolute;
  top: 40%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  height: 40px;
  width: 40px;
  background: rgba(178,3,55, .6) url(../img/cd-arrow-portfolio.svg) no-repeat center center;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  text-indent:1000px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
  .cd-slider-navigation a:hover,
  .cd-slider-navigation a:focus {
    background: rgba(178,3,55, 1) url(../img/cd-arrow-portfolio.svg) no-repeat center center; }
.cd-slider-navigation a.next {
right: 0px;
    left: auto;
    border-radius: 20px;
	background-size: 15px;
}
.cd-slider-navigation a.prev {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  -o-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
	
	left: 50px;
    border-radius: 20px;
	background-size: 15px;
}
.cd-slider-navigation a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 900px) {
  .cd-slider-navigation {
    display: block;
  }
}

/* -------------------------------- 

Project content panel 

-------------------------------- */
.cd-project-content {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding:3em 0;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0.4s;
  -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0.4s;
  transition: transform 0.4s 0s, visibility 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
  -moz-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
  transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
  .cd-project-content-inner {
    width:90%;
	max-width:1024px;
	margin:auto;
	position:relative; }
	.cd-project-content-inner > div > img {
	  margin-bottom:1em; }
	.cd-project-content-images {
	  margin-bottom:1em; }
	  .cd-project-content-images img {
		max-width:80px;
		display: inline-block;
		-webkit-transition: all .25s ease;
		-moz-transition: all .25s ease;
		-ms-transition: all .25s ease;
		-o-transition: all .25s ease;
		transition: all .25s ease; }
	  .cd-project-content-images img:hover,
	  .cd-project-content-images img:focus {
	    -moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1); }
.cd-project-content.is-visible {
  visibility: visible;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;
  transition: transform 0.4s 0s, visibility 0s 0s;
  -webkit-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
  -moz-transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
  transition-timing-function: cubic-bezier(0.67, 0.15, 0.83, 0.83);
}
.cd-project-content.is-visible > div {
  /* smooth scrolling on iOS */
  -webkit-overflow-scrolling: touch;
}
.cd-project-content .close {
  display: block;
  height: 32px;
  width: 32px;
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/cd-close-dark.svg) no-repeat center center;
  text-indent:1000px;
}

/* -------------------------------- 

Keyframes

-------------------------------- */
@-webkit-keyframes cd-translate {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes cd-translate {
  0% {
    opacity: 0;
    -moz-transform: translateY(100px);
  }
  100% {
    -moz-transform: translateY(0);
    opacity: 1;
  }
}
@keyframes cd-translate {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}