/*
Theme Name: Exxua RxConnect
Theme URI: https://exxuarxconnect.com
Author: www.workbox.com
Author URI: https://www.workbox.com
Description: WordPress theme for exxuarxconnect.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: exxua-rxconnect
*/

/*
****************************************************************
First Screen Styles
****************************************************************
*/

/*
****************************************************************
=== Break Points ===
--------------------
1920  - Large Desktop
1440  - Desktop/Laptop
768   - Tablet
375   - Mobile
****************************************************************
*/

/*--------------------------------------------------------------
=== FONTS ===
Nunito 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i
Quicksand 400, 500, 700
Arial 400
--------------------------------------------------------------*/
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Light.eot');
  src: local('Nunito Light'), local('Nunito-Light'),
  url('fonts/Nunito-Light.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-Light.woff2') format('woff2'),
  url('fonts/Nunito-Light.woff') format('woff'),
  url('fonts/Nunito-Light.svg#Nunito-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-LightItalic.eot');
  src: local('Nunito Light Italic'), local('Nunito-LightItalic'),
  url('fonts/Nunito-LightItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-LightItalic.woff2') format('woff2'),
  url('fonts/Nunito-LightItalic.woff') format('woff'),
  url('fonts/Nunito-LightItalic.svg#Nunito-LightItalic') format('svg');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Regular.eot');
  src: local('Nunito Regular'), local('Nunito-Regular'),
  url('fonts/Nunito-Regular.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-Regular.woff2') format('woff2'),
  url('fonts/Nunito-Regular.woff') format('woff'),
  url('fonts/Nunito-Regular.svg#Nunito-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Italic.eot');
  src: local('Nunito Italic'), local('Nunito-Italic'),
  url('fonts/Nunito-Italic.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-Italic.woff2') format('woff2'),
  url('fonts/Nunito-Italic.woff') format('woff'),
  url('fonts/Nunito-Italic.svg#Nunito-Italic') format('svg');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Medium.eot');
  src: local('Nunito Medium'), local('Nunito-Medium'),
  url('fonts/Nunito-Medium.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-Medium.woff2') format('woff2'),
  url('fonts/Nunito-Medium.woff') format('woff'),
  url('fonts/Nunito-Medium.svg#Nunito-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-MediumItalic.eot');
  src: local('Nunito Medium Italic'), local('Nunito-MediumItalic'),
  url('fonts/Nunito-MediumItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-MediumItalic.woff2') format('woff2'),
  url('fonts/Nunito-MediumItalic.woff') format('woff'),
  url('fonts/Nunito-MediumItalic.svg#Nunito-MediumItalic') format('svg');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-SemiBold.eot');
  src: local('Nunito SemiBold'), local('Nunito-SemiBold'),
  url('fonts/Nunito-SemiBold.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-SemiBold.woff2') format('woff2'),
  url('fonts/Nunito-SemiBold.woff') format('woff'),
  url('fonts/Nunito-SemiBold.svg#Nunito-SemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-SemiBoldItalic.eot');
  src: local('Nunito SemiBold Italic'), local('Nunito-SemiBoldItalic'),
  url('fonts/Nunito-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-SemiBoldItalic.woff2') format('woff2'),
  url('fonts/Nunito-SemiBoldItalic.woff') format('woff'),
  url('fonts/Nunito-SemiBoldItalic.svg#Nunito-SemiBoldItalic') format('svg');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-Bold.eot');
  src: local('Nunito Bold'), local('Nunito-Bold'),
  url('fonts/Nunito-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-Bold.woff2') format('woff2'),
  url('fonts/Nunito-Bold.woff') format('woff'),
  url('fonts/Nunito-Bold.svg#Nunito-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito-BoldItalic.eot');
  src: local('Nunito Bold Italic'), local('Nunito-BoldItalic'),
  url('fonts/Nunito-BoldItalic.eot?#iefix') format('embedded-opentype'),
  url('fonts/Nunito-BoldItalic.woff2') format('woff2'),
  url('fonts/Nunito-BoldItalic.woff') format('woff'),
  url('fonts/Nunito-BoldItalic.svg#Nunito-BoldItalic') format('svg');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Regular.eot');
  src: local('Quicksand Regular'), local('Quicksand-Regular'),
  url('fonts/Quicksand-Regular.eot?#iefix') format('embedded-opentype'),
  url('fonts/Quicksand-Regular.woff2') format('woff2'),
  url('fonts/Quicksand-Regular.woff') format('woff'),
  url('fonts/Quicksand-Regular.svg#Quicksand-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Medium.eot');
  src: local('Quicksand Medium'), local('Quicksand-Medium'),
  url('fonts/Quicksand-Medium.eot?#iefix') format('embedded-opentype'),
  url('fonts/Quicksand-Medium.woff2') format('woff2'),
  url('fonts/Quicksand-Medium.woff') format('woff'),
  url('fonts/Quicksand-Medium.svg#Quicksand-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-Bold.eot');
  src: local('Quicksand Bold'), local('Quicksand-Bold'),
  url('fonts/Quicksand-Bold.eot?#iefix') format('embedded-opentype'),
  url('fonts/Quicksand-Bold.woff2') format('woff2'),
  url('fonts/Quicksand-Bold.woff') format('woff'),
  url('fonts/Quicksand-Bold.svg#Quicksand-Bold') format('svg');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------------
