/*
 Description:    Custom Styles for seniorhealthmarketing.com
 Author:         Chris Ruby
 Version:        1.0.0
*/


/* ------ Color Variables ------- */
:root { 
  --colorBlack: 68,68,68;
  --colorPrimary: 44,95,171;
  --colorSecondary: 12,102,168;
  --colorTertiary: 48,221,125;
  --alpha: .3;
  --primaryFont: 'Nunito', sans-serif;
}

.bg-primary   { background-color: rgb(var(--colorPrimary))!important; }
.bg-secondary { background-color: rgb(var(--colorSecondary))!important; }
.bg-tertiary  { background-color: rgb(var(--colorTertiary))!important; }
.bg-black     { background-color: rgb(var(--colorBlack))!important; }
.bg-gray      { background-color: #F1F1F1; }
.bg-darkgray  { background-color: #EEEEEE; }

.text-primary   { color: rgb(var(--colorPrimary))!important; }
.text-secondary { color: rgb(var(--colorSecondary))!important; }
.text-tertiary  { color: rgb(var(--colorTertiary))!important; }
.text-black     { color: rgb(var(--colorBlack))!important; }
.text-muted     { color: #777!important; }

.btn-primary    { background-color: rgb(var(--colorPrimary))!important; border-color: rgb(var(--colorPrimary))!important; }
.btn-secondary  { background-color: rgb(var(--colorSecondary))!important; border-color: rgb(var(--colorPrimary))!important; }

/* ------ Basic Styling ------- */
* 				      { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body  	  { background: #FFF; margin: 0; padding: 0; position: relative; }
body       		  { background: #FFF; color: rgb(var(--colorBlack)); font-family: var(--primaryFont); font-weight: 400; font-size: 16px; line-height: 1.5; min-height: 100vh; }                

.hide-text      { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.caps,
.uppercase      { text-transform: uppercase; }
.sentence-case  { text-transform: capitalize; }
.lowercase      { text-transform: lowercase; }

a    				    { color: rgb(var(--colorPrimary)); text-decoration: none !important; }
a:hover,
a:active 		    { color: rgb(var(--colorSecondary)); text-decoration: none !important; }

textarea:focus,
input:focus     { outline: none; }

h1, h2, h3,
h4, h5, h6      { font-style: normal; font-weight: 600; line-height: 1.2; text-align: center; }
h1              { font-size: 1.6rem; }
h2              { font-size: 1.5rem; }
h2.branded      { color: rgb(var(--colorPrimary)); font-weight: 400; }
h3              { font-size: 1.3rem; }
h4              { font-size: 1.1rem; }
h5              { font-size: 1.125rem; }
h6              { font-size: 1rem; }
p               { font-size: 1.125rem; margin-bottom: 1.250rem; }
p.small         { font-size: 0.9em; line-height: 1.5; }
.em1            { font-size: 1rem; }

ol li, ul li    { font-size: 1.125rem; margin-bottom: 0.250rem; }

.normal         { font-weight: 400; }
.bold,
b, strong       { font-weight: 600; }
.bolder         { font-weight: 900; }
.sup            { vertical-align: top; }

.close          { color: #000; font-size: 2.5rem; font-weight: 500; }
.close:active,
.close:focus    { outline: none; }

.shadow-none    { box-shadow: none!important; }
.shadow         { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
.shadow-sm      { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow-lg      { box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; }
.shadow-xl      { box-shadow: 0 0 30px rgba(0, 0, 0, .18)!important; }

.border-lg      { border: 2px solid rgb(var(--colorPrimary)); }
.rounded        { border-radius: 10px!important; }

.container-thin { max-width: 900px; }

.opacity9 { opacity: .9; }
.opacity8 { opacity: .8; }
.opacity7 { opacity: .7; }
.opacity6 { opacity: .6; }
.opacity5 { opacity: .5; }
.opacity4 { opacity: .4; }
.opacity3 { opacity: .3; }
.opacity2 { opacity: .2; }
.opacity1 { opacity: .1; }

.read-more-btn { color: #323a45; display: inline-block; font-weight: 400; text-transform: uppercase; }
.btn { border: 2px solid; border-radius: 0 !important; }
.btn-outline-light:hover { color: rgb(var(--colorPrimary)); background-color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.8); }

.form-control { border-radius: 0 !important; border: 2px solid #999; padding: 1.4rem 0.6rem; }

/* ------- Heading Styling ------ */
#header { transition: all .5s ease; }
#header.scrolled { background-color: #FFF; height: 87px; }
#header .logo { max-height: 65px; transition: all .5s ease; }
#header.scrolled .logo { max-height: 50px; }
#header.scrolled .logo-color { z-index: 1; }
#header .btn { padding: .938rem 3.125rem; font-size: 1.563rem; margin-top: 1rem; transition: all .5s ease; }
#header.scrolled .btn { color: rgb(var(--colorPrimary)); padding: .5rem 1rem; font-size: 1.25rem; margin-top: 0; max-height: 50px; border-color: rgba(var(--colorPrimary), 1);}

/* ------- Hero Styling ------- */
#hero { background-image: url('../img/hero-bg1.jpg'); background-size: cover; background-position: center top; background-repeat: no-repeat; }
#hero > div { background-image: url('../img/hero-fg1.webp'); background-size: cover; background-position: center top; background-repeat: no-repeat; }
#hero > div > div { background-image: url('../img/grid.png'); background-repeat: repeat; background-color: rgba(0,0,0,0.1); background-blend-mode: multiply; }
#hero h1 { font-size: 4rem; font-weight: 300; }
#hero p.lead { font-size: 1rem; font-weight: 300; }

#world-wide { background-image: url('../img/parallax-office-bg1.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; }
#world-wide > div { background-image: url('../img/grid.png'); background-repeat: repeat; background-color: rgba(0,0,0,0.3); background-blend-mode: multiply; }

/* ------- Modal Styling ------- */
.modal-full { min-width: 100%; margin: 0; }
.modal-full .modal-content { background-color: rgba(255,255,255,.75); min-height: 100vh; }
.modal-close-button { background: rgb(var(--colorBlack)); border-radius: 50px; color: #FFF; cursor: pointer; font-size: 20px; height: 40px; position: absolute; right: -15px; top: -15px; width: 40px; z-index: 999; }
.modal-close-button > .fas { height: 40px; line-height: 40px; width: 41px; }

/* ------ Custom Animations ------- */
.checkmark             { animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; border-radius: 50%; box-shadow: inset 0px 0px 0px #FFF; display: inline-block; height: 56px; stroke: #FFF; stroke-miterlimit: 10; stroke-width: 4; width: 56px; }
.checkmark-sm          { animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; border-radius: 50%; box-shadow: inset 0px 0px 0px #FFF; display: inline-block; height: 20px; stroke: #FFF; stroke-miterlimit: 10; stroke-width: 4; width: 20px; }
.checkmark__circle     { animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 4; stroke-miterlimit: 10; stroke: #7AC142; }
.checkmark__circle-sm  { animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 4; stroke-miterlimit: 10; stroke: #7AC142; }
.checkmark__check      { animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; stroke-dasharray: 48; stroke-dashoffset: 48; transform-origin: 50% 50%; }
.checkmark__check-sm   { animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; stroke-dasharray: 48; stroke-dashoffset: 48; transform-origin: 50% 50%; }
.wiggle                { animation: wiggle 5s infinite; }
.fadeIn                { -webkit-animation-name: fadeIn; animation-name: fadeIn; }

@keyframes stroke {
  100% { stroke-dashoffset: 0; }
}
@keyframes scale {
  0%, 100% { transform: none; }
  50% { transform: scale3d(1.1, 1.1, 1); }
}
@keyframes fill {
  100% { box-shadow: inset 0px 0px 0px 30px #7ac142; }
}
@keyframes wiggle {
    0% { transform: rotate(0deg); }
   75% { transform: rotate(0deg); }
   80% { transform: rotate(5deg); }
   85% { transform: rotate(-5deg); }
   90% { transform: rotate(5deg); }
   95% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

/* ------- Footer Styling ------- */
#footer { font-size: .95rem; line-height: 1.15; }

/* ------ Small devices ------- */
@media (min-width: 576px) {}

/* ------ Medium devices ------- */
@media (min-width: 768px) { 
  h1, h2, h3,
  h4, h5, h6      { font-size: 2.31rem; font-style: normal; line-height: 1.2; text-align: center; }
  h1              { font-size: 2.7rem; font-weight: 500; }
  h2              { font-size: 2rem; }
  h3              { font-size: 1.6rem; }
  h4              { font-size: 1.375rem; }
  h5              { font-size: 1.125rem; }
  h6              { font-size: 1rem; }
  #hero p.lead { font-size: 1.625rem; font-weight: 300; }

  #header { transition: all .5s ease; }
  #header .logo { max-height: 100px; transition: all .5s ease; }
  #header.scrolled .logo { max-height: 50px; }
}

/* ------ Large devices ------- */
@media (min-width: 992px) { }

/* ------ Extra large ------- */
@media (min-width: 1200px) { }