/* ) #######################################################################################
################################################################################################*/
body {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #d3b483;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  overflow: scroll;
  z-index: 1;
}

a {
  text-decoration: none;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  body {
    font-size: 1rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  #two, #six, #seven, #eight {
    display: none;
  }
  /* home */
  #three {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #three a {
    color: #141414;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img37.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    width: 100%;
    min-height: 60vh;
  }
  #eleven {
    font-size: 2rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    width: 100%;
    padding: 2rem 0;
    margin: auto;
  }
  #twelve-a {
    display: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    display: none;
  }
  #twelve-b {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem auto;
  }
  #twelve-b p {
    width: 90%;
    margin: auto;
    font-size: 0.9rem;
  }
  #twelve-d {
    width: 90%;
    text-align: center;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 2.4rem;
    font-family: "Titan One", cursive;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 90%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
    width: 100%;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 1.6rem;
    font-family: "Titan One", cursive;
    width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-bottom: 2rem;
  }
  #seventeen {
    width: 5%;
  }
  #seventeen-a {
    width: 5%;
  }
  #eighteen {
    width: 80%;
    border: 8px solid white;
    border-radius: 2rem;
    margin: 1rem auto;
    overflow: hidden;
    opacity: 1;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #nineteen {
    width: 80%;
    border: 8px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding: 2rem 0;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    padding: 2rem 0;
    font-size: 2.8rem;
    font-family: "Titan One", cursive;
    text-align: center;
  }
  #twentytwo {
    width: 80%;
    text-align: center;
    background-color: white;
    color: #141414;
    margin: auto;
    font-size: 0.9rem;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 8px solid #afbbc4;
    width: 90%;
    height: auto;
  }
  #twentythree {
    width: 90%;
    padding: 3rem;
  }
  #twentyfour {
    max-width: 100%;
    margin: auto auto 3rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 80%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
  }
  .twentysix-a {
    width: 70%;
    margin: 0rem auto;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border-radius: 1rem;
    border: 6px solid white;
    width: 95%;
    margin: 2rem auto;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 2.4rem;
    text-align: center;
    padding: 2rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 90vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.4rem;
    text-align: center;
    width: 100vw;
    margin: 2rem 0;
  }
  #thirtyone {
    width: 80%;
    margin: 2rem auto;
    color: #323237;
    padding: 0;
    text-align: center;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 90vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 4rem auto;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtysix {
    width: 100vw;
    background-color: #afbbc4;
    font-family: "Titan One", cursive;
    font-size: 3rem;
    color: white;
    padding: 4rem 0;
    text-align: center;
  }
  #thirtyseven {
    margin: 2rem auto;
    width: 70%;
    height: auto;
  }
  /* header include */
  #all-container2 {
    display: none;
  }
  a {
    color: white;
    padding: 1rem;
  }
  #all-container {
    position: static;
    top: 0;
    width: 100%;
    height: 4rem;
    color: #323237;
    font-family: "Titan One", cursive;
  }
  /*nav for mobile portrait mode */
  #m1 {
    width: 40%;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: left;
        -ms-flex-align: left;
            align-items: left;
    z-index: 9;
    color: #d3b483;
  }
  #m1 i {
    width: auto;
    height: 3rem;
    color: #d3b483;
    text-align: left;
    padding: 1rem;
    z-index: 9.9;
    font-size: 2.5rem;
  }
  #m2 {
    width: 20%;
  }
  #m3 {
    width: 40%;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    font-size: 0.8rem;
  }
  #m3 i {
    font-size: 1.2rem;
    width: auto;
    text-align: right;
    z-index: 11;
  }
  /*nav*/
  #nav-contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: red;
    height: 4rem;
    width: 100%;
    max-width: 100vw;
    z-index: 999;
    background-color: white;
  }
  #mobiledropdown {
    width: 100vw;
    background-color: #d3b483;
    padding: 1rem 1rem 2rem 1rem;
    display: none;
    position: absolute;
    top: 0rem;
    border-bottom-right-radius: 3rem;
    z-index: 11;
  }
  #mobiledropdown a {
    font-size: 1rem;
    padding: 1.4rem;
    text-decoration: none;
    color: white;
    font-weight: lighter;
    z-index: 12;
    line-height: 2rem;
    border-bottom: 2px solid white;
  }
  #dropdown-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 1.6rem;
    z-index: 11;
  }
  #m2 {
    width: 20%;
    z-index: 11;
  }
  #x {
    width: 100%;
    color: white;
    font-size: 2rem;
    display: none;
    font-weight: lighter;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (max-width: 767px) and (orientation: landscape) {
  body {
    font-size: 1.2rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  #two {
    width: 10%;
  }
  #three {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #three a {
    color: #141414;
  }
  #two, #six, #seven, #eight {
    display: none;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    width: 100%;
    min-height: 100vh;
  }
  #eleven {
    font-size: 2.5rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
    position: relative;
    top: -4rem;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 100%;
    padding: 0 0 2rem 0;
  }
  #twelve-a {
    display: none;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
  }
  #twelve-b {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding-bottom: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
    font-size: 0.9rem;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 2.5rem;
    font-family: "Titan One", cursive;
    text-align: center;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 70%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 2rem;
    font-family: "Titan One", cursive;
    width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  #seventeen {
    display: none;
  }
  #seventeen-a {
    display: none;
  }
  #eighteen {
    width: 50%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
    margin: auto;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen img, #nineteen img {
    width: 100%;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #nineteen {
    width: 50%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
    margin: 2rem auto;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    background: white;
    padding: 2rem 0 4rem 0;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 3rem;
    font-family: "Titan One", cursive;
    text-align: center;
    padding-bottom: 2rem;
  }
  #twentytwo {
    width: 100%;
    background-color: white;
    color: #141414;
    font-size: 0.9rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 8px solid #afbbc4;
    width: 50vw;
    height: auto;
    margin: auto;
  }
  #twentythree {
    width: 100%;
    padding: 3rem 0;
  }
  #twentyfour {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 3rem;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 70%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .twentysix-a {
    width: 20%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border: 4px solid white;
    border-radius: 1rem;
    width: 4rem;
    margin: auto;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 2.4rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 60vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 100%;
    padding: 4rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.5rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 80%;
    color: #323237;
    padding: 4rem 0;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
  #thirtytwo button {
    width: 60vw;
    margin: auto;
    height: 4rem;
    background-color: white;
    border: 3px solid  white;
    border-radius: 1rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /*header include */
  #all-container2 {
    display: none;
  }
  a {
    color: white;
    padding: 1rem;
  }
  #all-container {
    background-color: white;
    position: static;
    top: 0;
    width: 100%;
    height: 4rem;
    color: #323237;
    font-family: "Titan One", cursive;
  }
  /*nav for mobile portrait mode */
  #m1 {
    width: 40%;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: left;
        -ms-flex-align: left;
            align-items: left;
    z-index: 9;
  }
  #m1 i {
    width: auto;
    height: 3rem;
    color: #d3b483;
    text-align: left;
    padding: 1rem;
    z-index: 11;
    font-size: 2.5rem;
  }
  #m2 {
    width: 20%;
  }
  #m3 {
    width: 40%;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    font-size: 0.8rem;
  }
  #m3 i {
    font-size: 1.2rem;
    width: auto;
    text-align: right;
    z-index: 11;
  }
  /*nav*/
  #nav-contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    height: 4rem;
    width: 100%;
    max-width: 100vw;
    z-index: 9;
  }
  #mobiledropdown {
    width: 100vw;
    background-color: #d3b483;
    padding: 1rem 1rem 2rem 1rem;
    display: none;
    position: absolute;
    top: 0rem;
    border-bottom-right-radius: 3rem;
    z-index: 11;
  }
  #mobiledropdown a {
    font-size: 1rem;
    padding: 1.4rem;
    text-decoration: none;
    color: white;
    font-weight: lighter;
    z-index: 12;
    line-height: 2rem;
    border-bottom: 2px solid white;
  }
  #dropdown-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    line-height: 1.6rem;
    z-index: 11;
  }
  #m2 {
    width: 50%;
    z-index: 11;
  }
  #x {
    width: 100%;
    color: white;
    font-size: 2rem;
    display: none;
    font-weight: lighter;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: portrait) {
  a {
    text-decoration: none;
  }
  body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #d3b483;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  #three {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #three a {
    color: #141414;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img32.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
    width: 768px;
    height: 768px;
  }
  #eleven {
    font-size: 2.5rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    display: none;
  }
  #twelve-b {
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 90%;
    margin: auto;
    font-size: 0.9rem;
  }
  #twelve-d {
    max-width: 100%;
    text-align: center;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 3rem;
    font-family: "Titan One", cursive;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 90%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
    width: 100%;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 2rem;
    font-family: "Titan One", cursive;
    width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  #seventeen {
    width: 5%;
  }
  #seventeen-a {
    width: 5%;
  }
  #eighteen {
    width: 35%;
    border: 8px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen img {
    width: 100%;
    height: 100%;
  }
  #nineteen {
    width: 35%;
    border: 8px solid white;
    border-radius: 2rem;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding: 2rem 0;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    padding: 2rem 0;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    text-align: center;
  }
  #twentytwo {
    width: 80%;
    text-align: center;
    background-color: white;
    color: #141414;
    margin: auto;
    font-size: 0.9rem;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 8px solid #afbbc4;
    width: 90%;
    height: auto;
  }
  #twentythree {
    width: 90%;
    padding: 3rem;
  }
  #twentyfour {
    max-width: 100%;
    margin: auto auto 3rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 80%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .twentysix-a {
    width: 20%;
    margin: auto;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border-radius: 1rem;
    width: 95%;
    margin: auto;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 2.4rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 50vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.5rem;
    text-align: center;
    width: 100vw;
    margin: 2rem 0;
  }
  #thirtyone {
    width: 80%;
    margin: 2rem auto;
    color: #323237;
    padding: 0;
    text-align: center;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 50vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 4rem auto;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /* header include */
  @at-root;
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    width: 100vw;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 0.8rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0.6rem;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
    text-align: center;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: landscape) {
  a {
    text-decoration: none;
  }
  body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #d3b483;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: auto;
    position: relative;
    top: 0rem;
  }
  #eleven {
    font-size: 4rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
    width: 60%;
    height: auto;
  }
  #twelve-b {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 3rem;
    font-family: "Titan One", cursive;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 90%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 2.4rem;
    font-family: "Titan One", cursive;
    max-width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #seventeen {
    width: 17%;
  }
  #seventeen-a {
    width: 17%;
  }
  #eighteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.2rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen img {
    width: 100%;
    height: 100%;
  }
  #nineteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.2rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    width: 100%;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    text-align: center;
    margin: 4rem auto;
  }
  #twentytwo {
    width: 90%;
    background-color: white;
    color: #141414;
    margin: auto;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 10px solid #afbbc4;
    width: 100%;
    height: auto;
    margin: auto;
  }
  #twentyfour {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 2rem auto 8rem auto;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 40%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.1rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .twentysix-a {
    width: 25%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border: 10px solid white;
    border-radius: 1rem;
    width: 10rem;
    margin: auto;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 3.5rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 50%;
    padding: 4rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.2rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 50%;
    color: #323237;
    padding: 4rem 0;
    font-size: 1.2rem;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 40vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /* header include */
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0.8rem;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 1299px) and (max-width: 1799px) {
  a {
    text-decoration: none;
  }
  body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #d3b483;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: auto;
    position: relative;
    top: 0rem;
  }
  #eleven {
    font-size: 4rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
    width: 60%;
    height: auto;
  }
  #twelve-b {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 3rem;
    font-family: "Titan One", cursive;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 50%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.1rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 2.4rem;
    font-family: "Titan One", cursive;
    max-width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #seventeen {
    width: 17%;
  }
  #seventeen-a {
    width: 17%;
  }
  #eighteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen img {
    width: 100%;
    height: 100%;
  }
  #nineteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.4rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    width: 100%;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    text-align: center;
    margin: 4rem auto;
  }
  #twentytwo {
    width: 90%;
    background-color: white;
    color: #141414;
    margin: auto;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 10px solid #afbbc4;
    width: 100%;
    height: auto;
    margin: auto;
  }
  #twentyfour {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 8rem auto;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 40%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.1rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .twentysix-a {
    width: 25%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border: 10px solid white;
    border-radius: 1rem;
    width: 14rem;
    margin: auto;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 3.5rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 50%;
    padding: 4rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.5rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 50%;
    color: #323237;
    padding: 4rem 0;
    font-size: 1.2rem;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /* header include */
  @at-root;
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 0.8rem;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 1800px) and (max-width: 2299px) {
  a {
    text-decoration: none;
  }
  body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #d3b483;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 1rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  iframe {
    border: 10px solid white;
    border-radius: 2rem;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: auto;
    position: relative;
    top: 0rem;
  }
  #eleven {
    font-size: 4rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
    width: 60%;
    height: auto;
  }
  #twelve-b {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 3rem;
    font-family: "Titan One", cursive;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 50%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.1rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 2.4rem;
    font-family: "Titan One", cursive;
    max-width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #seventeen {
    width: 17%;
  }
  #seventeen-a {
    width: 17%;
  }
  #eighteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.8rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen img {
    width: 100%;
    height: 100%;
  }
  #nineteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
    overflow: hidden;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.8rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    width: 100%;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    text-align: center;
    margin: 4rem auto;
  }
  #twentytwo {
    width: 90%;
    background-color: white;
    color: #141414;
    margin: auto;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 10px solid #afbbc4;
    width: 100%;
    height: auto;
    margin: auto;
  }
  #twentyfour {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 8rem auto;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 40%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.1rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .twentysix-a {
    width: 15%;
    margin: auto;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border: 10px solid white;
    border-radius: 1rem;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 3.5rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
  }
  #twentyeight button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
    margin-bottom: 4rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 50%;
    padding: 4rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 2.5rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 50%;
    color: #323237;
    padding: 4rem 0;
    font-size: 1.2rem;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /* headerinclude */
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 2300px) and (max-width: 3299px) {
  a {
    text-decoration: none;
  }
  body {
    font-size: 2rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
  }
  iframe {
    border: 10px solid white;
    border-radius: 2rem;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1.2rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
  #three {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #three a {
    color: #141414;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: auto;
    position: relative;
    top: 0rem;
  }
  #eleven {
    font-size: 5rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
    width: 60%;
    height: auto;
  }
  #twelve-b {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
    font-size: 1.4rem;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    text-align: center;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 50%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin: 5rem auto;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.4rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 4rem;
    font-family: "Titan One", cursive;
    max-width: 100%;
    text-align: center;
    padding: 4rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #seventeen {
    width: 17%;
  }
  #seventeen-a {
    width: 17%;
  }
  #eighteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.8rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen-a img {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  #nineteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 1.8rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    width: 100%;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 5rem;
    font-family: "Titan One", cursive;
    text-align: center;
    margin: 4rem;
  }
  #twentytwo {
    width: 60%;
    background-color: white;
    color: #141414;
    margin: auto;
    font-size: 1.4rem;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 10px solid #afbbc4;
    width: 100%;
    height: auto;
    margin: auto;
  }
  #twentythree {
    width: 40%;
    padding: 3rem;
  }
  #twentyfour {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  #twentyfive {
    margin: 5rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 40%;
    height: 4rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.4rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .twentysix-a {
    width: 15%;
    margin: auto;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border-radius: 1rem;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 4rem;
    text-align: center;
    padding: 4rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
    padding: 5rem 0;
  }
  #twentyeight button {
    width: 40vw;
    height: 4rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin: 5rem 0;
    font-family: "Titan One", cursive;
    font-size: 1.4rem;
    padding: 1rem;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 50%;
    padding: 8rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 4rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 50%;
    color: #323237;
    padding: 4rem 0;
    font-size: 1.8rem;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 30vw;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 1.4rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /* nav container */
  @at-root;
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1.2rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 3300px) {
  a {
    text-decoration: none;
  }
  body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #d3b483;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-size: 2rem;
  }
  footer {
    background-color: #141414;
    color: #b3b1b1;
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
  }
  iframe {
    border: 10px solid white;
    border-radius: 2rem;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 2rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 5rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
  #three {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #three a {
    color: #141414;
  }
  #ten {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-image: url("img38.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100vh;
    width: auto;
    position: relative;
    top: 0rem;
  }
  #eleven {
    font-size: 6rem;
    font-family: "Titan One", cursive;
    color: white;
    text-shadow: 3px 3px darkslategray;
    text-align: center;
  }
  #twelve {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 100%;
    padding: 2rem 0;
  }
  #twelve-a {
    width: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twelve-a img {
    border: 10px solid #d3b483;
    border-radius: 2rem;
    width: 40%;
    height: auto;
  }
  #twelve-b {
    width: 60%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: white;
    color: #141414;
    padding: 2rem;
  }
  #twelve-b p {
    width: 80%;
    margin: auto;
    font-size: 2rem;
  }
  #twelve-d {
    width: 80%;
    margin: 2rem auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #afbbc4;
    font-size: 6rem;
    font-family: "Titan One", cursive;
    text-align: center;
  }
  #thirteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirteen-button {
    width: 50%;
    height: 6rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin: 6rem auto;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 2rem;
    padding: 1rem;
  }
  #thirteen-button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
  }
  #thirteen-button a {
    color: white;
  }
  #fourteen {
    max-width: 100vw;
    background-color: #afbbc4;
    padding: 2rem auto;
    padding-bottom: 4rem;
    border-top-right-radius: 4rem;
  }
  #fifthteen {
    color: white;
    font-size: 6rem;
    font-family: "Titan One", cursive;
    max-width: 100%;
    text-align: center;
    padding: 10rem 0;
  }
  #sixteen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  #seventeen {
    width: 17%;
  }
  #seventeen-a {
    width: 17%;
  }
  #eighteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #eighteen:hover {
    opacity: 0.85;
  }
  #eighteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 2rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #eighteen-a img {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }
  #nineteen {
    width: 27%;
    border: 10px solid white;
    border-radius: 2rem;
  }
  #nineteen:hover {
    opacity: 0.85;
  }
  #nineteen-a {
    width: 100%;
    background-color: #d3b483;
    color: white;
    z-index: 1;
    font-size: 2rem;
    font-family: "Titan One", cursive;
    padding: 2rem 0;
    text-align: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }
  #twenty {
    width: 100%;
    background: white;
  }
  #twentyone {
    width: 100%;
    background-color: white;
    color: #d3b483;
    font-size: 7rem;
    font-family: "Titan One", cursive;
    text-align: center;
    margin: 4rem;
  }
  #twentytwo {
    width: 70%;
    background-color: white;
    color: #141414;
    margin: 4rem auto;
    font-size: 2rem;
  }
  #twentytwo img {
    border-radius: 10%;
    border: 10px solid #afbbc4;
    width: 100%;
    height: auto;
    margin: auto;
  }
  #twentythree {
    width: 40%;
    padding: 3rem;
  }
  #twentyfour {
    width: 80%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin: 3rem auto;
  }
  #twentyfive {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #twentyfive button {
    width: 40%;
    height: 6rem;
    background-color: #d3b483;
    color: black;
    border: 3px solid #d3b483;
    border-radius: 1rem;
    margin: 8rem auto;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 2rem;
    padding: 1rem;
  }
  #twentyfive button:hover {
    background-color: #afbbc4;
    border: 3px solid #afbbc4;
  }
  #twentyfive button a {
    color: #141414;
  }
  #twentysix {
    background-color: #d3b483;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .twentysix-a {
    width: 15%;
    margin: auto;
  }
  .twentysix-a:hover {
    -webkit-animation: shake 0.15s;
            animation: shake 0.15s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
  }
  @-webkit-keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  @keyframes shake {
    0% {
      -webkit-transform: translate(1px, 1px) rotate(0deg);
              transform: translate(1px, 1px) rotate(0deg);
    }
    25% {
      -webkit-transform: translate(-1px, -2px) rotate(-1deg);
              transform: translate(-1px, -2px) rotate(-1deg);
    }
    50% {
      -webkit-transform: translate(1px, -1px) rotate(1deg);
              transform: translate(1px, -1px) rotate(1deg);
    }
    75% {
      -webkit-transform: translate(3px, 1px) rotate(-1deg);
              transform: translate(3px, 1px) rotate(-1deg);
    }
    100% {
      -webkit-transform: translate(1px, -2px) rotate(-1deg);
              transform: translate(1px, -2px) rotate(-1deg);
    }
  }
  .twentysix-a img {
    border-radius: 1rem;
    width: 100%;
  }
  #twentyseven {
    background-color: #d3b483;
    font-size: 6rem;
    text-align: center;
    padding: 6rem 0;
    color: white;
    font-family: "Titan One", cursive;
  }
  #twentyeight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #d3b483;
    padding: 5rem 0;
  }
  #twentyeight button {
    width: 30vw;
    height: 6rem;
    background-color: white;
    color: #323237;
    border: 3px solid white;
    border-radius: 1rem;
    margin-top: 4rem;
    font-family: "Titan One", cursive;
    font-size: 2rem;
    padding: 1rem;
    margin: 6rem auto;
  }
  #twentyeight button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #twentyeight button a {
    color: #323237;
    width: 100%;
    height: 4rem;
  }
  #twentyeight button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
  }
  #twentynine {
    background-color: #afbbc4;
    width: 50%;
    padding: 4rem 0;
  }
  #twentynine-a {
    background-color: #afbbc4;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2rem 0;
  }
  #twentynine-b {
    background-color: #afbbc4;
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirty {
    font-family: "Titan One", cursive;
    color: white;
    font-size: 6rem;
    text-align: center;
  }
  #thirtyone {
    margin: auto;
    width: 50%;
    color: #323237;
    padding: 4rem 0;
    font-size: 3rem;
  }
  #thirtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #thirtytwo button {
    width: 30vw;
    height: 6rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin-top: 2rem;
    color: #141414;
    font-family: "Titan One", cursive;
    font-size: 2rem;
    padding: 1rem;
  }
  #thirtytwo button:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  #thirtytwo button a {
    color: #323237;
  }
  #thirtytwo button a:hover {
    background-color: #5a5a5f;
    border: 3px solid #5a5a5f;
    color: white;
    cursor: pointer;
  }
  /*##################headerinclude*/
  #all-container {
    display: none;
  }
  #all-container2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100vw;
  }
  nav {
    max-width: 100vw;
    margin: auto;
    height: 6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: white;
    color: #d3b483;
    font-size: 1.6rem;
    font-family: "Titan One", cursive;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .navcomponent img {
    width: 4rem;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent {
    width: 14%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .navcomponent a {
    text-decoration: none;
    color: #d3b483;
  }
  .navcomponent a:hover {
    color: #323237;
  }
}
/*# sourceMappingURL=index.css.map */