section#ClaseHome{
	background-image:url(../Imagenes/Clase/Clase_Home.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	
	text-align:center;
	
	padding:100px 0;
}
section#ClasePagina{
	background-color:#faf7f2;
	background-image:url(../Imagenes/Clase/Clase_Pagina.jpg);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:bottom center;
	background-size:cover;
}

section#ClaseHome > a{
	display:inline-block;
	height:30px;
	line-height:30px;
	width:auto;
	
	font-family: 'museo_sans700';
	font-weight:normal;
	font-size:14px;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	background-color:#8cbb00;
	
	padding:0 30px;
	margin:0 auto;
}
section#ClaseHome > a:hover{
	background-color:#6a8a0c;
	color:#FFF;
}

section#ClaseHome > h1,
section#ClasePagina > h1{
	color:#b0a093;
	padding-bottom: 3rem;
}
section#ClaseHome > h2,
section#ClasePagina > h2{
	color:#b0a093;
}

section#ClasePagina > p{
	color:#b0a093;
}



.ClaseHome,
.ClasePagina{
	display:table;
	height:auto;
	width:1100px;
	
	margin:0 auto 30px auto;
}

.ClaseHome > div,
.ClasePagina > div{
	display:block;
	height:400px;
	width:530px;
	text-decoration:none;
	float:left;
	
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	
	position:relative;
}

.ClaseHome > div:before,
.ClasePagina > div:before{
	display:block;
	content:'';
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	
	-webkit-transition:all 0.4s ease-in-out;
	   -moz-transition:all 0.4s ease-in-out;
		 -o-transition:all 0.4s ease-in-out;
			transition:all 0.4s ease-in-out;
}

.ClaseHome > div:after,
.ClasePagina > div:after{
	display:block;
	content:'';
	height:360px;
	width:490px;
	height:calc(100% - 40px);
	width:calc(100% - 40px);
	
	border:2px dashed #FFF;
	
	position:absolute;
	top:18px ;
	left:18px;
}
.ClaseHome > div:nth-child(1),
.ClasePagina > div:nth-child(1){
	float:left;
	text-align:right;
	text-shadow:2px 2px 1px rgba(0,0,0,0.3);
}

.ClaseHome > div:nth-child(1):before,
.ClasePagina > div:nth-child(1):before{
	background-color:rgba(242,203,102,0.5);
}

.ClaseHome > div:nth-child(2),
.ClasePagina > div:nth-child(2){
	float:right;
	text-align:left;
	text-shadow:2px 2px 1px rgba(0,0,0,0.3);
}
.ClaseHome > div:nth-child(2):before,
.ClasePagina > div:nth-child(2):before{
	background-color:rgba(190,184,64,0.5);
}

.ClaseHome > div > div,
.ClasePagina > div > div{
	display:block;
	height:auto;
	width:400px;
	
	position:absolute;
	top:50%;
	left:50%;
	
	-webkit-transform:translate(-50%,-50%);
	   -moz-transform:translate(-50%,-50%);
		 -o-transform:translate(-50%,-50%);
			transform:translate(-50%,-50%);
}

.ClaseHome > div > div > h3,
.ClasePagina > div > div > h3{
	display:block;
	height:auto;
	
	font-family: 'Lobster', cursive;
	font-size:40px;
	font-weight:normal;
	color:#FFF;
}
.ClaseHome > div > div > h5,
.ClasePagina > div > div > h5{
	display:block;
	height:auto;
	
	font-family: 'Lobster', cursive;
	font-size:18px;
	font-weight:normal;
	color:#FFF;
	
	padding:0 0 20px 0;
}

.ClaseHome > div > div > p,
.Clasehome > div > div > span,
.ClasePagina > div > div > p,
.ClasePagina > div > div > span{
	display:block;
	height:auto;
	
	font-family: 'museo_sans300';
	font-size:13px;
	font-weight:normal;
	color:#FFF;
	
	padding:0 0 10px 0;
}

.ClaseHome > div > div > p > b,
.ClaseHome > div > div > span > b,
.ClasePagina > div > div > p > b,
.ClasePagina > div > div > span > b{
	display:block;
	height:auto;
	
	font-family: 'museo_sans700';
	font-size:22px;
	font-weight:normal;
	color:#FFF;
	
}
.ClaseHome > div > div > span > b,
.ClasePagina > div > div > span > b{
	text-decoration:line-through;
}




