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


*/
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('InterVariable-Italic.woff2') format('woff2');
}
/* legacy name "Inter var" (Oct 2023) */
@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('InterVariable.woff2') format('woff2'); }
@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('InterVariable-Italic.woff2') format('woff2'); }
/* static fonts */
@font-face { font-family:Inter; font-style:normal; font-weight:100; font-display:swap; src:url("Inter-Thin.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:100; font-display:swap; src:url("Inter-ThinItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:200; font-display:swap; src:url("Inter-ExtraLight.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:200; font-display:swap; src:url("Inter-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:300; font-display:swap; src:url("Inter-Light.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:300; font-display:swap; src:url("Inter-LightItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url("Inter-Regular.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:400; font-display:swap; src:url("Inter-Italic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url("Inter-Medium.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:500; font-display:swap; src:url("Inter-MediumItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:600; font-display:swap; src:url("Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:600; font-display:swap; src:url("Inter-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:700; font-display:swap; src:url("Inter-Bold.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:700; font-display:swap; src:url("Inter-BoldItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:800; font-display:swap; src:url("Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:800; font-display:swap; src:url("Inter-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:normal; font-weight:900; font-display:swap; src:url("Inter-Black.woff2") format("woff2"); }
@font-face { font-family:Inter; font-style:italic; font-weight:900; font-display:swap; src:url("Inter-BlackItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:100; font-display:swap; src:url("InterDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:100; font-display:swap; src:url("InterDisplay-ThinItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:200; font-display:swap; src:url("InterDisplay-ExtraLight.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:200; font-display:swap; src:url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:300; font-display:swap; src:url("InterDisplay-Light.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:300; font-display:swap; src:url("InterDisplay-LightItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:400; font-display:swap; src:url("InterDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:400; font-display:swap; src:url("InterDisplay-Italic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:500; font-display:swap; src:url("InterDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:500; font-display:swap; src:url("InterDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:600; font-display:swap; src:url("InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:600; font-display:swap; src:url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:700; font-display:swap; src:url("InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:700; font-display:swap; src:url("InterDisplay-BoldItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:800; font-display:swap; src:url("InterDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:800; font-display:swap; src:url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:normal; font-weight:900; font-display:swap; src:url("InterDisplay-Black.woff2") format("woff2"); }
@font-face { font-family:InterDisplay; font-style:italic; font-weight:900; font-display:swap; src:url("InterDisplay-BlackItalic.woff2") format("woff2"); }

    

    
 html {
	scroll-behavior: smooth;
}   
    
    body {
        font-family: 'InterDisplay','Inter', Helvetica, Arial, sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
        font-size: 16px;
        background: #F7FFF7;
        padding: 0;
        margin: 0;
    }
    
    
    /* ---- POSITION and LAYOUT ---- */
    
    section {
        display: flex;
        flex-wrap: wrap;
        margin-bottom:115px;
    }

    button#top-button {
      	display:none;
        border:none !important;
        background:transparent !important;
    }

    
    section.left {
        flex-direction: row;
    }
    
    section.right {
         flex-direction: row-reverse;
    }
    
    
    
    section#hero {
        background-image: url("/RECOVERY/images/bkgd-circles.png");
        background-repeat: no-repeat;
        background-position: bottom right -750px;
        align-items: flex-end;
        background-size: 115%;
        overflow: hidden;
    }
    
    #va-logo-top {
        padding-top: 48px;
        margin-left: 10vw;
        margin-right: 0;
        margin-bottom: 100px;
        margin-bottom: 0;
        position: absolute;
        top: 0;
        width: 60vw;
        max-width: 258px;
    }
    
    div.hero-col {
        display: flex;
        flex-direction: row;
        align-content: flex-end;
    }
    
    div.hero-col > div {
        align-content: flex-end;
    }
    
    div.hero-col .hero-col-left {
        padding-top: 16vh;
        flex: 65%;
    }
    
    div.hero-col .hero-col-right {
        flex:35%;
    }
    
    div.hero-col-left div {
        display: inline-flex;
    }
    
    div.hero-col-right div {
        display: flex;
        flex-direction: row;
        width: 35%;
        align-content: flex-end;
        
    }
    
    div.hero-col-left div.hero-item-left {
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    
    #hero-image img {
        width: 100%;
        margin-bottom: -10px;
    }
    
    .hero-item-left h1,
    .hero-item-left p,
    .hero-item-left #hero-buttons {
        margin-left:10vw;
        flex:65%;
    }
    
    
    #hero-buttons {
        margin-bottom: 90px;
        display: flex;
        padding-top:20px;
    }
    
    
    #hero-content {
        padding-top:48px;
        padding-bottom:115px;
        margin-left:10vw;
    }



	
    
    
    /* ------ sections -------- */

    .sud-section {width:60%;} 
    .data-section {width:40%;}   
    
    section.left .sud-body {
        margin-left:10vw;
        padding: 50px 60px 20px 0;
    }
    
    section.left .data-box,
    section.left .data-image {
        margin-right:10vw;
    }
    
    section.right .sud-body {
        margin-right:10vw;
        padding:60px 0 20px 60px;
    }
    
    section.right .data-box,
    section.right .data-image {
        margin-left:10vw;
    }
    
    .data-image {
        padding:0;
        text-align: center;
    }
    
    .data-image img {
        max-width:95%;
        margin: 0 auto -0.25em;
        padding:0;
    }
    
    
    
    section.right .sud-section {
        border-radius: 24px 0px 0px 0px;
    }
    
    section.right .data-box {
        padding:56px 30px 56px 56px;
        border-radius: 16px 0px 0px 16px;
    }
    
    section.left .sud-section {
        border-radius: 0px 24px 0px 0px;
    }
    
    section.left .data-box {
        padding:56px 56px 30px 56px;
        border-radius: 0px 16px 16px 0px;
     }
    
    
    
    
    
    .headline-block {
        display: flex;
        align-items: flex-end;
    }

    
    .headline-block h2 {width:70%;}
    
    .headline-block img {
        margin-bottom: 0.75em;
    }
    
    .left .button-section {
        margin-left:10vw;
    }
    
    .right .button-section {
        margin-left:60px;
    }
    
    .mobile-button {
        display:none;
    }
    
    #resources {
        display: flex;
          justify-content: space-around;
        clear:both;
        padding: 0 10vw;
    }
    
    #resources > article {
        padding: 6% 4.5% 4.5% 4.5%;
        width: 39%;
        background-color: #F0FBF3;
        background-image: url("/RECOVERY/images/bkgd-color-bar.jpg");
        background-position: top center;
        background-size: 100% 13px;
        background-repeat: no-repeat;
        border-radius: 24px;
        
    }
    
    #resources > article:first-of-type {
        margin-right: 3%;
    }
    
    #footer {
        margin: 0 10vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2em 0;
        border-top: 1px solid #DEE5DE;
    }
    
    #footer > div {
        
    }



/* --------------------------------------
                       buttons 
   --------------------------------------*/


/* hero buttons */


	#hero-buttons {
      margin-bottom: 90px;
      padding-top: 20px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-start;
      flex-direction: row;
      align-items: stretch;
    }

	#hero-buttons .hero-button {
        text-align: center;
        font-size: 1.187em;
        line-height: 1.4em;
        font-weight: 500;
        width: 200px; 
        display: inline-flex;
      	flex-direction: column;
      	margin-right: 1vw;
    }

    
    #hero-buttons .hero-button a {
        clear: both;
        padding: 30px 20px 10px;
        text-decoration: none !important;
        height: 9vh;
        align-content: center;
        padding: 0 0.5em 0.5em;
    }


/* other buttons */

#resources .button a {
        background: #222222;
        color: #fffffe;
        text-decoration: none;
        background-image: url("/RECOVERY/images/bkgd-angle.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 60% 100%;
        margin-top: 1em;
    }

	#resources .button a:hover {
      	background-color:#000001;
    }
    
    #footer .button a {
        background: transparent;
        color: #00427A;
        text-decoration: none;
        margin-top: 0;
        border: 2px solid #00427A;
        font-size: 0.9em;
        font-weight: normal;
        font-weight: 500;
        padding: 0.6em 1.4em 0.5em 2em;
    }

    #footer .button a:hover {
            background-color: #ffffff;
    }
    
    #footer .button a:after {
        content:"";
        background: url("/RECOVERY/images/navy-arrow.svg") no-repeat 0 0;
        background-size: 24px 24px;
        width: 24px;
        height: 24px;
        float: right;
        margin-left:12px;
        margin-top: 3px;
    }


    
    
    /* ------- BLUE ------- */
    
    section.section-blue .sud-section {
        background: linear-gradient(180deg, rgba(0, 66, 122, 0.06) 0%, rgba(0, 66, 122, 0.00) 100%);
    }
    
        section.section-blue .data-box {
        background: linear-gradient(132deg, rgba(0, 66, 122, 0.06) 26.45%, rgba(0, 66, 122, 0.00) 100%);
    }
    
    div.hero-button.blue {
      margin-left: 10Vw;
        
    }
    
    div.hero-button.blue a,
    div.hero-button.blue a:link {
        color: #00427A;
      	background-image: url("/RECOVERY/images/button-desktop-blue.png");
        background-size: 100% 100%;
    }
    
    div.hero-button.blue a:hover {
        background-image: url("/RECOVERY/images/button-desktop-blue-hover.png");
      	background-size: 100% 100%;
    }
    
    div.hero-button.blue:hover a,
    div.hero-button.blue:hover a:link {
        color: #fffffe;
    }
    
    div.hero-button.blue:after {
        content: url("/RECOVERY/images/down-arrow-blue.svg");
        display: block;
        margin-top: -14px;
    }
    
    .section-blue span.facts {
        color: #00427A;
    }
    
    .section-blue .button a {
        background: #00427A;
        color: #fffffe;
        text-decoration: none;
        background-image: url("/RECOVERY/images/bkgd-angle.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 40%;
    }

    .section-blue .button a:hover {
            background-color: #0670CA;
    }
    
    .section-blue .data-date {
        border-top: 1px solid #C2D6DC;
    }
    
    /* ----- PURPLE ------ */
    
    section.section-purple .sud-section {
        background: linear-gradient(180deg, rgba(130, 51, 166, 0.06) 0%, rgba(130, 51, 166, 0.00) 100%);
    }
    
    section.section-purple .data-box {
        background: linear-gradient(220deg, rgba(130, 51, 166, 0.06) 26.45%, rgba(130, 51, 166, 0.00) 100%);
    }

    
    div.hero-button.purple a,
    div.hero-button.purple a:link {
        text-decoration: none !important;
        color: #8233A6;
      	background-image: url("/RECOVERY/images/button-desktop-purple.png");
        background-size: 100% 100%;
    }
    
    div.hero-button.purple a:hover {
        background-image: url("/RECOVERY/images/button-desktop-purple-hover.png");
      	background-size: 100% 100%;
    }
    
    div.hero-button.purple:hover a,
    div.hero-button.purple:hover a:link {
        color: #fffffe;
    }
    
    div.hero-button.purple:after {
        content: url("/RECOVERY/images/down-arrow-purple.svg");
        display: block;
        margin-top: -14px;
    }
    
    .section-purple span.facts {
        color: #8233A6;
    }
    
    .section-purple .button a {
        background: #8233A6;
        color: #fffffe;
        text-decoration: none;
        background-image: url("/RECOVERY/images/bkgd-angle.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 40%;
    }

    .section-purple .button a:hover {
            background-color: #AA20EA;
    }
    
    .section-purple .data-date {
       border-top: 1px solid #DCD0E5;

    }
    
    /* ----- GREEN ------ */
    
    
    section.section-green .sud-section {
        background: linear-gradient(180deg, rgba(15, 127, 120, 0.06) 0%, rgba(15, 127, 120, 0.00) 100%);
    }
    
    
    section.section-green .data-box {
        background: linear-gradient(132deg, rgba(15, 127, 120, 0.06) 26.45%, rgba(15, 127, 120, 0.00) 100%);
    }

    
    div.hero-button.green a,
    div.hero-button.green a:link {
        text-decoration: none !important;
        color: #0F7F78;
      	background-image: url("/RECOVERY/images/button-desktop-green.png");
        background-size: 100% 100%;
        padding: 50px 20px 6px 20px;
    }
    
    div.hero-button.green a:hover {
        background-image: url("/RECOVERY/images/button-desktop-green-hover.png");
      	background-size: 100% 100%;
    }
    
    div.hero-button.green:hover a,
    div.hero-button.green:hover a:link{
        color: #fffffe;
    }
    
    div.hero-button.green:after {
        content: url("/RECOVERY/images/down-arrow-green.svg");
        display: block;
      	margin-top: -14px;
    }
    
    .section-green span.facts {
        color: #0F7F78;
    }
    
    .section-green .button a {
        background: #0F7F78;
        color: #fffffe;
        text-decoration: none;
        background-image: url("/RECOVERY/images/bkgd-angle.png");
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 60% 100%;
    }

    .section-green .button a:hover {
      background-color: #22744A;
    }
    

    
    
    
    
    
    
    
/* ---- TEXT STYLES --- */
    
    h1, h2,  h3, h4, h5 {
        font-family: 'InterDisplay','Inter', Helvetica, Arial, sans-serif;
        font-style: normal;
        font-weight:bold;
        font-weight: 900;
        line-height: normal;
      	color: #222222;
    }
    
    p {
        font-family: 'InterDisplay','Inter', Helvetica, Arial, sans-serif !important;
        color: #222222;
        font-family: Inter;
        font-size: 18px;
        font-style: normal;
        font-weight: 300;
        line-height: 2em; /* 163.636% */
    }
    
    a,
    a:link {color: #00427A;}

	a:hover {color: #6040FF;}
    
    h1 {
        font-size: 3.9em;
        margin-bottom:46px;
    }
    
    h2 {
        font-size: 3.25em;
        margin: 0;
    }
    
    .button a { 
        border-radius: 50px;
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
      	display: inline-flex;
        justify-content: center;
        align-items: center;
      	padding: 1.3em 1.3em 1.12em 2em;
        line-height: 130%;
        margin-top: 0.25em;
        
    }
    
    .button a:after {
        content:"";
        background-image: url(/RECOVERY/images/icon-right-arrow-circle.svg);
      	background-repeat: no-repeat;
      	background-position: center right;
      	background-size: 100% 100%;
        width: 28px;
        height: 28px;
      	margin-left:1.2em;
    }
    
    #resources .button a:after {
        content:"";
        background-image: url(/RECOVERY/images/white-arrow.png);
      	background-repeat: no-repeat;
      	background-position: center right;
      	background-size: 100% 100%;
        width: 32px;
        height: 32px;
      	margin-top:0;
      	margin-left: 0.5em;
    }
    
    
    
    #hero p {
        font-family: 'InterDisplay','Inter', Helvetica, Arial, sans-serif;
        color: #222);
        font-family: Inter;
        font-size: 1.37em;
        font-style: normal;
        font-weight: 300;
        line-height: 36px; /* 163.636% */
    }
    
    .data-box p {
        line-height:1.6em;
        margin-top: 0;
    }
    
    .data-date {
        font-size: 0.81em;
        font-weight: 600;
        padding-top: 1.2em;
    }
    
    span.facts {
        font-size: 1.5em;
        font-weight:900;
        line-height:1.23em;
    }
    
    #resources > article h2 {
        font-size: 40px;
    }
    
    #footer p {
        font-size: 0.8em;
    }


