input[type="radio"]{
	display:none;
}

#wrap{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0px 0px;
	margin: 0px;
	overflow-y: auto;
	overflow-x: hidden;
    background-color: var(--color01);	
}

#wrap .slide{
	position: relative;
	display: flex;
	width: 100%;
	height: 95vh;
    height: 95lvh;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	color:white;
	transition:all 0.3s;
	padding:0px 3%;
    margin: 0px 0px;
    box-sizing: border-box;
	flex-direction: column;
	z-index: 555;
}

#wrap .slide:nth-of-type(1){
    background-color: var(--mainColor4);
    background-image: linear-gradient(137deg,rgba(50,50,50,1.00) 10.53%, rgba(88,88,88,0.54) 31.60%,rgba(104,89,0,0.45) 72.08%,rgba(26,26,26,1.00) 93.18%), url("ravintoloille/kuvat/bgr-all.jpg");
    background-size: cover;
    background-position: center;
    clip-path: ellipse( 90% 60% at 50% 40% );
}

#wrap .slide:nth-of-type(3){ 
	background-color: var(--mainColor8);
}
#wrap .slide:nth-of-type(4){ 
	background-color: var(--mainColor7);
}
#wrap .slide:nth-of-type(5){ 
	background-color: var(--mainColor6);
}
#wrap .slide:nth-of-type(6){ 
	background-color: var(--mainColor1);
}

#wrap .slide div{
    display: flex;
    width:80%;
    max-width: 800px;
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#wrap .slide div h3{
    width: 100%;
    min-width: 100%;
    height: auto;
    line-height: normal;
    text-align:center;
    font-size:min(11vw, 50px);
    font-weight: 900;
}

#wrap .slide div p {
    width: 100%;
    min-width: 100%;
    height: auto;
    text-align: center;
	font-size: min(4vw, 22px);
    font-weight: 300;
    line-height: min(7vw, 40px);
}

#wrap .slide div ul {
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
}

#wrap .slide ul li.slot {
	display: inline-block;
	width:320px;
	height:auto;
	padding:0;
	vertical-align: top;
	margin:0;
	border:1px solid red;
}

#wrap .slide ul li.slot h3 {
	font-size: 22px;
	font-weight: 800;
	padding:0;
	margin:0;
}

#wrap .slide ul li.slot p {
	padding:0;
	margin:0;
}

#wrap .slide .sli01_cont {
	display: flex;
	width:100%;
	height:auto;
	margin: 0px;
	padding: 0px 0%;
	box-sizing: border-box;
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

#wrap .slide .sli01_cont h3 { 
	font-size:2.6rem;
	line-height: 2.62rem;
	font-weight: 800;
	text-transform: capitalize;
	color: var(--mainColor3);
	margin:2px 0px;
	padding: 0;
}

#wrap .slide div h5 { 
	font-size:0.8rem;
	font-weight: 300;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--mainColor2);
	margin:0px 0px 20px 0px;
	padding: 0;
}

#wrap .slide div input[type="text"],
#wrap .slide div input[type="number"] { 
	display: block;
    position: relative;
	width:85%;
	max-width: 380px;
	height:60px;
	line-height: 60px;
	font-size: min(17px, 4rem);
    background-color:rgba(192,192,192,0.8);
    box-shadow: inset 0px -25px 10px rgba(223,223,223,0.90);
	border-radius: 35px;
	border:0;
    color:white;
	outline: none;
	text-align: center;
	padding: 0px 20px;
	margin:15px auto;
    transition:all 0.5s;
	box-sizing: border-box;
}

#wrap .slide div input[type="text"]::placeholder,
#wrap .slide div input[type="number"]::placeholder { 
    color:var(--mainColor4);
    letter-spacing: 1px;
    font-weight: 300;
}


#wrap .slide div input[type="text"]:focus,
#wrap .slide div input[type="number"]:focus, 
#wrap .slide div input[type="text"]:hover,
#wrap .slide div input[type="number"]:hover { 
    color:var(--mainColor1);
	background-color:rgba(244,244,244,0.85);
}

#wrap .slide div input[type="text"]:required:valid,
#wrap .slide div input[type="number"]:required:valid {
    background-color:rgba(41,41,41,1.00);
    color: var(--color03);
}

#wrap #bot.slide{
	display: flex;
	width: 100%;
	height:auto;
	background-color: var(--color02);
	background-image: none;
	padding: 25px 5%;
	flex-direction: row;
	box-sizing: border-box;	
	justify-content: flex-start;
	align-items: start;
}

#wrap #bot.slide .piece {
	width:100%;
	max-width: 320px;
	height:auto;
	text-align: left;
}

#wrap #bot.slide .piece h3{
	width: 100%;
	font-size:1.5rem;
	line-height: 1.5rem;
	font-weight: 600;
    text-align: left;
    margin:0.5rem;
	transform: scale(1.0);
}

#wrap #bot.slide .piece p {
	width:100%;
	font-size:1.0rem;
	line-height: 1.40rem;
	color: var(--color04);
	font-weight: 300;
    text-align: left;
	transform: scale(1.0);
}

#wrap #bot.slide .piece p a { text-decoration: none; color:inherit; }