body { font-family: 'Open Sans', Arial, sans-serif; background: #444; color: #fff;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: #444; }
main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9;
    overflow: hidden; overflow-y: auto; padding-top: 168px;  }

.logo { position: absolute; top: 10px; right: 10px; width: 50px; z-index: 2; }
h2 { font-family: 'Open Sans Condensed', "Arial Narrow", sans-serif; font-weight: 300; font-size: 28px; margin: 10px auto 20px;  }
h2 span { font-size: 20px; }

.form,
.form .form-group { margin-bottom: 0; }
.form-select { border-top: 1px solid #888; }
.form-control,
.input-group-addon,
.alert { border-radius: 0 !important; box-shadow: none !important; }

select.form-control { padding: 10px 8px; height: 42px; border: 0; background: #444; color: #fff; font-weight: 600;  }
.input-group-addon { padding: 6px 0 6px 12px; border: 0; background: #444; color: #fff; }
.input-group-addon i { font-size: 16px; }
.input-group:before {
    content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; top: 12px; right: 12px; width: 10px; text-align: center; z-index: 10; color: #fff;
}

.hora-wrapper {  }
.hora-wrapper .hora { font-family: 'Open Sans Condensed', "Arial Narrow", sans-serif; font-size: 22px;
    padding: 14px 10px 6px; font-weight: 400; background: #f4f4f4; color: #444; border: 1px solid #fff; border-width: 1px 0;}
.taller { padding: 8px 10px; color: #fff; background: #999; font-size: 13px; font-weight: 600; position: relative; min-height: 52px; }
.taller .aula { position: absolute; top: 0; right: 0; z-index: 1; padding: 5px;
font-family: 'Open Sans Condensed', "Arial Narrow", sans-serif; font-size: 14px; }

.aloha { background-color: #ff9922; color: #fff; }
.asesoramiento { background-color: #3bb3c4; color: #fff; }
.acogida { background-color: #a0a0a0; color: #fff; }
.tecnicas-estudio { background-color: #e9c209; color: #333; }
.enriquecimiento { background-color: #eff311; color: #333; }
.robotica { background-color: #cf1314; color: #fff; }
.astronomia { background-color: #9323bd; color: #fff; }
.cortometraje { background-color: #e336a0; color: #fff; }
.ciencias { background-color: #09ae23; color: #fff; }
.encuentros-ciencias { background-color: #087517; color: #fff; }
.arqueologia { background-color: #d4af6a; color: #fff; }
.teatro { background-color: #8ac72a; color: #fff; }
.pintura { background-color: #c70b6a; color: #fff; }
.lectura { background-color: #1b4a8d; color: #fff; }
.debate { background-color: #8d5a1a; color: #fff; }
.taller-rol { background-color: #3ca877; color: #fff; }
.reporteros { background-color: #70a237; color: #fff; }
.ajedrez { background-color: #e387cb; color: #fff; }
.fotografia { background-color: #a1e7e7; color: #333; }
.huerto { background-color: #44a852; color: #fff; }

.no-hay-talleres {
    text-align: center;
}

.online-link { color: #fff; font-size: 13px; position: absolute; top: 18px; right: 10px; z-index: 1; }
.online-link a { color: #fff; text-decoration: none; border: 1px solid #fff; padding: 8px 10px; border-radius: 7px; }
.online-link a i { margin-right: 3px; }
.online-link a:hover { background-color: #fff; color: #444; }
.tecnicas-estudio .online-link a,
.enriquecimiento .online-link a { color: #444; border-color: #444; }
.tecnicas-estudio .online-link a:hover,
.enriquecimiento .online-link a:hover { background-color: #444; color: #fff; }

.no-hay-talleres i { margin: 30px 0; }
.no-hay-talleres h4 { font-family: 'Open Sans Condensed', "Arial Narrow", sans-serif; font-size: 34px; }

@media (min-width: 768px) {
    h2 { font-size: 32px; margin: 10px 0 20px 0;  }
    h2 span { font-size: 24px; }
    .hora-wrapper .hora { font-size: 24px; }
    .taller { padding: 15px; font-size: 16px; }
    .input-group-addon { font-size: 14px; }
    select.form-control { padding: 12px 12px; height: 46px; font-size: 16px; }
}

.html-spinner {
    width: 60px;
    height: 60px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -30px auto auto -30px;
    z-index: 100000;
    background: #fff;
    border: 4px solid rgba(108, 156, 255, .2);
    border-bottom-color: #4d9eff;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-radius: 100%
}

.html-spinner:before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    margin: -15px auto auto -15px;
    border: 4px solid rgba(108, 156, 255, .2);
    border-bottom-color: #4d9eff;
    -webkit-animation: antispin .5s linear infinite;
    -moz-animation: antispin .5s linear infinite;
    animation: antispin .5s linear infinite;
    border-radius: 100%
}

.html-spinner.small {
    width: 40px;
    height: 40px;
    margin: -20px auto auto -20px;
    border-width: 1px
}

.html-spinner.small:before {
    width: 20px;
    height: 20px;
    margin: -10px auto auto -10px;
    border-width: 2px
}

@-moz-keyframes antispin {
    from {
        -moz-transform: rotate(360deg)
    }
    to {
        -moz-transform: rotate(0)
    }
}

@-webkit-keyframes antispin {
    from {
        -webkit-transform: rotate(360deg)
    }
    to {
        -webkit-transform: rotate(0)
    }
}

@keyframes antispin {
    from {
        transform: rotate(360deg)
    }
    to {
        transform: rotate(0)
    }
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}