/*---------------------------------------------------
    LESS Elements 0.6
  ---------------------------------------------------
    A set of useful LESS mixins by Dmitry Fadeyev
    Special thanks for mixin suggestions to:
      Kris Van Herzeele,
      Benoit Adam,
      Portenart Emile-Victor,
      Ryan Faerman

    More info at: https://lesselements.com
-----------------------------------------------------*/
/**** convert px values to rem values, declare both simultaneously ******/
.mobile-timeline{display:none}

.timeline_wrap {
  background: #fff;
}
.timeline_wrap img {
  width: auto;
}
.timeline_wrap .col_left {
  padding-left: 40px;
  padding-left: 4.0rem;
}
.timeline_wrap .col_right {
  padding-right: 40px;
  padding-right: 4.0rem;
}

.date_wrapper {
  width: 100%;
  background: #8b2331;
  left: 0;
  height: 160px;
  height: 11rem;
  overflow: hidden;
}

.text-float{float:right;width:50%;margin-top:80px}

.red_timeline_bg {
  position: absolute;
  width: 100%;
  top: 160px;
  top: 16rem;
}
.red_timeline_bg svg {
  width: 100%;
}

#timeline {
  margin: 0 auto;
  position: relative;
  overflow:hidden;	
  font-family: 'Barlow', sans-serif;
}

#dates {
  width: 100%;
  background: #8b2331;
  /*margin: -30px 0px 40px 0px;
  margin: -3rem 0rem 4rem 0rem;*/
  display: block!important;
}
#dates li {
  list-style: none;
  float: left;
  width: 100px;
  width: 10rem;
  height: 80px;
  height: 7rem;
  color: white;
  text-align: center;
  display: table;
}
#dates a {
  font-size: 25px;
  font-size: 2.8rem;
  line-height: 60px;
  font-weight: 800;    
  color: white;
  position: relative;
  display: table-cell;
  text-decoration: none;
  vertical-align: bottom;
  font-family: 'Barlow', sans-serif;
  color: #c15261;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  overflow: visible;
}
#dates a:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: -10px;
  bottom: -1rem;
  left: 50%;    
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background-color: transparent;
	border: solid 2px #e6676c;
}
#dates .selected {
  font-size: 3.5rem;
  line-height: 80px;
  color: white;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#dates .selected:after {
  background-color: #fff;
	border-color: #fff;
}
#dates li{
	position: relative;
}
#dates li:before{
	
  content: '';
  display: inline-block;
  width: 138px;
  height: 2px;
  position: absolute;
    bottom: -0.75rem;
    left: 60%;
  border-radius: 10px;
  background-color: #e6676c;
}
#dates li:last-of-type:before{
	
  content: none !important;
}
#issues {
  position: relative;
  width: 950px;
  width: 95rem;
  margin: 0 auto;
}

#issues li {
  width: 950px;
  padding: 40px 0px;
  list-style: none;
  float: left;
  opacity: 0;
}

#issues li.selected img {
  opacity: 1;
}
#issues li img {
  width: 400px;
  display: block;
  margin-top:50px;
  box-shadow:0 0 15px rgba(0,0,0,0.3);
    float:left
}

#issues li strong {
  margin: 20px 0px 20px 0px;
  font-size: 50px;
  line-height: 30px;
  color:#3d3d3d;
  font-weight:800;
  font-family: 'Barlow', sans-serif;
}

#issues li p {
  margin: 20px 0px 20px 0px;
  font-size: 18px;
  line-height: 30px;
  color:#000;
    float:right;
}
#grad_left,
#grad_right {
  width: 125px;
  width: 12.5rem;
  height: 160px;
  height: 11rem;
  position: absolute;
  top: 0;
  pointer-events: none;
}

#grad_left {
  left: 0;
  background: -moz-linear-gradient(left, #8b2331 0%, rgba(198, 33, 39, 0) 100%);
  background: -webkit-linear-gradient(left, #8b2331 0%, rgba(198, 33, 39, 0) 100%);
  background: linear-gradient(to right, #8b2331 0%, rgba(198, 33, 39, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b2331', endColorstr='#00c62127', GradientType=1);
}
#grad_right {
  right: 0;
  background: -moz-linear-gradient(left, rgba(198, 33, 39, 0) 0%, #8b2331 100%);
  background: -webkit-linear-gradient(left, rgba(198, 33, 39, 0) 0%, #8b2331 100%);
  background: linear-gradient(to right, rgba(198, 33, 39, 0) 0%, #8b2331 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b2331', endColorstr='#008b2331', GradientType=1);
}
#next,
#prev {
  position: absolute;
  top: 45%;
  width: 50px;
  width: 5rem;
  height: 50px;
  height: 5rem;
  color: #BCBEC0;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

#next:hover,
#prev:hover {
  color: #7a7e82;
}
#next {
  right: 0px;
  right: 0rem;
}
#prev {
  left: 0;
  left: 0;
}

#prev i{
	float: right;
}

