/*
Custom Css
*/

.card {
  padding: 20px;
}

.img-fluid {
  max-width: auto;
  height: auto;
}

.btn-purple {
  background-color: purple;
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 15px;
}
@font-face {
  font-family: 'sego';
  src: url('../webfonts/SEGO.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat-Regular';
  src: url('../webfonts/Montserrat-Regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'Montserrat-Bold';
  src: url('../webfonts/Montserrat-Bold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('../webfonts/Montserrat-SemiBold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'Montserrat-Medium';
  src: url('../webfonts/Montserrat-Medium.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

p {
  font-family: 'Montserrat-Regular' !important;
}

.montserrat_regular {
  font-family: 'Montserrat-Regular' !important;
}
.sego{
  font-family: 'sego' !important;
}

.montserrat_bold {
  font-family: 'Montserrat-Bold' !important;
}

.montserrat_semibold {
  font-family: 'Montserrat-SemiBold' !important;
}

.montserrat_medium {
  font-family: 'Montserrat-Medium' !important;
}

.divided-info-left {
  display: flex;
  align-items: center;
  justify-content: end;
}

.divided-info-right {
  display: flex;
  align-items: center;
  justify-content: start;
}

.divided-info-text {
  width: 63%;
}

.divided-info-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name a {
    background: #333399;
    font-size: 0.7em !important;
    border-radius: 4px;
    color: #ffffff;
    display: inline-block;
    font-weight: 700;
    padding: 6.5px 15px;
    text-transform: uppercase;
    text-decoration: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.navbar-nav .nav-link {
  text-align: center;
}


.nav-item a {
    font-size: 15px;
}

main#carousel {
    grid-row: 1 / 2;
    grid-column: 1 / 8;
    width: 100vw;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    --items: 5;
    --middle: 3;
    --position: 1;
    pointer-events: none;
  }
  
  div.item {
    position: absolute;
    width: 300px;
    height: 400px;
    background-color: coral;
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r)))
      translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
  }
  
  div.item:nth-of-type(1) {
    --offset: 1;
    background-color: #90f1ef;
  }
  div.item:nth-of-type(2) {
    --offset: 2;
    background-color: #ff70a6;
  }
  div.item:nth-of-type(3) {
    --offset: 3;
    background-color: #ff9770;
  }
  div.item:nth-of-type(4) {
    --offset: 4;
    background-color: #ffd670;
  }
  div.item:nth-of-type(5) {
    --offset: 5;
    background-color: #e9ff70;
  }
  
  input:nth-of-type(1) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }
  input:nth-of-type(1):checked ~ main#carousel {
    --position: 1;
  }
  
  input:nth-of-type(2) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
  }
  input:nth-of-type(2):checked ~ main#carousel {
    --position: 2;
  }
  
  input:nth-of-type(3) {
    grid-column: 4 /5;
    grid-row: 2 / 3;
  }
  input:nth-of-type(3):checked ~ main#carousel {
    --position: 3;
  }
  
  input:nth-of-type(4) {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
  }
  input:nth-of-type(4):checked ~ main#carousel {
    --position: 4;
  }
  
  input:nth-of-type(5) {
    grid-column: 6 / 7;
    grid-row: 2 / 3;
  }
  input:nth-of-type(5):checked ~ main#carousel {
    --position: 5;
  }
  .carousel2 {
    height: 600px;
    margin: 0;
    display: grid;
    grid-template-rows: 500px 100px;
    grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
    align-items: center;
    justify-items: center;
  }  

  
  .pic-ctn {
    width: 100vw;
    height: 200px;
  }
  
  @keyframes display {
    0% {
      transform: translateX(200px);
      opacity: 0;
    }
    10% {
      transform: translateX(0);
      opacity: 1;
    }
    20% {
      transform: translateX(0);
      opacity: 1;
    }
    30% {
      transform: translateX(-200px);
      opacity: 0;
    }
    100% {
      transform: translateX(-200px);
      opacity: 0;
    }
  }
  
  .pic-ctn {
    position: relative;
    width: 100vw;
    height: 300px;
    margin-top: 15vh;
  }
  
  .pic-ctn > img {
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
    opacity: 0;
    animation: display 10s infinite;
  }
  
  img:nth-child(2) {
    animation-delay: 2s;
  }
  img:nth-child(3) {
    animation-delay: 4s;
  }
  img:nth-child(4) {
    animation-delay: 6s;
  }
  img:nth-child(5) {
    animation-delay: 8s;
  }


  .carousel4 {
    margin: 0;
    background: lightgray;
    text-align: center;
    font-family: sans-serif;
    color: #fefefe;
  }
  .container_carousel4 {
    position: relative;
    width: 320px;
    margin: 100px auto 0 auto;
    perspective: 1000px;
  }
  
  .carousel_otr_4 {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; 
    animation: rotate360 60s infinite forwards linear;
  }
  .carousel__face { 
    position: absolute;
    width: 300px;
    height: 187px;
    top: 20px;
    left: 10px;
    right: 10px;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.5);
    display: flex;
  }
  
  span {
    margin: auto;
    font-size: 2rem;
  }
  
  .circle_left {
    width: 50px;
    background-color: yellow;
    border-radius: 50%;
    position: relative;
    left: -2px;
  }

  .circle_right {
    width: 50px;
    background-color: yellow;
    border-radius: 50%;
    position: relative;
    right: -2px;
  }

  
  .carousel__face:nth-child(1) {
    background-image: url("https://images.pexels.com/photos/1141853/pexels-photo-1141853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    transform: rotateY(  0deg) translateZ(430px); }
  .carousel__face:nth-child(2) { 
    background-image: url("https://images.pexels.com/photos/1258865/pexels-photo-1258865.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
      transform: rotateY( 40deg) translateZ(430px); }
  .carousel__face:nth-child(3) {
    background-image: url("https://images.pexels.com/photos/808466/pexels-photo-808466.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    transform: rotateY( 80deg) translateZ(430px); }
  .carousel__face:nth-child(4) {
    background-image: url("https://images.pexels.com/photos/1394841/pexels-photo-1394841.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    transform: rotateY(120deg) translateZ(430px); }
  .carousel__face:nth-child(5) { 
    background-image: url("https://images.pexels.com/photos/969679/pexels-photo-969679.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
   transform: rotateY(160deg) translateZ(430px); }
  .carousel__face:nth-child(6) { 
    background-image: url("https://images.pexels.com/photos/1834400/pexels-photo-1834400.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
   transform: rotateY(200deg) translateZ(430px); }
  .carousel__face:nth-child(7) { 
    background-image: url("https://images.pexels.com/photos/1415268/pexels-photo-1415268.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
   transform: rotateY(240deg) translateZ(430px); }
  .carousel__face:nth-child(8) {
    background-image: url("https://images.pexels.com/photos/135018/pexels-photo-135018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    transform: rotateY(280deg) translateZ(430px); }
  .carousel__face:nth-child(9) {
    background-image: url("https://images.pexels.com/photos/1175135/pexels-photo-1175135.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    transform: rotateY(320deg) translateZ(430px); }
  
  
  
  @keyframes rotate360 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
  }