/* Docs sample */
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#canvas {
	width: 960px;
	height: 600px;
	margin: 100px auto;
}

#book-zoom {
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-ms-transition: -ms-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

.animated {
	-webkit-transition: margin-left 0.2s ease-in-out;
	-moz-transition: margin-left 0.2s ease-in-out;
	-o-transition: margin-left 0.2s ease-in-out;
	-ms-transition: margin-left 0.2s ease-in-out;
	transition: margin-left 0.2s ease-in-out;
}

.sample-docs {
	margin-top: 20px;
	width: 942px;
	height: 600px;
}

.sample-docs .page {
	width: 471px;
	height: 600px;
	background: white;

	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	-ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.sample-docs .hard {
	background-image: url(../pics/covers.png);
}

.sample-docs .p2 {
	background-position: -471px 0;
}

.sample-docs .p28 {
	background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
	background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
	background-image: linear-gradient(left, #fff 95%, #dadada 100%);
}

.sample-docs .p29 {
	background-position: -942px 0;
}

.sample-docs .p30 {
	background-position: -1413px 0;
}

.sample-docs .even .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../pics/right-border.png);
	background-position: right top;
	background-repeat: repeat-y;
}

.sample-docs .odd .gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../pics/left-border.png);
	background-position: left top;
	background-repeat: repeat-y;
}

.sample-docs .page-wrapper {
	-webkit-perspective: 2000px;
	-moz-perspective: 2000px;
	-ms-perspective: 2000px;
	perspective: 2000px;
}

.sample-docs .loader {
	background-image: url(../pics/loader.gif);
	width: 22px


}
.mry-logo {
	position: fixed;
	top: 3%;
	left: 2%;
	width: 80px;
	background-size: contain;
	background-repeat: no-repeat;
}
.btn.btn-default {
	position: center;
	z-index: 1;
	border: 1px solid rgb(255, 255, 255);
	color: transparent;
	background-color: transparent;
	transition: all 0.5s ease-out;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: lighter;
	}
	.btn.btn-default:before:before {
	content: "";
	position: center;
	top: 8px;
	left: 5px;
	width: 500px;
	height: 500px;
	background-color: transparent;
	transition: all 0.5s ease-out;
	z-index: -1;
	}
	.btn.btn-default:hover {
	background-color: transparent;
	border-color: red;
	}
	.btn.btn-default:before {
	width: 500px;
	}
	.btn {
		margin-top: -20px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 5px;
		-moz-transition: 0.5s ease;
		-webkit-transition: 0.5s ease;
		transition: 0.5s ease;
		border: none;
		font-size: 15px;
		font-weight: bold;
		outline: none !important;
		padding: 12px 16px;
		text-decoration: none;
	  }
	  .btn.btn-default {
		background-color: transparent;
		color: white;
	  }
	  .btn.btn-primary {
		background-color: transparent;
		color: white;
		border: 2px solid white;
	  }
	  .btn.btn-small {
		padding: 8px 12px;
	  }
	  .next {
		position: fixed;
		top: 80%;
		left: 45%;
		background-size: contain;
		background-repeat: no-repeat;
	  }

	  .text-dis {	margin-top: 20%;
		color: white;
		
		font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		
	
	}
	  
	  @media only screen and (max-device-width: 500px), (max-width: 500px)  {
		/* styles for devices with a screen width of 500 pixels or smaller, 
		   including the iPhone 12 Pro, and browser windows with a width of 500 pixels or smaller */
		   body {
			overflow: hidden;
		  }
		  
		   #deskimage {
			background-position: -200px;
		  }
		  .description dd:nth-of-type(3) {
			width: 330px;
		  }
		  .description dd:nth-of-type(4) {
			width: 300px;
		  }
		  .btn-default.next {
			font-size: 40px !important;
			padding: 15px 30px !important;
			left: 37%;
			top: 70%;
		  } 
		  body {
			background-size:250%;
			background-position: 2290px;
		  }
		  #canvas {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.mry-logo {
			position: fixed;
			top: 22%;
			left: 33%;
			width: 320px;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.text-dis {
			display: none;
		}
		}