@font-face {
    font-family: "TitilliumWeb-Regular";
    src: url(fonts/TitilliumWeb-Regular.ttf);
}

@font-face {
    font-family: "TitilliumWeb-Black";
    src: url(fonts/TitilliumWeb-Black.ttf);
}

@font-face {
    font-family: "TitilliumWeb-Bold";
    src: url(fonts/TitilliumWeb-Bold.ttf);
}

@font-face {
    font-family: "TitilliumWeb-BoldItalic";
    src: url(fonts/TitilliumWeb-BoldItalic.ttf);
}

@font-face {
    font-family: "TitilliumWeb-ExtraLight";
    src: url(fonts/TitilliumWeb-ExtraLight.ttf);
}

@font-face {
    font-family: "TitilliumWeb-ExtraLightItalic";
    src: url(fonts/TitilliumWeb-ExtraLightItalic.ttf);
}

@font-face {
    font-family: "TitilliumWeb-Italic";
    src: url(fonts/TitilliumWeb-Italic.ttf);
}

@font-face {
    font-family: "TitilliumWeb-Light";
    src: url(fonts/TitilliumWeb-Light.ttf);
}

@font-face {
    font-family: "TitilliumWeb-LightItalic";
    src: url(fonts/TitilliumWeb-LightItalic.ttf);
}

@font-face {
    font-family: "TitilliumWeb-SemiBold";
    src: url(fonts/TitilliumWeb-SemiBold.ttf);
}

@font-face {
    font-family: "TitilliumWeb-SemiBoldItalic";
    src: url(fonts/TitilliumWeb-SemiBoldItalic.ttf);
}

::-webkit-scrollbar { 
    display: none; 
}

body {
  background-color: #FFF900;
  text-align: center;
  color: #61008C;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "TitilliumWeb-Regular";
}

h1, h2, h3, h4, p, ul, li, a {
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}

body.login img {
  width: 40%;
  margin-top: 50px;
  margin-bottom: 35px;
}

body.login h1 {
  font-size: large;
  margin-bottom: 5px;
}

body.login h2 {
  font-size: x-small;
  font-family: "TitilliumWeb-Light";
}

body.login h3 {
  font-size: xx-small;
  font-family: "TitilliumWeb-Light";
  color: #FF5600;
  margin-bottom: 15px;
}

body form {
  display: block;
  text-align: center;
}

body form input[type="text"], input[type="password"] {
  display: block;
  margin: 10px auto;
  padding:10px 15px;
  font-size: x-small;
  font-family: "TitilliumWeb-Regular";
  border-radius: 30px;
  border: 1px solid lightgray;
  width: 80%;
}

body form textarea {
  font-size: x-small;
  font-family: "TitilliumWeb-Regular";
  border-radius: 20px;
  border: 1px solid lightgray;
  width: 80%;
  height: 150px;
  margin: 10px auto;
  padding: 10px 15px;
  resize: none;
}

body form input[type="submit"] {
  display: block;
  margin: 10px auto;
  padding: 10px 35px;
  font-size: large;
  font-family: "TitilliumWeb-Regular";
  border-radius: 30px;
  border: 0px;
  color: #FFF900;
  background-color: #FF5600;
  cursor: pointer;
}

body form input[type="submit"]:hover {
  background-color: #FF3300;
}

body form input:focus {
  outline: none;
}

body form textarea:focus {
  outline: none;
}

body.materia-edit form {
  margin-bottom: -30px;
  text-align: center;
}

ul.colors {
  display: flex;
  padding-top: 14px;
  margin-bottom: 70px;
  margin-left: 10%;
  margin-right: 10%;
  justify-content: space-between;
}

ul.colors li {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  cursor: pointer;
  position: relative;
}

body div.footer {
  margin-top: 35px;
  background-color: #61008C;
  padding: 15px;
  position: relative;
}

body div.footer a {
  color: #FFF900;
  font-size: small;
}

body div.footer a.add {
  display: block;
  background: url(images/footer_add.png) no-repeat top;
  background-size: 36px;
  height: 60px;
}

body div.footer a.save {
  display: block;
  background: url(images/footer_save.png) no-repeat top;
  background-size: 36px;
  height: 60px;
}

body div.footer p {
  padding-top: 45px;
}

body div.header {
  text-align: left;
  background-color: #06FF00;
  position: relative;
  height: 75px;
  margin-bottom: 10px;
}

body.materia-edit div.header {
  background-color: #FFF900;
}

body.materia-edit form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}

body.entrega-edit div.header {
  background-color: #FFF900;
}

body div.footer a.back {
  display: block;
  background: url(images/footer_back.png) no-repeat top;
  background-size: 36px;
  height: 60px;
}

body.entrega-edit form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}

body div.header img {
  height: 60px;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 0px;
}

body div.header div.tabs {
  margin-left: 65px;
  margin-right: 3px;
  bottom: 0;
  right: 0;
  position: absolute;
}

body div.header div.tabs a {
  display: inline-block;
  background-color: #FFF900;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 3px;
  color: #61008C;
}

body div.header div.tabs a.selected {
  color: #FFF900;
  background-color: #61008C;
}

div.summary {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 25px;
  margin-bottom: 25px;
}

div.summary img {
  width: 100%;
  height: 10px;
}

div.summary h1 {
  text-align: left;
  font-size: medium;
  font-family: "TitilliumWeb-Light";
  color: #D90067;
}

div.summary h2 {
  text-align: left;
  font-size: small;
  font-family: "TitilliumWeb-Light";
  color: #61008C;
  margin-top: -5px;
}

div.collapsable {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 3px;
}

div.collapsable div.primary {
  position: relative;
  border-radius: 4px 4px 0px 0px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #444;
  text-align: left;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 8px;
}

