/* ==========================================================================
   Globals
   ========================================================================== */


   @import url(https://fonts.bunny.net/css?family=poppins:400,500,700&display=swap);

   :root {
       --ff-text: 'Poppins', Verdana, Arial, sans-serif;

       --fw-regular: 400;
       --fw-medium: 500;
       --fw-bold: 700;

       --clr-bg-grey: #252526;
       --clr-bg-off-white: #f5f8fa;

       --clr-txt-white: #ffffff;
       --clr-text-purple: #7b33d0;
       --clr-text-dark: #333333;
       --clr-text-light-grey: #707070;

       --clr-red: #f0143e;
       --clr-green: #00a427;
       --clr-orange: #f4671c;
       --clr-white: #ffffff;
       --clr-grey: #707070;

       --clr-emo-yes: #5eb846;
       --clr-emo-fair: #adcb37;
       --clr-emo-meh: #f8cd11;
       --clr-emo-notGreat: #f48320;
       --clr-emo-awful: #d63c28;
   }


   .sidebar {
       background: rgb(7,0,16);
       background: -moz-linear-gradient(315deg, rgba(7,0,16,1) 55%, rgba(8,0,17,1) 56%, rgba(37,0,79,1) 100%);
       background: -webkit-linear-gradient(315deg, rgba(7,0,16,1) 55%, rgba(8,0,17,1) 56%, rgba(37,0,79,1) 100%);
       background: linear-gradient(315deg, rgba(7,0,16,1) 55%, rgba(8,0,17,1) 56%, rgba(37,0,79,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#070010",endColorstr="#25004f",GradientType=1);
       color: var(--clr-txt-white);
       text-align: center;
   }
   .viv-bar__progress {
       padding: 1em 2em;
   }
   .viv-bar__title {
       padding: 0 2em 1em 2em;
   }

   .mainContent {
       background-color: var(--clr-bg-off-white);
   }

   p.textScore {
       font-size: 3.75rem !important;
       line-height: 1 !important;
       font-weight: 700;
   }
   p.textScore span {
       font-size: 2.25rem !important;
       line-height: 2.5rem !important;
       font-weight: 400;
       color: var(--clr-bg-grey);
   }

   .viv-row__separate {
       margin-top: 4em;
   }

   .text-right {
       text-align: right !important;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'Poppins', Verdana, Arial, sans-serif !important;
       color: var(--clr-grey) !important;
   }

   p,
   li {
    font-family: var(--ff-text);
   }

   p.lht-header__subtext {
       font-size: 1.5rem;
       line-height: 2rem;
       color: var(--clr-bg-off-white);
       /*padding-left: 15%;
       padding-right: 15%;*/
       width: 50ch;
       margin: 0 auto;
   }

   p.footer-cta {
       padding-left: 15%;
       padding-right: 15%;
   }

   .mobile-screenshot img {
       margin-top: 2em;
       margin-bottom: 4em;
   }


   .card-footer {
       background-color: transparent !important;
       border-top: none !important;
   }


   /* ==========================================================================
      Score colors
      ========================================================================== */

   .bg-green,
   .txt-green {
       color: var(--clr-emo-yes) !important;
   }

   .bg-fair,
   .txt-fair {
       color: var(--clr-emo-fair) !important;
   }

   .bg-orange,
   .txt-orange {
       color: var(--clr-emo-meh) !important;
   }

   .bg-notGreat,
   .txt-notGreat {
       color: var(--clr-emo-notGreat) !important;
   }

   .bg-red,
   .txt-red {
       color: var(--clr-emo-awful) !important;
   }

   .awful {
       color: var(--clr-emo-awful);
   }
   .notGreat {
       color: var(--clr-emo-notGreat);
   }
   .meh {
       color: var(--clr-emo-meh);
   }
   .fair {
       color: var(--clr-emo-fair);
   }
   .yes {
       color: var(--clr-emo-yes);
   }

   /* ==========================================================================
      Sidebar
      ========================================================================== */

   .sidebar h1 {
       font-family: var(--ff-text) !important;
       font-weight: var(--fw-medium);
       color: var(--clr-text-white) !important;
       margin-left: 0.75em;
       margin-top: 3em;
   }

   .viv-bar__progress h5 {
       font-family: var(--ff-text);
       font-weight: var(--fw-medium);
       font-size: 1.125rem !important;
       line-height: 1.75rem !important;
   }
   .viv-bar__progress h5.txt-white {
       font-family: var(--ff-text);
       font-weight: var(--fw-bold);
   }

   .progress {
       height: 1.5rem;
   }

   .bg-red {
       background: var(--clr-emo-awful) !important;
   }
   .bg-notGreat {
       background: var(--clr-emo-notGreat);
   }
   .bg-orange {
       background: var(--clr-emo-meh) !important;
   }
   .bg-fair {
       background: var(--clr-emo-fair) !important;
   }
   .bg-green {
       background: var(--clr-emo-yes);
   }

   .txt-red {
       color: var(--clr-emo-awful) !important;
   }
   .txt-orange {
       color: var(--clr-emo-meh) !important;
   }
   .txt-green {
       color: var(--clr-emo-yes) !important;
   }
   .txt-white {
       color: var(--clr-white) !important;
   }


   .viv-column__cta h2 {
     color: var(--clr-white) !important;
   }
   .viv-column__cta p.column-cta {
     color: var(--clr-white) !important;
   }




   /* ==========================================================================
      Main Content
      ========================================================================== */

   .mainContent-top {
       background: rgb(191,0,247);
       background: -moz-linear-gradient(90deg, rgba(191,0,247,1) 0%, rgba(38,19,247,1) 100%);
       background: -webkit-linear-gradient(90deg, rgba(191,0,247,1) 0%, rgba(38,19,247,1) 100%);
       background: linear-gradient(90deg, rgba(191,0,247,1) 0%, rgba(38,19,247,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#bf00f7",endColorstr="#2613f7",GradientType=1);
       height: 375px;
   }

   .mainContent-top img.viv-logo {
       width: auto;
       height: 30px;
       margin-top: 1em;
       margin-left: 1em;
   }

   .mainContent-top h2 {
       font-weight: var(--fw-bold);
       font-size: 3rem;
       line-height: 1;
       color: var(--clr-white) !important;
   }

   .perfIntro {
       margin: 25em 0 5em 0;
   }

   .perfIntro p.textScore {
       margin-bottom: 0;
       margin-top: -0.25em;
   }
   .perfIntro h3 {
       font-size: 2.25rem;
       line-height: 2.5rem;
       font-weight: var(--fw-bold) !important;
   }

   .otherIntro {
       margin: 10em 0 5em 0;
   }

   .otherIntro p.textScore {
       margin-bottom: 0;
       margin-top: -0.25em;
   }
   .otherIntro h3 {
       font-size: 2.25rem;
       line-height: 2.5rem;
       font-weight: var(--fw-bold) !important;
   }

   p.scoreIntroText {
       margin-top: 2em;
       /*font-size: 1.5rem;
       line-height: 2rem;*/
       font-size: 1.125rem;
       line-height: 1.75rem;
       font-weight: 500;
   }

   .btn-vividus {
       background: rgb(206,0,255);
       background: -moz-linear-gradient(90deg, rgba(206,0,255,1) 0%, rgba(29,0,255,1) 100%);
       background: -webkit-linear-gradient(90deg, rgba(206,0,255,1) 0%, rgba(29,0,255,1) 100%);
       background: linear-gradient(90deg, rgba(206,0,255,1) 0%, rgba(29,0,255,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ce00ff",endColorstr="#1d00ff",GradientType=1);

       font-size: 1.5rem;
       line-height: 2rem;
       padding: 0.5em 2em;
       font-weight: var(--fw-bold);
       color: var(--clr-white);
   }

   .btn-vividus:hover {
     color: var(--clr-white);
   }

   .card {
       border-radius: 0.5em;
   }

   .row .card {
       min-height: 15em;
       box-shadow: 0 7px 1em var(--clr-grey);
       display: flex;
       flex-wrap: wrap;
   }
   .row .card > [class*='card-body'] {
       display: flex;
       flex-direction: column;
   }
   .row .card img {
       margin-top: -3.5em;
       margin-bottom: 2em;
       width: 25%;
   }

   .card-body h5 {
       text-align: center;
       color: var(--clr-text-dark) !important;
   }
   .card-body p {
       font-size: 0.875rem;
       line-height: 1.25rem;
       text-align: center;
       color: var(--clr-text-light-grey) !important;
   }

   img.drawing {
       width: 80%;
       display: flex;
       align-items: end;
   }


   /* ==========================================================================
      Circle Chart
      ========================================================================== */

   .flex-wrapper {
       display: flex;
       flex-flow: row nowrap;

       justify-content: center;
     }

     .single-chart {
       width: 100%;
       justify-content: space-around ;
     }

     .circular-chart {
       display: block;
       margin: 10px auto;
       max-width: 80%;
       max-height: 250px;
     }

     .circle-bg {
       fill: none;
       stroke: #eee;
       stroke-width: 3.8;
     }

     .circle {
       fill: none;
       stroke-width: 2.8;
       stroke-linecap: round;
       animation: progress 1s ease-out forwards;
     }

     @keyframes progress {
       0% {
         stroke-dasharray: 0 100;
       }
     }

     .circular-chart.meh .circle {
       stroke: var(--clr-emo-meh);
     }

     .circular-chart.yes .circle {
       stroke: var(--clr-emo-yes);
     }

     .circular-chart.fair .circle {
       stroke: var(--clr-emo-fair);
     }

     .circular-chart.notGreat .circle {
       stroke: var(--clr-emo-notGreat);
     }

     .circular-chart.awful .circle {
       stroke: var(--clr-emo-awful);
     }

     .percentage {
       fill: var(--clr-white);
       font-family: sans-serif;
       font-size: 0.5em;
       text-anchor: middle;
     }



   /* ==========================================================================
    Footer
    ========================================================================== */

   footer {
       background: rgb(7,0,16);
       background: -moz-linear-gradient(90deg, rgba(7,0,16,1) 0%, rgba(24,1,50,1) 100%);
       background: -webkit-linear-gradient(90deg, rgba(7,0,16,1) 0%, rgba(24,1,50,1) 100%);
       background: linear-gradient(90deg, rgba(7,0,16,1) 0%, rgba(24,1,50,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#070010",endColorstr="#180132",GradientType=1);
   }
   footer p,
   footer p a {
       margin-top: 0.75em;
       color: var(--clr-bg-off-white);
       font-size: 0.875rem;
       line-height: 1.25rem;
   }



   /* ==========================================================================
      Media Query
      ========================================================================== */

   /* iPhone 5/SE (~320px) */
   @media only screen and (min-width: 20em)
   {
       img.drawing {
           width: 100%;
           display: flex;
           align-items: flex-end;
           margin-top: 2em;
       }
   }



   /* iPad Landscap (~1024px) */
   @media only screen and (min-width: 64em)
   {
       img.drawing {
           width: 80%;
           display: flex;
           align-items: end;
           margin-top: 0;
       }
   }