#issues li:nth-child(1) .bigdate, #issues li:nth-child(1) .tblock,
#issues li:nth-child(2) .bigdate, #issues li:nth-child(2) .tblock,
#issues li:nth-child(3) .bigdate, #issues li:nth-child(3) .tblock {background-color: #da7f32}

#issues li:nth-child(31) .bigdate, 
#issues li:nth-child(31) .tblock,
#issues li:nth-child(32) .bigdate, 
#issues li:nth-child(32) .tblock,
#issues li:nth-child(33) .bigdate,
#issues li:nth-child(33) .tblock,
#issues li:nth-child(34) .bigdate,
#issues li:nth-child(34) .tblock,
#issues li:nth-child(35) .bigdate,
#issues li:nth-child(35) .tblock,
#issues li:nth-child(36) .bigdate,
#issues li:nth-child(36) .tblock,
#issues li:nth-child(37) .bigdate,
#issues li:nth-child(37) .tblock,
#issues li:nth-child(38) .bigdate,
#issues li:nth-child(38) .tblock,
#issues li:nth-child(39) .bigdate,
#issues li:nth-child(39) .tblock,
#issues li:nth-child(40) .bigdate,
#issues li:nth-child(40) .tblock,
#issues li:nth-child(41) .bigdate,
#issues li:nth-child(41) .tblock,
#issues li:nth-child(42) .bigdate,
#issues li:nth-child(42) .tblock,
#issues li:nth-child(43) .bigdate,
#issues li:nth-child(43) .tblock,
#issues li:nth-child(44) .bigdate,
#issues li:nth-child(44) .tblock
{background-color: #49b4cf !important}

#dates li:nth-child(1) a.selected,
#dates li:nth-child(2) a.selected,
#dates li:nth-child(3) a.selected 
{background-color: #da7f32 !important;}

#dates li:nth-child(31) a.selected,
#dates li:nth-child(32) a.selected,
#dates li:nth-child(33) a.selected,
#dates li:nth-child(34) a.selected,
#dates li:nth-child(35) a.selected,
#dates li:nth-child(36) a.selected,
#dates li:nth-child(37) a.selected,
#dates li:nth-child(38) a.selected,
#dates li:nth-child(39) a.selected,
#dates li:nth-child(40) a.selected,
#dates li:nth-child(41) a.selected,#dates li:nth-child(42) a.selected,#dates li:nth-child(43) a.selected,#dates li:nth-child(44) a.selected
{background-color: #49b4cf !important}

#timeline {
 max-width: 950px;
     width: 100%;
  height: auto;
  overflow: visible;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  
}

.datesouter {display: block; width:1000px; margin-left: auto; margin-right: auto;overflow: visible}

#dates {
  width: 100%;
    background-color: #ebebeb;
  
 
}

#dates {position: relative;border-top-left-radius: 20px;}
#dates:after {    position: absolute;
    content: '';
    width: 90%;
    display: block;
    height: 2px;
    background-color: #da7f32;
    z-index: -1;
    top: 20px;
    left: 30px;}

#dates li {
font-size: 1.5rem;
  list-style: none;
  float: left;
  width: 100px;
  height: auto;
  text-align: center;
  display: block;
    background-color: #ebebeb;
}

#dates li a { display: block;
   width: 100%;font-size: 1.5rem; font-family: 'd-din_condensedregular', sans-serif !important;color:#444444;}

#dates a.selected {
margin-top: 0px;position: relative;color:#fff;background-color: #a7b600 !important; border-top-left-radius: 20px;
}

.quoteinner {position: relative;    overflow: hidden;}

/*#dates a.selected:after {
  font-size: 5rem;
    display: block;
    content: '';
     margin-top: 0px;
    position: absolute;
   margin-left: -25px;
    left: 50%;
    width: 40px;
    height: 150px;
    background-image: url(https://www.webmadeeasy.co.za/ael/application/themes/template/img/dateline.png);
    background-size: 35px auto; background-repeat: no-repeat; background-position: bottom;z-index: 100;
}*/



.tblock {position: relative;}




