/*  Estilos CSS3
    Modelo de Cajas
*/

/* Modificaciones al Template */
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
/*@import url(https://fonts.googleapis.com/css?family=Handlee|Open+Sans+Condensed:300);*/
:focus { outline-width: 0 !important; }
html {
    color: #333;
    /*text-shadow: 0 0 0.2px #111;*/
}
em {
    font-family: georgia, serif;
    font-style: italic;
    font-weight: 100;
}
p { margin: 10px 0;}
.uk-panel-header .uk-panel-title {
    color: #74898e;
 }
.tm-logo {
    background: #39494B;
    position: absolute;
    top:0;
}
.uk-dropdown-navbar {
    background: #435255;
    box-shadow: 1px 3px 6px #333;
}
.uk-dropdown-navbar:before, .uk-dropdown-flip.uk-dropdown-navbar:before {
    border-color: #435255 transparent;
}
.uk-nav-navbar > li > a:hover, .uk-nav-navbar > li > a:focus {
    background: rgba(0,0,0,0.1);
    color: #ff0;
}
.uk-nav-navbar [class*="uk-icon-"] {
    color: #b3c0c7;
}
.uk-panel-title {
    text-transform: none;
}
a.enlace {
    color: #39494B;
    padding: 1px 4px;
}
a:hover.enlace {
    color: #fff;
    background: #39494B;
    text-decoration: none;
    padding: 1px 4px;
    border-radius: 4px;
}
.stitulo {
    margin: 32px 0;
    font-weight: 900;
}
i {
    width: 28px;
    margin: 4px 0 4px 8px;
    color: #5C7A8B;
    font-size: 1.5em;
    text-shadow: 0 0 1px #aaf;
}
i.grande5 {
    font-size: 5em;
}

a, .uk-link {
    color: #2789AD;
    cursor: pointer;
    text-decoration: none;
}
a:hover, .uk-link:hover {
    cursor: pointer;
    color: #B94848;
    text-decoration: none;
    background: rgba(128,0,0,0.1);
}

.uk-nav-side > li > a {
        color: #39494B;
}
.uk-nav-side > li > a:hover {
    color: #fff;
    text-decoration: none;
    background: #B3C0C7;
}
.uk-nav > li.uk-active > a, .uk-nav-dropdown > li.uk-active > a {
    color: #000;
    background: #dee3e6;
}
.uk-panel-header .uk-panel-title {
    font-weight: 900;
}
.uk-article-meta {
    margin-bottom: 16px;
}
.uk-dropdown:not(.uk-dropdown-stack) > .uk-dropdown-grid > [class*="uk-width-"] {
    padding-left: 15px;
    padding-right: 15px;
}

