.container {
	/* defaults for resposive height container */
	position: relative;
	width: 100%;
	height: 0;
	
	/* 39% being the ratio we are maintaining 
	 * calculated by looking at the image 
	 * ratio: 400/1024 = ~0.39 */
	padding: 0 0 25% 0;
}

.iosSlider {
	width: 100%;
	
	/* this height ends up being your maximum height, 
	 * if you want it to scale forever, set it to 
	 * a very high number */
	height: 1500px;
}

.iosSlider .slider {
	width: 100%;
	height: 100%;
}

.iosSlider .slider .item {
	float: left;
	height: 100%;
	width: 100%;
}

.iosSlider .slider .item .photo {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid #848484;
    float: left;
	height: 85%;
    max-height: 400px;
    margin-left: 10%;
    margin-top: 1em;
	width: 14%;
}

/* controls */
.container .prevContainer, .container .nextContainer {
	position: absolute;
	top: 0;
	padding: 0 5%;
	height: 100%;
	z-index: 10;
}
.container .prevContainer {left:0;}
.container .nextContainer {right:0;}
.container .prevContainer .prev, .container .nextContainer .next {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 20%;
	transform: traslateY(-50%);
	-webkit-transform: traslateY(-50%);
}


.iosSlider .desc {float: left; margin-top: 1em; padding-left: 4%; text-align: left; width: 60%;}
.iosSlider .desc h3 {color:#cb0101; font-size: 1.13333em; margin-bottom: 6px;}
.iosSlider .desc .location {font-size:.9em; font-style: italic; line-height: 1.3em;}
.iosSlider .desc p {line-height: 1.6em; margin-bottom: 12px;}
.iosSlider .desc a {font-size: .9em; font-style: italic; font-weight: bold;}
.prev, .next {color: #999; display:block; font-size: 10em; position:absolute; top: 50%; z-index:500; opacity:0.5; filter:alpha(opacity=50);}
.prev:hover, .next:hover {color: #660000;}
.prev:before, .next:before {font-family: FontAwesome;}
.prev:before {content:"\f104"; left:0;}
.next:before {content:"\f105"; right:0;}

@media screen and (max-width:1200px) {
    .container {padding-bottom: 35%}
    .iosSlider .slider .item .photo {height: 75%; width: 16%;}
}

@media screen and (max-width:900px) {
    .desc p {font-size: .875em; line-height: 1.3em;}
    .prev, .next {font-size: 5em;}
    .container {padding-bottom: 40%}
    .iosSlider .slider .item .photo {height: 75%; width: 16%;}
}

@media screen and (max-width:750px) {
    .prevContainer, .nextContainer {display: none;}
    .desc p:not(.location) {display: none;}
}

@media screen and (max-width:500px) {
    #successStories {padding: 40px 0;}
    #successStories > .wrap {border-bottom: none; border-top: none; padding: 1em 0;}
    .container {padding-bottom: 130%;}
    .iosSlider .slider .item .photo {background-position: center top; max-height: 400px; width: 80%;}
    .iosSlider .desc {margin-left: 10%; padding: 0; width:100%;}
    .item {padding: 0;}
    .item + .item {border-top: none;}
    #successStories .title, #successStories .more {background: none;}
}

@media screen and (max-width:400px) {
    .container {padding-bottom: 150%;}
    .iosSlider .slider .item .photo {max-height: 300px;}
}