@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);

*{
    box-sizing: border-box;
}

body {
    background-color: #f7f5fb;
	font-family: 'Roboto Condensed', sans-serif;
}

main {
	width: 960px;
	background-color: #f7f5fb;
	margin:auto;
}


header {
	height: 68px;
	width: 100%;
	background-color: #f7f5fb;
}

h1 {
  color: #f7f5fb;
  font-size: 50px;
}


h2 {
    color: #d20f50;
    font-size: 20px;
    letter-spacing: 2px;
}

h3 {
  color:#083249;
  font-size: 15px;
  text-align: left;
}

h4 {
  color:#083249;
  font-size: 12px;
  text-align: left;
}

h5 {
    color: #0e066d;
    font-size: 50px;
    margin-top: 40px;
    line-height: 0.7;
    text-align: center;   
    
}

p {
    color: #083249;
    font-size: 14px;
    text-align: justify;
    word-break: break-all;
}

p2 {
   color: #d20f50;
    font-size: 12px; 
}

header {
	height: 68px;
	width: 100%;
	background-color: #f7f5fb;
}

header section {
width: 100%;
height: 30px;
margin-top: 25px;
}


header div#logo-danza {
	float:left;
}

header div#logo-acumar {
	float:right;
	margin-top:20px;
}

header section div#encabezado {
     border-top: 1px solid #083249;
    border-bottom: 1px solid #083249;
    height: 30px;
    width: 960px;
    position: absolute;
}

header section div#encabezado nav {
	background:transparent;
}

header section div#encabezado nav ul {
	list-style:none;
	padding-left:0;
	margin:0;
	overflow:hidden;
}

header section div#encabezado nav > ul > li {
	float: left;
  width: 12.5%;
  height: 30px;
  margin-right: 10px;
  margin-left: 10px;
    text-align: center;
}

header section div#encabezado nav ul li a {
	text-decoration:none;
	color:#083249;
	display:block;
    font-size: 15px;
    letter-spacing: 2px;
    padding:5px 5px;
      transition: all 1s;
}

header section div#encabezado nav ul li a:hover {
	background:#d20f50;
	color:#083249;
    width:140px;
    height:30px;
      transition: all 1s;
    
}

header section div#encabezado nav > ul > li:hover div {
	display:table;
}

/*Submenu*/
header section div#encabezado nav ul li div {
	width: 14.6%;
    position: absolute;
	background:#083249;
	box-sizing:border-box;
	display:none;
    z-index: 100;
}

header section div#encabezado nav ul li div ul {
	display:table-cell;
    box-sizing:border-box;
}



header section div#encabezado nav ul li div ul .titulo {
	background:#c2c3c8;
	color:#d20f50;
    border: 1px solid #d20f50;
}

header section div#encabezado nav ul li div ul .titulo a {
	color:#d20f50;
}
 

header section div#encabezado nav ul li div ul .titulo a:hover {
	background:none;
}

header section div#encabezado nav ul li div ul li{
    width:100%;
    height:30px;
}

header section div#encabezado nav ul li div ul li a {
	color: #f7f5fb;
	font-size: 12px;
    letter-spacing: 0px;
}







section.portada  {
	background-color: transparent;
	clear: both;
    margin-bottom: 150px;
    margin-top: 40px;
}

section.portada h1 {
	background-color: transparent;
	clear: both;
    margin-top: -200px;
    margin-left: 20px;
}

section.portada div#titulogaleria h1 {
    color: #083249;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 50px;
}

section.modulo3 {
    clear: both;
    float: left;
    margin-top: 20px;
}

section.modulo3 div {
    width: 632px;
    background-color: #009c83;
}

section.modulo3 ul div.bloques {
    width: 300px;
    height:220px;
    background-color: #c2c3c8;
}

section.modulo3 ul {
    padding-left: 0px;

}

section.modulo3 ul li {
      display: block;
  float: left;
  width: 300px;
  margin-right: 20px;
    margin-bottom: 30px;

}
section.modulo3 ul li#agenda{
    text-align: center;
    background-color: #009c83;
    height: 220px;
}

section.modulo3 ul li img {
      margin-top: 0px;

}

section.modulo3 h1 {
      margin-top: 75px;
  border-top: solid #f7f5fb;
  border-bottom: solid #f7f5fb;
  letter-spacing: 5px;

}

section.modulo3 h2 {
    margin-left: 20px;
    padding-top: 1px;
    color:#f7f5fb;
}

section.modulo3 h3 {
  text-align: left;

}

section.modulo3 h4 {
 text-align: left;
  font-size: 12px;
  margin-left: 20px;
  margin-top: 25px;
  border-top: solid 1px;
  line-height: 2;
}

section.modulo3 ul li div.bloques h4 {
    text-align: left;
    font-size: 12px;
    border:none;
    line-height: 10px;
}


