.slideContainer {
	margin:0 auto;
	position: relative;
	width: 100%;
	height: 0;

	/* 33% being the ratio we are maintaining
	    * calculated by looking at the image
	    * ratio: 320/900 = ~0.33 */
	padding: 0 0 calc(33.95% + 4em) 0;

}

.HLicon {
    background: url(/images/HLcircle.png) no-repeat center bottom; background-size: contain; height: 4em; width: 8em; position: absolute; left: 50%; bottom: 4em; z-index: 2;margin-left: -4em;
}

.rotatorRibbon {
    width: 100%;height:4em;bottom:0;z-index: 2;background: #490e67;position: absolute;
}

.iosSlider {
	width: 100%;
    background: #490e67;

	/* this height ends up being your maximum height,
	    * if you want it to scale forever, set it to
	    * a very high number */
	height: 5450px;
}

/* slider */
.iosSlider .slider {
	/* required */
	width: 100%;
	height: 100%;
}

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

}
.iosSlider .slider .slide img {
	width: 100%;
	height: auto;
}

.mask {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	max-width:980px;
	height:0;
    padding: 0 0 24.5% 0;
	background:url(../../images/home/rotator-images/mask.png) no-repeat 0 0;
}

.iosSlider .slider .slide .title {
	position: absolute;
	top: 30px;
	right: 100px;
	background: #000;
	z-index:1;
	opacity: 0;
	filter: alpha(opacity:0);
}
.iosSlider .slider .slide .title span {
	color: #fff;
	font: bold 50px/60px "Helvetica Neue",Helvetica,Arial,sans-serif;
	padding: 0 8px;
}
.iosSlider .slider .slide .body {
	position: relative;
	z-index:1;
	opacity: 0;
	filter: alpha(opacity:0);
    text-align: center;
    height:3.7em;
    padding: 0 1rem;
    float:left;
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;

}

.iosSlider .slider .slide .body span {
	color: #fff;
	display:block;
    width: 100%;
    max-width: 35em;
    margin: 0 auto;
    line-height: 1.25rem;

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

/* slide selectors */
.slideContainer .slideSelectors {
	position: relative;
	margin: 7px auto 0;
	z-index: 1;
	text-align:center;
	width:auto;
}

.slideContainer .slideSelectors .item {
	width: 14px;
	height: 14px;
	background:url(../../images/home/rotator-images/btn_off.png) no-repeat 0 0;
	background-size:14px 14px;
	margin: 0 0 0 4px;
	display:inline-block;
}
.slideContainer .slideSelectors .item:first-child {
		margin-left:0;
}
.slideContainer .slideSelectors .selected {
	background:url(../../images/home/rotator-images/btn_on.png) no-repeat 0 0;
	background-size:14px 14px;
}

.awarenessRibbon {
    background: url(/images/ribbon-black.svg) no-repeat 0 0 / cover;
    bottom: 1em;
    height: 118px;
    right: 1em;
    position: absolute;
    width: 83px;
    z-index: 10;
}

#rotatorContainer > div {margin: 0 auto;max-width:980px;position:relative;width:100%;}
@media screen and (max-width:35em) {
        .iosSlider .slider .slide .body { font-size: 2.5vw}
}

@media screen and (max-width:749px) {
    .slideContainer, .rotatorContainer{font-size: 0em}
    .iosSlider {background: #fff;font-size: 0em}
    .iosSlider .slider .slide .body {display: none;font-size: 0em}
    .HLicon {display: none}
    .slideContainer {padding: 0 0 calc(33% + 1.5em) 0; }
    .rotatorRibbon {display: none}
.awarenessRibbon {
    bottom: 16px;
    height: 57px;
    right: 16px;
    width: 40px;
    }
}


@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);
}
}