@import url("style-2.css");

html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Pagina =================================================== */
@-webkit-viewport {
  width: device-width;
}
@-moz-viewport {
  width: device-width;
}
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
html {
  background: #f5f5f5;
  font-size: 62.5%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: white;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: transparent;
  font-family: "DINProLight", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5em;
  color: #353535;
}
html,
body {
  height: 100%;
}
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: #353535;
}
a:hover {
  color: #b5b5b5;
}
.chromeframe {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: red;
  color: white;
  padding: 10px;
  text-align: center;
  z-index: 10000;
}
.chromeframe a {
  text-decoration: underline;
  color: orange;
}
.chromeframe a:hover {
  color: yellow;
}

/* DEFINICIÓN DE fuentes */
@font-face {
  font-family: "DINProBlack";
  src: url("../fuentes/dinpro_black-webfont.eot");
  src: url("../fuentes/dinpro_black-webfont.eot?iefix") format("eot"),
    url("../fuentes/dinpro_black-webfont.woff") format("woff"),
    url("../fuentes/dinpro_black-webfont.ttf") format("truetype"),
    url("../fuentes/dinpro_black-webfont.svg#webfont92sEYrKF") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DINProBold";
  src: url("../fuentes/dinpro_bold-webfont.eot");
  src: url("../fuentes/dinpro_bold-webfont.eot?iefix") format("eot"),
    url("../fuentes/dinpro_bold-webfont.woff") format("woff"),
    url("../fuentes/dinpro_bold-webfont.ttf") format("truetype"),
    url("../fuentes/dinpro_bold-webfont.svg#webfontobSUTOD2") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DINProLight";
  src: url("../fuentes/dinpro_light-webfont.eot");
  src: url("../fuentes/dinpro_light-webfont.eot?iefix") format("eot"),
    url("../fuentes/dinpro_light-webfont.woff") format("woff"),
    url("../fuentes/dinpro_light-webfont.ttf") format("truetype"),
    url("../fuentes/dinpro_light-webfont.svg#webfonttc3mLeVV") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DINProMedium";
  src: url("../fuentes/dinpro_medium-webfont.eot");
  src: url("../fuentes/dinpro_medium-webfont.eot?iefix") format("eot"),
    url("../fuentes/dinpro_medium-webfont.woff") format("woff"),
    url("../fuentes/dinpro_medium-webfont.ttf") format("truetype"),
    url("../fuentes/dinpro_medium-webfont.svg#webfontlxRP5qzb") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DINProRegular";
  src: url("../fuentes/dinpro_regular-webfont.eot");
  src: url("../fuentes/dinpro_regular-webfont.eot?iefix") format("eot"),
    url("../fuentes/dinpro_regular-webfont.woff") format("woff"),
    url("../fuentes/dinpro_regular-webfont.ttf") format("truetype"),
    url("../fuentes/dinpro_regular-webfont.svg#webfontMMQckvZ8") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "bebas_neueregular";
  src: url("../fuentes/bebasneue-webfont.eot");
  src: url("../fuentes/bebasneue-webfont.eot?#iefix")
      format("embedded-opentype"),
    url("../fuentes/bebasneue-webfont.woff") format("woff"),
    url("../fuentes/bebasneue-webfont.ttf") format("truetype"),
    url("../fuentes/bebasneue-webfont.svg#bebas_neueregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Univers Regular";
  src: url("../fuentes/univers-regular.eot");
  src: local("☺"), url("../fuentes/univers-regular.woff") format("woff"),
    url("../fuentes/univers-regular.ttf") format("truetype"),
    url("../fuentes/univers-regular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UniversLight";
  src: url("../fuentes/univers-light.eot");
  src: local("☺"), url("../fuentes/univers-light.woff") format("woff"),
    url("../fuentes/univers-light.ttf") format("truetype"),
    url("../fuentes/univers-light.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UniversLightOblique";
  src: url("../fuentes/univers-light-oblique.eot");
  src: local("☺"), url("../fuentes/univers-light-oblique.woff") format("woff"),
    url("../fuentes/univers-light-oblique.ttf") format("truetype"),
    url("../fuentes/univers-light-oblique.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "UniversBold";
  src: url("../fuentes/univers-bold.eot");
  src: local("☺"), url("../fuentes/univers-bold.woff") format("woff"),
    url("../fuentes/univers-bold.ttf") format("truetype"),
    url("../fuentes/univers-bold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
h1,
h2 {
  font-weight: normal;
}
/* CABECERA =================================================== */
header {
  width: 100%;
  background-color: white;
  height: auto;
  float: left;
  margin-bottom: 3%;
}
header .logo {
  margin: 3% auto;
  float: left;
  width: 100%;
  display: block;
}
header .logo img {
  display: block;
  max-width: 197px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
header .logo span {
  display: block;
  font-size: 40px;
  font-size: 4rem;
  font-family: "bebas_neueregular";
  margin-top: 25px;
  text-align: center;
}
/* MENU =================================================== */
.menu,
.menu ol,
.menu ol.sections {
  width: 100%;
  text-align: center;
}
.menu {
  border-top: solid 1px #353535;
  display: block;
  float: left;
  margin: 3% 0 0 0;
}
.menu ol.sections {
  border-bottom: solid 1px #353535;
  overflow: visible;
  float: left;
}
.menu ol.sections li a {
  padding: 3%;
  width: 100%;
  float: left;
}
.menu ol.sections .dropdown {
  background-image: url(../imagenes/menu-icon.png);
  background-repeat: no-repeat;
  background-position: 98% center;
  text-align: left;
}
.menu ol.sections li a:hover,
.menu ol.sections li.active a {
  background-color: #cde8fc;
  color: #353535;
}
.menu ol.sections li:nth-child(2) a:hover,
.menu ol.sections li:nth-child(2).active a {
  background-color: #d6e7bc;
}
.menu ol.sections li:last-child a:hover,
.menu ol.sections li:last-child.active a {
  background-color: #fcd3cd;
}
.menu ol.sections .dropdownwrap {
  border-top: solid 1px #353535;
  background-color: white;
}
.menu ol.tools {
  float: left;
}
.menu ol.tools .col {
  width: 50%;
  float: left;
}
.menu ol li.user,
.menu ol li.search {
  display: block;
  height: 90px;
  float: left;
  width: 100%;
  padding: 0;
  text-transform: uppercase;
  text-align: center;
  background-color: #353535;
}
.menu ol li.user img {
  margin-top: 32px;
  margin-bottom: 32px;
  width: 25px;
}
.menu ol li.user.container:hover,
.menu ol li.search.container:hover {
  background-color: #3a3939;
}
.menu ol li.user.container:hover img,
.menu ol li.search.container:hover img {
  opacity: 0.7;
}
.menu ol li.user.logged img:hover {
  opacity: 0.7;
}

.menu ol li.search img {
  margin-top: 32px;
  margin-bottom: 32px;
  width: 25px;
}
.menu ol li.search {
  border-left: solid 1px white;
}
.menu ol li.user.logged {
  padding-top: 25px;
}
.menu ol li.user.config img,
.menu ol li.user.logged img {
  margin-top: 0;
  margin-bottom: 0;
}
.menu ol li.user.logged img {
  margin-left: 5px;
}
.menu ol li.user span.username {
  text-transform: none;
  color: white;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 17px;
  display: block;
  margin-bottom: 5px;
}
.dropdownwrap {
  width: 100%;
  height: auto;
  float: left;
  clear: left;
  padding: 3%;
  background-color: #353535;
  display: none;
}
.container a,
.container a:visited {
  display: block;
  height: auto;
  cursor: pointer;
}
.dropdownwrap input {
  width: 100%;
  background-color: #353535;
  border: solid 1px white;
  font-size: 15px;
  font-size: 1.5rem;
  color: white;
  padding: 15px;
  float: left;
  margin-right: 6px;
  margin-bottom: 6px;
}
.dropdownwrap input[type="submit"] {
  width: 100%;
  background-color: white;
  color: black;
  cursor: pointer;
}
.menu ol li.user img#icono,
.menu ol li.search img#icono {
  display: inline;
}
.menu ol li.user img#icono-cerrar,
.menu ol li.search img#icono-cerrar {
  display: none;
}
.menu ol .actual li.user img#icono,
.menu ol .actual li.search img#icono {
  display: none;
}
.menu ol .actual li.user img#icono-cerrar,
.menu ol .actual li.search img#icono-cerrar {
  display: inline;
}

span.forget {
  font-size: 12px;
  font-family: "UniversLight";
  float: left;
  clear: left;
}
span.forget a {
  color: white;
}
span.forget a:hover {
  text-decoration: underline;
  color: white;
}

/* SIDEBAR =================================================== */
aside {
  width: 100%;
  float: left;
  margin: 3% 0;
}
aside h1,
aside ul li {
  border-bottom: solid 1px #353535;
  text-transform: uppercase;
  padding: 5px 3%;
  list-style: none;
}
aside h1.active a,
aside ul li.active a {
  color: #0091fc;
}
aside h2 {
  font-size: 16px;
  font-size: 1.6rem;
  text-transform: none;
  padding-left: 3%;
}
aside h1.areas,
aside ul li.areas {
  border-bottom: none;
}
aside h2 a {
  color: #828282;
}
aside h1.areas ul,
aside ul li.areas ul {
  display: none;
}

aside h1.areas.active ul,
aside ul li.areas.active ul {
  display: block;
  list-style: none;
}
aside h1.areas.active ul li,
aside ul li.areas.active ul li {
  font-size: 16px;
  font-size: 1.6rem;
  text-transform: none;
  float: left;
  display: block;
  width: 100%;
  border-bottom: none;
  padding: 0;
}
aside h1.areas.active ul li a,
aside ul li.areas.active ul li a {
  color: #828282;
}
aside h1.areas.active ul li a:hover,
aside ul li.areas.active ul li a:hover {
  color: #353535;
}
aside h1.areas.active ul li.active a,
aside ul li.areas.active ul li.active a {
  color: #0091fc;
}
aside .dropdownwrap > ul#menu-students > li:nth-child(3),
aside .dropdownwrap > ul#menu-students > li:nth-child(4) {
  border-top: 1px solid #000 !important;
  float: left;
  width: 100%;
}

aside .dropdown {
  width: 100%;
  display: block;
  background-color: #cde8fc;
  padding: 3%;
  text-align: center;
  cursor: pointer;
  text-align: left;
  background-image: url(../imagenes/menu-icon.png);
  background-repeat: no-repeat;
  background-position: 98% center;
}
aside .dropdown a:hover {
  color: #353535;
}
aside .dropdownwrap {
  background-color: white;
  padding: 3%;
  width: 100%;
  height: auto;
}

aside .handbook {
  border-top: solid 1px #353535;
}

/*ASIDE VERDE*/
aside.colaboradores ul li.active a,
aside.colaboradores ul li.areas.active ul li.active a {
  color: #72963d;
}
aside.colaboradores ul li.active a:hover,
aside.colaboradores ul li.areas.active ul li a:hover {
  color: #b0cd85;
}
aside.colaboradores .dropdown {
  background-color: #d6e7bc;
}

/*ASIDE ROJO*/
aside.ciee ul li.active a,
aside.ciee ul li.areas.active ul li.active a {
  color: #fc2000;
}
aside.ciee ul li.active a:hover,
aside.ciee ul li.areas.active ul li a:hover {
  color: #ff8d7d;
}
aside.ciee .dropdown {
  background-color: #fcd3cd;
}

/* CUERPO =================================================== */
div.content {
  width: 100%;
  float: left;
  padding: 6% 3% 3% 3%;
}
/* HOME =============================================== */
.home div.estudiantes,
.sugerencias div.estudiantes,
.home div.ciee,
.home div.colab,
.home div.twit,
.home div.student,
.home div.banner {
  width: 47%;
  float: left;
  margin: 1.5%;
  min-height: 175px;
  padding: 18px 12px;
  text-transform: uppercase;
  line-height: 1.5em;
  font-size: 15px;
  font-size: 1.5rem;
}
.home div.estudiantes,
.sugerencias div.estudiantes {
  background-color: #cde8fc;
  color: #0091fc;
  position: relative;
  line-height: 18px;
}
.home div.estudiantes a,
.sugerencias div.estudiantes a {
  color: #0091fc;
}
.home div.estudiantes a:hover,
.sugerencias div.estudiantes a:hover {
  color: white;
}
.home div.estudiantes h1,
.sugerencias div.estudiantes h1 {
  font-size: 1em;
  margin: 0;
  line-height: 18px;
}
.home div.estudiantes .date,
.sugerencias div.estudiantes .date {
  color: #63bdff;
}
.home div.estudiantes .link,
.sugerencias div.estudiantes .link,
.home div.twit .link {
  display: block;
  position: absolute;
  bottom: 0;
  padding-bottom: 12px;
}

.home div.ciee {
  background-color: #fcd3cd;
  color: #fc2000;
}
.home div.ciee h1 {
  color: #fc2000;
  font-size: 20px;
  font-size: 2rem;
  line-height: 23px;
  margin: 0;
}
.home div.colab {
  background-color: #d6e7bc;
  color: #72963d;
}
.home div.colab h1 {
  color: #72963d;
  font-size: 20px;
  font-size: 2rem;
  line-height: 23px;
  margin: 0;
}
.home div.student {
  background-color: #0091fc;
  color: #cde8fc;
}
.home div.student h1 {
  color: #cde8fc;
  font-size: 20px;
  font-size: 2rem;
  line-height: 23px;
  margin: 0;
}
.home div.twit {
  position: relative;
  background-color: #dbdbdb;
  color: #353535;
  font-size: 12px;
  font-size: 1.2rem;
  background-image: url(../imagenes/twit-icon.gif);
  background-repeat: no-repeat;
  background-position: 95% 95%;
  background-size: 25px;
}
.home div.twit .link {
  color: #9b9b9b;
}
.home div.banner {
  width: 47%;
  background-color: #dbdbdb;
  background-size: cover;
}
.home div.banner h1 {
  color: white;
  font-size: 20px;
  font-size: 2rem;
  line-height: 23px;
  margin: 0;
}
/* CALENDARIO =============================================== */
div.calendario span.date {
  font-size: 30px;
  font-size: 3rem;
  width: 100%;
  float: left;
  display: block;
  text-align: center;
  margin-bottom: 3%;
}
.navmonth {
  width: 100%;
  float: left;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 3%;
}
.navmonth .prev,
.navmonth .next {
  width: 49%;
  float: left;
}
.navmonth .prev {
  background: url(../imagenes/prev-icon.gif) no-repeat left 7px;
  padding-left: 15px;
  background-size: 8px;
}
.navmonth .next {
  text-align: right;
  background: url(../imagenes/next-icon.gif) no-repeat right 7px;
  padding-right: 15px;
  background-size: 8px;
}
.navmonth span {
  float: left;
}
div.calendar {
  clear: left;
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.event {
  width: 180px;
  display: block;
  float: left;
  margin-top: 1.5%;
  margin-right: 1.5%;
}
.event .day,
.event .name,
.event .group,
.event .hour {
  background-color: #cde8fc;
  display: block;
  clear: left;
  padding: 3%;
  line-height: 1.5em;
}

.event .hour,
.event .name {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
}

.event .day {
  font-size: 50px;
  font-size: 5rem;
  font-family: "DINProBold";
}

.event .day .day-name {
  display: inline-block;
  vertical-align: baseline;
  font-size: 15px;
  font-size: 1.5rem;
  font-family: "DINProLight";
  padding-left: 3px;
  text-transform: uppercase;
}

.event .name {
  width: 100%;
  height: auto;
  font-size: 15px;
  font-size: 1.5rem;
  text-transform: uppercase;
  border-top: solid 1px white;
}
.event .name a:hover {
  color: #63bdff;
}
.event .group {
  background: url(../imagenes/group-icon.gif) no-repeat 6px 6px;
  background-size: 20px;
  background-color: #cde8fc;
  border-top: none;
  padding-top: 25px;
  font-size: 12px;
  font-size: 1.2rem;
}
.navyear {
  margin-top: 6%;
  margin-bottom: 3%;
  width: 100%;
  float: left;
}
.navyear .year {
  font-size: 15px;
  font-size: 1.5rem;
  font-family: "DINProBold";
  clear: left;
}
.navevent ol {
  float: left;
  width: 100%;
  padding-bottom: 1.5%;
  border-bottom: solid 1px #353535;
}
.navevent ol li {
  text-transform: uppercase;
  font-size: 15px;
  font-size: 1.5rem;
  float: left;
  margin-right: 5px;
}
.navevent ol li.actual {
  font-family: "DINProBold";
}
/* ARTICULO =============================================== */
div.content.articulo,
div.content.formulario {
  padding-top: 3%;
}
.articulo {
  text-transform: uppercase;
}
.content h1 {
  color: #0091fc;
  font-size: 40px;
  font-size: 4rem;
  font-family: "DINProLight";
  display: block;
  float: left;
  line-height: 45px;
  margin: 20px 0;
}
div.join {
  font-size: 16px;
  font-size: 1.6rem;
  color: #0091fc;
  padding: 6%;
  border: solid 1px #0091fc;
  width: auto;
  float: left;
  clear: left;
  background-color: white;
  margin: 20px 0;
}
div.join:hover {
  color: #7dc8ff;
  border: solid 1px #7dc8ff;
}
div.info {
  width: auto;
  float: left;
  clear: left;
  background-image: url(../imagenes/info-icon.png);
  background-repeat: no-repeat;
  padding-left: 35px;
  font-family: "UniversLight";
  text-transform: none;
  font-size: 14px;
  font-size: 1.4rem;
  color: #0091fc;
}
div.data {
  width: 100%;
  font-size: 14px;
  font-size: 1.4rem;
  color: #353535;
  float: left;
  margin: 15px 0;
}

.join-date {
  clear: left;
  display: block;
  float: left;
  margin-bottom: 15px;
}

div.data span.where,
div.data span.when,
div.data span.what,
div.data span.who,
div.data span.meeting,
div.data span.departure,
div.data span.return {
  clear: left;
  display: block;
  float: left;
  margin-bottom: 10px;
}
div.data span.where {
  background-image: url(../imagenes/where-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.departure {
  background-image: url(../imagenes/right-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.return {
  background-image: url(../imagenes/left-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.meeting {
  background-image: url(../imagenes/meeting-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.when {
  background-image: url(../imagenes/when-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.who {
  background-image: url(../imagenes/who-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.data span.what {
  background-image: url(../imagenes/what-icon.gif);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 17px;
  padding-left: 25px;
}
div.blank {
  float: left;
  clear: left;
  width: 100px;
  border-bottom: solid 1px #0091fc;
  margin-bottom: 20px;
}
div.description {
  clear: left;
  float: left;
  color: #353535;
  text-transform: none;
  font-family: "UniversLight";
}
div.description p {
  margin-bottom: 15px;
}
div.description p em {
  font-family: "UniversLightOblique";
}
div.description p strong {
  font-family: "UniversBold";
}
div.description p a {
  color: #0091fc;
  text-decoration: underline;
}
div.description p a:hover {
  color: #7dc8ff;
}
div.description ul {
  list-style-type: disc;
}
a.my-activities-button {
  display: inline-block;
  width: auto;
  border: solid 1px #0091fc;
  color: #0091fc;
  background-color: white;
  text-transform: uppercase;
  padding: 13px 24px 10px 24px;
  cursor: pointer;
  vertical-align: top;
}
div.student-activities-list .activity {
  clear: left;
  float: left;
  color: #353535;
  text-transform: none;
  font-family: "UniversLight";
  display: flex;
  background-color: #cde8fc;
  margin-bottom: 15px;
  width: 100%;
  padding: 20px;
  align-items: center;
}
div.student-activities-list .activity .activity-info {
  flex: 1;
}
div.student-activities-list .activity .button {
  width: auto;
  border: solid 1px #000;
  color: #000;
  background-color: white;
  text-transform: uppercase;
  padding: 8px 10px 5px;
  display: inline-block;
  font-size: 13px;
}
div.student-activities-list .activity .button.no-can-revoke {
  opacity: 0.4;
}
div.no-activities {
  clear: left;
  float: left;
  color: #353535;
  text-transform: none;
  font-family: "UniversLight";
}
.language /* Botón de cambio de idioma */ {
  background-image: url(../imagenes/language-icon.png);
  background-repeat: no-repeat;
  font-size: 13px;
  font-size: 1.3rem;
  padding-left: 25px;
  color: #0091fc;
}
.language:hover {
  color: #74c1f9;
}

/* FORMULARIOS =============================================== */
div.content.formulario {
  margin-bottom: 50px;
}
div.half1 {
  width: 49%;
  margin-right: 1%;
  float: left;
}
div.half2 {
  width: 49%;
  margin-left: 1%;
  float: left;
}
div.half3 {
  width: 24%;
  margin-right: 1%;
  float: left;
}
div.half4 {
  width: 23%;
  margin-right: 1%;
  margin-left: 1%;
  float: left;
}
div.half5 {
  width: 23%;
  margin-right: 1%;
  margin-left: 1%;
  float: left;
}
div.half6 {
  width: 24%;
  margin-left: 1%;
  float: left;
}

div.selector-dia {
  width: 24%;
  margin-right: 1%;
  float: left;
}

div.selector-mes {
  width: 48%;
  margin-right: 1%;
  margin-left: 1%;
  float: left;
}

div.selector-ano {
  width: 24%;
  margin-left: 1%;
  float: left;
}

form div.aviso {
  background-color: #fffec9;
  color: red;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 23px 18px 23px 66px;
  float: left;
  width: 100%;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: "UniversLight";
  background-image: url(../imagenes/caution-icon.png);
  background-repeat: no-repeat;
  background-position: 20px center;
}
form h2.apartado {
  background-color: #cde8fc;
  width: 100%;
  display: block;
  margin: 20px 0 18px 0;
  text-transform: uppercase;
  font-size: 14px;
  font-size: 1.4rem;
  float: left;
  padding: 10px;
}
div.content.formulario form span.required {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 12px;
  color: grey;
  text-transform: none;
  float: none;
}
div.content.formulario form label {
  font-size: 14px;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #0091fc;
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 5px;
  margin-right: 20px;
}
div.content.formulario form input,
div.content.formulario form select,
div.content.formulario form textarea {
  width: 100%;
  border: solid 1px #353535;
  padding: 10px 10px 7px 10px;
  background-color: white;
  font-size: 14px;
  font-size: 1.4rem;
  font-family: "UniversLight";
  margin: 0 0 20px 0;
}
@-moz-document url-prefix() {
  div.content.formulario form select {
    padding-top: 9px;
    padding-bottom: 6px;
  }
}
div.content.formulario form textarea {
  height: 150px;
}
div.content.formulario form input[type="checkbox"] {
  display: none;
}
div.content.formulario form input[type="checkbox"] + label {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url("../imagenes/checkbox-2.png") center center no-repeat;
  margin-right: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  float: left;
  clear: left;
}
div.content.formulario form input[type="checkbox"]:checked + label {
  background: url("../imagenes/checkbox-1.png") center center no-repeat;
}
div.content.formulario form input[type="radio"] {
  display: none;
}
div.content.formulario form input[type="radio"] + label {
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url("../imagenes/radio-uncheck.png") center center no-repeat;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
}
div.content.formulario form input[type="radio"]:checked + label {
  background: url("../imagenes/radio-check.png") center center no-repeat;
}
div.content.formulario form span {
  float: left;
  font-family: "UniversLight";
  font-size: 14px;
  font-size: 1.4rem;
  margin-right: 20px;
}
div.content.formulario form span a {
  color: #0091fc;
  text-decoration: underline;
}
div.content.formulario form span a:hover {
  color: #7dc8ff;
}
div.content.formulario form span.radio {
  margin-top: 10px;
}
div.content.formulario form input[type="submit"] {
  width: auto;
  border: solid 1px #0091fc;
  color: #0091fc;
  text-transform: uppercase;
  padding: 24px 24px 20px 24px;
  margin-top: 24px;
  cursor: pointer;
}

div.content.formulario form input[type="submit"]:disabled,
div.content.formulario form input[type="submit"][disabled] {
  border-color: #c3c3c3!important;
  color: #c3c3c3!important;
  background-color: #f2f2f2!important;
  cursor: not-allowed;
  opacity: 0.6;
}
div.content.formulario form input[type="submit"]:hover {
  border: solid 1px #7dc8ff;
  color: #7dc8ff;
}
div.selector select {
  background: transparent;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background-image: url(../imagenes/select-arrow.png);
  background-position: right center;
  background-repeat: no-repeat;
}

/* COLORES VERDES */
div.content.colaboradores h1,
div.content.colaboradores h2,
div.content.colaboradores h3,
div.content.colaboradores a {
  color: #72963d;
}
div.content.colaboradores a:hover {
  color: #b0cd85;
}
div.content.colaboradores div.blank {
  border-bottom: solid 1px #72963d;
}
.colaboradores .enlace-solicitud {
  border: solid 1px #72963d;
}
.colaboradores .enlace-solicitud:hover {
  color: #b0cd85;
  border: solid 1px #b0cd85;
}

div.colaboradores form h2.apartado {
  background-color: #d6e7bc;
}
div.content.formulario.colaboradores form input[type="submit"] {
  border: solid 1px #72963d;
  color: #72963d;
}
div.content.formulario.colaboradores form input[type="submit"]:hover {
  border: solid 1px #b0cd85;
  color: #b0cd85;
}
div.content.formulario.colaboradores form label {
  color: #72963d;
}
div.content.formulario.colaboradores form span a {
  color: #72963d;
  text-decoration: underline;
}
div.content.formulario.colaboradores form span a:hover {
  color: #b0cd85;
}

/* COLORES ROJOS */
div.content.ciee h1,
div.content.ciee h2,
div.content.ciee h3,
div.content.ciee a {
  color: #fc2000;
}
div.content.ciee a:hover {
  color: #ff8d7d;
}
div.content.ciee div.blank {
  border-bottom: solid 1px #fc2000;
}
.ciee .enlace-solicitud {
  border: solid 1px #fc2000;
}
.ciee .enlace-solicitud:hover {
  color: #ff8d7d;
  border: solid 1px #ff8d7d;
}
div.ciee form h2.apartado {
  background-color: #fcd3cd;
}
div.content.formulario.ciee form input[type="submit"] {
  border: solid 1px #fc2000;
  color: #fc2000;
}
div.content.formulario.ciee form input[type="submit"]:hover {
  border: solid 1px #ff8d7d;
  color: #ff8d7d;
}
div.content.formulario.ciee form label {
  color: #fc2000;
}
div.content.formulario.ciee form span a {
  color: #fc2000;
  text-decoration: underline;
}
div.content.formulario.ciee form span a:hover {
  color: #ff8d7d;
}
div.content.formulario p {
  display: block;
  width: 100%;
  float: left;
  margin-bottom: 20px;
}
/* resultados de búsqueda =================================================== */
.search-results {
}
div.info-results {
  background-image: url(../imagenes/search-2-icon.gif);
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: 0 50%;
  padding-left: 25px;
  font-size: 13px;
  font-size: 1.3rem;
}
.result {
  margin-bottom: 15px;
}
.result-section {
  clear: left;
  float: left;
  font-size: 14px;
  font-size: 1.4rem;
}
.search-results h1 {
  font-size: 30px;
  font-size: 3rem;
  line-height: 35px;
  clear: left;
  float: left;
  margin-top: 0;
  margin-bottom: 10px;
}
.result div.blank {
  margin-top: 15px;
}
.result.estudiantes h1 a,
.result.estudiantes .result-section {
  color: #0091fc;
}
.result.colab h1 a,
.result.colab .result-section {
  color: #72963d;
}
.result.ciee h1 a,
.result.ciee .result-section {
  color: #fc2000;
}
.result.estudiantes div.blank {
  border-bottom: solid 1px #0091fc;
}
.result.colab div.blank {
  border-bottom: solid 1px #72963d;
}
.result.ciee div.blank {
  border-bottom: solid 1px #fc2000;
}
.search-results div.join {
  border: solid 1px #353535;
  color: #353535;
}
.search-results div.join:hover {
  color: #898989;
  border-color: #898989;
}
/* PÁGINA ABOUT - EQUIPO ================================= */
.team-members{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
.team-member{
  width: 33.33%;
  max-width: 205px;
  gap: 15px;
  margin-bottom: 35px;
}
.team-member p{
  margin: 0!important;
}
.team-member a{
  text-decoration: none!important;
}
.team-member img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .team-member {
    width: 100%;
    max-width: 100%;
  }
  .team-member p{
    width: 100%;
  }
}
/* pie =================================================== */
footer {
  float: left;
  background-color: #35393c;
  /*
  color: #cde8fc;
  */
  color: #fff;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0 3%;
  font-size: 13px;
  font-size: 1.3rem;
  font-family: "DINProRegular";
}
footer a {
  color: #fff;
}
footer a:hover {
  color: white;
}
footer .about,
footer .social {
  padding: 3% 0;
  width: 100%;
  float: left;
}
footer .about {
  border-bottom: solid 1px grey;
}
footer .about span,
footer .social span {
  margin-right: 10px;
}
@media only screen and (min-width: 649px) {
  /* CABECERA =================================================== */
  header {
    height: 211px;
    border-bottom: none;
  }
  header .logo {
    margin: 0 0 0 3%;
    width: 300px;
    height: 116px;
    padding-top: 35px;
  }
  header .logo img {
    float: left;
    width: 99px;
    height: 40px;
  }
  header .logo span {
    font-size: 30px;
    font-size: 3rem;
    margin-left: 15px;
    float: left;
    margin-top: 15px;
  }
  /* MENU =================================================== */
  .menu {
    width: 100%;
    border-top: solid 1px #353535;
    margin: 0;
  }
  .menu ol {
    width: auto;
    position: absolute;
    top: 0;
  }
  .menu ol.sections .dropdown {
    background-image: none;
  }
  .menu ol.tools {
    right: 0;
    z-index: 9999;
    background-color: #353535;
    float: none;
  }
  .menu ol li.user,
  .menu ol li.search {
    display: block;
    height: 116px;
    float: left;
    width: 200px;
    padding: 0;
    width: 75px;
  }
  .menu ol li.user:hover,
  .menu ol li.search:hover {
    background-color: #353535;
  }
  .menu ol.tools .col {
    width: auto;
  }
  /*AÑADIDO ANCHO USUARIO*/
  .menu ol.tools .col li.user.logged {
    width: 195px;
    max-width: 195px;
  }
  .menu ol li.user.logged {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  .menu ol li.user span.username {
    margin-bottom: 8px;
    margin-top: 8px;
    width: 120px;
    float: none;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
  }
  .menu ol li.user span.config {
    float: none;
    margin: 6px 10px 0 0;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    width: 36px;
  }
  .menu ol li.user span.close {
    float: none;
    margin-top: 6px;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
  }
  /*AÑADIDO ANCHO USUARIO*/

  .menu ol li.user img {
    margin: 47px 25px;
    width: 20px;
  }
  .menu ol li.search img {
    margin: 47px 25px;
    width: 20px;
  }
  .menu ol li.user.logged {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    width: auto;
    max-width: 107px;
  }
  .menu ol li.user.config img,
  .menu ol li.user.logged img {
    margin: 0;
  }
  .menu ol li.user span.username {
    margin-bottom: 8px;
    margin-top: 8px;
  }
  .dropdownwrap {
    width: auto;
    height: 116px;
    float: left;
    clear: none;
    padding: 44px 10px 0 0;
  }
  .dropdownwrap input {
    width: 150px;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 5px;
    margin-bottom: 0;
  }
  .dropdownwrap input[type="submit"] {
    width: auto;
  }
  .menu ol.sections {
    width: 100%;
    border-bottom: solid 1px #353535;
    float: left;
    position: relative;
  }
  .menu ol.sections li {
    float: left;
    width: 33.3%;
  }
  .menu ol.sections li a {
    display: block;
    height: 116px;
    float: left;
    width: 100%;
    padding: 47px 0 0 0;
    text-transform: uppercase;
    text-align: center;
  }
  .menu ol.sections .container {
    display: none;
  }
  .menu ol.sections .dropdownwrap {
    width: 100%;
    border-top: none;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  span.forget {
    font-size: 11px;
    float: right;
    clear: left;
    margin-right: 82px;
  }
  /* SIDEBAR =================================================== */
  aside .dropdown {
    text-align: center;
    background-position: 39% center;
  }
  /* CUERPO =================================================== */
  /* HOME =============================================== */
  .home div.estudiantes,
  .sugerencias div.estudiantes,
  .home div.ciee,
  .home div.colab,
  .home div.twit,
  .home div.student,
  .home div.banner {
    width: 31.3%;
    margin: 1%;
  }
  .home div.ciee h1,
  .home div.colab h1,
  .home div.banner h1,
  .home div.student h1 {
    font-size: 23px;
    font-size: 2.3rem;
    line-height: 26px;
  }
  /* CALENDARIO =============================================== */
  .event {
    width: 180px;
  }
  .navmonth {
    margin-top: -44px;
  }
  .navmonth span {
    display: none;
  }
  /* ARTICULO =============================================== */
  div.join {
    padding: 3%;
  }
}
@media only screen and (min-width: 799px) {
  aside .dropdown {
    background-position: 41% center;
  }
}
@media only screen and (min-width: 999px) {
  div.content.calendario.mob {
    display: none;
  }
  div.content.calendario.dsk {
    display: block;
  }

  div.wrapper {
    width: 100%;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin-bottom: -24px;
    overflow: auto;
  }
  /* CABECERA =================================================== */
  header {
    height: 117px;
    margin-bottom: 30px;
    border-bottom: solid 1px #353535;
  }
  header .logo {
    margin: 0 0 0 50px;
    width: 200px;
  }
  header .logo img {
    float: left;
    width: 99px;
    height: 40px;
  }
  header .logo span {
    font-size: 30px;
    font-size: 3rem;
    margin-left: 15px;
    float: left;
    margin-top: 15px;
  }

  /* MENU =================================================== */
  .menu {
    float: right;
    width: auto;
    border-top: none;
    margin: 0;
  }
  .menu ol {
    width: auto;
    position: absolute;
    top: 0;
  }
  .menu ol.sections {
    width: auto;
    border-bottom: none;
    float: none;
    right: 100px;
  }
  .sections.usuario-logado {
    margin-right: 145px;
  }
  .menu ol.sections li {
    float: left;
    width: auto;
  }
  .menu ol.sections li a {
    display: block;
    height: 116px;
    float: left;
    width: auto;
    padding: 47px 25px 0 25px;
    text-transform: uppercase;
    text-align: center;
  }

  .menu ol.sections .container {
    display: none;
  }
  .menu ol.sections .dropdownwrap {
    border-top: none;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  .menu ol.tools {
    right: 0;
    z-index: 9999;
    background-color: #353535;
    float: none;
  }
  .menu ol li.user,
  .menu ol li.search {
    display: block;
    height: 116px;
    float: left;
    width: 50px;
  }
  .menu ol li.user img,
  .menu ol li.search img {
    margin: 47px 0;
  }
  .menu ol li.user:hover,
  .menu ol li.search:hover {
    background-color: #353535;
  }
  .menu ol.tools .col {
    width: auto;
  }
  .menu ol.tools .col li.user.logged {
    width: 195px;
    max-width: 195px;
  }
  .menu ol li.user.logged {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  .dropdownwrap {
    width: auto;
    height: 116px;
    float: left;
    clear: none;
    padding: 44px 10px 0 0;
  }
  .dropdownwrap input {
    width: 150px;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 5px;
  }
  .dropdownwrap input[type="submit"] {
    width: auto;
  }
  /* SIDEBAR =================================================== */
  aside {
    max-width: 220px;
    padding-left: 50px;
    margin: 0;
    float: none;
    position: absolute;
    top: 160px;
    left: 0;
  }
  aside h1 {
    padding: 5px 0;
  }
  aside h1.areas {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  aside h2 {
    padding-left: 0;
  }
  aside .dropdown {
    display: none;
  }
  aside .dropdownwrap {
    background-color: transparent;
    padding: 0;
    display: block !important;
    overflow: visible;
  }
  /* CUERPO =================================================== */
  div.content {
    padding: 0 50px 50px 50px;
  }
  /* HOME =============================================== */
  div.content.home {
    width: 100%;
    padding-top: 0;
    padding-right: 1%;
  }
  .home div.estudiantes,
  .sugerencias div.estudiantes,
  .home div.ciee,
  .home div.colab,
  .home div.twit,
  .home div.student,
  .home div.banner {
    width: 175px;
    padding: 18px 12px;
    margin: 0 10px 10px 0;
  }
  .home div.banner {
    width: 360px;
  }
  .home div.banner h1 {
    width: 175px;
  }
  /* CALENDARIO =============================================== */
  div.content.calendario {
    float: left;
    width: auto;
    padding: 0;
    margin-left: 270px;
    margin-top: 24px;
  }
  div.calendario span.date {
    font-size: 30px;
    font-size: 3rem;
    width: auto;
    text-align: left;
    margin-bottom: 60px;
  }
  .navmonth {
    width: 320px;
    margin-left: 15px;
    margin-bottom: 0;
    margin-top: 0;
  }
  .navmonth .prev,
  .navmonth .next,
  .navmonth span {
    width: auto;
    float: left;
    margin-left: 15px;
    padding-top: 4px;
  }
  .navmonth span {
    display: inline;
  }
  .navmonth .prev {
    background: url(../imagenes/prev-icon.gif) no-repeat left 11px;
    padding-left: 15px;
    background-size: 8px;
  }
  .navmonth .next {
    background: url(../imagenes/next-icon.gif) no-repeat right 11px;
    padding-left: 15px;
    background-size: 8px;
    padding-left: 0;
  }
  div.calendar {
    clear: left;
    float: left;
  }
  .event {
    width: 180px;
  }
  .navyear .year {
    font-size: 13px;
    font-size: 1.3rem;
  }
  .navevent ol li {
    font-size: 13px;
    font-size: 1.3rem;
  }
  /* ARTICULO =============================================== */
  div.content.articulo,
  div.content.formulario {
    float: none;
    padding: 0 3%;
    width: 700px;
    margin: 0 auto 50px auto;
    margin-left: 240px;
    overflow: auto;
  }
  div.join {
    padding: 25px;
  }
  /* SUGERENCIAS =============================================== */
  div.content.sugerencias {
    float: none;
    padding: 0 3%;
    width: auto;
    margin: 0 auto 50px auto;
    margin-left: 240px;
    overflow: auto;
  }
  /* pie =================================================== */
  footer {
    height: 24px;
    padding: 0 3%;
    font-size: 14px;
    font-size: 1.4rem;
    position: fixed;
    bottom: 0;
  }
  footer .about {
    padding: 0;
    border-bottom: none;
    width: auto;
    float: left;
  }
  footer .social {
    padding: 0;
    width: auto;
    float: right;
  }
}
@media only screen and (min-width: 1244px) {
  div.content.articulo,
  div.content.formulario {
    margin-left: auto;
    width: 800px;
  }

  div.content.sugerencias {
    margin-left: 240px;
    width: auto;
  }
}

@media only screen and (min-width: 1550px) {
  div.content.calendario {
    width: 1250px;
  }
}

div.content.articulo .image img {
    max-height: 500px;
    max-width: 100%;
}