.label-info[href], .badge-info[href] {
    background-color: #a2a2a2;
}
.uk-article-title { font: 28px "Open Sans Condensed",sans-serif; }
.uk-navbar-toggle:after { font-size: 2em; }
.fecha { color: #eee; }
.visitorcounter { width: 75%; }
.uk-panel-box { padding: 30px; color: #333333;}
.uk-panel-box .uk-panel-title {
    color: #5C7A8B;
    font-weight: 900;
}
.uk-panel-box-primary .uk-panel-title {
    color: #ffffff;
}
.uk-panel-box-primary li>a:hover {
    background: rgba(0,0,0,0.1);
}
.cursos {
    background: #C6D1DE;
}
.cursos a {
    color: #fff;
    font-weight: 900;
}
.uk-panel-title {
    color: #5c7a8b;
    font-weight: 900;
}
.uk-badge-warning {
    background-color: #db8e29;
}
.uk-badge {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
}
.uk-nav > li > a {
    margin-bottom: 0.5em;
}
img.uk-animation-scale-up:hover {
    box-shadow: -6px -6px 0 0 rgba(255,0,0,0.3);
}
.tagspopular ul {
    list-style: circle;
    font-size: 0.9em;
}

/* ------------------------------------------- */
.formula {
    font: 100 1.2em serif;
    line-height: 1.3em;
    display: block;
    color: #333;
    max-width: 800px;
    width: 96%;
    padding: 1em;
    background: rgba(179,192,199,0.1);
    /*background: rgba(64,64,0,0.1);*/
}
.boxHori {
    min-width: 320px;
    overflow: auto;
}

.random {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px;
}
.resalta {
    background: #CEDBDE;
    padding: 10px;
    border-left: 5px solid;
}


blockquote { font-family: georgia, serif; color: rgba(0,0,0,0.5);}
.ver { visibility: hidden;}
.trans { opacity: 0.7; }
/*.trans:hover { opacity: 1;box-shadow: 0 15px 15px -15px rgba(0,0,0,0.3); }*/
.trans:hover { opacity: 1; }
.sombra-obj {
    -webkit-box-shadow: 1px 1px 4px #050505;
    -moz-box-shadow: 1px 1px 4px #050505;
    box-shadow: 1px 1px 4px #050505 ;
}
.en-cursos {
    background: rgba(160,190,240,0.4);
    padding: 0.5em;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-weight: 900;
}
.sombra-txt{
    text-shadow: 1px 1px 3px #aaa;
    color: #666;
}
.tabla2 {
    background: #f3f3f3;
    margin: 10px auto;
    border: 1px solid #c5c5c5;
    border-spacing: 1px;
    text-align: left;
}
.tabla2 caption {
    font: 1.2em/1.5 Verdana, sans-serif;
    color: #999999;
}
.tabla2 td {
    background: transparent;
    padding: 5px;
    font: 0.8em Verdana, sans-serif;
}
.tabla2 th {
    background: #fff;
    padding: 10px;
    color: #000;
    border: 1px solid #c5c5c5;
    text-align: center;
}
.tabla2 tr:nth-child(2n+1) {background: #fff;} /* marca cebra filas impares */
.tabla2 tr:hover {background: #E8E8FF; color: #333;} /* cambia la celda de la tabla T2 */
/*######################################################*/
.corchetes {
  padding: 1.4em 1em;
  position: relative;
  box-shadow: -10px 0 rgba(70,130,180,0.7),
               10px 0 rgba(70,130,180,0.7);
  text-align: justify;
  margin: 2em;
}
.corchetes:before, .corchetes:after {
  content:"";
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
  box-shadow:  30px 0 0 0 rgba(70,130,180,0.7) inset,
              -30px 0 0 0 rgba(70,130,180,0.7) inset;
}
.corchetes:before { top: 0; }
.corchetes:after  { bottom: 0; }



/*------------------------------------
    Reglas para dispositivos móviles
  ------------------------------------ */
/** {
    padding            : 0;
    margin             : 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;
}
*/
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7 {
    width    : 100%;
    padding  : 1%;
    margin   : 1% 0;
    outline  : 1px solid rgba(255,0,0,0.1);
    height   : 200px;
    overflow : hidden;
    text-align: center;
}
.fila:before, .fila:after { display: table;  content: " "; }
.fila:after { clear: both; }
.cierra {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* Enlaces */

/*a, a:link, a:visited { text-decoration: none; color: #009; }
a:hover, a.active { color: #ddd; }*/


/* imagen responsive */
.img-resp { max-width: 95%; height: auto; }

.linea { margin: 20px 0; height: 1px;}

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

.izda   { display:inline; float:left; margin: 5px 15px 5px 0;}
.dcha   { display:inline; float:right; margin: 5px 0 5px 15px;}
.centra { display: block; margin: 0 auto;}

.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); }

.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); }

.tm3 {
    margin: 0 24px 0 16px;
    font-size: 3em;
}

/* video responsive */
.box-respon43 {
    margin         : 0;
    height         : 0;
    padding-top    : 22%;
    padding-bottom : 75%;  /* relación 4:3 */
    position       : relative;
    overflow       : hidden;
}
.box-respon {
    margin         : 0;
    height         : 0;
    padding-top    : 30px;
    padding-bottom : 56.25%;   /* relación 16:9 */
    position       : relative;
    overflow       : hidden;
}

.box-respon iframe,
.box-respon object,
.box-respon embed,
.box-respon video {
    position : absolute;
    height   : 100%;
    width    : 100%;
    top      : 0;
    left     : 0;
}

.box-respon43 iframe,
.box-respon43 object,
.box-respon43 embed,
.box-respon43 video {
    position : absolute;
    height   : 100%;
    width    : 100%;
    top      : 0;
    left     : 0;
}

/*-------------------------------
    Reglas PC's de escritorio
  ------------------------------- */
@media (min-width: 768px) {
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7 {
        float        : left;
        display      : block;
        margin-right : 1.2%;
    }
    .col-1 { width: 13%; }
    .col-2 { width: 30%; }
    .col-3 { width: 47%; }
    .col-4 { width: 64%; }
    .col-5 { width: 81%; }
    .col-6 { width: 100%; }
    .col-7 { width: 22% }
    .final { margin-right: 0; }
    .ver { visibility: visible; }

    .uk-panel-box { padding: 30px 20px; }

    .colu {
      -webkit-column-width:479px;
      -moz-column-width:479px;
      -o-column-width:479px;
      column-width:479px;
      -webkit-column-gap: 2em;
      -moz-column-gap: 2em;
      -o-column-gap: 2em;
      column-gap: 2em;
  }
    .rejilla {
      -webkit-column-width:128px;
      -moz-column-width:128px;
      -o-column-width:128px;
      column-width:128px;
      -webkit-column-gap: 32px;
      -moz-column-gap: 32px;
      -o-column-gap: 32px;
      column-gap: 32px;
    }

}

.zoomBox img {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 0;
    transition: all 0.3s ease-out 0s;
    width: 100% !important;
    z-index: 1000;
}
.zoomBox:hover img {
    transform: scale(0.9);
}

@media (max-width: 768px) {
    .tm-navbar-fixed .tm-toolbar + .tm-headerbar {
        margin-top: 0;
    }

    .tm-toolbar {
        display: none;
    }
    .tm-logo-small::after {
        content: 'Math';
        position: absolute;
        top: 0;
        left: 150px;
        z-index: 1000;
        letter-spacing: 0.1em;
        line-height: 50px;
        font-weight: 900;
    }
    .tm-navbar-fixed .tm-headerbar {
        box-shadow: 1px 0 0 #39494B;
    }
}