@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700);

body{
	background: #FFF url(../img/sitebg.png) no-repeat fixed right bottom;
	color: #151515;
    webkit-tap-highlight-color: #ef3737;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    font-size: 12pt;
}

* {
    box-sizing: border-box;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


body, html {
	height: 100%;
	width: 100%;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}

a, a:link, a:visited{
  color: #1177bb;
}
a:hover, a:active, a.active, a:focus{
  color: #15a79f;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 35px;
    text-transform: none;
    font-family: 'Titillium Web', Helvetica,Arial,sans-serif;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0 0 10px 0;
    padding: 0;
}
h1 {
    font-size: 2.5em;
    color: #1177bb;
    margin-top: 30px;
    margin-bottom: 20px;
}
h1 span{
  font-size: 0.8em;
  color: #AAA;
  line-height: 0.6em;
}

h1 span.igel{
  font-size: 0.7em;
  color: #515f6d;
}
h2 {
    font-size: 2.8em;
    color: #3e484e;
}
h3 {
    color: #1177bb;
    font-size: 1.7em;
    font-weight: 300;
    margin-top: 20px;
}
h3 .h3sub {
    color: #999;
    font-size: 0.75em;
    font-weight: 300;
    display: block;
}
h4 {
    color: #1177bb;
    font-size: 1.3em;
    font-weight: 500;
    padding: 10px 0;
}


h5 {
    color: #454545;
    font-size: 1.25em;
    font-weight: 300;
    margin: 15px 0 5px;
}
@media (min-width: 767px){
  h1{
	margin-top: 0;
    font-size: 3.2em;  		
	}
  h3{
	margin-top: 0;
    font-size: 1.9em;  		
	}
}
header{
  padding-bottom: 80px;
}

p{
  margin: 0 0 15px 0;
}


ul{
  margin: 5px 0 15px 0;
  padding: 0 0 0 20px;
}
ul li{
  padding-bottom: 4px;
}


.btop{
  border-top:  1px solid #eee;
}
table tr td ul li{
  list-style-image: url(../img/liblack.png);
}
ul.raute li{
  list-style-image: url(../img/liblue.png);
}
ul.rauteweiss li{
  list-style-image: url(../img/liwhite.png);
}
ul.nav-tabs {
	margin-top: 0;
	border: none;
}
ul.nav-tabs li {
	margin: 0;
	margin-top: 0px;
	padding-bottom: 0;
	position: relative;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
}
ul.nav-tabs li.active{
  margin-top: 0px;
} 
ul.nav-tabs li.done{
  margin-top: -90px;
} 
ul.nav-tabs li.second.done{
  margin-top: -125px;
} 
ul.nav-tabs li a {
	margin: 0;
	padding: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover {
	color: #15a79f;
	border: none;
	background: none;
}
.nav-tabs > li > a:hover,
.nav > li > a:hover, .nav > li > a:focus {
	border: none;
	background: none;
}
ul.nav-tabs.affix {
	top:190px; /* Set the top position of pinned element */
}
ul.nav-tabs li a  > img{
  max-width: 100%;
}

.panel-default {
    border-color: #1177bb;
}

.bgblue{
background: #1177bb; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #1177bb 0%, #05a4cc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1177bb), color-stop(100%,#05a4cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #1177bb 0%,#05a4cc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #1177bb 0%,#05a4cc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #1177bb 0%,#05a4cc 100%); /* IE10+ */
background: linear-gradient(135deg,  #1177bb 0%,#05a4cc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1177bb', endColorstr='#05a4cc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: #FFF;
}
.bgblue h1, .bgblue h2, .bgblue h3{
  color: #FFF;
}
.textcontainer{
  display: block;
  margin-left: 220px;
  padding: 30px 0;
}
.bgblue .panel-default {
    border-color: #FFF;
    color: #FFF;
    font-family: 'Titillium Web', Helvetica,Arial,sans-serif;
    font-weight: 300;
    font-size:  1.1em;
    background: rgba(255,255,255, .15);
    margin: 0;
}
.bgblue .panel-default ul{
  margin-bottom: 0;
}

.negativmargin{
  margin-top: -8em;
}

	.table-stripped{
	  background: #FFF;
	}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    border-top: 1px solid #1177bb;
    line-height: 1.42857;
    font-size: 1.05em;
    padding: 4px 8px;
    vertical-align: top;
}


/* @group quadro */
.quadro h4{
  color: #3e484e;
  font-size: 1.5em;
  padding-top: 25px;
}
.quadro h4 span{
      color: #1177bb;
    font-size: 1.7em;
    float: right;
    margin-top: -15px;
}

.quadro .panel{
  padding-bottom: 110px;
}
.quadro1 {
  background: url(../img/quadro_edelstahl.png) no-repeat left top;
  background-size: contain;
}
.quadro1 .panel{
  background: #FFF url(../img/bg_quadro_edelstahl.png) no-repeat left bottom;
  background-size: contain;
}
.quadro2 {
  background: url(../img/quadro_edelstahl_daemmung.png) no-repeat left top;
  background-size: contain;
}
.quadro2 .panel{
  background: #FFF url(../img/bg_quadro_edelstahl_daemmung.png) no-repeat left bottom;
  background-size: contain;
}
.quadro3 {
  background: url(../img/quadro_keramik.png) no-repeat left top;
  background-size: contain;
}
.quadro3 .panel{
  background: #FFF url(../img/bg_quadro_keramik.png) no-repeat left bottom;
  background-size: contain;
}
.quadro4 {
  background: url(../img/quadro_polyprop.png) no-repeat left top;
  background-size: contain;
}
.quadro4 .panel{
  background: #FFF url(../img/bg_quadro_polyprop.png) no-repeat left bottom;
  background-size: contain;
}
/* @end */

.well.bgblue{
  border: none;
}
.well.bgblue .btn{
  background: transparent;
  color: #FFF;
  border-color: #FFF;
}
.well.bgblue .btn:hover{
  background: #FFF;
  color: #1177bb;
}
label{
  color: #888;
  font-weight: 300;
}
.error_box {
    background: none repeat scroll 0 0 #fad3c4;
    border: 1px solid #a75b4e;
    border-radius: 5px;
    color: #444444;
    display: none;
    font-size: 13px;
    margin: 0 0 15px;
    padding: 8px;
    width: 672px;
}
footer{
  margin-top: 30px;
  padding: 20px 0;
  border-top:  1px solid #1177bb;
  font-family: 'Titillium Web', Helvetica,Arial,sans-serif;
  font-weight: 300;
  background: #FFF;
}
footer a{
  padding-left: 20px;
}

.downloads ul{
  font-weight: bold;
}

@media (max-width: 400px){
		body{
  	padding: 15px;
  	background-size: contain;
	}
  .textcontainer{
	margin-left: 0;
	}
  ul.nav-tabs{
	display: none;  		
	}
	h2 {
    color: #3e484e;
    font-size: 2.1em;
	}
	.negativmargin{
	  margin-top: 0em;
	}
	.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
  	border-top: 1px solid #1177bb;
    line-height: 1;
    font-size: 1em;
    padding: 3px 10px 3px 0;
    vertical-align: top;
	}
	footer{
  	margin:  30px -15px 0 -15px;
	}
	footer a{
  	display: block;
  	padding: 7px;
  	text-align: left;
	}
}

@media (max-width: 799px){
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
  	border-top: 1px solid #1177bb;
    line-height: 1;
    font-size: 0.9em;
    padding: 5px 10px 5px 0;
    vertical-align: top;
	}
}
@media (min-width: 768px){
	.nav.nav-tabs.nav-stacked.affix-top {
   position: fixed;
   top: 190px;
	}
	}