@charset "UTF-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import 'https://fonts.googleapis.com/css?family=Orbitron:400,700';

body {font-size:18px; color:#000; font-family: 'Lato', sans-serif; font-weight:normal; margin:0; line-height:26px; color: #fff; background-color:#4bb4e6}
.clear { clear:both;}
.hidden {display: none !important;}
.left {float: left !important;}
.right {float: right !important;}
.content {max-width: 1180px; margin: 0 auto; padding: 0 10px}
.section {margin-left: 40px;}
.top {margin-top: 80px;}
.top0 {margin-top: -10px;}
.midtop {margin-top: 40px;}
.footer {display: table; width: 100%; padding: 20px 0 10px 0; background-color: #1C1E29}
.footer .content {padding: 10px; }
.footer ul {float: left; list-style: none; padding: 0; margin: 5px 0 0 0;}
.footer ul li {display: inline; margin-right: 10px; font-size:13px; font-family: 'Orbitron', sans-serif; text-rendering: optimizeLegibility; letter-spacing: 0.5px; font-weight: 400;}
.footer ul li a {color: #fff; text-decoration: none;}
.footer ul li a:hover {color:#ff7900; }
.logo {float: left; width:100px; margin: 10px 0;}
.ico-title {float: left; width: 30px; margin-right:10px; }
.x5 {float: left; width: 18%; padding: 0.8%; border-right: solid #d9d9d9 1px; text-align: center; margin-bottom: 30px;}
.logo-login {width: 350px; margin: 80px auto 20px auto;}
img {width: 100%}
a img:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
.social {float: right;}
.social img {width: 40px; margin-left: 10px;}
.social img:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
.unidad-img {float: left; width: 30%; margin-right: 15px;}
.unidad {float: left; width: 67%; display: table; margin-bottom: 30px;}
hr{border-top: 1px solid #d9d9d9; clear: both; margin-bottom: 40px;}
.resources {display: table; margin-bottom: 60px;}
.resources img {float: left; width: 20px; margin: 5px 10px 0 0;}
.answer {clear: both; margin-bottom: 15px;}
#test form p, .question {font-size: 24px; line-height: 32px; font-weight: normal;}
#test form {margin-bottom: 30px;}
#test input[type='submit'] {margin: 40px 25px 20px 0;}
#test-result .button{float: none; margin: 10px 0 50px 0; padding: 8px 15px;}
.result {width: 282px; height: 200px; margin: 15px auto; border: solid 1px #fff; text-align: center; font-size: 80px;}
.result p {margin-top: 80px;}
.correct {color: #40ff00; margin: 5px 0 0 30px;}
.user {color: #a92d11; margin: 5px 0 0 30px;}
.none {margin: 5px 0 0 30px;}
.row {max-width: 800px; height: 30px; border-bottom: solid 1px #d9d9d9; padding: 8px 0 4px 0;}
.row-name {float: left; width: 60%; margin-right: 5px;}
.row-date {float: left; width: 15%; margin-right: 5px;}
.row-result {float:right; width: 10%; margin-right: 5px;}
.legend {text-transform: uppercase;}
#login p {color: #000;}
#login p a {color: #EAAB1C;}
.login-box button {margin-top: 0px;border: 0;border-radius: 2px;color: white;padding: 15px 30px;text-transform: uppercase;font-weight: 400;font-size: 18px;letter-spacing: 1px;background-color: #ff7900;cursor:pointer;outline: none;}
.login-box button:hover{opacity: 0.7;transition: 0.5s;}
.login-box button:hover {opacity: 0.7;transition: 0.5s;}
.x2 {float: left; width: 46%; margin: 0 0 2% 0}
#reg-docente {max-width: 700px;}



/*FORMS*/
input {-webkit-appearance: none;}
.input {border: 1px solid #ccc; width: 300px; height:40px; overflow: hidden; background-color:#fff; margin:10px 0;}
.input input[type='text']{ padding: 5px 8px; width: 130%; border: none; box-shadow: none; background: #fff; -webkit-appearance: none; font-size: 15px;}
#form_user_home .input {width: 405px;}
.select{border: 1px solid #ccc; width: 300px; height:40px; border-radius: 3px; overflow: hidden; background: #fff url("../img/icon-select.png") no-repeat 95% 50%; margin:0 25px 15px 0;}
.select select {padding: 5px 5px; width: 115%; border:none; box-shadow: none; background: transparent; background-image: none; -webkit-appearance: none; font-size: 14px;}
#form_user_home, #form_user_add, #form_list, #form_task_home {margin-bottom: 45px; display: table}
input[type=checkbox] {visibility: hidden;}
input[type='submit']{padding: 8px 30px; color: #fff; text-align: center; font-size: 18px; margin: 10px 25px 10px 0; display: inline-block; border: solid 1px #fff; cursor:pointer; background: none; text-transform: uppercase;}
input[type='submit']:hover {background: #ff7900; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
/*Radio buttons*/
.control {font-size: 18px;position: relative;display: block;margin: 0 0 15px 30px;padding-left: 30px;cursor: pointer;}
.control input {position: absolute;z-index: -1;opacity: 0;}
.control__indicator {position: absolute;top: 2px;left: 0;width: 20px;height: 20px;background: #e6e6e6;}
.control--radio .control__indicator {border-radius: 50%;}
.control:hover input ~ .control__indicator,.control input:focus ~ .control__indicator {background: #ccc;}
.control input:checked ~ .control__indicator {background: #ff7900; border: solid 2px #fff;}
.control:hover input:not([disabled]):checked ~ .control__indicator, .control input:checked:focus ~ .control__indicator {background: #ff7900;}
.control input:disabled ~ .control__indicator {pointer-events: none;opacity: .6;background: #e6e6e6;}
.control__indicator:after {position: absolute; display: none; content: '';}
.control input:checked ~ .control__indicator:after {display: block;}
.control--checkbox .control__indicator:after {top: 4px;left: 8px;width: 3px;height: 8px;transform: rotate(45deg);border: solid #fff; border-width: 0 2px 2px 0;}
.control--checkbox input:disabled ~ .control__indicator:after {border-color: #7b7b7b;}
.control--radio .control__indicator:after {top: 7px;left: 7px;width: 6px;height: 6px;border-radius: 50%;background: #fff;}
.control--radio input:disabled ~ .control__indicator:after {background: #7b7b7b;}
/*end radio buttons*/
/*END FORMS*/

/*BUTTONS*/
.button{ float: left; padding: 8px 30px; color: #fff; text-align: center; font-size: 18px; margin: 10px 25px 10px 0; display: inline-block; border: solid 1px #fff;}
a.button {text-decoration: none; color:#FFF !important; text-transform: uppercase;}
a.button:hover {background-color: #ff7900; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.button-excel{padding: 8px 15px 3px 35px; background-color: #69b332; background-image: url(../img/ico-excel.png); background-size: 20px 23px; background-position: 12px 8px; background-repeat: no-repeat; color: #fff; text-align: center; font-size: 18px; margin: 15px 0; display: inline-block}
a.button-excel {text-decoration: none; color:#FFF !important; text-transform: uppercase;}
a.button-excel:hover {background-color: #aed084; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.button-exit{ float: right; padding: 3px 8px;  color: #fff; text-align: center; font-size: 15px; margin: 9px 0 0 0px; display: inline-block; border: solid 1px #fff;}
a.button-exit {text-decoration: none; color:#FFF !important; text-transform: uppercase;}
a.button-exit:hover {background-color: #ff7900; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.button-delete{ float: right; padding: 3px 8px 0 8px; background-color: #a33636; color: #fff; text-align: center; font-size: 15px; margin: 9px 0 0 0px; display: inline-block}
a.button-delete {text-decoration: none; color:#FFF !important; text-transform: uppercase;}
a.button-delete:hover {background-color: #cc6666; color:#fff !important; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.fa-power-off {margin-right: 5px;}
/*END BUTTONS*/

/*FONTS*/
h1 {font-family: "Orbitron", sans-serif; font-weight: normal; line-height: 44px; font-size: 38px;} 
h2 {font-family: "Orbitron", sans-serif; font-weight: normal; line-height: 34px; font-size: 26px; margin:5px 0 20px 0; text-transform: uppercase; letter-spacing: 1px;}
h3 {font-family: "Orbitron", sans-serif; font-weight: bold; line-height: 28px; font-size: 22px; margin:5px 0 20px 0; text-transform: uppercase; letter-spacing: 1px;}
.big {font-size: 24px; line-height: 32px; font-weight: 300; margin-bottom: 10px}
.bignumber {font-size: 36px; line-height: 44px; font-weight: 400; margin: 0 0 5px 0;}
.medium {font-size: 24px; line-height: 32px; font-weight: normal;}
.small {font-size: 14px; line-height: 20px;}
.center {text-align: center;}
.green {color: #69b332;}
.title-client {font-weight: 300; font-size: 55px; color: white; margin: 0 auto;padding-top: 100px; text-align: center;}
/*END FONTS*/

/*LINKS*/
a img {text-decoration: none;border: 0 none;}
a:link {color:#fff;}      /* unvisited link */
a:visited {color:#fff;}  /* visited link */
a:hover {color:#ffd259;}  /* mouse over link */
a:active {color:#fff;}  /* selected link */
.roll:hover {zoom: 1; filter: alpha(opacity=70); opacity: 0.7;}
/* END LINKS*/

/*FOOTER BOTTOM PAGE*/
html, body {height: 100% !important;}
.tabla-ga {display: table;width: 100%;}
html>/**/body .tabla-ga {height: 100%;}
.celda-ga {display: table-row;height: 1px;overflow: hidden;}
html>body .celda-ga.Expandir {height: 100%;}
/*END FOOTER BOTTOM PAGE*/

/*LOGIN*/
#login {background: url("../img/background-class.jpg") no-repeat center center fixed; background-size: cover; margin: 0;}
#login h1 {text-align: center; color: #000;}
.login-box a {color: #888; text-decoration: underline;}
.login-box a:hover {color: #ff7900;}
.login-box p {margin-top: 30px;}
.login-title {text-transform: uppercase;color: white;font-weight: 400;letter-spacing: 1px;font-size: 1.4em;line-height: 2.8em;}
.login-container {margin: 0;}
.login-box {background-color: white;max-width: 340px;margin: 0 auto 40px auto;position: relative;top: 20px;padding-bottom: 30px;border-radius: 5px; text-align: center;box-shadow: 0 5px 40px rgba(0,0,0,0.3);}
.login-box .box-header {background-color: #ff7900;margin-top: 0;border-radius: 5px 5px 0 0;}
.login-box label {font-weight: 700;font-size: .8em;color: #888;letter-spacing: 1px;text-transform: uppercase;line-height: 2em;}
.login-box input {margin: 0 0 20px 0;padding: 8px;border: 1px solid #ccc;border-radius: 2px;font-size: .9em;color: #888;}
.login-box input:focus {outline: none; border-color: #50bbff; transition: 0.5s; color: #665851;}
.login-box input[type='submit'] {margin-top: 0px;border: 0;border-radius: 2px;color: white;padding: 15px 30px;text-transform: uppercase;font-weight: 400;font-size: 18px;letter-spacing: 1px;background-color: #ff7900;cursor:pointer;outline: none;}
.login-box input[type='submit']:hover{opacity: 0.7;transition: 0.5s;}
.selected {color: #50bbff!important; transition: 0.5s;}
/* Animation Delay */
.login-box {
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 0s;
}
/*END LOGIN*/


@media only screen and (max-width: 1160px) {
    .logo-login {margin-top: 10px;}
}
@media only screen and (max-width: 980px) {
}
@media only screen and (max-width: 750px) {
    .x5 {width: 30%;}
}
@media only screen and (max-width: 630px) {
    .logo-login {width: 80%;}
    h1 {font-size: 32px; line-height: 38px;}
    .login-box {top: 0; max-width: 300px;}
    .footer .content {padding: 2%;}
    .footer ul li {display: block; margin-bottom: 10px;}
    .section {margin-left: 5px;}
    .x5 {width: 98%; margin-bottom: 5px; border-bottom: solid #d9d9d9 1px; border-right: 0px;}
    .unidad-img, .unidad {width: 98%; margin-right: 0;}
    .ico-title {display: none;}
    .content {padding: 1%;}
    .row {width: 100%;  display: table;}
    .row-date, .row-name, .row-result {float: none;  width: 98%; margin: 0;}
    .x2 {float: none; width: 97%; margin: 0 0 2% 0}
    .x2 .input, .x2 .select {width: 94%}
    .content {width: 94%; padding: 0 3%}
}