section.modulo3 p {
  margin-top: 1px;
}

section.modulo3 j {
    color: #d20f50;
    font-size: 12px;
     transition: all 1s;
}

section.modulo3 j:hover {
  transition: all 0.5s;
  opacity: 0.4;
  color: #009c83;
  letter-spacing: 2px;
}



section div#contenedor {
margin-right: 20px;
margin-bottom: 0px;
float:left;
}



section div#selectores nav{
width: 30%;
float:left;
}

section div#selectores nav ul{
list-style: none;
}

section div#selectores nav ul li a {
text-decoration: none;
float: left;
color: #083249;
letter-spacing: 2px;
margin-bottom: 20px;
background-color: transparent;
width: 310px;
padding-top: 10px;
border-top: 1px solid #d20f50;
transition: all 1s;
}

section div#selectores nav ul li a:hover {
  margin-left: 20px;
  transform: translate;
  opacity: 0.4;
  font-size: 20px;
  transition: all 1s;
}

section div#circulos {
margin-top: 50px;
}

section div#circulos nav ul{
list-style: none;
  float: left;
}


section div#circulos nav ul li a{
     float: left;
  letter-spacing: 2px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  color: #009c83;
  border: solid 1px;
  line-height: 3;
  border-top: solid;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 50px;
      transition: all 1s;
}

section div#circulos nav ul li a:hover {
  font-size: 15px;
  transition: all 1s

}


section div#transparenciainicio {
  height: 25%;
  width: 100%;
  background-color: #083249;
  padding-top: 40px;
  padding-left: 10px;
    float: left;
}

section div#transparenciainicio h2 {
width:630px;
height: 20px;
margin: 0px;
}

section div#transparenciainicio h1 {
  width: 630px;
  font-size: 80px;
  margin-top: 5px;
  line-height: 0.85;
}


section div#bailando {
  width: 100%;
}

section div#bailando img{
  width: 100%;
}


section.modulo3 div#subtituloinicio {
  width: 100%;
}

section div#inscripcion {
margin-bottom: 45px;
}



section#cronograma {
    margin-top: 50px;
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

section#cronograma ul {
    width: 420px;
  margin-right: 60px;
  float: left;
  padding-left: 0px;
  border-top: solid 5px grey;
}

section#cronograma ul li {
    width: 210px;
  display: block;
  float: left;
  background-color: white;
  height: 127px;
}


section#cronograma ul li h2{
    text-align: center;
    letter-spacing: 1px;
    color: #009c83;
}
section#cronograma ul li h3{
    text-align: center;
    line-height: 3px;
}

section#cronograma ul li p{
    line-height: 7px;
    color: gray;
    font-size: 12px;
    text-align: center;
}

section.prueba {
   float: left;
  width: 100%;
  margin-bottom: 20px;
}

section.prueba ul {
  margin-right: 80px;
  float: left;
  padding-left: 0px;
    width: 400px
}

section.prueba ul div {
    background-color: #c2c3c8;
}

section.prueba ul li {
  display: block;
  float: left;
    width: 200px;
}


section.galeria {
    clear: both;
    float: left;
    margin-top: 20px;
}


section.galeria ul {
    padding-left: 0px;
}

section.galeria ul li {
    display: block;
    float: left;
    width: 300px;
    margin-right: 20px;
    margin-bottom: 1px;
}

section.galeria ul li#txtgaleria {
    background-color: white;
  height: 200px;
}

li#txtgaleria h3 {
  text-align: center;
  letter-spacing: 1px;
  margin-top: 60px;
    color:#009c83;
}

li#txtgaleria p {
    color: gray;
    font-size: 12px;
    text-align: center;
    width: 200px;
    margin-left: 50px;
}

li#bottom {
    margin-bottom: 50px;
}

section.modulo2 {
    clear: both;
    float: left;
    width: 642px;
}

section.modulo2 div {
    background-color: #cbc8e1;
      margin-top: 36px;
}

section.modulo2 ul {
    padding-left: 0px;

}
section.modulo2 ul li {
      display: block;
  float: left;
  width: 300px;
  margin-right: 20px;
  margin-bottom: 30px;
}

section.modulo2 h2 {
    margin-left: 20px;
    padding-top: 1px;
    color:#f7f5fb;
}

section.portadah {
     margin-top: 30px;
}

section.historiariachuelo {
     margin-top: 30px;
}

aside {
	width: 300px;
  float: right;
      margin-top: 20px;
}

aside div {
    width: 300px;
  background-color: #cbc8e1;
  margin-left: 10px;
}

aside div h2 {
    margin-left: 20px;
    padding-top: 1px;
    color:#f7f5fb;
}

aside ul {
    display: block; 
  padding-left: 20px;
  margin-top: 40px;
  margin-left: 10px;
  border-left: solid 2px #19908e;
}

