/* efectos por defecto */
body {
    font-family: 'Overpass', sans-serif;
    font-weight: normal;
    font-size: 100%;
    /*color: #1b262c;*/
    color:#FFF;
    margin: 0;
    /*background-color: #5f6769; */
	/* background-color: #00457c; */
	/* background-color: #ca9534; */
	background-color: #bb6713;
	/*background-image: url(../fondo.jpg); */
  	background-color: #8c9aaa;
}

/* efectos para el contenedor de pantalla completa */
#contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
    width: 100%;
    height: 100%;
    
    
	background-image: url(../fondo-coche-movil.jpeg);
	background-repeat: no-repeat;
  	background-size: auto;
    background-position: center;
    background-size: cover;
}

/* contenedor del login a la izquierda */
#contenedorcentrado {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:row;
    
    min-width: 380px;
    max-width: 900px;
    width: 90%;
    
    /*background-color: #5f6769; */
	/* background-color: #00457c; */
    background-color: #5f6769;
    /*opacity: 0.50;
    filter: alpha(opacity=50);*/
    
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    
    padding: 30px;
    box-sizing: border-box;
}
.informacion{
	font-family: 'Overpass', sans-serif;
    font-size: 120%;
	color:#FFF!important;
}
.titulo-tabla{
	
	color:#FFF!important;
    background-color: #000;
}
/* formulario de login */
/* formulario de login */
#login {
    width: 100%;
    max-width: 320px;
    min-width: 320px;
    padding: 30px 30px 50px 30px;
    /* background-color: #719192; */
	/* background-color: #00b6de; */
    /* background-color: #ca9534; */
	background-color: #8c9aaa;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    
    box-sizing: border-box;
    
    opacity: 1;
    filter: alpha(opacity=1);
}

#login label {
    display: block;
    font-family: 'Overpass', sans-serif;
    font-size: 120%;
    color:#3c4245;
    
    margin-top: 15px;
}

#login input {
    font-family: 'Overpass', sans-serif;
    font-size: 110%;
    color: #1b262c;
    
    display: block;
    width: 100%;
    height: 40px;
    
    margin-bottom: 10px;
    padding: 5px 5px 5px 10px;
    
    box-sizing: border-box;
    
    border: none;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}

#login input::placeholder {
    font-family: 'Overpass', sans-serif;
    /* color: #E4E4E4; */
	color:#3c4245;
}

#login button {
    font-family: 'Overpass', sans-serif;
    font-size: 110%;
    /* color:#1b262c; */
	color:#FFF;
    width: 100%;
    height: 40px;
    border: none;
    
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    
    
	/*background-color: #dfcdc3; */
	/* background-color: #00457c; */
    background-color: #261f13;
    margin-top: 10px;
}

#login button:hover {
    background-color: #3c4245;
    color:#dfcdc3;
}
/* formulario de login */
/* formulario de login */

/* seccion de la derecha */
/* seccion de la derecha */
/* por defecto */
#derecho {
    /*display: flex;
    align-items:center;
    justify-content:center;*/
    
    text-align: center;
    width: 100%;
    
    opacity: 0.70;
    filter: alpha(opacity=70);
    
    padding:20px 20px 20px 50px;
    box-sizing: border-box;
}

.titulo {
    font-size: 300%;
    color:#dfcdc3;
}

.logo-empresa img {
    width: 60%;
}

hr {
    border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #dfcdc3;
    
}
.pie-form {
    font-size: 90%;
    text-align: center;    
    margin-top: 15px;
	color:#FFF;
}

.pie-form a {
    display: block;
    text-decoration: none;
    color: #dfcdc3;
    margin-bottom: 3px;
}

.pie-form a:hover {
    color: #719192;
}

/* STRUCTURE */

#pagewrap {
    padding: 5px;
    width: 960px;
    margin: 20px auto;
	
}
header {
    height: 100px;
    padding: 0 15px;
}
#menu {

    width: 100%; /* Account for margins + border values */
    float: left;
    height: 100px;


}

#middle {
    width: 100%; /* Account for margins + border values */
    float: left;
    /* padding: 5px 15px;
    margin: 0px 5px 5px 5px; */
    /* margin: 30px; */
}

#sidebar {
    width: 10%;
    padding: 5px 15px;
    float: left;
}
footer {
    clear: both;
    padding: 0 15px;
}


#nav a:link {color:#ffffff; text-decoration:none;   }
#nav a:visited {color:#ffffff;}
#nav a:active {color:#ffffff;}
#nav a:hover {color:#ffffff;}

#nav
{
    /* container */
    /* background: #00427b; */
	/* background-color: #221406; */
	background-color: #000;
    border-radius: 15px;


}
#nav > a
{
    display: none;

}
#nav li
{
position: relative;
list-style-type: none;

}

/* first level */

#nav > ul
{
    height: 2em; /* 3.75 */
    list-style-type: none;
}
#nav li:hover
{
    display: block;
    /* background-color: #00b5de; */
    background: #ee8012;
}
#nav > ul > li
{
    /* width: 25%; */
    width: 15%;
    height: 100%;
    float: left;
}

/* second level */

#nav li ul
{
    display: none;
    /* position: absolute; */
    top: 100%;
    /* background-color:#00427b; */
	background-color: #00b5de;
	background-color: #221406;
    /* border-radius: 15px; */
}
#nav li:hover ul
{
    display: block;


}
h2{
	color:#FFF;
}

.texto_azul_claro a{
	color:#FFF;
}
.campo_formulario{
	font-size: 12px;
    width: 260px;
    height: 18px;
}
/* seccion de la derecha */
/* seccion de la derecha */

/* ajustar a pantallas con ancho menor o igual a 775px; */
/* ajustar a pantallas con ancho menor o igual a 775px; */
@media all and (max-width: 775px)
{
	#middle{
		width:30%!important;
	}
    #contenedorcentrado {
        flex-direction:column-reverse;

        min-width: 380px;
        max-width: 900px;
        width: 90%;

        /* background-color: #5f6769;- */
        background-color: #5f6769;

        /*opacity: 0.50;
        filter: alpha(opacity=50);*/

        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;

        -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);

        padding: 30px;
        box-sizing: border-box;
    }
    
    #login {
        margin: 0 auto;
    }
    
    #derecho {
        padding:20px 20px 20px 20px;
    }
    
    #login label {
        text-align: left;
    }

	#menu {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }
    #nav
    {
        position: relative;
    	
    	
    }
    #nav > a
    {
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: block;
    }

    /* first level */

    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        background-color:#00427b;
    	background-color: #221406;
    }
    #nav:target > ul
    {
        display: block;
    }
    #nav > ul > li
    {
        width: 100%;
        float: none;
    }

    /* second level */

    #nav li ul
    {
        position: static;
    }

}
/* ajustar a pantallas con ancho menor o igual a 775px; */
/* ajustar a pantallas con ancho menor o igual a 775px; */