#promo {
    background-color: #e3000f;
    position: absolute;
    top: 5em;
    right: 10%;
    width: 25%;
    padding: 0;
    color: white;
    /* height: 25%; */
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
    z-index: 1000;
	padding: 0 0.5em 0.5em 0;
	padding: 1em;
}


#promo h3 {
	margin: 1em 0 0 0;
	margin: 0 0 0 0;
}
#promo p {
    width: 50%;
    width: 100%;
    float: left;
    /* color: white; */
    margin: 0;
    padding: 1em 0.5em 0 0;
    /* padding: 1em; */
}
#promo a {
    color: #ffffff;
}

#promo img {
    width: 50%;
    float: left;
}

#promo-hidden {
	width: 100%;
	clear: both;
	padding: 0.5em 1em 0 1.5em;
	display: none;
}

#suite-1,
main.suite-1,
#suite-2,
main.suite-2,
#suite-3,
main.suite-3,
#suite-4,
main.suite-4,
#suite-5,
main.suite-5,
#suite-2:target ~ #suite-1,
#suite-3:target ~ #suite-1,
#suite-4:target ~ #suite-1,
#suite-5:target ~ #suite-1,
#suite-2:target ~ main.suite-1,
#suite-3:target ~ main.suite-1,
#suite-4:target ~ main.suite-1,
#suite-5:target ~ main.suite-1 {
    display: none;
}

#suite-1,
main.suite-1 {
	display: block;
}

#suite-1:target,
#suite-1:target ~ main.suite-1,
#suite-2:target,
#suite-2:target ~ main.suite-2,
#suite-3:target,
#suite-3:target ~ main.suite-3,
#suite-4:target,
#suite-4:target ~ main.suite-4,
#suite-5:target,
#suite-5:target ~ main.suite-5 {
    display: block;
}

#suite-1:target ~ #float-menu .suite-1,
#suite-2:target ~ #float-menu .suite-2,
#suite-3:target ~ #float-menu .suite-3,
#suite-4:target ~ #float-menu .suite-4,
#suite-5:target ~ #float-menu .suite-5 {
	color: #ffffff;
	background-color: #e3000f;
	text-shadow: none;
}

@media (max-width: 1600px) {
	#promo {
		width: 30%;
	}
}
@media (max-width: 1280px) {
	#promo {
		width: 40%;
	}
}
@media (max-width: 960px) {
	#promo {
		width: 80%;
		right: 10%;
		top: 10em;
	}
	#promo img {
		width: 40%;
		float: left;
	}
	#promo p {
		width: 60%;
		padding: 1em 0.5em 0 0;
		width: 100%;
		padding: 0;
	}
}