/* Responsive classes */
/* This theme follows a mobile first approach, all styles on style.css contains properties for mobile viewports. Add the following style on tablets and higher viewports here */


/* Mobile Large */
@media only screen and (min-width:576px) {
  .footer .footer-socials ul {
    margin-top: initial;
    justify-content: flex-end;
  }
  .resources-panel .resources-topics {
    grid-template-rows: 1fr 1fr;
  justify-items: initial;
  }
  .carousel-inner {
    background: #fff;
  }
  .product-primary-buttons  button:first-child {
    margin-right: 0;
  }
}

/* Tablet */
@media only screen and (min-width:768px) {
  .navbar-nav {
    margin-left: 20px;
  }
  .product-image-list h3 {
    margin-top: 10px;
    font-size: 1.1rem;
  }
  .product-image-list ul{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
  }
  .carousel-inner {
    background: linear-gradient(90deg, rgba(221,225,229,1) 0%, rgba(255,255,255,1) 2%);
  }

  .glass-packages {
    grid-template-columns: 1fr 1fr;
  }

  .product-primary-buttons {
    display: flex;
    flex-direction: row;
  }
  .product-primary-buttons  button:first-child {
    margin-right: 10px;
  }
}

@media only screen and (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    justify-content: center;
  }
  .navbar-icons {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 0;
  }
  .carousel-inner {
    background: linear-gradient(90deg, rgba(221,225,229,1) 0%, rgba(255,255,255,1) 5%);
  }
  .resources-panel .resources-topics {
    grid-template-columns: 1fr 1fr;
    justify-items: initial;
  }
}

/* Desktop */
@media only screen and (min-width:1024px) {
  .carousel-wrapper .carousel-text {
    top: 100px;
  }
  .product-image-list ul{
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
  }
  .footer .footer-company {
    border-right: 1px solid rgba(0,0,0,0.8);
  }
  .footer .footer-links ul {
    grid-template-columns: 200px 200px 200px;
  }
  .carousel-inner {
    background: linear-gradient(90deg, rgba(221,225,229,1) 5%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 35%);
  }
  .glass-packages {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}


/* Widescreen */
@media only screen and (min-width:1400px) {
  .carousel-inner .image-wrapper {
    display: flex;
  }
  .carousel-inner {
    background: linear-gradient(90deg, rgba(221,225,229,1) 25%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 45%);
  }
  
}