/* ======================================================================================= General Settings ======================================================================================= */
.borderBottomLightGrey { border-bottom:1px solid #f1f1f1!important; padding-top:16px!important; padding-bottom:16px!important; }
.barItem { padding:8px 16px; float: left; width: auto; border: none; display: block; outline: 0; }

p.Indented { text-indent: 3em; font-size: 1.2em; }
.title { font-size:1.1em; font-weight: bold; text-indent: 2em; }

.rowPadding:after, .rowPadding:before { content: ""; display: table; clear: both; }
.rowPadding { padding: 0 8px }

.placeHolder { padding: 0.01em 16px; padding-top:32px!important; padding-bottom:32px!important; }
.placeHolder:after, .placeHolder:before { content:""; display:table; clear:both; }

.padding { padding:8px 16px!important }
.padding-16 {padding-top:16px!important; padding-bottom:16px!important }
.padding-32 {padding-top:32px!important; padding-bottom:32px!important }

.displayMiddle { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); -ms-transform:translate(-50%,-50%); }

/* ======================================================================================= Navigation bar logo ======================================================================================= */
.imageLogo { float: left; position: relative; top: 5px; margin-right: 10px; }

/* ======================================================================================= Project Section ======================================================================================= */
.imageTileContainer { position: relative; float:left; width: 33%; padding-left: 16px; padding-right: 16px; margin-bottom:16px!important; }
.container { position: relative; float: left; width: 100%; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);   border: 1px solid grey; overflow: auto; }
.container:hover .overlayFade { opacity: 1; }
.container:hover .overlayFadeGrey { opacity: 1; }
.imageTile { display: block; width: 100%; height: auto; }
.overlayFade, .overlayFadeGrey  { position: absolute; transition: .5s ease; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0;  overflow: auto; }
.overlayFade { background-color: #008CBA; }
.overlayFadeGrey { background-color: #f1f1f1; }
.descriptionText { color: white; font-size: 1em; position: absolute; padding: 10px; }

.General {}
.GRIB {}

/* ======================================================================================= Products Section ======================================================================================= */
.productsContainer { position: relative; float: left; width: 100%; border: 1px solid grey;}
.menuContainer { position: relative; float:left; top: -8px; width: 16%; padding-left: 8px; padding-bottom: 30px; margin-bottom:16px!important; overflow: hidden; }
#menuList { margin: 0; padding: 0; overflow: hidden; }
.menuItem { background: #f1f1f1; margin-bottom: 5px; border: 1px solid #d4d4d4; list-style-type: none; padding: 8px; cursor: pointer; border-radius: 4px;  margin: 10px 1px;  
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24),0 2px 3px 0 rgba(0,0,0,0.19); word-wrap: break-word; 
}
.menuItem:hover { background: DodgerBlue; color: white; font-weight: bold;}
.menuItem:active { background: #008CBA; box-shadow: 0 5px #666; transform: translateY(4px); }

.menuItemSelected { background: #008CBA; color: white; font-weight: bold; margin-bottom: 5px; border: 1px solid #d4d4d4; list-style-type: none; padding: 8px; cursor: pointer; border-radius: 4px;  margin: 10px 1px;  
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.24),0 2px 3px 0 rgba(0,0,0,0.19); word-wrap: break-word; 
}
.menuItemSelected:active { background: #008CBA!important; box-shadow: 0 5px #666; transform: translateY(4px); }
.menuItemSelected:hover { background: DodgerBlue!important; color: white; font-weight: bold;}

.productView { position: relative; float: left;  width: 56%; }
.productsDescription { position: relative; float: left; top: -16px; width: 24%;  margin-bottom:16px!important; margin-right: 2%;  margin-left: 2%;  color: black;  font-size: 1em; word-wrap: break-word; }

.buttonDownload { 
  background-color: #008CBA; border: none; color: white; padding: 10px; text-align: center; border-radius: 4px; 
  text-decoration: none; display: inline-block; font-size: 1em; margin: 10px 20px; cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s;
}

.buttonDownload:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); }

.downloadButtonsContainer { margin: 20px 10px; width: 100%; min-width: 150px; text-align: center; }


