home {
background: url("../../assets/img/bird.jpg") center / cover fixed no-repeat; position: relative; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 600px; h1, h2 { position: relative; font-size: 1.4em; font-weight: 300; z-index: 2; } h1 { font-size: 2em; letter-spacing: .3em; margin: 0 0 30px 0; } .cta { @include button; text-transform: uppercase; font-size: 1.5em; letter-spacing: .1em; padding: 0 10px; border-radius: 5px; z-index: 2; } .social-media { text-align: center; z-index: 2; li { float: none; clear: none; margin: 60px 10px; } } .bird { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; img { position: absolute; top: 0; left: 0; display: none !important; height: 100%; } }
} .arrow-down {
position: absolute; bottom: 30px; left: 50%; margin-left: -4px; z-index: 2; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid $accentFontColor;
}
@media only screen and (min-width: $windowSize) {
#home { background: url("../../assets/img/bird/bg.png") #252525 center / cover fixed no-repeat; h2 { font-size: 2em; } h1 { font-size: 3.8em; letter-spacing: .5em; } .cta { font-size: 2.2em; } .social-media { position: absolute; top: 50%; left: 10%; transform: translate(0, -50%); li { float: left; clear: both; margin: 30px 0; a { font-size: 1.2em; } } } .bird { img { display: block !important; } } }
}