aside ul li {
    display: block;
  margin-bottom: 40px;
}


section.otrosproyectos {
    clear: both;
    float: left;
      margin-top: 20px;
}


section.otrosproyectos ul {
    padding-left: 0px;
}

section.otrosproyectos ul li {
    display: block;
    float: left;
    margin-bottom: 10px;
}

section.portada div#portadaequipo {
    float:left;
    margin: 0;
}

aside div#noticiasriachuelo {
  position: absolute;
  height: 600px;
  margin-top: 35px;
  padding-left: 20px;
    width: 300px;
  padding-top: 20px;
  margin-left: 0;
}

aside div#noticiasriachuelo p{
    letter-spacing: 5px;
}

aside div#noticiasriachuelo h4{
  border-top: solid 1px;
  line-height: 2;
  margin-top: 40px;
}

aside div#noticiasriachuelo h4 a{
 text-decoration: none;
 color:#0e066d;
      transition: all 1s;
}

aside div#noticiasriachuelo h4 a:hover {
 color:#f7f5fb;
      transition: all 1s;
}

a {
 text-decoration: none;
}









footer {
    width: 100%;
    overflow: auto;
    padding-bottom: 20px;
    border-top: solid 2px #083249;
}

footer nav ul {
  padding: 0;
}

footer nav ul li {
  float: left;
  width: 140px;
  display: block;
  margin-right: 10px;
  margin-left: 10px;
}

footer nav ul li h4 {
    letter-spacing: 2px;
    margin-bottom: 0;
    margin-top: 10px;
}

footer nav ul li p2 {
    color: #083249;
}

footer nav ul li div#cositas {
    margin-top: 20px;
    width: 140px;
    float: left;
    display: block;
    margin-right: 10px;
    margin-left: 10px;
}

footer nav ul li div#f h4 {
    width: 280px;
    float: left;
    display: block;
    margin-right: 10px;
    margin-left: 10px;
    }

footer nav ul li div#f p2 {
    width: 280px;
    float: left;
    display: block;
    margin-right: 10px;
    margin-left: 10px;
    text-align: justify;
    word-break: break-all;
    }








@media screen and (max-width: 600px){

body{
}

h2 {
font-size: 12px;
}

h3 {
font-size: 10px;
}

h4 {
font-size: 8px;
}
    
p {
font-size: 10px;
}

p2 {
font-size: 8px;
}
    
header {
width: 60%;
height: 20px;
}

header section {
height: 30px;
}

header section div#encabezado{
width: 100%;
}    
    
header section div#encabezado div#logo-danza {
margin-right: 2%;
}
    
header section div#encabezado nav > ul > li {
  width: 12.5%;
}
    
header section div#encabezado nav ul li a {
    font-size: 10px;
      transition: all 1s;
}

header section div#encabezado nav ul li a:hover {
    width:100%;
      transition: all 1s;
}


header section div#encabezado nav ul li div {
	width:12.7%;
}

header section div#encabezado nav ul li div ul li{
    width:100%;
    height: 35px;   
}

header section div#encabezado nav ul li div ul li a:hover {
    width:100%;
    height: 35px;   
}

header section div#encabezado nav ul li div ul li a {
	font-size: 10px;
}
    
section div#contenedor {
  width: 60%;
  margin-right: 0px;
}
  
section div#selectores nav{
width: 33%;
float:none;
}
    
section div#selectores nav ul li a {
font-size: 10px;
}

section div#circulos {
  margin-top: 80px;
}

section div#circulos nav ul li{
    margin-left: 5px;
  margin-right:5px;
}

section div#circulos nav ul{
  width: 15%;
}

section div#circulos nav ul li a{
  font-size: 10px;
  margin-top: -70px;
  line-height: 1.5;;
}
    
    
section div#transparenciainicio {
  height:40%;
}
   
section div#transparenciainicio h2{
  font-size: 15px;
}

section div#transparenciainicio h1{
  font-size:40px;
}
    
section div#bailando {
  width: 77.5%;
}

section div#bailando img{
  width: 77.5%;
}

section.modulo3 {
width: 60%;
}


section.modulo3 ul li {
  width: 31.59%;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 15px;
}
    
   
footer {
    width: 60%;
    overflow: auto;
}


footer nav ul li {
  width: 15%;
  margin-right: 5px;
  margin-left: 5px;
}

footer nav ul li div#cositas {
    margin-top: 20px;
    width: 15%;
    margin-right: 5px;
    margin-left: 5px;
}

footer nav ul li div#f h4 {
    width: 208%;
    margin-right: 5px;
    margin-left: 5px;
    }

footer nav ul li div#f p2 {
    width: 208%;
    margin-right: 5px;
    margin-left: 5px;
}       
    
}