/*  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    CSS portal
    (cc) 3con14, abr-2014
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
@font-face {
    font-family: 'iconos';
    src:url('../fonts/icomoon.eot?-r71d6z');
    src:url('../fonts/icomoon.eot?#iefix-r71d6z') format('embedded-opentype'),
        url('../fonts/icomoon.woff?-r71d6z') format('woff'),
        url('../fonts/icomoon.ttf?-r71d6z') format('truetype'),
        url('../fonts/icomoon.svg?-r71d6z#icomoon') format('svg');
    font-weight : normal;
    font-style  : normal;
}
html {
    position  : relative;
    height    : 225%;
}
body {
    background: #111;
    font-size : x-large;
    color: #ddd;
}
* {
    -webkit-box-sizing : border-box;
    -moz-box-sizing    : border-box;
    box-sizing         : border-box;
    padding            : 0.3em 0.1em;
    text-shadow        : 2px 2px 2px rgba(0,0,0,0.5);
}
*:focus { outline: none; }


html::after {
  content                 : "";
  background              : url(../img/f11.jpg) no-repeat center center fixed;
  opacity                 : 0.2;
  top                     : 0;
  left                    : 0;
  bottom                  : 0;
  right                   : 0;
  position                : absolute;
  z-index                 : -1;
  -webkit-background-size : cover;
  -moz-background-size    : cover;
  -o-background-size      : cover;
  background-size         : cover;
}

section {
    overflow : hidden;
    width    : 99%;
}

h2 {
    font-family : 'Rationale', Verdana, sans-serif;
    font-size   : 1.3em;
    line-height : 1em;
    color       : #aa9;
}

header, footer {
    text-align: center;
}

header {
    font  : 300 3em/1 'Open Sans Condensed', sans-serif;
    color : #fff;
}

footer {
    color      : #bbb;
    padding    : 0 10px;
    text-align : center;
    font       : 0.9em/1 'Electrolize', sans-serif;
}

ul {
    margin          : 0 0 0 35px;
    list-style-type : none;
    font            : 400 1em/1.5 'Electrolize',sans-serif;
}
#main{
    max-width: 1280px;
    margin: 1em auto;
    width: 94%;
}
/* ========== Enlaces ------------------- */
a img {border: none;}
a {text-decoration: none;}
a:link, a:visited {color: #bbbbbb;}
a:hover, a:active, a:focus {
    color: #9999ff;
    border-bottom: 1px solid #900;
}

.linea {
    border-top: 2px solid rgba(255,0,0,0.5);
    margin: 0 auto;
}

.check:before,.checkA:before, .imagen:before,.joomla:before,.youtube:before,.cursos:before,
.html5:before,.moodle:before,.vimeo:before,.codigo:before,.excel:before,
.aula:before,.equis:before,.basica:before,.pdi:before,.web2:before {
    font           : 1.3em iconos;
    vertical-align : middle;
}

.check:before {
    content: "\f00c  ";
    color: #666;
}
.checkA:before {
    content: "\f00c  ";
    color: #950;
}
.imagen:before {
    content: "\f03e  ";
    color: #cc0;
}
.joomla:before {
    content: "\e600  ";
    color: #09a;
}
.youtube:before {
    content: "\f167  ";
    color: #aa0;
}
.vimeo:before {
    content: "\f194  ";
    color: #aa0;
}
.codigo:before {
    content: "\f121  ";
    color: #aa0;
}
.excel:before {
    content: "\e601  ";
    color: #aa0;
}
.equis:before {
    content: "\f12b  ";
    color: #0a0;
}
.cursos:before {
    content: "\f085  ";
    color: #09a;
}
.html5:before {
    content: "\f13b  ";
    color: #09a;
}
.moodle:before {
    content: "\f136  ";
    color: #09a;
}
.basica:before {
    content: "\e606  ";
    color: #09a;
}
.pdi:before {
    content: "\f17a  ";
    color: #09a;
}
.web2:before {
    content: "\f12e  ";
    color: #09a;
}
.aula:before {
    content: "\e603  ";
    color: #0a0;
}


/*  <<<<<<<<<<<<<<<<<<<<<<<<<<<  */
@media screen and (min-width: 769px) {
    body { font-size: large;}
    section {
        width: 49.8%;
        float: left;
        vertical-align: top;
    }
    section:nth-child(2n+1) {
        text-align: right;
        padding-right: 2em;
    }

    #main { width: 90%;}

    p {font-size: 0.95em;}

    .linea { width: 75%;}

    .clear {clear: both;}

    .check:before,.equis:before, .aula:before {
        visibility: hidden;
    }
    .check:after {
        font           : 1.3em iconos;
        vertical-align : middle;
        content        : "  \f00c";
        color          : #950;
    }
    .equis:after {
        font           : 1.3em iconos;
        vertical-align : middle;
        content: "  \f12b  ";
        color: #0a0;
    }
    .aula:after {
        font           : 1.3em iconos;
        vertical-align : middle;
        content: "  \e603  ";
        color: #0a0;
    }
}