/** Style fuer aqalong.de  **/
@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}
  /* neue Fontdatei */
  /*!
 * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
@import 'functions';
@import 'variables';

  
 .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"}
 
  
 /* 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: 260px;	padding: 0 10px;}
.menu nav ul li a:active span{width: 260px;	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: #639cff;	color: #f2f2f2;}
.menu.blue nav ul li a span{transition: all ease .8s;	background-color:#639cff;color: #f2f2f2;}
	/* navigation anpassen */
.menu nav ul li a:hover span{	width: 0px;	padding: 0;}
.menu nav ul li a:active span{width: 0px;	padding: 0;}
/* neue icons  */
.ico-badewanne{
	background: url(fonts/bath-white.svg) center no-repeat;
	background-size: 70%;
}
.ico-waschbecken{
	background: url(fonts/sink-white.svg) center no-repeat;
	background-size: 70%;
}
.ico-mirror{
	background: url(fonts/mirror-white.svg) center no-repeat;
	background-size: 90%;
}
.ico-sink-cabin{
	background: url(fonts/sink-cabin-white.svg) center no-repeat;
	background-size: 70%;
}
.ico-envelope{
	background: url(fonts/envelope-white.svg) center no-repeat;
	background-size: 80%;
}
/** Kleine Monitore  **/
@media only screen and (min-width: 380px) {
	section { max-width: 420px; margin: 0 auto; overflow: hidden;}
	body{	font-size: 120%; background: #40e0d0	}
	h3#slogan{color: #639cff;font-size: 220%; padding-left: 10%;}
	#layout-logo-image{
 margin: 0 auto 0 auto; width: 380px; height:317px;  background: url(aqa-logo_380px.gif) no-repeat center;
}
	/* articel inhalt  */
	.col-six {display:inline;float:left;width:380px; height: auto;  margin:5px 10px 10px;}
	}


/* Tabletts */
@media only screen and (min-width: 600px) {
	section { max-width: 600px; margin: 0 auto; overflow: hidden;}
	body{	font-size: 120%; background: fuchsia;}
	h3#slogan{color: #639cff;font-size: 200%; padding-left: 10%;}
	#layout-logo-image{
 margin: 0 auto 0 auto; width: 600px; height:500px; background: white url(aqa-logo_600px.gif) center no-repeat ;
}
/* articel inhalt  */
.col-six {display:inline;float:left;width:270px; margin:5px 10px 15px;}	
	}
	
/* Mittlere und gro�e Monitore */
@media only screen and (min-width: 920px) {
	section { max-width: 900px; margin: 0 auto; overflow: hidden; }
	body{	font-size: 90%; background: white;}
	h3#slogan{color: #639cff;font-size: 220%; padding-left: 10%;}
	#layout-logo-image{ margin: 0 auto 0 auto; width: 880px; height:700px; 
 background:url(aqa-logo_880px.gif) no-repeat center ;
}
}


/* articel inhalt uebergeordnete Box */
.col-twelve{display:inline;float:left;width:98.91667%;margin:0 1.04167%;}

/* articel inhalt  */
.col-six {display:inline;float:left;width:400px; margin:5px 15px 15px;
	padding-right: 8px;
}
	

/* Toptitel transparent schalten */
 .trans{color: white; font-size: small;}
 
 section ul li{ list-style: disc; margin-left: 10px;}
	
article h2{
	padding-left: 5px;
	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 der Punkt zm platzierten anspringen in der Höhe -unsichtbar machen- */
#dusche{color: white;}
#spiegelschrank{color: white;}
#vanity-furniture{color: white; }
#derwaschtisch{color: white;}
#kontakt{color: white;}

/* benannte sectionen */
body section#malerarbeiten {
	background: #639cff;
	color: #fff;
}
.bgblau{
		background: #639cff;
		color: white;
}

body section#boden-parkett {
		background: #95191c;
		color: #fff;
}
.bgrot{
		background: #95191c;
}
.telbutton{
	background: #639cff;
	color: #fff;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
#duschenbauer{
	background: #639cff url(fonts/bath-white.svg) no-repeat left ;
	background-position: 10px;
	background-size: 6%;
	font-size: 220%;
	color: #f2f2f2;
	padding: 10px 0 10px 11%;
	margin-bottom: 20px;
}
#spiegelschr{
	background: #639cff url(fonts/mirror-white.svg)  no-repeat left ;
	background-position: 10px;
	background-size: 6%;
	font-size: 220%;
	color: #f2f2f2;
	padding: 10px 0 10px 11%;
	margin-bottom: 20px;
}
#contact{
	background: #639cff url(fonts/envelope-white.svg) no-repeat left ;
	background-position: 10px;
	background-size: 6%;
	font-size: 220%;
	color: #f2f2f2;
	padding: 10px 0 10px 11%;
	margin-bottom: 20px;
}
#waschtischmoebel{
	background: #639cff url(fonts/sink-cabin-white.svg) no-repeat left ;
	background-position: 10px;
	background-size: 5%;
	font-size: 220%;
	color: #f2f2f2;
	padding: 10px 0 10px 10%;
	margin-bottom: 20px;
}
#waschtisch{
	background: #639cff url(fonts/sink-white.svg) no-repeat left ;
	background-position: 10px;
	background-size: 5%;
	font-size: 220%;
	color: #f2f2f2;
	padding: 10px 0 10px 10%;
	margin-bottom: 20px;
}


col-twelve col-six form input .telbutton{
	background: #639cff;
	color: #fff;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
#send{
	background: url(absenden.gif) no-repeat center;
}
/* hintergrundfarbe nach Navigation */
body  section.bglogo {background:#f2f2f2;}
body  section.bglogo h2,body  section.bglogo h1{color:#f2f2f2;}
body  section.bglogo article.col-twelve h3{color:#639cff;}
/* 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;
}