/* ----------------------------------------------------------------
                         min MOBILE 1680px 
    --------------------------------------------------------------- */

@media only screen and (min-width: 1680px) {
  
  #hero {
    padding-right: 10vw;
  	padding-left: 3vw;
  }
}
    

    
/* ----------------------------------------------------------------
                         MOBILE 1290px 
    --------------------------------------------------------------- */    
    
@media only screen and (max-width: 1290px) {
  
    section#hero {
        background-position: bottom right -550px;
    }
    

    #va-logo-top {
        margin-bottom: 0;
        display: flex;
          align-items: flex-start;
    }
    
    div.hero-col > div {
        align-content: flex-end;
        padding-top: 20vh;
    }
    
    .hero-item-left {
        padding-top: 0;
    }
    
    .hero-item-left h1 {
        font-size: 3.0em;
        margin-top: 4vh;
        margin-bottom: 2vh;
    }
    
    .hero-item-left p {
        padding-top: 0;
    }

    
    #hero-buttons .hero-button {
        max-width: 14.9vw;
        font-size: 1.0em;
    }
  
     #hero-buttons .hero-button a {
        height: 7vh;
        align-content: center;
        padding: 0 1.0em 0.5em;
      }

    div.hero-button.blue:after,
      div.hero-button.purple:after,
        div.hero-button.green:after {
        margin-top: -14px;
    }
         
    .headline-block h2 {
        font-size: 2.7em;
    }
    
    #hero p {
        font-size: 1.28em;
        line-height: 1.7em;
    }
    
    .headline-block img {
        width: 10vw;
        max-width: 100px;
    }
    
    span.facts { 
        font-size: 1.35em;
    }
    
    section.right .data-box {
        padding: 40px 30px 40px 40px;
    }
    
    section.left .data-box {
        padding: 40px 40px 40px 30px ;
    }
    
    #resources > article h2 {
    font-size: 2.5em;
}
} 
    
    
    
    
    
