/* Google Font */

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 100;
	src:
		local('Roboto Thin'),
		local('Roboto-Thin'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOkCnqEu92Fr1MmgVxIIzI.woff2 */
		url('font/Roboto_100.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 300;
	src:
		local('Roboto Light'),
		local('Roboto-Light'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmSU5fBBc4.woff2 */
		url('font/Roboto_300.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 100;
	src:
		local('Roboto Thin Italic'),
		local('Roboto-ThinItalic'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOiCnqEu92Fr1Mu51QrEzAdLw.woff2 */
		url('font/Roboto_100italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 300;
	src:
		local('Roboto Light Italic'),
		local('Roboto-LightItalic'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOjCnqEu92Fr1Mu51TjASc6CsQ.woff2 */
		url('font/Roboto_300italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src:
		local('Roboto'),
		local('Roboto-Regular'),
		/* from https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2 */
		url('font/Roboto_400.woff2') format('woff2');
}

@font-face {
	font-family: 'Pattaya';
	font-style: normal;
	font-weight: 400;
	src:
		local('Pattaya'),
		local('Pattaya-Regular'),
		/* from https://fonts.gstatic.com/s/pattaya/v4/ea8ZadcqV_zkHY-XBdet9g.woff2 */
		url('font/Pattaya_400.woff2') format('woff2');
}



/************************************************
*	Global										*
************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
sub {vertical-align: sub;}
sup {vertical-align: super;}

/************************************************
*	Cookie Banner										*
************************************************/


#cookiedingsbums a, #cookiedingsbums a:hover {color:#fff; text-decoration:underline;}

#cookiedingsbums div {padding:10px; padding-right:40px;}

#cookiedingsbums { 
	
  background:rgba(129, 145, 163,0.8);
   position:fixed;
   display:block; text-align:left;  -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; color:#fff;
   position:fixed; text-align:center;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:14px; 
   line-height:auto;}

#cookiedingsbumsCloser {
   color: #777;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 5px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 5px;
   cursor:pointer;
   border-top:1px solid white; 
   border-left:1px solid white; 
   border-bottom:1px solid #7b92a9; 
   border-right:1px solid #7b92a9; 
   padding:4px;
   background: #ced6df; /* Old browsers */
   background: -moz-linear-gradient(top, #ced6df, #f2f6f9 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ced6df), color-stop(100%,#f2f6f9)); 
   background: -webkit-linear-gradient(top, #ced6df,#f2f6f9 100%); 
   background: -o-linear-gradient(top, #ced6df,#f2f6f9 100%); 
   background: -ms-linear-gradient(top, #ced6df,#f2f6f9 100%); 
   background: linear-gradient(to bottom, #ced6df,#f2f6f9 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(    startColorstr='#ced6df', endColorstr='#f2f6f9',GradientType=0 ); 
 }

#cookiedingsbumsCloser:hover {border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #7b92a9; border-left:1px solid #7b92a9;}

/************************************************
*	Content										*
************************************************/



body {
	background: #ffffff;
	color: #435764;
	font-size: 14px; font-weight:300; 
	font-family: Roboto, Arial, Helvetica, sans-serif;
	line-height: normal;
	margin: 0px;
	padding: 0px;
	}
	
a:link, a:visited, a:hover  {color:#435764; text-decoration:underline; font-weight:300;}
a:hover {text-decoration:none;}

b, strong {font-weight:400;}


#bild_cont, #video_cont {position:fixed; width:100%; height:auto; display:block; overflow:hidden;}	
.slider {display:block; position:absolute; width:100%; height:100%; left:0px; top:0px;}
.bild_paralax_v {display:block; overflow:hidden; position:absolute; left:0px; top:0px; width:100%; height:auto;}
.bild_paralax {width:100%; height:auto; position:absolute; left:0px; top:0px; display:block; padding:0; margin:0;}
.bild_paralax img {width:100%; height:100%; padding:0; margin:0;}
#pic8, #pic7 {display:none;}

.logo {display:block; position:absolute; left:0; top:0; width:100%; height:auto; padding:30px 0;
background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.logo img {width:30%; height:auto;}

.sliderTxt {display:block; position:relative; float:left; width:100%; height:auto;  /*background:rgba(0, 0, 0, 0.2);*/ overflow:hidden;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */

}
.st_item {display:block; position:absolute; width:100%; height:auto; left:0px; top:0px; color:#FFF;}
.st_item h1 {display:block; width:100%; position:relative; height:auto; font-family:Pattaya; font-weight:400; text-align:center; font-size:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0px;}
.st_item p {display:block; width:100%; position:relative; height:auto; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0 20px; font-size:12px;}
#btnLeft, #btnRight, #btnLeft_w, #btnRight_w  {display:block; position:absolute; left:1%; top:0px; width:5%; height:100%; min-width:30px; background-image:url(../img/pf.svg); background-repeat:no-repeat; background-position:center; cursor:pointer; background-size:auto 30px;}
#btnLeft_w, #btnRight_w {background-image:url(../img/pf_rot.svg);}
#btnRight, #btnRight_w {left:0; margin-left:0; transform:rotateY(180deg); -webkit-transform:rotateY(180deg);}

.content {display:block; position:relative; width:100%; height:auto; float:left; pointer-events:none;}

.loch {display:block; position:relative; float:left; width:100%; height:auto; pointer-events:none;}
.loch_tit {display:block; width:100%; background:rgba(0, 0, 0, 0.2); text-align:center; color:#FFF; font-family:Pattaya; font-weight:400; font-size:30px; line-height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:absolute; top:0px; left:0px; height:auto;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#73000000',GradientType=0 ); /* IE6-9 */
}

.content_item {display:block; position:relative; float:left; width:100%; height:auto; margin:0px;  background-color:#FFF; pointer-events:auto;}
.txt_start, .txt2, .txt4, .txt5 {display:block; width:100%; position:relative; float:left; height:auto; text-align:center; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:40px 20px; font-size:14px; font-weight:400;}
.txt2 { background-color:#c12224; color:#FFF;  padding:50px 20px;}
.txt3 {display:block; width:100%; position:relative; float:left; height:auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:40px 20px; font-size:14px; font-weight:300;}
.txt3 p, .txt3 h1, .txt3 h2 {margin-bottom:20px;}
.txt4 { background-color:#8191a3; color:#FFF; padding:50px 20px;}
.txt5 {background-color:#fff; color:#727271; padding:50px 10%; text-align:center; font-family:Pattaya; font-weight:400; font-size:30px; line-height:50px;}

.news {display:block; position:relative; width:310px; height:auto; margin:0 auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0px 0px 40px 0px;}
.news_item {display:inline-block; position:relative; float:left; width:300px; height:300px; margin:5px; background-color:#FFF; overflow:hidden;}

.news_item_bild {display:block; position: absolute; width:300px; height:300px; top:0; left:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.news_item_info {display:block; position: absolute; width:300px; height:300px; top:300px; left:0; background:rgba(129, 145, 163, 0.9); color:white; padding:5%; 
box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.news_item_info h3 {color:#ffffff; font-size:20px; margin:0 0 10px 0; font-weight:normal;}
.news_item_info p {color:#ffffff; font-size:14px; margin:0 0 20px 0; display:block;}
.news_item_info a:link, .news_item_info a:visited, .news_item_info a:hover  {color:#fff; text-decoration:underline; font-weight:300;}
.news_item_info a:hover {text-decoration:none;}



.angebot {display:block; position:relative; width:90%; height:auto; margin:0 auto;}
.angebot_item {display:inline-block; position:relative; float:left; width:100%; height:auto; margin:0px 0px 40px 0px; background-repeat:no-repeat; background-position:center top; background-size:40px 40px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding-top:50px;}
.angebot_item  h1 {display:block; width:100%; position:relative; height:auto; font-family:Pattaya; font-weight:400; text-align:center; font-size:24px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:0px 0px 20px 0px;}
.angebot_item  p {text-align:center; font-size:14px;}
#Beratung {background-image:url(../img/Beratung.svg);}
#Design {background-image:url(../img/Design.svg);}
#Medien {background-image:url(../img/Medien.svg);}
#Online {background-image:url(../img/Online.svg);}


.cont_table {display:table; position:relative; float:left; width:100%; height:auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.contact_tr {display:block; width:100%; height:auto;}
.contact_td {display:block; width:100%; height:auto; float:left; position:relative; text-align:left; font-weight:300;}
.contact_td a:link, .contact_td a:visited, .contact_td a:hover  {color:#fff; text-decoration:underline; font-weight:300;}
.contact_td a:hover {text-decoration:none;}
.contact_td p {margin-bottom:20px;}
.antwort {display:block; padding:3px 0; width:100%;}
.mail_error { color:#ff0308; }
#captcha_image_audio_controls img {width:24px; height:24px;}
.contact_td a img {width:24px; height:24px;}
#captcha_image {width:auto; height:auto;}

input, textarea {width:300px; height:auto; background: #ffffff; color: #435764; font-size: 14px; font-weight:300; font-family: Roboto, Arial, Helvetica, sans-serif; border:#ccc solid 1px; padding:3px;}
textarea {height:150px;}

#Senden {border:#fff solid 1px; width:auto; cursor:pointer; background-color:#8191a3; color:#FFF; padding:3px 6px; -webkit-border-radius:10px; border-radius: 10px;}


.map_kontakt  { float:left; display:block; width:100%; height:600px; margin:0; position:relative; background-color:#fff; overflow:hidden;}
#map-canvas {position:absolute; left:50%; top:0; width:100%; height:100%; margin:0 0 0 -50%;}
.mapInfo { font-family:Roboto, sans-serif; color:#435764; font-size:12px; line-height:14px;}


#webdog {display:block; position:relative; width:90px; height:90px; background-image:url(../img/webdog.svg); background-position:center center; background-repeat:no-repeat; background-size:100% 100%; cursor:pointer; margin:0 auto 30px auto;}
#webdog:hover {background-image:url(../img/webdog_hover.svg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg);}

@media only screen and (min-width: 481px) {

}


@media only screen and (min-width: 769px) {
.logo {text-align:left;}
.logo img { margin-left:5%; width:20%}	

.st_item h1, .txt2 h1, .angebot_item  h1 {font-size:35px; padding-bottom:15px;}
.txt2 h1 {font-size:40px;}
.loch_tit {font-size:40px; line-height:120px;}
.st_item p {padding:0 10%; font-size:14px;}
.txt_start  {padding:50px 10%; font-size:16px;}
.txt2, .txt4  {padding:60px 10%; font-size:16px;}
.txt3  {padding:50px 10%;}
.txt5 {font-size:40px; line-height:60px; padding:60px 20%;}
.news {width:640px; padding-bottom:50px;}
.news_item {margin:10px;}
.angebot {width:500px;}
.angebot_item {width:500px; background-size:90px 90px; padding-top:75px;}
.angebot_item  p {font-size:16px;}
#webdog { width:120px; height:120px;}
}

@media only screen and (min-width: 1000px) {
.logo img {width:15%}	
.st_item h1, .angebot_item  h1  {font-size:40px;}
.st_item p {padding:0 20%; font-size:16px;}
.txt_start {padding:60px 20%; font-size:18px;}
.txt2, .txt4 {padding:80px 20%; font-size:18px;}
.txt3  {padding:60px 20%; font-size:16px;}
.angebot_item  p {font-size:18px;}
.txt2 h1 {font-size:50px;}
.loch_tit {font-size:50px; line-height:150px;}
.txt5 {font-size:50px; line-height:70px; padding:80px 30%;}
.contact_tr {display:table-row;}
.contact_td {display:table-cell; vertical-align:top; width:50%;}
input, textarea {font-size:16px;}
#webdog { width:150px; height:150px;}
}

@media only screen and (min-width: 1200px) {
.logo img {  width:13%}	
#btnLeft, #btnRight {background-size:auto 40px;}
.st_item h1, .angebot_item  h1 {font-size:45px;}
.st_item p {padding:0 25%; font-size:18px;}
.txt_start {padding:80px 25%; font-size:22px;}
.txt2, .txt4 {padding:120px 25%; font-size:22px;}
.txt3  {padding:80px 25%;}
.news {width:990px;}
.news_item {margin:15px;}
.angebot {width:1080px;}
.txt2 h1 {font-size:55px;}
.loch_tit {font-size:55px; line-height:170px;}
.txt5 {font-size:55px; line-height:80px; padding:100px 35%;}
.angebot_item {margin:20px; width:500px; height:400px; background-size:70px 70px; padding-top:85px;}
.angebot_item  p {font-size:22px;}
#webdog { width:170px; height:170px;}
input, textarea {width:400px;}
}