.slideContainer {
    margin: 0 auto;
    position: relative;
    width: 100%;
    height: 0;
    max-width: 980px;
    /* 33% being the ratio we are maintaining 
	    * calculated by looking at the image 
	    * ratio: 320/900 = ~0.33 */
    
    padding: 0 0 40% 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 */
		overflow:hidden;
		position:relative;
   	    height: 420px;
}
/* slider */

.iosSlider .slider {
    /* required */
    position: relative;
    width: 100%;

	
}
/* slide */

.iosSlider .slider .slide {
    /* required */
    float:left;
    width: 100%;
    position: relative;
    height: 100%;
}

.iosSlider .slider .slide div {
    width: 45%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 2em 0 0 0;
}
.iosSlider .slider .slide div+div { margin-top: 0}
.iosSlider .slider .slide img {
    border: 5px solid #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    height: auto;
    margin: 0 auto 2em;
    max-width: 60%;
    width: 60%;
}


.iosSlider .slider .slide .title {
    text-align: left;
    width: 100%;
    display: block;
    margin-bottom: 2em;
}

.iosSlider .slider .slide .title h3 {
    font-family: "adelle", serif;
    font-style: normal;
    font-weight: 400;
    color: #eb612a;
    font-size: 1.7em;
}

.iosSlider .slider .slide .title span {
    margin-bottom:0;
    font-size: 1.2em;
    display: block;
    color: #666666
}

.iosSlider .slider .slide .body {
    width: 100%;
    text-align: left;
    display:block;
    vertical-align: top;
    margin:0;
}

.iosSlider .slider .slide .body  p { text-align:left; margin-top: 2em; color: #666666}

.iosSlider .slider .slide .body span {
    color: #fff;
    font: normal 26px "minerva-modern", Baskerville, Palatino, "Times New Roman", serif;
    display: block;
}

.iosSlider .slider .slide .body span + span {
    line-height: 13px;
    margin-top: 6px;
}

.iosSlider .slider .slide .body span a {
    color: #fff;
    font: italic 13px Arial, Helvetica, sans-serif;
    font-weight: normal;
}

.iosSlider .slider .slide .body span a:hover {
    color: #959595;
    text-decoration: underline;
}

.iosSlider .slider .slide .on {
    opacity: 1;
    filter: alpha(opacity: 100);
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
}

#rotatorContainer > div {
    margin: 0 auto;
    max-width: 980px;
    position: relative;
    width: 100%;
}

.leftArrow, .rightArrow  {background-position: left top; background-repeat:no-repeat; background-size:50px 50px;width:50px; height:50px; display:block; position:absolute;top:38%; }
.leftArrow {background-image:url(/images/left-arrow@2x.png); left:0}
.rightArrow {background-image:url(/images/right-arrow@2x.png);right:0}
.leftArrow:hover, .rightArrow:hover { opacity:.5}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .slideContainer .slideSelectors .item {
        background-image: url(../../images/home/rotator-images/btn_off@2x.png);
    }
    .slideContainer .slideSelectors .selected {
        background-image: url(../../images/home/rotator-images/btn_on@2x.png);
    }