/* Example: styles.less */ /* ========== Variables ========== */ @font-family-base: Arial, sans-serif; @color-base: #454545; @color-primary-bg: #f9f9f9; @color-white: #fff; @link-color: #0066cc; /* Example: styles.less */ /* ========== Variables ========== */ /* ========== Styles ========== */ .store-location-section { padding: 40px 0; } .store-location-section .container { max-width: 1307px; margin: 0 auto; padding: initial; background-color: transparent; color: @color-base; } .container h2 { font-size: 2.55rem; margin-bottom: 1rem; display: flex; align-items: center; padding-left: 44px; background: url('../images/gorn.png') no-repeat 0% 0%; background-size: 30px; min-height: 38px; padding-top: 0px; padding-bottom: 0px; margin-top: 16px; } .container h2::before { font-size: 1.5rem; margin-right: 0.5rem; } .container .store-location { display: flex; flex-wrap: wrap; gap: 6rem; background-color: #ffffff; padding: 22px 0px 0px 0px; /* border-radius: 6px; */ } .container .store-location .map-container { flex: 1 0 400px; /* fixed width for the map column */ max-width: 805px; position: relative; } .container .store-location .map-container iframe { width: 100%; height: 407px; border: 0; border-radius: 6px; } .container .store-location .info-container { flex: 0 1 auto; /* fill remaining space */ display: flex; flex-direction: column; justify-content: space-between; padding: 0px 11px; } .container .store-location .info-container .store-title { font-size: 3.9rem; /* font-weight: bold; */ margin-bottom: 0.5rem; margin-top: 33px; letter-spacing: 1px; } .container .store-location .info-container .address, .container .store-location .info-container .phone { margin-bottom: 0.5rem; padding-left: 65px; } .container .store-location .info-container .address{ align-items: center; margin-bottom: 0.5rem; padding-left: 65px; font-size: 2.2rem; margin-top: 23px; font-weight: bold; line-height: 2.5rem; letter-spacing: 0px; background: url("../images/pointer.png") no-repeat 2% 57%; background-size: 32px; } .container .store-location .info-container .address::before { margin-right: 0.5rem; } .container .store-location .info-container .phone { margin-top: 28px; margin-bottom: 20px; display: block; min-height: 40px; font-size: 2.2rem; color: @color-base; background: url('../images/phone.png') no-repeat 3% 6%; background-size: 24px; } .container .store-location .info-container .phone::before { margin-right: 0.5rem; } .container .store-location .directions-link { position: absolute; bottom: 29px; right: 67px; line-height: 41px; background: #fff; width: 150px; text-align: center; color: #666666; font-weight: bold; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px; padding: 0px 10px; } .directions-link .direction-icon{ background: url("https://maps.gstatic.com/mapfiles/embed/images/entity11.png") no-repeat 0 0; /* display: block; */ background-size: 70px 210px; width: 23px; height: 24px; /* display: inline-block; */ padding: 7px 13px 0px 10px; margin-right: 5px; } .container .store-location .info-container .work-hours { list-style: none; margin: 1rem 0 0; padding: 0px 0px 0px 3px; font-size: 1.7rem; width: 97%; letter-spacing: 1px; } .container .store-location .info-container .work-hours li { display: flex; justify-content: space-between; padding: 0rem 0 0px 0; border-bottom: none; /* removed border */ margin: 0px; } .container .store-location .info-container .work-hours li.wh-day span{ line-height: 2rem; } @media only screen and (max-width: 600px) { } @media only screen and (max-width: 991px) { .container .store-location{ gap: 0rem; } .container .store-location .info-container{ margin: 0 auto; } } @media only screen and (max-width: 768px) { .store-location-section{ padding: 0px 15px 40px 15px; } .container .store-location{ gap: 0rem; } .container .store-location .info-container{ margin: 0 auto; } .container .store-location .info-container .address{ font-size: 2rem; } .container .store-location .info-container .store-title{ //font-size: 3rem; } .container h2{ font-size: 2rem; } .container .store-location .info-container .work-hours{ min-width: 290px; } } @media only screen and (max-width: 457px) { .container .store-location .info-container .store-title{ font-size: 2.9rem; } .container .store-location .map-container{ flex: 1 0 300px; } }