@-ms-viewport{width:device-width;}

/*Grundsaetzliches*/
html{overflow-y:scroll;} 
body{margin:0; padding:0; font-size:95%; font-family: Verdana, Geneva, sans-serif; font-weight:400; color:rgb(26,26,26); line-height:1.4em;}
html[xmlns] .clear{display:block;}
*html .clear{height:1%;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
.hidden{display:none;}
.screen{display:block;}

body .wrapper{display:block; width:100%; margin:0 auto; padding:0; text-align:left;}
header, main, footer, #copyright{display:block; width:95%; max-width:1024px; margin:0 auto; padding:10px;}
article, aside, figcaption, section{display:block; margin:0; padding:0;}
figure{display:block; margin:0; padding:0;}

.row1{color:rgb(26,26,26); background:rgb(255,255,255);}
.row2{background:rgb(255,255,255); background:url("../image/index.jpg") no-repeat; background-position:center center;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.row21{background:rgb(204,204,204);}
.row3{color:rgb(26,26,26); background:rgb(204,204,204);}
.row4{color:rgb(26,26,26); background:rgba(255,255,255);}
.row5, .row5 a{color:rgb(255,255,255); background:rgb(26,26,26);}
.row6, .row6 a{color:rgb(26,26,26); background:rgb(255,255,255);}

.full_width, .two_half, .three_third, .four_quarter{display:block; width:100%; clear:both;}
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 4.21052%; list-style:none;}
.first{margin-left:0; clear:both; }
.one_quarter{width:21.8421%;}
.one_third{width:30.52631%;}
.one_half, .two_quarter{width:47.89473%;}
.two_third{width:65.26315%;}
.three_quarter{width:73.94736%;}

.fl_left{float:left;}
.fl_right{float:right;}
.fl_center{float:center;}
.ph{margin-left:20px;}
.top20{padding-top:20px;}
.top40{padding-top:40px;}
.last{display:block; margin:0; padding-bottom:20px;}
.width{max-width:512px; margin:0 auto; padding:0; float:center;}

/*Scrollen*/
.menu.sticky {position:fixed; background:rgb(255,255,255); border-bottom:2px solid rgb(204,0,0);}
.back-to-top{background:rgb(204,204,204); border:1px solid rgb(127,127,127); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; font-size:1.8em; font-weight:700; color:rgb(127,127,127); position: fixed; bottom:20px; right:20px; padding:5px 10px 10px 10px; z-index: 100;}

/*Farben*/
.gray10{color:rgb(26,26,26);}
.gray30{color:rgb(71,71,71);}
.gray50{color:rgb(127,127,127);}
.gray70{color:rgb(179,179,179);}
.gray80{color:rgb(204,204,204);}
.gray90{color:rgb(229,229,229);}
.white{color:rgb(255,255,255);}
.red{color:rgb(204,0,0);}
.black{color:rgb(0,0,0);}

/*Schriften und Links*/
.font{font-family: Georgia, serif; font-weight:400; font-style:normal;}
a{outline:none; text-decoration:none; color:rgb(26,26,26); cursor:pointer;}
a:hover{color:rgb(204,0,0);}
.jump {visibility: hidden; height: 0px !important; position: absolute; margin: -200px;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;} 
.small{font-size:0.85em; font-weight:400;}
.large{font-size:1.2em; font-weight:400;}
.bold{font-weight:700;}
.italic{font-style:italic;}
.line{border-bottom:1px solid rgb(127,127,127);}
.uline{text-decoration: underline;}
.active{color:rgb(204.204.204);}
.nowrap{white-space:nowrap;}
.tshadow{letter-spacing: .01em; text-shadow: 1px 1px 0px rgb(255,255,255);}
h1{font-size:1.4em; font-weight:400; line-height:1.8em;}
h2{font-size:1.2em; font-weight:400;}
h3{font-size:1.125em; font-weight:400; padding:0 0 5px 0; border-bottom:2px solid rgb(204,204,204);}
h4{font-size:1.125em; font-weight:400;}
h5{font-size:1.125em; font-weight:700;}
h6{font-size:1em; font-weight:400;}

/*Bilder*/
img{width:auto; max-width:100%; height:auto; margin:0; padding:0;}

/*Button und Boxes*/
.button{display:block; width:100%; max-width:100px; margin:20px 0; padding:5px; background:rgb(204,204,204); border:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; box-sizing:border-box; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.button1{display:block; width:100%; margin:10px 0; padding:5px; background:rgb(204,204,204); border:none; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.button a, .button1 a{display:block; padding:5px; color:rgb(26,26,26);}
.button a:hover, .button1 a:hover{color:rgb(204,204,204);}
.flexbox-section{margin:-30px 0 0 0; display:flex; flex-wrap:wrap; width:100%;}
.flexbox{display:flex; margin:10px auto; width:100%; background:rgb(255,255,255); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow:0px 0px 10px 3px rgb(204,204,204); -moz-box-shadow:0px 0px 10px 3px rgb(204,204,204); -o-box-shadow:0px 0px 10px 3px rgb(204,204,204); -ms-box-shadow:0px 0px 10px 3px rgb(204,204,204); box-shadow:0px 0px 10px 3px rgb(204,204,204);}
.flexbox-content{display:flex; flex-direction:column; padding:10px; width:100%;}
.flexbox-content h2{font-size:1.2em; font-weight:700; color:rgb(26,26,26); margin:0; padding-bottom::5px; text-align:left;}
.flexbox-content p{flex:1 0 auto; padding:0;}
.flexbox-content a{flex:1 0 auto; padding:0; color:rgb(26,26,26);}
.flexbox-content a:hover{color:rgb(204,0,0);}
.flexbox-content img{margin-bottom:-2px;}
.box{line-height:1.4em; margin:0; padding:3px 10px; width:auto; max-width:100%; height:auto; background:rgb(255,255,255); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -webkit-box-shadow:0px 0px 10px 3px rgb(204,204,204); -moz-box-shadow:0px 0px 10px 3px rgb(204,204,204); -o-box-shadow:0px 0px 10px 3px rgb(204,204,204); -ms-box-shadow:0px 0px 10px 3px rgb(204,204,204); box-shadow:0px 0px 10px 3px rgb(204,204,204);}

/*Toogle*/
.accordion-wrapper{display:block; padding-top:5px;}
.accordion-wrapper .accordion-title span, .accordion-wrapper .accordion-title.active span{display:block; padding:0; color:rgb(26,26,26);}
.accordion-wrapper .accordion-title span:hover{color:rgb(204,0,0);}
.accordion-wrapper .accordion-content{display:none; margin:0; padding:0;}

/*Kopfteil*/
header #logo{display:block; float:left; position: relative; width:auto; max-width:50%; height:auto; clear:right;}
header #logo img{display:block; position: relative; width:auto; max-width:100%; height:auto;}
header .nav-bar{display:none;}
header nav{margin:20px 0 0 0; padding:0; float:right; position:relative; width:auto; max-width:95%; height:auto; clear:right;}
header nav ul{list-style:none;}
header nav ul li{float:left; position:relative;}
header nav:after{content:""; display:block; clear:both;}
header nav ul li a{display:block; padding:10px 20px; color:rgb(26,26,26); text-decoration:none;}
header nav ul li a:hover{color:rgb(204,0,0);}
header nav ul li:hover .children{display:block;}
header nav ul li .children{display:none; background:rgba(255,255,255,0.9); position:absolute; width:200%; z-index:1000;}
header nav ul li .children span{display:none;}
header nav ul li .children li{display: block; width:100%; border-top:1px solid rgb(127,127,127);}
header nav ul li .children li:first-child{display: block; width:100%; border-top:none;}
header nav ul li .children li a{margin:0; padding:10px 0;}

/*Slogan*/
#intro{display:block; width:95%; max-width:1024px; margin:0 auto; padding:12% 0; letter-spacing: .05em;}
#intro1{display:block; width:95%; max-width:1024px; margin:0 auto; padding:1% 0; letter-spacing: .05em;}
#intro h2{display:block; margin:0; padding:0; font-size:2em; text-align:right; line-height:1.4em;}
#intro1 h2{display:block; margin:0; padding:0; font-size:1.4em; text-align:right; line-height:1.4em;}

/*Hauptteil*/
main ul{list-style:none; margin:0; padding:0;}
main li{margin:10px 0; padding:0;}
main ul.disk{list-style-type: disc; margin:0; padding-left:15px; list-style-position:outside;}
main ul.circle{list-style-type: circle; margin:0; padding-left:15px; list-style-position:outside;}
main li.site a{color:rgb(26,26,26);}
main li.site a:hover{color:rgb(204,0,0);}
main article.width{max-width:512px; margin:0 auto; padding-bottom:10px; float:center;}

/*Bildergallery*/
#portfolio{display:block; width:100%; line-height:1.5em;}
#portfolio ul{margin:0; padding:0; list-style:none;}
#portfolio li{display:block; float:left; width:24%; margin:0 0 0 1%; padding:0;}
#portfolio li.first{margin-left:0;}

/*Fussteil*/
#copyright p, #copyright a{line-height:1.2em;}
#copyright a:hover{color:rgb(204,0,0);}

/*Breakpoints*/
@media screen and (min-width:320px) and (max-width:480px) {
	header, #intro, main, footer, #copyright{display:block; width:95%; margin:0 auto; padding:10px;}
	#intro{display:block; width:95%; max-width:1024px; margin:0 auto; padding:13% 0; letter-spacing: .05em;}
	#intro h2{display:block; margin:0; padding:0.5em; font-size:1.4em; text-align:right; line-height:1.4em;}
	.one_half, .one_third, .two_third, main section.one_half, footer article.one_third, #portfolio li{display:block; float:none; width:auto; margin:0;}
	footer #right, footer #center, footer #left{text-align:center; margin-bottom:20px;}
	footer table.contact{line-height:2.5em; text-align:left; margin:0 auto; margin-top:16px;}
	#copyright p, #copyright a{float:none; text-align:center;}
}

@media screen  and (min-width:481px) and (max-width:768px) {
	header, #intro, main, footer, #copyright{display:block; width:95%; margin:0 auto; padding:10px;}
	#intro{display:block; width:95%; max-width:1024px; margin:0 auto; padding:13% 0; letter-spacing: .05em;}
	#intro h2{display:block; margin:0; padding:0.5em; font-size:1.4em; text-align:right; line-height:1.4em;}
	footer #right, footer #center, footer #left{text-align:center; margin-bottom:20px;}
	footer table.contact{line-height:2.5em; text-align:left; margin:0 auto; margin-top:16px;}
	#copyright p, #copyright a{float:none; text-align:center;}
}

@media screen and (min-width:769px) and (max-width:1024px) {
	.flexbox{width:32%;}
	footer section.right, footer section.left{float:center;}
}

@media screen and (min-width:1025px) {
	body{font-size:0.95em; line-height:1.4em;}
	#intro h2{font-size:3em;}
	.flexbox{width:32%;}
}

/*Navigation mobiler Endgeraete*/
@media all and (max-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	/*Hamburger-Icon*/
	.hamburg{display: block; background:rgb(102,102,102); width:50px; height:40px; position: relative; float:right; border-radius:4px; transition: border-radius .5s;}
	.line{position:absolute; left:10px; height:2px; width:30px; background: rgb(255,255,255); border-radius:2px; display:block; transition:0.5s; transform-origin:center;}
	.line:nth-child(1){top:10px;}
	.line:nth-child(2){top:20px;}
	.line:nth-child(3){top:30px;}
	.hamburg.checked .line:nth-child(1){transform: translateY(10px) rotate(-45deg);}
	.hamburg.checked .line:nth-child(2){opacity:0;}
	.hamburg.checked .line:nth-child(3){transform: translateY(-10px) rotate(45deg);}
	header .nav-bar{display:block; width:20%; position:absolute; top:20px; right:20px;}
	header nav{background:rgba(204,204,204,0.9); width:50%; height:auto; position:absolute; float:left; right:150%; top:50px; overflow:hidden; z-index:1;}
	header nav ul li{display:block; background:mone; border-bottom:2px solid rgb(127,127,127); width:100%; margin:0; padding:0;}
	header nav ul li:last-child{border-bottom:none;}
	header nav ul li a{display:block; color:rgb(26,26,26); margin:0; padding:10px 0;}
	header nav ul li a:hover{display:block; color:rgb(204,0,0);}
	header nav ul li .children{width:100%; position:relative; background:none; overflow:hidden; display:none; z-index:1000;}
	header nav ul li:hover .children{display:none;}
	header nav ul li .children li{display: block; width:100%; border-top:none; border-bottom:1px solid rgb(127,127,127);}
	header nav ul li .children li:last-child{border-bottom:none;}
	header nav ul li .children a:hover{color:rgb(204,0,0);}
	header nav ul li .children span{display:inline-block; margin-right:10px;}
	header nav ul li .children a{margin:0; padding:10px 0;}
}