*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

@media screen and (min-width : 1024px) {
    .intro{
        float: left;
        width: 35%;
	max-width: 550px
    }
    .intro h1 { margin-top: 25px }
 
    .robot{
        float: right;
        width: 65%;
	margin-top: 25px;
    }
}

@media screen and (min-width : 768px) {
    div.right, div.left { width: 50%; float: left; }
}

html {
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

input[type="number"] {
   width:50px;
}

body{
	background-color: #e9eae8;
	margin: 0;
  overflow-y: scroll;
  height: 100%

}

#wrapper {
	background-color: #FFF;
	
	margin: 0 auto 0 auto;
	position: relative;
}

p {
                font-family: Arial;
                color: #010101;
                font-size: 16px;
                line-height: 20px;
}

.left {
                float: left;
}

.right {
                float: right;
}


.intro {
    padding: 0 50px 25px 50px;
}

.intro h1 {
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: #D2002E;
}

.intro h2 {
	margin-top: 30px;
	padding-top: 30px;
	border-top: solid 2px #e9eae8;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: #50535a;
	font-size: 18px;
}

.robot {
    padding: 0 50px 25px 50px;
}

.robot h2 {
	margin-top: 10px;
	padding-top: 10px;
	border-top: solid 2px #e9eae8;
	font-family: Arial;
	font-weight: bold;
	text-transform: uppercase;
	color: #50535a;
	font-size: 18px;
}

#footer {
	clear: both;
	background-color: #50535a;
	padding: 25px 50px 25px 50px;
	min-height: 100px;
	color: #FFF;
}

#footer img {
    float: right;
}

#footer p {
	color: #FFF;
}

#footer a {
	text-decoration: none;
	color: #FFF;
}

#footer a:hover {
	color: #e9eae8;
	border-bottom: dotted 1px #888989;
}

.logo {
	position: absolute;
	right: 50px;
}

.clearfix {
	overflow: auto;
}