body {
    font-family: 'Open Sans', sans-serif;
    color: rgb(51, 51, 51);
}
h1,h2,h3,h4,h5,h6 {
    font-family: Roboto, sans-serif;
    color: rgb(191, 24, 34);
}
h1 { font-size: 2.5em;}
h2 { font-size: 1.5em; font-weight: normal;}
header nav {
    font-family: Roboto, sans-serif;
    font-size: 120%;
}
footer {
    display: none;
}

/* ===================================
   header                                */
header h2 img { height: 80px; }

header .header-top {
    display: flex;
}
.header-top h2 {
    flex: 0 0 306px;
    margin: 0; padding: 0;
}
.header-top nav {
    flex: 1 1 100%;
}

header .header-top nav ul {
    list-style-type: none;
    margin: 30px 0 ;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end; 
}
header .header-top nav ul li a:link,
header .header-top nav ul li a:visited {
    padding: 1rem;
    text-decoration: none;
    color:rgb(51, 51, 51);
}
header .header-top nav ul li a:hover,
header .header-top nav ul li a:active {
    color:rgb(191, 24, 34);
    background-color: white;
    text-decoration: underline;
    text-shadow:rgb(51, 51, 51);
}
header .hero {
    background-image: url(../images/home.jpg);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-size: cover;
    min-height: 240px;
    padding: 1rem;
}
.hero-items {
    background-color: rgba(243, 243, 245, 0.5);
    padding: 0.5rem 2rem;
    border-radius: 10px;
    min-width: 20em;
    width: 30%;
    list-style-type: none;
}
.hero-items li {
    margin: 1rem 0.5rem;
    padding: 5px 5px 5px 40px;
    background-repeat: no-repeat;
}
.hero-items li.search {
    background-image: url(../images/bg_search.svg);
}
.hero-items li.introduction {
    background-image: url(../images/bg_intro.svg);
}
.hero-items li.training {
    background-image: url(../images/bg_training.svg);
}
.hero-items li a {
    border: thin solid rgb(32, 57, 157);
    padding: 0.25rem;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 2rem;
}

/* ===================================
   main                                */
   main { padding-right: 5%; padding-left: 5%;}
main section h2 {
    margin-top: 0;
}
main p.tagline {
    font-weight: 125%;
    font-style: italic;
}
main section {
    background-color: rgb(241, 245, 247);
    padding: 0.5em;
    margin: 0.5em;
    border-radius: 10px;
    box-sizing: border-box;
    flex-basis: 45%;
    flex-grow: 0;
    flex-shrink: 0; 
}
main section.training,
main section.certification,
main section.assistance,
main section.evaluation {
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: calc(0% + 10px);
}
main section.training {     
    background-image: url(../images/bg_training.svg);
}
main section.certification {     
    background-image: url(../images/bg_certification.svg);
}
main section.assistance {     
    background-image: url(../images/bg_assistance.svg);
}
main section.evaluation {     
    background-image: url(../images/bg_evaluation.svg);
}
main div.topics {
    display: flex;
}
section.community h2 { color:rgb(51, 51, 51);}
section.community {
    flex-basis: 25%;
    align-self: flex-start;
}
.community nav a {
    display: block;
    border: thin dotted rgb(204, 204, 204);
    background-color: white;
    margin: 0.5rem 0.25rem;
    padding: 0.5rem;

    border-radius: 5px;
}
.community nav a:link,
.community nav a:visited,
.community nav a:hover,
.community nav a:active {
    text-decoration: none;
}
main .home-main-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
main div.secondary-topics {
    display: flex;
}


a:link, a:visited {
    color: rgb(32, 57, 157);
}
a:hover, a:active {
    color: rgb(191, 24, 34);
    background-color: #ffffcc;
}