/* marvel-regular - latin */
@font-face {
  font-family: 'Marvel';
  font-style: normal;
  font-weight: 400;
  src: url('/css/fonts/marvel-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/css/fonts/marvel-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/marvel-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/marvel-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/marvel-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/marvel-v14-latin-regular.svg#Marvel') format('svg'); /* Legacy iOS */
}

/* marvel-italic - latin */
@font-face {
  font-family: 'Marvel';
  font-style: italic;
  font-weight: 400;
  src: url('/css/fonts/marvel-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/css/fonts/marvel-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/marvel-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/marvel-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/marvel-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/marvel-v14-latin-italic.svg#Marvel') format('svg'); /* Legacy iOS */
}

/* marvel-700 - latin */
@font-face {
  font-family: 'Marvel';
  font-style: normal;
  font-weight: 700;
  src: url('/css/fonts/marvel-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/css/fonts/marvel-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/marvel-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/marvel-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/marvel-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/marvel-v14-latin-700.svg#Marvel') format('svg'); /* Legacy iOS */
}

/* marvel-700italic - latin */
@font-face {
  font-family: 'Marvel';
  font-style: italic;
  font-weight: 700;
  src: url('/css/fonts/marvel-v14-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/css/fonts/marvel-v14-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/css/fonts/marvel-v14-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/css/fonts/marvel-v14-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/css/fonts/marvel-v14-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/css/fonts/marvel-v14-latin-700italic.svg#Marvel') format('svg'); /* Legacy iOS */
}



html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: 'Marvel';
    vertical-align: baseline;
}

html{
	font-family: Marvel;
	height: 100%;		
}



.margin-top-05 { 
	margin-top: 0.5em; 
}
.margin-top-10 {
 	margin-top: 1.0em; 
}

.margin-top-15 {
 	margin-top: 1.5em; 
}

.margin-top-20 { 
	margin-top: 2.0em; 
}
.margin-top-25 { 
	margin-top: 2.5em; 
}
.margin-top-30 { 
	margin-top: 3.0em; 
}

.margin-top-40 { 
	margin-top: 4.0em; 
}

.margin-top-50 { 
	margin-top: 5.0em; 
}

.margin-bot-10{
	margin-bottom: 1.0em;
}

.margin-bot-20{
	margin-bottom: 2.0em;
}

.margin-bot-30 { 
	margin-bottom: 3.0em; 
}

.margin-bot-50 { 
	margin-bottom: 5.0em; 
}

body{
	background: #F2F2F2;
	height: 100%;
}

#website{
	height: 100%;
}
#wrapper{
	background-color: #FFFFFF;
	margin: auto;
	float: none;
	padding: none;
	height: 100%;
	overflow: auto;
}

#header{
	background: #E63B1E;
	height: 1.5em;
	padding: none;
}

.logo{
	width: 15%;
	float: left;
}

.logo img{	
	transition: 0.2s;
}

.logo img:hover{
	padding: 0.5em 0.8em 0.5em;
	transition: 0.2s;
}

#menubar{
	background: #FFF;
	height: 7em;
	line-height: 7em;
	padding: none;
	border-style: solid;
    border-bottom: thin solid #2B2B2B;
}

.content{
	background: #FFF;
	float: left;	
}

.content > p{
	font-size: 130%;
	text-align: center;
	margin: 2.5em 1em 0em 1em;
}

.contentPoints, .contentTools, .kontaktButtons{
	border-style: solid;
	border-width: thin;
	border-radius: 1.2em;
	border-color: #E63B1E;
	text-align: center;
	overflow: hidden;	
	transition: 0.2s;
	color: #2b2b2b;
}

.contentPoints img{
	width: 100%;
	height: auto;
	padding: 0.6em 0.6em 0.1em 0.6em;
	border-radius: 1.6em;
	box-sizing: border-box;
	transition: 0.2s;	
}

.contentPoints img:hover{
	transition: 0.4s;
	opacity: 0.5;
}

.contentPoints h1 {
	font-weight: bolder;
	font-size: 130%;
	margin: 0;
	padding: 0.1em 0em 0.3em 0em;
}

.contentTools h1{
	font-weight: bolder;
	font-size: 150%;
	margin: 0;
	padding: 0.0em 0em 0.3em 0em;
}

.contentTools p{	
	padding: 0.0em 0.5em 1em 0.5em;
}


.contentPoints a{
	transition: 0.2s;
	text-decoration: none;
	color: #E63B1E;	
	padding-bottom: 2em;	
}

