/* MATRIX-MAIN.CSS - dash, dev, cm & toolz
* Main colors:
* black 	- #000,rgba(0,0,0,1)
* dark		- #333/#555,rgba(51,51,51,1)/rgba(85,85,85,1)
* medium	- #999,rgba(153,153,153,1)
* light		- #ddd/#eee,rgba(221,221,221,1)/rgba(238,238,238,1)
* white		- #fff,rgba(255,255,255,1)
* blue		- #375D81,rgba(55,93,129,1)
* green		- #8FAD26,rgba(143,173,38,1)
* magenta	- #8E3557,rgba(142,53,87,1)
* cyan		- #209f96,rgba(32,159,150,1)
* violett	- #9168A1,rgba(145,104,161,1)
* red		- #8b0000,rgba(139,0,0,1)
* yellow	- rgba(228,184,0,1)
*/

/*
Neu 2015/16:
Box sizing - Keine Ränder mehr
Background cover - Background ausfüllen
Viewport height(vh)- Backgroundhöhe 100%
Flexbox - Open
*/

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Montserrat|Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Changa+One|Rhodium+Libre|Gurajada|Pridi:700|Cinzel:900|Anonymous+Pro|Ubuntu+Mono|Source+Code+Pro|
	Roboto|Roboto+Mono|Roboto+Condensed|Roboto+Slab|Rubik+Mono+One|Nova+Mono|Imprima|Pridi|Cutive|Ultra|Merriweather|Chango|Baloo|Slackey|Black+Ops+One|Luckiest+Guy|Sigmar+One|
	Audiowide|Chewy|Titillium+Web:900|Play|Maven+Pro:400&v2|Rajdhani|Raleway|Source+Sans+Pro|Oswald|Dosis|Anton|Abel);
@import url(m.proto.css);
@import url(m.script.css);


/* GLOBAL */
*,*::before,*::after {margin:0;padding:0;box-sizing:border-box;}
html {overflow-y:scroll;background:url() no-repeat center -150px fixed;background-size:cover;}
body {background:rgba(245,245,245,.9);color:#333;font:20px 'Open Sans',Arial,Sans-Serif;font-weight:400;font-style:normal;line-height:1.5;}
.overlay {overflow:hidden;background:rgba(255,255,255,0);margin:0 auto;height:700px;width:100%;position:relative;z-index:99}
.overlay_bott {margin:0;width:100%;height:25%;position:fixed;left:0;bottom:0;z-index:-1;
	background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(45%,rgba(255,255,255,.9)),color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,1) 100%);
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 45%,rgba(255,255,255,1) 100%);
}
#main {background: url(img/bgd/tools.jpg) no-repeat center -150px fixed;}
#toolz {background: url(img/bgd/tools.jpg) no-repeat center -150px fixed;}
#bauen {background: url(img/bgd/bg_concrete1.jpg) no-repeat center -250px fixed;}
#freizeit {background: url(img/bgd/tuscany1.jpg) no-repeat center -250px fixed;}
#gastro {background: url(img/bgd/table.jpg) no-repeat center -250px fixed;}
#tech {background: url(img/bgd/hitech4.jpg) no-repeat center -150px fixed;}
#motor {background: url(img/bgd/cockpit3.jpg) no-repeat center -150px fixed;}
#grid {background:url(img/raster2.png) repeat center 0 fixed;}
/* Older Browsers */
header,hgroup,nav,main,section,article,figure,figcaption,aside,footer,details,summary {display:block;}

