body{
  padding:0;
  margin:0;
  border:none;
  font-family:'Roboto', sans-serif;
}

h2{
  font-weight: 500;
  letter-spacing: 1px;
  margin:0;
  margin-top: 40px;

}

h4{
  color:#0979D7;
  font-size: 24px;
  font-weight: 400;
}


a {
	border:0;
	border-style:none;
  text-decoration:none;
color:#FFFFFF;
}

a:hover{
color:#FFD44F;

}

a.underline {
  text-decoration: underline;
  color:#0979D7;
}

li{
  margin:0;
  padding:0;
}

.container{
width:100%;
}


.intro{
width:100%;
height:600px;
position:absolute;
background-image: url(images/hero_image_main.png);
background-size: cover;
background-repeat: no-repeat;
}

.intro_esc{
width:100%;
height:600px;
position:absolute;
background-image: url(images/hero_image_escuela.png);
background-size: cover;
background-repeat: no-repeat;
}

.intro_lic{
width:100%;
height:600px;
position:absolute;
background-image: url(images/hero_image_lic.png);
background-size: cover;
background-repeat: no-repeat;
}


h1.image_tag{
  color:#FFFFFF;
  font-weight: 100;
  font-size:48px;
  text-align: center;
  margin:0 auto;
  margin-top: 256px;
  margin-bottom: 0;
  padding-bottom: 0;
  letter-spacing: 2px;
  width:88%;

}


h1.image_tag2{
  color:#FFFFFF;
  font-weight: 100;
  font-size:48px;
  text-align: center;
  margin:0 auto;
  margin-top:172px;
  margin-bottom: 0;
  padding-bottom: 0;
  letter-spacing: 2px;
  width:88%;
}

.button{
  margin:0 auto;
  margin-top: 40px;
  width:200px;
  height:40px;
  border-radius:100px;
  font-size: 20px;
  color:#0979D7;
  letter-spacing: 4px;
  font-weight: 300;
  background-color:#FFFFFF;
  text-align: center;
  line-height: 39px;
}

.a2{
  color:#0979D7;
  text-decoration: none;
}

.button:hover{
  color:#FFFFFF;
  background-color: #2E478C;
  border-color: #2E478C;
  text-decoration: none;
}

.button:focus{
  color:#FFFFFF;
  background-color: #2E478C;
  border-color: #2E478C;
  text-decoration: none;
}





.main-header{
  width:100%;
  height:72px;
  background:rgba(46,71,140,0);
  position:relative;
}


.main-header2{
  width:100%;
  height:600px;
  background-image: url(images/hero_image_lic.png);
  background-size: cover;
  background-repeat: no-repeat;
  position:relative;
}


.main-header3{
  width:100%;
  height:80px;
  background-color:#2E478C;
  background-size: cover;
  background-repeat: no-repeat;
  position:relative;
}

.logo{
  margin-left: 40px;
  margin-top: 8px;
  width:140px;

}

.main_nav{
  float:right;
  padding:0;
  margin-right:40px;
  margin-top:28px;
  font-weight: 300;
  letter-spacing:2px;
  font-size: 12px;
}

.nav_item{
margin-left:32px;

}

.nav_item:hover{
color: #FFD44F;
font-weight: 600;
}

.nav_item:active{
  color: #FFD44F;
  border-bottom: 4px solid #FFD44F;
  padding-bottom: 24px;
}











.parrafo{
  position:relative;
  width:40%;
  margin:0 auto;
  margin-top: 528px;


}

.parrafo2{
  position:relative;
  width:40%;
  margin:0 auto;
  margin-top: 40px;

}

.invisible{
  width:100%;
  height:80px;
  margin:0;
  padding:0;
  background-color:;
}

.titulo{
font-size: 32px;
color:#0979D7;
padding:0;
padding-top: 40px;
font-weight: 300;
text-align: center;
letter-spacing: 1px;
}

/* cambiar al color azul el actividades titulo*/

.actividades_titulo{
  display: none;
  font-size: 32px;
  color:#000000;
  padding:0;
  padding-top: 40px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 1px;
}

.titulo_b{
  font-size: 32px;
  color:#FFFFFF;
  padding:0;
  padding-top: 40px;
  font-weight: 200;
  text-align: center;
}

