/* @override 
	http://blog.climbtools.eu/css/container.css
*/

/* CSS  Günter Trapp – 2015 */

@charset "UTF-8";

html {
	margin: 0;
	padding: 0;
}

/* @group Befor after */

/*
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	/* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box;
	/* Firefox, andere Gecko-Browser */
    box-sizing: border-box;
/* Opera/IE 8+ */
}

/* @end */

body {
	font-family: 'ClioMediumOblique-Medium';
	font: 19px/32px 'Clio', Arial, Verdane, sans-serif;
	font-weight: 300;
	text-align: left;
	color: #434d4e;
	margin: 0;
	background-image: none;
	background-color: white;
	padding: 0;
}

/* @group Container */

#page {
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}

#page, main#content, #fix, footer, #imprint {
	width: 1280px;
}

.head {
	display: none; 
}
#top {
	margin: 0 auto;
	padding: 0;
	display: block;
	overflow: auto;
}

main#content {
	margin-top: 259px;
}

#fix {
	background-color: rgba(254,255,255,100);
	position: fixed;
	z-index: 1000;
	visibility: visible;
	display: block;
}

#top .left {
	padding-left: 8px;
	margin-right: 8px;
	margin-left: 28px;
}



/* @group logo */

div.logos {
	float: left;
	display: inline-block;
	margin-top: 19px;
	width: 470px;
}



.firmenslogan {
	font-size: 16px;
	float: left;
	display: inline-block;
	clear: both;
	padding: 0;
	margin: -13px 0 13px;
	color: whitesmoke;
}
a .blogtypo {
	font: 33px 'Rock Salt', cursive;
	margin-left: 22px;
}



footer a span.blogtypo {
	color: white;
	padding: 0;
}
footer .firmenslogan,
footer .firmenslogan a {
	color: whitesmoke;
	width: 100%;
	float: left;
	display: inline-block;
	margin: -8px 0 0;
	padding: 0;
}
footer .firmenslogan a:hover {
	color: white;
}



/* @end */

.teaser {
	margin-left: auto;
	margin-right: auto;
/* width: 1160px; */
}
.teaser img {
	width: 100%;
}

div.teaserbg {
	background-color: #b8dae0;
	width: 100%;
	height: 450px;
	margin-right: auto;
	margin-left: auto;
	margin: 0;
	padding: 0;
	float: left;
}

div.teaserbox {
	z-index: 100;
	width: 500px;
	max-height: 330px;
	padding: 12px;
	background-color: rgba(184,218,224,0.88);
	position: relative;
	float: right;
	right: 60px;
	top: 90px;
	overflow: hidden;
	visibility: visible;
}
.teaserbox a {
	color: #e84b08;
}
.teaserbox a:hover {
	color: #e84b08;
	text-decoration: underline;
}
.teaserbg img {
	width: 100%;
}
/*
.teaserbg {
	width: 1260px;
	height: 390px;
	background-color: #b8dae0;
}
.teaserbg img {
	width: 100%;
}
*/
#content {
	margin-top: 210px;
}
.maincloum {
	width: 60%;
	float: left;
	padding: 2%;
	margin-left: auto;
	margin-right: auto;
}

.bg-brand, service, socialmedia {
	background-color: rgba(0,172,201,100);
}
/* @end */

/* @group Footer */
div.footerinfo {
	background-color: #424c4e;
	color: whitesmoke;
}
#page footer div.footerinfo span.up a {
	float: right;
	margin-right: 4%;
}

#page footer div.footerinfo span.print {
	margin-left: 4%;
}

footer {
	float: left;
	background-color: rgba(0,172,201,100);
	min-height: 300px;
}
footer .logos, footer address{
	margin-left: 50px;
}

footer address p {
	color: white;
	font-size: 18px;
	clear: both;
}

/* @group Icons */

/* @group Social Media */

ul.socialmedia {
	list-style-type: none;
	margin-left: 10%;
	margin-top: 3%;
}

ul.socialmedia li {

	margin-right: 5%;
	display: inline-block;
}

.socialmedia img.icons {
	width: 70px;
	margin-right: 30px;
	opacity: 0.6;
}
img.icons:hover {
	opacity: 1;
	-moz-transform:  scale(1.1);
	-webkit-transform:  scale(1.1);
	-o-transform:  scale(1.1);
	-ms-transform:  scale(1.1);
	transform: scale(1.1);
}
/* @end */

/* @group Symbole */


ul.service li {
	margin: 0;
	padding: 0;
	display: inline-block;
}
ul.service.center-block li a img.symbole {
	max-width: 300px;
}
img.symbole {
	opacity: 0.6;
	width: 60%;
}

