.container { padding-top: 65px; background: #242422; background-position: center; background-size: cover; } .container h1 { font-weight: 400; font-size: 3rem; } .container h1 span { text-transform: uppercase; } .text { font-size: 2rem; } .main { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 10px; max-width: 1200px; margin: 50px auto; } .main > div { width: 50%; } .mapouter { position: relative; text-align: right; height: 300px; width: 500px; margin: 20px 0; border-radius: 20px; } .gmap_canvas { overflow: hidden; background: none !important; height: 300px; width: 500px; border-radius: 20px; } .big { font-weight: 400; font-size: 2.8rem; } .big > h1, .big > h2, .big > h3, .big > h4, .big > h5, .big > h6 { font-weight: normal; } .bold { font-weight: 400; } .hours { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; font-size: 1.7rem; } .hours > div { width: 33%; } .left { padding: 0 60px; } .special { font-size: 1.9rem; margin-top: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px dashed rgba(0, 0, 0, 0.45); } .special strong { text-transform: uppercase; font-weight: 400; font-size: 2.1rem; color: #edb265; } .promo { text-transform: uppercase; font-weight: 400; font-size: 1.8rem; } .promo strong { color: #edb265; font-size: 2rem; font-weight: 400; } @media (max-width: 930px) { .main { flex-direction: column; } .main > div { width: 100%; } .left { padding: 0 20px; } .right { margin-top: 50px; padding: 0 20px; } } @media (max-width: 660px) { .mapouter, .gmap_canvas { width: 100%; } } @media (max-width: 480px) { .container { padding-top: 55px; } .container h1 { text-align: center; margin-bottom: 30px; } .main { margin: 10px auto 50px auto; } }