body{
  position: relative !important ;
  background-image: url(../graphics/Main-Image.jpg);
  overflow-x: hidden;
  background-attachment: fixed;
  color: #000000 !important;
}

 /*  Fonts  */
.font-cairo {font-family: 'Cairo', sans-serif !important; letter-spacing: -1px !important;}
.font-amiri {font-family: 'Amiri', serif !important; letter-spacing: 0 !important;}
.font-openSans {font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important; }



/* color over rides */
:root {
    --vlGrey: #EBEBEB;
    --lGrey: #C3C3C3;
    --mGrey: #564c4c;
    --dGrey: #202020;
		--main-color: #a20014;
		--support-color: #eeba00;
}

/* coloring */
.csVLG { color: var(--vlGrey);}
.csLG { color: var(--lGrey);}
.csMG {  color: var(--mGrey);}
.csDG {  color: var(--dGrey) !important;}
.csM {  color: var(--main-color)!important;}
.csS {  color: var(--support-color);}
.csW {  color: #fff;}

.bgVLG { background-color: var(--vlGrey);}
.bgLG { background-color: var(--lGrey);}
.bgMG {  background-color: var(--mGrey);}
.bgDG {  background-color: var(--dGrey);}
.bgM {  background-color: var(--main-color);}
.bgS {  background-color: var(--support-color);}
.bgW {  background-color: #fff;}


.pos{
  position: relative;
}
.logo2 {
    position: absolute;
    left: 25px;
    top: 25px;
    z-index: 99999999999 !important;
}
.logopic {
    width: 115px;
}
p{
  color: black !important;
  font-size: 17px;
}
/* tags */
.img-rounded {  border-radius: 12px 12px 0 0; }
.img-desc-rounded {border-radius: 0 0 12px 12px; background-color: var(--vlGrey); height: 2.5em;padding-top: 0.25em;}

.close:focus, .close:hover {
  color: #fff;
}
.link-img{
    width: 26px;
}
.modal-content {
    background-color: #fff0 !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0) !important;
}
.modal-header{
    border-bottom: 1px solid #e9ecef00 !important;
}
.close{
    text-shadow: 0 1px 0 #fff0;
}
a:not(.btn){
  color: #71010f;
  font-weight: 600;
}
.float-left {
  float: right !important;
  text-align: right;
}
/*grids */
.reverse {
  display: grid;
  width: 100%;
  grid-gap: 2em;
  grid-template-columns: 4fr 8fr;
  grid-template-areas: "content-right content-left";  }

  .content-left  {grid-area: content-left; }
  .content-right {grid-area: content-right; }

    .scrolldownImg {width: 45px; }
    .bold {font-weight: bold;}

    .background-overlay:before{
        background-color: #000000b8;
    }
    .lead {
      font-weight: 500 !important;
    }

    #section00 h2{
      width: 50%;
    }
    .titulo {
        font-family:"Montserrat"; 
        font-size:20px; 
        text-align:center; 
        color:#999;
      }
      .barras {
        width:320px; 
        margin:10px auto;
      }
      .barra {
        width:300px; 
        height:30px; 
        background:#CCC; 
        margin:10px;
      }
      .barra-nivel {
        height:30px; 
        background:#444;
        width:1px;
        -webkit-transition: width 1s ease;
        -moz-transition: width 1s ease;
        transition: width 1s ease;
      }
      .valor-nivel {
        line-height:30px; 
        color:#fff; 
        margin-left:10px; 
        font-family:"Montserrat"; 
        font-size:12px;
      }
      .sec02-p{
        font-weight: 500;
      }


    /* addthis */
      .at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span {
        background-color: var(--main-color)!important;
      }
      .at-expanding-share-button[data-position=bottom-left] {
        left: 10px;
    }
     /* addthis */
     .at-expanding-share-button-mobile-container .at-expanding-share-button-mobile .at-expanding-share-button-toggle-bg>span {
      background-color:   #71010f!important;
      color: #71010f!important;
    }


    .video-promo-head {
      background-color: #a20114;;
      color: white;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 5px;
      font-size: 17px;
      font-weight: bold !important;
  }
  .youtube-promo {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
}


        .lyar-bottom{
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            position: absolute;
            z-index: -1;
            background-image: linear-gradient(#00000000,#06060600, #02020229 ,#02020273, #020202fc);
        }
        section{
          padding: 20px 0 !important; 
        }
    /* section01 */
      #section00 {
        background-image: url(../graphics/header-002.png);
        background-size: contain;
        background-repeat: no-repeat;
        height: 100vh !important;
        width: 100vw;
        object-fit: cover;
        background-position: center;
      }
      #section00 .text-bottom{
        padding-bottom: 70px;
      }

    /* section01 */

    /* section01 */
      #section01{
        height: auto !important;
      }
      #section01-img{
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-top: 0;
      }
      .sec01-flex{
        display: flex;
        flex-direction: row;
        margin-top: 100px;
      }
      .sec01-flex-elmnt .num {
          font-size: 89px;
          font-weight: 200;
          text-align: right;
          color: #a20014;
          margin-bottom: 18px;
      }
      .sec01-flex-elmnt .text {
        font-size: 18px;
        font-weight: 800;
        color: #564c4c;
        width: 167px;
        margin-top: 27px;
      }
      .sec01-flex-elmnt{
        margin-left: 30px;
      }
    /* section01 */

    /* section02 */
    #section02{
      height: auto !important;
    }
      .sec02-num{
          font-size: 71px;
          font-weight: 200;
          text-align: right;
          color: #a20014;
          margin-bottom: 27px;
          text-align: center;
      }
      #section02{
        height: auto !important;
      }
      
    /* section02*/

      /* section04*/
        #section04{
          background-image: url(../graphics/img-0515.jpg);
          background-size: contain;
          background-repeat: no-repeat;
          background-attachment: fixed;
          height: 50vh;
        }
    /* section04*/
          
    /* section05*/
          .min-img-top{
            margin-top: -100px;
          }
          #section05{
            height: auto !important;
          }
    /* section05*/


    /* section13 */
        .graphics-Head{
            font-size: 19px;
            font-weight: 800;
            color: #564c4c;
            margin-bottom: 10px;
        }
        /* .p-progress-bar .progress-number{
            opacity: 0;
            display: none;
        }
        .p-progress-bar .progress-type{
            opacity: 0;
            display: none;
        }
        .p-progress-bar{
            height: 50%;
        }
        .container-bars-num01{
            font-size: 19px;
            color: #d8d8d8;
            margin-left: 10px;
        }
        .container-bars-num02{
            font-size: 19px;
            font-weight: bold;
            margin-right: 10px;
        }
        .p-progress-bar-container{
            width: auto;
            height: auto;
        }
        .container-bars{
            display: flex;
            flex-direction: row;
            align-items: baseline;
        }
        .p-progress-bar{
            background-color:#d8d8d8;
        } */
        .color-p-g {
            background-color: #c2c2c2 !important;
          }
          
          @keyframes slideInFromLeft {
            0% {
              transform: translateX(0);
            }
          
            100% {
              transform: translateX(100%);
            }
          }
          
          .progressfade {
            animation: 1s ease-out 0s 1 slideInFromLeft;
          }
          
        .des03-name{
            font-size: 16px;
            font-weight: 800;
            color: #564c4c;
            margin-top: 17px;
        }
        .des03-name03{
            font-size: 23px;
        }
        .chartText{
            text-align: center;
            color: #1f1f1f;
            font-weight: bold;
            font-size: 15px;
            margin-bottom: 13px;
        }
        .chartNUM {
            color: #a20014;
            z-index: 999999999;
            position: absolute;
            top: 50%;
            font-size: 61px;
            font-weight: 200;
            /* font-size: 33px; */
            left: 50%;
            transform: translate(-46%,-16%);
        }
        .chartContainer {
            position: relative;
        }
    /* section13 */

    /* mobile custom  */
        #header-mobile {
            height: 100vh;
            display: none;
        }

    @media (max-width: 720px) {
        #header-video {display: none;}
        #header-mobile {display: block;}
        .sec01-num{
          font-size: 60px;
        }
    }
    @media (max-width: 480px) {
      .video-promo-head{
        font-size: 13px;
      }
      #section00 h2{
        width: 100%;
      }
      #section00{
        background-position: top;
      }
        .logo2 {
            right: 10px;
            top: 10px;
        }
        .logopic {
          width: 60px;
        }
        .sec01-flex {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 30px;
        }
        .sec01-flex-elmnt {
          margin-left: 0;
          margin-bottom: 22px;
        }
        .sec01-flex-elmnt .text {
          font-size: 16px;
          font-weight: 800;
          /* margin-top: 14px; */
          color: #564c4c;
          width: 100%;
        }
        .sec01-flex-elmnt .num {
          font-size: 88px;
          font-weight: 200;
          text-align: center;
          color: #a20014;
          margin-bottom: 24px;
        }
        .counter span {
          font-size: 62px;
          line-height: 23px;
        }
        .sec02-num {
          font-size: 62px;
          font-weight: 200;
          text-align: center;
          color: #a20014;
          margin-bottom: 10px;
          margin-top: 34px;
        }
    }
    @media screen and (max-width: 1200px)  {
      .sec02-num {
        font-size: 57px;
      }
    }

    @media screen and (max-width: 800px)  {
      .sec02-num {
        margin-bottom: 15px;
        margin-top: 30px;
      }
        #myChart02{
          margin: 0 auto;
        }
        .mobilesec{
            display: block;
        }
        .desktopsec{
            display: none;
        }
        .scrolldown-animation{
            bottom: -48px;
        }
        #mob{
            height: 100vh !important;
        }
        .quote-cont-sec01{
          margin-top: 25px;
        }
        .sec01-flex{
          text-align: center;
        }
        .quote-cont-sec01 p {
          font-size: 20px;
          font-weight: 300;
      }
      .sec01-num{
        margin-bottom: 13px;
      }
    }

        .p-progress-bar{
            height: 25px;
        }
        .p-progress-bar .progress-number span{
            display: none;
        }
        .p-progress-bar .progress-type{
            display: none;
        }
        .year-bar{
            font-size: 19px;
            font-weight: bold;
            color: #d8d8d8;
            margin-left: 10px;
        }
        .year-bar-red{
            font-size: 19px;
            font-weight: bold;
            color: #71010f;
            margin-left: 10px;
        }
        .desc-bar{
          font-size: 19px;
          font-weight: bold;
          margin-right: 10px;
          color: #564c4c;
        }
        .prog-bar-container{
          display: flex;
          align-items: center;
        }



.animatable {
    /* initially hide animatable objects */
    visibility: hidden;
  
    /* initially pause animatable objects their animations */
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }
  
  /* show objects being animated */
  .animated {
    visibility: visible;
  
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
  
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
  
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -ms-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
  }
  
  
  @keyframes slideInFromLeft {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  .animated .progressfade {
    /* This section calls the slideInFromLeft animation we defined above */
    animation: 1s ease-out 0s 1 slideInFromLeft;
  
  }
  .animated.animationDelay{
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
  }
  .animated.animationDelayMed{
    animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
  }
  .animated.animationDelayLong{
    animation-delay:1.6s;
    -webkit-animation-delay:1.6s;
  }