/* Selector  */


* { margin: 0;  padding: 0;}
body { font-family: Candara, Verdana;century gothic; color: #5D5D5D; background: #F5F5F5 ; font-size: 100%;}
img { border: 3px solid #adabab; margin: 1.5% 1.5% 1.5% 1.5% ; padding: 2px; width: 100%; height: auto;}
h1 { font: bold underline normal 165% 'Candara', Verdana; color: #A9A9A9; padding: auto; margin:auto; text-align: center; font-size:50px}
h2 { font: bold 125% 'century gothic', arial, sans-serif; color: #8A8989; text-align: center;  }
h3 { font: 80%  'century gothic', Georgia, arial; color: #333; text-align: center; padding-bottom: 1em;}
p { padding: 20px 20px 20px 20px ; 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 110% 'Candara', Verdana,century gothic; text-align: center; color: #707070;}
article { max-width: 600px;  display: grid;  grid-template-columns: 1fr 1fr 1fr; /* fractions */  grid-gap: 5%;  margin: 5% auto;  /* place article in the center!! */}

/* ID  */
#wrap {	width:90%; height:auto; max-width: 830px; padding: 25px 25px 25px 25px ; margin: 50px auto; margin-bottom: 20px; font-size: 100%; font-family:Candara, Verdana;  background-color: #ECECEC ; border: 2px solid #e7e7e7;}
#header { background: #e5e5e5 ; height: auto; border: 2px solid #bebebe; font-size: 100%; padding: 20px;}
#body { width: 100%; background: #E2E2E2 repeat-y; border: 2px solid #FFF; font-size: 100%;} 
#half { width: 50%; margin: 0 auto 0 auto; padding: 10px 20px 20px 20px; background: #F6F6F0 repeat-y; border: 2px solid #FFF; font-size: 100%; float: left;} 
#right { width: 100%; margin: 0 auto 0 auto; background: #F6F6F0; repeat-y; border: 15px solid #gray; font-size: 100%; float: center; text-align: center; padding: 8px; word-spacing: 20px; font-weight: bold;} 

/* Class  */  

.left { float: left; width: auto; margin-right: 0.5%;}
.right { float: right; width: auto; margin-left: 0.5%;}
.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;}
.footer { width:80%; 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;}

.container{ width: 26%; margin: 0% 3% 0% 3%; float: left; text-align:center;}
.line { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #ccc; display: inline-block; width:100%;}

.wrapcontainer { position: relative; margin: auto 10% auto 10%; /* height: 80vh; */ overflow: auto; margin-top: 3%; margin-bottom: auto;   padding: 4% 2% 6% 2%; align: center; font-family: Arial;	border: 15px solid #A9A9A9;	border-radius: 5px; background-color: white; }
.photobox { width: 30%; margin: 0% 5% 0% 5%; float:left;}

.title { font-size: 28px; line-height: 10px; justify-content: center; margin : 10px ; }
.button { background-color: #F6F6F0; border: 3px double #6F7378; color: #5D5D5D; padding: 8px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px; margin: 15px; min-width:18%;}
.smallcontainer{ width: 10%; margin: 0% 2% 0% 2%; float: left; text-align:center;}
.contactbutton { background-color: #F6F6F0; border: 3px double #6F7378; color: #5D5D5D; padding: 8px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; border-radius: 8px; margin: 15px; min-width:8%;}


/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {.container {width: 100%; display: block; }.text {font-size: 11px}} 
@media only screen and (max-width: 700px) {.container {width: 26%; margin: 6px 0;  }}
@media only screen and (max-width: 500px) {.container {width: 100%; display: block; }}