/*
Systemhaus Inningen 2018
*/
@font-face
{
	font-family:			'Awesome';
	src:					url('fonts/awesome.woff2') format('woff2'),
							url('fonts/awesome.woff') format('woff');
	font-weight:			normal;
	font-style:				normal;
}

@font-face
{
	font-family:			'OpenSans';
	src:					url('fonts/opensans.woff2') format('woff2'),
							url('fonts/opensans.woff') format('woff');
	font-weight:			normal;
	font-style:				normal;
}

@font-face
{
	font-family:			'Tahoma';
	src:					url('fonts/tahoma.woff2') format('woff2'),
							url('fonts/tahoma.woff') format('woff');
	font-weight:			normal;
	font-style:				normal;
}

.awesome
{
	font-family:			Awesome;
}

.tahoma
{
	font-family:			Tahome;
}

/*
Default Resets
*/
html,body,table,tr,td,
div,img,hr,ul,li,p,a,
h1,h2,h3,h4,h5,h6
{
	margin:					0;
	border:					0;
	padding:				0;

	font-family:			OpenSans, Tahoma;
	font-weight:			normal;
	font-size:				4vw;
	color:					rgba(64,64,64,1);
}

p
{
	white-space:			normal;
}

/*
Body Style
*/
body
{
	background-color:		rgba(255,255,255,1);
}

/*
HIDING
*/
/*
div#phone,
div#email
{
	display:				none;
}
*/


/*
Mobile
*/
#mobile + label:before
{
	cursor:					pointer;

	content:				"\f0c9";

	position:				fixed;
	top:					0.7857rem;
	right:					1.286rem;

	z-index:				20;

	width:					2.857rem;
	height:					2.857rem;

	color:					rgba(0,137,227,1);
	font-size:				1.786rem;
	line-height:			2.929rem;
	text-align:				center;

	border-radius:			50%;
	background-color:		rgba(255,255,255,1);
	box-shadow:				inset 0px 0px 2px rgba(255,255,255,0.75), 0px 0px 10px rgba(0,0,0,0.15);

	transition:				color .2s ease-in-out;
}

#mobile:checked + label:before
{
	color:					rgba(255,255,255,1);
	background-color:		rgba(0,137,227,1);

	transition:				color .2s ease-in-out;
}

#mobile:checked ~ #menu
{
	top:					4.357rem;
	transition:				top .2s ease-in-out;
}

#mobile:checked ~ #phone
{
	left:					-1.429rem;
	transition:				left 0.5s ease 0.5s;
}

#mobile:checked ~ #email
{
	left:					10.36rem;
	transition:				left 0.5s ease 0.5s;
}


/*
Main Styles
*/
div#head
{
	position:				fixed;
	top:					0;
	left:					0;

	z-index:				10;

	width:					100%;
	height:					4.286rem;

	background-color:		rgba(255,255,255,1);
	background-image:		linear-gradient(to bottom, rgba(255,255,255,1), rgba(0,0,0,0.05));

	box-shadow:				inset 0px 0px 2px rgba(255,255,255,0.75), 0px 0px 10px rgba(0,0,0,0.15);
	border-bottom:			0.1429rem rgba(225,225,225,1) solid;
}

div#main
{
	position:				absolute;
	top:					4.286rem;
	left:					0;

	width:					100%;
}

div#stage
{
	margin:					0.5714rem;
	margin-top:				0.8571rem;
	margin-bottom:			0.8571rem;
}

/*
Layered Elements
*/
div#logo
{
	position:				fixed;
	top:					0.3571rem;
	left:					0.3571rem;

	z-index:				20;

	width:					5rem;
	height:					5rem;

	background-image:		url('images/logo.png');
	background-repeat:		no-repeat;
	background-size:		contain;
}

div#logo:before,
div#logo:after
{
	font-family:			Tahoma;
	color:					rgba(163,163,163,1);
}

div#logo:before
{
	position:				absolute;
	top:					0.2143rem;
	left:					5rem;

	font-size:				1.714rem;
	content:				'Systemhaus';
}

