alumnos/css/template.css

/***** COLORES *****/
:root {
    --mainBG: url('../img/pleca.webp');
    --mainBGSub: url('../../img/pleca.webp');
    --mainColor: #95B1BC;
    --mainColor-25: rgba(149, 177, 188, 0.25);
    --mainColor-50: rgba(149, 177, 188, 0.5);
    --mainColor-75: rgba(149, 177, 188, 0.75);
    --success: #339933 !important;
    --success-25: rgba(51, 153, 51, 0.25);
    --success-50: rgba(51, 153, 51, 0.5);
    --success-75: rgba(51, 153, 51, 0.75);
    --primary: #001D68;
    --primary-25: rgba(0, 29, 104, 0.25);
    --primary-50: rgba(0, 29, 104, 0.5);
    --primary-75: rgba(0, 29, 104, 0.75);
    --primary-hover: #101097;
    --danger: #D21034 !important;
    --danger-25: rgba(210, 16, 52, 0.25);
    --danger-50: rgba(210, 16, 52, 0.5);
    --danger-75: rgba(210, 16, 52, 0.75);
    --yellow: #FFC107 !important;
    --yellow-25: rgba(255, 193, 7, 0.25);
    --yellow-50: rgba(255, 193, 7, 0.5);
    --yellow-75: rgba(255, 193, 7, 0.75);
    --dark: #696969 !important;
    --dark-25: rgba(105, 105, 105, 0.25);
    --dark-50: rgba(105, 105, 105, 0.50);
    --dark-75: rgba(105, 105, 105, 0.75);
    --light: #F0F0F0 !important;
    --light-25: rgba(240, 240, 240, 0.25);
    --light-50: rgba(240, 240, 240, 0.5);
    --light-75: rgba(240, 240, 240, 0.75);
    --gray: #969696 !important;
    --gray-25: rgba(150, 150, 150, 0.25);
    --gray-50: rgba(150, 150, 150, 0.5);
    --gray-75: rgba(150, 150, 150, 0.75);
    --azul1: #00A6CE;
    --azul1-25: rgba(0, 166, 206, 0.25);
    --azul1-50: rgba(0, 166, 206, 0.5);
    --azul1-75: rgba(0, 166, 206, 0.75);
    --azul2: #0C7696;
    --azul2-25: rgba(12, 118, 150, 0.25);
    --azul2-50: rgba(12, 118, 150, 0.5);
    --azul2-75: rgba(12, 118, 150, 0.75);
    --claro: #E0E0E0;
    --claro-25: rgba(224, 224, 224, 0.25);
    --claro-50: rgba(224, 224, 224, 0.5);
    --claro-75: rgba(224, 224, 224, 0.75);
    --gold: #D4AF37;
    --gold-25: rgba(212, 175, 55, 0.25);
    --gold-50: rgba(212, 175, 55, 0.5);
    --gold-75: rgba(212, 175, 55, 0.75);
    --silver: #B4B4B4;
    --silver-25: rgba(180, 180, 180, 0.25);
    --silver-50: rgba(180, 180, 180, 0.5);
    --silver-75: rgba(180, 180, 180, 0.75);
    --bronze: #AD8A56;
    --bronze-25: rgba(173, 138, 86, 0.25);
    --bronze-50: rgba(173, 138, 86, 0.5);
    --bronze-75: rgba(173, 138, 86, 0.75);
}

