.infoPanelWrapper{
	width: 6.875rem;
	height: 6.875rem;
	position: fixed;
	bottom: 3.125rem;
	left: 6.152rem;
	transition: width .2s ease-in-out;
    -webkit-transition: width .2s ease-in-out;
}

.infoPanelWrapper:hover {
	width: 18rem;
}

/* > div:not(.infoPanelLeftSide) */

.infoPanelLeftSide {
	pointer-events: none;
}



.infoPanelWrapper:hover div.infoPanelTextSide{
	width: 10.625rem;
}

.infoPanelLeftSide{
	width: 1.875rem;
	height: 7.0625rem;
	float: left;
	background: url("https://tundhpro.de/assets/info_Pfeil_linker_Teil.svg") no-repeat top right;
	background-size: contain;
}

.infoPanelMiddleSide{
	border-top: 0.0625rem solid #999999;
	border-bottom: 0.0625rem solid #999999;
	width: 1.875rem;
	height: 5.5rem;
	margin-left: -0.125rem;
	margin-right: -0.125rem;
	float: left;
	position: relative;
	z-index: 200;
	background-color: #CACACA;
}

.infoPanelMiddleSide > .infoPic {
	width: 1.875rem;
	height: 3.75rem;
	margin-top: 0.75rem;
	background: url("https://tundhpro.de/assets/info_i.svg") no-repeat top left;
	background-size: 100% 100%;
}

.infoPanelTextSide{
	color: #fff;
	background-color: #CACACA;
	border-top: 0.0625rem solid #999999;
	border-bottom: 0.0625rem solid #999999;
	width: 0rem;
	height: 5.5rem;
	margin-right: -0.125rem;
	float: left;
	overflow: hidden;
	position: relative;
	z-index: 99;
	transition: width .2s ease-in-out;
    -webkit-transition: width .2s ease-in-out;
    cursor: pointer;
}

.infoPanelTextSide > p{
	margin-left: 1.5rem;
	margin-top: 1.75rem;
	width: 10.625rem;
	height: 5.5rem;
}

.infoPanelRightSide{
	width: 3.2rem;
	height: 5.5rem;
	float: left;
	background: url("https://tundhpro.de/assets/info_Pfeil_rechter_Teil.svg") no-repeat top left;
	background-size: 100% 100%;
	z-index: 10;
}

.infoProducts {
    display: none;
    background: grey;
    background: linear-gradient(to top right, white, gray);
    width: 80vh;
    height: 80vh;
    position: relative;
    left: 15rem;
    bottom: 66vh;
    z-index: -10;
}



@media screen and (max-height: 41rem), all and (orientation: portrait){
	.infoPanelWrapper{
		width: 5.3125rem;
		height: 5rem;
		position: fixed;
		bottom: 1.25rem;
		left: 1.25rem;
	}

	.infoPanelLeftSide{
		width: 2.5rem;
		height: 5rem;
		background: none;
		background-color: #CACACA;
		border-top: 0.0625rem solid #999999;
		border-left: 0.0625rem solid #999999;
		border-bottom: 0.0625rem solid #999999;
		border-radius: 2.5rem 0 0 2.5rem;
	}

	.infoPanelMiddleSide{
		width: 1.875rem;
		height: 5rem;
		margin-left: -2.5rem;
		position: relative;
		z-index: 100;
		border: 0;
		background-color: transparent;
	}

	.infoPanelMiddleSide > div{
		width: 1.5625rem;
		height: 3.125rem;
		margin-left: 1.75rem;
		margin-top: 0.9375rem;
	}

	.infoPanelTextSide{
		height: 5rem;
	}

	.infoPanelTextSide > p{
		margin-left: 1.5625rem;
		margin-top: 1.4375rem;
	}

	.infoPanelRightSide{
		width: 2.5rem;
		height: 5rem;
		background: none;
		background-color: #CACACA;
		border-top: 0.0625rem solid #999999;
		border-right: 0.0625rem solid #999999;
		border-bottom: 0.0625rem solid #999999;
		border-radius: 0 2.5rem 2.5rem 0;
	}
}

@media screen and (max-width: 1050px) {
	.infoProducts {
	    left: 10vw;
	}
}

@media screen and (orientation: portrait){

	.infoProducts {
	    width: 80vw;
	    height: 80vw;
	    bottom: 72vh;
	}
}