div.collapsable div.secondary {
  background-color: #F0F0F0;
  border-radius: 0px 0px 4px 4px;
  display: none;
  text-align: left;
  position: relative;
}

div.collapsable div.primary h1 {
  font-size: small;
  font-family: "TitilliumWeb-ExtraLight";
  color: #FFF900;
}

div.collapsable div.primary h2 {
  font-size: small;
  font-family: "TitilliumWeb-ExtraLight";
  color: #FFF900;
}

div.collapsable div.primary h1.dark {
  color: #61008C;
}

div.collapsable div.primary h2.dark {
  color: #61008C;
}

div.collapsable div.secondary div.actions {
  position:absolute;
  bottom: -3px;
  right: 0;
  padding-right: 10px;
}

div.collapsable div.secondary div.actions a {
  background-color: #61008C;
  color: white;
  padding-right: 5px;
  padding-left: 5px;
  font-size: xx-small;
  font-family: "TitilliumWeb-Light";
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

body.entregas div.collapsable div.primary img {
  width: 20px;
  position: absolute;
  right: 30px;
  top: 25px;
}

body.materias div.collapsable div.primary img {
  width: 15px;
  position: absolute;
  right: 30px;
  top: 15px;
}

div.collapsable div.secondary ul {
  font-size: small;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 8px;
  font-family: "TitilliumWeb-SemiBold"
}

div.collapsable div.secondary ul li.done {
  text-decoration: line-through;
  color: #777;
  font-family: "TitilliumWeb-Regular"
}

ul.colors li.selected {
  background: url(images/tick.png) no-repeat center;
  background-size: 20px;
}

div.like a {
  background-color: #61008C;
  color: white;
  padding-right: 5px;
  padding-left: 5px;
  font-size: xx-small;
  font-family: "TitilliumWeb-Light";
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

body.preguntas h1 {
  font-size: large;
  margin-bottom: 20px;
  margin-top: 25px;
}

body.preguntas h2 {
  font-size: 0.9em;
  color: #D90067;
  margin-top: 15px;
  text-align: left;
}

body.preguntas h3 {
  font-size: small;
  margin-top: 8px;
  text-align: left;
}

div.contact a {
  background-color: #61008C;
  color: white;
  padding-right: 5px;
  padding-left: 5px;
  font-size: xx-small;
  font-family: "TitilliumWeb-Light";
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

body.extras h1 {
  font-size: large;
  margin-bottom: 5px;
  margin-top: 25px
}

body.extras div.video {
  background-color: lightgray;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 5px;
}

body.extras div.video video {
  margin-bottom: 15px;
  width: 100%;
  border-radius: 5px 5px 0px 0px;
  position: relative;
}

body.extras div.video div.like {
  margin-top: -21px;
  position: absolute;
  right: 0;
  margin-right: 5%;
  padding-right: 5px;
}

div.calendar-container {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 3px;
}

div.calendar-container div.primary {
  position: relative;
  border-radius: 4px 4px 0px 0px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #444;
  text-align: left;
  padding-left: 20px;
  padding-top: 13px;
  padding-bottom: 10px;
  background-color: #06FF00
}

div.calendar-container div.secondary {
  background-color: #F0F0F0;
  border-radius: 0px 0px 4px 4px;
  text-align: left;
  position: relative;
}

div.calendar-container div.primary h1 {
  font-size: large;
  font-family: "TitilliumWeb-Regular";
  color: #61008C;
}

div.calendar-container div.secondary div.actions {
  position:absolute;
  bottom: -3px;
  right: 0;
  padding-right: 10px;
}

div.calendar-container div.secondary div.actions a {
  background-color: #61008C;
  color: white;
  padding-right: 5px;
  padding-left: 5px;
  font-size: xx-small;
  font-family: "TitilliumWeb-Light";
  border-radius: 3px 3px 0 0;
  cursor: pointer;
}

body.calendar div.calendar-container div.primary img.prev {
  width: 10px;
  position: absolute;
  right: 60px;
  top: 18px;
}

body.calendar div.calendar-container div.primary img.next {
  width: 10px;
  position: absolute;
  right: 20px;
  top: 18px;
}

body.calendar div.calendar-container div.secondary table {
  width: 100%;
  padding: 10px;
}

body.calendar div.calendar-container div.secondary table tr td {
  text-align: center;
  font-family: "TitilliumWeb-SemiBold";
  height: 30px;
  cursor: pointer;
}

body.calendar div.calendar-container div.secondary table tr td.selected {
  border-radius: 50px;
  border: 2px solid;
}

body.preguntas div.container {
  background-color: lightgray;
  margin-left: 5%;
  margin-right: 5%;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 5px;
}

body.preguntas div.container {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  border-radius: 5px 5px 0px 0px;
  position: relative;
}

body.preguntas div.container div.contact {
  margin-top: -16px;
  position: absolute;
  right: 0;
  margin-right: 5%;
  padding-right: 5px;
}

body.entrega-sumar form {
  margin-bottom: -30px;
  text-align: center;
}

body.entrega-sumar div.header {
  background-color: #FFF900;
}

body.entrega-sumar form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}

body.entrega-sumar div.header {
  background-color: #FFF900;
}

body.entrega-sumar form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}

body.materia-sumar form {
  margin-bottom: -30px;
  text-align: center;
}

body.materia-sumar div.header {
  background-color: #FFF900;
}

body.materia-sumar form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}

body.materia-sumar div.header {
  background-color: #FFF900;
}

body.materia-sumar form p {
  text-align: left;
  margin-left: 10%;
  margin-bottom: -8px;
  font-family: "TitilliumWeb-SemiBold";
}