/** Style fuer gogolati.com  **/
@font-face{font-family:'FontAwesome';
 src:url('fonts/fontawesome-webfont.eot?v=4.7.0');
 src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
 url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
 url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight:normal;font-style:normal}
 
 .fa{display:inline-block;
 font:normal normal normal 14px/1 FontAwesome;
 font-size:inherit; text-rendering:auto;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale}
 .fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}
 .fa-2x{font-size:2em}
 .fa-3x{font-size:3em}
 .fa-4x{font-size:4em}
 .fa-5x{font-size:5em}
 .fa-fw{width:1.28571429em;text-align:center}
 
 .fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}
 .fa-ul>li{position:relative}
 .fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}
 .fa-li.fa-lg{left:-1.85714286em}
 .fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}
 .fa-home:before{content:"\f015"}
 .fa-user:before{content:"\f007"}
 .fa-camera:before{content:"\f030"}
 .fa-bookmark:before{content:"\f02e"}
 .fa-send:before,.fa-paper-plane:before{content:"\f1d8"}
 .fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}
 .fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}
 .fa-paint-brush:before{content:"\f1fc"}
 /* w�rfel */
 .fa-th-large:before{content:"\f009"}
 .fa-th:before{content:"\f00a"}
 .fa-th-list:before{content:"\f00b"}
 /* Hammer */
 .fa-legal:before,.fa-gavel:before{content:"\f0e3"}
 /* Kontaktkarte */
 .fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}
 /* Brief geschlossen */
 .fa-envelope-o:before{content:"\f003"}
 /* Papierflieger */
 .fa-send:before,.fa-paper-plane:before{content:"\f1d8"}
 .fa-user-plus:befor{content:"\f234"} /* User mit Plus */
 .fa-user-times:before { content: "\f235"} /* User mit x */
 .fa-refresh:before {content: "\f021"} /* Pfeile rotieren */
 .fa-cog:before {content: "\f013"} /* Zahnrad */
 .fa-gears:before, .fa-cogs:before {content: "\f085"} /* Zahnräder */
 /* Animation */
 .fa-spin { -webkit-animation: fa-spin 2s infinite linear;  animation: fa-spin 2s infinite linear;}
 .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8);  animation: fa-spin 1s infinite steps(8);}

   /* css reset */
*{
	border: 0;
	padding: 0;
	margin: 0;
}
/* navigation */
.menu{
	position: fixed;
	z-index: 9999;
	margin: 0px 0 0px;
}
.menu nav{
	opacity: 0;
}
.menu input#slide:checked ~ nav{
	opacity: 1;
}
.menu label{
	position: fixed;
	font-size: 30px;
	cursor: pointer;
	z-index: 9999;
}
.menu input#slide{
	display: none;
}
.menu input#slide:checked ~ label.open i{
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
.menu label i, .menu nav, .menu nav ul li span{	transition: all 0.2s ease-in-out;}
.menu label, .menu nav ul li a i, .menu nav ul li a span{
	line-height: 60px;
	text-align: center;
	width: 60px;
	height: 60px;
}
.menu nav ul{
	list-style: none;
	overflow: hidden;
}
.menu nav ul li a{
	font-size: 20px
}
.menu nav ul li a span{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	width: 0;
}
.menu nav ul li a:hover span{
	width: 160px;
	padding: 0 10px;
}
.menu nav ul li a:active span{
	width: 160px;
	padding: 0 10px;
}
.menu.horizontal nav ul li,
.menu.horizontal nav ul li a span{
	float: left;
}
.menu.left.horizontal nav{
	margin-left: 50px;
}
.menu.left.horizontal input#slide:checked ~ nav{
	margin-left: 60px;
}
.menu.right.horizontal nav{
	margin-right: 50px;
}
.menu.right.horizontal input#slide:checked ~ nav{margin-right: 60px}

