@charset "UTF-8";
/* CSS Document */

body {
  font-family: "arial", "helvetica",  "sans-serif"; 
}

p {font-size: 1.1em !important}


h1, h2, h3, h4, h5, h6 {   /*
    font-family: "times-roman", "times", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif" !important;*/
    text-align: center !important; margin-bottom: 1em; 
}

h1 {font-size: 2.0em !important; color: #111; font-weight: 600; font-family: inherit}
h2 {font-size: 1.8em !important; color: #111; font-weight: 600; font-family: inherit}
h3 {font-size: 1.3em !important; color: #111; font-weight: 600; font-family: inherit}
h4 {}
h5 {font-size: 1.2em !important; color: #111; font-weight: inherit; font-family: inherit}
h6 {}


.lightBlue {color: lightblue} 
.darkBlue {color: darkblue} 
.darkred {color: darkred} 
.teal {color: teal} 
.darkGray {color: darkslategray}


.timesRoman {font-family: "times-roman", "times", Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"   
}
.blue {color: midnightblue}

jumbotron {background-image: 
     url("images/homeHeroImg.jpg") !important;}
    .heroBtn > a:link {text-decoration: none} /* RESOLVE */
    .homeHero {background-image: url("../images/homeHeroImg2.jpg") !important;
        background-color: #fff; 
        height: auto; width: 100%;
        background-position: 0px -190px; 
        background-repeat: no-repeat; 
        background-size: cover;     
    }
nav ul li {font-style: italic; color: black !important; font-size: 1.15em !important}

a:link {color: darkblue !important}
a:visited {color: darkblue !important}
.collapsed a:visited {color:darkblue !important}
a:active {color: darkblue !important}
a:hover {color: darkblue !important; text-decoration: underline;}
.aException {color: white !important;}/*<-- buttons*/

.heroSubhead {
    color: #0071a1; 
}

.card-header h5 {text-align: left !important;  
}

.card-header {border: 1px solid #bbb !important;}

.firstCard {border: 1px solid #999 !important; border-radius: 20px 20px 0px 0px !important;
}

figcaption {font-size: 1.1em !important; font-style:italic}

.container {width: 75% !important}
    @media screen and (max-width: 769px) {.container {width: 95% !important}}

p {width: 100%; margin: 0 auto 0;  text-align: left; margin-bottom: 1.5em; color: #555; line-height: 2em; font-weight: auto}

.card p {line-height: 1.4em}
.card h5 {line-height: 1.6em}

.grayBoxContent {padding: 3% !important; background-color: #eee; border-radius: 12px; border: none}

.blockquote {
    margin-left: 5%; border-left: 6px solid #bbb; padding-left: 22px; font-size: .91em !important ; line-height: 1.5em  
}


/*mobiles*/
@media screen and (max-width: 1023px) {
    .hide-mobile {visibility:hidden !important; display:none !important}
}
@media screen and (min-width: 1023px) {
    .hide-desktop {visibility:hidden !important; display:none !important}
}

@media screen and (max-width: 414px) {
    body section {margin-right: -8px !important; border: 0px solid red;}
   
    .mobileFullScreen {width: 100% !important; min-width: 335px}
    .mobileFullScreenFigure {
        padding-left: 0px !important; padding-right: 0px !important; border: 0px solid blue; margin-right: 0px; width: 100% !important; padding: 0px !important;
    }
    .homeHero h1 {margin-bottom: 1.5em}
    
    h2.heroSubhead   {margin-bottom: 2.5em !important; margin-top: -.9em !important; border: 0px solid red !important}
    .mobileSideFigure {width: 100% !important}
    .mobileSideImg { padding: 6px !important;  }
    figcaption {font-size: .72em; margin-left: -10px; padding-right: 5px}
    p {font-size: 1em !important}
    h1 {/*font-size: 1.56em !important;*/ text-align:center; font-weight: 900; }
    h2 {font-size: 1.3em !important; text-align:center; font-weight: 900; color: midnightblue; }
    h3 {font-size: 1.2em !important; text-align:center; font-weight: 900}
    h4 {font-size: 1.2em !important; text-align:center; font-weight: 900}
    h1.heroHeading  {font-size: 1.3em !important; margin-top: -5px  !important; font-weight: bold}
    .card {width: 110% !important; border: 0px solid blue; margin-left: -20px  !important}
    .card p {line-height: 1.7em !important}
    p {font-size: .96em !important; line-height: 1.7em}
     /*p {font-size: 10% !important}*/
    .divAnimRight {min-width: 150px}
    .divAnimLeft {min-width: 150px}
    .dropdown-toggle {}
    .agLetterImg {width: 130% !important;  border: 0px solid blue; margin-left: -17% !important}
     .mobileFullScreenFigure {max-width: 100% !important; border: 0px solid blue !important}
    
    .rightMobilePadding {margin-left: -10px;padding-right:10px !important; border-right: 1px solid #bbb !important}
    
    .leftMobilePadding {padding-left:11px !important;}
    .blockquote {width: inherit !important;font-size: .99em !important}
    .mobileFullScreenFigure .sociopath {padding-right: 0px !important; }
    /**/
}
/*end max-width 414px mobiles*/


@media screen and (min-width: 300px) and (max-width: 375px) {
    .Xnavbar-brand img {
        width: 200px !important; ; 
        margin-top: -8px !important; margin-left: -13px}
    .Xnavbar-toggler {margin-top: -15px; margin-right: -15px}
    .Xnavbar-expand-lg {height:  60px !important}
    .homeHero {height: 176px !important;
        background-position: -150px -70px !important; 
        background-size: 150% !important}
    h1.heroHeading {font-size: 1.3em !important; font-weight: bold; margin-top: -10px !important; }
    h2.heroSubhead {margin-top: -30px !important;
         font-size: 1em !important; }
    .heroBtn {margin-top: -35px !important}
    h5 { font-size: 1.1em}
}

@media screen and (min-width: 375px) {
    .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -5px}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 195px !important;
        background-position: 0px -90px !important; 
        background-size: 150%}
    .heroHeading {font-size: 1.5em !important; 
        font-weight:500;
        margin-top: 20px !important}
    .heroSubhead {margin-top: -40px !important;
    font-size: 1.5em;}
    .heroBtn {margin-top: -45px !important}
    figure figcaption  {border: 0px solid blue; font-size: .8em !important;}
    p {border: 0px solid blue; font-size: .9em !important;}
    
}

@media screen and (min-width:414px) {
        .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -5px}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 225px !important;
        background-position: 0px -120px; 
        background-size: 150%}
    .heroHeading {font-size: 1.5em !important; 
        font-weight:900;
        margin-top: -0px !important}
    .heroSubhead {margin-top: -40px !important; 
    font-size: 1.3em;}
    .heroBtn {margin-top: -45px !important}
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    .heroSubhead {font-size: 1.5em !important; margin-top: -15px !important;}
    .heroBtn {margin-top: -23px !important}
} 

@media screen and (min-width: 667px) { 
    .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -5px}
    .Xnavbar-toggler {margin-top: -15px; 
        }
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 285px !important;
        background-position: 0px -160px !important; 
        background-size: 130%}
    .heroHeading {font-size: 2em !important; 
        font-weight:500;
        margin-top: -30px !important}
    .heroSubhead {margin-top: -20px !important;
    font-size: 1.9em !important}
    .heroBtn {margin-top: -10px !important}
    h2 { font-size: 1.5em !important}
    p {font-size: .96em !important; line-height: 1.7em !important; }
    h5 {font-size: inherit}
     
}

@media screen and (min-width: 732px) {
    .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -5px}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 285px !important;
        background-position: 0px -170px !important; 
        background-size: 130%}
    .heroHeading {font-size: 2em !important; 
        font-weight:500;
        margin-top: -20px !important}
    .heroSubhead {margin-top: -30px !important;
    font-size: 1.7em;}
    .heroBtn {margin-top: -30px !important}
}

