/* ## Site Footer --------------------------------------------- */ .site-footer { background-color: $dark; color: $medium; position: relative; >.wrap { padding: 0 5vw 5vw; position: relative; @include breakpoint(sm) { padding: 0 0 6rem; } >p { margin-bottom: 0; font-size: 1.6rem; max-width: calc(100% - 4rem); } } a { color: $medium; text-decoration: none; &:hover { color: $border; } } .back-to-top { position: absolute; right: 5vw; bottom: 2rem; background-color: rgba($white,0.1); border-radius: $site-radius; width: 3rem; height: 3rem; text-align: center; @include breakpoint(sm) { bottom: 5.8rem; right: 0; } &:hover { background-color: rgba($white,0.2); } &:before, &:after { content: ''; display: block; height: 2px; width: 8px; background-color: $medium; position: absolute; top: 1.3rem; left: 0.9rem; transform: rotate(-45deg); } &:after { transform: rotate(45deg); left: 1.3rem; } } } /* ## Footer Widgets --------------------------------------------- */ .footer-widgets { padding: 6rem 0; z-index: 0; font-size: 1.7rem; @include breakpoint(md) { padding: 10rem 0; } .wrap { @include breakpoint(sm) { display: flex; flex-wrap: wrap; } } .widget-area { margin: 0 auto 4rem; @include breakpoint(sm) { flex: 1; margin-left: 2.564102564102564%; &:first-of-type { margin-left: 0; } } &:last-of-type { margin-bottom: 0; } .widget { width: 100%; display: block; margin: 0 auto 2em; &:last-of-type { margin-bottom: 0; } } } .widget-title { text-transform: uppercase; font-size: 1.6rem; margin-bottom: 1.5em; color: $border; } .menu-item { width: 50%; line-height: 1.618; padding: 0; margin: 0 0 1em; font-family: $font-body; font-weight: $normal; text-transform: capitalize; a { font-size: 1.6rem; float: left; text-align: left; padding: 0; margin: 0; } } .menu-item a:hover, .menu-item.current-menu-item > a { color: $border; } .sub-menu { display: none !important; } .enews { ::-moz-placeholder { color: rgba($white, 0.5); opacity: 1; } ::-webkit-input-placeholder { color: rgba($white, 0.5); } form { position: relative; } input { background: transparent; color: $white; border-color: $gray; padding: 0.4rem 1.4rem; font-size: 1.6rem; @include transition; &:focus { border-color: $medium; } } input[type="submit"] { background-color: transparent; position: absolute; right: 0; bottom: 0; padding: .5em 0; width: 5rem; line-height: 2; font-size: 100%; z-index: 1; color: transparent; box-shadow: none; &:hover { + .fa-send-o { color: $white; } } } .fa-send-o { position: absolute; right: 0; bottom: 0; padding: .5em 0.75em; line-height: 1; font-size: 2rem; margin-bottom: 0.5em; z-index: 0; @include transition; } } p { @include breakpoint(sm) { max-width: 90%; } } } /* ## Before Footer --------------------------------------------- */ .before-footer { padding: 6rem 0; color: $white; @include overlay; @include breakpoint(sm) { padding: 8rem 0; } &:before { width: 100vw; height: 101%; left: -50%; right: -50%; top: 1%; margin: auto; } .widget { margin-bottom: 5vw; position: relative; z-index: 1; @include breakpoint(sm) { margin-bottom: 0; } } .widget_media_image:first-of-type { display: block; position: absolute; width: 100vw; height: 100%; top: 0; bottom: 0; left: -50%; right: -50%; margin: auto; z-index: 0; .widget-wrap { position: absolute; height: 100%; width: 100%; } img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } } .wrap { z-index: 1; @include breakpoint(sm) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; @include flexfix; } } .widget-title { text-transform: uppercase; font-size: 3rem; } p { margin-bottom: 0; color: $light; } button, .button, input[type="submit"] { margin: 0; color: $white; &:hover { color: $white; } &.alignright { float: left; @include breakpoint(sm) { float: right; } } } }