/** ----------------------------------------------------------------------------
 *                         Todos los derechos Reservados
 *                               Softipal S.A.S 2020
 *  ----------------------------------------------------------------------------
 *  Nombre:       home.css
 *  Ruta:         /public/css/home/
 *  Descripción:  Estilos Generales para la página de home
 *  Fecha:        22/01/2020
 *  Autor:        Alejadnro González Flórez
 *  Versión:      1.0
 *  OD:           22489479
 *  ----------------------------------------------------------------------------
 *	 			Histórico de cambios
 *  ----------------------------------------------------------------------------
 *	Fecha          OD        Autor        Descripción
 *  ----------------------------------------------------------------------------
 *     21/01/2020   22489479   AlejoFlorez0   Creación de cabecera de documentacion
 *  ----------------------------------------------------------------------------
 */

.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel .carousel-inner {
  height: 100%;
}

.carousel .carousel-inner img {
  display: block;
  object-fit: cover;
}

.scbImageCarousel {
  height: 35vw;
}

.carousel-indicators li {
  opacity: 0.5;
  width: 12px;
  height: 12px;
  flex: 0 1 auto;
  cursor: pointer;
  margin-left: 3px;
  margin-right: 3px;
  -ms-flex: 0 1 auto;
  text-indent: -999px;
  border-radius: 100%;
  background-color: #fff;
  box-sizing: content-box;
  transition: opacity 0.6s ease;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #ffba00;
}

#scb_infoCarousel {
  height: auto;
  padding-bottom: 5%;
  background-size: 100% 32%;
  background-position-y: 100%;
  background-repeat: no-repeat;
  background-image: url(../../images/containers/contenedor3.png);
}

#ic_headerInfo {
  position: relative;
  color: #004187;
  padding-bottom: 2%;
}

#ic_headerInfo > span {
  font-size: 24px;
  font-family: Montserrat-Light;
}

#ic_headerInfo > h2 {
  font-size: 38px;
  font-family: Montserrat-Bold;
}

#ic_headerInfo > h2 > strong {
  color: #ffba00;
}

#scb_carousel3D {
  position: relative;
  height: 587px;
}

.slider-container {
  position: relative;
  perspective: 400px;
  transform-style: preserve-3d;
}

#sc_containerRadio {
  position: relative;
}

.carousel-3d-item {
  position: absolute;
  left: 30%;
  right: 30%;
  width: 500px;
  outline: 1px solid transparent;
}

.rb_controller {
  position: relative;
  left: 47%;
  right: 47%;
  top: 413px;
  margin: 0px 5px;
  cursor: pointer;
}

.rb_controller:after {
  position: relative;
  width: 15px;
  top: -4px;
  height: 15px;
  content: "";
  border-radius: 100%;
  visibility: visible;
  display: inline-block;
  background-color: #d1d3d1;
}

.rb_controller:checked:after {
  position: relative;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 100%;
  visibility: visible;
  display: inline-block;
  background-color: #ffba00;
}

.slide-img > img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  border: 4px solid #ffffff;
  box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
}

#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3) {
  transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
  transform: translateX(-250px) translateZ(-130px) translateY(10px);
  opacity: 0.9;
  transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
  transform: translateX(0) translateZ(0) translateY(-25px);
  opacity: 1;
  transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
#carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
#carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
  transform: translateX(300px) translateZ(-130px) translateY(10px);
  opacity: 0.9;
  transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
}

.slide-content {
  color: #000000;
  padding-top: 3%;
  background-color: white;
}

.slide-content > h2 {
  font-size: 23px;
  font-family: Montserrat-Bold;
}

.slide-content > p {
  font-size: 14px;
  padding: 0px 10px;
  font-family: Montserrat-Regular;
}

#carouselNext,
#carouselPrev {
  width: 9%;
  padding-bottom: 22vh;
}

.prevCar,
.nextCar {
  width: 40px;
  height: 40px;
}

/* @media screen and (max-width: 330px) {
  .p-0 {
    width: auto;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
  }

  .w-100 {
    width: 356% !important;
  }

  .carousel {
    height: 248px;
  }

  #scb_infoCarousel {
    padding: 0;
    height: 475px;
  }

  #ic_headerInfo > span {
    font-size: 12px;
  }

  #ic_headerInfo > h2 {
    font-size: 20px;
  }

  #scb_carousel3D {
    position: relative;
    left: unset;
    top: unset;
    padding: 0;
    height: 88%;
    display: flex;
    width: max-content;
    padding-bottom: 194px;
  }

  .carousel-3d-item {
    top: unset;
    left: 0;
    width: 278px;
    outline: unset;
    float: left;
    position: relative;
    margin-right: 21px;
  }

  .slide-img > img {
    width: unset;
    width: 292px;
    height: 200px;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-left: unset;
  }

  .slide-content {
    width: unset;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .slide-content > h2 {
    font-size: 13px;
  }

  #ic_headerInfo {
    top: 0;
    left: 0;
    width: unset;
    height: unset;
  }
} */

@media screen and (min-width: 300px) and (max-width: 380px) {
  .p-0 {
    width: auto;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
  }

  #scb_infoCarousel {
    height: 475px;
    padding: 0;
  }

  #ic_headerInfo > span {
    font-size: 12px;
  }

  #ic_headerInfo > h2 {
    font-size: 10vw;
  }

  #scb_carousel3D {
    position: relative;
    top: unset;
    left: unset;
    height: 88%;
    padding: 0;
    display: flex;
    width: max-content;
    padding-bottom: 194px;
  }

  .carousel-3d-item {
    top: unset;
    left: 0;
    width: 321px;
    outline: unset;
    float: left;
    position: relative;
    margin-right: 21px;
  }

  .slide-img > img {
    width: unset;
    width: 335px;
    height: 200px;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-left: unset;
  }

  .slide-content {
    width: unset;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .slide-content > h2 {
    font-size: 15px;
  }

  #ic_headerInfo {
    top: 0;
    left: 0;
    width: unset;
    height: unset;
  }
}

