/**
 * Follow the Style Guide for FLL -
 *  https://www.dropbox.com/s/o5s3ldojwrits5c/FLL-UI-style-guide.pdf?dl=0
 *
 * Font size following rem - https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
 *
 * px to rem converter -> x px / 10 = y rem 
 *     for example: 16 px = 1.6 rem
 *
 */

/** COLOR PALETTE **/
.bg-fll, .bg-challenge {
	background-color: #ed1c24;
}

.bg-discover {
	background-color: #662D91;
}

.bg-explore {
	background-color: #00A651;
}

footer, .bg-dark {
	background-color: #231f20!important;
	color: white;
}

.bg-primary {
	background-color: #f6f6f6!important;
}

.bg-secondary {
	background-color: #F2F2F2!important;
}


/** TYPOGRAPHY **/
html {
	font-size: 62.5%;
}

body {
	font-size: 1.6rem;
	color: #4d4d4d;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

h1 {
	font-size: 5.0rem;
	line-height: 6.5rem;
	font-weight: 700;
	color: white;
}

nav {
	font-size: 1.45rem;
}

h2 {
	font-size: 2.7rem;
	line-height: 4rem;
	font-weight: 700;
	margin-bottom: 20px;
}

h3 {
	font-size: 2.0rem;
	font-weight: 500;
}

p {
 	font-size: 1.6rem;
 	line-height: 3rem;
}

.fll-text, .challenge-text {
	color: #ED1C24;
}

.discover-text {
	color: #662D91;
}

.explore-text {
	color: #00A651;
}

.white-label {
	font-size: 1.0rem;
	color: #ffffff;

}

.dark-label {
	font-size: 1.0rem;
	font-family: 'Open Sans', sans-serif;
}

.label {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.0rem;
	color: #ffffff;
}

.hn {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.hn-bd {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
}

.hn-md {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
}

.hn-lt {
	font-family: 'Roboto', sans-serif;
	font-weight: 100;
}

.hn-ltcn {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.os {	
	font-family: 'Open Sans', sans-serif;
}
/** UI ELEMENTS **/
.button {
	font-weight: 500;
	text-align: center;
	font-size: 1.4rem;
	padding: 10px 20px;
	margin-top: 20px;
	display: inline-block;
}

a.button {
	color: #fff;
	text-decoration: none;
}

.button.bg-fll:hover, .button.bg-fll.active,
.button.bg-challenge:hover, .button.bg-challenge.active  {
	background: #BC1E31;
	text-decoration: none;
}

.button.bg-explore:hover, .button.bg-explore.active {
	background: #008638;
	text-decoration: none;
}

.button.bg-discover:hover, .button.bg-discover.active {
	background: #8557A7;
	text-decoration: none;
}


a.button.outline {
	background: transparent;
	border: 2px solid white;
}

a.button.outline:hover, a.button.outline.active {
	background: #BC1E31;
	text-decoration: none;
}

a.button.outline-fll {
	background: transparent;
	border: 2px solid #ED1C24;
	color: #ED1C24;
}

a.button.outline-fll:hover, a.button.outline-fll.active {
	background: #ED1C24;
	color: white;
	text-decoration: none;
}


@media (max-width: 768px) {
	.button {
		width: 100%;
	}
}