.titulo_c{
  font-size: 24px;
  color:#FFFFFF;
  padding:0;
  padding-top: 40px;
  font-weight: 300;
  text-align: center;
}

.titulo_d{
  margin-bottom:40px;
  width:30%;
  font-size: 24px;
  color:#FFFFFF;
  padding:0;
  padding-top: 40px;
  font-weight: 300;
  text-align: left;
}

.titulo_e{
  margin-bottom:40px;
  margin-left: 40px;
  width:30%;
  font-size: 32px;
  color:#0979D7;
  padding:0;
  padding-top: 40px;
  font-weight: 300;
  text-align: left;
}

p{
  font-size: 16px;
  font-weight: 300;
  line-height: 160%;
  margin-top:40px;
  letter-spacing:1px;
}

.tab{
  margin-top:0;
  padding: 0;
  margin-left: 40px;
}

.p2{
  font-size: 16px;
  font-weight: 200;
  line-height: 170%;
  margin-top:40px;
  letter-spacing:1px;
  color:#FFFFFF;
}


.direccion{
  font-size: 16px;
  font-weight: 300;
  line-height: 160%;
  margin-top:12px;
  letter-spacing:1px;

}

/* regresar a 600 height actividades */
.actividades{
  height:40px;
  width:88%;
  margin:0 auto;
  margin-bottom: 40px;
}
/* regresar a display cuando se tenga contenido */
.cards{
display: none;
margin-top: 40px;
margin-left:1%;
margin-right: 1%;
width:48%;
height:412px;
background-color: #0979D7;
border-radius: 8px;
float:left;
}


.cursos{
  background-color: #15285D;
  width:100%;
  clear:both;
  margin:0;

  padding:0;
}

.curso_list{
  margin:0 auto;
  margin-top: 40px;
  width:960px;
  padding:0;
  padding-bottom: 40px;
  background-color: ;
  font-weight: 300;
  letter-spacing: 2px;

}

.curso_item{
  width:100%;
  margin:0;
  margin-bottom: 20px;
  background-color: ;
  display: block;
  text-align: center;

}

.contactanos_footer{
  background-color: #2E478C;
  text-align: center;

}

.face{
  margin-left:0;
  margin-top: 8px;
  margin-bottom: 40px;
  height:40px;

}


.cursos_panel{
  float:left;
  border-right: solid 1px #e6e6e6;
  height:100vh;
  position:relative;
}

.curso_descripcion{
  margin:0 auto;
  width:60%;

}

ul{
  margin:0;
  padding:0;
  margin-top: 40px;
  margin-left: 40px;
  text-decoration: none;
  list-style-type:none;
  font-weight: 300;
  font-size: 16px;
}

li{
  margin:0;
  padding:0;
  margin-bottom:32px;
  margin-right: 40px;
  letter-spacing: 1px;

}



.panel_item{
  color:#0979D7;
}

.panel_item:hover{
  font-weight: 500;
}

.top{
  margin:0 auto;
  width:90%;
}


.contactarea{
  width:90%;
  margin:0 auto;
  margin-top: 80px;

}

#inputbox{
  width:100%;
  height:40px;
  border-radius:4px;
  border:solid 1px  #0979D7;
}

#textarea{
  width:100%;
  height:120px;
  border-radius:4px;
  border:solid 1px  #0979D7;
}


.submit{
  width:200px;
  height:40px;
  border-radius:100px;
  font-size: 20px;
  color:#0979D7;
  letter-spacing: 4px;
}

/* Empiesa la pagina cursos ................................................ */



.cursos_tarjetas{
  width:960px;
  margin:0 auto;
}

