@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

.font-300{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
}
.font-400{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 400;
}
.font-500{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
}
.font-600{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
}
.font-700{
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 700;
}

h1 {
	font-size: 3rem;
    line-height: 1;
    font-weight: 700;
 }
 h2 {
	font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
 }
 h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
 }


.shadow-3 {
    box-shadow: 0px 0px 20px rgb(0 0 0 / 30%);
}
.bg-orange {
    background-color: #ff5236;
}
.bg-lightblue {
    background-color: #f0f3f8;
}
.bg-footblue {
    background-color: #e4ebf3;
}
.bg-darkblue {
    background-color: #2440ff;
}
.text-limit-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
            line-clamp: 3; 
    -webkit-box-orient: vertical;
 }
 
 .w-500 {
     width: 500px;
 }

 .pt-100 {
     padding-top: 100%;
 }
 .pt-169 {
    padding-top: 56%;
}


 .uvp-list ul {
    display: inline-block;
    padding: 0 1.8rem;
    list-style: none;
    margin-bottom: 2rem;
  }
  
  .uvp-list ul > li {
    clear: left;
  }
   
  .uvp-list ul > li:before {
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    display: block;
    float: left;
    margin-left: -2rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
  }
  
  .uvp-list ul > li:before { 
    background: url("/img/ico/checkmark.svg");
    background-size: cover;
    background-position: center;
    padding: .15rem;
  }

  .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
  }

  .video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .no-gray:hover {
      transition-duration: 300ms;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
  }

  .gray {
    transition-duration: 300ms;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%); 
  }