.contentPoints a:hover{
	transition: 0.2s;
	text-decoration: none;	
	font-weight: bolder;
	color: #2B2B2B;	
}

.contentPoints p{	
	padding: 0 0.6em 0.2em 0.6em;
	line-height: 1.1em;	 
}

.contentTools img{
	width: 5em;
	height: auto;
	padding: 1.5em 0.6em 1.5em 0.6em;
	border-radius: 1.6em;
	box-sizing: border-box;
	transition: 0.2s;	
}

.kontaktButtonsAktiv{
	border-style: solid;
	border-width: thin;
	border-radius: 1.2em;
	border-color: #E63B1E;
	text-align: center;
	overflow: hidden;	
	background-color: #E63B1E;
	color: white;	
}

.kontaktButtons:hover{
	background-color: #E63B1E;
	color: white;
	transition: 0.2s;
}

.kontaktText{	
	text-align: center;
	font-size: 120%;
	line-height: em;
}

.kontaktFelder{

}

.kontaktDaten{
	text-align: right;
}

.btn-primary:hover{
	background-color: #E63B1E;
	border-color: #E63B1E;
}

.btn-primary{
	color: #2B2B2B;
	background-color: #FFF;
	border-color: #E63B1E;
}

.form-control{
	border-color: #E63B1E;
	
}

#inputNachricht{
	height: 6em;
}

form{
	width: 100%;
}

.logo img{
	width: 11em;
	height: auto;
	padding: 0.5em 1em 0.5em 1em;
	vertical-align: middle;
}

.menu{
	font-size: 1em;
	text-align: center;
}

.aboutUsLeft, .aboutUsRight{
	height: 100%;
	font-size: 120%
}

li {
	display: inline;
	padding: 1.5em;
	text-decoration: none;
	color: #2B2B2B;
	font-size: 1vw;

}

li a{
	transition: 0.4s;
	color: #2B2B2B;
}

li a:hover{
	transition: 0.4s;
	text-decoration: none;
	color: #E63B1E;	
}

.workImage{
	width :100%;		
	text-align: center;
	float: left;
}

.workImage img{
	width: 100%;
	padding: 0em 0em;
	margin-bottom: 3em;
	background-color:#2B2B2B;	
	float: left;
}

.workExplanation{
	font-size: 140%;
	line-height: 2.5em;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
	padding: 0px;
}

.container{
	background-color: #FFF;
}

.navbar-inverse{
	background-color: #FFF;
}

.navbar-toggle{
	margin: 2.4em 2em;
	background-color: #2B2B2B;
}

.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #E63B1E;
}

.navbar-inverse .navbar-nav > li > a{
	color: #2B2B2B;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
	color: #E63B1E;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #101010;
    width: 85%;
    float: left;
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	li a{	
		font-size: 1vw;
	}
}

@media (min-width: 768px ) and (max-width: 1199px) {

	li a{	
		font-size: 1.8vw;
	}

	.mainContent .contentPoints .contentTools, .kontaktButtons{
		margin: 4vw;		
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 501px ) and (max-width: 767px){

	li a{	
		font-size: 3vw;		
		padding: 1em;
	}

	li{
		margin: 0;
	    padding: 0;
	    border: 0;
	    outline: 0;
	    font-weight: inherit;
	    font-style: inherit;
	    font-size: 100%;
	    font-family: inherit;
	    vertical-align: baseline;

	}

	ul.navibar{
		width: 100%;
	}

	#menubar {
    line-height: 2em;
	}

	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	    border-color: #101010;
	    width: 100%;
	    float: left;
	}

	.logo img {
	    width: 11em;
	    height: auto;
	    padding: 0.5em;
	    vertical-align: middle;
	}

	.mainContent .contentPoints .contentTools, .kontaktButtons{
		margin: 4vw;
		position:relative;
		top: 10px;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 100px) and (max-width: 500px){

	li a{	
		font-size: 5vw;
		display: block;
		padding: none;
	}

	li{
		margin: 0;
	    padding: 0;
	    border: 0;
	    outline: 0;
	    font-weight: inherit;
	    font-style: inherit;
	    font-size: 100%;
	    font-family: inherit;
	    vertical-align: baseline;

	}

	ul.navibar{
		width: 100%;
	}

	#menubar {
    line-height: 3em;
	}

	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
	    border-color: #101010;
	    width: 100%;
	    float: left;
	}

	.logo img {
	    width: 11em;
	    height: auto;
	    padding: 0.5em;
	    vertical-align: middle;
	}

	.mainContent .contentPoints .contentTools, .kontaktButtons{
		margin: 4vw;
		position:relative;
		top: 10px;
	}

}