/* ----------------------------------------------------------------
                         MOBILE 1080px 
    --------------------------------------------------------------- */
    
    
@media only screen and (max-width: 1080px) {
  
    div.hero-col > div {
        align-content: flex-end;
        padding-top: 12vh;
    }
    
    .hero-item-left {
        padding-top: 0;
    }
    
    .hero-item-left h1 {
        font-size: 2.6em;
        margin-bottom: 3vh;
        margin-top: 6vh;
    }
    
    .headline-block h2,
    #resources > article h2 {
        font-size: 2.2em;
      line-height: 1.4em;
    }
    
    #hero p {
        font-size: 1.15em;
    }
    
    
    #hero-buttons {
        padding-top: 2vh;
    }
    
    #hero-buttons .hero-button a {
        font-size: 1.0em;
        line-height: 1.15em;
    }
    
    span.facts {
        font-size: 1.2em;
    }
    
    
    
    #footer .button a { 
        padding: 0.8em 1.4em 0.6em 2em;
        line-height: 130%;
    }
    
    #footer .button a:after {
        margin-top: -2px;
    }
    
       
}
    
    
    
    
/* ----------------------------------------------------------------
                         MOBILE 1000px 
    --------------------------------------------------------------- */    
    
@media only screen and (max-width: 1000px) {
    
    section#hero {
        background-position: top right -200px;
        background-size: auto 30vh;
        margin-bottom:0;
    }
    
    div.hero-col {
        display: inline;
    }

    div.hero-col #hero-image.hero-item {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        padding-top: 0;
        margin-right: 0;
    }
    
    #hero-image img {
        height: 30vh;
        width: auto;
        margin-bottom: 0;
        margin-left: 0;
    }
    
    
    div.hero-col #hero-header.hero-item {
        display: flex;
        flex-direction: row; 
    }

    
    div.hero-col-left div {
        display: flex;
        flex-direction: row;
    }
    
    div.hero-col-right div {
        display: flex;
        flex-direction: row;        
    }
    
    
    div.hero-col-left div.hero-item-left {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .hero-item-left h1,
    .hero-item-left p,
    .hero-item-left #hero-buttons {
        margin-left:10vw;
        flex:65%;
    }
    
    .hero-item-left h1 {
        margin-top: 2vh;
        margin-bottom: 10vh;
        font-size: 2.6em;
        padding-right: 37vw;
    }
    
    #hero #header-body p {
        margin-right: 8vw;
    }
    
    #hero-buttons {
        margin-bottom: 90px;
        margin-left: 0;
        padding-top: 20px;
        width: 100%;
        justify-content: center;
        flex-direction: row;
    }
    
    #hero-buttons .hero-button {
        text-align: center;
        font-size: 1.2em;
        max-width: 260px;
      margin-right: 1.5vw;
    }
  
  
  
      #hero-buttons .hero-button.blue {
        margin-left: 10Vw;
    }
  
  	#hero-buttons .hero-button.green {
        margin-right: 10Vw;
    }
  
  		#hero-buttons .hero-button a {
        height: 8vh;
        align-content: center;
        padding: 0.4em 1.0em 0.8em;
    }
    
    #hero-content {
        padding-top:48px;
        padding-bottom:115px;
        margin-left:10vw;
    }
    
    .sud-section p,
    #resources p {
        line-height: 1.8em;
    }
    

    
    #top-button {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 99;
      font-size: 18px;
      border: none;
      outline: none;
      background-color: transparent;
      color: white;
      cursor: pointer;
    }

    #top-button:hover {
    }
    
    #footer .button a {
      padding: .8em 2.5em 0.5em 2.5em;
    }
    
    #footer {
        display: flex;
        flex-direction: column;
        padding: 1em 0;
    }
    
    #footer #logo {
        order:1;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #DEE5DE;
        padding-bottom: .6em;
    }
    
    #footer #privacy {
        order:3;
        width: 100%;
        text-align: center;
        padding-bottom: .6em;
    }
    
    #footer #button {
        order:2;
        width: 100%;
        text-align: center;
        padding-bottom: .6em;
        padding-top: 2em;
    }
    
}  
    
    
/* ----------------------------------------------------------------
                         MOBILE 850px 
    --------------------------------------------------------------- */
    
 @media only screen and (max-width: 850px) {
     
     .hero-item-left h1 {
        font-size: 2.4em;
    }
   
     #hero-buttons .hero-button {
          max-width: 190px;
      }
     
     section#resources {
         display: flex;
        flex-wrap: wrap;
        margin: 0 6vw 6vh;
         padding:0;
     }
     
     #resources > article {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 115px;
        margin: 0;
        padding: 40px;
        flex: 100%;

     }
         
     #resources > article:first-of-type {
         margin-right: 0;
         margin-bottom: 4vh;
     }
     
    }   
    
    
