*{
  margin: 0px;
  padding: 0px;
}

a{
  text-decoration: none;
  color: inherit;
  transition: 0.5s;
}

@font-face {
    font-family: calm;
    src: url('../fonts/calm.ttf');
}


.izquierda{
  float: left;  
}
.derecha{
  float: right;  
}
.clear{
  clear: both;
}

div.nota{
	font-style: italic;
	font-size: 0.8em;
	margin: 10px;
}

form label{
	display: inline-block;
	min-width: 80px;
}

input[type="submit"], input[type="button"], input[type="reset"]{
	padding: 5px 10px 5px 10px;
	margin: 5px;
	cursor: pointer;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(60,60,60,0.6);
	border: solid 1px black;
}

input[type="text"], input[type="password"],  input[type="email"]{
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 2px rgba(60,60,60,0.4);
	border: solid 1px black;
}

html{
  background: linear-gradient(to bottom right, #99f,#eef);
  background-size: 100% 100%;
  background-attachment: fixed;  
}


body{
  font-family: Verdana, Arial;
  background-color: white;
  width: 1100px;
  margin: auto;
  box-shadow: 0px 0px 8px rgba(60,60,60,0.8);
  border: solid 10px white;
  outline: solid 2px darkblue;
}


h2{
  margin: 10px 0px 15px 0px;
  font-variant: small-caps;
  color: #444;
  font-size: 2em; 
}

h3{
  margin: 10px 0px 15px 0px;
  font-variant: small-caps;
  color: #444;
  font-size: 1.5em; 
}

header{
	position: relative;
	padding: 30px;
	color: white;
	text-shadow: 3px 3px 3px black;
}

#logo{
	position: absolute;
	top: 0px;
	left: 20px;
	height: 100%;
}

header, footer{
  background: linear-gradient(to bottom, white, #ddf);
  padding: 20px;
}

header h1{
	margin: 10px 0px 0px 0px;
	position: relative;
	text-align: center;
	font-size: 80px;
	font-family: 'calm';
}

header h2{
  margin: 0px 0px 10px 0px;
  text-align: right; 
  font-size: 40px;
  margin-right: 100px;
  color: white;
  font-family: 'calm';
}



nav{
  position: relative;
  background-color: #004;
  text-align: center;
  font-size: 1.25em;
}

nav ul{
  padding: 10px 0px 0px 0px;
}

nav li{
   display: inline-block;
   cursor: pointer;
   list-style-type: none;
   text-align: center;
   padding: 5px 30px 5px 30px;
   margin: 0px 10px 0px 10px
   font-variant: small-caps;
   color: white;
   border-bottom: solid 8px #004;
   transition: 0.8s;
}

nav li:hover{
  border-bottom: solid 8px white;
}

nav li.current{
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #eef;
  color: black;
  border-bottom: solid 8px #eef;
}

#login{
	padding: 5px 5px 5px 20px;
	text-align: right;
	background-color: #eef;
}
#login form{
	display: inline-block;
}
#login input[type="text"], #login input[type="password"]{
	width: 100px;
}

div.reg_exito{
	padding: 80px 0px 80px 0px;
	font-size: 2em;
	color: #33dd33;
	font-weight: bold;
}
div.reg_error{
	padding: 80px 0px 80px 0px;
	font-size: 2em;
	color: #dd3333;
	font-weight: bold;
}

#info{
	margin: 20px 40px 20px 40px;
}

#info .cols{
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
	
	webkit-column-rule-style: solid; 
    -moz-column-rule-style: solid; 
    column-rule-style: solid;
}
#info .cols p::first-letter{
	font-size: 1.4em;
}


#info ul, #info ol{
	margin: 20px; 	
}

#info .logo{
	height: 200px;
	width: 260px;
}

#info li{
	margin: 20px;
	font-variant: small-caps;
}
#info li span{
	font-weight: bold;
}


#info p{
  text-align: justify;
  margin-bottom: 5px;
}

#links{
    position: relative;
    height: 480px;
    width: 460px;
    margin: 20px 0px 0px 40px;
}
#links figure{
  position: absolute;
  background: linear-gradient(to bottom, white, #ddf);
  border-radius: 100px;
  height: 160px;
  width: 160px;
  overflow: visible;
  text-align: center;
  box-shadow: 2px 2px 2px black;
  transition: 0.5s;
  z-index: 1;
}



