body {min-height: 100vh;min-height: 100dvh;margin:0;padding:0;display: flex;flex-direction: column;background:#F7F9FB;text-align:center;font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;font-weight:400;color:#800000}
header {text-align:left;margin-left:3%;margin-top:1%}
header span {padding:10px;background:#687864;color:white;font-size:1.2em;text-align:left}
header span a {color:white;text-decoration:none}
.float-container {margin-bottom:12%;letter-spacing:1px;margin-top:2%}
.float-child {width:50%;float:left;padding:0} 
.float-child a {font-family:Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif} 
.float-child em {color:white;font-family:"Script MT Bold,Segoe script"}
.language {text-align:right;margin: 2px 2em 0 auto}
.language a {text-decoration:none;padding:0.5%;color:#800000}
h1 {font-size:1.8em;color:#800000;font-weight:300;text-align:center;font-variant-caps:all-small-caps}
article {line-height:1.5;font-size:1.2em;flex-grow: 1;}
article p {margin:5% auto;width:85%}
article a {text-decoration:none}
address {font-style:normal;color:#800000}
address span {font-style:normal;border:1px #5085A5 solid;padding:5px;margin: 0;}
address span a {color:#800000}
footer {background-color:#5085A5;height:5em;position: static;}
footer p {color:white;font-size:1em} 
footer a {color:white;text-decoration:none;}
.row {display:flex;flex-wrap: wrap;padding:0}
.column {flex:50%;max-width:100%}
.column img {vertical-align:middle}
.container {position:relative;width:99%}
.image {display:block;width:100%;height:auto;border:1px white solid}
.color img{filter: grayscale(100%);-webkit-filter:grayscale(100%);-webkit-transition:all 1s ease}
.color img:hover{ filter: grayscale(0%);-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);}
.color1 img{filter: grayscale(25%);-webkit-filter:grayscale(25%);-webkit-transition:all 1s ease}
.color1 img:hover{ filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);}
.text {hyphens:auto;text-align:justify;text-align-last:none;text-wrap:balance;margin:5% auto;width:85%;font-size:0.9em}
a {transition: color .3s ease-in-out, box-shadow .3s ease-in-out;}
a:hover {color: #fff;box-shadow: inset 250px 0 0 0 #687864}
strong {font-weight:600}
.tooltip {position:relative;display:inline-block;cursor:pointer;}
.tooltip .tooltip-text {visibility:hidden;opacity:0; width:160px;background:#687864;color:#fff;text-align:center;border-radius:8px;padding:8px;position:absolute;z-index:1;bottom: 125%;left:50%;transform: translateX(-50%) scale(0.8);transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;box-shadow: 0 6px 14px rgba(0,0,0,0.3);}
.tooltip .tooltip-text::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -6px;border-width: 6px;border-style: solid;border-color: #222 transparent transparent transparent;}
.tooltip:hover .tooltip-text {visibility: visible;opacity: 1;transform: translateX(-50%) scale(1);transition: opacity 0.4s ease, transform 0.4s ease;}

@media only screen and (min-width:480px) {
.column {flex:50%;max-width:50%}
article p {width:80%}
}
 
@media only screen and (min-width:533px){
.float-container {margin-bottom:10%}
article p {width:85%;text-align:center}
.text {margin:2% auto;width:80%}
footer p {color:white;font-size:1em; text-align:right;margin-right:5%} 
}

@media only screen and (min-width:900px){
.column {flex:25%;max-width:25%}
}

@media only screen and (min-width:1024px) {
body {font-weight:200;}
.float-container {margin-bottom:6%;margin-top:0}
.column {flex:25%;max-width:25%}
header {margin:1%}
h1 {font-size:2.2em}
.text {width:75%}
}

@media only screen and (min-width:1382px){
.float-container {margin-bottom:1%}
header {margin:1%}
h1 {font-size:2.8em}
article {line-height:1.5;}
article p {margin:2% auto;width:75%}
}