body {
  overflow:hidden;
	margin:0;
	padding:0;
}

.magazine-viewport {
  overflow:hidden;
  max-width:100%;
  max-height: 100%;
}

/* Note: Play around with widths and heights and develop media queries for certain widths */
#magazine {
  position: relative;
  width: 922px;
  height: 590px;
  transform: translate3d(0px, 0px, 0px);
  margin: auto;
  border: solid .5px;
}

#magazine .turn-page {
  background-size: 100% 100%;
}

.magazine div {
    background-size: 100% 100%;
}

.toolbar {
    display: flex;
    justify-content: center;
}

.turn-button {
    border-style: none;
    background-color: #ffcc00;;
    opacity: 0.9;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    margin: 20px;
    cursor: pointer;
}
.magazine-viewport .shadow {
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}

/* Future features
.share-tool-placeholder{
    width: 300px; height: 380px;  margin-top: -250%; margin-left: -66%;
}
.share-tool-placeholder a{
    margin: 10px;
}
*/

/* Media Queries for Magazine Responsiveness are located in magazine_page.js as JavaScript was utilized to alter magazine dimensions. */