services {
background: url("../../assets/img/services-bg.jpg") center top / cover fixed no-repeat; text-align: center; padding: 40px 0; .services-list { @include center; position: relative; overflow: auto; margin: 30px auto 0 auto; &:after { content: ''; background: $accentFontColor; display: none; position: absolute; top: 15px; left: 50%; height: 98%; width: 1px; } li { position: relative; width: 100%; clear: both; margin: 0 0 30px 0; h3 { display: inline-block; vertical-align: middle; letter-spacing: .2em; } span { color: $accentFontColor; font-size: 2em; vertical-align: middle; } p { color: white; font-size: .9em; font-weight: 200; line-height: 1.8em; } &:before { content: ''; background: $accentFontColor; display: none; position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 50%; } &:nth-child(odd) { float: left; text-align: right; padding: 0; span { display: inline-block; } } &:nth-child(even) { float: left; text-align: left; padding: 0; } } }
}
@media only screen and (min-width: $windowSize) {
#services { padding: 80px 0 40px 0; .services-list { &:after { display: block; } li { width: 38%; &:before { display: block; } &:nth-child(odd) { float: left; padding: 0 2% 0 10%; span { display: inline-block; } &:before { right: -8px; } } &:nth-child(even) { float: right; padding: 0 10% 0 2%; &:before { left: -6px; } } } } }
}