sgi/CIDIT/css/template.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27/03/2020, 12:42:42 PM
    Author     : Ale
*/
/***** HEADER *****/
.margen-principal{ margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
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; }
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{ max-width: 200px; }
aside .logotipo img{ position: absolute; top: 24px; max-width: 180px; }
.mainMenu{ min-width: 85px; }
.nav-item{ border-right: 1px solid #969696; }
.nav-item:last-child { border-right: 0; }
.nav-item > a{ color:#969696; padding: 1px 6px; }
.nav-item > a:hover{ color:#D21034; }

/* SIDEBAR */
#sidebar { width: 400px; position: fixed; top: 0; right: -400px; height: 100vh; z-index: 1023; transition: all 0.3s; overflow-y: auto; }
#sidebar.active {right: 0;}
.overlay {display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); z-index: 1022; opacity: 0; transition: all 0.5s ease-in-out;}
.overlay.active { display: block; opacity: 1;}
#sidebar a:hover{text-decoration:none; } /*color:#d12034 !important;}*/
#sidebar a{transition: color 0.6s ease;}
.defaultShadow{ -webkit-box-shadow: 0 0 5px 1px rgba(150,150,150,.2); box-shadow: 0 0 5px 1px rgba(150,150,150,.2); }

/* 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 #969696;}
.menu .nav-item:last-child {border-right: 0;}
.menu .nav-item > a, .menu .nav-item > span{color:#969696;padding: 1px 10px;}
.menu .nav-item > a:hover{color:#D21034;text-decoration: none;}
.menu .nav-item > a{transition: color 0.6s ease;}
.side-menu .ing-caret{ transition: .3s transform ease-in-out; }
#accordionMenu ul { list-style: none; }
#accordionMenu .collapsed .ing-caret { display: inline-block; transform: rotate(-90deg); }
.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: #D21034; color: #FFFFFF; height: 40px; }
.iconOff{ color: #D21034; }
.iconLogin:hover, .iconLogin:active, .iconOff:hover, .iconOff:active{ text-decoration: none; color: #FFFFFF; height: 40px; }
.iconLogin{ color: #339933; }
.iconLogin:hover, .iconLogin:active{ background: #339933; }
.iconSesion{ margin-right: -20px; }
.menuicon{ font-size: 40px; cursor: pointer; border-radius: 50%; }
.menuicon:hover{ color: #101097 !important; }
.cerraricon{ height: 40px !important; max-height: 40px; width: 40px !important; max-width: 40px; cursor: pointer; }
.cerraricon:hover{ background: #101097 !important; }

/***** FOOTER *****/
footer { font-size:14px !important; }
footer ul { list-style:none; padding:0; margin:0; }
footer ul > li { display:inline-block; vertical-align:top; }
footer a { color:#FFFFFF !important; }
footer a:hover { color:#D21034 !important; }

/*** TOP ***/
footer .footerTop { background:#001D68; padding:25px 0 15px; }
footer .footerTop .logotipo { overflow:hidden; }
footer .footerTop .logotipo .lasalle { max-width:180px; float: left; }
footer .footerTop .logotipo .profesionales { max-width:150px; float:right; }
footer .ubicacion{ margin-top: 40px; }
footer .ubicacion .nav-item, footer .ubicacion .nav-link{ border: none; }
footer .ubicacion .nav-link { color: rgba(255,255,255,0.5) !important; }
footer .ubicacion .nav-link.active { color: #FFFFFF !important; }
footer .ubicacion .nav-link:hover { color: #D21034 !important; }
footer .ubicacion .nav-link.active:hover { color: #FFFFFF !important; }
footer .ubicacion .tab-content{ color: #FFFFFF; font-size: 12px; }
footer .ubicacion .btnMap{ color: #0FB7F1 !important; display: block; position: relative; }
footer .ubicacion .btnMap .icon { font-size:24px; position:relative; top:7px; left:-5px; margin-right:-5px; }
footer .ubicacion .btnMap:after { content:''; width:0; height:1px; background:#0fb7f1; bottom:0; left:10px; display:block; position:absolute;
    -webkit-transition:.6s all ease; -moz-transition:.6s all ease; -o-transition:.6s all ease; -ms-transition:.6s all ease; transition:.6s all ease; }
footer .ubicacion .btnMap:hover:after { width:73px; }
footer .ubicacion .redes { text-align: left; }
footer .ubicacion .redes h4, footer .ubicacion .redes p{ color: #FFFFFF; font-size: 16px; margin: 0; }

/*** MIDDLE ***/
footer .footerMiddle { background:#071e58; overflow:hidden; }
footer .footerMiddle li { border-color: #FFFFFF; padding: 1px 10px; display: inline-block; margin-bottom: 10px; }

/*** BOTTOM ***/
footer .footerBottom { background:#091941; overflow:hidden; padding:15px 0; }
footer .footerBottom .logotipos a .internacional { width:80px; }
footer .footerBottom .logotipos a .red { width:75px; }
footer .footerBottom .legales ul{ margin-left: auto; }
footer .footerBottom .legales ul li { border-right:1px solid #FFFFFF; padding:1px 10px; }
footer .footerBottom .legales ul li:last-child { border:0; }

/***** SCROLLBAR *****/
::-webkit-scrollbar {width: 8px;}/*Ancho*/
::-webkit-scrollbar-track {background: #F1F1F1;}/*Riel*/
::-webkit-scrollbar-thumb {background: #D6D8DB;}/* Handle */
::-webkit-scrollbar-thumb:hover { background: #001D68; }/*Hover Handle */

/***** LOADING *****/
.pantallaFull{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;}
#posicion { width: 304px; margin: 0 auto; }
#caja { width: 100%; perspective: 2200px; margin: auto; position: relative; }
#barrasLoaging { position: relative; width: 304px; height: 150px; padding: 0; margin: 0; }
.barraLoading:nth-child(1), .barraLoading:nth-child(1) div { z-index: 1; animation-delay: 0.0833333333s; }
.barraLoading:nth-child(2), .barraLoading:nth-child(2) div { z-index: 2; animation-delay: 0.1666666667s; }
.barraLoading:nth-child(3), .barraLoading:nth-child(3) div { z-index: 3; animation-delay: 0.25s; }
.barraLoading:nth-child(4), .barraLoading:nth-child(4) div { z-index: 4; animation-delay: 0.3333333333s; }
.barraLoading:nth-child(5), .barraLoading:nth-child(5) div { z-index: 5; animation-delay: 0.4166666667s; }
.barraLoading:nth-child(6), .barraLoading:nth-child(6) div { z-index: 6; animation-delay: 0.5s; }
.barraLoading:nth-child(7), .barraLoading:nth-child(7) div { z-index: 7; animation-delay: 0.5833333333s; }
.barraLoading:nth-child(8), .barraLoading:nth-child(8) div { z-index: 8; animation-delay: 0.6666666667s; }
.barraLoading { width: 30px; height: 150px; position: relative; margin-right: 8px; float: left; transform-style: preserve-3d; box-shadow: 0 0 5px rgba(39, 72, 155,.2); animation: animCube; /* Safari and Chrome */ animation-iteration-count: infinite; }
.barraLoading div { position: absolute; display: block; width: 30px; height: 150px; }
.barraLoading .center { width: 30px; box-shadow: 0 0 3px rgba(39, 72, 155,.3), inset 0 1px rgba(255, 255, 255, .05); animation: animCenter;	animation-iteration-count: infinite; }
.barraLoading .bottom { width: 30px; height: 10px; bottom: 0; transform: rotateX(90deg); transform-origin: center bottom; animation: animBottom; animation-iteration-count: infinite; }
.barraLoading .left { left: 0; transform: rotateY(90deg); transform-origin: left center; animation: animSide; animation-iteration-count: infinite; }
.barraLoading .right { right: 0; transform: rotateY(-90deg); transform-origin: right center; animation: animSide; animation-iteration-count: infinite; }
.barraLoading .left, .barraLoading .center, .barraLoading .right, .barraLoading .bottom, .barraLoading { animation-duration: 1s; animation-timing-function: ease-in-out; }
.left, .right { background-image: linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
.center { background-image: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); }
.bottom { background-image: linear-gradient(bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }

@media (max-width:560px) { #barrasLoadings{ -ms-transform: scale(0.5); transform: scale(0.5); } }
@keyframes animCube {
    30% { transform: translateZ(150px) translatex(0) translateY(0) rotatex(3deg) rotatey(0deg) rotateZ(0deg); box-shadow: 0 0 20px rgba(39, 72, 155, .5), 0 12px 20px 1px rgba(39, 72, 155, .5); }
    100% { transform: translateZ(0px) rotatez(0deg); box-shadow: 0 0 30px rgba(39, 72, 155, .5), 0 0 0 0 rgba(39, 72, 155, 0); }
}
@keyframes animSide {
    30% { width: 100px;	}
    95% { width: 10px; }
}
@keyframes animBottom {
    30% { height: 100px; }
    95% { height: 10px;	}
}
@keyframes animCenter { /* Safari and Chrome */
    20% { box-shadow: 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px rgba(255, 255, 255, .5); }
    65% { box-shadow: 0 0 3px rgba(255, 255, 255, 0), inset 0 1px rgba(255, 255, 255, .25);}
}


/***** CONTENEDORES *****/
body{ font-size: 14px !important; }
.marco{ max-width: 960px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; }
.container-fluid{ padding: 0; }

/***** TÍTULOS *****/
h1, h2, h3 { letter-spacing: 1px; position: relative; }
h1:before, h2:before, h3:before { content: ''; position: absolute; bottom: -8px; left: 0; width: 80px; display: block; background: #D21034; height: 3px; }
h4, h5, h6 { font-family: 'indivisa-text-bold'; }
h1 { margin-bottom: 40px; font-size: 50px; }
h5 { color:#D21034; }
h6 { color: #222222; }

/***** FONTS *****/
.display-5 { font-size: 2.5rem; font-weight: 300; line-height: 1.2; }
.display-6 { font-size: 1.5rem; font-weight: 300; line-height: 1.2; }

/***** INPUTS *****/
input { outline: none; }
input[type=text], input[type=password], input[type=email],
textarea { color: #b7b7b7; background: transparent; border: 1px solid #dbdcdd; border-radius: 5px; font-weight: 300; vertical-align: middle; padding: 10px 20px; width: 100%;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
textarea:focus { color: #001D68; border-color: #001D68; }
textarea{ resize: none; overflow-x: hidden; overflow-wrap: break-word; overflow-y: auto; }

/***** BOTONES *****/
.btn-ing{ position: relative; padding: 10px 45px 10px 30px; }
.btn-outline-secondary:hover{ background:#001D68; color: #FFFFFF; border-color:#001D68; }
.btn-outline-primary.arrow:after { color: #D21034; }
.btn-outline-danger.arrow:after { color: #001D68; }
.btn.arrow:after { content: "\e905"; font-size: 14px; position: absolute; font-family: "ingfont"; right: 20px; margin-top: 3px; font-weight: bold; vertical-align: middle;
                   -webkit-transition: 0.6s all ease; -moz-transition: 0.6s all ease;  -o-transition: 0.6s all ease; -ms-transition: 0.6s all ease; transition: 0.6s all ease; }
.btn-outline-secondary:hover.arrow:after { color: #D21034; }
.btn-outline-info:hover{ background:#D21034; color: #FFFFFF; border-color:#D21034; }
.btn-outline-info:hover.arrow:after { color: #001D68; }
.btn-extra { cursor: pointer; color: #969696; }
.btn-extra:hover{ background: #E0E0E0 !important; color: #001D68; }

/********** MODALS **********/
/*--- MODAL MARCO ---*/
.modalMarco .modal-content{ background: url(../img/fondo.webp); border: 0; }
.modalMarco .modal-header, .modalMarco .modal-body{ background: #FFFFFF; }
.modalMarco .cerrar{ background: #FFFFFF; color: #001D68; padding: 0.5rem; margin: 0.5rem; border: 2px solid #001D68; border-radius: 50%; }
.modalMarco .cerrar:hover{ background: #001D68; color: #FFFFFF; }

.modalGral .modal-content{ border:1px solid #F0F0F0; box-shadow: 2px 2px #001D68; }
.modalGral button.bg-white:hover{ background: none !important; opacity: 0.5; }
.modalGral .modal-text-bold{ font-size: 18px; font-family: 'indivisa-text-bold'; padding: 0.75em 2em; }
.modalGral .modal-text-italic{ font-size: 14px; font-family: 'indivisa-text-italic'; }
/*.modal-divider::after { content: ""; width: 0; height: calc(100% - 1.5rem); position: absolute; border: 1px solid #D21034; top: 0.75rem; left: 25%; }
.modal-divider .col-sm-3 { text-align: right; padding-right: 20px; }
.modal-divider h6 { color: #001D68; font-family: 'indivisa-display-italic'; }
@media (max-width:560px) {
    .modal-divider:after{ left: 5%; }
    .modal-divider .col-sm-3{ text-align: left; padding-right: 0px; padding-left: 2rem; }
    .modal-divider h6{ margin-bottom: 1rem; }
    .modal-divider .col-sm-9{ padding-left: 2rem; }
} */
#modalInicia .icon{ font-size: 30px; color: #001D68; }
#modalInicia .errorLogin{ font-size: 16px; }

/***** TOOLTIP *****/
.tooltip-inner { background-color: #001D68; }
.bs-tooltip-auto[x-placement^="top"] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: #001D68; }
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #001D68; }
.bs-tooltip-auto[x-placement^="left"] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: #001D68; }
.bs-tooltip-auto[x-placement^="right"] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: #001D68; }

/***** GENERALES *****/
.pointer{ cursor: pointer; }
.defaultShadow{ -webkit-box-shadow: 0 0 5px 1px rgba(150,150,150,.2); box-shadow: 0 0 5px 1px rgba(150,150,150,.2); }

.bg-barra{ background: #E0E0E0; }
.pleca{ background: url(../img/pleca.webp); height: 30px; width: 100%; }
.fondoAnuncio{ background: url(../img/fondo.webp); width: 100%; padding: 3rem; }
.fondoAnuncio > div:first-of-type{ background: #FFFFFF; }
.fondoAnuncio div.tit{ font-family: 'indivisa-text-bold'; font-size: 80px; }
.fondoAnuncio div.msg{ font-size: 60px; }
.fondoAnuncio div.msg2{ font-size: 40px; }

/***** MOBILE *****/
@media (max-width: 800px) {
    .menu, .subMenu { position: relative; }
    .iconoMenu { position: absolute; display: block; right: 20px; top:10px; }
    .menuOculto{ display: none; }
}
@media (max-width:992px) {
    .fondoAnuncio div.tit{ font-size: 70px; }
    .fondoAnuncio div.msg{ font-size: 50px; }
    .fondoAnuncio div.msg{ font-size: 30px; }
}
@media (max-width:768px) {
    .margen-principal{ margin-left: 0 !important; margin-right: 0 !important; }
    .fondoAnuncio div.tit{ font-size: 60px; }
    .fondoAnuncio div.msg{ font-size: 50px; }
    .fondoAnuncio div.msg2{ font-size: 25px; }
}
@media (max-width:600px) {
    .fondoAnuncio div.tit{ font-size: 50px; }
    .fondoAnuncio div.msg{ font-size: 40px; }
    .fondoAnuncio div.msg2{ font-size: 20px; }
}
@media (max-width:520px) {
    .fondoAnuncio div.tit{ font-size: 40px; }
    .fondoAnuncio div.msg{ font-size: 30px; }
    .fondoAnuncio div.msg2{ font-size: 17px; }
}
@media (max-width:480px) {
    .fondoAnuncio div.tit{ font-size: 30px; }
    .fondoAnuncio div.msg{ font-size: 20px; }
    .fondoAnuncio div.msg2{ font-size: 15px; }
}
@media (max-width:370px) {
    .fondoAnuncio div.tit{ font-size: 25px; }
    .fondoAnuncio div.msg{ font-size: 15px; }
    .fondoAnuncio div.msg2{ font-size: 12px; }
}