* { border: 0; margin: 0; padding: 0; } a { color: white; } body { background: #FCF8F3; font-family: 'Roboto Slab', serif; line-height: 140%; } body.bg { background: #373129 url('sketch/menu--bg.jpg') top left repeat; background-size: cover; padding-top: 1em; } div.row { position: relative; width: 100%; } div.row img.circle { left: 50%; margin-left: -45px; position: absolute; top: -45px; z-index: 100; } div.inner { margin: 0 auto 0 auto; max-width: 1000px; padding-top: 60px; width: 100%; } div.inner h2 { font-weight: lighter; margin-bottom: -10px; } div.nav { position: fixed; top: 0px; width: 100%; z-index: 5000; } div.nav div.inside { background: #B4B5A3; margin: 0 auto; max-width: 1000px; text-align: center; width: 100%; } div.nav ul { font-weight: 300 !important; list-style: none; padding: 10px 15px; text-transform: uppercase; } div.nav ul li { border-right: 1px solid white; display: inline-block; padding-right: 10px; margin-right: 10px; } div.nav ul li:last-child { border-right: 0; } div.nav ul li a { color: white; text-decoration: none; } div.nav ul li a:hover { color: #333; } div.inner.page { min-height: 300px; padding-bottom: 30px; } /* Home */ #home { padding: 40px 0 0 0; width: 100%; } #home div.inner { margin: 0 !important; padding: 0 !important; } #overlay { background: rgba(0, 0, 0, 0.5); left: 0px; bottom: 25px; padding: 20px 0; position: absolute; text-align: center !important; width: 100%; z-index: 50; } #overlay h4, #overlay h5, #overlay h3 { font-weight: lighter; padding: 0 3em; text-align: center; text-transform: uppercase; } #overlay h4 { color: white; margin-bottom: 0px; } #overlay h3 { color: #B4B5A3; font-size: 2.5em; line-height: 1em; margin-bottom: 0px; } #overlay h5 { color: #B4B5A3; margin-bottom: 0px; } #home > div { position: relative; text-align: center; } #home div img { display: block; width: 100%; } /* About Us */ #about { background: #ECE4DC; } #about > div { color: #646859; margin: 0px auto; width: 80%; } #about > div img.watership { float: right; max-width: 291px; width: 95%; } #about img.image { margin-top: 30px; display: inline-block; margin-right: 20px; } /* Menus */ #menus { background: #373129 url('sketch/menu--bg.jpg') top left repeat; background-size: cover; } #menus > div { color: #F1DDC4; margin: 0px auto; width: 80%; } #menus > div img { display: inline-block; margin-top: 35px; vertical-align: top; width: 20%; } #menuinside { background: #ECE4DC; background-size: cover; color: #646859; margin: 0px auto; width: 100%; } /* Occasion */ #occasion { background: #ECE4DC; } #occasion div.center { color: #464648; margin: 0px auto; width: 80%; } /* Our Suppliers */ #rooms { background: #B4B5A3; } #rooms > div { color: #F1DDC4; margin: 0px auto; width: 80%; } #rooms > div { color: white; } #rooms > div img { display: inline-block; margin-top: 35px; vertical-align: top; width: 20%; } /* Gallery */ #gallery { background: #ECE4DC; } #gallery div.center { color: #464648; margin: 0px auto; width: 80%; } #owl { margin-top: 50px; } #owl div.cont { height: 90px; overflow: hidden; } #large { margin-top: 50px; text-align: center; width: 100%; } #large img { max-height: 500px; max-width: 100%; } /* Whats Nearby */ #whatsnearby { background: #B4B5A3; } #whatsnearby > div { color: #F1DDC4; margin: 0px auto; width: 80%; } #whatsnearby > div { color: white; } #whatsnearby > div img { display: inline-block; margin-top: 35px; vertical-align: top; width: 20%; } /* Events */ #events { background: #ECE4DC; } #events > div { color: #646859; margin: 0px auto; width: 80%; } #events > div img.watership { float: right; max-width: 291px; width: 95%; } #events img.image { margin-top: 30px; display: inline-block; margin-right: 20px; } /* Contact */ #contact { background: #422009 url('sketch/contact--bg.jpg') top left repeat; background-size: 100%; text-align: left; } #contact div.center { background: #ECE4DC; color: #B4B5A3; margin: 0 0 0 5%; width: 40%; } #contact div.center img { margin-top: 30px; width: 100%; } #contact div.main { display: inline-block; line-height: 150%; margin-left: 5%; padding: 20px 0; vertical-align: top; text-align: center; width: 90%; } #contact div.main h2 { color: #646859; } #contact div.main h3 { color: #646859; font-size: 1.1em; font-weight: lighter; margin-bottom: 10px; } #contact div.main h3 a { color: #646859; } #contact div.main h4 { color: #7F6A5E; font-size: 1.5em; font-weight: lighter; margin-bottom: 10px; } #contact div.main h5 { color: #646859; font-size: 1em; font-weight: lighter; margin-bottom: 10px; } div.message { background: #7F6A5E; color: #ECE4DC; padding-top: 0px; text-align: left; width: 100%; } div.message img { float: left; margin: -50px 20px 20px 5%; width: 90% !important; } div.message { margin-bottom: -15px !important; } div.message h2 { margin-bottom: -20px !important; } div.social { border-bottom: 1px solid #EFDEC4; border-top: 1px solid #EFDEC4; display: inline-block; text-align: center; width: 80%; } div.social img { display: inline-block; margin-bottom: 20px; width: auto !important; } div.sider { float: right; margin-left: 50px; min-height: 300px; max-width: 225px; width: 100%; } div.sider img { margin: 0 0 15px 0 !important; padding: 0 !important; width: 100% !important; } img.rabbits { width: 267px !important; height: 110px !important; } /* Classes */ div.center { text-align: center; } @media screen and (max-width: 650px) { #home { padding-top: 0px !important; } #home div { width: 100%; } #home div img { width: 100%; } #home div { margin-top: 0px; } div.inner { padding-top: 80px; } #passion > div p img { float: none; } #passion img.image { margin-right: 0px; width: 100%; } #menus > div img { width: 45%; } #supplies div.main { width: 100%; } #contact div.center { width: 90%; } #supplies div.side { width: 100%; } #supplies div.side img { width: 100%; } #overlay { display: none; } div.nav { position: relative; } div.sider { float: none; margin-left: 0px; margin-top: 0; max-width: 100%; width: 100%; } div.sider img { max-width: 100%; width: 100%; } } @media screen and (max-width: 600px) { #contact div.main { width: 100%; } }