@media (min-width: 320px) and (max-width: 767px) {
    h1 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 12px; font-weight: normal; line-height: 14px; margin: auto; }
    h2 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 10px; font-weight: normal; line-height: 12px; margin: auto; }
    h3 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 8px; font-weight: normal; line-height: 10px; margin: auto; }
    h4 { color: #FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 5px; font-weight: 400; line-height: 7px; margin: auto; }
    
    .subheader { font-size: 7px; font-weight: 300; color: #FFFFFF; margin: auto; }

  }
@media (min-width: 768px) and (max-width: 1280px) {
    h1 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 18px; font-weight: normal; line-height: 21px; margin: auto; }
    h2 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 14px; font-weight: normal; line-height: 17px; margin: auto; }
    h3 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 11px; font-weight: normal; line-height: 14px; margin: auto; }    
    h4 { color: #FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 7px; font-weight: 400; line-height: 10px; margin: auto; }
    
    .subheader { font-size: 13px; font-weight: 300; color: #FFFFFF; margin: auto; }
  }
@media screen and (min-width: 1281px) {
    h1 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 36px; font-weight: normal; line-height: 40px; margin: auto; }
    h2 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 28px; font-weight: normal; line-height: 32px; margin: auto; }
    h3 { color: #FFFFFF; font-family: 'Trocchi', serif; font-size: 22px; font-weight: normal; line-height: 26px; margin: auto; }    
    h4 { color: #FFFFFF; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; margin: auto }
    .subheader { font-size: 26px; font-weight: 300; color: #FFFFFF; margin: auto; }
    
  }