/* 
Font weight reference values

100 – Thin
200 – Extra Light (Ultra Light)
300 – Light
400 – Normal
500 – Medium
600 – Semi Bold (Demi Bold)
700 – Bold
800 – Extra Bold (Ultra Bold)
900 – Black (Heavy)
*/


.t1-bold{
    font-weight: bold;
    font-size: 6rem;
}
.t1{
    font-weight: normal;
    font-size: 6rem;
}
@media (max-width: 720px){
    .t1-bold{
        font-weight: bold;
        font-size: 4rem;
    }
    .t1{
        font-weight: normal;
        font-size: 4rem;
    }
    
}

.t2-bold{
    font-weight: bold;
    font-size: 5rem;
}
.t2{
    font-weight: normal;
    font-size: 5rem;
}
@media (max-width: 720px){
    .t2-bold{
        font-weight: bold;
        font-size: 3rem;
    }
    .t2{
        font-weight: normal;
        font-size: 3rem;
    }
    
}

.t3-bold{
    font-weight: bold;
    font-size: 4rem;
}
.t3{
    font-weight: normal;
    font-size: 4rem;
}
@media (max-width: 720px){
    .t3-bold{
        font-weight: bold;
        font-size: 2rem;
    }
    .t3{
        font-weight: normal;
        font-size: 2rem;
    }
    
}

.h1-thin{
    font-weight: 100;
    font-size: 3rem;
}
.h1-bold{
    font-weight: bold;
    font-size: 3rem;
}
@media (max-width: 720px){
    .h1-thin{
        font-weight: 100;
        font-size: 2rem;
    }
    .h1-bold{
        font-weight: bold;
        font-size: 2rem;
    }
}

.h2-thin{
    font-weight: 100;
    font-size: 2.5rem;
}
.h2-bold{
    font-weight: bold;
    font-size: 2.5rem;
}
@media (max-width: 720px){
    .h2-thin{
        font-weight: 100;
        font-size: 1.75rem;
    }
    .h2-bold{
        font-weight: bold;
        font-size: 1.75rem;
    }
}

.h3-thin{
    font-weight: 100;
    font-size: 2.25rem;
}
.h3-bold{
    font-weight: bold;
    font-size: 2.25rem;
}
@media (max-width: 720px){
    .h3-thin{
        font-weight: 100;
        font-size: 1.5rem;
    }
    .h3-bold{
        font-weight: bold;
        font-size: 1.5rem;
    }
}

.h4-thin{
    font-weight: 100;
    font-size: 2.0rem;
}
.h4-bold{
    font-weight: bold;
    font-size: 2.0rem;
}
@media (max-width: 720px){
    .h4-thin{
        font-weight: 100;
        font-size: 1.25rem;
    }
    .h4-bold{
        font-weight: bold;
        font-size: 1.25rem;
    }
}

.h5-thin{
    font-weight: 100;
    font-size: 1.75rem;
}
.h5-bold{
    font-weight: bold;
    font-size: 1.75rem;
}
@media (max-width: 720px){
    .h5-thin{
        font-weight: 100;
        font-size: 1.0rem;
    }
    .h5-bold{
        font-weight: bold;
        font-size: 1.0rem;
    }
}

.p-thin{
    font-weight: 100;
    font-size: 1.0rem;
}
.p-bold{
    font-weight: bold;
    font-size: 1.0rem;
}
@media (max-width: 720px){
    .p-thin{
        font-weight: 100;
        font-size: 0.82rem;
    }
    .p-bold{
        font-weight: bold;
        font-size: 0.82rem;
    }
}

.s-thin{
    font-weight: 100;
    font-size: 0.80rem;
}
.s-bold{
    font-weight: bold;
    font-size: 0.80rem;
}
@media (max-width: 720px){
    .s-thin{
        font-weight: 100;
        font-size: 0.60rem;
    }
    .s-bold{
        font-weight: bold;
        font-size: 0.60rem;
    }
}

.label-dark-small{
    font-weight: 400;
    font-size: .90rem;
    color: #000000;
}
.label-light-small{
    font-weight: 400;
    font-size: .90rem;
    color: #FFFFFF;
}
.label-dark-medium{
  font-weight: 350;
  font-size: 1.1rem;
  color: #000000;
}
.label-light-medium{
  font-weight: 350;
  font-size: 1.1rem;
  color: #FFFFFF;
}
.label-dark-large{
  font-weight: 350;
  font-size: 1.35rem;
  color: #000000;
}
.label-light-large{
  font-weight: 350;
  font-size: 1.35rem;
  color: #FFFFFF;
}

.l1-bold{
    font-weight: bold;
    font-size: 1.75rem;
}
.l1-thin{
    font-weight: 100;
    font-size: 1.75rem;
}
@media (max-width: 720px){
    .l1-bold{
        font-weight: bold;
        font-size: 1.5rem;
    }
    .l1-thin{
        font-weight: 100;
        font-size: 1.5rem;
    }
}

.l2-bold{
    font-weight: bold;
    font-size: 1.5rem;
}
.l2-thin{
    font-weight: 100;
    font-size: 1.5rem;
}
@media (max-width: 720px){
    .l2-bold{
        font-weight: bold;
        font-size: 1.25rem;
    }
    .l2-thin{
        font-weight: 100;
        font-size: 1.25rem;
    }
}

.l3-bold{
    font-weight: 550;
    font-size: 1.25rem;
}
.l3-thin{
    font-weight: 100;
    font-size: 1.25rem;
}
@media (max-width: 720px){
    .l3-bold{
        font-weight: bold;
        font-size: 1.0rem;
    }
    .l3-thin{
        font-weight: 100;
        font-size: 1.0rem;
    }
}

.l4-bold{
    font-weight: 550;
    font-size: 1.0rem;
}
.l4-thin{
    font-weight: 100;
    font-size: 1.0rem;
}
@media (max-width: 720px){
    .l4-bold{
        font-weight: bold;
        font-size: 0.85rem;
    }
    .l4-thin{
        font-weight: 100;
        font-size: 0.85rem;
    }
}

.l5-bold{
    font-weight: bold;
    font-size: .75rem;
}
.l5-thin{
    font-weight: 100;
    font-size: .75rem;
}
@media (max-width: 720px){
    .l5-bold{
        font-weight: bold;
        font-size: 0.65rem;
    }
    .l5-thin{
        font-weight: 100;
        font-size: 0.65rem;
    }
}

/** Text styles used on the explorer screen with media queries **/
.exp-t1{
   	font-weight: 350;
   	font-size: 1.25rem;
}

.exp-t2{
   	font-weight: 100;
   	font-size: 1.00rem;
}

@media (max-width: 720px){
	.exp-t1{
    	font-weight: 400;
    	font-size: 0.95rem;
	}
	.exp-t2{
    	font-weight: 100;
    	font-size: 0.85rem;
	}
	
}