@import url('https://fonts.googleapis.com/css?family=Montserrat');

*
{
  margin: 0;
  padding: 0;
  border: 0
}

body
{
  font-family: 'Montserrat', sans-serif;
  overflow: hidden
}

ul{list-style: none}
/*--------------------------------------------
            #Start Timeline Rules
--------------------------------------------*/
#timeline
{
  width: 100%;
  height: 100%;
 /* background-color: #222223;*/
  padding: 20px 1%;
  overflow: hidden
}

#timeline ul
{
  min-height: 950px;
  border-top: 0;
  border-left: 4px solid transparent;
  border-left-color: #7ab800; /* Fullback */
  -webkit-border-image: -webkit-linear-gradient( 
    top, 
    #7ab800 0%,
    #0085c3 35%,
    #f2af00 50%,
    #ce1126 65%,
    #6e2585 100%);
  -moz-border-image: -moz-linear-gradient( 
    top, 
    #7ab800 0%,
    #0085c3 35%,
    #f2af00 50%,
    #ce1126 65%,
    #6e2585 100%);
  -ms-border-image: -ms-linear-gradient( 
    top, 
    #7ab800 0%,
    #0085c3 35%,
    #f2af00 50%,
    #ce1126 65%,
    #6e2585 100%);
  -o-border-image: -o-linear-gradient( 
    top, 
    #7ab800 0%,
    #0085c3 35%,
    #f2af00 50%,
    #ce1126 65%,
    #6e2585 100%);
  border-image: linear-gradient(
    top, 
    #7ab800 0%, 
    #0085c3 35%, 
    #f2af00 50%, 
    #ce1126 65%, 
    #6e2585 100%);
  border-image-slice: 1;
  position: relative;
  top: 5%;
  left: 50%;
  perspective: 2000px
}

#timeline ul li:after
{
  content: "\2713";
  font-family: fontawesome;
  display:block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-weight: 100;
  font-size: 90%;
  line-height:35px;
  text-align: center;
  background-color: #7ab800;
  color: #fff;
  position:absolute;
  -webkit-transition: transform 1s linear;
  transition: transform 1s linear
}

#timeline ul li:nth-child(2):after
{
  background-color: #0085c3;
}

#timeline ul li:nth-child(3):after
{
  content: "\f11d";
  background-color: #f2af00;
}

#timeline ul li:nth-child(4):after
{
  content: "\f11d";
  background-color: #ce1126
}

#timeline ul li:last-child:after
{
  content: "\f11d";
  background-color: #6e2585
}

#timeline ul li .cont
{
  width: 350px;
  padding: 12px 10px 8px;
  border: 2px solid transparent;
  border-radius: 4px;
  -webkit-transform: translate(0, -55px);
  transform: translate(0, -55px);
  line-height: 150%;
  font-size: 80%;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 22px
}

#timeline ul li:nth-child(odd) .cont
{
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}

#timeline ul li:nth-child(even) .cont
{
  -webkit-transform-origin: right;
  transform-origin: right;
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}

#timeline ul li:first-child .cont
{
  color: #7ab800
}

#timeline ul li:nth-child(2) .cont
{
  color: #0085c3
}

#timeline ul li:nth-child(3) .cont
{
  color: #f2af00
}

#timeline ul li:nth-child(4) .cont
{
  color: #ce1126
}

#timeline ul li:last-child .cont
{
  color: #6e2585
}

#timeline ul li:nth-child(odd):hover .cont
{
  text-align: left;
  -webkit-transform: rotateY(-175deg) translate3d(60px,-50px,5px);
  transform: rotateY(-175deg) translate3d(60px,-50px,5px);
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear;
}

#timeline ul li:nth-child(even):hover .cont
{
  text-align: left;
  -webkit-transform: rotateY(175deg) translate3d(-60px,-50px,5px);
  transform: rotateY(175deg) translate3d(-60px,-50px,5px);
  -webkit-transition: transform 1.5s linear;
  transition: transform 1.5s linear
}

#timeline ul li:nth-child(odd):hover .cont p,
#timeline ul li:nth-child(odd):hover .cont h3
{
  -webkit-transform: rotateY(-175deg);
  transform: rotateY(-175deg)
}

#timeline ul li:nth-child(even):hover .cont p,
#timeline ul li:nth-child(even):hover .cont h3
{
  -webkit-transform: rotateY(175deg);
  transform: rotateY(175deg)
}

#timeline ul li:nth-child(2) .cont time{background-color: #0085C3}

#timeline ul li:nth-child(3) .cont time{background-color: #F2AF00}

#timeline ul li:nth-child(4) .cont time{background-color: #CE1126}

#timeline ul li:last-child .cont time{background-color: #6E2585}

#timeline ul li:nth-child(odd):hover .cont time
{
  -webkit-transform: rotateY(-175deg);
  transform: rotateY(-175deg)
}

#timeline ul li:nth-child(even):hover .cont time
{
  -webkit-transform: rotateY(175deg);
  transform: rotateY(175deg)
}

#timeline ul li .cont p{display: block}

#timeline ul li:nth-child(n+1):after{left: -18px}

#timeline ul li:first-child:after,
#timeline ul li:first-child .cont
{
  top: 8%
}

#timeline ul li:nth-child(2):after,
#timeline ul li:nth-child(2) .cont
{
  top: 28%
}

#timeline ul li:nth-child(3):after,
#timeline ul li:nth-child(3) .cont
{
  top: 48%
}

#timeline ul li:nth-child(4):after,
#timeline ul li:nth-child(4) .cont
{
  top: 68%
}

#timeline ul li:last-child:after,
#timeline ul li:last-child .cont
{
  top: 88%
}

#timeline ul li:nth-child(n+1):hover:after
{
  -webkit-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
  -webkit-transition: transform 1s linear;
  transition: transform 1s linear
}

#timeline ul li:first-child .cont{ border-color: #7ab800}

#timeline ul li:nth-child(2) .cont{ border-color: #0085c3}

#timeline ul li:nth-child(3) .cont{ border-color: #f2af00}

#timeline ul li:nth-child(4) .cont{ border-color: #ce1126}

#timeline ul li:last-child .cont{ border-color: #6e2585}

#timeline ul li:nth-child(odd) .cont{left: 30px}

#timeline ul li:nth-child(even) .cont{left: -385px}

#timeline ul li .cont:before,
#timeline ul li .cont:after
{
  content: "";
  display: block;
  width: 0 ;
  height: 0;
  position: absolute;
  border-style: solid;
}

#timeline ul li:nth-child(odd) .cont:before
{
  border-width: 11px 11px 11px 0 ;
}

#timeline ul li:nth-child(even) .cont:before
{
  border-width: 11px 0 11px 11px
}

#timeline ul li:nth-child(odd) .cont:after
{
  border-width: 10px 10px 10px 0
}

#timeline ul li:nth-child(even) .cont:after
{
  border-width: 10px 0 10px 10px
}

#timeline ul li:nth-child(odd) .cont:before
{
  top: 50%;
  left: -11px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

#timeline ul li:nth-child(even) .cont:before
{
  top: 50%;
  right: -11px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

#timeline ul li:first-child .cont:before
{
  border-color: transparent #7ab800 transparent transparent
}

#timeline ul li:nth-child(2) .cont:before
{
  border-color: transparent transparent transparent #0085c3
}

#timeline ul li:nth-child(3) .cont:before
{
  border-color: transparent #f2af00 transparent transparent
}

#timeline ul li:nth-child(4) .cont:before
{
  border-color: transparent transparent transparent #ce1126
}

#timeline ul li:last-child .cont:before
{
  border-color: transparent #6e2585 transparent transparent
}

#timeline ul li:nth-child(odd) .cont:after
{
  border-color: transparent #222223;
  top: 50%;
  left: -9px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

#timeline ul li:nth-child(even) .cont:after
{
  border-color: transparent #222223;
  top: 50%;
  right: -9px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%)
}

#timeline ul li .cont time
{
  width: 100px;
  height: 30px;
  position: absolute;
  top: -15px;
  left: calc(100%/2 - 50px);
  background-color: #7AB800;
  color: #f5f5f5;
  line-height: 30px;
  text-align: center;
  border-radius: 3px
}

.copy-right
{
  color: #7AB800;
  text-align: center;
  text-transform: uppercase;
  padding: 130px 0 20px
}

.copy-right a
{
  color: #0085C3;
  text-transform: capitalize
}

@media screen and (max-width: 600px)
{
  #timeline ul li .cont
  {
    width: 120px;
    line-height: 120%
  }
  
  #timeline ul li:nth-child(even) .cont{left: -175px}
  
  #timeline ul li .cont p,
  #timeline ul li .cont time
  {
    /*font-size: 76%*/
  }
  
  #timeline ul li .cont time
  {
    width: 80px;
    left: calc(100%/2 - 40px)
  }
}
/*-------------------------------------
         #End Timeline Rules
-------------------------------------*/