/** * ** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * @version		$id: index.php 2017-05-15
 * @package		SanitärSpartak_Responsive_2017
 * @author		ARWEDIS-Mediengestaltung | http://.arwedis.de
 * @copyright	Copyright (c) 2007 - 2017 ARWEDIS
 * * *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * */

/* *** Farben ***
rot #821E28 | 130, 30, 40;
grün #2D8791 | 45, 135, 145;
grün (dunkel) #416464 | 65, 100, 100;

grau (hell) #E6E6EB | 230, 230, 235;
grau (hell 2) #C8CDD7 | 200, 205, 215;
grau (mittel) #B4BEC8 | 180, 190, 200;
grau (dunkel) #646469 | 100, 100, 105;
*/

/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */

html {
    font-family: Calibri, Verdana, Geneva, sans-serif;
    color: #646469;
}

*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body, 
nav, 
figure,
img,
ul, li, a  {margin: 0; padding: 0;}

body {width: 100%;}

.page-wrapper {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	-moz-box-shadow: 8px 0px 4px -4px #C8CDD7, -8px 0px 4px -4px #C8CDD7;
	-webkit-box-shadow: 8px 0px 4px -4px #C8CDD7, -8px 0px 4px -4px #C8CDD7;;
	-khtml-box-shadow: 8px 0px 4px -4px #C8CDD7, -8px 0px 4px -4px #C8CDD7;;
	box-shadow: 8px 0px 4px -4px #C8CDD7, -8px 0px 4px -4px #C8CDD7;;
}

.mainContent figure {
	margin-bottom: 2em;
}

img {max-width: 100%;}

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
a {text-decoration: none;}
.mainContent a {
	color: #821E28;
}

a:hover,
a:active {
	color: #2D8791;
	font-weight: 400;
}

h1 {
	font-size: 1.2em;
	color: #416464;
}

h2 {
	margin-top: 2em;
	font-size: 1.2em;
	/*	color: #416464;*/
}

.page-wrapper ul {
	margin-left: 1em;
}

.page-wrapper li {
	margin-bottom: 1em;
}

figcaption {
	font-size: 0.8em;
	font-style: italic;
}

/* ----------------------------------------------------------------------------- *
 *                             Schatten-Effekte                                  *
 * ----------------------------------------------------------------------------- */
.schatten_1 {
	-moz-box-shadow: 1px 1px 6px #CED5E0;
	-webkit-box-shadow: 1px 1px 6px #CED5E0;
	-khtml-box-shadow: 1px 1px 6px #CED5E0;
	box-shadow: 1px 1px 6px #CED5E0;
}

.schatten_2 {
	-moz-box-shadow: 2px 3px  6px #416464;
	-webkit-box-shadow: 2px 3px  6px #416464;
	-khtml-box-shadow: 2px 3px  6px #416464;
	box-shadow: 2px 3px 6px #416464;
}

.schatten_3 {
	-moz-box-shadow: 2px 3px  6px #C8CDD7;
	-webkit-box-shadow: 2px 3px  6px #C8CDD7;
	-khtml-box-shadow: 2px 3px  6px #C8CDD7;
	box-shadow: 2px 3px 6px #C8CDD7;
}

.schatten_4 {
	-moz-box-shadow: 0px 3px  6px #416464;
	-webkit-box-shadow: 0px 3px  6px #416464;
	-khtml-box-shadow: 0px 3px  6px #416464;
	box-shadow: 0px 3px 6px #416464;
}

/* ----------------------------------------------------------------------------- *
 *                           Allgemeine Elemente                                 *
 * ----------------------------------------------------------------------------- */

#logo {
	padding: 0 1em;
}

#logo p {
	margin: 0;
}

#logo img {
	max-width: 40%;
}

#slogan p {
	margin-top: 5px;
	padding-left: 1em;
	font-size: 0.7em;
	text-shadow: 2px 2px 1px #CED5E0;
}

.header-trenner {
	border: solid #821E28 0;
	border-bottom-width: 3px;
	clear: both;
}

.trennlinie_grau {
	margin: 0 0 1em;
	border: solid #C8CDD7 0;
	border-width: 0 0 1px;
	clear: both;
}

.trennlinie_rot {
	margin: 0 0 1em;
	border: solid #821E28 0;
	border-width: 0 0 1px;
	clear: both;
}

.slogan {
	display: block;
	margin: 0;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
	font-size: 1.0em;
	font-style: italic;
	font-weight: 600;
	color: #2D8791;
}

.slides {
	max-width: 100%;
	border: solid #FFF 1px;
	margin-bottom: 2em;
}

.slides img {
	max-width: 100%;
}

.slides figcaption {
	margin: 0;
	padding: 0.5em;
	color: #FFF;
	text-shadow: 2px 3px 6px #646469;
	background-color: rgba(65, 100, 100, 0.9);
	border: solid #FFF 1px;
}

.mainContent {
	border: solid #C8CDD7 0;
	border-width: 0 0 1px;
}

.mainContent p {
	font-size: 1.25em;
}

.mainContent img {
	border: solid #821E28 0;
	border-width: 1px 0 0 1px;
	-moz-box-shadow: 2px 3px  6px #C8CDD7;
	-webkit-box-shadow: 2px 3px  6px #C8CDD7;
	-khtml-box-shadow: 2px 3px  6px #C8CDD7;
	box-shadow: 2px 3px 6px #C8CDD7;
}

