/* Global Styles */

div {
  font: 12px Helvetica, Arian, sans-serif;
}

p {
  margin: 8px 0;
}

.hidden {
  display: none;
  visibility: hidden;
}

.hidden-phone {
  display: none !important;
}

.hidden-tablet {
  display: none !important;
}

.hidden-desktop {
  display: none !important;
}

.container {
  width: 100%;
  margin: 0 auto;
}


/* Header Styles */

header {
  clear: both;

  background-color: #ffffff;
}

#title {
  padding: 4px;
  font: bold 24px Helvetica, Arial, sans-serif;
}

nav {
  overflow: hidden;

  padding: 10px 10px 10px 10px;

  background-color: #e5e5e5;
}

.nav-item {
/*  display: inline-block; */
  float: left;

  margin: 4px;
  border: 1px solid #cccccc;
  padding: 4px 10px 4px 10px;
}

.nav-item a {
  font: 12px Helvetica, Arial, sans-serif;
  color: #333333;
  text-decoration: none;
}

/* Band Styles */

.band {
  clear: both;

  width: 100%;

  background: #666666;
}

.main-graphic-container {
  position: relative;

  background-color: #000000;
}

.slideshow-image {
  display: block;
  position: relative;

  top: 0;
  left: 0;

  max-width: 100%;
  width: 100%;
}

.slideshow-controls {
  position: absolute;

  bottom: 5px;
  right: 5px;
}

.slideshow-control {
  float: left;

  width: 10px;
  height: 10px;

  margin: 5px;
  border: 1px solid #000000;
  border-radius: 6px;

  background-color: #ffffff;
}


/* Content Styles */

.content {
  clear: both;

  padding: 4px;
}

.heading {
  padding: 4px;

  font: bold 20px Helvetica, Arial, sans-serif;
}

.paragraph {
  padding: 4px;

  font: 12px Helvetica, Arial, sans-serif;
}


/* Footer Styles */

footer {
  clear: both;
  position: relative;
  height: 60px;
  width: 100%;

  border-top: 3px solid #000000;

  background-color: #333333;

  color: #dddddd;
}

#footer-container {
  position: inherit;
}

#contact {
  position: absolute;
  top: 0;
  left: 0;

  margin: 8px;
}

#copyright {
  position: absolute;
  top: 0;
  right: 0;

  margin: 8px;
}

.footer-link {
  color: #dddddd;
  text-decoration: none;
}


/* Responsive Styles */

@media (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 460px;
    margin: 0% auto;
  }

  .hidden-phone {
    display: none !important;
  }

  .hidden-tablet {
    display: inherit !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .container {
    width: 736px;
    margin: 0% auto;
  }

  .hidden-phone {
    display: inherit !important;
  }

  .hidden-tablet {
    display: none !important;
  }

  .hidden-desktop {
    display: inherit !important;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .container {
    width: 940px;
    margin: 0 auto;
  }

  .slideshow-controls {
    bottom: 8px;
    right: 8px;
  }

  .slideshow-control {
    width: 16px;
    height: 16px;

    margin: 8px;
    border-width: 2px;
    border-radius: 10px;
  }

  .hidden-phone {
    display: inherit !important;
  }

  .hidden-tablet {
    display: inherit !important;
  }

  .hidden-desktop {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1150px;
    margin: 0 auto;
  }

  .slideshow-controls {
    bottom: 8px;
    right: 8px;
  }

  .slideshow-control {
    width: 16px;
    height: 16px;

    margin: 8px;
    border-width: 2px;
    border-radius: 10px;
  }
}

@media print {
  .visible-print {
    display: inherit !important;
  }
  .hidden-print {
    display: none !important;
  }
}