/***************************************************
			      Reset
***************************************************/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary {
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

ol, ul {
	list-style: none;
}


a img {border:none}
a:link, a:visited{color:#fff ;text-decoration:none;border: 0;}
a:hover {text-decoration:none;}

aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}


/***************************************************
			      Global styles
***************************************************/

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
    font-weight: normal;
    font-style: normal; }
	

#wrapper {
	width: 85%;
	margin: 100px auto;
}

h1 {
	font-family: BebasNeue, Helvetica Neue, Arial, sans-serif;
	font-size: 100px;
	color: #0282D7;
	text-align: center;
}
h2  { 
font-family: BebasNeue, Helvetica Neue, Arial, sans-serif;
	font-size: 80px;
	text-align: center;
}

p {
	font-family: BebasNeue, Helvetica Neue, Arial, sans-serif;
	margin-top: 30px;
	line-height: 0.9em;
	text-align: center;
	font-size: 300%;
}

img {	
	margin-right: 10px;
}



/***************************************************
			      Yellow machine styles
***************************************************/

body{
  margin:0;
  color:#444;
  background:#ffc600;
  font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.machine-wrap{
  top:50%;
  left:50%;
  width:475px;
  height:145px;
  position:absolute;
  margin-top:-72.5px;
  margin-left:-237.5px;
  border-bottom:5px solid #271e01; 
}
.machine{
  width:475px;
  height:145px;
  padding-bottom:20px;
}
.machine .machine-roof,
.machine .machine-main{
  margin:auto;
}
.machine-wrap .road .mud:before,
.machine-wrap .road .mud:after,
.machine .machine-roof .machine-silencer:before,
.machine .machine-roof .machine-silencer:after,
.machine .machine-body:before,
.machine .machine-body:after,
.machine .machine-main .machine-back:before,
.machine .machine-main .machine-back:after,
.machine .machine-main .machine-front:after{
  content:'';
  position:absolute;
}
.machine .machine-roof{
  width:80px;
  height:60px;
  bottom:-1px;
  position:relative;
  background:#ffc600;
  border:15px solid #271e01;
  border-bottom:none;
}
.machine .machine-roof .machine-silencer{
  width:14px;
  left:-50px;
  height:12px;
  bottom:-1px;
  position:absolute;
  background:#271e01;
}
.machine .machine-roof .machine-silencer:before{
  height:0;
  bottom:100%;
  width:inherit;
  border:6px solid #271e01;
  border-top:4px solid transparent;
  border-left:8px solid transparent;
}
.machine .machine-roof .machine-silencer:after{
  left:4px;
  width:5px;
  height:12px;
  bottom:100%;
  background:inherit;
  transform:skewY(-35deg);
}
.machine .machine-roof .machine-silencer .machine-smoke{
  left:-5px;
  width:16px;
  height:16px;
  bottom:20px;
  border-radius:50%;
  position:absolute;
  background:#271e01;
  transform:scale(0);
  animation:moveSmoke .5s linear infinite;
}
.machine-main{
  height:60px;
  width:185px;
  position:relative;
}
.machine .machine-main .machine-body{
  height:inherit;
  width:inherit;
  position:relative;
  background:#271e01;
}
.machine .machine-main .machine-body:before{
  left:-15px;
  width:30px;
  height:inherit;
  background:inherit;
  transform:skewX(-20deg);
}
.machine .machine-main .machine-body:after{
  bottom:0;
  right:15px;
  width:35px;
  height:41px;
  background:#ffc600;
}
.machine .machine-main .machine-back{
  bottom:-1px;
  width:75px;
  height:45px;
  position:absolute;
}
.machine .machine-main .machine-back:before{
  width:75px;
  height:45px;
  background:#ffc600;
  border-radius:50% 50% 0 0 / 85% 85% 0 0;
}
.machine .machine-main .machine-back:after{
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  border-radius:50%;
  margin-top:-15px;
  margin-left:-30px;
  background:transparent;
  border:15px solid #271e01;
}
.machine .machine-main .machine-front{
  z-index:1;
  width:60px;
  height:60px;
  right:-24px;
  bottom:-20px;
  border-radius:50%;
  position:absolute;
  background:#271e01;
  border-top:2px solid #ffc600;
}
.machine .machine-main .machine-front:after{
  top:50%;
  left:50%;
  width:80px;
  height:20px;
  margin-top:-10px;
  margin-left:-40px;
  background:inherit;
  border:2px solid #ffc600;
}
.machine-wrap .road{
  right:0;
  bottom:0;
  height:15px;
  width:140px;
  overflow:hidden;
  position:absolute;
}
.machine-wrap .road .mud-wrap{
  width:160px;
  position:absolute;
  animation:moveRoad .4s linear infinite;
}
.machine-wrap .road .mud{
  bottom:0;
  width:40px;
  float:left;
  height:15px;
  position:relative;
  display:inline-block;
}
.machine-wrap .road .mud:before,
.machine-wrap .road .mud:after{
  width:20px;
  height:20px;
  border-radius:4px;
  background:#271e01;
  transform:rotate(45deg);
}
.machine-wrap .road .mud:before{
  left:0;
  bottom:-17px;
}
.machine-wrap .road .mud:after{
  right:0;
  bottom:-20px;
}

.machine-wrap .machine-roof,
.machine-wrap .machine-body,
.machine-wrap .machine-silencer,
.machine-wrap .machine-back:before,
.machine-wrap .machine-front{
  animation:upDown .6s linear infinite;
}
.machine-wrap .machine-silencer{
  animation-duration:.4s;
}
.machine-wrap .machine-front{
  animation-duration:.3s;
}
.machine-wrap .machine-back{
  animation:upDown .8s linear infinite;
}
@keyframes moveRoad{
  0%{
    right:-40px;
  }
  100%{
    right:0;
  }
}
@keyframes moveSmoke{
  0%{
    opacity:0;
    transform:scale(0) translate(0);
  }
  60%{
    transform:scale(.5) translate(0);
  }
  100%{
    opacity:.6;
    transform:scale(1) translate(-10px,-40px);
  }
}
@keyframes upDown{
  0%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(2px);
  }
  100%{
    transform:translateY(0);
  }
}