#links figure:first-of-type{
  top: 120px;
  left: 170px;
  z-index: 1;
}
#links figure:nth-of-type(2){
  top: 240px;
  left: 0px;
  z-index: 2;
}
#links figure:nth-of-type(3){
  top: 240px;
  left: 340px;
  z-index: 2;
}
#links figure:nth-of-type(4){
  top: 420px;
  left: 80px;
  z-index: 3;
}
#links figure:nth-of-type(5){
  top: 420px;
  left: 260px;
  z-index: 3;
}

#links figure img{
  height: 130px;  
  width: 120px;
}

#links figure:hover{
  transform: scale(1.2);
  box-shadow: 8px 8px 8px grey;
  z-index: 10;
}

#links figure figcaption, #centro figure figcaption{
  font-style: italic;
  font-size: 1.25em;
  background-color: white;
  padding: 5px;
  border: solid 1px black;
  box-shadow: 3px 3px 3px black;
}

#clase{
	position: relative;
	margin: 20px 40px 0px 0px;
	width: 480px;
}

#clase form{
	position: absolute;
	top: 25px;
	right: 0px;
}

#clase select, #clase input{
	margin: 5px;
	padding: 5px;
	border-radius: 5px;
}

#clase .mesa{
	height: 70px;
	width: 70px;
	font-size: 0.8em;
}
#clase .resizable{
	transition: 0.3s;
}
#clase .resizable:hover{
	transform: scale(1.15);
	background-color: #66f;
	color: white;
	box-shadow: 5px 5px 5px rgba(60,60,60,0.7);
}


#clase .profe{
	font-weight: bold;	
}

#clase .curso{
	padding: 10px 0px 10px 0px;
}

img.icono{
	margin: 0px 5px 0px 5px;
	height: 50px;
	width: 46px;
	vertical-align: middle;
}

.profe, .mesa{
	text-align: center;	
	background-color: #eef;
	padding: 5px;
	margin: 5px;
	border: solid 1px black;
	border-radius: 5px;
  	box-shadow: 2px 2px 2px grey;		
}

#clase .mesa img, #clase .profe img{
	height: 45px;
	width: 45px;
	margin: 0px 5px 0px 5px;
	vertical-align: middle;
}

#clase figcaption{
	font-style: italic;
}
#clase .mesa figcaption{
	font-size: 0.85em;
}

#centro figure{
  background: linear-gradient(to bottom, white, #ddf);
  border-radius: 120px;
  height: 220px;
  width: 220px;
  overflow: visible;
  text-align: center;
  box-shadow: 2px 2px 2px black;
  margin-right: 100px;
}

#centro figure img{
  height: 200px;  
  width: 200px;
}

#centro{
	min-height: 350px;
	padding: 40px;
}

#centro ol{
	margin: 20px;
}
#centro li{
	margin: 10px 0px 10px 20px;
	font-style: italic;
	list-style-image: url(../imagenes/ball.png);
}

#centro li:hover a{
	color: red;
}

section.formulario img{
	height: 300px;
	width:480px;
	margin: 80px 100px 0px 0px;
}

section.formulario form{
	width: 380px;
	margin: 10px 0px 10px 20px;
	padding: 20px;
}

section.formulario form fieldset{
	padding: 10px;
	border-radius: 10px;
	margin: 10px 0px 20px 0px;	
}
section.formulario form legend{
	font-style: italic;
	color: grey;
}
section.formulario form label{
	display: inline-block;
	min-width: 120px;
}

footer{
  margin-top: 20px;
  height: 40px;
  padding: 60px;
  text-align: center;
}

footer a{
	color: blue;
	text-decoration: underline;
}

footer img.micrologo{
	vertical-align: middle;
	height: 30px;
	width: 30px;
}
footer a img{
	transition: 0.5s;
}
footer a img:hover{
	transform: scale(1.5) rotate(5deg);
}

#logos img{
	height: 50px;
	width: 50px;
	margin: 0px;
}

#validaciones img{
	height: 30px;
	width: 100px;
	margin: 0px 25px 0px 25px';
}

div.correcto{
		color: green;
		padding: 40px 0px 0px 40px;
		font-weight: bold;
		font-size: 20px;	
}
div.error{
		color: red;
		padding: 40px 0px 0px 40px;
		font-weight: bold;
		font-size: 20px;	
}