@charset "utf-8";
/* CSS Document */

*{padding:0;margin:0;box-sizing: border-box;}
@font-face {
   font-family: "lucky";
	font-weight: normal;
    src:url(fonts/BR.otf) format("opentype");
  }
@font-face {
   font-family: "lucky";
	font-weight: normal;
	font-style:italic;
    src:url(fonts/BRit.otf) format("opentype");
  }
  @font-face {
   font-family: "lucky";
    font-weight: bold;
    src:url(fonts/BB.otf) format("opentype");
  }
@font-face {
   font-family: "lucky";
	font-weight:lighter;
    src:url(fonts/BL.otf) format("opentype");
  }
@font-face {
   font-family: "luckyThin";
    src:url(fonts/Bt.otf) format("opentype");
  }
html, body{height:100%;}

body{font-family:"lucky";}

header{
    background: #1f0044;
	position: fixed;z-index: 8;width:100%;
    display: flex;flex-flow: row nowrap;justify-content: center;
   	background-image: url("metalbg2.jpg");background-repeat: no-repeat;}

.steelplate{
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.625),  rgba(255, 255, 255, 0.625)),url("content/steelplate.jpg") ;
	background-repeat:no-repeat,no-repeat;
	background-attachment: fixed,fixed;
	background-position: center bottom,center bottom;
	text-align: center;text-transform: uppercase;letter-spacing: 3px;	color: rgba(0,0,0,0.6);
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);}
	
.neutral{
	background-color:#444444;
	color:white;
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);}

.rost{
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5),  rgba(255, 255, 255, 0.5)),url("content/rostbg.jpg") ;
	background-repeat:no-repeat,no-repeat;
	background-attachment: fixed,fixed;
	background-position: center bottom,center bottom;
	text-align: center;text-transform: uppercase;letter-spacing: 3px;	color: rgba(0,0,0,0.6);
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);}
	
.copper{
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9),  rgba(255, 255, 255, 0.9)),url("content/coppergrid.jpg") ;
	background-repeat:no-repeat,no-repeat;
	background-attachment: fixed,fixed;
	background-position: center bottom,center bottom;
	text-align: center;text-transform: uppercase;letter-spacing: 3px;	color: rgba(0,0,0,0.6);
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);}
	
.copperplate{
	background-image: linear-gradient(to right, rgba(255, 255, 255, 0.75),  rgba(255, 255, 255, 0.75)),url("content/copperplate.jpg") ;
	background-repeat:no-repeat,no-repeat;background-attachment: fixed,fixed;background-position: center bottom,center bottom;
	text-align: center;text-transform: uppercase;letter-spacing: 3px;	color: rgba(0,0,0,0.6);
	text-shadow: 2px 2px 3px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);}
	

.content{display:flex;background-color: #444444;}
.cms_content{display:flex;background-color: #444444;}
.flex_content{display:flex;flex-flow:column nowrap;justify-content: center;align-items: center;}
.flex_content > p,.flex_content > img{display:block;}
.flex_content > p{text-align: center;color:white;font-weight:lighter;}
.flex_content > img{}

h3{color:#AC003A;font-weight:bold;flex: none;}

footer{
	background-color:rgba(23,17,29,1.00);
	background-image: linear-gradient(to right, rgba(23,17,29,0.7), rgba(23,17,29,0.7)),url("content/rostbg.jpg");
	background-repeat:no-repeat,no-repeat;
	background-position: center top,center top;
	display:flex;flex-flow:column nowrap;justify-content: flex-start;}

footer p{color:white;}
footer a:link,footer a:visited,footer a:hover,footer a:focus,footer a:active{color:white;}
.gallery_content{display:flex;flex-flow:row wrap;justify-content:center;align-items: flex-start;background-color: #444444;}


.lightbox {
  /** Hide the lightbox */
  display: none;
  /** Apply basic lightbox styling */
  position: fixed;z-index: 9;top:196px;
  width: 100%; height: 100%;
  text-align: center;
  background: rgba(0,0,0,0.9);
}

.lightbox img {
  /** Pad the lightbox image */
}

.lightbox:target {
  /** Show lightbox when it is target */
  display: block;
  /** Remove default browser outline style */
  outline: none;
}
.thumbnail{height:225px;width:auto;max-width: 300px;}

.lightboximg{width:auto;max-width:800px;height:auto;}




@media all and (max-width: 914px) {
	header{padding:10px;}
	#logo img{width:100%;max-width:360px; height:auto;}
	#top{margin:none;display:flex;flex-flow:column nowrap;justify-content: flex-start;}
	main{position:absolute;z-index: 3;top:170px;width:100%;}
	h1{padding:3px;margin:0 0 0 0;text-align:center;background-color:#7F7F7F;color:white;font-size:1.1em;text-shadow:2px 3px 5px #000000;text-transform: uppercase;font-weight:lighter;letter-spacing: 3px;}
	h2{text-align: center;text-transform: uppercase;letter-spacing: 3px;}
	h3{font-size:0.8em;flex: none;margin-bottom:8px;}
	.steelplate{font-size:1em;padding:20px;font-weight:bold;}
	.neutral{font-size:1em;padding:10px;font-weight:bold;}
	.rost{font-size:1em;font-weight:bold;}
	.copper{font-size:1em;padding:20px;font-weight:bold;}
	.copperplate{font-size:1em;padding:20px;font-weight:bold;}
	.content{flex-flow: row wrap; justify-content: space-evenly;align-items: flex-start;padding:10px;}
	.gallery_content{flex-flow: row wrap; justify-content: space-evenly;align-items: flex-start;padding:10px;}
	.cms_content{flex-flow: row wrap; justify-content: space-evenly;align-items: flex-start;padding:10px;}
	.flex_content > p{font-size:1em;padding:10px;}
	footer{padding:12px;flex-flow:column wrap;justify-content: flex-start;}
	footer p{font-size:0.85em;}
	footer >div{width:100%;}
	#footflex{display:flex;flex-flow:column nowrap;justify-content: space-between;}
	#footflex div{margin-top:10px;}
	#desk_nav{display:none;}
	#slider{display:none;}
	#featuredimage1{display:none;}
	#featuredimage2{display:none;}
}

@media all and (min-width: 914px) {
	header{padding:20px;}
	#logo img{width:360px; height:94px;}
	#top{margin-left:auto;margin-right:auto;display:flex;flex-flow:row wrap;justify-content: center;align-items: flex-end;}
	#smartphone_nav{display:none;}
	#desk_nav ul{display:flex;flex-flow:row nowrap;justify-content: left;align-items: flex-end;padding:0;margin:0 0 0 18px;list-style-type: none;}
	#desk_nav ul li a{padding:5px 18px 5px 18px;margin-bottom:14px;box-sizing: border-box;display:block;text-decoration:none;font-weight:lighter;font-size:1.25em;letter-spacing: 1px;background-color: #AC003A;text-shadow: 0 -1px 1px #666, 0 1px 1px #444;}
	#desk_nav ul li a:link,#desk_nav ul li a:visited,#desk_nav ul li a:focus{color:white;}
	#slider{z-index:2;}
	#slider > figure {backface-visibility: hidden;background-size: cover;color: transparent;left: 0px;opacity: 0;position:fixed;top:134px;right:0px;z-index:2!important;height: 22.34375vw;}
	#featuredimage1{position:fixed;z-index: 1;top:134px;width:100%;height:22.34375vw;background-image: url("featuredbgSW.jpg");background-size: cover;background-position: center center;}
	#featuredimage2{position:fixed;z-index: 2;top:134px;width:100%;height:22.34375vw;background-image: url("spitzen_bgSW.png");background-size: cover;background-position: center center;}
	main{position:absolute;z-index: 3;top:29.322916666vw;width:100%;}
	#main_cms{top:180px;}
	h1{padding:10px;margin:0 0 0 0;position:sticky;top:130px;display:block;text-align:center;background-color:#7F7F7F;color:white;font-size:2em;text-shadow:2px 3px 5px #000000;text-transform: uppercase;font-weight:lighter;letter-spacing: 7px;}
	h2{text-align: center;text-transform: uppercase;letter-spacing: 3px;}
	h3{font-size:1.1em;flex: none;margin-bottom:15px;}
	.steelplate{font-size:2em;padding:40px;font-weight:bold;}
	.neutral{font-size:1em;font-weight:bold;}
	.rost{font-size:2em;padding:20px;font-weight:bold;}	
	.copper{font-size:2em;padding:40px;font-weight:bold;}
	.copperplate{font-size:2em;padding:40px;font-weight:bold;}
	.content{min-height:500px;flex-flow: row wrap; justify-content: space-evenly;align-items: flex-start;padding:50px 280px 50px 280px;}
	.gallery_content{flex-flow: row wrap; justify-content: space-evenly;align-items: flex-start;padding:10px 280px 10px 280px;}
	.cms_content{flex-flow: row wrap; justify-content: flex-start;align-items: flex-start;padding:50px 280px 50px 280px;}
	.flex_content > p{font-size:1.3em;padding:5px;}
	footer{padding:25px 0 25px 0;flex-flow:column nowrap;justify-content: flex-start;}
	footer p{font-size:0.95em;}
	footer >div{margin-left:auto;margin-right:auto;width:100%;}/*1216*/
	#footflex{display:flex;flex-flow:row nowrap;justify-content: space-between;}
}

@media all and (min-width: 914px) and (max-width: 1292px) {
	#slider > figure {top:190px;backface-visibility: hidden;background-size: cover;color: transparent;left: 0px;opacity: 0;position:fixed;right:0px;z-index:2!important;height: 200px;}
	#featuredimage1{top:190px;position:fixed;z-index: 1;width:100%;height:200px;background-image: url("featuredbgSW.jpg");background-size: cover;background-position: center center;background-repeat: no-repeat;}
	#featuredimage2{top:190px;position:fixed;z-index: 2;width:100%;height:200px;background-image: url("spitzen_bgSW.png");background-size: cover;background-position: center center;background-repeat: no-repeat;}
	main{position:absolute;z-index: 3;top:390px;width:100%;}
}
@media all and (min-width: 1292px) {}