@charset "utf-8";
/* CSS Document */

/*  :::::::::::::::::::::::::::::::::::::::::::::::::::::
      (cc) 3con14.pro
    :::::::::::::::::::::::::::::::::::::::::::::::::::::  */

/*  #######################################################
      Reglas por defecto y para dispositivos móviles
    #################################################### */

/* === generales     */
html {
    font-size      : 16px;
    text-rendering : optimizelegibility;
    color: #333;
}
* {
    margin  : 0;
    padding : 0;
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    -webkit-transition : all .5s linear;
    -moz-transition    : all .5s linear;
    -ms-transition     : all .5s linear;
    -o-transition      : all .5s linear;
    transition         : all .5s linear;
}

body {
    background: #779;
}

*:focus { outline: none;}

/* === cajas     */
#main {
    max-width : 100%;
    width     : 98%;
    margin    : 3% auto;
    padding   : 1% 1% 0 1%;
    outline   : 1px solid #999;
}

.col-1,.col-6,.col-2 {
    width   : 100%;
    padding : 1%;
    margin  : 1% 0;
    outline: 1px solid rgba(255,255,255,0.1);
/*    height: 140px;
    overflow: hidden;*/
}
.col-6 { text-align: center; }
.col-2 { font: italic 1em georgia; min-height: 200px; outline: none;}

.fila:before, .fila:after { display: table;  content: " "; }
.fila:after               { clear: both; }
.cierra                   { clear: both; height: 0; font-size: 1px; line-height : 0px; }

/*  === fondos    */
.bg-w   { background: rgba(255,255,255,0.1); }
.bg-k   { background: rgba(0,0,0,0.1); }
.bg-r   { background: rgba(255,0,0,0.1); }
.bg-g   { background: rgba(0,255,0,0.1); }
.bg-b   { background: rgba(0,0,255,0.1); }

/*  === textos: color, alineación y tamaño     */
.tx-w   { color: rgba(255,255,255,0.5); }
.tx-k   { color: rgba(0,0,0,0.5); }
.tx-r   { color: rgba(96,0,0,0.5); }
.tx-g   { color: rgba(0,96,0,0.5); }
.tx-b   { color: rgba(0,0,96,0.5); }

.tx-20  { font-size: 2.0em; }
.tx-25  { font-size: 2.5em; }
.tx-30  { font-size: 3.0em; }

.izdo   { text-align: left;    }
.centro { text-align: center;  }
.dcho   { text-align: left;    }
.justi  { text-align: justify; }

/* === enlaces    */
a, a:link, a:visited { text-decoration: none; color: #fa0; }
a:hover, a.active    { color: #fff;}

/* === listas    */
ol, ul { margin-left: 35px; }

/*  === sombras, opacidad     */
.sombra-obj {
    -webkit-box-shadow : 1px 1px 4px #050505;
    -moz-box-shadow    : 1px 1px 4px #050505;
    box-shadow         : 1px 1px 4px #050505 ;
}
.sombra-txt {
    text-shadow        : 1px 1px 3px #333;
    color              : #fff;
}

.trans       { opacity: 0.5; }
.trans:hover { opacity: 1; box-shadow: 0 0 4px rgba(255,0,0,1); border-radius: 10px;}

/* === imagen, imagen responsive */
.izda   { display:inline; float:left; margin: 5px 15px 5px 0;}
.dcha   { display:inline; float:right; margin: 5px 0 5px 15px;}
img     { display: block; margin: 0 auto; }
.respon { max-width: 100%; height: auto; }


/*  #######################################################
      Reglas para PC's de escritorio
    #################################################### */

@media (min-width: 540px) {

    #main { width: 520px; }

    .col-1,.col-6,.col-2 {
        float        : left;
        display      : block;
        margin-right : 2%;
    }
    .col-1 { width: 49%; }
    .col-2 { width: 48%; }
    .col-6 { width: 100%; }
    .fin1  { margin-right: 0;}

}

@media (min-width: 880px) {

    #main { width: 1000px; }

    .col-1,.col-6,.col-2 {
        float        : left;
        display      : block;
        margin-right : 1.333%;
    }
    .col-1 { width: 24%; }
    .col-2 { width: 48%; }
    .col-6 { width: 100%; }
    .fin2  { margin-right: 0;}
}