* { 
    font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px; 
    font-weight: 300;
}
body {
    background: #FEFBFC;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom; 
    background-image: url('../img/fondo-opacity.png'); 
    background-position: bottom;  
}
ul {
    margin-left:-30px;    
}

/* Para moviles */
@media screen and (max-width: 600px) {
    .texto-largo {
        text-align: justify;
    }
    .cabecera-centro {
        display: none;
    }
}

/* Para formato panoramico */
@media screen and (min-width: 600px) {
    body {    
        background-size: cover;

    }
    .titulo-smartphone {
        display:none;
    }
}

/* Cabecera */
#header {
    position: fixed;
    left: 0;
    top: 0;
    height: 50px;
    width: 100%;
    background: rgb(52,123,194);
    z-index:999;  

}
.cabecera-izquierda{
    text-align:left;
    width:33%;
    float:left;
}
.imagen-izquierda-cabecera{ 
    padding-left:10px;
    padding-top:10px;
    height:32px;
}
.cabecera-centro{  
    text-align : center;
    width:33%;
    float:left;
    padding-top:12px;
    color:white;
    font-size:160%;
    font-weight: bold;
    cursor:pointer;
}
.cabecera-derecha{
    text-align:right;
    width:33%;
    float:right;
}
.imagen-derecha-cabecera{ 
    padding-right:10px;
    padding-top:10px;
    height:32px;
}

/* Pie */
#footer {
    font-size:14px;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 30px;
    width: 100%;
    background: rgb(52,123,194);
    z-index:999; 
    text-align: center;
}
.texto-pie {
    color:white;
    font-size:80%;
    padding-top:10px;
    float:left;
    width:100%;

}
#boton-iconos{
    font-size:100%;
    color:#cccccc;
    cursor: pointer;
    position: fixed;
    right: 3px;
    bottom: 3px;
    font-size:70%;
    z-index:1000; 
}
#panel-iconos {
    font-size:80%;
    display:none;
    background-color: white;
    text-align: left;
    position: fixed;    
    text-decoration: none;
    right:10px;
    bottom: 0;
    height: 160px;  
    width:140px;
    padding:20px;
    -webkit-box-shadow: 0px -5px 28px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 28px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 28px 0px rgba(0,0,0,0.75);
}
#panel-iconos li{font-size:80%;}

/* Contenido principal */
.main-content {
    margin:60px 10px 20px 10px;
    text-align: center;
}
.titulo-smartphone {
    margin-top:80px;
    margin-bottom:0;
    font-weight: bold;
    font-size:160%;
    color: #333333;
    cursor:pointer;
    margin-bottom:10px;
}
.contenedor-imagen-contenido {
    text-align: center;
}
.imagen-contenido{   
    width:80px;
    margin-bottom:10px;
}
.panel-info,.panel-info-justificado {
    padding:30px 20px 20px 20px;
    background-color: white;
    border: 4px solid rgb(52,123,194);
    border-radius: 20px;
}
.panel-info {
    text-align: center;
}
.panel-info-justificado {
    text-align: justify;
}
.panel-oculto {
    display: none;    
    padding:20px; 
}
.texto {
    text-align:center;
    margin:0 auto;
}
.texto-rojo {
    color:red;
    font-weight: bold;
}
.texto-resaltado {
    font-weight: bold;
}
.titulo {
    font-weight: bold;
    font-size: 120%;
    text-align: center;
}
p a, a:visited, a:active {
  color: rgb(52,123,194);
  text-decoration: none;
  border-bottom: 1px rgb(52,123,194) dotted;
}
li a, a:visited, a:active {
  color: rgb(52,123,194);
  text-decoration: none;
  border-bottom: 1px rgb(52,123,194) dotted;
}

p a:hover, li a:hover {
  color:rgb(52,123,194);
  text-decoration:none;
  border: none;
}
/* Botones */
.boton-principal, .boton-secundario {        
    border: none;
    color: white;
    padding: 15px 32px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
}
.boton-principal {
    background-color: rgb(52,123,194);
}
.boton-principal:hover {
    background-color: rgb(130,198,245);
    color: white;
    cursor: pointer;
}
.boton-principal:active {
    position: relative;
    top: 2px;
}  
.boton-secundario {
    background-color: rgb(108,117,125);
}
.boton-secundario:hover {
    background-color: rgb(90,98,104); 
    cursor: pointer;
}
.boton-secundario:active {
    position: relative;
    top: 2px;
} 

.caja-aviso {
	padding:10px;
	border:2px solid rgb(52,123,194);
	color:rgb(52,123,194);
	margin-left:20px;
	margin-right:20px;
        font-weight:bold;
}