body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px !important;
  height: 1200px;
}

.magazine {
  margin-top: 100px !important; 
  background-color: transparent;
  right: 5%;
  width: 45%;
  height: 1000px;
  perspective: 1000px;
  cursor: pointer;
  position: absolute;
}

.right-page,
.left-page,
.page {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  z-index: 0;
  padding: 5px;
}

.page img {
  width: 100%;
  height: 100%;
}

.flip-page-left {
  transform: rotateY(-180deg);
  transform-origin: 0%;
}

.flip-page-right {
  transform: rotateY(0deg);
  transform-origin: 0
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  height: 100%;
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  height: 100%;
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

@media screen and (max-width: 1400px){
  .magazine {
    height: 900px;    
  } 
}

@media screen and (max-width: 1200px){
  .magazine {
    height: 800px;    
  } 
}


@media screen and (max-width: 1000px){
  .magazine {
    height: 600px;    
  } 
}

@media screen and (max-width: 800px){
  .magazine {
    height: 500px;    
  } 
}

@media screen and (max-width: 600px){
  .magazine {
    height: 400px;    
  } 
}