.asideContent {
	padding-top: 1em;
}

.column_right {
	display: flex;
	padding: 0.5em;
	background-color: #2D8791;
	color: #FFF;
}

.column_right h3 {
	margin: 0 0 0.3em;
	padding: 0.3em 0.7em 0.5em;
	font-size: 1em;
	font-weight: 600;
	font-variant:small-caps;
	letter-spacing: 0.075em;
	text-align: right;
	color: #2D8791;
	background-color: rgba(255, 255, 255, 0.75);
	border: solid #FFF 0;
	border-width: 1px 0;
	border-radius: 5px;
}

.column_right .weiter_lesen {
	margin: 0;
	padding: 0.5em 2em;
	display: inline-block;
	width: 100%;

	color: #FFF;
	text-align: right;
	font-weight: 600;
	text-shadow: 2px 3px 6px #416464;
	border: solid #FFF 0;
	border-width: 1px 0;
	border-radius: 5px;
	background-color: #416464;

	-moz-box-shadow: 2px 3px  6px #416464;
	-webkit-box-shadow: 2px 3px  6px #416464;
	-khtml-box-shadow: 2px 3px  6px #416464;
	box-shadow: 2px 3px 6px #416464;
}

.column_right a:hover {
	text-decoration: underline;
	background-color: #2D8791;
}

.footer_content {
	padding: 0.5em 1em;
	color: #416464;
	background-color: rgba(65, 100, 100, 0.125);
	display: block;
}

footer h4 {
	margin: 0;
	padding-bottom: 0.25em;
	text-align: center;
	font-size: 0.9em;
}

footer ul {
	margin: 0 0 1em;
	padding: 0.75em;
	list-style: none;
	border: dotted #2D8791 0;
	border-width: 1px 0;
}


footer a {
	display: inline-block;
	padding: 0.5em 1em;
	color: #416464;
	text-decoration: underline;
}

.column_footer_navi {
	width: 100%;
}

.custom_navi_unten {
	display: flex;
	width: 100%;
}

.column_footer_navi ul {
	padding: 0;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.75);
	border: solid #FFF 0;
	border-width: 1px 0;
	border-radius: 5px;

	-moz-box-shadow: 2px 3px  6px #C8CDD7;
	-webkit-box-shadow: 2px 3px  6px #C8CDD7;
	-khtml-box-shadow: 2px 3px  6px #C8CDD7;
	box-shadow: 2px 3px 6px #C8CDD7;
}

.column_footer_navi li {
	margin: 0;
	padding: 0;
	float: right;
}

.copyright {
	font-size: 0.8em;
}

.jicons-icons {display: none;}

.contact-form,
#contact-form,
#contact-form fieldset,
#contact-form .control-group,
#contact-form .control-label,
#contact-form .controls,
#contact-form input,
#jform_contact_message,
#jform_contact_name {
	max-width: 100%;
	width: 98%;
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Tablet                                    *
 *                          ab ~ 500px  500px / 16px = 31,25em                   *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 31.25em) {
	.main,
	.copyright {
		padding: 0 1em;
	}

	#slogan p {
		padding-left: 1.3em;
		font-size: 0.95em;
	}

	.mainContent figure,
	aside figure {
		margin: 0 1em 0.5em 0;
		width: 45%;
		float: left;
	}

	.column_right .weiter_lesen {
		width: 50%;
	}

	.column_footer {
		margin-left: 1em;
		width: 45%;
		float: left;
	}

	.column_footer ul {
		min-height: 5em;
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Tablet                                    *
 *                          ab ~ 700px  700px / 16px = 43.75em                   *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 43.75em) {

	#logo {
		position: relative;
		float: left;
	}

	#logo img {
		max-width: 100%;
	}

	#main-navi-container {
	position: absolute;
    width: 65%;
    top: 3em;
    left: 17em;
	}

	.slides figcaption {
		font-size: 1.25em;
		background-color: rgba(65, 100, 100, 0.9);
	}
	#ff .mainContent {
		width: 70%;
		float: left;
	}

	.trennlinie_grau {
		clear: none;
	}

	aside figure {
		width: 100%;
	}

	.column_right a.weiter_lesen {
		padding: 0.25em 2em;
		width: 100%;
	}

	#ff aside.column_right {
		padding: 0 1em;
		width: 28%;
		float: right;
	}

	.column_right figure {
		float: left;
	}
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Desktop                                    *
 *                          ab ~ 1120px  1120px / 16px = 70em                    *
 * ----------------------------------------------------------------------------- */

@media only screen and (min-width: 70em) {

	.page-wrapper {
		width: 1120px;
	}

	ul.menu_main-navi {
		position: relative;
		width: 80%;
		float: right;
	}
}

/* Farben
rot #821E28 | 130, 30, 40;
grün #2D8791 | 45, 135, 145;
grün (dunkel) #416464 | 65, 100, 100;

grau (hell) #E6E6EB | 230, 230, 235;
grau (hell 2) #C8CDD7 | 200, 205, 215;
grau (mittel) #B4BEC8 | 180, 190, 200;
grau (dunkel) #646469 | 100, 100, 105;
*/