@media screen and (min-width: 768px) {
    .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -0px}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 345px !important;
        background-position: 0px -180px !important; 
        background-size: 130%}
    .heroHeading {font-size: 2em !important; 
        font-weight:500;
        margin-top: -20px !important}
    .heroSubhead {margin-top: -30px !important;
    font-size: 1.7em;}
    .heroBtn {margin-top: -30px !important}
}

@media screen and (min-width: 800px) {
    .Xnavbar-brand img {
        width: 210px !important; 
        margin-top: -5px}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 60px !important}
    .homeHero {height: 345px !important;
        background-position: 0px -180px !important; 
        background-size: 125%}
    .heroHeading {font-size: 2em !important; 
        font-weight:500;
        margin-top: -20px !important}
    .heroSubhead {margin-top: -30px !important;
    font-size: 1.7em;}
    .heroBtn {margin-top: -30px !important}
}

@media screen and (min-width: 1024px) {
    .Xnavbar-brand img {
        width: 310px !important; 
        margin-top: 5px}
    .Xnavbar-toggler {margin-top: 10px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 99px !important}
    .homeHero {height: 472px !important;
        background-position: 0px -210px !important; 
        background-size: 125%}
    .heroHeading {font-size: 3em !important; 
        font-weight:500;
        margin-top: 10px !important}
    .heroSubhead {margin-top: -20px !important;
    font-size: 1.7em;}
    .heroBtn {margin-top: -10px !important}
}

