html, body { margin: 0px; padding: 0px; font-family: 'Open Sans', sans-serif; } #body-main { margin-bottom: -60px; min-height: 100%; } #header-bar { background-color: #289AC9; color: white; text-align: center; padding-bottom: 40px; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } #header-bar h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-weight: normal; } #header-bar a { color: white; text-decoration: none; } #header-address { font-size: 12px; margin-top: -50px; float: left; padding-left: 50px; } #header-phone { font-size: 12px; margin-top: -50px; float: right; padding-right: 50px; } #name1 { font-size: 72px; display:block; } #name2 { font-size: 40px; display: block; margin-top: -30px; } #header-decoration-line { width: 100%; height: 10px; background-color: white; margin-top: -30px; } #nav-bar { color: #289AC9; font-family: 'Oswald', sans-serif; font-size: 32px; width: 768px; margin: auto; text-align: center; padding-top: 30px; padding-bottom: 20px; position: relative; } #nav-bar ul { list-style-type: none; margin: 0; padding: 0; } #nav-bar a { color: #289AC9; text-decoration: none; text-transform: uppercase; } #nav-bar li { display: inline; } #nav-bar li a { padding-left: 20px; padding-right: 20px; } #splash { padding-bottom: 80px; background-color: white; box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); position: relative; } #splash-content { clear: both; width: 768px; margin: auto; text-align: center; } #facials-section { background-color: #289AC9; background-image: url("./images/facialmachine.png"); background-position: bottom right; background-repeat: no-repeat; color: white; } #facials-section-content { clear: both; width: 768px; margin: auto; text-align: center; } #facials-section h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; color: white; margin: 0px; font-size: 48px; font-weight: normal; } .info-section { width: 358px; padding: 0px; margin: 0px; text-align: left; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; display: inline-block; vertical-align: top; } .info-section h2 { margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; } .info-section p { margin: 0px; padding: 0px; padding-left: 30px; } .row { clear: both; } #led-info { width: 768px; padding-bottom: 20px; } .led-info-section { display: inline-block; width: 240px; padding: 0px; margin: 0px; vertical-align: top; } #led-info h2 { margin: 0px; padding: 0px; font-size: 18px; font-weight: bold; } .led-info-section h3 { margin: 0px; padding: 0px; font-size: 24px; font-weight: bold; font-family: 'Oswald', sans-serif; text-transform: uppercase; } .led-info-section p { margin: 0px; padding: 0px; } .led-info-section img { width: 160px; border: 8px solid white; } #lashes-section { color: white; background-color: #6133D1; } #lashes-section-content { clear: both; width: 768px; margin: auto; text-align: center; padding-bottom: 32px; } #lashes-section h1{ font-family: 'Oswald', sans-serif; text-transform: uppercase; color: white; margin: 0px; font-size: 48px; font-weight: normal; } #lashes-section h2{ text-transform: uppercase; margin: 0px; font-size: 20px; font-weight: normal; } #lashes-section img{ width: 50%; border: 8px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #lashes-section p { margin: 0px; padding: 10px; } #wax-section { background-color: #245CAB; background-image: url("./images/flower.png"); background-position: top left; background-repeat: no-repeat; background-size: 50%; color: white; } #wax-section-content { width: 768px; margin: auto; text-align: center; padding-bottom: 32px; } #wax-section h1{ font-family: 'Oswald', sans-serif; text-transform: uppercase; margin: 0px; font-size: 48px; font-weight: normal; } #wax-section h2{ font-family: 'Oswald', sans-serif; text-transform: uppercase; margin: 0px; font-size: 20px; } #footer { margin: 0px; padding: 0px; height: 60px; background-color: #289AC9; } @media only screen and (max-width: 767px) { #header-address { float: none; margin: 0px; padding: 0px; position: relative; } #header-phone { float: none; margin: 0px; padding: 0px; position: relative; } #nav-bar { width: 100%; } #nav-bar li a { padding: 0px; padding-right: 10px; } #splash-content { width: 100%; } #splash-content img { width: 100%; } #facials-section-content { width: auto; } .info-section { width: auto; text-align: center; } .info-section img { width: 80%; } #led-info { width: auto; } #lashes-section-content { width: auto; } #wax-section { background-size: cover; background-position: auto; } #wax-section-content { width: auto; } }