html {

}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
/*  font-family: Arial Black, Tahoma, Gadget, sans-serif;  */
/*  font-size: 19px;   */
  font-family: 'SF Compact Display', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;

}

.f1 {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
}

.f2 {
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
        /*
        @font-face {
          font-family: 'MyWebFont';
          src: url('webfont.eot'); /* IE9 Compat Modes */
        /*  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        /*      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
        /*       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
        /*       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        /*       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      /*  }  */


.anim-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0px;
  opacity: 0;
  z-index: 99;
}

.arf {
  width: 50px;
  height: 50px;
  background: #FF0000;
  object-fit: contain;
}

.arrow-wrap {
  opacity: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  z-index: 20;
  width: 100px;
  bottom: 20px;
  cursor: pointer;
}

.box {
  margin: 15px;
  max-height: 150px;
  max-width: 250px;
  min-height: 150px;
  min-width: 250px;
  background: #ffffff;
  /*opacity: .8;*/
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /*outline-width: 5px;
  outline-style: solid;
  outline-color: white;*/
  box-shadow: 0 0 1pt 2pt #333333;
  padding: 2px
}

.box2 {
  margin: 8px;
  max-width: 510px;
  max-height: 310px;
/*  min-height: 250px;
  min-width: 450px;  */
  background: #ffffff;
  /*opacity: .8;*/
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  /*outline-width: 5px;
  outline-style: solid;
  outline-color: white;*/
  box-shadow: 0 0 1pt 3pt #666666;
}

.button {
  width: 300px;
  height: 480px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;  Turned this off cause it was making the pics in the button container overflow the edges*/
  align-items: center;
  text-align: center;
  background-color: rgba(102, 102, 102, 0.8);
  /*background-color: #666666;
  opacity: .8;
  using opacity passes it's value to all children & cannot be overridden, you need to use rgba to control the opacity AKA alpha */
}

.button2 {
  width: 550px;
  height: 350px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;  Turned this off cause it was making the pics in the button container overflow the edges*/
  align-items: center;
  text-align: center;
  background-color: rgba(102, 102, 102, 0.8);
  /*background-color: #666666;
  opacity: .8;
  using opacity passes it's value to all children & cannot be overridden, you need to use rgba to control the opacity AKA alpha */
}

.button-links {
  display: flex;
  justify-content: space-evenly;
}

.button-preview {
  margin-top: 0px;
  width: 250px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin: 3px;
}

.button-preview2 {
  margin-top: 0px;
  width: 450px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin: 3px;
}

.button-text {
  color: #ffffff;
  font-family: inherit;
  font-size: inherit;
  /*  text-shadow: 1px 1px #ffffff;  */
  -webkit-text-stroke: 1px #000000;
}

.contactform {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}

.contact-button{
  width: 200px;
  height: 65px;
  color: #ffffff;
  background: #666666;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin: 15px;
  font-family: inherit;
  font-size: inherit;
  -webkit-text-stroke: 1px #000000;
  border: 2px solid #000000;

}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
  margin-bottom: 101px;
  margin-top: 20px;
}

.content2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  color: red;
}

.footer-index {
  opacity: 0;
  width: 800px;
  position: fixed;
  bottom: 25px;
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  height: 150px;
  display: flex;
  justify-content: center;
  z-index: 99;
}

.footer-solid {
  position: fixed;
  height: 150px;
  display: flex;
  justify-content: center;
  z-index: 100;
  bottom: 1px;
}


.footer-home {
  display: flex;
  width: 100%;
  height: 80px;
  background: #333333;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  cursor: pointer;
}
/* unused - only 1 footer css needed
.footer-sub-page {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 50px;
  background: #FFFF00;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
*/

.form-title {
  margin-right: 4px;
}

.form-input {
  margin-right: 4px;
  border-radius: 10px;
}

.header {
  width: 100%;
  height: 52px;
  background: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-foot {
  width: 100%;
  height: 100px;
  background: #000000;
  position: absolute;
  bottom: 0px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-wrap {
  position: fixed;
  height: 52px;
  display: flex;
  justify-content: center;
  z-index: 99;
}

.header-wrap2 {
  width: 100%;
  background: #333333;
  height: 75px;
  display: flex;
  justify-content: space-evenly;
  z-index: 99;
  position: fixed;

}

.linky {
  text-decoration: none;
}

.main-background {
  width: 100%;
  height: 100%;
  position: fixed;
}

.main-bg-inner {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  z-index: 100;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-inner {
  border-radius: 10px;
  background: #FFFFFF;
  width: 70%;
  height: 70%;
  position: absolute;
  z-index: 101;
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: auto;
  object-fit: contain;
  border: 2px solid #ffffff;
}

.modal-bg {
  background: black;
  width: 100%;
  height: 100%;
  opacity: .7;
}

.modal-frame {
  width: 500px;
  height: 400px;
  justify-content: center;
  background: rgba(0,0,0, 0.85);
  object-fit: contain;
  align-items: center;
  margin: 5px;
  display: flex;
  position: relative;
}

.nav-button{
  /* width: 100%; */
  height: 52px;
  color: #ffffff;
  /* background: #666666; */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-family: inherit;
  font-size: inherit;
  -webkit-text-stroke: 1px #000000;
  z-index: 100;
  display: inline-block;
}

.nav-button-L a {
    height: 60px;
    color: #ffffff;
     background: #666666;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 5px 6px 5px 6px;
    font-family: inherit;
    font-size: inherit;
  /*  float: left; */
    text-decoration: none;
    -webkit-text-stroke: 1px #000000;
    border: 2px solid #000000;
    padding: 0px 12px 0px 12px;
    text-align: center;

}

.nav-button-R{
    /* width: 200px;  */
    height: inherit;
    color: #ffffff;
    /* background: #666666;  */
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    border-radius: 10px;
    margin: 0px 15px 0px 0px;
    font-family: inherit;
    font-size: inherit;
    float: right;

}

.page2-background {
  width: 100%;
  height: 100%;
  background: url("img/settlerspieces.jpg") no-repeat fixed;
  background-size: contain;
  background-position: center 0;
}

.page2 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

::placeholder {
  color: red;
  opacity: 1; /* Firefox */
/*  font-family: Arial Black, Gadget, sans-serif;  */
  font-size: 175%;

}

.scaleable-image {
  width: 100%;
  max-width: 700px;
  height: 100%;
  object-fit: contain;
}

.scroll-window {
  overflow: auto;
  height: 450px;
}

.sociallink {
  width: 55px;
  height: 55px;
  background: #666666;
  border-radius: 7px;
  object-fit: contain;
  margin: 7px;
  padding: 5px;
  border: 2px solid #000000;
}

.unselectedpage{
  opacity: .6;
}

.wrapper {
  position: fixed;
  display: flex;
  flex-direction: column;
  border: 2px solid black;
  width: 100%;
  height: 100%;
  margin-top: 49px;
}

.woof {
  width: 50px;
  height: 50px;
  background: #FF00FF;
  object-fit: contain;
}