@import "https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
// Variables
$darkgray:#726f77;
$bg-body: #f1f1f1;
$blue: #00B9E1;
$white: #fff;
$yellow:#F5B90F;
// Mixins and Placeholders
%clearfix {
&:after, &:before {
content: '';
clear: both;
display: block;
width: 100%;
}
}
@mixin prefix($prop, $val) {
@each $prefix in '-webkit-', '-moz-', '-ms-', '' {
#{$prefix}#{$prop}: $val;
}
}
@mixin calc($prop, $val) {
@each $pre in -webkit-, -moz-, -o- {
#{$prop}: $pre + calc(#{$val});
}
#{$prop}: calc(#{$val});
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {@content;}
@-moz-keyframes #{$name} {@content;}
@-ms-keyframes #{$name} {@content;}
@keyframes #{$name} {@content;}
}
@mixin animate($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
*, *:before, *:after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body, html {
height: 100%;
}
body {
background: $bg-body;
background-size: cover;
margin: 0;
padding: 0;
font-family: helvetica, arial, tahoma, verdana;
line-height: 20px;
font-size: 14px;
color: $darkgray;
}
img {max-width: 100%;}
a {
text-decoration: none;
}
// Timeline
#timeline {
@include prefix(transition, all 0.5s ease);
margin: 2%;
padding: 0;
position: relative;
width: 90%;
&:after {
clear: both;
content: "";
display: table;
width: 100%;
}
.timeline-item {
@extend %clearfix;
@include animate(fadein 1s linear 1 forwards);
display:block;
float:left;
margin:0;
opacity:0;
position: relative;
width:30%;
&:after{
border-top: 3px solid $blue;
padding-bottom:100%;
margin-left: 50%;
}
&:before
{
content: '';
border-bottom: 7px solid transparent;
border-left: 7px solid $yellow;
border-top: 7px solid transparent;
height: 15px;
left: 100%;
position: absolute;
top: -6px;
width: 15px;
}
&.two{
animation-delay: 0.5s;
}
&.three{
animation-delay: 1s;
&:after{
border: 3px solid $blue;
border-left: 0;
border-radius: 0 50% 50% 0;
margin-left: 50%;
}
&:before {
@include calc(left, "150% - 8px");
border-left:7px solid transparent;
border-top:7px solid $yellow;
border-right:7px solid transparent;
top: 50%;
}
}
&.four{
animation-delay: 1.5s;
float:right;
margin-right: 10%;
margin-top:-3px;
&:after{
margin-left: -50%;
}
&:before {
border-left:7px solid transparent;
border-right:7px solid $yellow;
left:0;
}
}
&.five{
animation-delay: 2s;
float:right;
margin-top:-3px;
&:after{
margin-left: -50%;
}
&:before {
border-left:7px solid transparent;
border-right:7px solid $yellow;
left:0;
}
}
&.six{
animation-delay: 2.5s;
float:right;
margin-top:-3px;
&:after{
border: 3px solid $blue;
border-left: 0;
border-radius: 50%;
border-right: 0;
margin-bottom:-3px;
margin-left:0;
}
&:before {
left:0;
margin-left:-7px;
top: 50%;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid $yellow;
}
}
&.seven{
animation-delay: 3s;
}
&.eight{
animation-delay: 3.5s;
}
&.nine{
animation-delay: 4s;
&:after{
border: none;
}
&:before{
border: none;
}
}
}
.timeline-content {
@include prefix(transition, all .5s ease);
padding:5%;
padding-top:10%;
position:absolute;
text-align: justify;
width: 100%;
h1 {
color: $darkgray;
font:{
family: "Dosis", arial, tahoma, verdana;
size:1.3rem;
weight: 500;
}
margin: 10px 0 0 50%;
line-height:1.5rem;
padding:0;
text-align:left;
text-transform:uppercase;
width: 100%;
}
p{
margin-left:50%;
padding-right:10%;
text-align:justify;
width:100%;
}
&:before {
@include prefix(border-radius, 50%);
background-color: $white;
border:3px solid $blue;
content: '';
height: 15px;
left: 50%;
position: absolute;
top: -5px;
width: 15px;
}
}
button{
background:$blue;
border:0;
color:$white;
display:block;
margin-top:10px;
padding:5px 15px;
width:100%;
a{
color:$white;
font-family: "Dosis", arial, tahoma, verdana;
font-size:1rem;
text-decoration: none;
}
}
}
@include keyframes (fadein) {
0% { opacity: 0; }
100% { opacity: 1; }
}
@media screen and (max-width: 768px) {
#timeline {
width:95%;
.timeline-item {
&.one,
&.two,
&.three,
&.four,
&.five,
&.seven,
&.eight,
&.nine{
display:block;
float:left;
width:100%;
&:after{
border: none;
border-left: 3px solid $blue;
margin-left: 1px;
padding-bottom:40%;
}
&:before {
content: '';
border-left:7px solid transparent;
border-right:7px solid transparent;
border-top:7px solid $yellow;
height: 15px;
left: -5px;
position: absolute;
top: 50%;
width: 15px;
}
&:last-child{
&:after{
border: none;
}
&:before{
border: none;
}
}
}
&.six{
width:100%;
&:after{
border-right: 0;
border-left: 0;
margin-left:-20%;
padding-bottom: 40%;
width: 40%;
}
&:before {
border:none;
}
}
}
.timeline-content {
width: 100%;
//background: rgba(255,255,255,0.7);
@include prefix(transition, all .3s ease);
padding-right:0;
padding-top:0;
position:absolute;
text-align: justify;
z-index:9;
h1 {
margin: -7px 0;
}
p{
margin-left:0;
padding:0;
width:100%;
}
&:before {
left: -5px;
top: -5px;
}
}
}
}