=== GLOBAL VAR ===
--------------------------------------------------------------*/
:root {
  --font-family-base:  'Nunito', Arial, Helvetica, sans-serif;
  --font-family-accent: 'Quicksand';

  --white:          #fff;
  --black:          #000;
  --grey-light:     #eee;

  --blue:           #4E529B; /* = mood-anchor */

  --green:          #00A897;

  --red:            #FF04BC; /* = .marked */
  --red-darker:     #E81F76;
  --red-dark:       #D41367;

  --gap:              2.5rem;
  --brdrd:            6px;

  --mb-base:          2rem; /* = p, ul {margin-bottom} */
  --mv:               calc(var(--mb-base) * 3.75);
  --mv-box:           calc(var(--mb-base) * 10);
}
@media (min-width: 769px) {
  :root {
    --gap:              3rem;
  }
}


/*--------------------------------------------------------------
=== GLOBAL RESET ===
--------------------------------------------------------------*/
* { margin:0; padding:0; box-sizing:border-box;}
.clearfix { zoom:1;}
.clearfix:after { content:" "; display:table; clear:both;}
header, footer, section, nav, article, aside, details, figcaption, figure, hgroup, main, menu, summary { display:block;}
button { cursor:pointer;}
:focus { outline:none;}
button::-moz-focus-inner { border: 0;}

img, table { border: 0;}
img { display: block; max-width: 100%; height: auto;}

/* FIX for laptops with scale screen 125% preset  */
@media (-webkit-device-pixel-ratio: 1.25) {
  :root {
    zoom: 0.8; }
}


/*--------------------------------------------------------------
=== BASE LAYOUT ===
--------------------------------------------------------------*/
body { min-height: 100vh; display: flex; flex-direction: column; width: 100%;}
#page { flex-grow: 1;}
.container { margin-left:auto; margin-right:auto; width: 100%;}
p:not(:last-child) { margin-bottom: var(--mb-base);}

.row { display: flex; width: 100%; gap: var(--gap);}
.col { min-height: 1px;}
.nowrap { white-space: nowrap;}

.mv-top { margin-top: var(--mv);}
.mv-bot { margin-bottom: var(--mv);}
.mv-box-t { margin-top: var(--mv-box);}
.mv-box-b { margin-bottom: var(--mv-box);}

.mv-top-0 { margin-top: 0!important;}
.mv-bot-0 { margin-bottom: 0!important;}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 767.98px) {
  .section { padding: 5rem 0;}
  .container { padding-left: 16px; padding-right: 16px;}

  .row { flex-direction: column;}

  .xs-visible { display: block!important;}
  .xs-hidden { display: none!important;}
  .md-visible { display: none!important;}
}
@media (min-width: 768px) {
  .section { padding: 7rem 0;}
  .container { padding-left: 50px; padding-right: 50px; max-width: 1556px;}

  .mobileonly { display: none;}
  .xs-visible { display: none!important;}
  .md-visible { display: block!important;}
  .md-hidden { display: none!important;}
}


