about {
position: relative; background: $accentFontColor; padding: 40px 0 0 0; h2 { background: url("../../assets/img/about.jpg"); background-attachment: fixed; -webkit-text-fill-color: transparent; -webkit-background-clip: text; float: none; max-width: 90%; padding: 0 5%; color: black; font-size: 4em; font-weight: 600; line-height: .9em; letter-spacing: 0; margin: 0 auto; } .icon-Phoenix { font-size: 1em; vertical-align: middle; line-height: .5em; } p { @include center; text-align: justify; line-height: 2em; margin: 40px auto; } li { flex: 1 auto; text-align: center; margin: 0 0 30px 0; &:nth-child(2) { flex: 40 auto; h4 { width: 40%; } } &:last-child { h4 { width: 80%; } } } h3, h4 { color: $mainFontColor; } h3 { font-size: 2em; font-weight: 700; } h4 { font-size: 1.3em; display: inline-block; width: 100%; font-weight: 300; } h5 { position: absolute; top: 120px; left: 40px; display: none; color: black; letter-spacing: .7em; transform: rotate(-90deg) } span { font-size: 3em; } .bbtv-data { @include center; display: inline-block; } #views-counter { @include center; position: relative; font-size: .9em; letter-spacing: .45em; text-transform: uppercase; span { position: static; top: -160px; right: -110px; transform: rotate(-90deg); font-size: 1em; &:after { content: ''; background: black; display: block; width: 120px; height: 1px; margin-left: 90px; } } }
}
@media only screen and (min-width: $windowSize) {
#about { padding: 80px 0; h2 { max-width: $maxWidth - 200px; padding: 0; padding-right: 200px; font-size: 7em; } h5 { display: inline-block; } li { margin: 0; } .bbtv-data { display: flex; width: $maxWidth; } #views-counter { span { position: absolute; } } }
}