/* main.css v0.1 | @richrrd | 2023.02.06 */

/* Typogrpahy */

h1 { font: 6em/1em 'SF Pro Display', sans-serif; font-weight: 500; text-align: left; margin: 60px 0 60px; color: #555; padding: 0; clear: both; }
h2 { font: 3.33em/1.1em 'SF Pro Display', sans-serif; color: #555; text-align: left; font-weight: 400; margin: 10px 0 60px; max-width: 600px; }
h3 { font: 2.1em/1.1em 'SF Pro Display', sans-serif; font-weight: 400; margin: 0 0 25px 0; padding-bottom: 20px; color: #555; max-width: 600px; }
h4 { font: italic 1.4375em/1.087em 'SF Pro Display', serif; margin: 0 0 15px 0; }
h5 { font: 0.9375em/1.4em 'SF Pro Display', sans-serif; }
p { font-weight: 400; margin: 0 auto 20px; font: 1.6em/1.3em 'SF Pro Display', sans-serif; color: #555; }

.light-text { color: #848484; }
.lightest-text { color: #B6B6B6; }

/* General links */
a { margin: 0; color: rgba(29, 139, 240, 0.7); -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }
a:visited { margin: 0; color: rgba(29, 139, 240, 0.7); -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; }
a:hover { color: #1d8bf1; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease;}

/* Main layout */

#logo { float: left; margin: 3px 0 0 0; padding: 0; }
#logo img { width: 65px }
#availability { background-color: #FEE95D;  margin: 0; padding: 10px 20px; border-radius: 1000px; float: right; }
#availability p { font: 0.875em/1em 'SF Pro Display', sans-serif; font-weight: 300; color: #555; padding: 0; margin: 0; }
#availability a, a:visited { text-decoration: underline; margin: 0; color: #515151; }
#availability a:hover { color: #555; text-decoration: underline; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -ms-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease;}


header { background-color: #FFE11A; margin: 0; padding: 20px; border-top-color: #F2D300; border-bottom-color: #fff; border-style: solid; border-width: 2px 0; }
.full-width { max-width: 640px; margin: 0 auto; }
section { max-width: 640px; margin: 0 auto; }


.clear {clear: both;}


section { padding: 20px; margin: 0 auto; }


/* Framework */
#framework { border-top: #e7e7e7 1px solid; margin-top: 50px; }
#framework img { width: 200px; }
#framework p { font: 1.1em/1.35em 'SF Pro Display', sans-serif; font-weight: 300; padding:0; margin: 0 0 15px 0; color: #555; max-width: 600px; }

/* Footer */
footer { background-color: #f7f7f7; padding: 30px 20px; margin-top: 30px; }
footer p { font: 0.9em/1.3em 'SF Pro Display', sans-serif; font-weight: 300; margin: 0 auto; padding: 0; color: #929292;  }






/* Queries 

@media (max-width: 320px) {
	h1 {  }
	h2 {  }
}

@media (max-width: 480px) {
}

@media (min-width: 321px) and (max-width: 480px) {
	h1 { font-size: 4em; }
	h2 { font-size: 2em;}
}
*/
@media (max-width: 600px) {
	h1 { font-size: 5em; }
	h2 { font-size: 2.5em; }
	h3 { font-size: 2em; }

	#framework-right { float: left; max-width: 250px; margin: 30px 0px 0px 0px; }
}



@media (max-width: 768px) {

}