/* ----------------------------------------------------------------
                         MOBILE 760px 
    --------------------------------------------------------------- */
    
@media only screen and (max-width: 760px) {
    
  p {
    font-size:1em;
  }
    
    #hero p { font-size: 1.15em;}
  
  div.hero-col .hero-col-left {
      padding-top: 12vh;
      flex: 65%;
    }
    
    #hero-buttons {
        flex-direction: column;
    }
    
    #hero-buttons .hero-button {
        margin: 0 auto;
        width: 100%;
        height: auto;
        max-width: 360px;
      }
  
  	#hero-buttons .hero-button {
        width: 100%;
        height: auto;
        max-width: 360px;
      margin-bottom: 1vh !important;
    }
  
  	
  
      #hero-buttons .hero-button.blue,
      #hero-buttons .hero-button.purple,
      #hero-buttons .hero-button.green {
            margin: auto;
        }
  
  	#hero-buttons .hero-button a,
      #hero-buttons .hero-button a:link {
        height: 5vh;
    }
    
    div.hero-button.blue a,
    div.hero-button.blue a:link {
      background-image: url("/RECOVERY/images/button-mobile-blue.png");
      background-size: 100% 100%;
    }
    
    div.hero-button.blue a:hover {
        background-image: url("/RECOVERY/images/button-mobile-blue-hover.png");
      	background-size: 100% 100%;
    }
    
    div.hero-button.purple a,
     div.hero-button.purple a:link {
      background-image: url("/RECOVERY/images/button-mobile-purple.png");
      background-size: 100% 100%;
    }
    
    div.hero-button.purple a:hover {
        background-image: url("/RECOVERY/images/button-mobile-purple-hover.png");
      	background-size: 100% 100%;
    }
    
    div.hero-button.green a,
    div.hero-button.green a:link {
      background-image: url("/RECOVERY/images/button-mobile-green.png");
      background-size: 100% 100%;
    }
    
    div.hero-button.green a:hover {
        background-image: url("/RECOVERY/images/button-mobile-green-hover.png");
      	background-size: 100% 100%;
    }
    
    .mobile-button,
    .button.black {
        display: flex;
        width: 100%;
        max-width: 400px;
    }
    
    .mobile-button.button a,
    .button.black a {
        width: 100%;
        max-width: 400px;
        text-align: center;
    }
    
    .mobile-button.button a:after {
        
    }
    
    .button-section,
    .button.black {
      margin: 0 auto !important;
    }
    
    .desktop-button {
        display:none !important;
    }
    
    section.right,
    section.left {
      flex-direction: unset;
    }
    
    .sud-section {
        width: auto;
    }
    
    section.sud-content-section {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 115px;
      margin: 0 6vw 3vh;
    padding: 40px;
        
    }
    
    section.sud-content-section .sud-body {
      margin-right: 0;
      padding: 0;
      margin-left: 0;
    }
    
    section.sud-content-section .data-box {
        margin-right:0;
      }
    
    section.sud-mobile-part {
        display: flex;
        flex-direction: column;
        flex:100%;
    }
    
    section.section-blue .sud-section,
    section.section-purple .sud-section,
    section.section-green .sud-section {
      background: none;
      backdrop-filter: none;
    }
    
    section.section-blue {
        background-color: #E8F4F0;
        border-radius: 24px;
    }
    
    section.section-purple {
        background-color: #F0F3F2;
        border-radius: 24px;
    }
    
    section.section-green {
        background-color: #E9F7EF;
        border-radius: 24px;
    }
    
    .headline-block h2 {
      width: 90%;
    }
    
    section.sud-content-section .data-image,
    section.sud-content-section .data-box {
      margin: 0 auto;
    }
    
    .data-section {
      width: 100%;
    }
    
    section.sud-content-section .data-box {
        border-radius: 16px;
    }
    
    
    section.section-blue .data-box {
      background: linear-gradient(180deg, rgba(0, 66, 122, 0.06) 26.45%, rgba(0, 66, 122, 0.00) 100%);
    }
    
    section.section-purple .data-box {
        background: linear-gradient(180deg, rgba(130, 51, 166, 0.06) 26.45%, rgba(130, 51, 166, 0.00) 100%);
    }
    
    section.section-green .data-box {
        background: linear-gradient(180deg, rgba(15, 127, 120, 0.06) 26.45%, rgba(15, 127, 120, 0.00) 100%);
    }
    
    .data-image img {
      max-width:70%;
    }
    
    

}


