﻿.sliderContainer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
}

.iosSlider {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.iosSlider .slider {
	width: 100%;
	height: 100%;

}
/*
.iosSlider .slider .sliderImage
{filter: grayscale(100%);}*/

.iosSlider .slide {
	width: 100%;
	height: 100%;
    top: 0;

}

.iosSlider .slideImage {background-size: contain; background-repeat: no-repeat; background-position: center top; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0;}
.wrapPortfolioDetails .iosSlider .slideImage {background-position: center bottom;}

.iosSlider .slideImage.horizTranslate

{
    -webkit-animation-name: kenburns;
animation-name: kenburns;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-duration: 100s;
animation-duration: 100s;
opacity: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-animation-name: kenburns-1;
animation-name: kenburns-1;
z-index: 3}

@-webkit-keyframes kenburns-1 {

0% {-webkit-transform: scale(1); transform: scale(1);}
50% {-webkit-transform: scale(1.2); transform: scale(1.2);}
100% {-webkit-transform: scale(1.21176); transform: scale(1.21176);}

}

@keyframes kenburns-1 {

0% {-webkit-transform: scale(1); transform: scale(1);}
50% {-webkit-transform: scale(1.2); transform: scale(1.2);}
100% {-webkit-transform: scale(1.21176); transform: scale(1.21176);}

}

.iosSlider .slider .item {
	float: left;
	width: 100%;
	height: 100%;
}

@media only screen
and (max-width: 767px) {

.iosSlider .slideImage {width: 100%; height: 100%;}

}

/*PORTFOLIO DETAIL PAGE*/

.wrapPortfolioDetails .sliderContainer {height: 315px; position: relative;}

.wrapPortfolioDetails .sliderContainer .slide {width: 33.3%;}
.wrapPortfolioDetails .sliderContainer .slide.oneSlide {width: 100%;}

.wrapPortfolioDetails .sliderContainer {margin-bottom: .5em;}



/*PORTFOLIO DETAIL PAGE MODAL*/

#modal .sliderContainer .slide {width: 100%; text-align: center;}

#modal .sliderContainer .slideImage {width: 70%; margin: 0 15%; background-size: contain!important; background-repeat: no-repeat; background-position: center center;}



/* 440 and below */

@media only screen
and (max-width: 440px) {

#modal .sliderContainer .slideImage {width: 96%; margin: 0 2%}
}


/* 1024 and below and landscape */

@media only screen
and (max-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape)  {

#modal .sliderContainer .slideImage {width: 96%; margin: 0 2%}
#modal .sliderContainer .slideImage {background-position: center top;}

}
