.winter{ font-size: 20px; margin-bottom: 10px; } #home h1{ font-size: 60px; } #home img{ max-width: 50%; } #home img#newsole{ width: 402px; } #home img#featuredshoe{ width: 470px; } #home img#featuredshoe2{ display:none; } #home li.two .content img{ position: relative; top: 20px; } a.ctabox{ color: #FFFFFF; background: url(img/subtle_grunge_blue.png) top; padding: 10px; font-family: langdon; letter-spacing: 1px; margin-top: 30px; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; } #instructions{ margin-top: 30px; } .two img{ float:left; margin-left: -200px; } .two #instructions{ float:right; } #buttons{ background: #FFFFFF; padding: 40px 0px 0px 0px; text-align:center; } #buttons .content{ padding-bottom: 30px; } #buttons .content{ max-width: 1100px; } .button{ display:block; float:left; text-align: center; width: 33.3%; max-height:180px; } .button .inner{ position: relative; border:none; -webkit-box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, .2); box-shadow: 1px 1px 1px 1px rgba(1, 1, 1, .2); display:inline-block; background: #eeeeee; height: 120px; text-align: center; width: 250px; } .buttonthree .inner{ background: url('img/button3shoe.jpg'); } .buttontwo .inner{ background: url('img/button2shoe.jpg'); } .buttonone .inner{ background: url('img/button1shoe.jpg'); } #home .content .button .inner img{ display:block; float:none; margin: 0 auto; width: 200px; z-index: 3; } .button p{ clear:both; text-align: center; position: relative; z-index: 100; color: #FFFFFF; top: 88px; padding-bottom: 5px; background: rgba(1,1,1,.6); width: 200px; margin: 0 auto; } .button span.viewmore{ display:block; position: relative; z-index: 100; top: 88px; background: rgba(1,1,1,.6); width: 200px; margin: 0 auto; color: #46BFDF; padding-bottom: 5px; font-family: nexabold; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; transition: color .3s ease-in-out; } .button span.viewmore:hover{ color: #FFFFFF; cursor: pointer; } #line{ text-align: center; padding: 15px; color: #FFFFFF; background: url(img/mochaGrunge.jpg); position: relative; } .blue{ color: #46BFDF; } @media only screen and (max-width: 768px){ #home img#featuredshoe{ display:none; } #home img#featuredshoe2{ display:block; } #home h1{ font-size: 40px; } .button .inner{ width: 200px; } #home img{ max-width: 60%; max-height: 400px; } #home li.one .content img{ max-width: 50%; } #home li.two .content img{ position: relative; top: 20px; } } @media only screen and (max-width: 700px){ #home li.two .content img{ position: relative; top: 0px; left: 55%; padding-top: 20px; } } @media only screen and (max-width:640px) { footer img{ display:none; } .contactform{ display:block; } #home .content{ padding-bottom: 0px; } a.ctabox{ color: #FFFFFF; background: url(img/subtle_grunge_blue.png) top; padding: 10px; font-family: langdon; letter-spacing: 1px; margin-top: 0px; -webkit-transition: color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in-out; } #instructions{ margin-top: 0px; padding-bottom: 40px; } #home h1{ font-size: 40px; } #buttons{ display:none; } }