/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26-mar-2014, 17:55:59
    Author     : JVelasco
*/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

    
body {
    color: #000;
    font-family: 'Open Sans', sans-serif;
    padding-top: 0;
background-color: #F5F5F5;
    
}
.navbar-default { background-color: #00487C; border-color: #00487C }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #006BD6; border-color: #006BD6; }



.btn-warning, .alert-info, .alert-warning{color: #000}

.table > tbody > tr > td.vcenter {
    vertical-align: middle;
}

.text-muted { color: #595959 }

a {color: #000; }

.nav > li > a:hover, .nav > li > a:focus , p > a, label a, .mapa li a {text-decoration:underline}
li > a.active { background-color: #006BD6; }

a#skip, a#skip:hover, a#skip:visited, .skip {position:absolute; top:-100px; width:1px; height:1px; overflow:hidden; font-size:x-small; color: #fff}
a#skip:active, a#skip:focus {position:static;width:auto;height:auto;text-align:center;margin:0 auto; }

h1.h1 {font-size: 1em; margin:0}
h2.h2 {font-size: 0.9em; margin:0}
h3.h3 {font-size: 0.9em; margin:0}

footer {background-color: #272B30; margin:0;}
footer a {color: #fff;}

.logo {
   display: inline;
   max-height: 66px;
   margin-right: 10px;
}

.container {color: #fff; max-width: 960px;}
.container > div {color: #000}

.blanco {
    background-color: #FFFFFF;
    display:table;
}

.blanco-catalogo {
    background-color: #FFFFFF;
    
}


.navbar {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* home */


.centrado, .centrado2, .centrado3 {
  	width: 100%;
        font-size: 2em; 
        font-weight: bold;
  	height: 5em;
  	overflow: hidden;
  	margin: auto;
  	position: absolute;
  	top: 0; left: 0; bottom: 0; right: 0;
  	text-align: center;
}
.centrado2{height: 3em}
.centrado3{height: 2em}


#makeMeScrollable
{
        width:100%;
        height: 182px;
        position: relative;
        padding: 0 15px 0 15px;
}

#makeMeScrollable div.scrollableArea img
{
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
}

#makeMeScrollable div.scrollableArea a
{
	display: block;
	float: left;
	padding-left: 10px;
}
                

.masonry, #makeMeScrollable {
  background: #fff;
  margin: 0 auto;
  color: #fff;
}
.masonry .item, .hover {    
  width:  158px;
  height: 182px;
  float: left;
  margin-bottom: 20px;
  background: #787878;    
  background-repeat:no-repeat;
  background-position:center;  
}
.masonry .disabled, #makeMeScrollable .disabled {
    opacity: 0.5;
    cursor: default;
    
}

#makeMeScrollable .item {
  width:  158px;
  height: 182px;
  float: left;
  background: #3a3a3a;  
  background-repeat:no-repeat;
  background-position:center;  
  margin-right: 15px
}

.separa20 {padding-top:20px}
.separa20abajo {padding-bottom:20px}

.marcoModal {padding-top:20px; overflow-y: auto; height: 768px;}

.fondogris {background: #e7e7e7;}


.item > span {
    bottom: 35%;
    position: absolute;
    text-align: center;
    width: 100%;
    display: none;
    font-weight: bold;
}

.item {
    background-repeat:no-repeat;
    background-position:center;
    
}



#makeMeScrollable .item.item1, .item.item1 {    background-image: url(/inc/iconos/1.png);    }
#makeMeScrollable .item.item2, .item.item2 {    background-image: url(/inc/iconos/2.png);   }
#makeMeScrollable .item.item3, .item.item3 {    background-image: url(/inc/iconos/3.png);   }
#makeMeScrollable .item.item4, .item.item4 {    background-image: url(/inc/iconos/4.png);   }

#makeMeScrollable .item.item6, .item.item6 {    background-image: url(/inc/iconos/6.png);   }
#makeMeScrollable .item.item7, .item.item7 {    background-image: url(/inc/iconos/7.png);   }
#makeMeScrollable .item.item8, .item.item8 {    background-image: url(/inc/iconos/8.png);   }
#makeMeScrollable .item.item9, .item.item9 {    background-image: url(/inc/iconos/9.png);   }
#makeMeScrollable .item.item10, .item.item10 {   background-image: url(/inc/iconos/10.png);   }
#makeMeScrollable .item.item11, .item.item11{    background-image: url(/inc/iconos/11.png);   }
#makeMeScrollable .item.item12, .item.item12{    background-image: url(/inc/iconos/12.png);   }
#makeMeScrollable .item.item13, .item.item13{    background-image: url(/inc/iconos/13.png);   }
#makeMeScrollable .item.item14, .item.item14{    background-image: url(/inc/iconos/14.png);   }
#makeMeScrollable .item.item15, .item.item15{    background-image: url(/inc/iconos/15.png);   }
#makeMeScrollable .item.item16, .item.item16{    background-image: url(/inc/iconos/16.png);   }
#makeMeScrollable .item.item17, .item.item17{    background-image: url(/inc/iconos/17.png);   }
#makeMeScrollable .item.item18, .item.item18{    background-image: url(/inc/iconos/18.png);   }

#makeMeScrollable .item.item20, .item.item20{    background-image: url(/inc/iconos/20.png);   }
#makeMeScrollable .item.item21, .item.item21{    background-image: url(/inc/iconos/21.png);   }
#makeMeScrollable .item.item22, .item.item22{    background-image: url(/inc/iconos/22.png);   }
#makeMeScrollable .item.item23, .item.item23{    background-image: url(/inc/iconos/23.png);   }

#makeMeScrollable .item.item25, .item.item25{    background-image: url(/inc/iconos/25.png);   }
#makeMeScrollable .item.item26, .item.item26{    background-image: url(/inc/iconos/26.png);   }
.item.aulacenter{    background-image: url(/inc/imagenes/logo.png);  background-color: transparent}

.navbar-brand {font-size: 200%}
.marginbottom0 {margin-bottom:0}

.pie {height: 100px; padding: 60px 10px 0 10px}
.item span {color:#000}
/*
.item.aulacenter {
    background-repeat:no-repeat;
    background-position:center;
    border-radius: 90px;
    height: 180px;
    width: 180px; 
}

.item.aulacenter > span {
    font-weight: bold; 
    color: #fff;
    display: block !important;
    text-decoration: underline;
    bottom: 70%;
    
}
*/

h3.titulo > img {margin-right: 10px; max-width: 75px}
.container-ficha {margin-bottom: 20px; border-left: 20px solid; color: #000}
.adminygestion {border-color: #ff7bac}
h3.titulo.adminygestion {color: #ff7bac}
h3.titulo.porque {color: #fff}
.porque {border-color: #fff}
.contacto {border-color: #222222}


.hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    
    height: 100%;
    left: 0;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    top: 0;
    width: 100%;
    
}

.hover-home {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;        
    background-color: rgba(255, 255, 255, 0);
    width: 158px;
    height: 182px;
    position: absolute;
    
}

.enlace > .item {
    padding-top: 60px;
    text-align: center;
}

.enlace > .item > span {
    position: relative;
    width: 100%;
    display: none;
    font-weight: bold;
    top: 0;
}


.container.login {margin: 5em auto;}

.btn-primary {background-color: #0070df}
button {color: #FFF}

.dropdown-menu > li > span {
color: #787878;
}
.dropdown-menu > li > span.disabled {
    clear: both;
    color: #6a6a6a;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 3px;
    white-space: nowrap;
}

.fontResponsive { font-size: 15px }


@media (max-width: 600px) {
  #makeMeScrollable {display: none}
}

   
@media only screen and (min-width: 1024px) {
    .item.aulacenter {
        width: 169px;
        height: 169px;
    }
    .item.aulacenter > span{
        font-size: 180%;
        bottom: 35%;
    }
       
}

@media only screen and (max-width: 1024px) {
    .item.aulacenter {
        width: 353px;
    }
    .item.aulacenter > span{
        font-size: 200%;
        bottom: 35%;
    }
}

@media only screen and (min-width: 320px) and (max-width: 992px) {
    .item.aulacenter {
        width: 169px;
    }
    .item.aulacenter > span{
        font-size: 150%;
        bottom: 35%;
    }
    
    h2.h2{font-size: 0.8em}
    
    .centrado, .centrado2, .centrado3 {padding: 10px; font-size: 1em}
    .centrado2{height: 4em}
    footer a {font-size: 80%}
    
    .fontResponsive { font-size: 80%;}
        
}

@media only screen and (max-width: 480px) {
    h2.h2{font-size: 60%;   }
    
    .fontResponsive { font-size: 55%;}
        
}

@media only screen and (max-width: 320px) {
    h2.h2{ font-size: 50%; margin-top: -10px;}
        
    .fontResponsive { font-size: 30%}
}

.backgroundHead {background-color: #000000; color: #FFFFFF }