/* Scss Document */ @import 'reset'; @import 'variables'; *,*:after,*:before { -webkit-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a[href^="tel:"] { cursor: default; } body { font-family: $font1; position: relative; overflow-x: hidden; -webkit-animation: body .35s linear; animation: body .35s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; /*opacity: 0;*/ &:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } } @-webkit-keyframes body { 100% { opacity: 1; } } @keyframes body { 100% { opacity: 1; } } .container { max-width: 1100px; margin: 0 auto; } header { background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); background: linear-gradient(#fff, #eee); width: 100%; } #inner-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding: .5rem .5rem 0 .5rem; #inner-left { p { font-family: $font2; font-size: 17px; padding-left: .5rem; padding-bottom: .5rem; padding-right: .5rem; } } #logo { padding: .5rem; } } #inner-right { 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: end; -ms-flex-align: end; align-items: flex-end; } #inner-header-info { text-align: right; line-height: 1.5; h1,p { margin: 0 1rem; } h1 { font-size: 24px; font-family: $font2; font-weight: 700; letter-spacing: 1px; color: $red; } p { color: $blue; } } #menuBtn { display: none; } ul#nav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1rem; li { -webkit-transition: .1s all ease-in-out; transition: .1s all ease-in-out; margin: 0 2.5px; padding: .75rem 1rem; font-size: 17px; font-family: $font2; border-top: 2px solid $red; border-right: 2px solid $red; border-left: 2px solid $red; color: $red; background: #fff; &:hover { background: $blue; color: #fff; } } } #hero { background: $blue; } #inner-call { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: .5rem; } #top-call { padding: 1.5rem .5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; img { max-width: 600px; width: 100%; } #top-left { h1 { font-family: $font2; font-size: 2.75rem; color: #fff; line-height: 1.2; text-shadow: -2px 2px 0px $red; } } #top-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; h2 { color: #fff; max-width: 45ch; line-height: 1.3; margin: 1rem 0; font-size: 17px; } #srchBtn { background: $red; border-bottom: 3px solid #fff; color: #fff; width: 435px; padding: .75rem 4rem; text-align: center; font-family: $font2; font-size: 24px; font-weight: 700; -webkit-transition: .1s all ease-in-out; transition: .1s all ease-in-out; &:hover { background: #fff; color: $red; border-bottom: 3px solid $red; } &:active { -webkit-transform: translateY(3px); transform: translateY(3px); border-bottom: 3px solid transparent; } } } } #info { background: url("../graphics/flag.jpg"); background-color: rgba(255,255,255,.94); background-blend-mode: screen; background-attachment: fixed; background-position: center; background-size: cover; #main-info-wrap { padding: 1rem 0; } h1,h2,p { text-align: center; } h1 { margin: 1.5rem; font-size: 2.6em; font-family: $font2; color: $blue; line-height: 1.4; span { border-bottom: 3px dotted $red; } } h2 { text-transform: uppercase; color: $red; font-size: 18px; letter-spacing: 1px; font-weight: 700; margin: 1rem; } p { max-width: 76ch; line-height: 1.7; text-align: justify; margin: 0 auto; } #info-list { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; padding: 1.5rem .5rem; background: linear-gradient($red, $red - 50); margin: 1rem; } ul.content-list { 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: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; margin: .5rem; } .content-list li { max-width: 35ch; color: #fff; } .content-list i { font-size: 4rem; color: #fff; background: $grey; padding: 24px; border-radius: 55%; border: 2px solid #fff; } li.title { font-family: $font2; font-size: 2rem; padding: .5rem; color: #fff; font-weight: 700; letter-spacing: 1px; } li.information { line-height: 1.5; } li#truck i { -webkit-transform: scaleX(-1); transform: scaleX(-1); } } .triangle1 { border-bottom: 35px solid $red - 90; border-right: 35px solid transparent; border-left: 35px solid transparent; position: absolute; top: -35px; width: 0; left: 0; } .triangle2 { border-top: 35px solid $red - 90; border-right: 35px solid transparent; border-left: 35px solid transparent; position: absolute; bottom: -35px; width: 0; right: 0; } .triangle { border-bottom: 35px solid $blue - 90; border-right: 35px solid transparent; border-left: 35px solid transparent; position: absolute; top: -35px; width: 0; left: 0; } .two { border-top: 35px solid $blue - 90; border-right: 35px solid transparent; border-left: 35px solid transparent; position: absolute; bottom: -35px; width: 0; right: 0; z-index: 30000; } #wrecked { background: linear-gradient($blue, $blue - 50); padding: 2rem .5rem; margin: 6rem 1rem 2rem 1rem; position: relative; #wrecked-wrap { 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; p { color: #fff; font-family: $font2; font-size: 1.7rem; text-align: center; span { font-size: 2rem; font-weight: 700; text-shadow: -2px 2px 0px $red; } } } #left-wreck { 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; h1 { line-height: 1.2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; text-transform: capitalize; margin: .5rem; font-size: 3rem; text-shadow: -2px 2px 0px $red; &:before, &:after { content: "\f155"; font-family: FontAwesome; font-size: 24px; padding: 10px; color: #fff; } } h2 { color: #fff; text-transform: none; font-weight: normal; max-width: 40ch; border-top: 2px dotted #fff; line-height: 1.5; border-bottom: 2px dotted #fff; padding: 10px 0; } } } #btm-call { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1rem; #btm-left { line-height: 1.4; h1 { font-size: 3rem; color: $red; text-align: left; font-weight: 700; padding: 0; margin: .5rem 0; } i { color: $red; font-size: 2rem; padding: 0 .5rem; } p { text-align: left; font-size: 24px; color: $blue; line-height: 1.4; font-family: $font2; text-align: center; margin: .5rem 0; &:nth-of-type(2) { color: $red; } } } } /*footer*/ .footer { background: $blue; } .footer-cont { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; padding: 1rem .5rem; color: #fff; h1 { font-size: 1.5rem; padding-bottom: 1rem; font-family: $font2; letter-spacing: 2px; } li { line-height: 1.7; font-family: $font2; &#hourstitle { font-size: 1rem; font-family: $font1; margin-top: .5rem; } &#hours { font-family: $font1; } i { padding-right: .5rem; } } } #smmap { border: 2px solid $grey; iframe { width: 200px; height: 250px; border: 5px solid $grey; } } #footer-mid li:hover, #footer-right li:hover { color: $grey; } #copy { padding:.5rem; color: #fff; background: $red; font-size: 14px; } @media all and (max-width: 1045px) { #inner-header { -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; } #inner-header-info, #inner-left { text-align: center; } #inner-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } ul#nav { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 1rem; li { margin: 0 2.5px; padding: .5rem .75rem; font-size: 16px; } } #top-left { text-align: center; } .footer-cont { & > ul { margin: 0 10px; li { font-size: 14px; } } } } @media all and (max-width: 767px) { /****nav****/ #menuBtn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: flexend; -ms-flex-pack: flexend; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .5rem; z-index: 100; color: #fff; font-size: 2rem; background: $red; margin: 5px; border-radius: 50%; i { color: #fff; padding: 10px; } } ul#nav { display: none; position: relative; z-index: 101; } #nav.active { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-animation: none; animation: none; -webkit-transform: translateY(0vh); transform: translateY(0vh); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 0; width: 100%; left: 0; top: 0; background: $blue; } #nav li { 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: start; -ms-flex-align: start; align-items: flex-start; padding: .5rem 0 .5rem .5rem; width: 100vw; color: $red; font-weight: 700; line-height: 1.8; border-left: none; } #nav li:hover{ background: $red; color: $blue; } #top-call { -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; img { max-width: 600px; width: 100%; } #top-left { text-align: center; h1 { font-family: $font2; font-size: 2.75rem; color: #fff; line-height: 1.2; text-shadow: -2px 2px 0px $red; } } #top-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; #srchBtn { width: 90vw; } } } #info { p { padding: 10px; text-align: center; } } #info-list { -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 { margin: 10px 0; } } #btm-call { #btm-left { h1 { font-size: 8vw; text-align: center; } i { font-size: 4.5vw; } p { text-align: center; font-size: 4.5vw; } } } .footer-cont { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; & > ul { margin: 10px 0; } } }