* {margin: 0;padding: 0;box-sizing: border-box;}

@font-face {
    font-family: 'my_underwoodregular';
    src: url('fonts/myunderwood-webfont.woff2') format('woff2'),
         url('fonts/myunderwood-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'blackcasperregular';
    src: url('fonts/blackcasper-webfont.woff2') format('woff2'),
         url('fonts/blackcasper-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'broken_15regular';
    src: url('fonts/broken15-webfont.woff2') format('woff2'),
         url('fonts/broken15-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {font-family: 'my_underwoodregular', serif; font-size: 14px;color: #fff;line-height: 21px;font-style: normal;font-weight: normal;text-align: left;
background-image: url("img/bg.jpg");
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-color: #000000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

/*Schatten*/
h2,
#logo #ticker,
#content .block {box-shadow: 3px 3px 8px #000;}
#logo .one,
#logo .two {text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);}

h1 ,h2 {font-weight: normal;color: inherit;}
h1 {display: none;}
h2 {background: #FFB81E;color: #000000;display: inline-block;font-size: 38px;line-height: 35px;padding: 0 5px;transform: rotate(-6deg);position: absolute;left: -12px;top: 0;}
h3 {font-weight: normal;background: #000;color: #fff;font-size: 21px;line-height: 32px;padding: 0 6px;}

p {margin-bottom: 30px;}
ul {list-style: none;}
hr {border: none; border-top: 1px dashed #000;margin: 10px 0;}
img {display: block;width: 100%;height: auto;}

a {text-decoration: none;color: #FFB81E;}
a:hover {text-decoration: underline;color: #666;}

#content .block,
#content .basetext,
#footer ul {background: #000;}

#wrapper {width: 100%;
overflow-x: hidden;}
#header {padding-top: 40px;}
#logo {display: block;position: relative;height: 345px;width: 100%;text-align: center;}
#logo > * {position: absolute;top: 0;left: 0;width: 100%;}
#logo a {text-decoration: none;}
#logo a:hover {opacity: 0.8;}
#logo .one {z-index: 3;font-family: 'broken_15regular';color:#fff;font-size: 275px;line-height: 130px;}
#logo .two {z-index: 1;font-family: 'blackcasperregular';color:#FFB81E;font-size: 220px;line-height: 150px;margin: 0;}

#logo #ticker {z-index: 2;background: #000000;color: #FFFFFF;top: 160px;line-height: 30px;font-size: 32px;display: block;overflow: hidden;height: 30px;text-transform: uppercase;transform: rotate(-10deg);width: 120%;left: -10%;padding-top: 2px;}

  @keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
 	}
  .tcontainer{width: 100%;overflow: hidden;}
  .ticker-wrap {width: 100%;padding-left: 100%;}
  .ticker-move {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 70s;}
  .ticker-move:hover{animation-play-state: paused;}
  .ticker-move > div {display: inline-block;padding: 0 300px 0 0;}

#content {width: 100% ;max-width: 1400px;margin: 0 auto;text-align: center;}
#content a{text-decoration: underline;}
#content p,
#content ol,
#content ul {margin-bottom: 15px;}
#content ol,
#content ul {margin-left: 20px;}
#content ul {list-style: disc;}

#content p img {width: 100%;height: auto;}
#content p img.spec {width: 80%;}
#content p span {padding-left: 15px;}

#content .video {background: #000;position: relative;padding-bottom: 55%;padding-top: 15px;height: 0;overflow: hidden;}
#content .video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#content .block {margin: 20px;padding: 4px;display: inline-block;vertical-align: middle;position: relative;}
#content .block.inside00 {padding: 0;}
#content .block.inside02 {padding: 8px 10px;}
#content .size00 {width: 100px;transform: rotate(-1deg);}
#content .size01 {width: 300px;transform: rotate(-3deg);}
#content .size02 {width: 420px;transform: rotate(2deg);}
#content .size02a {width: 420px;transform: rotate(-2deg);}
#content .size03 {width: 500px;transform: rotate(-1deg);}
#content .size04 {width: 600px;transform: rotate(3deg);}
#content .size05 {width: 700px;transform: rotate(-2deg);}

#content .intro {font-size: 21px;line-height: 23px;background: #000000;color: #FFB81E;}
#content .scroll {max-height: 600px;overflow-y: scroll;padding: 10px;text-align: left; }
#content .scroll.sml {max-height: 400px;}
#content .scroll p {white-space: pre-line;}
#content .socialmedia {background: none; box-shadow:none;}
#content .socialmedia a img {width: 100%;height: auto;display: block;margin-bottom: 10px;}
#content .socialmedia a:hover {opacity: 0.8;}
#content .buttons a {display: inline-block;background: #fff;font-size: 26px;line-height: 28px;text-decoration: none;margin: 4px 0;padding: 0 4px;color: #000000;}
#content .buttons a:hover {background: #000000;color: #FFB81E;}
#content .buttons a::before{content: '⟩⟩ ';}
#content .buttons.buttons02 a {font-size: 20px;line-height: 27px;}

#content .basetext {margin: 0 auto;max-width: 600px;text-align: left;padding: 20px;}
#content .basetext h1 {display: block;}
#content .basetext h2 {position: static;transform: none;text-transform: none;margin: 20px 0;font-size: 26px;line-height: 28px;}

#footer {text-align: center;padding-top: 30px;}
#footer ul {display: inline-block;padding: 5px 20px;}
#footer ul li {display: inline;padding: 0 5px;}

#banner {background-color: #000000;background-image: none;font-family: arial, sans-serif;}
#banner #content,
#banner #content .block .scroll {max-height: 315px;}
#banner #content {margin-top: 50px;width: 851px;background-image: url("img/bg.jpg");background-repeat: no-repeat;background-position: -245px 0;background-size: 140% auto;overflow: hidden;}
#banner #content .block {background: none;box-shadow: none;width: 100%;margin: 0;padding: 0 0 0 334px;}
#banner #content .block .scroll {line-height: 15px;text-shadow: 2px 2px 2px #000;font-size: 13px;background: rgba(0,0,0,0.5);margin-right: -15px;}
#banner #content .block .scroll br {display: none;}


@media screen and (max-width: 800px) {
    #header {height: 245px;}
	#logo .one {font-size: 132px;line-height: 67px;}
	#logo .two {font-size: 106px;line-height: 72px;}
	#logo #ticker {top: 145px;font-size: 20px;line-height: 20px;height: 20px;}
    #content .size05 {width: 80%;}

}

@media screen and (max-width: 570px) {
	#content div.block {width: 85%;}
	#content div.block.size00 {width: 30%;}

}
