/**************************************/
/************** CUSTOM ****************/
/**************************************/

html, body {
	height: 100%;
	font-family: 'Toyota';
	font-size: 0.925rem!important
}

@font-face {
	font-family: 'Toyota';
	src: url('fonts/toyotatextregular-webfont.ttf');
}
@font-face {
	font-family: 'ToyotaBold';
	src: url('fonts/toyotatextbold-webfont.ttf');
}
.text-toyotabold {
	font-family: 'ToyotaBold';
    color: #ffffff
}
.text-black {
	color: #000000;
}
.text-white {
	color: #ffffff;
}
.text-rojo {
	color: #ea0010;
}
.text-rojo a {
	color: #ea0010;
}
.text-rojo a:hover {
	color: #000000 !important;
}
.text-gris {
	color: #6e6e6e;
}
.blackShadow {
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}
.activeNav {
	color: #ffffff;
	background-color: #ea0010;
}
.bg-gris-claro {
	background-color: #d4d4d4;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff
}
.bg-rojo {
	background-color: #ea0010;
}
.bg-celeste {
  background-color: #54beec;
}
.bg-verde {
  background-color: #77d2d0;
}
.bg-amarillo {
  background-color: #fdd520;
}
a:hover {
	text-decoration: none;
}
.carousel {
	margin-left: -15px;
	margin-right: -15px;
}
.carousel-caption {
	right: 5%;
	top: 0%;
}
.carousel-caption h1 {
	font-size: 64px;
	letter-spacing: -1px
}
.carousel-indicators {
	right: 5%;
	left: unset;
	top: 25%;
	margin-right: 0px;
	margin-left: 0px;
}
.carousel-indicators li {
	width: 15px;
	height: 15px;
	border-radius: 50px;
}
.img-fluid {
	width: 100%
}
.negativeMargin {
	margin-top: -60px;
}
.btn-100 {
	width: 100%;
	border-radius: 0;
}
.card-body {
	background-color: #ffffff;
	padding: 0.75rem
}
/* NAVEGACION */

.nav-off-canvas {
	width: 250px;
	height: 100%;
	z-index: 999;
	box-shadow: 0px 0px 20px #a7a7a7;
	font-size: 14px;
	line-height: 16px;
}
.nav-off-canvas a:hover, .opciones-tab li:hover {
	color: #ffffff;
	background-color: #ea0010;
	transition: 0.5s;
}
.logo-off-canvas:hover {
  background-color: transparent !important;
}
.opciones-tab li:hover a {
	color: #ffffff !important;
}
.social a:hover {
	background-color: transparent;
}
.derechos {
	font-size: 11px;
	line-height: 14px;
}
.navbar-brand img {
	width: 120px;
}
.navbar {
	border-bottom: 1px solid #b7b7b7;
}
.navbar li a:hover {
	color: #ea0010 !important;
	transition: 0.5s;
}
#off-opcion-1, #off-opcion-2, #off-opcion-3, #off-opcion-4, #off-opcion-5 {
	width: 250px;
	height: 100%;
	z-index: 99;
	transition: 0.1s;
	font-size: 14px;
	line-height: 16px;
}
#off-opcion-1 a:hover, #off-opcion-2 a:hover, #off-opcion-3 a:hover, #off-opcion-4 a:hover, #off-opcion-5 a:hover {
	background-color: #ce0916;
	transition: 0.3s;
}
.mostrar {
	margin-left: 250px;
}

.accordion .btn-link {
  white-space: normal;
}

.banner-tss-3 {
  background-image: url(img/bannertss1.jpg);
}

.banner-tss-4 {
  background-image: url(img/bannertss2.jpg);
}

.banner-tss-5 {
  background-image: url(img/bannertss3.jpg);
}

.banner-tss-6 {
  background-image: url(img/bannertss4.jpg);
}
.banner-tss-7 {
  background-image: url(img/bannertss6.jpg);
}
.banner-tss-3, .banner-tss-4, .banner-tss-5, .banner-tss-6, .banner-tss-7 {
  padding-bottom: 400px;
  background-size: cover;
  background-position: center;
}

.boton-redondo {
  border-radius: 50px;
}

@media (min-width: 768px) {
  main {
      width: calc(100% - 250px) !important;
      margin-left: 250px !important;
  }
  html, body {
	scroll-behavior: smooth;
	overflow-x: hidden;
  }
}

@media (max-width: 767px) {
  .carousel-caption h1 {
    font-size: 40px;
  }
}

/*Timeline*/

.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #ED8D8D;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.how-it-works.row .col-2 {
  align-self: stretch;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #ED8D8D;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}
.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #ED8D8D;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #ED8D8D;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

#imageContainer {
    background-color: #fff;
    overflow: hidden;
}  
#imageContainer img {
  animation: kenburns 30s infinite;
}
.hideme
{
    opacity:0;
}
@keyframes kenburns {
    0% {
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    95% {
        transform: scale3d(1.5, 1.5, 1.5) translate3d(-190px, -120px, 0px);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale3d(2, 2, 2) translate3d(-170px, -100px, 0px);
        opacity: 0;
    }
}