html {
	  overflow-x: hidden;
  }
body {
	
	text-align: left;
	position: relative;
	margin: auto;
	width: 1024px;
	
}

p { font: normal 24px Memima2; line-height : 20px; }

ul { list-style-type: none; }

img { border: 2px grey solid; border-radius: 12px; }

ul { list-style-type: none; }

h1 { color: white; width: 710px; height: 160px; font-size: 72px; letter-spacing: 14px; text-shadow: 2px 0 0 orangered, -2px 0 0 orangered, 0 2px 0 orangered, 0 -2px 0 orangered, 1px 1px orangered, -1px -1px 0 orangered, 1px -1px 0 orangered, -1px 1px 0 orangered; }

h1:hover { color: red; text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }

h2 { font: bold 27px Memima2; text-decoration: underline; }

legend { font: bold 2.3em Memima2; }


/* markers for design */

	nav {
		position: fixed;
		text-align: center;
		background-color: #C9B490;
		left: 40;
		top: 0;
		bottom: 0;
		width: 200px;
		padding: 10px;
	}
	nav ul {
		list-style: none;
	}
	#content {
		margin: 10px 0px 30px 224px;
		}
		#content  a{
		display: inline;
		}
	#main {
		#padding: 10px;
		#line-height: 20; 
	}
	footer {
		width: 100%; 
		background: #C9B490;
		position: fixed;
		bottom: 0;
		left: 200;
	}
	
/*********************/

#kaki {
	color: brown;
	background-color: #F9E890;
	background-image: url("../img/fractal_amarillo.jpg");
	background-repeat: no-repeat;
	padding-top: 14px;
	}
#kaki a { color: firebrick; }
#cyan {
	color: royalblue;
	background-color: rgb(179, 255, 255);
	background-image: url("../img/nubes.png");
	background-repeat: no-repeat;
	padding-top: 14px;
	}
#cyan a { color: royalblue; }
#verde {
	color: forestgreen;
	background-color: rgb(173, 232, 165);
	background-image: url("../img/leaves.png");
	background-repeat: no-repeat;
	padding-top: 14px;
	}
#verde a { color: forestgreen; }
#kaki, #verde,#cyan, #rematar { width: 820px; }
#actividad {
	float: left;
	margin-bottom: 12px;
	display: block;
}
#marquitos { 
	color: white;
	border: 2px olive solid;
	border-radius: 12px;
	background: tan;
	padding: 4px;
	}
#marquitos a:hover {
	background: #AD966A;
	color: white;
}
#marquitos:hover {
	background: #AD966A;
}
#marquitos2 { 
	color: white;
	border: 2px #FCE2B4 solid;
	margin: 1px;
	border-radius: 33px;
	background-color: orange;
	padding: 8px;
	padding-top: 12px;
	}
#marquitos2:hover {
	#background-color: darkorange;
}
#marquitos3
{
	margin-top: -14px;
	padding-top: 18px;
	height: 16px;
	background: tan;	
}
#marquitos3 span {
		
	font: normal 16px Bromine;
	border-radius: 12px 12px 0px 0px;
	text-align: center;
	float: left;
}
#marquitos3 a:hover
{
	color: white;
	text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
}
#campo { 
	#color: white;
	border: 2px #A52A2A solid;
	border-radius: 12px;
	padding: 12px;
	}
#cls { 
	width: 355px;
	height: 350px;
	color: white;
	background-image: url('../img/bici4.png');
    background-repeat: no-repeat;
	#background-color: tomato;
}
.presentar img {
	#box-shadow: 3px 3px 3px burlywood;
	border: 0px;

    #-moz-box-shadow: 3px 3px 4px burlywood;
    #-webkit-box-shadow: 3px 3px 4px burlywood;
    #box-shadow: 3px 3px 4px burlywood;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='burlywood')";
    /* IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='burlywood');	
}
.presentar a, .presentar img, .presentar a span {
border-radius: 8px;
}
.presentar a {
position: relative;
display: block;
}
.presentar a span {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.presentar a:hover span {opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#colores{
	transition: 1.5s ease;
 	-moz-transition: 1.5s ease; /* Firefox */
 	-webkit-transition: 1.5s ease; /* Chrome - Safari */
 	-o-transition: 1.5s ease; /* Opera */
}
 
#colores:hover{
	transform : rotate(360deg);
	-moz-transform : rotate(360deg); /* Firefox */
	-webkit-transform : rotate(360deg); /* Chrome - Safari */
	-o-transform : rotate(360deg); /* Opera */
}
#trabadas {
	height: 100px;
	width: 100px;
	display: table-cell;
	float: left;
	margin: 18px;
	text-align: center;
}
	.zoom{
		transition: 0.5s ease;
 		-moz-transition: 0.5s ease; /* Firefox */
 		-webkit-transition: 0.5s ease; /* Chrome - Safari */
 		-o-transition: 0.5s ease; /* Opera */
	}
	.zoom:hover{
		transform : scale(1.4);
		-moz-transform : scale(1.4); /* Firefox */
		-webkit-transform : scale(1.4); /* Chrome - Safari */
		-o-transform : scale(1.4); /* Opera */
		-ms-transform : scale(1.4); /* IE9 */
	}
.morph {
  -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
       -o-transition: all 0.7s ease;
      -ms-transition: all 0.7s ease;
          transition: all 0.7s ease;
}
 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(-1080deg);
     -moz-transform: rotate(-1080deg);
       -o-transform: rotate(-1080deg);
      -ms-transform: rotate(-1080deg);
          transform: rotate(-1080deg);
		  
}

#girar{
	transition: 2.5s ease;
 	-moz-transition: 2.5s ease; /* Firefox */
 	-webkit-transition: 2.5s ease; /* Chrome - Safari */
 	-o-transition: 2.5s ease; /* Opera */
}
 
#girar:hover{
	transform : rotate(360deg);
	-moz-transform : rotate(360deg); /* Firefox */
	-webkit-transform : rotate(360deg); /* Chrome - Safari */
	-o-transform : rotate(360deg); /* Opera */
}
#titulos {
	padding: 8px;
	font: bold 19px Memima2;
}
#rematar {
	background-color: #ffcc66;
	border-radius: 0px 0px 12px 12px;
	height: 40px;
}

/* para ver las fotos de los profes */


#photo {
        width: 200px;
        height: 148px;
        border: #FCE6B4 2px solid; 
        background-color: #FCE6B4; 
        border-radius: 12px; 
        margin: auto;
}
.slider {
	#width: 96%;
	height: 140px;
	margin: 0px 10px;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 600%;
	
	animation: cambio 18s infinite alternate linear;
}

.slider li {
	width: 100%;
	list-style: none;
}

.slider img {
	width: 100%;
	border-radius: 0px;
}

@keyframes cambio {
	
	0% {margin-left: 0;}
	15% {margin-left: 0;}
	
	18% {margin-left: -100%;}
	33% {margin-left: -100%;}
	
	35% {margin-left: -200%;}
	50% {margin-left: -200%;}
	
	53% {margin-left: -300%;}
	66% {margin-left: -300%;}
	
	68% {margin-left: -400%;}
	83% {margin-left: -400%;}
	
	86% {margin-left: -500%;}
	100% {margin-left: -500%;}

}

/*********************/