<style>
#hero {
    background: url(../img/roan_mtn.jpg) no-repeat center center;
    width: 100%;
    height: 100vh;
    background-size: cover;
}
@media (max-width: 1024px) {
    p.hero-text { font-size: 18px !important; }
}
@media (max-width: 895px) {
    p.hero-text { font-size: 16px !important; }
}
@media (max-width: 730px) {
    p.hero-text { font-size: 24px !important; }
    p.hero-text span.supplemental { display: none; }
}
@media (max-width: 792px) {
    #hero {
    	position: relative;
	top: 0;
	z-index: auto;
    }
}
@media (min-width: 320px) {
    #hero {
	background: url(../img/roan_mtn-320.jpg) no-repeat center center;
	background-size: cover;
    }
    @media (min-width: 320px) and (-webkit-min-device-pixel-ratio: 1.25),
	   (min-width: 320px) and (min-device-pixel-ratio: 1.25),
	   (min-width: 320px) and (min-resolution 200dpi),
	   (min-width: 320px) and (min-resolution 1.25dppx) {
	#hero {
	    background: url(../img/roan_mtn-320@2x.jpg) no-repeat center center;
	    background-size: cover;
	}
    }
}
@media (min-width: 480px) {
    #hero {
	background: url(../img/roan_mtn-480.jpg) no-repeat center center;
	background-size: cover;
    }
    @media (min-width: 480px) and (-webkit-min-device-pixel-ratio: 1.25),
	   (min-width: 480px) and (min-device-pixel-ratio: 1.25),
	   (min-width: 480px) and (min-resolution 200dpi),
	   (min-width: 480px) and (min-resolution 1.25dppx) {
	#hero {
	    background: url(../img/roan_mtn-480@2x.jpg) no-repeat center center;
	    background-size: cover;
	}
    }
}
@media (min-width: 768px) {
    #hero {
	background: url(../img/roan_mtn-768.jpg) no-repeat center center;
	background-size: cover;
    }
    @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.25),
	   (min-width: 768px) and (min-device-pixel-ratio: 1.25),
	   (min-width: 768px) and (min-resolution 200dpi),
	   (min-width: 768px) and (min-resolution 1.25dppx) {
	#hero {
	    background: url(../img/roan_mtn-768@2x.jpg) no-repeat center center;
	    background-size: cover;
	}
    }
}
@media (min-width: 992px) {
    #hero {
	background: url(../img/roan_mtn-992.jpg) no-repeat center center;
	background-size: cover;
    }
    @media (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.25),
	   (min-width: 992px) and (min-device-pixel-ratio: 1.25),
	   (min-width: 992px) and (min-resolution 200dpi),
	   (min-width: 992px) and (min-resolution 1.25dppx) {
	#hero {
	    background: url(../img/roan_mtn-992@2x.jpg) no-repeat center center;
	    background-size: cover;
	}
    }
}
@media (min-width: 1200px) {
    #hero {
	background: url(../img/roan_mtn-1200.jpg) no-repeat center center;
	background-size: cover;
    }
    @media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.25),
	   (min-width: 1200px) and (min-device-pixel-ratio: 1.25),
	   (min-width: 1200px) and (min-resolution 200dpi),
	   (min-width: 1200px) and (min-resolution 1.25dppx) {
	#hero {
	    background: url(../img/roan_mtn-1200@2x.jpg) no-repeat center center;
	    background-size: cover;
	}
    }
}
</style>
