@media screen and (orientation: portrait) {
	.landscape {
		display: -webkit-flex;
	}
}

@media screen and (min-width: 901px) {
	.mobile-only {
		display: none !important;
	}

	.btn-default:hover {
		transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
	}

	section.main .book .actions .btn:hover .inner {
	    transform: translateX(0) !important;
	    -webkit-transform: translateX(0) !important;
	    -ms-transform: translateX(0) !important;
	    -moz-transform: translateX(0) !important;
	    -o-transform: translateX(0) !important;
	}

	section.main .book .actions .btn:hover .inner .image-box:before {
	    background-position: 20rem bottom;
	    transition: 20s background-position linear;
	    -webkit-transition: 20s background-position linear;
	    -ms-transition: 20s background-position linear;
	    -moz-transition: 20s background-position linear;
	    -o-transition: 20s background-position linear;
	}

	section.main .book .actions .replay:hover img {
		animation: rotate .6s linear 0s infinite;
	}

	section.main .menu-wrapper .actions .btn-mute:hover {
		transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
	}

	section.main .menu-wrapper .actions .btn:hover {
		animation: rotateLow .6s linear 0s infinite;
	}

	@keyframes rotate {
	  0%   {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	  25%  {
	  	transform: rotate(-20deg);
		-webkit-transform: rotate(-20deg);
		-ms-transform: rotate(-20deg);
		-moz-transform: rotate(-20deg);
		-o-transform: rotate(-20deg);
	  }
	  50%  {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	  75% {
	  	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
	  }
	  100%  {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	}

	@keyframes rotateLow {
	  0%   {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	  25%  {
	  	transform: rotate(-10deg);
		-webkit-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
	  }
	  50%  {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	  75% {
	  	transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-ms-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		-o-transform: rotate(10deg);
	  }
	  100%  {
	  	transform: rotate(0);
		-webkit-transform: rotate(0);
		-ms-transform: rotate(0);
		-moz-transform: rotate(0);
		-o-transform: rotate(0);
	  }
	}

}

@media screen and (max-width: 900px) {
	.desktop-only {
		display: none !important;
	}

	html {
		font-size: 12.315271vw;
	}

	
	/* Buttons */

	.btn-default {
	    padding: .15rem .35rem .16rem .34rem;
	    font-size: 0.18rem;
	}

	.btn-default.secondary {
	    padding: .13rem .19rem .16rem .16rem;
	    font-size: 0.12rem;
	}


	/* Main */

	section.main .content .content-container {
        width: 5rem;
	    padding: .45rem .56rem .2rem .56rem;
	}

	section.main .content .image {
	    width: 2rem;
	}

    section.main .content * + .text {
        margin-top: .16rem;
    }

    section.main .content .text p {
        font-size: 0.18rem;
        line-height: 1em;
    }

	section.main .content * + .btn-default {
	    margin-top: .2rem;
	}

    section.main .book .page .subtitles:before {
        height: 1.34rem;
    }

	section.main .book .page .subtitles .sub {
	    width: 5.72rem;
	    max-height: 5.2em;
	    top: calc(100% - .67rem);
	    font-size: 0.2rem;
	    line-height: 1.3em;
	}

	section.main .book .actions .btn .inner {
	    width: .7rem;
	    height: 100%;
	    transform: translateX(0) !important;
	    -webkit-transform: translateX(0) !important;
	    -ms-transform: translateX(0) !important;
	    -moz-transform: translateX(0) !important;
	    -o-transform: translateX(0) !important;
	}

	section.main .book .actions .btn .inner img {
		width: .7rem;
		height: 3.78rem;
		margin-top: -1.89rem;
	}

	section.main .book .actions .btn .inner .image:before {
	    width: .08rem;
	    bottom: calc(50% + 1.88rem);
	}

	section.main .book .actions .btn .inner .image:after {
	    width: .09rem;
	    top: calc(50% + 1.88rem);
	}

	section.main .book .actions .btn.next .inner .image:before {
	    width: .09rem;
	    left: auto;
	    right: 0;
	}

	section.main .book .actions .btn.next .inner .image:after {
	    width: .08rem;
	    left: auto;
	    right: 0;
	}

	section.main .book .actions .btn .inner .image-box {
	    width: .42rem;
	    height: .42rem;
	    left: .19rem;
	    margin-top: -.21rem;
	    border-radius: .42rem;
	}

	section.main .book .actions .btn.next .inner .image-box {
	    left: auto;
	    right: .19rem;
	}

	section.main .book .actions .btn .inner .image-box:before {
	    background-size: .42rem;
	}

	section.main .book .actions .btn .inner .image-box span {
	    font-size: 0.15rem;
	}

	section.main .book .actions .replay {
	    right: .33rem;
	    bottom: .24rem;
	}

	section.main .book .actions .replay span {
	    font-size: 0.12rem;
	}

	section.main .book .actions .replay img {
	    width: .32rem;
	}

	section.main .book .actions .replay * + img {
	    margin-left: .08rem;
	}


	/* Header */

	section.main .menu-wrapper {
	    top: .05rem;
	}

	section.main .menu-wrapper .logo {
	    width: .78rem;
	}

	section.main .menu-wrapper .actions {
	    padding-left: .1rem;
	    padding-right: .1rem;
	}

	section.main .menu-wrapper .actions > * + * {
	    margin-left: .1rem;
	}

	section.main .menu-wrapper .actions .btn-mute {
	    width: .2rem;
	    height: .14rem;
	}

	section.main .menu-wrapper .actions .btn {
	    width: .54rem;
	    height: .55rem;
	}

		section.main .menu-wrapper .actions .btn span {
			font-size: .1rem;
			width: .55rem;
			padding-left: 0;
			padding-right: 0;
		}

		section.main .menu-wrapper .actions .btn .image {
			height: .16rem;
		}
		section.main .menu-wrapper .actions .btn.control.play:before {
			margin-left: -0.05rem;
			margin-top: -0.1rem;
			border-top: 0.1rem solid transparent;
			border-bottom: 0.1rem solid transparent;
			border-left: 0.14rem solid white;
		}

		section.main .menu-wrapper .actions .btn.control:not(.play):after {
			width: 0.05rem;
			height: 0.16rem;
			margin-top: -0.08rem;
		}

		section.main .menu-wrapper .actions .btn.control:not(.play):before {
			width: 0.05rem;
			height: 0.16rem;
			margin-top: -0.08rem;
		}


		section.main .menu {
			padding-top: .15rem;
			padding-bottom: .15rem;
		}

    section.main .menu .top {
        padding-left: .8rem;
        padding-right: .8rem;
    }

    section.main .menu .top .name {
        padding-left: .36rem;
        padding-right: .36rem;
        font-size: 0.12rem;
    }

    section.main .menu .top .book-logo img {
        width: 1rem;
    }

    section.main .menu .menu-content {
        width: 6.5rem;
        height: 3.92rem;
        padding-left: 1.8rem;
        padding-right: 1.1rem;
        padding-top: .8rem;
        padding-bottom: .36rem;
        margin-top: -.2rem;
    }

    section.main .menu .menu-content .text {
        font-size: 0.14rem;
    }

    section.main .menu .menu-content * + .buttons {
        margin-top: .16rem;
    }

    section.main .menu .menu-content .buttons > * + * {
        margin-left: .12rem;
    }

    section.main .menu .menu-content .buttons > *.desktop-only + * {
        margin-left: 0;
    }


    /* Mark */

    section.main .mark {
        padding: .5rem;
    }

    section.main .mark .mark-content {
        font-size: 0.2rem;
    }
}