h1 {
    font-family: Comfortaa;
    color: #f57531;
    clear: both;
    padding-top: 20px;
}

h2, h3 {
    font-family: Comfortaa;
    color: #232323;
}

h3 {
    font-size: 1em;
    margin-block-end: 0.2em;
}

#indicator {
    position: fixed;
    top: 50px;
    background: white;
    padding: 30px;
}

.text {
    background-color: white;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 1px;
    box-shadow: 0px 3px 10px #06011f;
    border-radius: 10px;

}
.highlight {
    background-color: orange;
    padding: 4px;
}

#footer {
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    font-family: Lato;
    margin-top: 10px;
}

p, li, td{
    font-family: Lato;
    font-size: 17px;
}

td {
    padding-right: 20px;
    padding-bottom: 5px;
}

td:first-child {
    color: #2e71c1;
}

.button {
  background-color: #2e71c1;
  border: 2px solid #444;
  color: white !important;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    border-radius: 10px;
}

.button:hover {
    background-color: #4e91e1;
}

a:link, a:visited {
    color: #2e71c1;
    text-decoration: none;
}

.right {
    float: right;
    width: 30%;
    padding: 5px;
    margin-top: -2vw;
    margin-left: 5vw;
    margin-right: 1vw;
    border-radius: 10px;
    box-shadow: 0px 5px 10px gray;
}
.row {
    width: 10%;
    margin-left: 1.0vw;
    margin-right: 1.0vw;
    border-radius: 1vw;
    box-shadow: 0vw 0.5vw 1.4vw gray;
}

.right span {
    font-family: Lato;
}

.left_image {
    width: 35%;
    padding: 5px;
    margin: 10px;
    margin-top: 30px;
    box-shadow: 0px 5px 10px gray;
}

.centre_image {
    width: 10%;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

a:hover {
    color: #ef752d;
}

body {
    background-color: #F6F1BA;
    background-image: url('paper_texture.jpg');
    background-size: contain;
}

#myCanvas {
    margin-top: 15px;
    background-color: #e4e4e4;
}

.exp {
    margin-left: auto;
    margin-right: auto;
    max-width: 850px;
}
.explosion {
    background-color: white;
    width: 50%;
    margin-left: auto;
    margin-right: auto;

}

#title-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-width: 100%;

}

.icon-break {
    height: 60px;
}

#title-bar-inner {
    text-align: center;
    font-family: 'Comfortaa', sans-serif;
    color: white;
    text-shadow: 0.2vw 0.7vw 1vw #06011f, 1px 0px 2px black, -1px 0px 2px black, 0px 1px 2px black, 0px -1px 2px black;
    background-color: rgb(157, 127, 89);
    border-radius: 10px;
    box-shadow: 0px 3px 10px #06011f;
    margin-bottom: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
    background-image: url('headerbg.jpg');
    background-size: cover;
    max-width: 1050px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;

/*    position: fixed;
    width: 100%;
    transition: 0.5s;*/
}

#established {
    font-size: 10px;
    text-shadow: none;
    text-align: right;
    margin-right: 20px;
}

.fancybox .row{
    transition: 0.4s;
}

.rowofpictures {
    margin: 20px 0px;
}

.rowofpictures .row {
    opacity: 0.9;
}

.rowofpictures:hover .row {
    opacity: 0.8;
    box-shadow: 0vw 0.6vw 1.8vw gray;
}
.rowofpictures:hover .row:hover {
    width: 10%;
    box-shadow: 0vw 0.4vw 0.9vw grey;
    opacity: 1.0 !important;
}

.extra_info {
    opacity: 0.5;
    font-size: 10px;
}

@media all and (min-width: 960px) {
    #title-bar-inner {
        font-size: 80px;
    }
    h1 {
        font-size: 26px;
    }
    h2 {
        font-size: 20px;
    }
}

@media all and (max-width: 959px) and (min-width: 450px) {
    #title-bar-inner {
        font-size: 8vw;
    }
    h1 {
        font-size: 26px;
    }
    h2 {
        font-size: 20px;
    }

}

@media all and (max-width: 449px) and (min-width: 200px) {
    #title-bar-inner {
        font-size: 8vw;
    }
    h1 {
        font-size: 7vw;
    }
    h2 {
        font-size: 5vw;
    }
    p, li {
        font-size: 4vw;
    }

}

@media all and (max-width: 199px) {
    #title-bar-inner {
        font-size: 8vw;
    }
    h1 {
        font-size: 12vw;
    }
    h2 {
        font-size: 8vw;
    }
    p, li {
        font-size: 10px;
    }

}