/* grid view */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* default for mobile = portrait */
[class*="col-"] {
  width: 100%;
}

/* for landscape */
@media only screen and (orientation: landscape) {
  .col-1 {
    width: 8.33%;
  }

  .col-2 {
    width: 16.66%;
  }

  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.33%;
  }

  .col-5 {
    width: 41.66%;
  }

  .col-6 {
    width: 50%;
  }

  .col-7 {
    width: 58.33%;
  }

  .col-8 {
    width: 66.66%;
  }

  .col-9 {
    width: 75%;
  }

  .col-10 {
    width: 83.33%;
  }

  .col-11 {
    width: 91.66%;
  }

  .col-12 {
    width: 100%;
  }
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

/* ReSharper disable once CssBrowserCompatibility */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* End grid view */

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

div.header, div.footer {
  background-color: gainsboro;
  padding: 5px;
  font-size: 75%;
  overflow: hidden;
  max-height: 110px;
}

  div.header img {
    width: auto;
    height: 100px;
    margin: 1px;
  }

div.header {
  text-align: center;
  top: 0;
}

div.footer {
  position: fixed;
  bottom: 0;
  margin-left: -5px;
  width: 100%;
}

div.logo {
  background-image: url(images/background_body.jpg);
}

div.main {
}

  div.main iframe {
    border: none;
    width: 100%;
    height: calc(100vh - 110px); /* browser height - header */
    min-height: 750px; /* navbar height */
  }

/* for landscape */
@media only screen and (orientation: landscape) {
  div.main iframe {
    min-height: 750px; /* navbar height */
  }
}

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: gainsboro;
  overflow: hidden;
  display: inline;
  float: left;
}

@media only screen and (orientation: landscape) {
  .nav li {
    display: block;
    float: none;
  }
}

.nav li:hover {
  background-color: yellow;
}

.nav li a {
  text-decoration: none;
  color: red;
}

div.center {
  text-align: center;
}

table {
  width: 100%;
}

td.right30 {
  text-align: right;
  width: 30%
}

td.right20 {
  text-align: right;
  width: 20%
}

td.left50 {
  text-align: left;
  width: 50%
}

td.right50 {
  text-align: right;
  width: 50%
}

td.left80 {
  text-align: left;
  width: 80%
}

td.center100 {
  text-align: center;
  width: 100%
}

p.red {
  color:red
}

a:link {
  color: red;
  text-decoration: none;
}

a:visited {
  color: red;
}

a:hover {
  background-color: yellow;
}

mark {
  background-color: white;
}

div.gallery {
  margin: 5px;
  border: 1px solid gainsboro;
  float: left;
  width: 150px;
  height: 200px;
  background: white;
  overflow: hidden;
}

  div.gallery:hover {
    border: 1px solid red;
  }

  div.gallery img {
    width: auto;
    height: 100px;
  }

div.desc {
  padding: 15px;
  text-align: center;
  background: white;
}

div.gallery2 {
  margin: 5px;
  border: 1px solid gainsboro;
  float: left;
  width: 150px;
  height: 100px;
  background: white;
  overflow: hidden;
}

  div.gallery2:hover {
    border: 1px solid red;
  }

  div.gallery2 img {
    width: auto;
    height: 100px;
  }

.slideshow {  
  margin-left: calc(50% - 315px);
}

div.gallery3 {
  margin: 5px;
  border: 1px solid gainsboro;
  float: left;
  width: 500px;
  height: 500px;
  background: white;
  overflow: hidden;
}

  div.gallery3 img {   
    
  }

.slide {
  /*margin: 5px;*/
  margin-top: 220px;
  float: left;
  overflow: hidden;
  cursor: pointer;
  font-size: 30pt;
  width: 60px;
  height: 60px;
 }

hr.new {
  width: 50%;
}

.responsive {
  max-width: 40%;
  height: auto;
}