.menu.blue label, .menu.blue nav ul li a ul li i{
	background-color: #3B315D;
	color: #f2f2f2;
}
.menu.blue nav ul li a span{
	transition: all ease .8s;
		background-color: #c03;
		color: #f2f2f2;
}

/** Kleine Monitore  **/
@media only screen and (min-width: 320px) {
	#topline { background: yellow; height: 30px}
	.flexContent { max-width: 320px; margin: 0 auto; overflow: hidden;}
	body{	font-size: 100%	}
	/* navigation anpassen */
.menu nav ul li a:hover span{
	width: 0px;
	padding: 0 ;
}
.menu nav ul li a:active span{
	width: 0px;
	padding: 0;
}
	
	#layout-logo-image{
 margin: 0 auto 0 auto; width: 320px; height:332px;  background: url(gogolati_420px.jpg) no-repeat center;
}
	/* articel inhalt  */
	.col-six {display:inline;float:left;width:300px; height: auto;  margin:5px 10px 10px;}
	}


/* Tabletts */
@media only screen and (min-width: 600px) {
	#topline { background: Maroon; height: 30px}
	.flexContent { max-width: 590px; margin: 0 auto; overflow: hidden;}
	body{	font-size: 88%	}
		
	#layout-logo-image{
 margin: 0 auto 0 auto; width: 480px; height:320px; background: url(gogolati_480px.jpg) no-repeat center ;
}
/* articel inhalt  */
.col-six {display:inline;float:left;width:270px; margin:5px 10px 15px;}	
	}
	
/* Mittlere und grosse Monitore */
@media only screen and (min-width: 920px) {
	.flexContent { max-width: 900px; margin: 0 auto; overflow: hidden; }
	#topline { background: #0f9; height: 40px}
	body{	font-size: 98%	}
	
	#layout-logo-image{
 margin: 0 auto 0 auto; width: 800px; height:533px; background: url(gogolati_800px.jpg) no-repeat center ;
}

/* articel inhalt  */
.col-six {display:inline;float:left;width:410px; margin:5px 15px 15px;}
	}
	
/* articel inhalt �bergeordnete Box */
.col-twelve{display:inline;float:left;width:98.91667%;margin:0 1.04167%;}

/* Toptitel transparent schalten */
 .trans{color: white;}
 section ul li{ list-style: disc; margin-left: 10px;}
	
article h2{
padding-left: 10px;
	font-family: serif;
	font-weight: 900;
	font-size: 24px;
}
.section-content{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: lighter;
max-width:900px;
margin:0 auto;
margin-top: 60px;
}
/* Sprungziele */
#schreinerei{	color: white;}
#schreinermeister{color:#3B315D;}
#kontakt{color: #c03;}

/* benannte sectionen */
body section#schreinerarbeiten {
	background: #3B315D;
	color: #fff;
}
.bgblau{
		background: #3B315D;
}

body section#schreinerei {
		background: #c03;
		color: #fff;
}
.bgrot{
		background: #c03;
}


/* hintergrundfarbe nach Navigation */
body  section.bglogo {background:#f2f2f2;}
body  section.bglogo h2,body  section.bglogo h1{color:#f2f2f2;}
/* weisser hintergrund */
body  section.white {padding: 8px;background:#fff}


/* formular */
body section article .col-twelve .col-six .form-customer{float:left;width:276px!important;}
body section article .col-twelve .col-six .form-customer input{
		width: 96%;
		background: #f2f2f2;
	border: thin solid #333;
	padding: 0.9%;
	margin-bottom: 5px;
}
body section article .col-twelve .col-six .form-customer textarea{
	width: 96%;
	background: #f2f2f2;
	border: thin solid #333 ;
	padding: 0.9%;
	margin-bottom: 5px;
}
plus-link{
    clear: both;
    width: 280px;
    border-radius:5px;
    margin: 0;
}
.plink{
    float: left;
    border-radius:5px;
    padding: 2px;
}