/***** HEADER *****/
header { padding: 20px 0; height: 110px; }
.menu, .footer { margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.subMenu { background-color: var(--light); width: 100%; padding: 0px 10px; font-size: 15px; }
.subMenu .barra { max-width: 960px; min-height: 54px; padding: 16px 0; }
header .logotipo { float: left; clear: none; text-align: inherit; width: 20%; margin-left: 0; margin-right: 0; }
header .logotipo:before { content: ''; display: table; }
header .logotipo img, aside .logotipo img { max-width: 200px; }
.mainMenu { min-width: 85px; }
.nav-item { border-right: 1px solid var(--gray); }
.nav-item:last-child { border-right: 0; }
.nav-item > a { color:var(--gray); padding: 1px 6px; }
.nav-item > a:hover { color: var(--danger); }
.max-h { height: 45px !important; max-height: 45px; }
.max-w { width: 45px !important; max-width: 45px; }
.iconOff { font-size: 16px; color: var(--danger); display: block; width: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 30px 0 0 30px; border: none; background: transparent; }
.iconOff:hover, .iconOff:active { text-decoration: none; background: var(--danger); color: var(--white); }
.salir { margin-right: -20px; }

/***** MENÚ *****/
.iconMenu { font-size: 32px; }
.iconMenuSidebar { font-size: small; }
#sidebarCollapse:hover, #sidebarCollapse:active, #dismiss:hover, #dismiss:active { opacity: 0.8 !important; }
#accordionMenu { font-size: 16px; }

/***** SIDEBAR MENÚ *****/
#sidebar { width: 100%; max-width: 400px; position: fixed; top: 0; right: -400px; height: 100vh; z-index: 1023; transition: all 0.3s; overflow-y: auto; }
#sidebar.active { right: 0; }
.logotipo a img { width: 300px; }
.overlay { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.75); z-index: 1022; opacity: 0; transition: all 0.5s ease-in-out; }
.overlay.active { display: block; opacity: 1; }
a:hover{ color: var(--danger); text-decoration: none; }

/* ICONOS MENU */
header{ padding: 20px 0; height: 110px; }
header .logotipo{ float: left; clear: none; text-align: inherit; width: 20%;margin-left: 0; margin-right: 0; }
header .logotipo:before { content: '';display: table; }
header .logotipo img, aside .logotipo img { max-width: 200px; }
.mainMenu{ min-width: 85px; }
.menu .nav-item{ border-right: 1px solid var(--gray); text-align: center; display: flex; align-items: center; }
.menu .nav-item:last-child { border-right: 0; }
.menu .nav-item > a, .menu .nav-item > span{ color:var(--gray);padding: 1px 10px; }
.menu .nav-item > a:hover{ color:var(--danger);text-decoration: none; }
.menu .nav-item > a{ transition: color 0.6s ease; display: block; }
.side-menu .fa-angle-right{ transition: .3s transform ease-in-out; }
#accordionMenu ul { list-style: none; margin-left: 1.5em; padding-inline-start: 0; }
#accordionMenu .side-menu:not(.collapsed) .fa-angle-right { display: inline-block; transform: rotate(90deg) }
.side-menu.activo, #accordionMenu ul li a.activo { color: var(--danger) !important; font-family: 'indivisa-text-bold-italic'; }
.iconLogin, .iconOff { font-size: 16px; display: block; width: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 30px 0 0 30px; }
.iconOff:hover, .iconOff:active { text-decoration: none; background: var(--danger); color: var(--white); height: 40px; }
.iconOff { color: var(--danger); }
.iconLogin:hover, .iconLogin:active, .iconOff:hover, .iconOff:active { text-decoration: none; color: var(--white); height: 40px; }
.iconLogin { color: var(--success); }
.iconLogin:hover, .iconLogin:active { background: var(--success); }
.iconSesion { margin-right: -20px; }
.menuicon { font-size: 40px; cursor: pointer; border-radius: 50%; }
.menuicon:hover { color: var(--primary-hover) !important; }
.cerraricon { height: 45px !important; max-height: 45px; width: 45px !important; max-width: 45px; border: 3px solid var(--light); cursor: pointer; }
.cerraricon:hover { background: var(--primary-hover) !important; }