.ClasePasos{
	display:block;
	height:auto;
	width:800px;
	
	margin:0 auto;
}
.ClasePasos > li{
	display:block;
	height:auto;
	width:100%;
	
	padding:0 0 10px 0;
	margin:0 0 40px 0;
}
.ClasePasos > li:last-child{
	margin:0;
}
.ClasePasos > li > h3{
	display:block;
	height:30px;
	line-height:30px;
	
	font-family: 'Lobster', cursive;
	font-weight:200;
	font-size:23px;
	text-align:center;
	color:#9b973b;
	
	padding:0 0 12px 0;
	margin:0 0 20px 0;
	position:relative;
}
.ClasePasos > li > h3:after{
	display:block;
	content:'';
	height:10px;
	width:60px;
	
	background-image:url(../Imagenes/Clase/decoracion.png);
	background-repeat:repeat-x;
	background-position:0 0;
	background-size:10px auto;
	
	position:absolute;
	top:100%;
	left:50%;
	margin-left:-30px;
}

.ClasePasos > li > p{
	white-space: pre-wrap;
	display:block;
	height:auto;
	line-height:110%;
	
	font-family: 'museo_sans300';
	font-size:15px;
	text-align:center;
	color:#666 !important;
	
	padding:0 0 10px 0;
}



.ClaseMenu{
	display:block;
	height:auto;
	width:1100px;
	
	margin:0 auto;
}
.ClaseMenu > ul{
	display:table;
	height:auto;
	width:500px;
	position:relative;
}
.ClaseMenu > ul > h2{
	display:block;
	height:50px;
	line-height:50px;
	
	font-family: 'Lobster', cursive;
	font-weight:normal;
	font-size:50px;
	
	padding:0 0 60px 0;
}
.ClaseMenu > ul > li{
	display:table;
	height:auto;
	width:100%;
	
	margin:0 0 20px 0;
	padding:20px 0;
	position:relative;
}

.ClaseMenu > ul > li > h4{
	display:block;
	height:30px;
	line-height:30px;
	
	font-family: 'museo_sans300';
	font-weight:normal;
	font-size:12px;
	text-transform:uppercase;
	color:#FFF;
	
	background-color:#8cbb00;
	padding:0 20px;
	border-radius:15px;
	
	position:absolute;
	left:-50px;
	top:0;
		
	-webkit-transform:translate(-50%,0);
	   -moz-transform:translate(-50%,0);
		 -o-transform:translate(-50%,0);
			transform:translate(-50%,0);
}

.ClaseMenu > ul > li > div{
	display:block;
	height:150px;
	width:150px;
	
	border:2px solid #ccc;
	border-radius:100px;
	
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	
	margin:15px;
	
	float:left;
	
	position:relative;
}
.ClaseMenu > ul > li > div:after{
	display:block;
	content:'';
	height:170px;
	width:170px;
	
	border:2px dotted #ccc;
	border-radius:100%;
	position:absolute;
	top:-12px;
	left:-13px;
}
.ClaseMenu > ul > li > h3{
	display:block;
	height:auto;
	line-height:30px;	
	width:300px;
	
	font-family: 'Lobster', cursive;
	font-weight:200;
	font-size:25px;
	
	float:right;
	
	padding:0 0 10px 0;
}
.ClaseMenu > ul > li > p{
	display:block;
	height:auto;
	line-height:110%;
	width:300px;
	
	font-family: 'museo_sans300';
	font-size:15px;	
	float:right;
}


.ClaseMenu > ul:nth-child(1){
	float:left;
	color:#f2cb66;
}
.ClaseMenu > ul:nth-child(1) > h2{
	text-align:right;
}
.ClaseMenu > ul:nth-child(1) > li > h4{
	display:none;
}

.ClaseMenu > ul:nth-child(1) > li > div{
	float:right;
	border-color:#f2cb66;
}
.ClaseMenu > ul:nth-child(1) > li > div:after{
	border-color:#f2cb66;
}
.ClaseMenu > ul:nth-child(1) > li > h3,
.ClaseMenu > ul:nth-child(1) > li > p{
	float:left;
	text-align:right;
}

.ClaseMenu > ul:nth-child(1) > li > h3 {
	color: #a13d80;
}

.ClaseMenu > ul:nth-child(1) > li > p{
	color: #666 !important;
}


.ClaseMenu > ul:nth-child(2){
	float:right;
	color:#beb840;
}
.ClaseMenu > ul:nth-child(2) > h2{
	text-align:left;
}
.ClaseMenu > ul:nth-child(2) > li > div{
	float:left;
	border-color:#beb840;
}
.ClaseMenu > ul:nth-child(2) > li > div:after{
	border-color:#beb840;
}
.ClaseMenu > ul:nth-child(2) > li > h3,
.ClaseMenu > ul:nth-child(2) > li > p{
	float:right;
	text-align:left;
}

.ClaseMenu > ul:nth-child(2) > li > h3 {
	color: #a13d80;
}

.ClaseMenu > ul:nth-child(2) > li > p{
	color: #666 !important;
}



