body {
  height:100vh;
  background-image:url(../images/beans-chopping-board-food-fresh-616358.jpg);
  background-size:cover;
  background-repeat:no-repeat;
}

.container {
  width:80vw;
  max-width:1400px;
  margin:auto;
}

.row {
  width:100%;
  display:flex;
  justify-content: center;
}

.kitchen-nightmares-logo {
width:27vw;
}
aside {
  display:flex;
  justify-content: space-evenly;

}

.header-row {
  margin:auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
}

.aside-card {
  width:15vw;
  height:5vh;
  font-size:1.5vw;
  background-color: #C7CDCE;
  display:flex;
  justify-content: center;
  align-items: center;
  border:solid 4px #071E50;
  color:#110101;
}

main {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center;
  height:70vh;
  width:80vw;

}

.card {
  height:22vh;
  background-size:cover;
  background-position: center;
  margin-top: 20px;
  position:relative;
  border:solid 2px white;
}

.card-front, .card-back {
  height:100%;
  width:100%;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position: absolute;
}


.modal {
  position:fixed;
  display:flex;
  justify-content: center;
  align-items:center;
  width: 100vw;
  height: 100vh;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 0.5)
}

.modal-content {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
   top:10vh;
  width:80vw;
  height:80vh;
  border-radius: 5px;
  background-image:  url(../images/kitchen-nightmares-ramsay-knife-transparent-backdrop.png);
  background-size:contain;
  background-repeat:no-repeat;
}

.modal-button {
position:relative;
left:8vw;
bottom:10vh;
width:40%;
height:20%;
font-size:1.5vw;
border: solid white 2px;
border-radius: 15px;
}

.modal-image {
  height:50%;
  background-size:cover;
}

.unstoppable-image {
  height:100%;
  width:45vw;
  border:solid 2px white;
}

.card-back {
  background-image: url(../images/angry-gordon.jpg);
}

.herb-crusted-lamb {
  background-image: url(../images/herb-crusted-lamb.jpg);
}
.chicken-curry {
  background-image: url(../images/chicken-curry.png);
}
.chocolate-mousse {
  background-image: url(../images/chocolate-mousse.jpg);
}

.fish-and-chips {
  background-image: url(../images/fish-and-chips.jpg);
}

.sirloin-burger {
  background-image: url(../images/sirloin-burger.png);
}

.beef-wellington {
  background-image: url(../images/Gordon-Ramsays-Beef-Wellington.jpg);
}

.honey-glazed-ham {
  background-image: url(../images/honey-glazed-ham.jpg);
}

.pancakes {
  background-image: url(../images/pancakes.jpg);
}

.scallops {
  background-image: url(../images/scallops.jpg);
}

.col-1 {
    width: 8%;
  }
  .col-2 {
    width: 16%;
  }
  .col-3 {
    width: 24%;
  }
   .col-4 {
    width: 32%;
  }
   .col-5 {
    width: 40%;
  }
   .col-6 {
    width: 48%;
  }
   .col-7 {
    width: 56%;
  }
   .col-8 {
    width: 64%;
  }
   .col-9 {
    width: 72%;
  }
   .col-10 {
    width: 80%;
  } .col-11 {
    width: 88%;
  }
   .col-12 {
    width: 96%;
  }



  @media screen and (max-width:1024px) {
      .modal-content {
        top:30vh;
      }

            .modal-button {
         bottom:15vw;
         width:40%;
        height:15%;
        left:15vw;
        font-size:2vw;
      }
    }





  @media screen and (max-width:768px) {
      .card, .card-front, .card-back {

        height:10vh;
        flex-basis: 30%;
      }

           .modal-content {
        top:20vh;
      }

      .modal-button {
         bottom:50vw;
         width:40%;
        height:15%;
        font-size:2vw;
      }
    }


  @media screen and (max-width:667px) {
    .card, .card-front, .card-back {

    height:18vh;
    flex-basis:calc(100%/7);
    }
    .modal-content {
      width:60vw;
      height:60vh;
    }

  .modal-button {
    bottom:5vw;
    width:40%;
    height:15%;
     left:12.5vw;
  }

  }


  @media screen and (max-width:375px) {
      .card, .card-front, .card-back {

        height:10vh;
        flex-basis: 30%;
      }
          .modal-content {
      width:80vw;
      height:80vh;
    }

  .modal-button {
    bottom:80vw;
    left:15vw;
    width:40%;
    height:10%;
    font-size:2.5vw;
  }