@import "root.css";
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

/* 1. SLIDER GRID POSIT - ITEMS */
.slidergrid__container, .slidergrid__fixed{margin-top: 10px; padding:20px 0 20px 0; }

.slidergrid__content-x2{
  display: grid;
   grid-template-columns: repeat(2, 1fr); /*numero columnas, 1fr mismo tamaño*/
   grid-auto-rows: minmax(350px, auto); /*altura grid item*/
   grid-column-gap: 10px;
   grid-row-gap: 10px;

}

.slidergrid__content-x4{
  display: grid;
   grid-template-columns: repeat(4, 1fr); /*numero columnas, 1fr mismo tamaño*/
   grid-auto-rows: minmax(210px, auto); /*altura grid item*/
   grid-column-gap: 10px;
   grid-row-gap: 10px;

}

.slidergrid__content-x3-6,.slidergrid__dot-content{
   display: grid;
    grid-template-columns: repeat(3, 1fr); /*numero columnas, 1fr mismo tamaño*/
    grid-auto-rows: minmax(210px, auto); /*altura grid item*/
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.slidergrid__dot-item img{width:85%; height:auto;}

.slidergrid__posit, .slidergrid__simple-posit{
  position: relative;
  padding:25px;
  margin: 10px;
  background-color: var(--acent-color);
  color:black;
}

.slidergrid__posit::before{content:"Notas"; position:absolute; color: #c68c0a; font-size:8px; font-family: 'Roboto', sans-serif; text-decoration:none; top:20px; left:20px;}
.slidergrid__posit::after{position:absolute; z-index:2; content: url(../img/corner-posit.svg); width:15px; bottom:20px; right:20px;}




/* 2. SLIDER img */





/* 3. SLIDER SCROLL */
.sliderscroll {
  display: flex;
  width: min(100% - 30px, 980px);
  min-height: 360px;
  padding: 0;
  overflow-x: auto; 
  overflow-y: hidden;
  /* scroll mozilla */
  scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, .2); 
  scrollbar-width:thin;
}

/* estilo scroll escritorio*/
@media screen and (width >= 600px) {
.sliderscroll::-webkit-scrollbar {-webkit-appearance: none;}
.sliderscroll::-webkit-scrollbar:vertical {width:10px;}
.sliderscroll::-webkit-scrollbar-button:increment,.contenedor::-webkit-scrollbar-button {display: none;} 
.sliderscroll::-webkit-scrollbar:horizontal {height: 10px;}
.sliderscroll::-webkit-scrollbar-thumb {background-color: #797979;border-radius: 20px;border: 2px solid #d2d2d2;}
.sliderscroll::-webkit-scrollbar-track {border-radius: 10px;}
}


.sliderscroll__content {
  min-width: 400px;
  margin: 0px -8px;
  transition: all 0.3s linear;
}

.sliderscroll__content-temp {
  min-width: 450px;
  margin: 6px;
  transition: all 0.3s linear;
  height:600px;
}



.journey-1-1{background-image: URL("../img/aligners/journey-1.svg"); background-size: cover;}
.journey-1-2{background-image: URL("../img/aligners/journey-2.svg"); background-size: cover;}
.journey-1-3{background-image: URL("../img/aligners/journey-3.svg"); background-size: cover;}
.journey-1-4{background-image: URL("../img/aligners/journey-4.svg"); background-size: cover;}
.journey-1-5{background-image: URL("../img/aligners/journey-5.svg"); background-size: cover;}
.journey-1-6{background-image: URL("../img/aligners/journey-6.svg"); background-size: cover;}
.journey-1-7{background-image: URL("../img/aligners/journey-7.svg"); background-size: cover;}
.journey-1-8{background-image: URL("../img/aligners/journey-8.svg"); background-size: cover;}

.temp-1-1{background-image: URL("../images/industrial/screen-1.jpg"); background-size: cover;}
.temp-1-2{background-image: URL("../images/industrial/screen-2.jpg"); background-size: cover;}
.temp-1-3{background-image: URL("../images/industrial/screen-3.jpg"); background-size: cover;}
.temp-1-4{background-image: URL("../images/industrial/screen-4.jpg"); background-size: cover;}
.temp-1-5{background-image: URL("../images/industrial/screen-5.jpg"); background-size: cover;}
.temp-1-6{background-image: URL("../images/industrial/screen-6.jpg"); background-size: cover;}
.temp-1-7{background-image: URL("../images/industrial/screen-7.jpg"); background-size: cover;}
.temp-1-8{background-image: URL("../images/industrial/screen-8.jpg"); background-size: cover;}



/* 4 ACCORDIONS */


.accord__section {margin-bottom: 30px;}

.accord__content-wrapper {
  font-size: 1.25em;
  line-height: 1em;
  max-height: 0px;
  overflow: hidden;
  transition: 0.25s ease-in-out;
}

.accord__title {
  border-top: #000 1px solid;
  cursor: pointer;
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  padding: 30px 0 0 0;
  position: relative;
  margin-bottom: 0;
  transition: all 0.25s ease-out;
}

.accord__title::after {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: " ";
  display: inline-block;
  float: right;
  height: 10px;
  left: 2px;
  position: relative;
  right: 20px;
  top: 2px;
  transform: rotate(135deg);
  transition: 0.35s ease-in-out;
  vertical-align: top;
  width: 10px;
}

/* OPTIONAL HOVER STATE */
.accord__title:hover { 
  color: #4E4B52  ;
}

.accord__trigger:checked
  + .accord__title
  + .accord__content-wrapper {
  max-height: 950px;
}

.accord__trigger:checked + .accord__title::after {
  transform: rotate(-45deg);
  transition: 0.25s ease-in-out;
}

input[type="checkbox"] {
  display: none;
}



/* 600 */
@media screen and (max-width: 600px) {

 /* 1. SLIDER GRID POSIT */ 
.slidergrid__container{
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}


.slidergrid__content-x2{width:300;  grid-template-columns: repeat(2, 1fr);}
.slidergrid__content-x3-6, .slidergrid__content-x4 {width:510%;  grid-template-columns: repeat(6, 1fr);}
.slidergrid__item, .slidergrid__posit, .slidergrid__simple-posit{scroll-snap-align: center; padding:35px; flex-grow: 0;} 
}


/* 490 */
@media screen and (max-width: 490px) {
  .slidergrid__dot-content{width:300;  grid-template-columns: repeat(3, 1fr);}
  .slidergrid__dot-item {scroll-snap-align: center; flex-grow: 0;} .slidergrid__dot-item img{width:225px;} 
}