@charset "utf-8";

* {box-sizing: border-box;
  margin:0px;
  padding:0px;
}

p {
    margin-bottom: 1em;
}

body {background-image: url(imagenes/fondo_pagina.jpg);
     background-attachment: fixed;
     font-family: "Lato" ,"open sans";}

div#anchopagina {background-color: rgba(0,0,0,0.05);
                 max-width: 420px;
                 margin-left: auto;
                 margin-right: auto;}

div#acceso_registro {background-color: rgba(0,25,128,0.5);
                 text-align: right;
                 padding-top: 3px;
                 padding-bottom: 3px;
                 font-size: 12px;}

div#icono_1 {width: 24px;
         height: 16px;
         float: right;
         margin: 0 2px 0 2px;}

div#icono_2 , div#icono_3 {width: 16px;
         height: 16px;
         float: right;
         margin: 0 2px 0 2px;}

div#logo_diacumar {text-align: center;
                float: left;
                width: 100%;
                font-size: 11px; 
                color: white;
                margin: 7px 0px 5px 0px;}

div#frase_diacumar {text-align: center;
                float: left;
                width: 100%;
                font-size: 11px; 
                color: rgb(150,255,255);
                padding: 5px 25px 5px 25px;
                margin: 7px 0px 5px 0px;}

nav {clear: both;
    text-align: center;
    font-size: 18px;}

nav ul {list-style: none;   
       padding: 12px 0 12px 0;}

nav ul li a {margin: auto;
            display: block;
            width: 180px;
            padding: 5px 0 5px 0;
            margin-bottom: 7px;
            background-color: rgba(0,128,255,0.5);}

.menu_foro {width: 150px;
            background-color: rgba(0,128,255,0.7);
            display: inline-block;
            padding: 4px 0px 4px 0px;
            margin: 4px 0px 4px 0px;}

.menu_foro a {font-size: 16px;
             display: block;
             text-align: center;}
    
.comentarios {background-color: rgba(180,255,224,0.7);
                 padding-bottom: 48px;
                 margin-bottom: 2px;}

.comentarios img {width: 90%;
                    height: auto;}

.seccion {color: rgb(0,90,0);
            font-size: 14px;
            display: block;
            width: 45%;
            float: left;
            text-align: left;
            margin: 8px 0px 0px 5px;}

.usuario {color: rgb(0,0,160);
            font-size: 14px;
            display: block;
            width: 45%;
            float: right;
            text-align: right;
            margin: 8px 5px 0px 0px;}

.comentario {color: rgb(0,0,160);
               font-size: 18px;
               padding: 15px 8px 15px 8px;
               display: block;
               text-align: left;
               clear: both;}

.fecha {color: rgb(0,0,0);
          font-size: 10px;
          display: block;
          width: 45%;
          float: left;
          text-align: left;
          clear: both;
          background-color: rgba(0,0,0,0.01);
          margin: 8px 0px 0px 5px;}

.responder {color: rgb(0,0,0);
              font-size: 12px;
              display: block;
              width: 45%;
              float: right;
              text-align: right;
              background-color: rgba(0,0,0,0.01);
              margin: 8px 5px 0px 0px;}

.responder a {color: rgb(0,0,0);}

.responder a:hover {color: rgb(0,120,160);}

div#tabla {background-color: rgba(0,0,0,0.5);
        padding: 5px 5px 5px 5px;
        overflow: auto;}

div#colizq_1 , .colizq_2 , div#colder_1 , .colder_2 {
    text-align: center;
    color: rgb(255,255,255);
    font-size: 16px;
    display: block;
    height: 100px;
    margin: 5px 1px 5px 1px;
    padding: 25px 5px 5px 5px;}

div#colizq_1 {background-color: rgba(0,180,0,0.5);
             float: left;
             font-size: 24px;
             width: 29%;}

div#colder_1 {background-color: rgba(0,180,0,0.5);
             float: right;
             font-size: 24px;
             width: 69%;}

.colizq_2 {background-color: rgba(0,190,215,0.5);
             float: left;
             font-size: 22px;
             width: 29%;}

.colder_2 {background-color: rgba(0,150,255,0.5);
             float: right;
             width: 69%;}

.item {font-size: 14px; 
    color: rgb(160,255,255);
    margin-bottom: 3px;}

input[type='text'] , input[type='password'] , input[type='number'] ,  textarea
    {width: 100%;
    color: rgb(0,65,160);
    background-color: rgba(128,255,200,0.7);
    border: 0px;   
    padding: 5px 5px 5px 5px;
    margin-bottom: 15px;
    }

div#r_item{
     color:#fff;
}

.p_texto{
     color:#fff;
}

div#p_historia{
     color:#fff;
}

div#galeria img {width: 100%;}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}

textarea {  
    vertical-align: text-top;
    line-height: 18px; 
    font-family: "Lato" ,"open sans";
    }

video {width: 100%;
       height: auto;}

.bx-wrapper {width: 100%;}

.bx-wrapper *{box-sizing: content-box;}

.bx-pager {display: none;}

a {color: white;
   text-decoration: none;}

a:hover {color: skyblue;}

h1 {color: rgb(255,255,255);
    font-size: 28px;}

h2 {color: rgb(150,255,255);
   font-size: 30px;}

h3 {color: rgb(150,255,255);
    font-size: 18px;}

h4 {color: rgb(255,255,255);
    font-size: 24px;}

.botonreg {background-color: rgba(0,192,0,0.5);
          padding: 5px 0 5px 0;
          width: 180px;
          margin: auto;
          display: block;
          text-align: center;
          overflow: auto;}

.botonreg a{display: block;}

