@import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates|Orbitron:700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  background-color: #b4b4b4;
  font-family: 'Montserrat Alternates', sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 3vh !important; }

h1 {
  background-color: #b4b4b4;
  color: #003333 !important;
  text-shadow: 0 0 5px #008b8b !important;
  color: #000000;
  font-family: 'Orbitron', sans-serif !important;
  padding: 10px !important;
  margin: 0;
  font-size: 5vh !important;
  text-align: center;
  overflow: hidden; }

ul li {
  list-style: none; }

.topnav {
  background-color: #008b8b;
  color: #ffffff;
  overflow: hidden;
  text-align: center; }

.topnav a {
  text-decoration: none;
  color: #ffffff;
  padding: 10px;
  display: block;
  float: left; }

.topnav a:hover {
  background-color: #00cece;
  color: #00447c;
  cursor: pointer; }

.topnav a.active {
  background-color: #003333;
  color: #ffffff; }

.topnav .icon {
  display: none; }

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both; }

.row, .row > .column {
  padding: 10px; }

.main {
  max-width: 60%;
  margin: auto; }

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33%; }

.column-half {
  float: left;
  width: 40%; }

.row > .column-full {
  padding: 10px;
  width: 100%; }

.column-full img {
  width: 50%; }

.content {
  text-align: center;
  background-color: #ffffff;
  box-shadow: 2px 8px 6px #888888; }

.text-wrapper {
  width: 80%; }

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
  perspective: 1000px; }

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d; }

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg); }

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; }

.flip-card-front {
  background-color: #ffffff;
  color: black; }

.flip-card-back {
  background-color: #345050;
  color: white;
  transform: rotateY(180deg); }

.fa-arrow-up {
  float: right;
  background-color: #008b8b;
  color: #ffffff;
  border-radius: 50px;
  visibility: hidden; }

.footer footer {
  background-color: #003333;
  color: #ffffff;
  font-size: 2.2vh;
  text-align: center;
  padding: 10px; }

.main a {
  color: black;
  text-decoration: none; }

iframe {
  width: 75%; }

input[type=text],
select,
textarea {
  width: 100%;
  /* Full width */
  padding: 12px;
  /* Some padding */
  border: 1px solid #ccc;
  /* Gray border */
  border-radius: 4px;
  /* Rounded borders */
  box-sizing: border-box;
  /* Make sure that padding and width stays in place */
  margin-top: 6px;
  /* Add a top margin */
  margin-bottom: 16px;
  /* Bottom margin */
  resize: vertical; }

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #345050;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer; }

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #008b8b; }

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 100%; }

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

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

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

@media only screen and (max-width: 600px) {
  body {
    font-size: 3.5vh; }
  h1 {
    font-size: 4vh;
    padding: 0px; }
  .main {
    max-width: 100%;
    margin: 0; }
  .topnav a:not(:first-child) {
    display: none; }
  .topnav a.icon {
    float: right;
    display: block; }
  .topnav.responsive {
    position: relative; }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0; }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left; }
  .column {
    width: 100%; }
  .column-half {
    width: 100%; }
  .column-full {
    width: 100%; }
  .column-full img {
    width: 100%; }
  .row,
  .row > .column {
    padding: 2px; }
  .fa-arrow-up {
    visibility: visible; }
  div.gallery {
    width: 100%; } }