:root   {
    --specialSize: 25vw;
    --specialHalf: calc(var(--specialSize) / 2);
}

#specialsTop	{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 12vh;
	width: 95vw;
	margin: auto;
	background-color: #a63865;
	color: white;
	font-size: 4vh;
	text-align: center;
}

#specials	{
	display: block;
	width: 95vw;
	height: 45vh;
	margin: auto;
	position: relative;

	box-shadow: 0 0 5vw #eeeeee inset;
    background-size: cover;
}

#specialSlider  {
    display: flex;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#specialSlider li   {
	max-width: 40vh;				/* Width of #specials is 45vh */
    width: var(--specialSize);
    padding-top: var(--specialSize);

    position: absolute;
    margin-left: calc(var(--specialHalf) * -1);
    transition-duration: 1s;
    list-style-type: none;

    box-sizing: border-box;
    background-size: contain;
}

#specialSlider * img	{
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.prev   {
    transform: translateX(calc((var(--specialSize) * -1) - calc(var(--specialSize) * 0.2)));
    opacity: 0.8;
}

.next   {
    transform: translateX(calc((var(--specialSize)) + calc(var(--specialSize) * 0.2)));
    opacity: 0.8;
}

.hide   {
    transform: translateX(calc(var(--specialSize) * -2.5));
    opacity: 0;
}

.nextnext   {
    transform: translateX(calc(var(--specialSize) * 2.5));
    opacity: 0;
}





.ssControl	{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	height: 15vh;
	width: 15vh;
	background-color: #ddddddaa;
	border-radius: 20px;
	top: 50%;
	font-size: 6vw;
	cursor: pointer;
	transition-duration: 0.1s;
}
.ssControl:hover	{
	background-color: #eeeeeeaa;
}
.ssControl:active	{
	background-color: #ccccccaa;
}

#controlLeft	{
	left: 0;
	transform: translateY(-50%);
}
#controlRight	{
	right: 0;
	transform: translateY(-50%);
}





#specialsCat	{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 45vh;
	width: 100vw;
	background-color: #00CC89;
	color: black;
	margin-top: 15vh;
	margin-bottom: 10vh;
	padding: 0 0 0 10vw;
}

#specialsCat img	{
	height: 100%;
}


#specialsCat div	{
	display: block;
	height: 100%;
	padding: 5vw 10vw 5vw 10vw;
	color: white;
}

#specialsCat div p{font-size: 20px;}

#specialsCat div a	{
	display: block;
	text-align: center;
	font-size: 3vh;
	padding: 3vh;
	width: fit-content;
	background-color: #a63865;
	color: white;
	border-radius: 40px;
	text-decoration: none;
	transition-duration: 0.1s;
}
#specialsCat div a:hover	{
	background-color: #841643;
}