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

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

.module-client-center {
	font-size: 16px;
	line-height: 28px;
}
.module-client-center .client-center-intro-section h1 .head-2 {
  color: var(--medium);
}
.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(--gray-dark);
}
.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 {
  font-family: var(--font-1);
  text-transform: uppercase;
  color: var(--gray-dark);  
}
.module-edelivery .client-center-intro-cta .login .button, 
.module-digital-advice .client-center-intro-cta .ftr-cta-wrapper .button {
  background: transparent;
  color: var(--gray-dark);
  border: 2px solid var(--gray-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(--gray-dark);
  color: var(--white);
  border: 2px solid var(--gray-dark);
} 

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

.module-client-center .client-center-slider-section.client-center-slider2, 
.module-client-center .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 {
  font-family: var(--font-2) !important;  
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 2px solid var(--white);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;   
}
.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: 2px solid transparent;
  text-decoration: none;
}
.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(--gray-dark);
}
.module-client-center .client-center-tutorial-content a p, 
.module-edelivery .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(--gray-dark);
  border: 2px solid var(--gray-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  font-family: var(--font-2) !important;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
.module-client-center .client-center-tutorial-section .callouts-container .callout-item:hover .callout-cta {
  background: var(--gray-dark);
  color: var(--white);
}

/*
==============================================
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(--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) !important;  
}
.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(--gray-dark);
  border: 2px solid var(--gray-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  font-family: var(--font-2) !important;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
.module-client-center .client-center-cta-section .client-center-cta-content .callouts-container .callout-item:hover .callout-cta {
  background: var(--gray-dark);
  color: var(--white);
}

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

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

/*
==============================================
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 {
  color: var(--white);
  border: 2px solid var(--white);
  padding: 5px 20px;
  height: auto;
  width: auto;  
}
.module-digital-advice .client-center-contact-section .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--gray-dark);
  background: var(--white);
  border: 2px solid var(--white);
}

/*
==============================================
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 {
  background: 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(--gray-dark);
  border: 2px solid var(--gray-dark);
}

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

.module-edelivery .client-center-intro-cta a:hover > .login .button {
  background: var(--gray-dark);
  color: var(--white);
  border: 2px solid var(--gray-dark);
}
.module-edelivery .client-center-slider-section h3  {
  color: var(--white);
}
.module-edelivery .client-center-contact-content h3 {
  color: var(--gray-dark);
}
.module-edelivery .client-center-video-content .client-center-video-intro .button {
  color: var(--gray-dark);
  border: 2px solid var(--gray-dark);
  text-align: center;
}
.module-edelivery .button:hover {
  letter-spacing: 0px;
}
.module-edelivery .client-center-contact-content .button {
  color: var(--gray-dark);
  border: 2px solid var(--gray-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  width: auto;  
}
.module-edelivery .client-center-contact-content .ftr-cta:hover > .button {
  color: var(--white);
  border: 2px solid transparent;
  background: var(--gray-dark);
}

/*
==============================================
RELATED RESOURCES SECTION
==============================================
*/
.module-client-center .client-center-related-resources-section .related-resources-content .mc-heading {
  font-family:  var(--font-1);
  color:  var(--black);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px !important;
  text-transform: uppercase;
  letter-spacing: 0;
}
.module-client-center .client-center-related-resources-section .related-resources-content .mc-copy {
  font-family: var(--font-1);
  color: var(--gray-dark);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.module-client-center .client-center-related-resources-section .related-resources-content .mc-cta {
  font-family: var(--font-2);
  color: var(--medium);
  font-size: 17px !important;
  line-height: 19px !important;
  font-weight: 300;
  background: none;
  left: 5px;
  border: none !important;
  text-transform: uppercase;
}

/* 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) {
  .module-edelivery .content-slider-cta-wrapper {
    text-align: center;
}
}

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

}