/* reseteo universal*/
*{
	border: 0;
	margin: 0;
	padding: 0;
}

/*estilos del sitio*/
body{
    background-color: black;
	background-image: url(../img/bg-diseno-de-proyectos.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 100%;
	font-family: Arial, Helvetica, Verdana;
    max-width: 100%;
    max-height: 100%;
}

#fondo-maquetas{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
}

#maquetas, ul li#maquetas h{
    background: white;
    color: #2e2d2d;
}

#panel-izquierdo{
    display: inline-block;  
    vertical-align: middle;
}

#panel-derecho{
    display: inline-block; 
    vertical-align: top;
    width: 55%;
    margin-top: -1.5em;
}

#proyectos-informacion{
    color: #2e2d2d;
}

#proyectos-informacion ul{
    color: #2e2d2d;
    text-align: center;
    width: 680px;
    height: 455px;
    margin-left: 1.68em;
}

#proyectos-informacion ul li{
    border: 1px solid #fff;
    color: #fff;
    display: inline-block;
    width: 168px;
    height: 150px;
    vertical-align: text-top;
}

#bloque-uno{
    background: white;
    text-align: justify;
}

    #info-bloque-uno{
        margin: 1em;
    }

    #info-bloque-uno hr{
        background: #2e2d2d;
        height: 0.05em;
        margin: 0.3em 0 0 0;
    }

    #info-bloque-uno h{
        color: #2e2d2d;
        font-family: "Century Gothic", "Times Roman", sans-serif;
        font-size: 0.95em;
        width: 500px
    }

    #info-bloque-uno p{
        color: #2e2d2d;
        font-size: 0.7em;
        margin: 0.5em 0;
    }
    
#bloque-dos{
    background: url(../img/maquetas/bg-maquetas-info-bloque.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    background-size: 168px 150px;
}

#bloque-tres{
    background: url(../img/maquetas/5.jpg) no-repeat;
    background-position: center center;
    background-size: 168px 150px;
}

#bloque-cuatro{
    background: url(../img/maquetas/7.jpg) no-repeat;
    background-size: 168px 150px;
}

#bloque-cinco{
    background: url(../img/maquetas/1.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    background-size: 168px 150px;
}

#bloque-seis{
    background: url(../img/maquetas/6.jpg) no-repeat;
    background-size: 168px 150px;
    margin-top: -2px;
}

#bloque-siete{
    background: url(../img/maquetas/bg-maquetas-info-bloque-3.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    margin-top: -2px;
    background-size: 168px 150px;
}

#bloque-ocho{
    background: url(../img/maquetas/2.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    background-size: 168px 150px;
    margin-top: -2px;
}

#bloque-nueve{
    background: url(../img/maquetas/8.jpg) no-repeat;
    background-size: 168px 150px;
    margin-top: -2px;
}

#bloque-diez{
    background: url(../img/maquetas/bg-maquetas-info-bloque-2.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    margin-top: -2px;
    background-size: 168px 150px;
}

#bloque-once{
    background: url(../img/maquetas/4.jpg) no-repeat;
    background-color: #fff;
    background-position: center center;
    background-size: 168px 150px;
    margin-top: -2px;
}

#bloque-doce{
    background: url(../img/maquetas/9.jpg) no-repeat;
    background-size: 168px 150px;
    margin-top: -2px;
}

/*********FINAL CONTENEDOR***********/

@media(max-width:1024px){
    #panel-derecho{
        width: 54%;
    }

    #proyectos-informacion ul{
        color: #2e2d2d;
        text-align: center;
        width: 540px;
        height: 600px;
        margin-left: 0em;
    }

    #proyectos-informacion ul li{
        width: 150px;
        height: 140px;
    }
}

@media(max-width:800px){
    
    #panel-derecho{
        display: block;
        width: 100%;
        margin: 1em 0 2em;
    }

    #proyectos-informacion ul{
        color: #2e2d2d;
        text-align: center;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    #proyectos-informacion ul li{
        border: 1px solid #fff;
        color: #fff;
        display: inline-block;
        width: 168px;
        height: 150px;
        vertical-align: text-top;
    }
    
}

@media(max-width:600px){
     
}

@media(max-width:500px){
    
}

@media(max-width:400px){
    
}