@media only screen and (max-width:1024px) {
	section#ClaseHome > a{
		display:inline-block;
		height:auto;
		line-height:20px;
		width:80%;
		
		font-family: 'museo_sans700';
		font-weight:normal;
		font-size:14px;
		text-align:center;
		text-transform:uppercase;
		text-decoration:none;
		color:#fff;
		background-color:#8cbb00;
		
		padding:5px 10px;
		margin:0 auto;
	}

	.ClaseHome{
		display:table;
		height:auto;
		width:100%;
		margin:0 auto;
	}
	.ClaseHome > div{
		display:block;
		height:300px;
		width:90%;
		float:none;
		
		margin:0 auto 20px auto;
	}
	
	.ClaseHome > div:nth-child(1){
		text-align:left;
		float:none;
	}
	
	.ClaseHome > div:nth-child(2){
		text-align:left;
		float:none;
	}

	
	.ClaseHome > div > div{
		display:block;
		height:auto;
		width:70%;
	}
	.ClaseHome > div > div > h3{
		font-size:40px;
	}
	
	
	
	
	
	
	.ClasePagina{
		display:table;
		height:auto;
		width:100%;
		
		margin:0 auto 30px auto;
	}
	.ClasePagina > div{
		display:block;
		height:300px;
		width:50%;
		text-decoration:none;
		float:left;
		
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		
		position:relative;
	}
	
	
	.ClasePagina > div > div{
		display:block;
		height:auto;
		width:calc(100% - 80px);
	}
	.ClasePagina > div > div > h3{
		font-size:30px;
	}
	.ClasePagina > div > div > h5{
		font-size:16px;

	}
	.ClasePagina > div > div > p > b,
	.ClasePagina > div > div > span > b{
		font-size:20px;
	}
	
	
	.ClasePasos{
		display:block;
		height:auto;
		width:80%;
		
		margin:0 auto;
	}
	
	
	
	
	.ClaseMenu{
		display:block;
		height:auto;
		width:100%;
		margin:0 auto;
	}
	.ClaseMenu > ul{
		display:table;
		height:auto;
		width:90%;
		position:relative;
		
		margin:0 auto;
	}
	.ClaseMenu > ul > h2{
		font-size:50px;
		padding:0 20px 30px 20px;
	}
	.ClaseMenu > ul > li{
		display:table;
		height:auto;
		width:100%;
		
		margin:0 0 10px 0;
		padding:40px 0 20px 0;
		position:relative;
	}
	
	.ClaseMenu > ul > li > h4{		
		left:0;
		top:0;
		float:left;
			
		-webkit-transform:translate(0%,0);
		   -moz-transform:translate(0%,0);
			 -o-transform:translate(0%,0);
				transform:translate(0%,0);
	}
	
	.ClaseMenu > ul > li > div{
		float:none;
		margin:20px auto;
	}
	
	.ClaseMenu > ul > li > h3{
		display:block;
		float:none;
		width:100%;
		margin:0 auto;
		text-align:center !important;
	}
	.ClaseMenu > ul > li > p{
		width:100%;
		float:none;
		margin:0 auto;
		text-align:center !important;
	}
	
	
	.ClaseMenu > ul:nth-child(1){
		float:none;
		color:#f2cb66;
	}
	.ClaseMenu > ul:nth-child(1) > h2{
		text-align:right;
		padding:0 20px 30px 20px;
	}
	.ClaseMenu > ul:nth-child(1) > li > h4{
		display:block;
		right:10px;
		left:auto;
	}
	
	.ClaseMenu > ul:nth-child(1) > li > div{
		float:none;
		margin:20px auto;
		border-color:#f2cb66;
	}
	.ClaseMenu > ul:nth-child(1) > li > div:after{
		border-color:#f2cb66;
	}
	.ClaseMenu > ul:nth-child(1) > li > h3,
	.ClaseMenu > ul:nth-child(1) > li > p{
		float:left;
		text-align:right;
	}
	
	.ClaseMenu > ul:nth-child(2){
		float:none;
		color:#beb840;
	}
	.ClaseMenu > ul:nth-child(2) > h2{
		text-align:left;
	}
	.ClaseMenu > ul:nth-child(2) > li > h4{
		display:block;
		left:10px;
	}
	.ClaseMenu > ul:nth-child(2) > li > div{
		float:none;
		margin:20px auto;
		border-color:#beb840;
	}
	.ClaseMenu > ul:nth-child(2) > li > div:after{
		border-color:#beb840;
	}
	.ClaseMenu > ul:nth-child(2) > li > h3,
	.ClaseMenu > ul:nth-child(2) > li > p{
		float:right;
		text-align:left;
	}
}