/* ================================================================ Slideshow container ======================================================================================= */
.Slides { display: none }
.slideshowContainer {  position: relative; /* margin: auto; */ float: left;  /* max-width: 1000px; */ width: 100%; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.19);  }

/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 1.5em; transition: 0.2s ease; border-radius: 0 3px 3px 0; user-select: none; }
.next { right: 0; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,140,186,0.8); }

/* The dots/bullets/indicators */
.dot { cursor: pointer; height: 1em; width: 1em; margin-top: 1.5em; margin-right: 0.75em; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #008CBA; }

/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.2s; }
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4}  to {opacity: 1} }

/* ======================================================================================= Examples container ======================================================================================= */
.examplesDescription { position: relative; float: left; top: -8px; width: 81%;  margin-bottom:16px!important; margin-left: 2%;  color: black;  font-size: 1.2em; word-wrap: break-word; }
.runButton { padding: 10px 15px; outline: none; border: none; border-radius: 5px; cursor: pointer; list-style-type: none; 
   color: #fff; background-color: #008CBA; box-shadow: 0 9px #999;
   font-size: 1.2em; font-weight: bold; text-decoration: none; text-align: center; vertical-align: middle; word-wrap: break-word;
}
.runButton:hover { background-color: DodgerBlue; }
.runButton:active { background-color: #008CBA; box-shadow: 0 2px #666; transform: translateY(4px);
}




/* ======================================================================================= About & Contact us container ======================================================================================= */
.aboutTextContainer { position: relative; float: left; width: 65%;  overflow: auto; font-size: 1.1em;  padding-right: 10px; top: -16px;}
.addressText { color: blue; word-wrap: break-word; font-size: 1.0em; text-align: center; padding: 10px; }
.contactUsPicture { float:left;  position: relative; top: 0; right: 0; width: 34%; }
.contactUsPicture:hover .overlayFadeGrey { opacity: 1; }
.aboutTextP { text-indent: 2em; word-wrap: break-word; }
.footer { border: 1px solid #d4d4d4; background-color: #f1f1f1; text-align: center; padding: 10px; font-size: 2em; line-height: 14px; border-radius: 4px; margin: 4px; }

@media screen and (max-width: 1000px) {
	.addressText { font-size: 0.8em; }
}

@media screen and (max-width: 800px) {
  .aboutTextContainer { float: left;  width: 100%; font-size: 1em; }
  .contactUsPicture { float: left;  width: 100%; }
  .menuContainer { float: none;  width: 40%; }
  .productsDescription { float: none;  width: 100%; }
  .productView { float: none;  width: 100%; }
   .w3-xxxlarge { font-size: 2.5em!important }
   h3 { font-size: 1.6em; }
   h4 { font-size: 1.4em; }
  .addressText { font-size: 1.2em; }
  .descriptionText { font-size: 0.9em; }
}

@media screen and (max-width: 640px) {
  .aboutTextContainer { float: left;  width: 100%; font-size: 1em; }
  .contactUsPicture { float: left;  width: 100%; }
  .menuContainer { float: none;  width: 50%; }
  .productsDescription { float: none;  width: 100%; }
  .productView { float: none;  width: 100%; }
   .w3-xxxlarge { font-size: 2.2em!important }
   h3 { font-size: 1.5em; }
   h4 { font-size: 1.3em; }
   p.Indented { text-indent: 2.5em; font-size: 1.1em; }
  .addressText { font-size: 1.0em; }
  .descriptionText { font-size: 0.8em; }
  .imageTileContainer, .container, .overlayFade, .overlayFadeGrey { float: none;  width: 100%; }
}


@media screen and (max-width: 480px) {
  .menuContainer { float: none;  width: 100%; }
  .w3-xxxlarge { font-size: 1.5em!important }
  .w3-display-middle{position:absolute; top:8em; left:10em;}
   h3 { font-size: 1.3em; }
   h4 { font-size: 1.1em; }
   p.Indented { text-indent: 2em; font-size: 1.0em; }
  .addressText { font-size: 0.7em; }
  .descriptionText { font-size: 0.7em; }
}