div#logo:after
{
	position:				absolute;
	top:					2rem;
	left:					8.786rem;

	font-size:				1.143rem;
	content:				'INNINGEN';
}


/* SHARED */




div#phone:before,
div#email:before,
div#phone:after,
div#email:after
{
	position:				relative;
	z-index:				20;
}

div#phone,
div#email
{
	position:				fixed;
	z-index:				20;
	font-family:			Awesome;
	color:					rgba(255,255,225,1);
}

div#phone:before,
div#email:before
{
	z-index:				25;
	font-size:				3rem;
	color:					rgba(255,255,255,0.5);
}

div#phone:after,
div#email:after
{
	font-family:			Tahoma;
	font-size:				1.286rem;

	white-space:			nowrap;
	color:					rgba(255,255,255,1);
}

/* UNIQUE */
div#phone
{
	bottom:					2.143rem;
	left:					-20rem;

	width:					1rem;
	height:					1rem;

	font-size:				1.714rem;
	line-height:			1.714rem;

	transition-property:	none;
}

div#phone:before
{
	top:					0.5rem;
	left:					2rem;

	content:				'\f1db';
}

div#phone:after
{
	top:					-0.3571rem;
	left:					1.143rem;

	content:				'0821 / 888864';
}

div#email
{
	bottom:					2.143rem;
	left:					-20rem;

	width:					1rem;
	height:					1rem;

	font-size:				1.571rem;
	line-height:			1.571rem;

	transition-property:	none;
}

div#email:before
{
	top:					0.5714rem;
	left:					2rem;

	content:				'\f1db';
}

div#email:after
{
	top:					-0.3571rem;
	left:					1.143rem;

	content:				'info@it-shi.de';
}

















/* reworking */
div#foot
{
	background-color:		rgba(255,255,255,1);
	background-image:		linear-gradient(to top, rgba(255,255,255,1), rgba(0,0,0,0.05));
	box-shadow:				inset 0px 0px 2px rgba(255,255,255,0.75), 0px 0px 10px rgba(0,0,0,0.15);

	border-top:				0.1429rem rgba(225,225,225,1) solid;

	padding:				0.3571rem;

	text-align:				center;
}

div#foot ul li
{
	font-size:				0.7143rem;
	font-weight:			bold;

	color:					rgba(100,100,100,1);
}










div#stage h1,
div#stage h2,
div#stage h3,
div#stage h4,
div#stage h5,
div#stage h6 {
	margin-bottom:			0.5714rem;
}



div#stage a,
div#stage a:link {
	color:					rgba(0,137,227,1);
	text-decoration:		none;

	transition:				color .2s ease-in-out;
}

div#stage a:hover
{
	color:					rgba(100,100,100,1);
	text-decoration:		underline;
}

div#stage p
{
	margin-bottom:			0.5714rem;
}




/*
Text Formats
*/

hr
{
	background-color:		rgba(0,137,227,1);
	height:					0.1429rem;
	margin-top:				0.1429rem;
	margin-bottom:			0.8571rem;
}

h1,h2,h3,h4,h5,h6
{
	font-weight:			bold;
	margin-top:				0.7143rem;
	margin-bottom:			0.7143rem;
}

h1,h2,h3
{
	color:					rgba(163,163,163,1);
}

h4,h5,h6
{
	color:					rgba(0,137,227,1);
}

h1,h6
{
	font-size:				1.429rem;
	line-height:			1.429rem;
}

h2,h5
{
	font-size:				1.286rem;
	line-height:			1.286rem;
}

h3,h4
{
	font-size:				1.143rem;
	line-height:			1.143rem;
}








div#menu
{
	display:				block;

	position:				fixed;
	top:					-200%;
	left:					0;

	z-index:				5;

	width:					100%;
	height:					calc(100% - 4.357rem);

	background-color:		rgba(0,137,227,1);
	box-shadow:				inset 0px 0px 2px rgba(255,255,255,0.75), 0px 0px 10px rgba(0,0,0,0.15);

	transition:				top .2s ease-in-out;
}