.instrumento_tarjeta2{
width:200px;
height:200px;
background-color:#0979D7;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}


.instrumento_tarjeta{
width:200px;
height:200px;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}


.instrumento_tarjeta_canto{
width:200px;
height:200px;
background-image: url(images/canto.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

.instrumento_tarjeta_guitarra{
width:200px;
height:200px;
background-image: url(images/guitarra_electrica.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}


.instrumento_tarjeta_piano{
width:200px;
height:200px;
background-image: url(images/piano.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

.instrumento_tarjeta_violin{
width:200px;
height:200px;
background-image: url(images/violin.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

.instrumento_tarjeta_cello{
width:200px;
height:200px;
background-image: url(images/cello.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

.instrumento_tarjeta_flauta{
width:200px;
height:200px;
background-image: url(images/flauta.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

.instrumento_tarjeta_teoria{
width:200px;
height:200px;
background-image: url(images/teoria.png);
background-size: cover;
background-repeat: no-repeat;
background-color:#000000;
margin:0;
padding:0;
margin-top: 40px;
margin-right: 20px;
margin-left: 20px;
border-radius: 8px;
float:left;
}

a.link {
color:#0979D7;
margin:0;
padding:0;
text-decoration: underline;
margin:0 auto;
}

h1.nombre_inst{
  font-size: 28px;
  font-weight: 200;
  line-height: 40px;
  margin:0;
  padding-top: 30%;
  padding-bottom: 30%;
  text-align: center;
  color:#ffffff;

}


h1.nombre_inst2{
  font-size: 28px;
  font-weight:200;
  margin:0;
  padding-top: 40%;
  padding-bottom: 40%;
  text-align: center;
  color:#ffffff;

}


.margen{
  margin:0;
  padding:0;
  height:80px;
  clear:both;
}


/* Empiesa Plan de estudios licenciatura................................................ */

.tabla_de_cursos{
margin:0 auto;
margin-top: 40px;
padding:0;
width:80%;
background-color: #f7f7f7;
border: 1px solid #cacaca;
border-radius: 8px;

}

.tabla_header{
  margin:0 auto;
  padding:0;
  width:100%;
  background-color: #2E478C;
  border-radius: 8px 8px 0px 0px;

}

h2.tabala_titulo{
color:white;
text-align: center;
margin:0;
padding:0;
font-weight: 300;
padding-top: 16px;
padding-bottom:16px;
letter-spacing: 1.5px;
font-size: 24px;
}

.rows{
  margin:0 auto;
  padding:0;
  width:100%;
  Height:40px;
  border-bottom: 1px solid #cacaca;

}

.row_prime{
  margin:0 auto;
  padding:0;
  width:100%;
  Height:40px;
  border-bottom: 1px solid #cacaca;
  background-color: #ffffff;

}

.row_bottom{
  margin:0 auto;
  padding:0;
  width:100%;
  padding-top:8px;
  padding-bottom:8px;
  border-bottom: 1px solid #cacaca;
  background-color:#FFFFFF;
  border-radius: 0px 0px 8px 8px;

}


.row_tall{
  margin:0 auto;
  padding:0;
  width:100%;
  Height:64px;
  border-bottom: 1px solid #cacaca;
  background-color: #ffffff;
}


.row_Xtall{
  margin:0 auto;
  padding:0;
  width:100%;
  Height:72px;
  border-bottom: 1px solid #cacaca;
}



.column1{
  margin:0;
  padding:0;
  width:20%;
  Height:100%;
  border-right: 1px solid #cacaca;
  float:left;

}


h2.colum_text{
color:#000000;
margin:0;
padding:0;
font-weight: 400;
padding-top: 6px;
padding-bottom:6px;
padding-left: 16px;
letter-spacing: 1.5px;
font-size: 20px;
}

h2.colum_text_doc{
color:#0979D7;
margin:0;
padding:0;
font-weight: 400;
padding-top: 6px;
padding-bottom:6px;
padding-left: 16px;
letter-spacing: 1px;
font-size: 20px;
}


.column2{
  margin:0;
  padding:0;
  width:60%;
  Height:100%;
  border-right: 1px solid #cacaca;
  float: left;
}

.column3{
  margin:0;
  padding:0;
  width:19%;
  Height:100%;
  float:left;

}

/* Empiesan licenciatura pantalla ................................................ */


.lic_parrafos{
  margin:0 auto;
  padding: 0;
  margin-top: 16px;
  width:88%;
}

.subtitulo{
margin: 0;
padding: 0;
margin-top: 40px;
margin-bottom: 16px;
  color:#ff0000;
  text-align: center;
}

/* Empiesan Requisitos ................................................ */
.sub_titulo2{
  margin:0 auto;
  padding:0;
  font-size: 20px;
  margin-top: 32px;
  margin-bottom: 8px;
  font-weight: 400;
  width:70%;
}

.sub_titulo3{
  margin:0 auto;
  padding:0;
  font-size: 16px;
  margin-bottom: 24px;
  font-weight: 300;
  width:70%;
}
.requisitos{
  margin:0 auto;
  padding:0;
  width:70%;
  list-style-type:disc;
  list-style-position: inside;
}

.requisitos li{
  margin:0;
  padding:0;
  margin-bottom: 8px;
  font-weight: 300;
}

hr{
  margin:0;
  padding:0;
  margin-top: 40px;
}


.subitem{
  margin:0;
  padding:0;
  position:relative;
  left:40px;
  list-style-type:circle;
}


/* Empiesan Horarios ................................................ */

.column0-hrs{
  margin:0;
  padding:0;
  width:10%;
  Height:100%;
  float:left;
  border-right: 1px solid #cacaca;

}

.column1-hrs{
  margin:0;
  padding:0;
  width:16%;
  Height:100%;
  border-right: 1px solid #cacaca;
  float:left;

}

h2.colum_text-hrs{
color:#000000;
margin:0;
padding:0;
font-weight: 400;
padding-top: 6px;
padding-bottom:6px;
padding-left: 8px;
letter-spacing: 1.5px;
font-size: 12px;
}

.column3-hrs{
  margin:0;
  padding:0;
  Height:100%;
  float:left;

}

/* ──────────────────────────────────── */
/*  NUEVOS ESTILOS – TABLAS DE HORARIOS */
/* ──────────────────────────────────── */

section.horarios h3{
  margin:2rem 0 0.5rem;
  font-weight:600;            /* resalta el título de cada semestre       */
}

section.horarios table{
  width:100%;
  border-collapse:collapse;   /* quita espacios entre bordes               */
  margin-bottom:2rem;         /* separación inferior entre tablas          */
}

section.horarios th,
section.horarios td{
  text-align:center;          /* centra el texto dentro de cada celda      */
  padding:4px;                /* un poco de aire interno opcional          */

    
    
}






/* Empiesan los media queries................................................ */

@media only screen and (min-width:1367px){


.sidebar_btn{
  display:none;
}

.sidebar{
  display:none;
}



}

@media only screen and (min-width:960px) and (max-width:1366px) {

.logo{

}

.main_nav{
  display: none;
}

h1.image_tag{
  width:96%;
  margin:0 auto;
  padding-top:80px;
  font-size: 32px;
}


.sidebar_btn{
position:fixed;
top: 16px;
right:32px;
width:48px;
height: 48px;
margin:0;
padding: 0;
padding-left: 8px;
box-sizing: border-box;
cursor: pointer;
background:rgba(46,71,140,0);
border:none;
border-radius:3px;
outline:none;
z-index: 99;

}

.sidebar_btn span{
  display:block;
  width:32px;
  height:2px;
  background:#FFFFFF;
  position: absolute;
  top: 24px;
  transition: .3s;
}

.sidebar_btn span:before{
  content:'';
  position: absolute;
  top: -12px;
  left:0;
  width:100%;
  height:2px;
  background: #FFFFFF;
  transition: .3s;
}

.sidebar_btn span:after{
  content:'';
  position: absolute;
  top:12px;
  left:0;
  width:100%;
  height:2px;
  background: #FFFFFF;
  transition: .3s;
}


.sidebar{
  position: fixed;
  top: 0;
  right:-320px;
  background:#0979D7;
  width: 320px;
  Height:100%;
  transition:.3s;
  z-index: 5;
}

.active{
  right:0;
}

ul.menu_mobil{
  margin:0;
  padding:32px 0;
}

li.mobil{

  list-style:none;

}

a.mobil_link{
  padding: 10px 20px;
  color:#FFFFFF;
  display:block;
  text-decoration: none;
}



.parrafo{
  position:relative;
  width:58%;
  margin:0 auto;
  margin-top: 528px;

}


.parrafo2{
  position:relative;
  width:58%;
  margin:0 auto;

}

.actividades{
  width:80%;
  background-color:;
  margin-bottom: 40px;
}


.curso_list{
  width:816px;
  background-color:;

}


.curso_descripcion{
margin-left: 10%;
margin-right: 10%;
width:80%;
}



h1.image_tag{
  width:96%;
  margin:0 auto;
  margin-top: 160px;
  font-size: 32px;
}


.cursos_tarjetas{
  width:880px;

}

.instrumento_tarjeta, .instrumento_tarjeta_canto, .instrumento_tarjeta_guitarra,
.instrumento_tarjeta_piano, .instrumento_tarjeta_violin, .instrumento_tarjeta_cello, .instrumento_tarjeta_flauta,
.instrumento_tarjeta_teoria {
width:180px;
height:180px;
}

.instrumento_tarjeta2{
  width:180px;
  height:180px;
  background-color:#0979D7;
  }


.sub_titulo2{
width:80%;
margin:0 auto;
margin-top: 32px;
margin-bottom:8px;

}

.sub_titulo3{
width:80%;
margin:0 auto;
margin-bottom:24px;

}

.requisitos{
  width:80%;
  margin:0 auto;

}



}



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

  .main_nav{
    display: none;
  }

.logo{
width:152px;
margin-left: 32px;
margin-top: 32px;

}

.main-header{
background:rgba(46,71,140,0);
}

.main-header3{
  height: 124px;
}

  h1.image_tag{
    width:96%;
    margin:0 auto;
    margin-top: 240px;
    font-size: 32px;
  }

  h1.image_tag2{
    width:96%;
    margin:0 auto;
    margin-top: 160px;
    font-size: 32px;
  }

  .sidebar_btn{
  position:absolute;
  top: 32px;
  right:32px;
  width:48px;
  height: 48px;
  margin:0;
  padding: 0;
  padding-left: 8px;
  box-sizing: border-box;
  cursor: pointer;
  background:rgba(46,71,140,0.5);
  border:none;
  border-radius:3px;
  outline:none;
  z-index: 99;
  }

  .sidebar_btn span{
    display:block;
    width:32px;
    height:2px;
    background:#FFFFFF;
    position: absolute;
    top: 24px;
    transition: .3s;
  }

  .sidebar_btn span:before{
    content:'';
    position: absolute;
    top: -12px;
    left:0;
    width:100%;
    height:2px;
    background: #FFFFFF;
    transition: .3s;
  }

  .sidebar_btn span:after{
    content:'';
    position: absolute;
    top:12px;
    left:0;
    width:100%;
    height:2px;
    background: #FFFFFF;
    transition: .3s;
  }


  .sidebar{
    position: fixed;
    top: 0;
    right:-320px;
    background:#0979D7;
    width: 320px;
    Height:100%;
    transition:.3s;
    z-index: 5;
  }

  .active{
    right:0;
  }

  ul.menu_mobil{
    margin:0;
    padding:32px 0;
  }

  li.mobil{

    list-style:none;

  }

  a.mobil_link{
    padding: 10px 20px;
    color:#FFFFFF;
    display:block;
    text-decoration: none;
  }



  .parrafo{
    margin-left: 5%;
    margin-right: 5%;
    width:90%;

  }

  .parrafo2{
    margin-left: 5%;
    margin-right: 5%;
    width:90%;
  }

  .curso_descripcion{
  margin-left: 5%;
  margin-right: 5%;
  width:90%;
  }


  .curso_list{
    width:100%;
    background-color:;

  }


.contactanos_footer{
  clear:both;
}


.cursos_panel{
display: none;
}


.actividades{
  width:96%;
  background-color:;
}


.cursos_tarjetas{
  width:96%;

}

.instrumento_tarjeta, .instrumento_tarjeta_canto, .instrumento_tarjeta_guitarra,
.instrumento_tarjeta_piano, .instrumento_tarjeta_violin, .instrumento_tarjeta_cello, .instrumento_tarjeta_flauta,
.instrumento_tarjeta_teoria{
width:40%;
height:180px;
margin-left: 4%;
}

.instrumento_tarjeta2{
  width:40%;
  height:180px;
  margin-left: 4%;
  background-color:#0979D7;
  }

h1.nombre_inst2{
  padding-top: 72px;
  text-align: center;
}


h1.nombre_inst{
  padding-top: 48px;
  text-align: center;
  margin:0 auto;
  width:172px;
}



.tabla_de_cursos{
width:90%;
}




h2.colum_text{
padding-top: 9px;
padding-bottom:9px;
padding-left: 8px;
letter-spacing: 1px;
font-size: 14px;
}

.sub_titulo2{
width:80%;
margin:0 auto;
margin-top: 32px;
margin-bottom:8px;

}

.sub_titulo3{
width:80%;
margin:0 auto;
margin-bottom:24px;

}

.requisitos{
  width:80%;
  margin:0 auto;
}


}