h1,h2,h4,.nav a,nav a {color:#333;font-family: 'Montserrat',Arial,sans-serif;}
h1 {font-size:55px;margin:10px 0;letter-spacing:5px;}
h2 {color:#555;font-size:40px;text-transform:uppercase;margin:25px 0 20px;padding-bottom:15px;}
h3 {color:rgba(33,66,99,.8);font-size:28px;margin:20px 0 15px;padding:3px 0 3px;}
h4 {overflow:hidden;background:#999;color:#fff;font-size:24px;margin:10px 0 15px;padding:5px 10px;}
p {margin:5px 0 20px;}
p strong {display:block;}
em {font-weight:500;}
a {color:#8E3557;text-decoration:none;outline:none;}
a:hover {color:#000;}
a img {border:0px;padding:0;text-decoration:none;}
a:hover img {background:none;border:#000;}
img {background:#fff;border:none;box-sizing:content-box;max-width:100%;height:auto;}
img {transition: all .2s ease-in-out;}
img:hover {transform: scale(1.1);}
ul {list-style:none;}
big {color:#8E3557;display:block;font-size:24px;font-weight:500;}
small {display:block;font-size:13px;font-weight:300;}
.huge {color:#8E3557;font-size:70px;letter-spacing:3px;text-align:center;text-transform:uppercase;}
.block {display:block;border:none;width:100%;}
.dvd {margin:30px 0;overflow:hidden;}
.center {text-align:center;}
.color {background:rgba(142,53,87,.9)}

/* GRID */
.outer,main {} /* wrapper */
.outer,main > section {} /* wrap */
.outer,main > section > div {} /* inner */
.wrapper,.layer {background:rgba(255,255,255,.8);border:1px solid #ccc;margin:5% auto 0;padding:0 25px 50px;min-height:600px;width:100%;max-width:1280px;}
.wrap,section {overflow:hidden;margin:0 auto 40px;padding-bottom:30px;max-width:1280px;width:100%;position:relative;}
#index .wrap {overflow:hidden;}
.outer,.bar,.full {overflow:hidden;background:rgba(50,50,50,1);margin-top:-20px;padding:20px 0;width:100%;}
.f1 {background:rgba(200,200,200,.9);}
.inner {display:inline-block;border:1px solid #ddd;padding:10px 20px 10px;width:auto;}
.w2,.w3,.w4,.w6,.w8,.w9,.w10,.w12 {display:block;float:left;margin:1% 2% 1% 0;}
.w2:last-child,.w3:last-child,.w4:last-child,.w6:last-child,.w8:last-child,.w9:last-child,.w10:last-child,.w12:last-child {margin-right:0;}
.w2 {width:15%;} .w3 {width:23%;} .w4 {width:32%;} .w6 {width:49%;} .w8 {width:66%;} .w9 {width:75%}.w10 {width:83%;} .w12 {width:100%;}

/* HEADER-NAV */
/* .content .wrap {padding:20px 0 30px;} */
.top,.header,header,.sub,.content,main,.main,.footer,footer {width:100%;position:relative;}
.top {background:rgba(51,51,51,.6);font-size:14px;position:fixed;top:0;z-index:999;}
.top a {float:left;background:none;color:#ddd;text-align:center;margin-left:-20px;padding:7px 25px;}
.top a:hover {background:#ddd;color:#000;margin-left:0;}
.top span {float:right;width:415px;}
.top span a {border-left:1px solid #555;margin:0;}
.top span a:last-child {border-right:1px solid #555;}
.top strong {text-transform:uppercase;}
header {background:rgba(240, 240, 240,.5);margin:0;padding:0 0 20px;height:80px;top:0;z-index:999;}
#index header {background:rgba(255,255,255,.9);}
/* Framework angepasst! */
h1 {color:#fff;font-size:60px;font-weight:500}
header {background:rgba(50,50,50,.9);padding:20px 0 0;height:auto;}
nav a {color:#999;}
header nav {top:20px;}
nav {position:absolute;top:20px;right:0;}
nav a {float:left;color:#ccc;font-size:18px;text-align:center;padding:5px 20px;min-width:100px;}
nav a:hover {background:#999;color:#fff;}
.current {background:#999;color:#fff;}
.sub {background:rgba(255,255,255,.8);padding:7px 0;}
.sub a {color:#375D81;margin-right:15px;padding:2px 5px;}
.sub a:hover {color:#000;}
#gastro .sub {background:rgba(143,173,38,1)}

/* CONTENT-SIDE */
.content,main {padding:20px 0 30px;}
.bg1 {background:rgba(255,255,255,.9);}
.main {float:left;margin-right:0;}
.side,aside {float:left;}
.first {margin-top:0;}
.side a,aside a {margin-bottom:5px;}
.links a {display:block;}

/* Index-Nav */
#index h1 {font:120px 'Pridi',serif;color:rgba(150,150,150,.5);font-weight:500;letter-spacing:10px;text-align:center;text-transform:uppercase;margin-top:30px;}
.index {float:left;margin-bottom:30px;width:100%}
.index h3 {background:#8FAD26;color:#fff;margin:0;padding-left:10px;}
.index li {float:left;margin-right:1%;width:24%;}
.index li a {display:block;background:rgba(255,255,255,.8);line-height:30px;margin-bottom:2px;padding-left:10px;}
.index li a:hover {background:#8E3557;color:#fff;}
.index li:nth-of-type(4n) {margin-right:0;}

/* Navigations - Teaser, Tabs, Cats, Cards, Buttons */
.teaser {margin:50px 0;}
.teaser li {float:left;text-align:center;padding:30px 0;margin-right:1%;width:24%;height:315px;}
.teaser li:last-child {margin-right:0;}
.teaser li:hover {position:relative;z-index:999;}
.teaser li a,.teaser li a:hover {background:none;}
.teaser img {background:none;height:209px;position:relative;width:209px;z-index:1;}
.teaser span {position:relative;z-index:2;}
.teaser p {padding:10px 10px 0;text-align:center;}
.teaser strong {color:#555;display:block;font-size:20px;text-transform:uppercase;}
.tabs li a {float:left;background:rgba(55,93,129,1);color:#fff;text-align:center;
	margin:0 10px 2px 0;padding:10px 0;width:24%;}
.tabs li a:hover {background:rgba(55,93,129,.7);color:#000;}
.note {color:red}
#bau .tab-container {margin-top:-30px;}
.cats li {float:left;color:#fff;text-align:left;width:25%;min-height:100px;}
.cats li p {margin:0 10px 5px 0;}
.cats li p:hover {background:#eee;}
.cats li a {display:block;background:url('img/icons/data-15.png') left 35% no-repeat;line-height:30px;padding-left:25px;}
.cats li a:hover {background:#375D81;color:#fff;}
.cats li strong a {background:#8FAD26;font-size:24px;color:#fff;padding:5px 10px;}
.cats li strong a:hover {padding-left:10px;}
/* abgleichen!!! */
.cats {padding:20px 0;}
.cats li {font-size:24px;}
.cats li a {overflow:hidden;background:rgba(142,53,87,.5);color:#fff;font-size:24px;padding:20px 15px;margin:5px 5px;}
.cats li a:hover {background:rgba(142,53,87,1);}
.cats li a:first-child {background:rgba(100,100,100,.9);text-transform:uppercase;padding:10px 15px;}
.cards {margin-top:20px;padding:20px 0;}
.cards li a {float:left;background:rgba(143,173,38,.5);color:#fff;font-size:24px;padding:20px 25px;margin:5px 5px;width:24%;min-height:100px;}
.cards li a:hover {background:rgba(143,173,38,1);}
.cards li a:first-child {background:rgba(220,220,220,.8);color:#999;padding:10px 25px 15px;width:98.5%;min-height:20px;}
.butts {margin-bottom:30px}
.butts a {display:inline-block;background:#8E3557;color:#fff;padding:5px 15px;margin:5px 5px;}
.butts a:hover {background:#555;color:#fff;}
.bbt,.bob {border-bottom:1px dotted #999;margin:30px 0 30px;}
.btt,.btr,.btn {background:#8E3557;color:#fff;padding:7px 20px;}
.btt:hover,.btr:hover {background:#333;color:#fff;}
.btr {font-size:18px;margin:0;text-transform:uppercase;text-shadow: 1px 0.5px 1px #030303;}

/* Media - iFrames, Images, Video */
iframe {background:none;border:none;margin:10px 0 20px;padding:0;min-height:590px;width:100%;}
.vidbox,.vidbox1,.vbox {height:507px;width:900px;}
.audbox,.abox {background:#999;border:1px solid #ddd;height:80px;width:350px;border-radius:5px;}
.panbox,.pbox {}
.thumbs {background:rgba(50,50,50,.8);padding:0 10px 0 25px;height:390px;overflow-y:scroll;}
.thumbs h4 {color:#eee;border-bottom:1px solid #999;}
.thumbs img {width:120px;}
#bauen .thumbs {height:590px;}
#bauen h3 {font-size:48px;}
#bauen h4 {margin-top:50px;}
#bauen strong {font-size:24px;}

.vlist {width:800px;position:absolute;top:20px;right:0;z-index:9999;}
.vlist li {float:right;text-align:center;margin-right:2px;width:24%;position:relative;}
.vlist li a {display:block;background:rgba(215,40,40,.9);color:rgba(255,255,255,1);padding:3px 10px;text-transform:uppercase;}
.vlist li a:hover {background:rgba(30,30,30,.8);}
.vlist li ul {display:none;overflow-y:scroll;scrollbar-base-color:#999;background:rgba(30,30,30,.8);height:490px;width:100%;min-width:350px;}
.vlist li:hover ul {display:block;} /* width:auto > ganze Breite! */
.vlist h4 {display:block;color:rgba(50,50,50,.8);font-size:20px;font-weight:normal;padding:5px 10px;border:none;}
.vlist ul li {text-align:left;width:100%;}
.vlist ul li a {display:block;background:rgba(50,50,50,.8);font-size:14px;padding:5px 10px;margin:2px 0;min-height:90px;}
.vlist ul li a:hover {background:rgba(100,100,100,.8);}
.vlist .last {float:right}

.vthumb {float:left;background:rgba(200,200,200,.8);margin:5px 10px 5px 0;width:90px;}
.vthumb img {background:none;width:100%;margin:0;}
.vtitle {float:left;margin-top:5px;width:200px;}
.list {overflow:hidden;width:33%;}
.list a {display:block;}

/* Footers */
footer {text-align:center;margin-top:5px;padding:20px 0 20px;}
footer ul {line-height:20px;text-transform:uppercase;width:600px;}
footer li  {float:left;padding-right:25px;}
footer a {color:rgba(55,93,129,1)}
footer a:hover {color:#000;}
/* main.htm */
footer span {display:block;background:rgba(100,100,100,.5);text-align:center;margin:0 auto;padding:10px;width:20%;}

/* CSS3 - Borders,Transparency,Shadows */
.btt {border-radius:2px;}
.teaser li {filter:alpha(opacity=80);opacity:0.8;}
.teaser li:hover {filter:alpha(opacity=100);opacity:1;}
.teaser li:hover, .shadow:hover, .show a:hover {box-shadow:0px 15px 30px #000;}
.teaser li:hover,.show a:hover {transition:box-shadow 0.5s linear;}
.nav a:hover,nav a:hover {transition:background 0.5s ease;}

/*
	{-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;}
	{filter:alpha(opacity=50);opacity:0.5;}
	{filter:alpha(opacity=100);opacity:1;}
	{filter:alpha(opacity=70);opacity:0.7;}
	{box-shadow:5px 5px 5px #666;}
	{box-shadow:0px 15px 30px #000;} - iframe
*/

/* SCRIPTS 
================================================ */
/* STICKY NAV */
.sticky {position:fixed;top:0;left:0;z-index:2;box-shadow:0 2px 4px rgba(0, 0, 0, 0.4);}
/* SCROLLUP @markgoodyear*/
#scrollUp {background:#555 url("img/top-140.png") center;border:1px solid #ccc;width:100px;height:100px;bottom:20px;right:20px;}


/* CUSTOM STYLES 
================================================ */
h1 {margin:5px 0 15px;}
.panel-container {overflow:auto;height:400px;}
.sub .wrap {padding-bottom:0;}
.sub {background:rgba(200,200,200,.8);}
.sub a {color:#eee;font-weight:500;}
/* Rezepte */
.listing li {overflow:hidden;}
.listing span {float:left;margin:0 20px 20px 0;}
#tab-container {position:absolute;top:0;z-index:99999;}
#tab-container ul li a {display:block;padding:5px;outline:none;width:80px;}
#tab-container .panel-container {display:none;background:rgba(255,255,255,.9);overflow:auto;height:300px;}
#tab-container:hover .panel-container {display:block;}
.vidbox1 {height:585px;width:100%;}
.play {position:absolute;top:55px;right:10px;z-index:9999;width:280px;}
.play li a {float:left;margin-right:10px;}
.play li:hover ul {display:block;}
.play li ul {display:none;background:rgba(230,230,230,.7);overflow-y:scroll;margin-top:35px;padding:10px 0 0 10px;height:540px;width:100%;}
.play img {width:115px;margin:5px;}
.vthumbs {height:auto;overflow-y:scroll;padding-bottom:20px;}
.vthumbs img {width:115px;}
/* media/video.htm */
.inner {background:rgba(255,255,255,.8);padding:0 20px 20px;}
h2 {border-bottom:1px solid #ddd;color:#333;padding:8px 0;margin:0 0 20px 0;}


/* RESPONSIVE 
================================================ */
/* TABLET */
@media (max-width: 980px) {
}
/* MOBILE */
@media (max-width: 780px) {
	.w2,.w3,.w4,.w6,.w8,.w9,.w10,.w12 {width:100%;}	
}

/* PRINT */
@media print {}	
/* Smartphones */
@media only screen and (max-width: 469px) {}
/* Large smartphones */
@media only screen and (min-width: 470px) and (max-width: 699px) {}
/* Tablets and landscape large smartphones */
@media only screen and (min-width: 700px) and (max-width: 1000px) {}
/* Desktop screens */
@media only screen and (min-width: 1200px) and (max-width: 1499px){}
/* Large screen */
@media only screen and (min-width: 1500px) and (max-width: 1799px){ }
/* Very large screen */
@media only screen and (min-width: 1800px){}