.headline {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 900;
  font-size: 30px;
  line-height: 32px;
}

.articlequote {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
}

.article {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
}

.thumbnaildescbold {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
}

.thumbnaildescreg {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 12px;
}

.sdgtext {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
}

.button {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  line-height: 15px;
}



Thin 100
Light 300
Regular 400
Medium 500
Bold 700
Black 900




.thumbnail {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
}






.midloc {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 26px;
}

.smallloc {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
}

.title {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  line-height: 22px;
}



.gradient{background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,212,255,0) 100%)}

.shadow {
  -webkit-filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, .3));
  filter: drop-shadow( 0px 0px 4px rgba(0, 0, 0, .3));
}

.shadow2 {
  -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, .3));
  filter: drop-shadow( 0px 0px 2px rgba(0, 0, 0, .3));
}

.whiteshadow {
  -webkit-filter: drop-shadow( 0px 0px 5px rgba(0, 0, 0, 1));
  filter: drop-shadow( 0px 0px 5px rgba(255, 255, 255, 1));
}

.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

.3d {
  background: #000;
  color: #575757;
  text-align: center;
  height: 2.5em;
  width: 4em;
  vertical-align: middle;
  line-height: 2.5em;
  border-bottom: 1px solid #060606;
  position: relative;
  display: block;
  text-decoration: none;
  box-shadow: -2em 1.5em 0 #e1e1e1;
  transition: all .25s linear;
  
  &:hover {
    background: #ff6e42;
    color: #fffcfb;
    transform: translate(.9em, -.9em);
    transition: all .25s linear;
    box-shadow: -2em 2em 0 #e1e1e1;
    
    &:before, 
    &:after { 
      transition: all .20s linear; 
    }
    
    &:before {
      background: #b65234;
      width: 1em;
      top: .5em;
      left: -1em;
    }
    
    &:after {
      background: #b65234;
      width: 1em;
      bottom: -2.5em;
      left: 1em;
      height: 4em;
    }
  }
  
  &:before, 
  &:after {
    content: '';
    position: absolute;
    transition: all .25s linear;
    width: .5em;
  }

  &:after {
    height: 4em;
    background: #181818;
    bottom: -2.25em;
    left: 1.5em;
    transform: rotate(90deg) skew(0,45deg);
  }
  
  &:before {
    height: 2.5em;
    background: #121212;
    top: .25em;
    left: -.5em;
    transform: skewY(-45deg);
  }
}