@font-face {
    font-family: 'FlandersArtSans';
    src: url('../font/flandersartsans/FlandersArtSans-Bold.woff2') format('woff2'), url('../font/flandersartsans/FlandersArtSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'FlandersArtSans';
    src: url('../font/flandersartsans/FlandersArtSans-Light.woff2') format('woff2'), url('../font/flandersartsans/FlandersArtSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'FlandersArtSans';
    src: url('../font/flandersartsans/FlandersArtSans-Medium.woff2') format('woff2'), url('../font/flandersartsans/FlandersArtSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'FlandersArtSans';
    src: url('../font/flandersartsans/FlandersArtSans-Regular.woff2') format('woff2'), url('../font/flandersartsans/FlandersArtSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



/* Generic */
html { overflow: auto; font-size: 15px; line-height: 20px; font-weight: 400; font-family: "FlandersArtSans", sans-serif; height: 100%; color: #5E5E5E; -webkit-font-smoothing: antialiased; background: #f5f5f5; }
body { min-height: 100%; margin: 0; background: url(../img/bg.png) 50% 50%; background-size: auto 960px; color: #5E5E5E; /*overflow: auto;*/ }

input, textarea, keygen, select, button { font-size: 1rem; font-family: "FlandersArtSans", sans-serif; font-weight: 400; }

.clear { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }

*:focus { outline: none; }

img { border: 0; }

h1, h2, h3, h4 { color: #176D8A; line-height: 1; }

.container { max-width: 960px; margin: 0 auto; }

.box-container { display: flex; flex-flow: row wrap; }
.box { flex: 1 1 49%; margin: 0 2% 2% 0; padding: 20px; background: #fff; box-sizing: border-box; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); border: 1px solid #f6f6f6; }
.box-full { flex-basis: 100%; }
.box-full,
.box:nth-child(2) { margin-right: 0; }
.box h2 { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }

#title { font-size: 3rem; margin: 25px 0; }

/* Header */
header { background: #fff; padding: 25px 0; border-bottom: 25px solid #176D8A; }
header a { display: inline-block; width: 100%; max-width: 335px; text-decoration: none; }
header a img { width: 100%; height: auto; border: 0; }

/* Footer */
footer { text-align: center; margin: 5px 0 25px; }
footer a {  }

/* Breadcrumbs */
#breadcrumbs { margin-bottom: 25px; color: #176D8A; }
#breadcrumbs a { text-decoration: none; color: #176D8A; }
#breadcrumbs span { font-weight: 600; }

    /* Index */
#index .box {  }
#index-notice p { margin: 0; }
#index-test a { display: block; height: 125px; width: 100%; background: url(../img/bg-test.jpg); background-size: cover; line-height: 125px; color: #fff; font-weight: bold; font-size: 1.5rem; text-align: center; box-sizing: border-box; }

/* Details */
#details .details-tables {  }
#details .details-table { border-top: 5px solid #176D8A; }
/*#details .details-table:last-child { padding-bottom: 0; }*/
#details .details-table h3 { text-transform: capitalize; padding: 25px 0; margin: 0; cursor: pointer; position: relative; }
#details .details-table h3::after { content: ""; transform: translateY(-50%) rotateZ(135deg); width: 8px; height: 8px; border: solid #176D8A; border-width: 0 4px 4px 0; top: 50%; transition: 0.25s; display: block; position: absolute; right: 0; }
#details .details-table .details-content { display: none; }
#details .details-table.active .details-content { display: block; }
#details .details-table.active h3::after { transform: translateY(-50%) rotateZ(45deg); }
#details .details-table .details-content > ul { margin: 0 0 5px; list-style: none; padding: 0; display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-end; }
#details .details-table .details-content > ul li.filter { padding: 5px 10px; border-radius: 2px; margin: 5px 0 5px 10px; background: rgba(23, 109, 138, 0.1); cursor: pointer; }
#details .details-table .details-content > ul li.filter:hover { background: rgba(23, 109, 138, 0.25); }
#details .details-table .details-content > ul li.filter.active { background: rgba(23, 109, 138, 0.75); color: #fff; }
#details table { border: 0; border-collapse: collapse; table-layout: fixed; margin-bottom: 25px; }
#details table thead th { background: #f5f5f5; position: sticky; top: 0; }
#details table tr:hover td { background: rgba(23, 109, 138, 0.1); }
#details table th,
#details table td { border: 1px solid rgba(0, 0, 0, 0.15); padding: 3px 5px; }
#details table th:nth-child(1),
#details table tr.details-table-question-row td:nth-child(1) { width: 30%; }
#details table th:nth-child(2),
#details table tr.details-table-question-row td:nth-child(2),
#details table tr:not(.details-table-question-row) td:nth-child(1) { width: 20%; }
#details table td:nth-child(1n+2) { text-align: center; }
#details table tr.details-table-question-row td { border-top: 2px solid rgba(0, 0, 0, 0.3); }
#details table tr.details-table-question-row td:nth-child(2) { text-align: left; }
#details table tr.details-table-question-row td u { display: block; margin-bottom: 3px; font-size: 0.9rem; }
#details table tr.details-table-question-row td i { display: block; margin-top: 3px; font-size: 0.9rem; }

#details table tr th:nth-child(n+3),
#details table tr.details-table-question-row td:nth-child(n+3),
#details table tr:not(.details-table-question-row) td:nth-child(n+2) { display: none; }

/* Interactive */
#interactive {position: relative; overflow: hidden;padding-top: 90%;}
#interactive iframe { position: absolute; top: 0;left: 0; width: 100%; height: 100%;  border: 0; overflow-x: hidden; }

@media (max-width: 50em) {
    #title {font-size: 1.8rem;}
    .container *, #breadcrumbs {text-align: center;}
    header a img {width: 90%;}
    #interactive {padding-top: 800%;}
}