.slidearea {
  text-align: center;
  height:  100%;
  max-width : 100%;
  background-color: #909090;
}
.tableforslide {
  margin: auto;
  text-align: center;
  height:  100%;
  max-width : 100%;
  background-color: #009090;
}
.slidepicture {
 /* background-color: #ffd800; */
 background-color: #909090;
 width: 900px;
 max-width: 100%;
 text-align: center;
 vertical-align: bottom;
}
.slidetable {
 max-width: 100%;  
 height: 60%;
 background-color: #909090;
 vertical-align: top;
 }
.leftcell {
  width:  5%;   
  height:  auto;
  background-position: center;
  opacity: 0.9;
  text-align: right;
  background-color: #909090;
 }
.centrecell {
  background-color: #909090;
  max-height: 100%;
  max-width: 90%;
  }

.rightcell {
  width:  5%;   
  height:  auto;
  background-color: #909090;
  opacity: 0.9;
}

.headertext { 
    vertical-align: text-top;
    color: #E9E9E9;
    background-color: #4EB1BA;
    left:  0%;
    max-width: 100%;
    text-align: center;
    font-family: Tahoma;
    font-size: medium;
    font-weight: 700;
    position: static;
    top: 0%;
}
.toptext {
    position: static;
    max-width: 100%;
    height: 5%;
    opacity: 1;
    color: #4EB1BA;
    background-color: #222930;
}
.bottomtext {    
    vertical-align: baseline;
    color: #FFFFFF;
    background-color: #4EB1BA;
    max-width: 100%;
    max-height: 15%;
    text-align: match-parent;
    bottom: auto;
}

.middletext {
    width: 100%;
    vertical-align: top;
    opacity: 1;
    color: #222930;
    background-color: #E9E9E9;
    
}
.imagediv {
    text-align: center;
    margin: auto;
    background-color: #909090;  
}
.slideimage {
  margin: auto;  
  background-color: #909090;
  text-align: center;
  width: 400px;
  max-height: 60%;
  max-width: 100%;
  /*
  display: block;
  height: 400px;
  width: 400px;
  max-width: 200px;
  */
 }
.slideimageportrait {
  margin: auto;  
  background-color: #009090;
  text-align: center;
  height: 280px;
  max-width: 100%;
  /*
  display: block;
  height: 400px;
  width: 400px;
  max-width: 200px;
  */
 }
.slideimagelandscape {
  margin: auto;  
  background-color: #909000;
  text-align: center;
  width: 500px;
  max-height: 300px;
 /* max-height: 100%; */  
  /*
  display: block;
  height: 400px;
  width: 400px;
  max-width: 200px;
  */
 }





.imagespacer {
  height: 100%;
  /*
  display: block;
  height: 400px;
  width: 400px;
  max-width: 200px;
  */
 }

.innerslidetable {
  width: 100%;
  height: 100%;  
  background-color: #909090;
}
.columnsl {
  height: 60%; 
  width: 2.5%;
  background-color: #909090;
}
.columnsc {
  vertical-align: central;
  height: 60%;
  width: 95%;
  text-align: center;
  background-color: #909090;
}
.columnsr {
  height: 60%; 
  width: 2.5%;
  background-color: #909090;
}





















.slidetext {
    position: absolute;
    left:  35%; 
    top: 40%;
    width: 30%;
    opacity: 0.8;
    color: #ffffff;
    background-color: #808080;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {background-color:#000000; left:60%;}
    100%  {background-color:#808080; left:35%;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:#000000; left:60%;}
    100%  {background-color:#808080; left:35%;}
}





.slideimageleft {
  opacity: 1;
 }
.slideimageright {
  opacity: 0.2;
  object-fit: cover; 
  object-position: 0 0; /* positioned top left of the content box */
 }