/* STRUCTURE */
/*---------------------------------------------------
    LESS Elements 0.6
  ---------------------------------------------------
    A set of useful LESS mixins by Dmitry Fadeyev
    Special thanks for mixin suggestions to:
      Kris Van Herzeele,
      Benoit Adam,
      Portenart Emile-Victor,
      Ryan Faerman

    More info at: https://lesselements.com
-----------------------------------------------------*/
/**** convert px values to rem values, declare both simultaneously ******/
.row {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.no_pad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.well {
  width: 100%;
  padding: 20px 20px 20px 20px;
  padding: 2rem 2rem 2rem 2rem;
  background: #e6e7e8;
  margin: 20px 0px 20px 0px;
  margin: 2rem 0rem 2rem 0rem;
}
.pad_bottom {
  padding: 0px 0px 100px 0px;
  padding: 0rem 0rem 10rem 0rem;
}
.max_width,
.col_wrap {
  position: relative;
  margin: 0 auto;
}
.thepagecontent {
  display: block;
}
.col_wrap:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.col_wrap {
  display: inline-block;
}
/* Hide from IE Mac \*/
.col_wrap {
  display: block;
}
/* End hide from IE Mac */
.column_default {
  position: relative;
  float: left;
}
.col_left {
  padding-right: 25px;
  padding-right: 2.5rem;
  float: left;
  height: 100%;
}
@media only screen and (max-width: 1025px) {
  .col_left {
    padding-right: 12.5px;
    padding-right: 1.25rem;
  }
}
.col_left .col_left {
  padding-right: 10px;
  padding-right: 1.0rem;
  float: left;
}

.col_right {
  padding-left: 25px;
  padding-left: 2.5rem;
  float: right;
  height: 100%;
}

.col_right .col_left {
  padding-right: 10px;
  padding-right: 1.0rem;
  float: left;
}

.col_right .col_right {
  padding-left: 10px;
  padding-left: 1.0rem;
  float: right;
  height: 100%;
}

.col_mid {
  padding-left: 12.5px;
  padding-left: 1.25rem;
  padding-right: 12.5px;
  padding-right: 1.25rem;
  float: left;
  height: 100%;
}
.col_centered {
  margin: 0 auto;
}
.col_20 {
  position: relative;
  width: 20%;
  float: left;
}

.col_25 {
  position: relative;
  width: 25%;
  float: left;
}
.col_30 {
  position: relative;
  float: left;
  width: 30%;
}

.col_30 .col_30,
.col_30 .col_70 {
  width: 100%;
}
.col_30 .col_30 .col_left,
.col_30 .col_70 .col_left,
.col_30 .col_30 .col_right,
.col_30 .col_70 .col_right {
  float: none;
}
.col_40 {
  position: relative;
  float: left;
  width: 40%;
}

.col_50 {
  position: relative;
  float: left;
  width: 50%;
}

.col_60 {
  position: relative;
  float: left;
  width: 100%;
  margin-left:20%
}

.col_70 {
  position: relative;
  float: left;
  width: 70%;
}

.col_80 {
  position: relative;
  float: left;
  width: 80%;
}

.col_100 {
  position: relative;
  float: left;
  width: 100%;
}
.col_33 {
  position: relative;
  width: 33%;
  float: left;
}

.col_33:nth-of-type(3n + 1) {
  padding: 0px 15px 0px 0px;
  padding: 0rem 1.5rem 0rem 0rem;
}
.col_33:nth-of-type(3n + 2) {
  padding: 0px 7.5px 0px 7.5px;
  padding: 0rem 0.75rem 0rem 0.75rem;
}
.col_33:nth-of-type(3n + 3) {
  padding: 0px 0px 0px 15px;
  padding: 0rem 0rem 0rem 1.5rem;
}

@media only screen and (max-width: 1400px) {
.col_60 {
  margin-left:5%
}

    
}

@media only screen and (max-width: 1150px) {
#timeline{display:none} 
.mobile-timeline{display:block; 
  font-family: 'Barlow', sans-serif;}
.history{background:#8b2331;color:#fff;text-align:center;padding:30px 30px}
.history h2{font-size:28px}
.mobile-dates{padding:60px 30px}    
.mobile-dates h3{color:#8b2331;font-size:25px;line-height:10px;font-weight:800}    
.mobile-dates p{color:#A7A7A7;font-size:16px;font-weight:200}    
.underline{width:100%;height:5px;border-bottom:1px solid #D8D8D8;margin:30px 0}    
}