/*Seccion del body completo*/
body{
	background-color: rgba(0, 0, 0, 0.865);
	font-family: "Roboto Slab","Helvetiva Neue",Helvetiva,Arial,sans-serif;
}

/*Footer*/
footer{
	/*position: absolute;*/
	right: 0;
	bottom: 0;
	left: 0;
	/*padding: 1em;*/
	background-color: white;
	text-align: center;
}

img{
	max-width: 100%;
}

/* Margen superior e inferior para el contenido de cada página dentro de <div ng-view>*/
[ng-view]{
	margin-top: 4em;
	margin-bottom: 0;

	background-image: url(../imgs/background2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
}

/*Sombra de la barra de navegación (cuando no está en el tope de la página)*/
.navbar-default.navbar-shrink{
	box-shadow: 0 5px 3px rgba(0,0,0,0.175);
}

/*Secciones de las etiquestas de los dropdowns menu*/
#dropdown-label{
	color: #ccc !important;
}
#dropdown-label:hover{
	color: #262626 !important;
}

.brand-spacing{
	padding-top: 0;
	padding-bottom: 0;
}
.brand-spacing img{
	height: 50px;
}

/*Efecto pseudo-parallax para tener imagenes de fondo*/
.parallax{
	background-image: url(../imgs/background.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.parallax-bgim-1{
	background-image: url(../imgs/background.jpg);
}
.parallax-bgim-2{
	background-image: url(../imgs/background2.jpg);
}
.parallax-bgim-3{
	background-image: url(../imgs/background8.jpg);
}

/*Contenedor en páginas generales*/
.my-container{
	background-color: #eee;
	border-radius: 6px;
	padding-bottom: 1em;
	font-size: 1.2em; /*texto ligeramente mas grande*/

	background-color: rgba(238, 238, 238, 0.9);
}

/*Ajustes de tipografía en botones*/
.btn-custom{
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	text-transform: uppercase;
}

/*Tamaño y margen para logos al fondo de la página*/
.footer-logo{
	height: 80px;
	margin: 1em;
}


/*#################### ESTILOS COMPARTIDOS EN VARIAS PAGINAS*/
/*Evita que un texto (normalmente un link) no se decore con una linea bajo el texto en ningún momento*/
.no-text-decoration:active, .no-text-decoration:focus, .no-text-decoration:hover, .no-text-decoration:visited, .no-text-decoration{
    text-decoration: none;
}

/* Efecto "Reveal" de Hover con personalización (el color está definido en index.css) */
.hvr-reveal, .hvr-fade{
	display: block;
}
/*Color de fondo y texto en efecto "Fade" de Hover*/
.hvr-fade:hover{
	background-color: #ddd;
	color: initial;
}

/*Color transparente de icono oculto*/
.secret-icon, .secret-icon:hover, .secret-icon:focus, .secret-icon:visited{
	color: rgba(51,51,51,0.5);
}
.inverted-secret-icon, .inverted-secret-icon:hover, .inverted-secret-icon:focus, .inverted-secret-icon:visited{
	color: rgba(210,210,210,0.5);
}

/*Permite centrar elementos (ejemplo: .my-block-button)*/
.centering{
	text-align: center;
}
/*Simula un botón ancho*/
.my-block-button{
	border: none;
	outline: 0;
	padding: 8px 16px;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	margin-bottom: 15px;
	display: inline-block;
	width: 95%;
	width: calc(100% - 30px); /*15+15px margin left&right*/
}
/*Efecto de sombra*/
.my-block-button:hover{
	/*box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);*/
	background-color: #294f6d !important;
    color: #ddd !important;
}
.my-block-button-bw{
	color: #333 !important;
	background-color: #dedede !important;
	font-size: 1.5em;
}

/*Representa el espacio destinado para mostrar imagen y título de un evento*/
.my-thumbnail{
    margin-bottom: 20px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
    border-color: #353535;
    height: 310px;
    position: relative; /*ayuda a alinear otros objetos (.available-label)*/
    background-color: rgba(0, 0, 0, 0.4);
}
.my-thumbnail:hover{
    border-color: #ddd;
}
img.thumbnail-image{
    height: 240px;
    width: auto;
    max-width: 80%;
}

/*Cuando no hay imagen para un evento, se colorea un div y se escribe el título centrado. 
Esto reeplaza a la imagen faltante*/
.new-image-replacement{
    height: 240px;
    width: 60%;
    background-image: url(../imgs/lais.png);
    background-size: auto 55%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #181818;
    margin: auto;
}

/*Texto que se muestra en grid de eventos*/
.thumbnail-text{
	--verticalPadSize: 4px;
	padding: 4px 0; /*compatibilidad sin variables CSS en IE, Edge*/
	padding: var(--verticalPadSize) 0;
	/*height: 2.4em;*/
	height: calc(2.4em + 8px); /*compatibilidad sin variables CSS en IE, Edge*/
	height: calc(2.4em + (var(--verticalPadSize) * 2));
	overflow: hidden;
	color: #333;
	text-align: center;
}

/* Ellipsis (.block-with-text)*/ 
/* Source: https://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/*/
/* No funciona para este caso porque los títulos pueden ser cortos y CSS espera textos más largos*/

/* Permite agregar ellipsis (puntos suspensivos) cuando el texto es muy largo */
/* Comentario en: https://dev.mobify.com/blog/multiline-ellipsis-in-pure-css/*/
/* Ejemplo y uso en: https://codepen.io/anon/pen/htbxA*/
/* NOTA: No funciona en Firefox */
.vertically-centered {
	--verticalPadSize: 4px;
	padding: 4px 0; /*compatibilidad sin variables CSS en IE, Edge*/
	padding: var(--verticalPadSize) 0;
    height: calc(2.4em + 8px + 3px); /*compatibilidad sin variables CSS en IE, Edge*/
	height: calc(2.4em + (var(--verticalPadSize) * 2) + 3px);
    overflow: hidden;
    font-size: 1.4em;
    max-width: 100%;
    /*color: #333;*/
    color: #ddd;
    text-align: center;
}
.vertically-centered:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.vertically-centered div {
    display: inline-block;
    display: -webkit-inline-box;
    max-height: 100%;
    vertical-align: middle;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
/*##############################*/


/*Estilo a usar en dispositivos no-móviles (ancho > 768px)*/
@media screen and (min-width: 768px) {
	/*Correccion para que el lado derecho del menu no quede pegado al borde*/
	.nav{
		padding-right: 0; /*15px*/
		margin-right: 15px;
	}

	/* Margen superior e inferior para el contenido de cada página dentro de <div ng-view>*/
	[ng-view]{
	  margin-top: 8em;
	  margin-bottom: 0;
	}

	/*Secciones de las etiquestas de los dropdowns menu*/
	#dropdown-label{
		color: black;
	}

	/*Tamaño y margen para logos al fondo de la página*/
	.footer-logo{
		width: 35%;
		height: initial;
		margin: 1em;
	}

	/*Animación para hacer aparecer texto/icono*/
	@keyframes my-fade-in{
		from {color: rgba(51,51,51,0.2);}
		to {color: rgba(51,51,51,1.0);}
	}
	/*Color transparente de icono oculto*/
	.secret-icon, .secret-icon:active{
		color: rgba(51,51,51,0.2);
		/*font-size: 0.8em;*/ /*Deshabilitado en favor de un uso más general*/
	}
	/*Animación y color que revela el icono*/
	.secret-icon:hover{
		animation-name: my-fade-in;
		animation-duration: 1s;
		color: rgba(51,51,51,1.0);
	}
	/*Animación para hacer aparecer texto/icono*/
	@keyframes my-inverted-fade-in{
		from {color: rgba(210,210,51210,0.2);}
		to {color: rgba(210,210,210,1.0);}
	}
	/*Color transparente de icono oculto*/
	.inverted-secret-icon, .inverted-secret-icon:active{
		color: rgba(210,210,210,0.2);
		font-size: 0.8em;
	}
	/*Animación y color que revela el icono*/
	.inverted-secret-icon:hover{
		animation-name: my-inverted-fade-in;
		animation-duration: 1s;
		color: rgba(210,210,210,1.0);
	}
}

/*COLORES DE VARIOS ELEMENTOS. 
BRINDAN LA SENSACIÓN DE UN TEMA BASADO EN LOS SIGUIENTES COLORES:*/

/*Color primario: #c85c2d (naranja)*/
/*Tono claro: #de7d54*/
/*Tono oscuro: #a13f16*/
/*Tono más oscuro: #782400*/
/*Auxiliares en botones: #b34d23 (oscuro), #cc724d (claro)*/

/*Color primario: #294f6d (azul)*/
/*Tono claro: #496d89*/
/*Tono oscuro: #123652*/
/*Tono más oscuro: #040237*/

/*Pseudo elemento en selección de texto*/
::-moz-selection{ /*Firefox*/
	color: #eee;
	background: #294f6d;
}
::selection{
	color: #eee;
	background: #294f6d;
}
/*Navbar background de sección activa*/
.navbar-default .navbar-nav>.active>a {
	background-color: #294f6d;
}
/*Navbar background de sección activa (hover) - tono claro*/
.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
	background-color: #496d89;
}
/*Navbar texto de sección no-activa (hover)*/
.navbar-default .nav li a:hover, .navbar-default .nav li a:focus{
	/*color: #294f6d;*/
	color: #eee;
}
/*Cuadro de navbar activo en menu*/
.navbar-default .navbar-toggle, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{
	background-color: #294f6d;
	border-color: #123652;
}
/*SOBREESCRIBIR estilo de .btn-primary de bootstrap para un botón*/
.btn-primary{
	background-color: #294f6d;
	border-color: #123652;
}
.btn-primary:hover, .btn-primary:focus{
	/*background-color: #b34d23; /*<--- Color auxiliar (oscuro) entre color primario y oscuro*/
	background-color: #123652;
	border-color: #040237;
}
.btn-primary[disabled], .btn-primary.disabled{
	background-color: #496d89;
	border-color: #123652;
}
.btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary.disabled:hover, .btn-primary.disabled:focus{
	/*background-color: #cc724d; /*<--- Color auxiliar (claro) entre color primario y claro*/
	background-color: #496d89;
	border-color: #123652;
}
/*Ejemplos: Fondo de ícono LAIS en Inicio*/
.text-primary{
	color: #294f6d;
}
/*Enlaces*/
a{
	color: #294f6d;
}
/*Enlaces seleccionados*/
a:hover, a:focus, a:active, a.active{
	color: #294f6d;
}
/*Botones de redes sociales*/
ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active{
	background-color: #294f6d;
}
/*Encabezados - tono oscuro*/
.section-heading{
	color: #123652;
}
/*Subtítulos en inicio (Recursos en línea)*/
.service-heading{
	/*color: #294f6d;*/
	color: #ccc;
}
.color-title{
	color: #294f6d;
}
/*Botón (div) personalizado (ver publicaciones.css)*/
.my-block-button{
	color: #ddd;
	background-color: #294f6d;
}
/*Color semi-transparente para jumbotron*/
.jumbotron{
	background-color: rgba(238,238,238,0.9);
}

/*Alternativa de color para enlaces (el color es más oscuro)*/
a.strong-color{
	color: #123652;
}
/*Efecto "Reveal" de Hover.css*/
.hvr-reveal:before{
	border-color: #294f6d;
}
/*Subtítulos en la descripción completa de un evento*/
.subtitle-color{
	color: #123652;
}

/* Marging and padding classes */
.m-0 { margin:0!important; }
.m-1 { margin:.25rem!important; }
.m-2 { margin:.5rem!important; }
.m-3 { margin:1rem!important; }
.m-4 { margin:1.5rem!important; }
.m-5 { margin:3rem!important; }

.mt-0 { margin-top:0!important; }
.mr-0 { margin-right:0!important; }
.mb-0 { margin-bottom:0!important; }
.ml-0 { margin-left:0!important; }
.mx-0 { margin-left:0 !important;margin-right:0 !important; }
.my-0 { margin-top:0!important;margin-bottom:0!important; }

.mt-1 { margin-top:.25rem!important; }
.mr-1 { margin-right:.25rem!important; }
.mb-1 { margin-bottom:.25rem!important; }
.ml-1 { margin-left:.25rem!important; }
.mx-1 { margin-left:.25rem!important;margin-right:.25rem!important; }
.my-1 { margin-top:.25rem!important;margin-bottom:.25rem!important; }

.mt-2 { margin-top:.5rem!important; }
.mr-2 { margin-right:.5rem!important; }
.mb-2 { margin-bottom:.5rem!important; }
.ml-2 { margin-left:.5rem!important; }
.mx-2 { margin-right:.5rem!important;margin-left:.5rem!important; }
.my-2 { margin-top:.5rem!important;margin-bottom:.5rem!important; }

.mt-3 { margin-top:1rem!important; }
.mr-3 { margin-right:1rem!important; }
.mb-3 { margin-bottom:1rem!important; }
.ml-3 { margin-left:1rem!important; }
.mx-3 { margin-right:1rem!important;margin-left:1rem!important; }
.my-3 { margin-bottom:1rem!important;margin-top:1rem!important; }

.mt-4 { margin-top:1.5rem!important; }
.mr-4 { margin-right:1.5rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }
.ml-4 { margin-left:1.5rem!important; }
.mx-4 { margin-right:1.5rem!important;margin-left:1.5rem!important; }
.my-4 { margin-top:1.5rem!important;margin-bottom:1.5rem!important; }

.mt-5 { margin-top:3rem!important; }
.mr-5 { margin-right:3rem!important; }
.mb-5 { margin-bottom:3rem!important; }
.ml-5 { margin-left:3rem!important; }
.mx-5 { margin-right:3rem!important;margin-left:3rem!important; }
.my-5 { margin-top:3rem!important;margin-bottom:3rem!important; }

.mt-auto { margin-top:auto!important; }
.mr-auto { margin-right:auto!important; }
.mb-auto { margin-bottom:auto!important; }
.ml-auto { margin-left:auto!important; }
.mx-auto { margin-right:auto!important;margin-left:auto!important; }
.my-auto { margin-bottom:auto!important;margin-top:auto!important; }

.p-0 { padding:0!important; }
.p-1 { padding:.25rem!important; }
.p-2 { padding:.5rem!important; }
.p-3 { padding:1rem!important; }
.p-4 { padding:1.5rem!important; }
.p-5 { padding:3rem!important; }

.pt-0 { padding-top:0!important; }
.pr-0 { padding-right:0!important; }
.pb-0 { padding-bottom:0!important; }
.pl-0 { padding-left:0!important; }                             
.px-0 { padding-left:0!important;padding-right:0!important; }
.py-0 { padding-top:0!important;padding-bottom:0!important; }

.pt-1 { padding-top:.25rem!important; }         
.pr-1 { padding-right:.25rem!important; }                       
.pb-1 { padding-bottom:.25rem!important; }      
.pl-1 { padding-left:.25rem!important; }                            
.px-1 { padding-left:.25rem!important;padding-right:.25rem!important; }
.py-1 { padding-top:.25rem!important;padding-bottom:.25rem!important; }

.pt-2 { padding-top:.5rem!important; }                                              
.pr-2 { padding-right:.5rem!important; }                                
.pb-2 { padding-bottom:.5rem!important; }               
.pl-2 { padding-left:.5rem!important; }                                             
.px-2 { padding-right:.5rem!important;padding-left:.5rem!important; }
.py-2 { padding-top:.5rem!important;padding-bottom:.5rem!important; }

.pt-3 { padding-top:1rem!important; }                               
.pr-3 { padding-right:1rem!important; }             
.pb-3 { padding-bottom:1rem!important; }                
.pl-3 { padding-left:1rem!important; }                              
.py-3 { padding-bottom:1rem!important;padding-top:1rem!important; }
.px-3 { padding-right:1rem!important;padding-left:1rem!important; }

.pt-4 { padding-top:1.5rem!important; }                             
.pr-4 { padding-right:1.5rem!important; }               
.pb-4 { padding-bottom:1.5rem!important; }              
.pl-4 { padding-left:1.5rem!important; }                                
.px-4 { padding-right:1.5rem!important;padding-left:1.5rem!important; }
.py-4 { padding-top:1.5rem!important;padding-bottom:1.5rem!important; }

.pt-5 { padding-top:3rem!important; }   
.pr-5 { padding-right:3rem!important; } 
.pb-5 { padding-bottom:3rem!important; }    
.pl-5 { padding-left:3rem!important; }  
.px-5 { padding-right:3rem!important;padding-left:3rem!important; }
.py-5 { padding-top:3rem!important;padding-bottom:3rem!important; }