.related-wrapper { width: 100%; float: left; padding: 100px 0 60px 0; background-color: #F5F5F5; }
.related-wrapper.border-top { border-top: 1px solid #D6D9DD; }
.related-wrapper.border-bottom { border-bottom: 1px solid #D6D9DD; }
.related-section-title { margin-bottom: 30px; }

.related-wrapper .page-center { overflow: visible !important; }
.related-wrapper .slick-list { overflow: visible;}
.related-wrapper .slick-track { margin: 0; }

.related.slider .related-card {  margin-left: 10px; margin-right: 10px; height: 100%; position: relative; transition: all 0.3s ease-in-out;  }

.related-wrapper .main-sect { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 50px; margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); }
.related-wrapper .main-sect .select-div { width: calc(25% - 40px); margin: 20px; }
.related-wrapper .main-sect .select-div select { 
  padding: 15px 40px 15px 20px; 
  background-color: #FFF; 
  -webkit-appearance: none;
  position: relative; 
  -webkit-appearance: none;
  -moz-appearance: none;
    background: url(https://f.hubspotusercontent30.net/hubfs/484933/Icons/dropdown-arrow.png) #FFF;
    background-repeat: no-repeat;
    background-position: right 20px center;
}


.related { margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); float: left; display: flex; flex-wrap: wrap; }
.related .related-card { margin-bottom: 40px; background-color: #FFF; border-radius: 3px; padding: 30px; }
.related .related-card:hover { box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.04); }
.related .related-card.three { width: calc(100% / 3 - 40px); margin-left: 20px; margin-right: 20px; float: left; }
.related .related-card.four { width: calc(100% / 4 - 40px); margin-left: 20px; margin-right: 20px; float: left; }

.related .related-image { margin-bottom: 15px; }
.related .related-image.image { height: 240px; width: calc(100% + 60px); margin: -30px -30px 24px -30px; }
.related .related-image.image img { height: 100%; width: 100%; object-fit: cover; }

.related .related-text, .related .related-text p { color: #21414B; }
.related .related-text a { color: #1770b0; }
.related .related-text a.readmore { color: #1770b0; margin-top: 20px; float: left; }
.related .related-text a:after { width: 0; background: #1770b0; transition: 400ms cubic-bezier(0.190,1.000,0.220,1.000); }
.related .related-text a:hover:after { width: 100%; transition: 400ms cubic-bezier(0.190,1.000,0.220,1.000); }

.related.slider .slick-arrow { -webkit-appearance: none !important; border: none; background: rgba(20,24,30,0.5); color: #FAFAFA; border-radius: 100%; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; height: 40px; width: 40px; line-height: 39px; font-size: 16px; cursor: pointer;  }
.related.slider .slick-arrow:hover { background: rgba(20,24,30,1); }
.related.slider .slick-disabled { display: none !important; }
.related.slider .slick-prev { padding-right: 12px; left: -70px; }
.related.slider .slick-next { padding-left: 12px; right: -70px; }

@media (max-width: 1725px) {
  .related.slider .slick-prev { left: -50px; }
  .related.slider .slick-next { right: -50px; }
}

@media (max-width: 1400px) {
  .related.slider .slick-prev { left: -40px; }
  .related.slider .slick-next { right: -40px; }
}

@media (max-width: 1069px) {
  .related.slider .slick-prev { left: -30px; }
  .related.slider .slick-next { right: -30px; }
}

@media (max-width: 767px) {
  .slider-wrapper .slick-button-area { width: 120px; }
  .slider-wrapper { padding: 50px 0px; }
}

@media (max-width: 649px) {
  .related.slider .slick-prev { left: -25px; }
  .related.slider .slick-next { right: -25px; }
}
  

@media (max-width: 1200px) {
  .related .related-card.four  { width: calc(100% / 2 - 40px); margin-left: 20px; margin-right: 20px; float: left; }
}

@media (max-width: 960px) {
  .related .related-card.three, .related .related-card.four  { width: calc(100% / 2 - 40px); margin-left: 20px; margin-right: 20px; float: left; }
}

@media (max-width: 899px) {
  .related-wrapper .main-sect .select-div { width: calc(50% - 40px); }
}

@media (max-width: 767px) {
  .related-wrapper { padding: 50px 0 10px 0; }
}

@media (max-width: 620px) {
  .related .related-card.three, .related .related-card.four  { width: 100%; margin-left: 0px; margin-right: 0px; float: left; }
  .related { margin-left: 0px; margin-right: 0px; width: 100%;
}
  
@media (max-width: 499px) {
  .related-wrapper .main-sect { margin-left: 0px; margin-right: 0px; width: 100%; }
  .related-wrapper .main-sect .select-div { width: 100%; margin: 20px 0; }
}