@media screen and (min-width: 1280px) {
    .Xnavbar-brand img {
        width: 310px !important; 
        margin-top: 2px}
    .Xnavbar-toggler {margin-top: 15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 100px !important}
    .homeHero {height: 512px !important;
        background-position: 0px -210px !important; 
        background-size: 100%}
    .heroHeading {font-size: 3em !important; 
        font-weight:500;
        margin-top: 10px !important}
    .heroSubhead {margin-top: -20px !important;
    font-size: 1.9em;}
    .heroBtn {margin-top: -10px !important}
}

@media screen and (min-width: 1366px) {
    .Xnavbar-brand img {
        width: 310px !important; 
        margin-top: 2px}
    .Xnavbar-toggler {margin-top: 15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 100px !important}
    .homeHero {height: 512px !important;
        background-position: 0px -210px !important; 
        background-size: 100%}
    .heroHeading {font-size: 3em !important; 
        font-weight:500;
        margin-top: 80px !important}
    .heroSubhead {margin-top: -20px !important;
    font-size: 1.9em;}
    .heroBtn {margin-top: -10px !important}
}

@media screen and (min-width: 1400px) {
    .Xnavbar-brand img {
        width: 310px !important; 
        margin-top: -0px !important}
    .Xnavbar-toggler {margin-top: -15px; 
        border: 0px solid blue}
    .Xnavbar-expand-lg {height: 100px !important}
    .homeHero {height: 372px !important;
        background-position: 0px -350px !important; 
        background-size: 100%}
    .heroHeading {font-size: 4em !important; 
        font-weight:500; border: 0px solid blue;
        margin-top: -50px !important}
    .heroSubhead {margin-top:  20px !important;
    font-size: 2.5em;}
    .heroBtn {margin-top: 3px !important}
}

/* anmations */

    /*left*/    
    .imgSliderLeft {width: 10% !important;   text-align: left !important; 
        }
        .imgAnimLeft {padding-right : 0px !important; width: 100% !important;}
    .divAnimLeft {
      width: 25%;
      height: Auto;
     /* background: red;*/
      position: relative;
      animation-name: imageLeft;
      animation-duration: 3s;  
      animation-delay: 1s;
      animation-fill-mode: both;
        float: left; 
        padding-right: 20px;       
    }
    @keyframes imageLeft {
      from {left: -100px; background-color: transparent; opacity: 0}
      to {left: 0%; background-color: transparent;}
    }
    /*right*/
    .imgSliderRight {width: 10% !important;   text-align: left !important; 
        }
        .imgAnimRight {padding-left: 25px !important; width: 100% !important;}
    .divAnimRight {
      width: 25%;
      height: Auto;
     /* background: red;*/
      position: relative;
      animation-name: imageRight;
      animation-duration: 3s;  
      animation-delay: 1s;
      animation-fill-mode: both;
        float: right !important;       
    }
    @keyframes imageRight {
      from {right: -100px; background-color: transparent; opacity: 0}
      to {right: 0%; background-color: transparent;}
    }

 
/* end animations*/







.dagger {color: blue}

.faqAccordion {
   border-radius: 20px 20px 0px 0px !important;
}

.h5boldBlue {
    font-weight:700; color: darkblue
}

.source {
    color: teal;
    font-style: italic;
    font-size: 95%;
    margin-left: 2em
    
}
sup {font-size: .9em !important; line-height: 1.3em !important }
.devilsAdvocate sup {font-size: .95em !important; line-height: 1.3em !important }



.darkHighlight {
    background-color: #FBFF9F !important;
}
.lightHighlight {
    background-color: lightyellow;
}

/* BLINK */
blink {
  animation: 1s linear infinite condemned_blink_effect;
}

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
} /* end BLINK */





.lightGrayText {
    color: #888; font-weight: 400;
}




.largeQuote {
    font-size: 3em !important;
    margin-left: .3em; 
    margin-top: .3em !important;
    margin-bottom: -.8em;
    display:block;
}

.legendBulletTeal {border: 3px solid blue;
    font-size: 4em;
    color: teal;
    height: 1em !important;
    min-heigth: .1em !important;
    line-height: .1em !important;
}
.legendBulletBlue {
    font-size: 4em;
    color: teal;
}
.legendBulletRed {
    font-size: 4em;
    color: red;
}
.legendBulletTeal, .legendBulletBlue, .legendBulletRed {
    margin-bottom: -13em !important;
}

.legend {border: 1px dashed #ccc;
    border-radius: 12px;
    line-height: -.1em !important;
    text-align: center; 
    color: #888;
    padding: 12px;
    margin-Bottom: 20px;
    
}
@media screen and (max-width: 480px) {
    .legend {font-size: .8em;
    color: black;
    padding: 8px}
}





















@media screen and (max-width: 480px) {
    h1, h2, h3, h4, h5, h6 {font-size: 110% !important}
} 


html {
    scroll-behavior: smooth;
}

.redacted {
    background-color: black;
}

.cyanHighlight {
    background-color: cyan;
}