/*--------------------------------------------------------------
=== TYPOGRAPHY & COLORS ===
--------------------------------------------------------------*/
html { font-size: 10px; background: #fff;}
body, td, th, input, select, textarea, button { font: 300 2rem/1.58em var(--font-family-base); color: var(--black);}
a { color: var(--red-darker); text-decoration: underline; transition: .25s ease-in-out;}
a:hover { color: var(--red-darker);}
a span { opacity: 0; font-weight: 700;}
a:before { position: absolute; content: attr(data-title); text-decoration: underline;}
a:hover:before { font-weight: 700;}
@media speech {
  a:after { display: none;}
}

sup, sub { position: relative; font-size: .6em; vertical-align: baseline;}
sup { top:-.5em;}
sub { bottom:-.25em;}
strong, b, .text-bold { font-weight: 700;}

.text-light { font-weight: 300;}
.text-normal { font-weight: 400;}
.text-medium { font-weight: 500;}
.text-semiBold { font-weight: 600;}

.marked, text-red { color: var(--red);}

h1 { margin-bottom: 1.5rem; font: 500 2.8rem/1.375em var(--font-family-accent); color: var(--blue)}

@media (max-width:767.98px) {
}
@media (min-width:768px) {
  body, td, th, input, select, textarea, button { font-size: 2.4rem;}
  h1 { font-size: 4rem;}
}


/* --- INFO block */
.info { margin-top: 3.7rem; font-size: 11px; line-height: 1.375; font-weight: 400;letter-spacing: -0.015em;}
@media (max-width:767.98px) {
}
@media (min-width:768px) {
  .info { font-size: 14px;}
}


/* --- TOP SITE INFO plate */
.top-site-info { padding: 1rem 0; font-size: 12px; line-height: 1.3; letter-spacing: .05em; color: var(--white); background: var(--blue);}


/* --HERO section */
.hero { position: relative; text-align: center;}
.hero .container { z-index: 1; position: relative; max-width: 1076px;}
.hero img { margin: 0 auto;}
.hero .logo-line { margin: 3rem 0;}

.img-hero-left, .img-hero-right { z-index: 0; position: absolute; top: 0;}
.img-hero-left { left: 0;}
.img-hero-right { right: 0;}

@media (max-width:767.98px) {
  .hero .logo-line { max-width: 80vw; margin-left: auto; margin-right: auto;}
  .img-hero-left img, .img-hero-right img { height: auto!important;;}
  .img-hero-left img { width: 33vw;}
  .img-hero-right img { width: 10vw;}
}
@media (min-width:768px) {
  .hero-info { margin-left: -2rem; margin-right: -2rem;}
}


/* --- CTA BAND section */
.cta-band { color: var(--white); background: linear-gradient(90deg, #E81F76 0%, #4E529B 100%);}
.cta-band .row { margin: 0 auto; max-width: 997px;}
.step-col { display: flex; gap: 1.5rem;}
.step-ico { display: flex; align-items: center; justify-content: center; min-width: 6.4rem; width: 6.4rem; height: 6.4rem; font: 700 5.6rem/1em var(--font-family-accent); color: var(--red-dark); border-radius: 100%; background: var(--white);}
.step-text { font-size: 2rem; line-height: 1.4; letter-spacing: -0.015em; font-weight: 400;}

@media (max-width:767.98px) {
  .cta-band .row { gap: 5rem;}
}
@media (min-width:768px) {
  .step-col { flex: 0 0 50%; gap: 3rem; align-items: center;}
  .step-ico { min-width: 9.8rem; width: 9.8rem; height: 9.8rem; font-size: 9.6rem; line-height: 1;}
}
@media (max-width:960px) {
  .step-text br { display: none;}
}


/*--------------------------------------------------------------
=== ANIMATION ===
--------------------------------------------------------------*/
.animate-me {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-me.animate-in {
  opacity: 1;
  transform: translateY(0);
}