@import url('../../modules-structure/client-center/structure.css');

/*
==============================================
INTRO SECTION
==============================================
*/

.module-edelivery .client-center-intro-cta .login, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper {
  background: var(--gray-light);
}
.module-edelivery .client-center-intro-cta .login h3 {
  text-transform: uppercase;
  letter-spacing: 0;
  font-family: var(--font-1);
  color: var(--gray-dark);
}
.module-edelivery .client-center-intro-cta .login .button, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper .button {
  background: var(--light);
  color: var(--black);
  font-family: var(--font-3);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-edelivery .client-center-intro-cta a:hover > .login .button, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper a:hover > .button {
  background: var(--black) !important;
  color: var(--white);
  border: 1px solid transparent;
}

/*
==============================================
SLIDER SECTION 1
==============================================
*/

.module-client-center .client-center-slider-section,
.module-edelivery .client-center-slider-section {
  background: var(--dark);
}
.module-client-center .content-slider-wrapper .content-slider-heading, 
.module-edelivery .content-slider-wrapper .content-slider-heading {
  color: var(--white);
}
.module-client-center .client-center-slider-section .content-slider-wrapper .content-slider-copy, 
.module-client-center .client-center-slider-section .wrap-content-slider-content h3, 
.module-client-center .client-center-slider-section .content-slider-cta, .client-center-slider-section .content-slider-cta:before,
.module-edelivery .client-center-slider-section .content-slider-wrapper .content-slider-copy, 
.module-edelivery .client-center-slider-section .wrap-content-slider-content h3, 
.module-edelivery .client-center-slider-section .content-slider-cta, .client-center-slider-section .content-slider-cta:before {
  color: var(--white);
}
.module-client-center .client-center-slider-section .content-slider-wrapper .content-slider-cta,
.module-edelivery .client-center-slider-section .content-slider-wrapper .content-slider-cta {
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--white);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-client-center .client-center-slider-section .content-slider-wrapper .slick-slide:hover .content-slider-cta,
.module-edelivery .client-center-slider-section .content-slider-wrapper .slick-slide:hover .content-slider-cta {
  color: var(--gray-dark);
  background: var(--white);
  border: 1px solid transparent;
}
.module-client-center .client-center-slider-section .content-slider-wrapper .content-slider-copy,
.module-edelivery .client-center-slider-section .content-slider-wrapper .content-slider-copy {
  line-height: 28px;
}
.module-client-center .client-center-slider-section .content-slider-wrapper .slick-prev:before, 
.module-client-center .client-center-slider-section .content-slider-wrapper .slick-next:before,
.module-edelivery .client-center-slider-section .content-slider-wrapper .slick-prev:before, 
.module-edelivery .client-center-slider-section .content-slider-wrapper .slick-next:before {
  color: var(--white);
  opacity: .75;
}

/*
==============================================
TUTORIAL SECTION
==============================================
*/

.module-client-center .client-center-tutorial-section {
  background: var(--gray-light);
  border-top: 30px solid var(--white);
}
.module-client-center .client-center-tutorial-section .client-center-tutorial-content h3 {
  font-size: 28px;
  font-family: var(--font-1);
  line-height: 31px;
  color: var(--gray-dark);
}
.module-client-center .client-center-tutorial-content a p, .client-center-video-intro a p {
  color: var(--gray-dark);
}
.module-client-center .client-center-tutorial-section .callouts-container .callout-item .callout-cta-wrapper button, 
.module-client-center .client-center-tutorial-section .callouts-mobile-slider .callout-item .callout-cta-wrapper button {
  color: var(--black);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  background: var(--light);
}
.module-client-center .client-center-tutorial-section .callouts-container .callout-item:hover .callout-cta {
  background: var(--black);
  color: var(--white);
}

/*
==============================================
MOBILE APP SECTION
==============================================
*/

.module-client-center .client-center-mobile-app-section .client-center-mobile-app-content h3 {
  font-size: 28px;
  font-family: var(--font-1);
  line-height: 31px;
  color: var(--gray-dark);
}
.module-client-center .client-center-mobile-app-content a img {
  border: 1px solid transparent;
}
.module-client-center .client-center-mobile-app-content a:hover img {
  border: 1px solid var(--gray-dark);
}

/*
==============================================
SLIDER SECTION 2
==============================================
*/

.module-client-center .client-center-slider2,
.module-edelivery .client-center-slider2 {
  background: var(--dark);
}
.module-client-center .client-center-slider2 .content-slider-wrapper .wrap-content-slider-content,
.module-edelivery .client-center-slider2 .content-slider-wrapper .wrap-content-slider-content {
  background: none;
  border-left: 1px solid var(--white);
}

/*
==============================================
CTA SECTION
==============================================
*/

.module-client-center .client-center-cta-section {
  border-bottom: 10px solid var(--gray-light);
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item .callout-heading-wrapper .callout-heading, 
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-mobile-slider .callout-item .callout-heading-wrapper .callout-heading {
  font-size: 28px;
  line-height: 31px;
  color: var(--gray-dark);
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item .callout-copy-wrapper, 
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-mobile-slider .callout-item .callout-copy-wrapper {
  color: var(--gray-dark);  
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item .callout-cta-wrapper button, 
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-mobile-slider .callout-item .callout-cta-wrapper button {
  color: var(--black);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  background: var(--light);
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item:hover .callout-cta {
  background: var(--black);
  color: var(--white);
}

/*
==============================================
DIGITAL ADVICE SECTION
==============================================
*/

.module-digital-advice .client-center-digital-advice-wrap {
  border-top: 1px solid var(--gray-dark);
}
.module-digital-advice .client-center-digital-advice-section .client-center-digital-advice-title h3 {
  font-family: var(--font-1);
  color: var(--gray-dark);
}
.module-digital-advice .client-center-digital-advice-section .da-line {
  background: var(--gray-light);
}
.module-digital-advice .digital-advice-icon-svg {
  fill: var(--gray-dark);
}

/*
==============================================
CONTACT SECTION
==============================================
*/

.module-client-center .module-contact-section, 
.module-edelivery .client-center-contact-content {
  background: var(--gray-light);
}
.module-client-center .client-center-contact-section .client-center-contact-content h3, 
.module-edelivery .client-center-contact-section .client-center-contact-content h3 {
  font-size: 28px;
  line-height: 31px;
  font-family: var(--font-1);
  color: var(--gray-dark);
}
.module-client-center .client-center-contact-section .client-center-contact-content .button, 
.module-edelivery .client-center-contact-section .client-center-contact-content .button {
  background: var(--light) !important;
  color: var(--black);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-client-center .client-center-contact-section .client-center-contact-content .ftr-cta:hover > .button,
.module-edelivery .client-center-contact-section .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--white);
  background: var(--black) !important;
  border: 1px solid var(--black);
}

/*
==============================================
DIGITAL ADVICE CONTACT SECTION
==============================================
*/

.module-digital-advice .client-center-contact-content {
  background: var(--dark);
}
.module-digital-advice .client-center-contact-section .client-center-contact-content h3 {
  color: var(--white);
}
.module-digital-advice .client-center-contact-section .client-center-contact-content .button {
  background: var(--light) !important;
  color: var(--black);
  font-family: var(--font-3);
  border: 1px solid transparent;
  letter-spacing: 0;
}
.module-digital-advice .client-center-contact-section .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--white);
  background: var(--white);
  border: 1px solid transparent;
  letter-spacing: 0;
}

/*
==============================================
EDELIVERY VIDEO SECTION
==============================================
*/

.module-edelivery .client-center-video-header-content h4 {
  font-family: var(--font-1);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--gray-dark);
  text-transform: uppercase;
  border-bottom: 1px solid var(--gray-dark);
}
.module-edelivery .client-center-video-content .client-center-video-intro .button {
  color: var(--black);
  background: var(--light);
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-edelivery .client-center-video-content .client-center-video-intro .button:hover {
  color: var(--white);
  background: var(--black) !important;
  border: 1px solid var(--black);
}

/*
==============================================
EDELIVERY CONTACT SECTION
==============================================
*/

.module-edelivery .client-center-contact-content .button {
  color: var(--gray-dark);
  border: 1px solid var(--gray-dark);
}
.module-edelivery .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--white);
  background: var(--black) !important;
  border: 1px solid transparent;
}
.module-edelivery .client-center-contact-content .button {
  color: var(--black);
  border: 1px solid var(--black);
  background: var(--light) !important;
  border: 1px solid transparent;
}

/*
==============================================
RELATED RESOURCES SECTION
==============================================
*/

.module-client-center .related-resources-content .mc-container a:hover .mc-cta {
  background: var(--light) !important;
  color: var(--black);
}

/* Large devices (tablet landscape, 1024px and less) tablet-l */
@media only screen and (max-width: 1024px) {

}

/* Medium devices (tablet portrait, 768px and less) tablet-p */
@media only screen and (max-width: 768px) {
  .module-client-center .client-center-intro-content .head-1, 
  .module-client-center .client-center-intro-section h1 .head-2, 
  .module-edelivery .client-center-intro-section h1 .head-1 {
    font-size: 28px !important;
    line-height: 30px;
}
}

/* Extra small devices (most portrait phones, 480px and less) mobile-p */
@media only screen and (max-width: 480px) {
 
}

/* Extra small landscape devices (most landscape phones, >=480px and <= 767 and landscape) mobile-l */
@media only screen and (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {

}