#issues {
  width: 950px;
  height: 400px;
  overflow: hidden;
}

#issues li {
    width: 100%;
    max-width: 950px;
    height: 350px;
    list-style: none;
    float: left;
    padding-top: 30px;
    
    padding-left:  0px;
     padding-right:  0px;
   
}

/*#issues li.selected img {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}*/



#issues li img {
  float: left;
  margin: 10px 30px 10px 70px;
  background: transparent;
 /* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
 
  
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
  
  
  zoom: 1;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  -webkit-transform: scale(0.7, 0.7);
  -moz-transform: scale(0.7, 0.7);
  -o-transform: scale(0.7, 0.7);
  -ms-transform: scale(0.7, 0.7);
  transform: scale(0.7, 0.7);*/
}


@keyframes bounceInRight{from, 60%, 75%, 90%, to{animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);}
from{opacity:0;transform:translate3d(3000px, 0, 0);}
60%{opacity:1;transform:translate3d(-25px, 0, 0);}
75%{transform:translate3d(10px, 0, 0);}
90%{transform:translate3d(-5px, 0, 0);}
to{transform:none;}
}
.bounceInRight{animation-name:bounceInRight;}


.imageblock {position: relative; }
.bigdate {position: absolute; border-top-left-radius: 30px;background-color: #a7b600;color:#fff;bottom: 1000px; font-size: 4rem;padding-left: 40px;padding-right: 40px;  transition: all 0.5s ease;z-index: 1;left: 45px;}

li.selected .bigdate {bottom: -30px;}
#issues li.selected .tblock {
    
    
     -webkit-animation:bounceInRight 0.7s ; /* Safari 4+ */
  -moz-animation:bounceInRight 0.7s ; /* Fx 5+ */
  -o-animation:bounceInRight 0.7s ; /* Opera 12+ */
  animation:bounceInRight 0.7s ; /* IE 10+, Fx 29+ */
    
    
}
#issues li img {top: 700px;position: relative; transition: all 0.9s ease;}
#issues li.selected img {top: 0;}
#issues li h4 {
  color: #fff;
  font-size: 3rem !important;
    font-family: 'd-din_condensedregular', sans-serif !important;
line-height: 1 !important;
  font-weight: bold !important;
  text-align: left;

}

#issues .tblock { 
    background-color: #a7b600;
    border-bottom-right-radius: 50px;
    display: block;
    
    padding: 20px;
    width: 50%;
    float: right;
   line-height: 1;
    margin-right: 45px;
    transition: all 0.7s ease;}

#issues .imageblock {width: 45%;float: left;}

#issues li p {
  font-size: 1.2rem !important;
  font-family: 'd-din_condensedregular', sans-serif !important;
  font-weight: normal;
  line-height: 1.3;
 color:#fff;
}

#grad_left,
#grad_right {
  width: 100px;
  height: 450px;
  position: absolute;
  top: 0;
}

#grad_left {
  left: 0;
  
}

#grad_right {
  right: 0;
  
}

#next,
#prev {
  position: absolute;
  top: 0;
  font-size: 70px;
  top: 205px;
  width: 22px;
  height: 38px;
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

#next:hover,
#prev:hover {
 background-color: rgba(255, 255, 255, 0.3);
}

#next {
  right: 0px;
      font-size: 0;
   background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0px;
    width: 38px;
    height: 36px;
    border: 0px solid #fff;
    background-image: url(../img/arrowrightred.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
}

#prev {
 
  left: 0px;
      font-size: 0;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0px;
    width: 38px;
    height: 36px;
    border: 0px solid #fff;
    background-image: url(../img/arrowright2red.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
}

#next.disabled,
#prev.disabled {
  opacity: 0.2;
}


#dates2 {z-index: 10;background-color: #e1e1e1;margin-left: 0;top: 350px !important;display: none !important}
#dates2 a.selected {
  font-size: 1.3rem;
    color:#e3000b;
}
#dates2 li a { display: block;width: 100%;font-size: 1.1rem; font-family: 'd-din_condensedregular', sans-serif !important;color:#444444;}