/**
 * @version     1.0 August 13, 2015
 * @author      Kristina Malzahn http://www.bunt-metall.com
 * @copyright   Copyright (C) 2015 - Buntmetall UG
 * @license     http://www.bunt-metall.com
 */

@font-face {
    font-family: 'Dosis';
    src: url('https: //www.buntmetall.net/fonts/Dosis-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Oxygen';
    src: url('https: //www.buntmetall.net/fonts/Oxygen-Regular.ttf') format('truetype');
}

body {background-color: #131313; color: #eeeeee; margin: 0 auto; font-family: 'Dosis', sans-serif;}

header {position: fixed; top: 0; width: 100%; height: 50px; text-align: center; background-color: #131313; vertical-align: middle;}
header img {position: relative; margin-left: -40px;}
footer {position: fixed; bottom: 0; width: 100%; height: 50px; text-align: center; background-color: #131313; padding: 5px 0; margin: 0;}

#wrapper {height: auto; width: 100%; overflow: hidden;}

#logo {width: 100%; margin-top: 140px; text-align: center;}

#container-referenzen {position: absolute; top:180px; left:-1010px; width: 1000px; height: auto; overflow: hidden; background-color: #131313; text-align: right; padding: 10px 50px 80px 10px; margin-right: 50px;
  	-webkit-transition: all 0.5s;
	transition: all 0.5s;}

#container-referenzen:hover {left: 0; width: 75%;}

#container-referenzen .cont-info {
	font: 0/0 serif;            /* Unternavigation ausblenden */
  	z-index: -1;
  	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
#container-referenzen:hover .cont-info {font: inherit; z-index: auto;}


#container-kontakt {position: absolute; top:180px; right:0; width: 0; height: inherit; background-color: #131313; text-align: left; padding: 10px 10px 80px 40px; margin-left: 40px;
  	-webkit-transition: all 0.5s;
	transition: all 0.5s;}

#container-kontakt:hover {width: 75%;}

#container-kontakt .cont-info {
	font: 0/0 serif;            /* Unternavigation ausblenden */
  	z-index: -1;
  	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

#container-kontakt:hover .cont-info {font: inherit;z-index: auto; margin-left: 10px;}

#logos {position: relative; clear: both;}
#logos2 {position: relative; clear: both;}


.ref-logo {
	float:right;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 100px;
	height: 73px;
	opacity: 0.3;
  	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.ref-logo:hover {
	opacity: 1;
}

video#bgvid {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(buntmetall_website_moire-bg-poster.jpg) no-repeat;
	background-size: cover;
	}

video {display: block;} 

p {font-weight: 300; letter-spacing: 1px;}

h1, h2, h3, h4, h5, h6 {font-weight: 500; letter-spacing: 1px;}

address {letter-spacing: 1px; font-weight: 200;}

.top-head {color: #d2ff00; text-transform: uppercase; margin-top: 10px; letter-spacing: 2px;}

.footer-text {color: #777777;}

.head-slide-left{position: relative; left: 40px; float: right; margin-left: -30px; height: inherit;}

.head-slide-right{position: relative; left: -30px; float: left; margin-right: -30px; height: inherit;}

a {color: #d2ff00; text-decoration: none;}


ul {list-style-type: none;}
ul li {float: left;}

.impressum {font-size: 90%; opacity: 0.7;}
.impressum-block {float: left; margin-right: 50px; display: block;}

.email {/*margin-left: 120px;*/}

.clearer {clear: both;}


.cc_container {
    background: #000 !important;
    font-family: 'Dosis', sans-serif !important;
}

.cc_container .cc_btn, .cc_container .cc_btn:visited {
	background-color: #d2ff00 !important;
}

.cc_container .cc_message {
	color: #d2ff00;
    font-family: 'Dosis', sans-serif !important;
    font-size: 0.8em !important;
}

/* ------------------- Responsive ------------------- */

@media only screen and (max-width: 480px) { /* Smartphones */
	body {background: url(buntmetall_website_moire-bg-poster.jpg) #000 no-repeat center center fixed;
		background-size: cover;}
	#bgvid {display: none;}
	.top-head {font-size: 90%;}
	header {height: 40px;}
	#logo {margin-top: 50px;}
	#container-referenzen, #container-kontakt {top: 130px;}
	.head-slide-left img, .head-slide-right img {width: 80%;}
	#container-kontakt:hover, #container-referenzen:hover {width: 65%;}
	footer {height: auto; padding: 0;}
	.footer-text {padding: 0 10px 0 10px;}
}

@media only screen and (min-width: 481px) and (max-width: 767px) { /* Smartphones to Tablets */
	#logo {margin-top: 60px;}
	#container-referenzen, #container-kontakt {top: 130px;}
	.head-slide-left img, .head-slide-right img {width: 80%;}
	#container-kontakt:hover, #container-referenzen:hover {width: 65%;}
	footer {height: auto; padding: 0;}
	.footer-text {padding: 0 10px 0 10px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) { /* Tablets */
	#logo {margin-top: 110px;}
	#container-referenzen, #container-kontakt {top: 130px;}
	.head-slide-left img, .head-slide-right img {width: 80%;}
	footer {height: auto; padding: 0;}
	.footer-text {padding: 0 10px 0 10px;}
}

@media only screen and (min-width: 960px) and (max-width: 1199px) { /* Desktop */
}

@media only screen and (min-width: 1200px) { /* Large Display */
}