:root {
  --text-color: #3e5062;
}

.header-resellers {
  background: -webkit-gradient(linear, left top, right top, from(#2D3E50), to(#054592));
  background: linear-gradient(90deg, #2D3E50 0%, #054592 100%);
}

.header-resellers .menu {
  width: 100%;
}

.header-resellers .header-content {
  min-height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
}

.header-resellers .header-content .title {
  color: white;
  padding: 0 1rem;
}

.header-resellers-form .form-control {
  appearance: none;
  background: rgba(255,255,255, .2);
  border: none;
  color: rgba(255,255,255, .8);
  font-size: .9rem;
  padding: 0 .9rem;
}

.header-resellers-form .form-control option { 
  color: var(--text-color); 
}

.down-icon::before {
	border-style: solid;
	border-width: 0.15rem 0.15rem 0 0;
	content: '';
	display: inline-block;
	height: 0.55rem;
	left: 0.15rem;
	position: relative;
	top: 0rem;
	transform: rotate(135deg);
	vertical-align: top;
	width: 0.55rem;
}

.header-resellers-form .down-icon {
  position: absolute;
  top: 20px;
  right: 2rem;
}

.header-resellers-form .down-icon:before {
  color: #fff;
}

@media (max-width: 576px) {
  .header-resellers .header-content .title {
    font-size: 2rem;
  }

  .header-resellers-form .form-control {
    margin-bottom: .5rem;
  }
}

.body-header .title-content {
  color: var(--text-color);
  font-weight: 400;
}

.body-header .title-content span {
  font-weight: 600;
}

.body-filter {
  grid-gap: 8px;
}

.body-filter input[type="radio"] {
  display:none;
}

.body-filter label {
  color: var(--text-color);
  cursor: pointer;
  margin: 0;
}

.body-filter input[type="radio"]:checked + label {
  color: #0275D8;
}

.reseller {
  animation: fadeIn .6s ease forwards;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

.gold-partner {
  background-color: #FFCC4D;
  border-radius: 4px;
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  padding: .1rem .4rem; 
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
}

.gold-partner p {
  margin: 0;
}

.card {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transition: box-shadow .3s ease;
  min-height: 480px;
}

.card:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.08);
}

.card-content {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.card .card-content .card-title {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: bold;
}

.card .card-content .card-text {
  color: #767676;
  font-size: .95rem;
  display: flex;
  align-items: baseline;
  padding: .1rem 0;
  text-decoration: none;
}

.card .card-content a.card-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.card .card-content .card-text img {
  opacity: .3;
  margin-right: 4px;
}

.card .card-content .card-text img.mail {
  margin-right: 4px;
}

.card .card-content .card-text img.tel {
  margin-right: 8px;
  transform: translateY(3px);
}

.card .card-content .card-text img.site {
  transform: translateY(-1px);
}

.card .card-content .card-text img.location {
  transform: translate(2px, 3px);
  margin-right: 12px;
} 

.card .card-content a.card-text:hover {
  text-decoration: underline;
}

.card .card-tags {
  background: transparent;
  border: none;
  display: flex;
  padding: 1.25rem;
  grid-gap: 8px;
}

.card .card-tags span:not(:empty) {
  background-color: #DFF0FF;
  border-radius: 4px;
  color: #0275D8;
  font-size: .8rem;
  padding: .1rem .4rem; 
  font-weight: 500;
}

.card .card-tags:empty {
  display: none;
}

.card .img-container {
  padding-top: 2.25rem;
  text-align: center;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .img-container .logo-img {
  max-width: 200px;
  max-height: 100px;
  height: auto;
}

.noresults {
  text-align: center;
  flex: 1;
  font-size: 1rem;
  color: var(--text-color);
}
