@import "variables";
/**
* A timeline items.
* @component .timeline
* @example <div class="ui timeline">
* <!-- content -->
* </div>
*/
.timeline
&--inner
container-max()
clear-left()
padding 75px 0 0
@media (min-width: screen-sm)
padding 125px 30px 0
.multiple
margin 0
padding 0
list-style-type none
& ^[0]--entry::before
content ""
width 10px
height 100%
background-color #2c1200
position absolute
top 50%
left 40px
transform translate(-50%, -50%)
@media (min-width: screen-sm)
left 50%
.single
clear-left()
&:nth-child(2n)
& ^[0]--image
float left
position relative
@media (min-width: screen-sm)
push(1, 2, gutter)
& ^[0]--presentation
float left
@media (min-width: screen-sm)
pull(1, 2, gutter)
left 0
padding-left 20px
right auto
&--time
width 148px
height 148px
background-position center center
position absolute
top -50px
left 40px
background-image url('./images/timeline.png')
@media (min-width: screen-sm)
left: 50%
transform translateX(-50%)
h3,
h4
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
&--entry
clear-left()
padding-top 75px
padding-bottom 75px
position relative
@media (min-width: screen-sm)
padding-top 125px
padding-bottom 125px
&--image
float left
column(1, 1, gutter)
@media (min-width: screen-sm)
column(1, 2, gutter)
min-height 360px
p
margin-bottom 0
&--presentation
float left
column(1, 1, gutter)
padding 0 20px 0 80px
@media (min-width: screen-sm)
column(1, 2, gutter)
padding-left 40px
position absolute
top 50%
right 0
transform translateY(-50%)
h1,
h2
margin-top 40px
margin-bottom 20px
font-size 3.4rem
hlmt-rounded()
color #0a3184
@media (min-width: screen-sm)
margin-bottom 40px
font-size 6rem
h3
hlmt-rounded();
font-size 4.2rem
color #0A3184
h4
hlmt-rounded()
font-size 3.6rem
color #0A3184