.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 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 */
	height: 40%;
}
/* slider */
.iosSlider .slider {
	/* required */
	width: 100%;
	height: 100%;
}

/* slide */
.iosSlider .slider .slide {
	/* required */
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	z-index:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	background-size: cover;
	background-position: center;
	background-repeat:no-repeat
}

.iosSlider .slider .slide.on {
	opacity:1;
	z-index:1;
}

#rotator {width:100%; height: auto; float: left; clear:both; background:#0f0f11}
#rotator .welcome {z-index:2; position: absolute; top:50%; width:auto; transform: translateY(-50%); -webkit-transform: translateY(-50%)}
#rotator .bottles {z-index:3; width: 32em; height: 100%; position: absolute; left:0; background: url(/images/home/bottles.png) no-repeat center / contain}
#rotator .welcome div {display: inline-block; padding: 1em 2em 1.5em 32em; background: rgba(0,0,0,0.6)}
#rotator .welcome h1 {font-size: 4.125em; display: inline-block; color:#febb21; font-style: normal; margin-bottom: 0}
#rotator .welcome h2 {font-size: 2.25em; display: inline-block; color:#fff; text-transform: uppercase; margin:0}
#rotator .welcome .button {margin: 1.75em 0 0 40%; padding: 0.75em 1.75em}
    #rotator .bottles {width:38%}
    #rotator .welcome div {padding-left: 40%;}
    #rotator .welcome h1 {font-size: 4.75vw}
    #rotator .welcome h2 {font-size: 2.75vw}

@media screen and (max-width:1030px) {
    #rotator .bottles {width:30%}
    #rotator .welcome {width: 100%}
    #rotator .welcome div {padding-left: 30%; width: 100%}
    #rotator .welcome h1 {font-size: 5vw}
    #rotator .welcome h2 {font-size: 2.5vw}
	#rotator .welcome .button {margin-left: 30%}
}

@media screen and (max-width:750px) {
	.slideContainer {height: auto; padding:0}
	.iosSlider {display: none}
	#rotator {background:#febb21; overflow: auto}
	#rotator .bottles {position: relative; float:left; clear: both; left:auto; width:100%; margin-top:1em; height: 38vh;}
	#rotator .welcome {width:100%; float: none; text-align: center; padding: 0.25em 1em 1em; background:#febb21; position: relative;width: auto;clear: both; transform: none; top:auto}
	#rotator .welcome div {background:none; padding:0}
	#rotator .welcome h1 {font-size: 2em; padding:0; color:#000; margin-top:0.5em}
	#rotator .welcome h2 {font-size: 1em; padding:1em; border-top: 1px solid rgba(0,0,0,0.25); border-bottom:1px solid rgba(0,0,0,0.25); color:#000; font-style: italic; margin-top:0.5em; background: #febb21}
	#rotator .welcome .button {margin:1em auto;}
}