* { margin: 0; padding: 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; width: 100%; text-align: center; font-family: "proxima-nova"; font-style: normal; font-weight: 300;; font-size: 18px; line-height:22px; background: #2a2a2a; color:#fcf8f2; } .smalltext{ font-size:12px; line-height:25px; } h1 { font-family: "proxima-nova",sans-serif; font-style: normal; font-weight: 600; line-height: 35px; } a { text-decoration: none; color: #435147; } .button { font-weight:bold; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; text-align: center; padding: .5em 1em; color: #ffffff; background-color: #2a2a2a; border: 2px solid #ffffff; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .button:hover { background-color: #2a2a2a; color: #9bd3b0; border:2px solid #9bd3b0; } .wrap { margin-top: 0px; margin-bottom: 0px; background: #ffffff; } .unit { background: #ffffff; float: left; } .alt { background: #ffffff; } .fancytext { font-family: "corner-store"; font-size: 20px; color:#9bd3b0; } .four-of-four { width:100%; height:150px; background: #2a2a2a; } .four-of-four-text { width:100%; padding:0px; background:#2a2a2a; } .four-of-four-yellow { width:100%; padding:0px; background:#9bd3b0; } .lilmenu{ background: #f15f26; width:100%; height:20px; } .center-copy{ width:960px; padding:20px; margin-left: auto; margin-right: auto; } .center-copy-alt{ width:960px; padding:20px; margin-left: auto; margin-right: auto; color:#2a2a2a; } .heroimg { width:60px; padding-top:0px; margin-left: auto; margin-right: auto; } .logoimg { width:120px; padding-top:0px; margin-left: auto; margin-right: auto; } .two-of-four { width: 50%; } .one-of-four { width:33.3333333%; padding:20px; } .one-of-three { width: 33.3%; } .two-of-three { width: 66.6666666%; } img { width: 100%; height:50%; display:block; } img:hover { opacity: .9; filter: alpha(opacity=100); /* For IE8 and earlier */ } @media screen and (max-width:800px) { .heroimg { width:10%; } .two-of-four { width: 50%; } .one-of-three { width: 50%; left:0%; } .four-of-four { width:100%; height:150px; background: #2a2a2a; } .center-copy { width:100%; padding:20px; margin-left: auto; margin-right: auto; } } @media screen and (max-width:530px) { .two-of-four { width: 80%; } .one-of-three { width: 100%; left:0%; } .heroimg { width:20%; padding-top:0px; margin-left: auto; margin-right: auto; } .four-of-four { width:100%; height:100px; color: #343d35; } }