/* ) #######################################################################################
################################################################################################*/
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;
  background-color: #afbbc4;
  /* ) #######################################################################################
################################################################################################*/
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  /*PHOTO GALLERY HEADLINE */
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  /*BUTTON DIV */
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 80%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  /*CONTAINER FOR 4 CARDS */
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  /*CONTAINER FOR 4 CARDS */
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 250px;
    height: 250px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    margin-bottom: 2rem;
  }
  .flip-card img {
    border: 5px solid white;
    width: 250px;
    height: 250px;
    border-radius: 1rem;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 250px;
    height: 250px;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (max-width: 767px) and (orientation: landscape) {
  /*PHOTO GALLERY HEADLINE */
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  /*BUTTON DIV */
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 80%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  /*CONTAINER FOR 4 CARDS */
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  /*CONTAINER FOR 4 CARDS */
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    margin-bottom: 2rem;
  }
  .flip-card img {
    border: 5px solid white;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 250px;
    height: 250px;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: portrait) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 60%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight {
    width: 15%;
  }
  .fiftyeight img {
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 1rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty {
    width: 15%;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 400px;
    height: 400px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
    margin-bottom: 4rem;
  }
  .flip-card img {
    border-radius: 1rem;
    width: 400px;
    height: 400px;
    border: 10px solid white;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 400px;
    height: 400px;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 400px;
    height: 400px;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 768px) and (max-width: 1298px) and (orientation: landscape) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive #fiftyfive-button {
    width: 50%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 10rem;
    height: 10rem;
    border-radius: 1rem;
  }
  .flip-card img {
    width: 10rem;
    height: 10rem;
    border-radius: 1rem;
    border: 10px solid white;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 10rem;
    height: 10rem;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 10rem;
    height: 10rem;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1299px) and (max-width: 1799px) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 15rem;
    height: 15rem;
    border-radius: 1rem;
  }
  .flip-card img {
    width: 15rem;
    height: 15rem;
    border-radius: 1rem;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 15rem;
    height: 15rem;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 15rem;
    height: 15rem;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 1800px) and (max-width: 2299px) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }
  .flip-card img {
    width: 300px;
    height: 300px;
    border-radius: 1rem;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 2300px) and (max-width: 3299px) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 2rem;
    text-align: center;
    margin: 4rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background: #d3b483;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }
  .flip-card:hover {
    background: white;
    -webkit-transition: 1000ms;
    transition: 1000ms;
  }
  .flip-card img {
    width: 300px;
    height: 300px;
    border-radius: 1rem;
    border: 11px solid white;
  }
  .flip-card img:hover {
    background: #d3b483;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 300px;
    height: 300px;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}

/* ) #######################################################################################
############################################################################################
################################################################################################
################################################################################################*/
@media only screen and (min-width: 3300px) {
  #three {
    color: #d3b483;
  }
  #six {
    background-color: #d3b483;
    border-top-right-radius: 2rem;
  }
  #six a {
    color: #141414;
  }
  #fiftytwo {
    font-family: "Titan One", cursive;
    font-size: 4rem;
    text-align: center;
    margin: 10rem 0;
    color: white;
  }
  #fiftythree {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: auto;
    -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;
    width: 100%;
  }
  .fiftyfour {
    width: 15%;
  }
  .fiftyfour img {
    border-radius: 1rem;
  }
  #fiftyfive {
    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;
  }
  #fiftyfive button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 6rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #fiftysix {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
  }
  #fiftyseven {
    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;
  }
  #fiftyseven button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  .fiftyeight img {
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  #fiftynine {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto 6rem auto;
    -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;
    width: 100%;
    -webkit-transition-property: width;
    transition-property: width;
    -webkit-transition: opacity, 2s;
    transition: opacity, 2s;
  }
  .sixty img {
    border-radius: 1rem;
  }
  #sixtyone {
    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;
  }
  #sixtyone button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #sixtytwo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 1rem auto;
    -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;
    width: 100%;
  }
  .sixtythree {
    width: 15%;
  }
  .sixtythree img {
    border-radius: 1rem;
  }
  #sixtyfour {
    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;
  }
  #sixtyfour button {
    width: 20%;
    height: 4rem;
    background-color: white;
    color: black;
    border: 3px solid  white;
    border-radius: 1rem;
    margin: 2rem auto;
    color: #3c3c41;
    font-family: "Titan One", cursive;
    font-size: 1.2rem;
    padding: 1rem;
  }
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background: #d3b483;
    width: 500px;
    height: 500px;
    border-radius: 1rem;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
  }
  .flip-card:hover {
    background: white;
    -webkit-transition: 1000ms;
    transition: 1000ms;
  }
  .flip-card img {
    width: 500px;
    height: 500px;
    border-radius: 1rem;
    border: 16px solid white;
  }
  .flip-card img:hover {
    background: #d3b483;
  }
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    border-radius: 1rem;
  }
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
    border-radius: 1rem;
    width: 500px;
    height: 500px;
    border-radius: 1rem;
  }
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    border-radius: 1rem;
  }
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    border-radius: 1rem;
  }
}
/*# sourceMappingURL=gallery.css.map */