/* DIM KONTAKT */
/* Kontakt-Bereich */

body.dm-kontakt-body1 #dim_kontakt
{

	--kontakt-highlight: #f56a00;
	--kontakt-main: white;
}
body.dm-kontakt-body1 #page { z-index: 99999; }


/* 	DESKTOP
	--------------------------------------------------
*/
@media screen and ( min-width: 980px )
{
	body.dm-kontakt-body1 #dim_kontakt
	{
		position: fixed;
		z-index: 999999995;

		background: none;

		min-height: 120px;
		width: 250px;
		border: none;
		margin: 0;
		padding: 0;

		/* top: calc( 50% - 150px ); */
		right: -250px;
		/*right: 0;*/

		overflow: visible;

		transition: 0.5s;
	}
	body.dm-kontakt-body1 #dim_kontakt
	{
		top: calc( 50% + 150px );
	}


	body.dm-kontakt-body1 #dim_kontakt.expand { right:-30px; }
	body.dm-kontakt-body1 #dim_kontakt > .inner
	{
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}
	body.dm-kontakt-body1 #dim_kontakt .over
	{
		position: absolute;
		left: 0;
		top: 0;
		height: 120px;
		width: 10px;
		background-color: var(--kontakt-highlight);
		z-index: 999999995;
	}
	body.dm-kontakt-body1 #dim_kontakt .image
	{
		position: absolute;
		left: -33px;
		top: 7px;
		height: 75px;
		width: 75px;
		background-color: #ffffff;
		z-index: 999999998;
		border-radius: 37px;
	}
	body.dm-kontakt-body1 #dim_kontakt .image
	{
		/* background-image: url( "../img/dim_logo_70x70.png" );
		background-position: top left;
		background-size: 75px 75px; */
		background-image: url( "/wp-content/uploads/2013/05/youmagnus-fav.png" );
		background-position: 12px 12px;
		background-size: 50px 50px;
		background-repeat: no-repeat;
	}
	body.XXXdm-kontakt-body1 #dim_kontakt.dim_contact_id7220usr .image { background-image: url( "../img/simone_70x70.png" ); }

	body.dm-kontakt-body1 #dim_kontakt .left
	{
		position: absolute;
		top: 0;
		left: -55px;
		width: 55px;
		min-height: 120px;
		background-color: var(--kontakt-highlight);
		border-radius: 10px 0 0 10px;

		z-index: 999999992;

		-webkit-box-shadow: 0px 0px 8px 5px rgba( 150, 150, 150, 0.6 );
		box-shadow: 0px 0px 8px 5px rgba( 150, 150, 150, 0.6 );
	}
	body.dm-kontakt-body1 #dim_kontakt .left:hover { cursor: pointer; }
	body.dm-kontakt-body1 #dim_kontakt .left:hover { cursor: url( "../img/chevron-left-svgrepo-com.svg" ) 55 30, auto; }
	body.dm-kontakt-body1 #dim_kontakt.expand .left:hover { cursor: url( "../img/chevron-right-svgrepo-com.svg" ) 55 30, auto; }
	body.dm-kontakt-body1 #dim_kontakt .left > .inner
	{
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}
	body.dm-kontakt-body1 #dim_kontakt .left .label
	{
		position: absolute;
		top: 50px;
		left: -5px;

		font-size: 20px;
		line-height: 20px;
		font-weight: bold;
		color: var(--kontakt-main);
		transform: rotate( -90deg );
	}
	body.dm-kontakt-body1 #dim_kontakt .right
	{
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 120px;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		background-color: var(--kontakt-highlight);
		border-radius: 0 0 0 10px;

		z-index: 999999991;
	}
	body.dm-kontakt-body1 #dim_kontakt.expand .right
	{
		-webkit-box-shadow: -5px 0px 8px 3px rgba( 150, 150, 150, 0.75 );
		box-shadow: -5px 0px 8px 3px rgba( 150, 150, 150, 0.75 );
	}
} /* DESKTOP ENDE */



	body.dm-kontakt-body1 #dim_kontakt .right > .inner
	{
		position: relative;
		display: block;
		padding: 8px 10px 28px;
		margin: 0;
		border: none;
		background: none;

		color: var(--kontakt-main);
	}
	body.dm-kontakt-body1 #dim_kontakt .right p
	{
		position: relative;
		display: block;
		padding: 20px 0 0;
		margin: 0;
		font-size: 0.95em;
		line-height: 1.2em;
	}
	body.dm-kontakt-body1 #dim_kontakt .right p.margin-bottom5 + p
	{
		padding-top: 5px;
	}
	body.dm-kontakt-body1 #dim_kontakt .right p.fm-icon { padding-left: 35px; }
	body.dm-kontakt-body1 #dim_kontakt .right p.fm-icon > i.fas { position: absolute; top: 22px; left: 0; }

	body.dm-kontakt-body1 #dim_kontakt .right .kontakt-head
	{
		font-size: 1.2em;
		font-weight: bold;
	}
	body.dm-kontakt-body1 #dim_kontakt .right .kontakt-name
	{
		font-size: 1.1em;
		font-weight: bold;
	}
	body.dm-kontakt-body1 #dim_kontakt .right .kontakt-position,
	body.dm-kontakt-body1 #dim_kontakt .right .kontakt-mail
	{
		padding-top: 3px;
	}
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon { text-align: left; }
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon i.fas { margin-right: 10px; }
	body.dm-kontakt-body1 #dim_kontakt .right a.novisible1
	{
		text-decoration: none;
		color: var(--kontakt-main);
	}

	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon
	{
		position: relative;
	}
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon:before
	{
		position: absolute;
		left: 0;
		top: 21px;

		font-family: thegem-icons;
		font-style: normal;
		content: '';
		font-size: 16px;
		display: block;
		font-weight: normal;

		box-sizing: border-box;
	}
	body.dm-kontakt-body1 #dim_kontakt .right p.margin-bottom5 + .fm-icon:before { top:6px; }

	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon.icon-phone:before { content: '\e625'; }
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon.icon-email:before { content: '\e607'; }
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon.icon-contactform:before { content: '\e685'; }
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon.icon-map:before { content: '\e624'; }
	body.dm-kontakt-body1 #dim_kontakt .right .fm-icon.icon-info:before { content: '\e67a'; }



