@import url(https://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  color: #fff!important;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1em;
  background-color: #afafaf;
}

#slides {
  position: absolute;
  top: 17%;
  left: 10%;
  right: 48%;
  bottom: 17%;
  overflow: hidden;
}
#slides ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#slides ul li {
  position: relative;
  width: 100%;
  height: 100%;
}
#slides ul li:nth-child(1) {
  background-color: #c00000;
}
#slides ul li:nth-child(2) {
  background-color: #9a0000;
}
#slides ul li:nth-child(3) {
  background-color: #7b0000;
}
#slides ul li:nth-child(4) {
  background-color: #ae3333;
}
#slides ul li:nth-child(5) {
  background-color: #ce8585;
}
#slides ul li:nth-child(6) {
  background-color: #9a0000;
}
#slides ul li:nth-child(7) {
  background-color: #8b2929;
}
#slides ul li:nth-child(8) {
  background-color: #c26666;
}
#slides ul li:nth-child(9) {
  background-color: #7b0000;
}
#slides ul li:nth-child(10) {
  background-color: #9a0000;
}

#slides ul li:nth-child(11) {
  background-color: #7b0000;
}
#slides ul li:nth-child(12) {
  background-color: #ae3333;
}










ul#steps {
  position: absolute;
  top: 50%;
  left: 20%;
  height: 110px;
  margin-top: -55px;
}
ul#steps li {
  position: relative;
  height: 100%;
  color: #fff;
  font-family: "Abril Fatface", serif;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
  -webkit-transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1),font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: color 666ms cubic-bezier(0.666, 0, 0.333, 1), font-size 666ms cubic-bezier(0.666, 0, 0.333, 1),font-size 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
ul#steps li.active {
  color: #fff;
  font-size: 96px;
}

#titles {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 60%;
  height: 330px;
  margin-top: -165px;
  padding: 110px 0;
}
#titles ul {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#titles li {
  position: relative;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: visibility 0ms linear 666ms, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: visibility 0ms linear 666ms, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li.active {
  visibility: visible;
  opacity: 1;
  -webkit-transition: visibility 0ms linear, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: visibility 0ms linear, opacity 666ms cubic-bezier(0.666, 0, 0.333, 1);
}
#titles li h2 {
  height: 110px;
  font-family: "Abril Fatface", serif;
  font-size: 96px;
  display: block;
}
#titles li p {
  height: 110px;
  color: #000;
}

.roller {
  -webkit-transform: translate3d(0, 0%, 0);
          transform: translate3d(0, 0%, 0);
  -webkit-transition: -webkit-transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: -webkit-transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1);
  transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1), -webkit-transform 666ms cubic-bezier(0.666, 0, 0.333, 1);

}

.btn-ar{
  background-color: #C00000;
  color: #fff;
}


.blanc{

  -webkit-text-stroke: 0.5px white;
}

.btn_link2{

 background-color: #fff;
       color: #C00000;




}
.btn_link2:hover{

  background-color: gray;
  color: black;


}

.btn_link3{

 background-color: #fff;
       color: #C00000;
       margin-top:-10%;





}
.btn_link3:hover{

  background-color: gray;
  color: black;


}