@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap'); /*(font-family: 'Permanent Marker', cursive;)*/

*{
	box-sizing: border-box;
}

body .icbody{
	font-family: 'Permanent Marker', cursive;
	height: 100vh;

	display: flex;
	justify-content: center;
	align-items: center;

	margin: 0;
	overflow: hidden;
}

.iccontainer{
	display: flex;
	width: 80vw;
}

.iccontainer .panel{
	background-size: cover;
	/*background-size: 100%;*/
	background-repeat: no-repeat;
	background-position: center;
	height: 80vh;
	border-radius: 15px;
	cursor: pointer;
	color: #fff;
	margin: 5px;
	position: relative;

	flex: 0.5;

	transition: flex 1s ease-in;
	overflow: hidden;
}

.panel h3{
	font-size: 1.5rem;

	position: absolute;
	bottom: 20px;
	left: 40px;

	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	/*display: inline;*/

	/*white-space: nowrap;*/

	/*opacity: 0;*/
}
.panel.active{
	flex: 5;
}

.panel.active h3{
	opacity: 1;
}






.panel h3{
    color: #000000;
    background: rgba(244, 195, 32, 0.8);
    padding: 0.5em;
    transform: rotate(-90deg);
    transform-origin: 0% 0%;
    transition: all 0.5s ease-in-out;
    min-width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.5em;
    /*white-space: nowrap;*/
    border-radius: 0px 0px 15px 15px;
}



.panel.active h3{
    text-align: center;
    top: calc(100% - 1.7em);
    color: white;
    background: rgba(0, 0, 0, 0.8);
    font-size: 2em;
    transform: rotate(0deg) skew(-5deg);
    padding: 0px;
    margin: 0px;
    line-height: 1.7em;
    border-radius: 0px 0px 15px 15px;
}


@media (max-width:500px) {
	.iccontainer{
		width: 100vw;
	}

	/*.panel:nth-of-type(4),.panel:nth-of-type(5){
		display: none;
	}*/

	.panel h3{
		font-size: 1em;
		white-space: nowrap;
	}
	.panel.active h3{
		font-size: 1.5em;
	}
}