@media screen and (min-width: 901px) and (max-width: 3000px) {
.devil {
	float:left;
	width:100%;
	height:90%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position:relative;	
	background:#fff;
	border:25px solid #fff;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
	.devil-left {
		float:left;
		position:absolute;
		left:0;
		top:50%;
		margin-top:-25px;
		cursor:pointer;
		z-index:20;
	}
	.devil-right {
		float:right;
		position:absolute;
		right:0;
		top:50%;
		margin-top:-25px;
		cursor:pointer;
		z-index:20;
	}
.devil-wrap {
	float:left;
	width:100%;
	height:100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position:relative;	
	background:#fff;
}
	.devil-wrap .slide {
		float:left;
		width:100%;
		height:100%;
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		position:relative;	
	}
		.devil-wrap .slide.intro {
			background:#000;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			align-items:flex-start;
			align-content:center;
		}
			.devil-wrap .slide.intro h3 {
				float:left;
				width:100%;
				text-align:center;
				color: #fefefe;
				position:absolute;
				top:0;
				left:0;
				top:5vw;
				font-family: AvenirLTStdBL;
				font-size: 2vw;
				font-weight: 300;
				line-height: 2vw;
				text-transform: uppercase;
				letter-spacing: 12px;
			}
			.devil-wrap .slide.intro .img {
				float:left;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				width:100%;
				height:100%;
				object-fit: cover;	
			}
		.devil-wrap .slide .left {
			float:left;
			width:50%;
			height:100%;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			position:relative;
		}
			.devil-wrap .slide .left .img {
				float:left;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				width:100%;
				height:100%;
				object-fit: cover;	
			}
		.devil-wrap .slide .right {
			float:left;
			width:50%;
			height:100%;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			position:relative;
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			align-content:center;
		}
			.devil-wrap .slide .right.background-1 { background-color: #eff1f4; }
			.devil-wrap .slide .right.background-2 { background-color: #eff4f1; }
			.devil-wrap .slide .right.background-3 { background-color: #eff4f4; }
			.devil-wrap .slide .right.background-4 { background-color: #e3edef; }
			.devil-wrap .slide .right.background-5 { background-color: #f1e8e4; }
			.devil-wrap .slide .right.background-6 { background-color: #f1ede4; }
			.devil-wrap .slide .right.background-7 { background-color: #f0e7e2; }
			.devil-wrap .slide .right.background-8 { background-color: #f3e5e2; }
			.devil-wrap .slide .right.background-9 { background-color: #f4f4f4; }
			.devil-wrap .slide .right.background-10 { background-color: #e6e6e6; }
			.devil-wrap .slide .right.background-11 { background-color: #e5e4e1; }
			.devil-wrap .slide .right.background-12 { background-color: #f0e9e2; }
			
			.devil-wrap .slide .right .box {
				float:left;
				width:75%;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				position:relative;
				display:flex;
				flex-direction:column;
				flex-wrap:wrap;
				justify-content:center;
				align-items:center;
				align-content:center;
			}
				.devil-wrap .slide .right .box h4 {
					float:left;
					width:100%;
					margin:0px 0px 0px 0px;
					padding:0px 0px 0px 0px;
					position:relative;
					color: #231f20;
					font-family: AvenirLTStdBL;
					font-size: 1.45vw;
					font-weight: 400;
					line-height: 1.45vw;
					text-transform: uppercase;
					text-align:center;
					letter-spacing: 0.4vw;
				}
				.devil-wrap .slide .right .box .text {
					float:left;
					width:100%;
					margin:1.7vw 0px 1.5vw 0px;
					padding:0px 0px 0px 0px;
					position:relative;
					color: #636363;
					font-family: 'AvenirLTStdBook';
					font-size: 1.1vw;
					font-weight: 400;
					line-height: 1.5vw;
					text-align:center;
				}
				.devil-wrap .slide .right .box .devil-arrow {
					float:left;
					margin:0px 0px 0px 0px;
					padding:0px 0px 0px 0px;
					position:relative;			
				}
}			

@media screen and (min-width: 0px) and (max-width: 900px) {
.devil {
	float:left;
	width:100%;
	height:90%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position:relative;	
	background:#fff;
	border:25px solid #fff;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
	.devil-left {
		float:left;
		position:absolute;
		left:0;
		top:50%;
		width:30px;
		margin-top:-15px;
		cursor:pointer;
		z-index:20;
	}
	.devil-right {
		float:right;
		position:absolute;
		right:0;
		top:50%;
		width:30px;
		margin-top:-15px;
		cursor:pointer;
		z-index:20;
	}
.devil-wrap {
	float:left;
	width:100%;
	height:100%;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	position:relative;	
	background:#fff;
}
	.devil-wrap .slide {
		float:left;
		width:100%;
		height:100%;
		margin:0px 0px 0px 0px;
		padding:0px 0px 0px 0px;
		position:relative;	
	}
		.devil-wrap .slide.intro {
			background:#000;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
			justify-content:center;
			align-items:flex-start;
			align-content:center;
		}
			.devil-wrap .slide.intro h3 {
				float:left;
				width:100%;
				text-align:center;
				color: #fefefe;
				position:absolute;
				top:0;
				left:0;
				top:5vw;
				font-family: AvenirLTStdBL;
				font-size: 2vw;
				font-weight: 300;
				line-height: 2vw;
				text-transform: uppercase;
				letter-spacing: 2px;
			}
			.devil-wrap .slide.intro .img {
				float:left;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				width:100%;
				height:100%;
				object-fit: cover;	
			}
		.devil-wrap .slide .left {
			float:left;
			width:100%;
			height:50%;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			position:relative;
			display: flex ;
			flex-direction: row ;
			flex-wrap: wrap ;
			justify-content: center ;
			align-items: flex-end ;
			align-content: center ;
		}
			.devil-wrap .slide .left .img {
				float:left;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				width:70%;
				height:70%;
				object-fit: cover;	
			}
		.devil-wrap .slide .right {
			float:left;
			width:100%;
			height:50%;
			margin:0px 0px 0px 0px;
			padding:0px 0px 0px 0px;
			position:relative;
			display:flex;
			flex-direction:column;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			align-content:center;
		}
			.devil-wrap .slide .right.background-1 { background-color: #eff1f4; }
			.devil-wrap .slide .right.background-2 { background-color: #eff4f1; }
			.devil-wrap .slide .right.background-3 { background-color: #eff4f4; }
			.devil-wrap .slide .right.background-4 { background-color: #e3edef; }
			.devil-wrap .slide .right.background-5 { background-color: #f1e8e4; }
			.devil-wrap .slide .right.background-6 { background-color: #f1ede4; }
			.devil-wrap .slide .right.background-7 { background-color: #f0e7e2; }
			.devil-wrap .slide .right.background-8 { background-color: #f3e5e2; }
			.devil-wrap .slide .right.background-9 { background-color: #f4f4f4; }
			.devil-wrap .slide .right.background-10 { background-color: #e6e6e6; }
			.devil-wrap .slide .right.background-11 { background-color: #e5e4e1; }
			.devil-wrap .slide .right.background-12 { background-color: #f0e9e2; }
			
			.devil-wrap .slide .right .box {
				float:left;
				width:75%;
				margin:0px 0px 0px 0px;
				padding:0px 0px 0px 0px;
				position:relative;
				display:flex;
				flex-direction:column;
				flex-wrap:wrap;
				justify-content:center;
				align-items:center;
				align-content:center;
			}
				.devil-wrap .slide .right .box h4 {
					float:left;
					width:100%;
					margin:0px 0px 0px 0px;
					padding:0px 0px 0px 0px;
					position:relative;
					color: #231f20;
					font-family: AvenirLTStdBL;
					font-size: 3.45vw;
					font-weight: 400;
					line-height: 3.45vw;
					text-transform: uppercase;
					text-align:center;
					letter-spacing: 0.4vw;
				}
				.devil-wrap .slide .right .box .text {
					float:left;
					width:100%;
					margin:1.7vw 0px 1.5vw 0px;
					padding:0px 0px 0px 0px;
					position:relative;
					color: #636363;
					font-family: 'AvenirLTStdBook';
					font-size: 2.1vw;
					font-weight: 400;
					line-height: 2.5vw;
					text-align:center;
				}
				.devil-wrap .slide .right .box .devil-arrow {
					float:left;
					margin:0px 0px 0px 0px;
					padding:0px 0px 0px 0px;
					position:relative;			
				}
}