img.symbole:hover {
	opacity: 1;
	-moz-transform:  scale(1.1);
	-webkit-transform:  scale(1.1);
	-o-transform:  scale(1.1);
	-ms-transform:  scale(1.1);
	transform: scale(1.1);
}

/*
img.symbole.icons {
	width: 14%;
	margin: 4%;
}
img.symbole.icons:hover {
	width: 20%;	
	margin: 0;
}
*/

/* @end */

/* @end */
#imprint {
	float: left;
	display: inline-block;
	background-color: #434d4e;
	color: white;
	color: white;
	font-size: 14px;
}
div.copright {
	padding-right: 28px;
}

/* @end */

/* @group float-element */



.fltrt {
	

/* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    float: right;
	margin-left: 8px;
}

.fltlft {
	

/* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. */
    	float: left;
	margin-right: 8px;
}

.clearfloat {
	

/* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
    clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}

/* @end */

/* @group singelnav */

div.singelnavi {
	list-style-type: none;
}

div.singelnavi ul {
	list-style-type: none;
}

div.singelnavi li a {
	
}

.singelnavi a {
	
}

/* @end */

/* @group shortteaser */

#shortteaser {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	display: block;
	float: left;
}

/* #shortteaser div.box30.left.padding, */
.miniteaser {
	height: 450px;
	overflow: hidden;
	background-color: rgba(184,218,224,0.88);
	margin-bottom: 2%;
	float: left;
	padding: 2%;
	width: 32%;
}

.pad1 , .pad4 , .pad7 , .pad10 , .pad13, .pad16, .pad19 , .pad22{
	margin-left: 2%;
	display: none;
	margin-right: 2%;
}


div.miniteaser.pad1 {
	display: none;
}

#shortteaser h2 {
	margin: 0;
	padding: 0;
	min-height: 40px;
	font-size: 18px;
	line-height: 21px;
}

#shortteaser p {
	font-size: 16px;
	text-align: justify;
	margin: 0;
	line-height: 26px;
}
#shortteaser p {
-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
/* 	background-color: rgba(184,218,225,0.95); */

#shortteaser a img {
	width: 100%;
	margin-top: auto;
	margin-bottom: auto;
	height: auto;
}

.autor {
	width: 100%;
	border-bottom: 1px solid #434d4e;
	border-top: 1px solid #434d4e;
	font-size: 12px;
	margin-bottom: 6px;
	height: 29px;
}

/* @end */

/* @group Comment */

div.comments-login {
	float: left;
	font-size: 90%;
	display: inline-block;
	margin: 0;
	padding: 0 0 0 12px;
	width: 100%;
}

div.commentHeader {
	padding: 28px 28px 0;

}



div.commentHeader p {
	font-size: 13px;
}


#comment-5 div.commentHeader h5 {
	float: left;
	margin-right: 12px;
}
div.commentHeader #li-comment,
#li-comment {
	list-style-type: none;
}

#li-comment {
	
}

img.avatar {
	display: none;
}
h3#comments-title {
	background-color: rgba(66,76,78,0.82);
	color: whitesmoke;
}
div.comments {
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	width: 100%;
	margin: 0;
	background-color: rgba(0,132,156,0.10);
	overflow: hidden;
	padding: 0;
}
div.comments p {
	width: 94%;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

.bg-be-member  {
	background-color: rgba(0,132,156,0.50);
}
.bg-be-member:hover  {
	background-color: #00aac9; /* #eb7136  */
}
.bg-be-member a {
	color: white;
}
 .bg-be-member:before {
	content: 'f';
	font: 22px Iconized-Complete;
	margin-right: 7px;
	color: white;
	margin-left: 6px;
}

h3#comments-title, #reply-title  {
	font-size: 16px;
	width: 100%;
	border-top: 1px solid #434d4e;
	border-bottom: 1px solid #434d4e;
	padding-left: 12px;
}

.commentform {
	
}



#content article div div.shortteaser strong {
	display: none;
}




/* @end */

/* @group Here - Date Link */

#here {
	width: 100%;
	height: 31px;
	opacity: 0.8;
}

#bildtext {
	width: 100%;
}

div.articel {
	float: left;
}

#here div.box30.right span.anrede {
	font-size: 13px;
	vertical-align: middle;
	font-weight: bold;
	color: #434d4e;
}

/* @end */

/* @group Search & Login */


div.search-wrap, div.user-wrap {
	padding: 0;
}
div.search-wrap {
	float: right;
	margin-right: 16px;
}
div.user-wrap {
	float: right;
	margin-left: 66px;
}

