footer { display: none;}
body {
    background-color: white;
    font-family: 'Open Sans', sans-serif;

}
a:link,
a:visited,
a:hover,
a:active {
    color: rgb(32, 57, 157);
}
div, section, article {
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
    font-family: Roboto, sans-serif;
}

/* ===================================
   main                               
   =================================== */

section h2 {
    margin-top: 0;
}
h1 {
    color: rgb(191, 24, 34);
}
p.tagline {
    font-style: italic;
    font-size: 125%;

}
.primary-topics {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.primary-topics section {
    background-color: rgb(241, 245, 247);
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    flex-basis: 45%;
    flex-grow: 0;
    flex-shrink: 0;
}
.primary-topics section {
    background-repeat: no-repeat;
    background-position: top 10px right 10px;
}
.primary-topics section.training {
    background-image: url(../images/bg_training.svg);
}
.primary-topics  section.certification {     
    background-image: url(../images/bg_certification.svg);
}
.primary-topics  section.assistance {     
    background-image: url(../images/bg_assistance.svg);
}
.primary-topics  section.evaluation {     
    background-image: url(../images/bg_evaluation.svg);
}

/* ===================================
   header                               
   =================================== */

   header h2.logo {
       background-image: url(../images/logo.png);
       background-repeat: no-repeat;
       background-size: 306px 80px;
       height: 80px;
       width: 306px;
       text-indent: -9999em;
       float: left;
   }

   header nav {
       float: right;
       margin-top: 50px;
   }
   header nav ul {
     list-style-type: none;
     margin: 0;
     padding: 0;

   }
header nav ul li {
    display: inline;
    padding-left: 2rem;
}
header nav a:link,
header nav a:visited,
header nav a:active {
    text-decoration: none;
    color: rgb(51,51, 51);
}
header nav a:hover {
    text-decoration: underline;
}
header .header-hero { 
    clear: both;
    background-image: url(../images/home.jpg);
    background-repeat: no-repeat;
    height: 240px;
    background-position-x: 50%;
    background-size: cover;
    padding-top: 2rem;
}
.header-hero ul {
    float: left;

    background-color:rgb(240,240,240, 0.75);
    width: 30%;
    padding: 1rem;
    margin-left: 1rem;
    list-style-type: none;
}
.header-hero ul a {
    display: block;
    padding: 0.25em;
    border: thin dotted rgb(32, 57, 157);
    border-radius: 5px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}