/* ----------------------------------------------------------------
                         MOBILE 580px 
    --------------------------------------------------------------- */
    
    @media only screen and (max-width: 580px) {
        
        section#hero {
            background-position: top left 130px;
            background-size: auto 28vh;
            margin-bottom: 0;
          }
        
        #va-logo-top {
            padding-top: 3vh;
        }
        
        #va-logo-top img {
            width: 100%;
          }
        
        .hero-item-left h1 {
            font-size: 2.6em;
            padding-right: 20vw;
            margin-top: 0;
            margin-bottom: 9vh;
          	text-shadow: 0px 0px 4px rgba(255,255,255,0.8);
          }

        
        div.hero-col #hero-image.hero-item {
            margin-right: 0;
          }
        
        #hero-image img {
            height: 20vh;
            width: auto;
            margin-bottom: 0;
            margin-left: 0;
            margin-top: 8vh;
            margin-right: 0;
          }
        
        #hero-buttons .hero-button {
            width: 100%;
            height: auto;
            max-width: 80%;
          }
        
        .headline-block img {
            width: 20vw;
            max-width: 100px;
            min-width:60px;
          }
        
        .headline-block h2, #resources > article h2 {
            font-size: 1.75em;
          }


        
    }
    
    @media only screen and (max-width: 440px) {
        .hero-item-left h1 {
            padding-right: 20vw;
            font-size: 2.0em;
          }

        
        #hero-image img {
          margin-right:0;
          }
      
      .button a,
       #resources .button a {
            padding: 1.1em 1.0em 0.9em 1.9em;
        	text-align: left !important;
          }
    }


.fade-in{
  -webkit-animation: fade-in 2s ease;
  -moz-animation: fade-in ease-in-out 2s both;
  -ms-animation: fade-in ease-in-out 2s both;
  -o-animation: fade-in ease-in-out 2s both;
  animation: fade-in 2s ease;
  visibility: visible;
  -webkit-backface-visibility: hidden;
}

@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}