﻿body {margin:0;padding:0;border:0}
/* Ensure that the padding and border are included in the total width and height of the elements. */
* {
    box-sizing: border-box;
}
/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page,
and other elements will be placed as if the columns does not exist. To prevent this, we will add a style that clears the flow */
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
#header {width:100%;padding:0.3em;background-color:#000080;color:white;text-align:center;font-size:1.0em;opacity:0.80;position:fixed} /*<<< Keeps element on screen while scrolling */
html {font-family: Verdana, arial, "Lucida Sans", sans-serif;font-size:0.9em}
/* html {font-family: "Lucida Sans", sans-serif;} */
b {color:#800000;font-size:14px;word-spacing: 2px;letter-spacing: 2px}
/* h1.center {font-size:25px;text-align:center;color:#999997} - Example html <h1 class="center"> This example will use the h1.center css */
h1 {font-size:20px;color:#999997;text-align:center}
.center-text {text-align:center}
.section {border-top:0.1em solid #46AD00;border-bottom:0.1em solid #46AD00;padding:10px 10px 10px 10px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}
.pict {max-width:100%}
.footer {
    background-color: #000080;
    color: #ffffff;
    text-align: center;
    font-size: 0.8em;
    padding: 0.1em;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0px;
  padding: 0px;
}
.grid-container > div {
  text-align: center;
  padding: 3px 0;
}
/* For desktop: */
/* calculate the percentage for one column: 100% / 12 columns = 8.33% */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
/*.col-3 {display:none}*/
}