div#menu_oculto {background-color: rgba(0,192,0,0.5);
             clear: both;
             padding: 5px 0 5px 0;
             width: 180px;
             margin: auto;
             color: rgb(255,255,255);
             text-align: center;}

div#menu_oculto:hover {color: skyblue;}

.menu_principal {display: none;}

header {background-color: rgba(0,0,128,0.5);
        margin-bottom: 15px;}

main {background-color: rgba(0,0,128,0.5);
      text-align: center;
      padding: 25px;}

article {clear: both;}

article img{width: 70%;
            height: auto;}

div#main_aside {width: 95%;
             margin: 0px auto 0px auto;}

div#contenidoaside1 , div#contenidoaside2 , div#contenidoaside3
{text-align: center;
color: rgb(150,255,255);
background-color: rgba(0,0,128,0.5);
padding:25px;
margin: 15px 0px 0px 0px;
font-size: 12px;}

footer {background-color: rgba(0,0,128,0.5);
       padding: 5px 25px 15px 25px;
       color: white;
       font-size: 10px;
       text-align: center;
       margin: 15px 0px 0px 0px;
       clear: both;}

.icono_footer {margin: 5px;
              display: inline-block;}







@media screen and (min-width: 420px) {div#anchopagina {max-width: 720px;}    
    
div#logo_diacumar {float: left;
               text-align: right;
               width: 50%;}

div#frase_diacumar {float: left;
                text-align: right;
                font-size: 12px;
                margin: 7px 0px 5px 0px;
                padding: 5px 5px 5px 25px;
                width: 200px;
                height: 80px;}
    
div#contenidoaside1 {width: 59%;
                 float: left;}

div#contenidoaside2 {width: 37%;
                  float: right;}

div#contenidoaside3 {width: 37%;
                 float: right;
                 margin: 15px 0px 15px 0px;}

div#galeria img {width: 49%;}
    
div#menu_oculto {display: none;}

.menu_principal {display: block;}

nav ul li {display: inline-block;}    
    
nav ul li a {width: 76px;
            height: 76px;
            font-size: 12px;
            display: block;
            color: white;
            text-align: center;
            text-decoration: none;
            background-color: rgba(0,25,128,0.0);}   
    
div#icono_proyecto , div#icono_foro , div#icono_cronograma , div#icono_galeria , div#icono_historia {width: 70px;
                   height: 60px;
                   background-position:10px 0px;
                   background-repeat: no-repeat;}
    
div#icono_proyecto {background-image: url(imagenes/link_proyecto.png);}

div#icono_foro {background-image: url(imagenes/link_foro.png);}

div#icono_cronograma {background-image: url(imagenes/link_cronograma.png);}

div#icono_galeria {background-image: url(imagenes/link_galeria.png);}

div#icono_historia {background-image: url(imagenes/link_acerca.png);}   
   
    
div#colizq_1 , .colizq_2 , div#colder_1 , .colder_2 {height: 75px;}    
 
input[type='text'] , input[type='password'] , input[type='number'] , textarea
{width: 300px;}   

    .p_imagen img {width: 60%;
            margin:auto;
            color:#fff;}
    
}







@media screen and (min-width: 720px) {div#anchopagina {max-width: 1080px;}    
    
div#logo_diacumar {float: left;
               text-align: left;
               margin-left: 15px;
               width: 180px;
               height: 82px;}

div#frase_diacumar {float: left;
                text-align: left;
                font-size: 10px;
                margin: 7px 0px 5px 0px;
                padding: 5px 5px 5px 5px;
                width: 16%;
                height: 80px;}    
    
nav {text-align: right;
    clear: none;
    margin-top: -25px;
    margin-bottom: 15px;
    margin-right: 15px;}

nav ul li a {text-align: center;
             width: 72px;}  
    
main {width: 65%;
     float: left;
     text-align: left;
     margin-bottom: 15px;}      
    
aside {width: 33%;
      float: right;}
    
main .botonreg {background-color: rgba(0,192,0,0.5);
               padding: 5px 0 5px 0;
               margin-bottom: 35px;
               width: 180px;
               float: left;
               display: block;
               text-align: center;}  
    
div#galeria img {width: 32%;}
    
    
div#contenidoaside1 {width: 100%;
                 float: none;
                 margin-top: 0px;}

div#contenidoaside2 {width: 100%;
                 float: none;}

div#contenidoaside3 {width: 100%;
                 float: none;  
                 padding-bottom: 15px;}    
    
footer {padding-left: 160px;
        padding-right: 160px;}   
    
h1 {color: rgb(255,255,255);
    font-size: 36px;}

h2 {color: rgb(150,255,255);
    font-size: 30px;}

h3 {color: rgb(150,255,255);
    font-size: 18px;}

h4 {color: rgb(255,255,255);
    font-size: 24px;}  
    

    
.comentarios img {margin-left: 5%;
                    width: 90%;
                    height: auto;}

input[type='text'] , input[type='password'] , input[type='number'] , textarea
{width: 380px;}
    
.p_staff{width: 100%;
            overflow: auto;}


.p_texto{width: 70%;        
            float: right;
            color:#fff;}
    
.p_imagen{width: 30%;
            float: left;
            text-align: left;
            color:#fff;}
    
.p_imagen img{width: 90%;
            margin:auto;
            color:#fff;}
    
    
    
}


    

@media screen and (min-width: 900px){
    
div#frase_diacumar {font-size: 16px;
                width: 27%;}  
    
nav ul li a {width: 82px;}   
    
    
div#colizq_1 , .colizq_2 , div#colder_1 , .colder_2 {margin: 5px 2px 5px 2px;}  
    
}