@media screen and (min-width: 381px) and (max-width: 430px) {
  .p-0 {
    width: auto;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
  }

  #scb_infoCarousel {
    height: 475px;
    padding: 0;
  }

  #ic_headerInfo > span {
    font-size: 12px;
  }

  #ic_headerInfo > h2 {
    font-size: 10vw;
  }

  #scb_carousel3D {
    position: relative;
    top: unset;
    left: unset;
    height: 88%;
    padding: 0;
    display: flex;
    width: max-content;
    padding-bottom: 194px;
  }

  .carousel-3d-item {
    top: unset;
    left: 0;
    width: 365px;
    outline: unset;
    float: left;
    position: relative;
    margin-right: 21px;
  }

  .slide-img > img {
    width: unset;
    width: 380px;
    height: 200px;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-left: unset;
  }

  .slide-content {
    width: unset;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .slide-content > h2 {
    font-size: 15px;
  }

  #ic_headerInfo {
    top: 0;
    left: 0;
    width: unset;
    height: unset;
  }
}

@media screen and (min-width: 431px) and (max-width: 549px) {
  .p-0 {
    width: auto;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
  }

  #scb_infoCarousel {
    height: 475px;
    padding: 0;
  }

  #ic_headerInfo > span {
    font-size: 12px;
  }

  #ic_headerInfo > h2 {
    font-size: 10vw;
  }

  #scb_carousel3D {
    position: relative;
    top: unset;
    left: unset;
    height: 88%;
    padding: 0;
    display: flex;
    width: max-content;
    padding-bottom: 194px;
  }

  .carousel-3d-item {
    top: unset;
    left: 0;
    width: 325px;
    outline: unset;
    float: left;
    position: relative;
    margin-right: 21px;
  }

  .slide-img > img {
    width: unset;
    width: 340px;
    height: 200px;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-left: unset;
  }

  .slide-content {
    width: unset;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .slide-content > h2 {
    font-size: 15px;
  }

  #ic_headerInfo {
    top: 0;
    left: 0;
    width: unset;
    height: unset;
  }
}

@media screen and (max-width: 700px) {
  .slider-container {
    position: unset;
    perspective: unset;
    transform-style: unset;
    display: flex;
  }

  .rb_controller {
    display: none;
  }

  .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
    transform: unset;
    opacity: unset;
    transition: unset;
  }

  #carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-2 ~ .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-1 ~ .carousel-3d-item:nth-of-type(3) {
    transition: unset;
  }

  .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
    transform: unset;
    opacity: unset;
    transition: unset;
  }

  .slide-content > p {
    display: none;
  }

  .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
    transform: unset;
    opacity: unset;
    transition: unset;
  }
}

@media screen and (min-width: 701px) and (max-width: 850px) {
  #scb_infoCarousel {
    height: 770px;
    padding-bottom: 0;
  }

  .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(1) {
    transform: translateX(-250px) translateZ(-130px) translateY(10px);
    opacity: 0.9;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
  }

  .slide-img > img {
    width: 312px;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 10px 10px 11px -4px rgba(0, 0, 0, 0.75);
  }

  .slide-content {
    width: 62%;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(2),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(3) {
    transform: translateX(0) translateZ(0) translateY(-10px);
    opacity: 1;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
  }

  .carousel-3d-item {
    position: absolute;
    left: unset;
    right: 0%;
    width: 500px;
    outline: 1px solid transparent;
  }

  .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-1:checked ~ .carousel-3d-item:nth-of-type(3),
  #carousel-3d-controller-2:checked ~ .carousel-3d-item:nth-of-type(1),
  #carousel-3d-controller-3:checked ~ .carousel-3d-item:nth-of-type(2) {
    transform: translateX(250px) translateZ(-130px) translateY(10px);
    opacity: 0.9;
    transition: all 1s cubic-bezier(0.48, 0.16, 0.15, 0.98);
  }
}

@media screen and (min-width: 550px) and (max-width: 700px) {
  .p-0 {
    width: auto;
  }

  .carousel-indicators {
    margin-bottom: 0;
  }

  .carousel-indicators li {
    width: 8px;
    height: 8px;
  }

  .carousel {
    height: 248px;
  }

  #scb_infoCarousel {
    height: 475px;
    padding: 0;
  }

  #ic_headerInfo > span {
    font-size: 12px;
  }

  #ic_headerInfo > h2 {
    font-size: 10vw;
  }

  #scb_carousel3D {
    position: relative;
    top: unset;
    left: unset;
    height: 88%;
    padding: 0;
    display: flex;
    width: max-content;
    padding-bottom: 194px;
  }

  .carousel-3d-item {
    top: unset;
    left: 0;
    width: 325px;
    outline: unset;
    float: left;
    position: relative;
    margin-right: 21px;
  }

  .slide-img > img {
    width: unset;
    width: 340px;
    height: 200px;
    border-radius: unset;
    border: unset;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -webkit-box-shadow: unset;
    margin-left: unset;
  }

  .slide-content {
    width: unset;
    color: #000000;
    padding-top: 3%;
    background-color: white;
  }

  .slide-content > h2 {
    font-size: 15px;
  }

  #ic_headerInfo {
    top: 0;
    left: 0;
    width: unset;
    height: unset;
  }
}

@media (max-width: 981px) {
  .scbImageCarousel {
    height: 100%;
  }
}