/***** FOOTER *****/
footer{ font-size: 14px; color: var(--white); }
footer .footerTop { background: var(--primary); padding: 15px 0; }
footer .footerTop .logotipo { overflow: hidden; }
footer .footerTop .logotipo h3 { display: inline-block; vertical-align: top; color: var(--white); margin: 0; float: right; text-align: right; font-size: 25px; font-family: 'indivisa-text'; }
footer .footerTop .logotipo h3 span { display: block; }
footer .footerTop .menuFooter h3 { font-size: 12px; font-family: 'indivisa-text'; color: var(--white) !important; }
footer .footerTop .menuFooter ul { overflow: hidden; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer .footerTop .menuFooter ul>li { *zoom: 1; float: left; clear: none; text-align: inherit; width: 16%; margin-left: 0; margin-right: 3%; }
footer .footerTop .menuFooter ul>li ul li a{ font-size:10px; }
footer ul>li { display: inline-block; vertical-align: top; }
.footerMore { position: relative; display: none; padding: 5px 0; }
footer a { color: var(--white);-webkit-transition: color 0.5s; transition: color 0.5s; }
footer a:hover{ color: #CE0E2D !important; text-decoration: none !important; }
footer .footerTop .menuFooter ul>li ul li { display: block; width: 100%; margin-bottom: 0px; }

footer .ubicacion { margin-top: 20px; overflow: hidden; }
footer .ubicacion .address { display: inline-block; /*width: 65%;*/ vertical-align: bottom; }
footer .ubicacion .address h4, footer .ubicacion .address h4 a { color: #0FB7F1; font-size: 14px; margin: 0 0 0 -5px; position: relative; }
footer .ubicacion .address h4 a { display: inline-block; }

footer .ubicacion .redes{ display: inline-block; vertical-align: bottom; }
footer .ubicacion .redes h4{ display: inline-block; vertical-align: middle; margin: 0; font-size: 16px !important; font-weight: bold; }
footer .ubicacion .redes ul{ display: inline-block; vertical-align: middle; }
footer .ubicacion .redes ul li{ margin-left: 2px; }

footer .footerMiddle { background: #071e58; overflow: hidden; }
footer .footerMiddle nav ul { text-align: center; }
footer .footerMiddle nav ul li { border-right: 1px solid var(--white); padding: 1px 10px; display: inline-block; margin-bottom: 10px;}
footer ul>li { display: inline-block; vertical-align: top;}

footer .footerBottom { background: #091941; overflow: hidden; padding: 15px 0;}
.footerBottom .logotipos{display:inline-block;vertical-align:middle;width:20%}
footer .footerBottom .logotipos a{display:inline-block;width:80px;margin-right:6px}
footer .footerBottom .logotipos a.internacional{width:80px}
footer .footerBottom .logotipos a.red{width:75px}
footer .footerBottom .legales{text-align:right;float:right;width:60%;margin-right:0;margin-left:auto;padding-top:10px;padding-bottom:0}
footer .footerBottom .legales ul li{border-right:1px solid var(--white);padding:1px 10px}
footer .footerBottom .legales ul li:last-child{border:0}
footer .tab-pane p{font-size:12px; line-height: 18px;}

/********** MOBILE **********/
@media (max-width:768px) {
    footer { font-size: 12px; }
    footer .ubicacion .redes { text-align: center; }
    footer .navbar-toggler { font-size: 12px !important; }
    footer .footerBottom .logotipos { text-align:center; }
    footer .footerBottom .legales ul { margin-left: auto; margin-right: auto; }
}
@media (max-width:560px) {
    footer .ubicacion { margin-top: 0; }
    footer .footerMiddle ul li, footer .footerBottom .legales ul li { text-align: center; padding:10px 0; border: none; }
}
@media (max-width:480px) {
    footer .footerTop .logotipo .lasalle { max-width:125px; }
}
@media (max-width: 575px) {
    #errorImg { width: 25vw; }
}
/***** SCROLLBAR *****/
::-webkit-scrollbar {width: 8px;}/*Ancho*/
::-webkit-scrollbar-track {background: #F1F1F1;}/*Riel*/
::-webkit-scrollbar-thumb {background: #D6D8DB;}/* Handle */
::-webkit-scrollbar-thumb:hover { background: var(--primary); }/*Hover Handle */