/* Scss Document */ @import 'reset'; @import 'variables'; @import 'header'; @import 'footer'; @import 'location'; @import 'contact'; body { font-family: $font2; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 10px; } .main-info { margin: 1rem 0; .top-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-around; margin: 2rem 0 3.2rem; color: $grey; #top-left { max-width: 50%; margin: 10px; h1 { max-width: 21ch; font-size: 48px; font-weight: 700; font-family: $font2; line-height: 1.1; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid $grey; span { color: $orange - 60; } } p { max-width: 65ch; line-height: 1.7; font-size: 17px; margin: 20px 0; } } ul.top-list { max-width: 50%; margin: -10px 10px; li { margin: 30px 0; max-width: 60ch; line-height: 1.7; position: relative; span { font-family: $font2; font-size: 21px; font-weight: 700; border-bottom: 2px solid $orange; &.from-loc { font-size: 14px; letter-spacing: 0px; font-weight: 400; border-bottom: none; color: $blue; } } } } } } #inner-services { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; #services { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; align-items: center; background: $grey; padding: 1rem 25%; border: 5px solid $blue + 25; p { margin: 20px 0; font-size: 21px; font-family: $font2; color: $blue + 55; font-weight: 700; letter-spacing: 2px; max-width: 80%; text-align: center; text-shadow: -1px 1px 1px $grey; position: relative; &:after { content: ""; position: absolute; height: 8px; width: 8px; border-radius: 50%; background: #fff; bottom: -25px; left: 50%; transform: translateX(-50%); } &:nth-of-type(4) { &:after { display: none; } } span { margin: 3px 0; font-size: 18px; font-weight: 400; text-shadow: none; letter-spacing: 1px; color: #fff; a { color: $blue; &:hover { color: $blue; } } } } } } #ebay-section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: linear-gradient(90deg, $orange - 90, $orange); padding: 4rem 0; font-family: $font2; color: #fff; border-top: 3px solid $grey; border-bottom: 3px solid $grey; margin: 2rem 0 0; a { text-decoration: none; color: #fff; } p { font-size: 36px; max-width: 75ch; margin: 10px; line-height: 1.2; text-align: center; } #ebayBtn { padding: 15px 40px; border-radius: 8px; border: 3px solid #fff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; font-size: 18px; margin: 10px; -webkit-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; &:hover { padding: 15px 70px; background: #fff; color: $blue; } } } /*@media all and (max-width: 767px) { .main-info { .top-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; &#location-info { align-items: flex-start; } #top-left { max-width: 100%; p { max-width: 100%; } } ul.top-list { max-width: 100%; li { max-width: 100%; } } } } #inner-services { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; #services { padding: 1rem 10px; p { max-width: 100%; } } } #ebay-section { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }*/