/* Scss Document */ @import 'reset'; @import 'variables'; @import 'header'; @import 'footer'; @import 'contact'; body { font-family: $font1; overflow-x: hidden; } a { &:hover { cursor: pointer; } } .container { max-width: 1200px; margin: 0 auto; padding: 0 10px; } #hero { width: 100%; background-image: url("../graphics/yard2.JPG"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 530px; padding: .25rem 0 8rem; position: relative; img { position: absolute; left: 50%; bottom: -75px; transform: translateX(-50%); z-index: 499; max-width: 100%; } #inner-hero { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 2rem 0; width: 100%; #inner-hero-right { margin: 5px; line-height: 1; text-align: center; color: #fff; h1 { font-size: 38px; font-family: $font2; margin: 10px auto; padding-bottom: 5px; border-bottom: 6px double #fff; display: inline-block; span { text-transform: uppercase; font-size: 51px; font-weight: 700; letter-spacing: 3px; text-shadow: 0px 2px 2px $blue; } } p { font-family: $font1; margin: 10px auto; color: #fff; font-size: 16px; background-color: rgba(black, .45); padding: 7px 12px; max-width: 52ch; line-height: 1.4; } a#srchBtn { font-size: 18px; color: #fff; background: $green; padding: 5px 20px; text-decoration: none; -webkit-transition: .2s all ease-in-out; -o-transition: .2s all ease-in-out; transition: .2s all ease-in-out; text-transform: uppercase; border-radius: 40px; &:hover { background: $blue - 40; } } } } } .main-info { 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; .inner-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 2rem 0; width: 100%; h1 { font-size: 48px; text-align: center; margin: 80px auto 10px; font-family: $font2; padding-bottom: 25px; border-bottom: 2px solid $green; display: inline-block; color: $green; } p.top-info { margin: 10px; line-height: 1.4; text-align: center; max-width: 75ch; } .inner-main-btm { 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-between; margin: 3rem 0; > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .inner-info { padding: 1rem 2rem; h2 { margin: 0 0 10px; font-size: 35px; font-family: $font2; color: $blue; padding-bottom: 3px; border-bottom: 1px solid $blue; text-transform: uppercase; } p { margin: 10px 0; line-height: 1.7; } } ul.inner-photo { width: 550px; height: 385px; margin: 1rem 0; position: relative; li { position: absolute; height: 100%; width: 100%; background-size: cover; background-position: center; opacity: 0; z-index: 0; &:nth-of-type(1) { background-image: url("../graphics/wreck1.jpg"); -webkit-animation: fadeIn 18s infinite both; animation: fadeIn 18s infinite both; } &:nth-of-type(2) { background-image: url("../graphics/silvertruck.jpg"); -webkit-animation: fadeIn 18s 6s infinite both; animation: fadeIn 18s 6s infinite both; } &:nth-of-type(3) { background-image: url("../graphics/hauler.JPG"); -webkit-animation: fadeIn 18s 12s infinite both; animation: fadeIn 18s 12s infinite both; } } &#inner-photo-2 { li { background-repeat: no-repeat; &:nth-of-type(1) { background-image: url("../graphics/wreck7.jpg"); -webkit-animation: fadeIn 18s infinite both; animation: fadeIn 18s infinite both; } &:nth-of-type(2) { background-image: url("../graphics/lot2.JPG"); -webkit-animation: fadeIn 18s 6s infinite both; animation: fadeIn 18s 6s infinite both; } &:nth-of-type(3) { background-image: url("../graphics/aerial.JPG"); -webkit-animation: fadeIn 18s 12s infinite both; animation: fadeIn 18s 12s infinite both; } } } } } } } @-webkit-keyframes fadeIn { 33% { opacity: 1; } 66% { opacity: 0; } } @keyframes fadeIn { 33% { opacity: 1; } 66% { opacity: 0; } } #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: $grey; padding: 4rem 0; font-family: $font2; color: #fff; border-top: 6px solid $green; border-bottom: 6px solid $green; a { text-decoration: none; color: inherit; } p { font-size: 21px; max-width: 75ch; margin: 10px; line-height: 1.2; } #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: $grey; } } } .sm-hero { 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-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding: 3rem 0; background-image: url("../graphics/lot1.JPG"); background-size: cover; background-color: rgba(black, .5); background-blend-mode: multiply; background-attachment: fixed; background-position: center; min-height: 300px; margin: 1rem 0; font-family: $font2; h1 { font-size: 32px; padding-bottom: 3px; border-bottom: 1px solid #fff; margin: 10px auto; color: #fff; text-transform: uppercase; } p { margin: 10px; max-width: 75ch; color: #fff; line-height: 1.3; font-size: 19px; letter-spacing: 1px; } } @media all and (max-width: 950px) { .main-info { ul#services-list { 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; z-index: 200; padding: 2rem 0; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; li { height: 32vw; width: 32vw; 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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px; } } } } @media all and (max-width: 950px) { .main-info { .inner-main { .inner-main-btm { -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; ul.inner-photo { width: 100%; max-width: 900px; } } } } } @media all and (max-width: 767px) { #hero { background-position: center; #inner-hero { #inner-hero-right { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; h1 { font-size: 24px; span { font-size: 32px; } } p { font-size: 15px; } } } } #ebay-section { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } }