.dark-bgc{
  background-color: #425E76;
}

#vue-hero{
  padding: 100px 0 150px 0;
}

.head-logo{
  width: 100px;
  height: auto;
}

.text-thin-heading{
  font-size: 65px !important;
  font-weight: 200;
}

.text-thin-subhead{
  font-weight: 200;
  font-size: 40px;
}

.text-note{
  font-size: 18px !important;
}

.text-white{
  color: #fff !important;
}

.text-cyan{
  color: #3BBDEA;
}

.text-center{
  text-align: center;
}

.padding-10{
  padding: 10px;
}

.padding-bottom-20{
  padding-bottom: 20px;
}

.padding-bottom-40{
  padding-bottom: 40px;
}

.padding-bottom-70{
  padding-bottom: 70px;
}

.padding-top-70{
  padding-top: 70px;
}

.padding-top-40{
  padding-top: 40px;
}

/* Vue Performace Flexbox */
.vue-returns{
  display: flex;
  flex-direction: row;
}

.vue-perf{
  flex: 25%;
}

.vue-perf:not(:first-child){
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

/* Charts CSS */

.graph-container{
  background-color: #fff;
}

/*CSS Breakpoints*/

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 767px) {
  #vue-hero{
    padding-bottom: 50px !important;
  }
  
  .vue-returns{
    display: none;
  }
  
  .performances-container{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    text-align: center
  }

  .vue-performance{
    align-items: center;
    border-top: 1px solid rgb(202 219 226);
  }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .performances-container{
    display: none;
}