/* 	MOBIL
	--------------------------------------------------
*/
@media screen and ( max-width: 979px )
{
	body.dm-kontakt-body1 #dim_kontakt
	{
		position: fixed;
		z-index: 999999991;

		top: 0;
		left: 0;
		
		background: none;
		overflow: visible;
		transition: 0.5s;

		width: 100%;
		height: 0;
	}
	body.dm-kontakt-body1 #dim_kontakt > .inner
	{
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		transition: 01.s;
	}
	body.dm-kontakt-body1 #dim_kontakt.stufe2.expand > .inner { background-color:white; }
	body.dm-kontakt-body1 #dim_kontakt .over 
	{ 
		display: none; 
		transition: 0.2s;
	}
	body.dm-kontakt-body1 #dim_kontakt.expand .over 
	{ 
		display: block; 
		z-index: 999999991;
		width: 100%;
		height: 96px;
		background-color: #ffffff;
	}
	
	body.dm-kontakt-body1 #dim_kontakt .left
	{
		position: absolute;
		top: 35px;
		right: 80px;
		border: none;
		width: 120px;
		height: 60px;
		background-color: var(--kontakt-highlight);
		color: #ffffff;
		transition: 0.2s;
		z-index: 999999995;
	}
	body.dm-kontakt-body1 #dim_kontakt .left:hover { cursor: pointer; }
	body.dm-kontakt-body1 #dim_kontakt.stufe1 .left,
	body.dm-kontakt-body1 #dim_kontakt.stufe2 .left 
	{ 
		border-radius: 0 0 6px 6px; 
		height:50px;
		top: 0;
	}
	body.dm-kontakt-body1 #dim_kontakt.stufe2.expand .left { border-radius: 0; }
	body.dm-kontakt-body1 #dim_kontakt .left > .inner
	{
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		text-align: center;
	}
	body.dm-kontakt-body1 #dim_kontakt .left .image { display:none; }
	body.dm-kontakt-body1 #dim_kontakt .left .label
	{
		position: relative;
		font-size: 18px;
		line-height: 18px;
		font-weight: bold;
		color: var(--kontakt-main);
		padding: 22px 0 0;
	}
	body.dm-kontakt-body1 #dim_kontakt.stufe1 .left .label { padding-top:27px; }
	body.dm-kontakt-body1 #dim_kontakt.stufe2 .left .label { padding-top:18px; }

	body.dm-kontakt-body1 #dim_kontakt .right
	{
		position: absolute;
		top: 95px;
		left: 0;

		width: 100%;
		display: block;
		margin: 0;
		padding: 0;
		border: none;
		background: none;

		z-index: 999999993;
		transition: 0.2s;

		height: 0;
		opacity: 0;
	}
	body.dm-kontakt-body1 #dim_kontakt.expand .right
	{
		height: auto;
		opacity: 1;

		-webkit-box-shadow: 0px 0px 8px 5px rgba( 150, 150, 150, 0.6 );
		box-shadow: 0px 0px 8px 5px rgba( 150, 150, 150, 0.6 );
	}
	body.dm-kontakt-body1 #dim_kontakt.stufe1 .right { top:69px; }
	body.dm-kontakt-body1 #dim_kontakt.stufe2 .right { top:50px; }
	Xbody.dm-kontakt-body1 #dim_kontakt.stufe1 .right { padding-top:69px }
	Xbody.dm-kontakt-body1 #dim_kontakt.stufe2 .right { padding-top:50px }
	body.dm-kontakt-body1 #dim_kontakt .right > .inner
	{
		position: relative;
		width: 100%;
		height: 100%;
		display: block;
		margin: 0 auto;
		padding: 0 0 20px;
		border: none;
		background: none;
		text-align: left;
		background-color: var(--kontakt-highlight);
		z-index: 999999992;
	}
	body.dm-kontakt-body1 #dim_kontakt .right > .inner > *
	{
		width: 200px;
		margin: 0 auto;
	}
	body.dm-kontakt-body1 #dim_kontakt .right .kontakt-head { display:none; }

} /* ENDE MOBIL */
