/* Webfonts in use:
    VollkornRegular, VollkornSemiBold, VollkornBold
*/
/* FontAwesome:
   Brands: font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;
   Light: font-family:"Font Awesome 5 Pro"; font-style:normal; font-weight:300;
   Reg: font-family:"Font Awesome 5 Pro"; font-style:normal; font-weight:400;
   Bold: font-family:"Font Awesome 5 Pro"; font-style:normal; font-weight:900;
*/

* {box-sizing:border-box;}
html {height:100.2%; font-size: 62.5%;}
body {font-size:18px; font-size:1.8rem; font-family:VollkornRegular, sans-serif; color:#6e6e6e;}
header, main, footer {max-width:1170px; margin:0 auto; padding:0 15px;}
header {padding:42px 15px 70px;}
main {padding:68px 15px;}
footer {padding:30px 15px;}
hr {margin:0; border:none; border-bottom:solid 2px #e2e2e2;}
#logo {display:block; width:350px; height:67px; margin:0 auto;}
#logo img {width:100%; height:auto;}
h1 {margin-top:0; font-size:24px; font-size:2.4rem; color:#666; font-family:VollkornBold, sans-serif;}
h3 {margin-top:0; margin-bottom:10px; font-size:18px; font-size:1.8rem; color:#666; font-family:VollkornBold, sans-serif;}
a {color:#901406; text-decoration:none;}
a:hover {text-decoration:underline;}

#mainnav {margin-top:50px; text-align:center;}
#mainnav ul {list-style-type:none; padding:0; margin:0;}
#mainnav li {display:inline-block;}
#mainnav a {margin-right:46px; color:#666666; font-size:20px; font-size:2rem; text-decoration:none;}
#mainnav li:last-child a {margin-right:0;}
#mainnav a.act,
#mainnav a:hover {color:#901406; text-decoration:underline;}
#mainnav a img {margin-right:10px;}
#menbtn {display:none;}

main ul {padding:0 0 0 21px; margin:0; list-style-image: url('../img/bullet.png');}
main ul li {margin-bottom:12px;}
.center {margin:0; padding:0 45px; font-size:20px; font-size:2rem; text-align:center;}

.accordion {margin-bottom:30px; font-size:18px; font-size:1.8rem;}
.accordion h3 {font-size:24px; font-size:2.4rem; color:#666; font-family:VollkornSemiBold, sans-serif; font-weight:normal;}
.act-accord h3,
.accordion h3:hover {color:#901406; cursor:pointer;}
.accordion h3::before {margin-right:14px; font-size:18px; font-family:"Font Awesome 5 Pro"; font-style:normal; font-weight:300;}
.act-accord h3::before {}
.accordion .accord-wrap {display:none;}
.accordion:last-child {margin-bottom:0;}

#about main h2 {width:20%; margin:0; font-size:24px; font-size:2.4rem; font-family:VollkornSemiBold, sans-serif;}

#metanav {text-align:center;}
#metanav ul {list-style-type:none; padding:0; margin:0;}
#metanav a {color:#666666; font-size:16px; font-size:1.6rem; text-decoration:none;}
#metanav a.act,
#metanav a:hover {color:#901406; text-decoration:underline;}

/* start with mobile optimazing */
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
    header {display:flex; flex-wrap:wrap; justify-content:space-between; padding:30px 15px;}
    main {padding:30px 15px;}
    #logo {margin:0; width:260px; height:50px;}
    #logo img {width:100%; height:auto;}
    #mainnav {display:none; width:100%; margin:30px 0 0;}
    #mainnav li {display:block; margin-bottom:15px; text-align:center; margin-right:0;}
    #mainnav li a {margin-right:0; font-size:20px; font-size: 2rem;}
    #menbtn {display:block; margin-top:15px; font-size:34px; font-size:3.4rem; line-height:22px; cursor:pointer;}
    #about main {display:block;}
    #about main h2 {width:100%; margin-bottom:18px;}
    #about main #right {width:100%;}
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 480px) {
    .center {padding:0;}
}
@media only screen and (max-width: 360px) {
    footer,
    header {padding:20px 15px;}
    #logo {width:200px; height:38px;}
    #menbtn {margin-top:5px;}
}