/* Selector  */

* { margin: 0;  padding: 0;}
body { font-family: Candara, Verdana;century gothic; color: #5D5D5D; font-size: 100%; background: #F5F5F5; background-repeat: repeat;}
img { border: 3px solid #adabab; width:100%; margin: 1.25% ;}
h1 { font-size: 60px; text-align: center; color: #444; letter-spacing: 10px; margin: 20px 0 0 0; padding: 0;}
h2 { font-size: 30px; margin: 0 0 0 0; color: #aaa; padding: 0; letter-spacing: -1px; text-align: center;}
h3 { font-size: 14px; margin: 0 0 15px 0; }
p { padding: 0 0 20px 0; line-height: 1.7em; text-align: justify; font-family: Candara, Verdana,century gothic; font-size: 100%; }
a, a:hover { outline: none; text-decoration: underline; font: normal 100% 'Candara', Verdana,century gothic; text-align: center; color: #3C3F42;}

/* ID  */
#wrap {	width: 95%; height:100%; max-width: 830px; padding: 25px 25px 25px 25px; margin: 50px auto; margin-bottom: 50px; background:#f5f5f5  ; font-size: 100%; font-family:Candara, Verdana;  background-color: #FFF ; border: 5px solid #A9A9A9; border-radius: 15px;}
#header { width: 100%; background: #FFF; height: auto; font-size: 100%; }
#body { width: 100%; margin: 0 auto 0 auto; padding: 10px 20px 20px 20px; background: #fff repeat-y; border: 2px solid #FFF; font-size: 100%; } 
#half { width: 35%; margin: 0 auto 0 auto; padding: 10px 20px 20px 20px; background: #F6F6F0 repeat-y; border: 3px double #6F7378; border-style: double; font-size: 100%; } 
#footer { clear: both; border-top: 5px #eee solid; margin: 30px 0 20px 0; color: #bbb; text-align: center; }
#footer p { font-size: 18px; margin: 10px 0 0 0; text-align: center;}
#contentboxlight {  background-color: #f5f5f5; border: 2px #e5e5e5 solid; padding: 20px; text-align: left; }
#contentboxlight p { font-size: 18px; color: #888; margin: 0; line-height: 26px; }
#contentboxlight p span { color: #555; }
#contentboxdark { background: #e5e5e5 ; height: auto; border: 2px solid #bebebe; font-size: 100%; padding: 20px;}


/* Class  */  

.left { float: left; width: auto; margin-right: 10px;}
.right { float: right; width: auto; margin-left: 10px;}
.center { display: block; text-align: center; margin: 20px auto;}

* {box-sizing: border-box;} body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: middle; max-width: 306px; height: auto;}

.nocopy { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.border {border-style: solid; border-width: 1px; border-color: #000000;}
.slideshow-container { max-width: 400px;  position: relative;  margin: auto;}
.active {  background-color: #717171;}
.separator { width: 100%; height: 0;  border-top: 1px solid #D9D5CF;  border-bottom: 1px solid #FFF; margin: 0 0 20px 0;}
.button { background-color: #F6F6F0; border: 3px solid #b8b8b8; color: #5D5D5D; padding: 8px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px; margin: 10px;}
.container{ width: 26%; margin: 0% 3% 0% 3%; float: left; text-align:center;}
.line { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #ccc; display: inline-block; width:100%;}
.footer { width:50%; height: 60px;  background-color: #F6F6F0; border: 3px double #6F7378; color: #5D5D5D; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px; margin: 20px;}

div.gallery { display: flex; flex-wrap: wrap; justify-content: flex-start; justify-content: center; align-items: center;}
div.gallery-item { margin: 5px; width: 216px; }
div.gallery-item img { width: 100%; height: auto; }
div.gallery-item div.desc { padding: 5px; text-align: center; }

.contentboxlight {  background-color: #f5f5f5; border: 2px #e5e5e5 solid; padding: 20px; text-align: left; font-size: 18px; color: #888; margin: 0; line-height: 26px; color: #555;}
.contentboxdark { background: #e5e5e5 ; height: auto; border: 2px solid #bebebe; font-size: 100%; padding: 20px;}