@charset "utf-8";

/* =============================================================================
   DISEÑO ESCRITORIO: Ancho máximo 1024px
   ========================================================================== */

/*La clase "hoc" es una clase genérica utilizada para centrar un elemento que contiene
horizontalmente. Debe ser utilizado en conjunción con una segunda clase o ID*/
.hoc{
    max-width:978px;
    display:block; margin:0 auto;
}

/* Container */
.container{padding:80px 0;}
.container .demo{text-align:center;}
.container .demo div{padding:8px 0;}
.container .demo div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
.container .demo div:nth-child(even){color:#FFFFFF; background:#979797;}

/* Clear and Group */
.clear,
.group{display:block;}

.clear::before,
.clear::after,
.group::before,
.group::after{display:table; content:"";}

.clear,
.clear::after,
.group,
.group::after{clear:both;}

/* Margen inferior */
.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{margin-bottom:50px;}
.btmspace-80{margin-bottom:80px;}

/* Grid */
.one,
.one_half,
.one_third,
.two_third,
.one_quarter,
.two_quarter,
.three_quarter{
    display:inline-block;
    float:left;
    margin:0 0 0 3.06748466257669%;
    list-style:none;
    }

.one {width:100%;}
.one_half, .two_quarter{width:48.46625766871166%;}
.one_quarter{width:22.69938650306748%;}
.three_quarter{width:74.23312883435584%;}
.one_third{width:31.28834355828221%;}
.two_third{width:65.6441717791411%;}

/* Clase .first */
.first{margin-left:0; clear:left;}

/* Clase wrapper */
.wrapper{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    text-align:left;
    word-wrap:break-word;
}

/* Rows */
.row0{color:rgba(255,255,255,.6); background-color:rgba(0,0,0,.2);}
.row0 a{color:inherit;}
.row1{color:#797979; background-color:#FFFFFF;}
.row2, .row2 a{}
.row3{color:#797979; background-color:#ECECEC;}
.row4{color:#C1C1C1; background-color:#292B2C;}
.row5, .row5 a{color:#C1C1C1; background-color:#1D1E1F;}

/* =============================================================================
   DISEÑO TABLETA: Ancho máximo 900px
   ========================================================================== */

@media screen and (max-width:900px){
    
	.hoc{max-width:90%;}
    .container .demo div{margin-bottom:0;}
}

/* =============================================================================
   DISEÑO CELULAR: Ancho máximo 750px
   ========================================================================== */
@media screen and (max-width:750px){
	.one_half,
    .one_third,
    .two_third,
    .one_quarter,
    .two_quarter,
    .three_quarter{
        display:block;
        float:none;
        width:auto;
        margin:0 0 30px 0; padding:0;}
}