@media only screen and (max-width: 1440px) {

	#controls {
        width: 800px;
        text-align: center;
        margin: 20px 0px;
        font: 30px Montserrat;
        margin-top: 4%;
        color: #00708C;
        margin-left: 14%;
    }

	#controls input,
	#controls label {
		font: 30px Montserrat;
		border-radius: 52%;
		border-color: #00708C;
		text-align: center;
		width: 40px;
		color: #00708C;

	}

}


@media only screen and (max-width: 1366px) {


	#book {
		width: 550px;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 25%;
	}

	#book .turn-page {
		background-color: white;
	}

	#book .cover {
		background:#00708C;;
	}

	#book .cover h1 {
		color: white;
        text-align: center;
        font-size: 30px;
        line-height: 400px;
        margin: 0px;
	}

	#book .loader {
		background-image: url(../loader.gif);
		width: 24px;
		height: 24px;
		display: block;
		position: absolute;
		top: 238px;
		left: 188px;
	}

	#book .data {
		text-align: center;
		font-size: 40px;
		color: #999;
		line-height: 500px;
	}

	#controls {
		width: 800px;
        text-align: center;
        margin: 20px 0px;
        font: 30px Montserrat;
        margin-top: 1%;
        color: #00708C;
        margin-left: 14%;
	}

	#controls input,
	#controls label {
		font: 30px Montserrat;
		border-radius: 52%;
		border-color: #00708C;
		text-align: center;
		width: 40px;
		color: #00708C;

	}

	#book .odd {
		background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
	}

	#book .even {
		background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
	}

	#book .odd img,
	#book .even img {
		width: 100%;
		height: 100%;
	}

}



@media only screen and (max-width: 1280px) {


	#book {
		width: 550px;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 25%;
	}

	#book .turn-page {
		background-color: white;
	}

	#book .cover {
		background:#00708C;;
	}

	#book .cover h1 {
		color: white;
        text-align: center;
        font-size: 30px;
        line-height: 400px;
        margin: 0px;
	}

	#book .loader {
		background-image: url(../loader.gif);
		width: 24px;
		height: 24px;
		display: block;
		position: absolute;
		top: 238px;
		left: 188px;
	}

	#book .data {
		text-align: center;
		font-size: 40px;
		color: #999;
		line-height: 500px;
	}

	#controls {
		width: 800px;
        text-align: center;
        margin: 20px 0px;
        font: 30px Montserrat;
        margin-top: 1%;
        color: #00708C;
        margin-left: 14%;
	}

	#controls input,
	#controls label {
		font: 30px Montserrat;
		border-radius: 52%;
		border-color: #00708C;
		text-align: center;
		width: 40px;
		color: #00708C;

	}

	#book .odd {
		background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
	}

	#book .even {
		background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
		background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
	}

	#book .odd img,
	#book .even img {
		width: 100%;
		height: 100%;
	}

}