div#menu ul,
div#foot ul
{
	list-style-type:		none;
}

div#menu ul li
{
	border-bottom:			0.1429rem rgba(255,255,255,0.75) solid;
}

div#menu ul li.between,
div#menu ul li.last,
div#foot ul li.between
{
	display:				none;
}

div#menu ul li a
{
	display:				block;

	padding:				0.3571rem;
	padding-left:			1.071rem;
	margin-bottom:			0.1429rem;

	line-height:			2.5rem;
	text-decoration:		none;
 
	font-weight:			bold;
	font-size:				1.143rem;
	color:					rgba(255,255,255,1);

	transition:				color .2s ease-in-out;
}

div#menu ul li a:before
{
	position:				relative;
	top:					0.2143rem;

	margin-right:			1.071rem;

	font-family:			Awesome;
	font-size:				1.429rem;
	content:				"\f138";
}

div#menu ul li:hover > a
{
	color:					rgba(100,100,100,1);
}


div#stage ul,
div#stage li
{
	margin-left:			1rem;
}

div#stage li
{
	padding:				0.3571rem;
}



/* NON MOBILE VIEW */
@media screen and (orientation: landscape) and (min-width: 550px) {

	/*
	Default Resets
	*/
	html,body,table,tr,td,
	div,img,hr,ul,li,p,a
	{
		font-size:				1.4vw;
	}

	/* HIDING */
	#mobile,
	#mobile + label:before,
	div#menu ul li a:before,
	div#head
	{
		display:				none;
	}

	/* RESETS */
	#mobile:checked ~ #menu
	{
		top:					9.286rem;
		transition-property:	none;
	}

	#mobile:checked ~ #phone,
	#mobile:checked ~ #email
	{
		left:					50%;
		transition-property:	none;
	}


	/* SHOW */
	div#phone,
	div#email
	{
		display:				block;
	}

	/*
	Body Style
	*/
	body
	{
		background-color:		rgba(225,225,225,1);

		background-image:		url('images/background.jpg');
		background-repeat:		no-repeat;
		background-position:	top center;
		background-attachment:	fixed;
	}

	/*
	Main Styles
	*/
	div#main
	{
		position:					absolute;
		top:						1.786rem;
		left:						50%;
		z-index:					1;

		width: 						68rem;
		margin:						0 0 0 -34.35rem;

		padding:					0.3571rem;

		background-color:			rgba(255,255,255,0.15);

		border-radius:				0.3571rem;
		box-shadow:					inset 0 0 0.1429rem rgba(255,255,255,0.75), 0 0 0.7143rem rgba(0,0,0,0.15);
	}

	div#stage
	{
		padding:					1.429rem;
		padding-top:				10rem;

		margin:						0;

		background-color:			rgba(255,255,255,1.0);
		box-shadow:					0 0 0.2143rem rgba(255,255,255,0.25);
		border-radius:				0.1429rem;
	}

	/*
	Layered Elements
	*/
	div#logo {

		position:					absolute;
		top:						3.214rem;
		left:						50%;
		z-index:					10;

		width:						7.143rem;
		height:						7.143rem;
		margin:						0 0 0 -33.21rem;

		background-repeat:			no-repeat;
		background-position:		center;
	}

	div#logo:before
	{
		top:					0.4286rem;
		left:					7.857rem;

		font-size:				2.286rem;
	}

	div#logo:after
	{
		top:					2.714rem;
		left:					12.71rem;

		font-size:				1.571rem;
	}









	/* SHARED */
	div#phone,
	div#email,
	div#phone:before,
	div#email:before,
	div#phone:after,
	div#email:after
	{
		position:				absolute;
		z-index:				20;
	}

	div#phone,
	div#email
	{
		font-family:			Awesome;
		color:					rgba(0,137,227,0.75);
		transition-property:	none;
	}

	div#phone:before,
	div#email:before
	{
		font-size:				3rem;
		color:					rgba(163,163,163,0.75);
	}

	div#phone:after,
	div#email:after
	{
		font-family:			Tahoma;
		font-size:				1.5rem;

		white-space:			nowrap;
		color:					rgba(163,163,163,1);
	}

	/* UNIQUE */
	div#phone
	{
		top:					5rem;
		left:					50%;

		width:					1rem;
		height:					1rem;
		margin:					0 0 0 5.21rem;

		font-size:				1.714rem;
		line-height:			1.714rem;
	}

	div#phone:before
	{
		top:					-0.07143rem;
		left:					-0.5714rem;

		content:				'\f1db';
	}

	div#phone:after
	{
		top:					-0.1429rem;
		left:					2.571rem;

		content:				'0821 / 888864';
	}

	div#email
	{
		top:					4.857rem;
		left:					50%;

		width:					2rem;
		height:					2rem;
		margin:					0 0 0 20.71rem;

		font-size:				1.571rem;
		line-height:			1.571rem;
	}

	div#email:before
	{
		top:					-0;
		left:					-0.5714rem;

		content:				'\f1db';
	}

	div#email:after
	{
		top:					0;
		left:					2.571rem;

		content:				'info@it-shi.de';
	}







	div#menu
	{
		position:				absolute;
		top:					9.286rem;
		left:					50%;
		z-index:				3;

		width:					68rem;
		height:					2.357rem;
		margin:					0 0 0 -34.01rem;

		border-top-width:		0.07143rem;
		border-bottom-width:	0.07143rem;
		border-left-width:		0;
		border-right-width:		0;

		border-top-color:		rgba(0,0,0,0.10);
		border-bottom-color:	rgba(0,0,0,0.15);
		border-style:			solid;

		box-shadow:				0px 0px 5px rgba(0,0,0,0.10);
		background:				linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.05));

		transition-property:	none;
	}

	div#menu ul
	{
		padding-left:			8.857rem;
	}

	div#menu ul li
	{
		position:				relative;
		float:					left;

		line-height:			2.214rem;

		color:					rgba(163,163,163,1);
		border-bottom-width:	0;
	}

	div#menu ul li.between
	{
		display:				block;
	}

	div#menu ul li.last
	{
		display:				none;
	}

	div#menu ul li a
	{
		padding:				0 0.7143rem;

		line-height:			2.214rem;
		text-decoration:		none;

		font-weight:			bold;
		font-size:				1.071rem;
		color:					rgba(0,137,227,1);

		transition:				color .2s ease-in-out;
	}

	div#menu ul li:hover > a
	{
		color:					rgba(100,100,100,1);
	}

	div#menu ul li.between
	{
		font-family:			Tahoma;
		font-size:				1.143rem;
	}

	div#foot {
		position:				relative;
		top:					1rem;
		height:					0;
		z-index:				1;

		/* reset mobile styles */
		background-color:		transparent;
		background-image:		none;
		box-shadow:				none;
		border-top:				0;
		padding:				0;
	}

	div#foot ul {
		margin-bottom:			2rem;
	}

	div#foot ul li {
		display:				inline-block;
		padding:				0.1429rem;

		font-size:				0.8571rem;
	}

	div#foot ul li.between
	{
		display:				inline-block;
	}

	div#stage h1,
	div#stage h2,
	div#stage h3,
	div#stage h4,
	div#stage h5,
	div#stage h6
	{
		margin-top:				0.7143rem;
		margin-bottom:			1.143rem;
	}

}


@media screen and (orientation: landscape) and (min-width: 1000px) {

	/*
	Default Resets
	*/
	html,body,table,tr,td,
	div,img,hr,ul,li,p,a
	{
		font-size:				14px;
	}
}

@media screen and (orientation: landscape) and (min-width: 2000px) {

	/*
	Default Resets
	*/
	html,body,table,tr,td,
	div,img,hr,ul,li,p,a
	{
		font-size:				16px;
	}
}


@media screen and (orientation: landscape) and (min-width: 3000px) {

	/*
	Default Resets
	*/
	html,body,table,tr,td,
	div,img,hr,ul,li,p,a
	{
		font-size:				20px;
	}
}