/**********************************/
/**                              **/
/**   Web & App Jung             **/
/**   Dipl.-Ing. Matthias Jung   **/
/**   www.webappjung.de          **/
/**   2013                       **/
/**                              **/
/**********************************/

/* Clean up */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	margin: 0;
	padding: 0;
}

#hideAll
{
	position: fixed;
	left: 0px; 
	right: 0px; 
	top: 0px; 
	bottom: 0px; 
	background-color: white;
	z-index: 999; /* Higher than anything else in the document */
}

html
{
	padding:0px;
	margin:0px 0px 0px 0px;
	overflow: hidden;
}

body
{
	padding:10px 10px 10px 10px;
	color: #5F5F5F;
	font-size: 16px;
	line-height: 1.4;
	font-family: 'Lucida Grande',Arial,sans-serif;
	font-family: Arial,sans-serif;
	background-color: white;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.text-wrapper
{
	padding: 10px;
}

.text
{
	text-align:justify;
}

table
{
	width: 100%;
}

td
{
	vertical-align:middle;
}

@font-face
{
	font-family: 'Fjalla One';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/fo.woff') format('woff');
}

h1, h2, h3, h4
{
        font-family: 'Fjalla One', sans-serif;
	font-size:1.5em;
	line-height:40px;
}


/* Menu / Nav */

.left-arrow
{
	position: absolute;
	left: -110px;
	top: 50%;
	width: 100px;
	height: 100px;
	z-index: 888;
        opacity:0.6;
        filter:alpha(opacity=60);
	border-radius:5px;
	color:white;
	text-align: center;
}

.right-arrow
{
	position: absolute;
	right: -110px;
	top: 50%;
	width: 100px;
	height: 100px;
	z-index: 888;
        opacity:0.7;
        filter:alpha(opacity=70);
	border-radius:5px;
	color:white;
	text-align: center;
}
.left-arrow  a,
.right-arrow  a
{
	width:auto;
	height:100%;
	display:block;
	overflow:hidden;
	/* font */
	color:white;
	line-height:1.1;
	font-weight:normal;
	text-transform:none;
	text-decoration:none;
	
        font-family: 'Fjalla One', sans-serif;
	font-size: 4em;
	line-height:100px;

	background:#1a1a1a;
	border-radius:5px;
}

.left-arrow   a:link,
.left-arrow   a:visited,
.right-arrow  a:link,
.right-arrow  a:visited
{
        opacity:0.7;
        filter:alpha(opacity=70);
        -webkit-transition:0.2s;
        -moz-transition:0.2s;    
        -ms-transition:0.2s;    
        transition:0.2s;
}

.left-arrow :hover,
.left-arrow :active,
.left-arrow :focus,
.right-arrow :hover,
.right-arrow :active,
.right-arrow :focus
{
        background:#94C600 !important;
        color:white !important;
        opacity:1;
        filter:alpha(opacity=100);
}

.logo
{
	float: left;
	height: 100px;
	background: #EAECE9 url('../img/logo.png') no-repeat center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	display:block;
	overflow:hidden;
	line-height:80px;
	border-radius:5px;
}

.nav, .footer
{
	position: relative;
}

.nav
{
	height: 100px;
	width: 100%;
}

.nav ul
{
	float: left;
	overflow:hidden;
}

.nav li
{
	width:20%;
	height:100px;
	float:left;
	display:block;
	position:relative;
	text-align:center;
}

.nav li a
{
	width:auto;
	height:100%;
	display:block;
	overflow:hidden;
	margin-left:10px;
	/* font */
	color:#1a1a1a ;
	line-height:1.1;
	font-weight:normal;
	text-transform:none;
	text-decoration:none;
	
        font-family: 'Fjalla One', sans-serif;
	font-size: 1.8em;
	line-height:100px;
	color: #5F5F5F;

	border-radius:5px;
}

.nav ul li a:link,
.nav ul li a:visited
{
        filter:alpha(opacity=70);
        -webkit-transition:0.2s;
        -moz-transition:0.2s;    
        -ms-transition:0.2s;    
        transition:0.2s;
        background:#EAECE9 !important;
}

.nav ul li a:hover,
.nav ul li a:active,
.nav ul li a:focus
{
        background:#94C600 !important;
        color:white !important;
        opacity:1;
        filter:alpha(opacity=100);
}

/* Content */

.content
{
	position: relative;
	left:0;
}

.section
{
	float:left;
	height:100%;
	padding-top: 10px;
	position:relative;
	margin-right: 10px;
}

/* Setups */

.subsection
{
	width:100%;
	height:100%;
	float: left;
        background:#EAECE9;
	border-radius:5px;
}
.subsection-home-left
{
	height:100%;
	float: left;
        background:#EAECE9;
	border-radius:5px;
	overflow-y: scroll;
	overflow-x: hidden;
}

.subsection-home-right
{
	height:100%;
	float: right;
	background: #EAECE9 url('../img/bg1.jpg') no-repeat center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	background-position: center bottom;
	border-radius:5px;
}

.subsection-kontakt-left
{
	height:100%;
	float: left;
	background: #EAECE9 url('../img/group2.jpg') no-repeat center;
	background-position: center bottom;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	border-radius:5px;
	overflow: hidden;
}

.subsection-kontakt-right
{
	height:100%;
	float: right;
        background:#EAECE9;
	border-radius:5px;
	overflow: scroll;
}

.subsection-media-left
{
	height:100%;
	float: left;
        background:#EAECE9;
	border-radius:5px;
	overflow: none;
}

.subsection-media-right
{
	height:100%;
	float: right;
	background: #EAECE9 url('../img/group3_old.jpg') no-repeat center;
	background-position: center bottom;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	border-radius:5px;
}

.subsection-referenzen-left
{
	height:100%;
	float: left;
        background:#EAECE9;
	border-radius:5px;
	overflow: scroll;
}

.subsection-referenzen-right
{
	height:100%;
	float: right;
	background: #EAECE9 url('../img/group3.jpg') no-repeat center;
	background-position: center bottom;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	border-radius:5px;
}

#ueber h4
{
	visibility: hidden;
	height: 0px;
	width: 0px;
}

.subsection-ueber-right-u
{
	float: right;
	background: #EAECE9;
	border-radius:5px;
	overflow: scroll;
	margin-left: 10px;
}

.subsection-ueber-middle-u
{
	float: left;
	background: #EAECE9;
	border-radius:5px;
	overflow: scroll;
	margin-right: 10px;
}

.subsection-ueber-left-u
{
	float: left;
	background: #EAECE9;
	border-radius:5px;
	overflow: scroll;
	margin-bottom: 10px;
}

.subsection-ueber-right-o
{
	float: left;
	border-radius:5px;
	background: #EAECE9 url('../img/pietro.jpg') no-repeat center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	background-position: center bottom;
}

.subsection-ueber-middle-o
{
	float: left;
	border-radius:5px;
	background: #EAECE9 url('../img/carlo.jpg') no-repeat center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	background-position: center bottom;
	margin-bottom: 10px;
	margin-left: 10px;
}

.subsection-ueber-left-o
{
	float: left;
	border-radius:5px;
	background: #EAECE9 url('../img/jenny.jpg') no-repeat center;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
	background-position: center bottom;
	margin-bottom: 10px;
	margin-right: 10px;
}

/* Footer */
.footer
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.footer-text
{
	width: 80%;
	border-radius: 5px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #EAECE9;
	float: left;
	display:block;
	overflow:hidden;
}

.footer ul
{
	float: right;
	overflow:hidden;
	width: 20%;
}

.footer li
{
	width:50%;
	height:50px;
	float:left;
	display:block;
	position:relative;
	text-align:center;
}

.footer li a
{
	width:auto;
	height:100%;
	display:block;
	overflow:hidden;
	margin-left:10px;
	/* font */
	color:#1a1a1a;
	font-weight:normal;
	text-transform:none;
	text-decoration:none;
	
        font-family: 'Fjalla One', sans-serif;
	font-size: 1em;
	line-height:50px;

        background:#EAECE9 !important;
	border-radius:5px;
}

.footer ul li a:link,
.footer ul li a:visited
{
        opacity:0.7;
        filter:alpha(opacity=70);
        -webkit-transition:0.2s;
        -moz-transition:0.2s;    
        -ms-transition:0.2s;    
        transition:0.2s;
}

.footer ul li a:hover,
.footer ul li a:active,
.footer ul li a:focus
{
        background:#94C600 !important;
        color:white !important;
        opacity:1;
        filter:alpha(opacity=100);
}

.facebook div 
{
	float: left;
}

iframe
{
	width: 100%;
	height: 300px;
}

a
{

        color:#94C600;
}

@media (max-width: 700px)
{
	.logo
	{
		float: none;
		width:100% !important;
	}	

	.nav ul
	{
		width:100%;
		display: block;
		overflow: hidden;
		margin-top: 10px;
	}

	.nav li a
	{
		margin-left: 0px;
		font-size: 1.2em;
	}

	.left-arrow, .right-arrow
	{
		visibility: hidden;
	}

	.home       { margin-right: 10px; }
	.ueber      { margin-right: 10px; }
	.referenzen { margin-right: 10px; }
	.media	    { margin-right: 10px; }

	.subsection-home-left
	{
		float: none;
		height: auto;
		width: 100%;
		margin-top: 10px;
		overflow: hidden;
	}
	
	.subsection-home-right
	{
		float: none;
		width: 100%;
		height: 300px;
	}
	
	.subsection-kontakt-left
	{
		float: none;
		width: 100%;
		margin-top: 10px;
		height: 300px;
	}
	
	.subsection-kontakt-right
	{
		float: none;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.subsection-referenzen-left
	{
		float: none;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	.subsection-referenzen-right
	{
		float: none;
		height: auto;
		width: 100%;
		overflow: hidden;
	}
	
	
	.subsection-ueber-right-o
	{
		float: none;
		height: 300px;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
		overflow: none;
		background: #EAECE9 url('../img/carlo.jpg') no-repeat center;
		background-position: center bottom;
        	-webkit-background-size: contain;
        	-moz-background-size: contain;
        	-o-background-size: contain;
        	background-size: contain;
	}
	
	.subsection-ueber-middle-o
	{
		float: none;
		height: 300px;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
		overflow: none;
		background: #EAECE9 url('../img/jenny.jpg') no-repeat center;
		background-position: center bottom;
        	-webkit-background-size: contain;
        	-moz-background-size: contain;
        	-o-background-size: contain;
        	background-size: contain;
	}
	
	.subsection-ueber-left-o
	{
		float: none;
		height: 300px;
		width: 100%;
		margin-left: 0px;
		overflow: none;
		background: #EAECE9 url('../img/pietro.jpg') no-repeat center;
		background-position: center bottom;
        	-webkit-background-size: contain;
        	-moz-background-size: contain;
        	-o-background-size: contain;
        	background-size: contain;
	}
	
	.subsection-ueber-right-u
	{
		float: none;
		height: auto;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
		overflow: hidden;
		display: block;
	}
	
	.subsection-ueber-middle-u
	{
		float: none;
		height: auto;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
		overflow: hidden;
		display: block;
	}

	.textwrapper
	{
		overflow: none;
	}
		
	.subsection-ueber-left-u
	{
		float: none;
		height: auto;
		width: 100%;
		margin-left: 0px;
		margin-top: 10px;
		overflow: hidden;
		display: block;
	}

	.section
	{
		float: none;
		clear: both;
		margin-right: 0px;
	}


	.footer
	{
		visibility: hidden;
	}

	.nav li
	{
		width:100%;
		height:40px;
		float:none;
		display:block;
		position:relative;
		text-align:center;
	}

	body
	{
		padding:0px;
		margin:10px;
		width:auto;
		height: auto;
		overflow: auto;
	}

	html
	{
		overflow: auto;
	}

	.home       { margin-right: 0px; }
	.ueber      { margin-right: 0px; margin-top: 10px;}
	.media      { margin-right: 0px; margin-top: 10px;}
	.referenzen { margin-right: 0px; margin-top: 10px;}
	.kontakt    { margin-right: 0px; margin-top: 10px;}

	.nav li a
	{
		width:auto;
		height:100%;
		display:block;
		overflow:hidden;
		margin-left:0px;
		/* font */
		color:#1a1a1a ;
		font-weight:normal;
		text-transform:none;
		text-decoration:none;
		
	        font-family: 'Fjalla One', sans-serif;
		font-size: 1.3em;
		line-height:40px;
	
	        background:#EAECE9 ;
		border-radius:5px;
	}

	.content
	{
		position: relative;
		left:0;
		height: 100%;
	}

	#ueber h4
	{
		visibility: visible;
		height: 25px;
		width: 100%;
	}


}