div.onlineshop {
	float: right;
}

#rexsearch_form {

}

#rexsearch_form fieldset {
	border-style: none;
	margin: 0;
	padding: 0;
}
#search {
	margin-left: auto;
	margin-right: auto;
}
#search ul.searchresults li span.url {
	color: silver;
}


/* @end */

/* @group Team / Mitarbeiter */
#team {
	border: 1px none silver;
	width: 50%;
	display: inline-block;
	position: relative;
	clear: both;
	margin: 5% 20%;
}

.team-name {
	font-family: 'Rock Salt', cursive;
}
div.polar {
	margin-right: 72px;
}
div.polaroid, div.polar {
	text-align: center;
	max-width: 230px;

-webkit-box-shadow: 3px 3px 20px 3px rgba(76,76,76,0.3);
box-shadow: 3px 3px 20px 3px rgba(76,76,76,0.3);
	padding: 0;
	margin-bottom: 22px;
	margin-left: 52px;
	z-index: 100;
	border: 12px solid whitesmoke;
	float: left;
	margin-top: 22px;
}
div.polaroid, div.polar.left {
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
background-color: whitesmoke;
}
div.polar.right{
-moz-transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
background-color: whitesmoke;
}
div.polaroid p,  div.polar p  {
	font: 13px 'Rock Salt', cursive;
	margin: 0;
	padding: 0;
}
span.teamname {

}
div.polaroid p span.bereich {
	color: rgba(66,76,78,0.71);
	font-size: 80%;
}
div.favorit .klebeband {
	width: 220px;
	height: 50px;
	display: block;
	position: relative;
	top: -26px;
	left: 23px;
	background-color: rgba(66,76,78,0.33);
	z-index: 200;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
	border: 2px groove rgba(76,76,76,0.1);
}

div.favorit {
	float: left;
	width: 100%;
	background-color: #00abc9;

-webkit-box-shadow: 5px 5px 20px 0 rgba(76,76,76,0.3);
box-shadow: 5px 5px 20px 0 rgba(76,76,76,0.3);

-moz-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
	padding: 5px 5px 5px 12px;
	margin-top: 30px;
}
.favorit a {
	color: whitesmoke;
}
.favorit a:hover {
	color: white;
}
/*
div.favorit:hover {
-moz-transform: scale(2) rotate(-3deg);
-webkit-transform: scale(2) rotate(-3deg);
-o-transform: scale(2) rotate(-3deg);
-ms-transform: scale(2) rotate(-3deg);
transform: scale(2) rotate(-3deg);
}
-moz-transform: scale(3) rotate(-3deg) translateX(0px) translateY(0px) skewX(2deg);
-webkit-transform: scale(3) rotate(-3deg) translateX(0px) translateY(0px) skewX(2deg);
-o-transform: scale(3) rotate(-3deg) translateX(0px) translateY(0px) skewX(2deg);
-ms-transform: scale(3) rotate(-3deg) translateX(0px) translateY(0px) skewX(2deg);
transform: scale(3) rotate(-3deg) translateX(0px) translateY(0px) skewX(2deg);
*/
img.myfavi1, img.myfavi2, img.myfavi3 {
}
img.myfavi1 {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}

img.myfavi2 {
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
	margin-right: 8%;
	margin-left: 8%;
}
img.myfavi3 {
-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}

div.teamtext {
background: url(files/paper.png) ;

-moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);

-webkit-box-shadow: 5px 5px 20px 0 rgba(76,76,76,0.3);
box-shadow: 5px 5px 20px 0 rgba(76,76,76,0.3);
	margin: 40px 0 0;
	width: 428px;
}
div.teamtext .klebeband {
	width: 220px;
	height: 50px;
	display: block;
	position: relative;
	top: -20px;
	left: 100px;
	background-color: rgba(66,76,78,0.33);
	z-index: 200;
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
	border: 2px groove rgba(76,76,76,0.1);
}
/*	background: url(files/notizblatt_hintergrund.jpg) no-repeat -200px -70px; */

div.teamtext p {
	opacity: 0.7;
	padding: 0 20px 20px;
	margin: 0;
	color: #00849c;
}



/* @end */

/* @group Video */


#video {
	
}
#video h3 {
	margin-bottom: 10px;
}

#video object {
	margin: 0;
	padding: 12px 0 0 12px;
}
.videobox {
	background-color: #b8dae0;
	margin-bottom: 42px;
	padding: 0;
}

#video .right p {
}



/* @end */