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

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

.module-client-center .client-center-intro-section h1 .head-2,
.module-client-center .client-center-intro-section h1, 
.module-edelivery .client-center-intro-section h1, 
.module-edelivery .client-center-intro-section h1 .head-1 {
  color: var(--dark);
}
.module-client-center .client-center-intro-section .head-1 {
  display: block;
}
.copy-section .client-center-intro-section h1:before {
  display: none;
}
.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, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper h3 {
  letter-spacing: 0;
  font-family: 'Source Sans Pro', sans-serif;
  text-transform: uppercase;
}
.module-edelivery .client-center-intro-cta .login .button, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper .button {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--dark);
  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(--dark);
  color: var(--white);
  border: 1px solid transparent;
}

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

.module-client-center .client-center-slider-section.client-center-slider2, 
.module-client-center .client-center-slider-section {
  background: var(--dark);
}
.masterprime .module-client-center .content-slider-wrapper .content-slider-heading, 
.client-center-slider-section .content-slider-wrapper .content-slider-copy, 
.client-center-slider-section .wrap-content-slider-content h3, 
.client-center-slider-section .content-slider-cta, 
.client-center-slider-section .content-slider-cta:before {
  color: var(--white);
  font-family: var(--font-1);  
} 
.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(--dark);     
  background: var(--white);   
  transition: all 1s ease !important;
  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;
  line-height: 31px;
  color: var(--dark);
  font-family: var(--font-1);  
}
.module-client-center .client-center-tutorial-content a p, .client-center-video-intro a p {
  color: var(--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(--dark);
  border: 1px solid var(--dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-client-center .client-center-tutorial-section .callouts-container .callout-item:hover .callout-cta {
  background: var(--dark);
  color: var(--white);
  border: 1px solid transparent;
}

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

.module-client-center .client-center-mobile-app-section .client-center-mobile-app-content h3 {
  font-size: 28px;
  line-height: 31px;
  color: var(--dark);
  font-family: 'Source Sans Pro', sans-serif;  
}
.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(--dark);
  font-family: 'Source Sans Pro', sans-serif;  
}
.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(--dark);
  border: 1px solid var(--dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item:hover .callout-cta {
  background: var(--dark);
  color: var(--white);
  border: 1px solid transparent;
}

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

.module-digital-advice .client-center-digital-advice-wrap {
  border-top: 1px solid var(--dark);
}
.module-digital-advice .client-center-digital-advice-section .client-center-digital-advice-title h3 {
  font-family: 'Source Sans Pro', sans-serif;
  color: var(--dark);
  text-transform: uppercase;
}
.module-digital-advice .client-center-digital-advice-section .da-line {
  background: var(--gray-light);
}
.module-digital-advice .digital-advice-icon-svg {
  fill: var(--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(--dark);
}
.module-client-center .client-center-contact-section .client-center-contact-content .button, 
.module-edelivery .client-center-contact-section .client-center-contact-content .button {
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--dark);
  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(--dark);
  border: 1px solid transparent;
}

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

.module-digital-advice .client-center-contact-section .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 {
  color: var(--white);
  border: 1px solid var(--white);
}
.module-digital-advice .client-center-contact-section .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--dark);
  background: var(--white);
  border: 1px solid var(--white);
}

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

.module-edelivery .client-center-video-header-content h4 {
  font-family: var(--font-1);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--dark);
}
.module-edelivery .client-center-video-content .client-center-video-intro .button {
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--dark);
  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(--dark);
  border: 1px solid var(--dark);
}
.module-edelivery .client-center-intro-section h1 {
  max-width: none;
}
.module-edelivery .client-center-intro-section h1, .client-center-intro-section h1 .head-2 {
  display: block;
}

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

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

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

.module-client-center .client-center-related-resources-section .related-resources-content .mc-cta {
  border: 1px solid var(--medium);
  color: var(--medium);
}
.module-client-center .client-center-related-resources-section .related-resources-content a:hover .mc-cta {
  border: 1px solid var(--dark);
  background: var(--dark);
  color: var(--white);  
  padding: 6px 30px;  
}

/* 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) {

}

/* 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) {

}