@import "librerias/bootstrap 4.3.1/vendor/twbs/bootstrap/dist/css/bootstrap.css";

body {
  color: var(--dark);
  background-color: var(--white);
  font-family: var(--font-family-sans-serif);
}

a:hover{
	text-decoration: none;
}

/*******************************************************************/

/**************************   GENERALES   **************************/

/*******************************************************************/

.gradient-background{
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	background-size: 150% 150%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite;	
}

.dark-opacity{
	filter: brightness(50%) contrast(80%);
	-webkit-filter: brightness(50%) contrast(80%);	
}

form{
	margin: 0;
}

.divider-sm{
	height: 2px;
	width: 50px;
}

.divider-plus hr:first-child{
	height: 1px;
	width: 15%;
	margin-top: 0;
}

.divider-plus hr:last-child{
	height: 1px;
	opacity: 0.5;
	width: 85%;
	margin-top: 0;
}

.divider-plus{
	display: flex!important;
}

.bg-image{
	background-size: cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

.no-margin{
	margin: 0!important;
}

.btn-outline-white{
	color:var(--white);
	border-color:var(--white);
}

.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active{
	color:var(--dark);
	background-color: var(--white);
	border-color:var(--white);
}

/* Aspect Ratio */

.aspect-ratio{
	position: relative;
	margin: auto;
}

.aspect-ratio *{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;	
}

.aspect-ratio:before{
	content: "";
	display: block;	
}

.ratio-1-1:before{
	padding-top: 100%;
}

.ratio-16-9:before{
	padding-top: 56.25%; 
}

.ratio-4-3:before{
	padding-top: 75%; 
}

.ratio-3-2:before{
	padding-top: 66%; 
}

.ratio-8-5:before{
	padding-top: 62.5%; 
}

/* Efectos */

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/* Navegador */

.navbar-nav .nav-item.active{
	background-color: var(--primary);
  border-radius: 0.25rem;	
}

.navbar-nav .nav-item.active a.nav-link{
	color: var(--white);
}

nav{
	position: relative;
	top:0;
}

nav.affix{
	position: fixed!important;
	z-index: 9999999!important;
	width: 100%!important;
	background-color:  var(--white)!important;
}

/* Menú Lateral */

#menu-lateral{
	width: 400px;
	height: calc(100vh - 56px);
	position: fixed;
	top:56px;
	background-color: var(--white);
	z-index: 99999;
	left: -400px;
	transition: 0.5s ease;
}

#menu-lateral.show{
	left: 0;
}

/* Slider */

.carousel-inner, .carousel-item{
	max-height: 70vh;
	background-color: black;
}


/* Gritter */

.gritter-top, .gritter-item, .gritter-bottom{
  background: none!important;
}

.gritter-close{
 right: 3px!important;
 left: inherit!important;
}

.gritter-title{
	text-shadow: none!important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: transparent!important;
}

.breadcrumb *, .breadcrumb-item::before{
    color: var(--white)!important;
    text-align: right!important;
}

#encabezado{
	height:150px;
}

/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

	#encabezado{
		height:100px;
	}

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {

	#encabezado{
		height:100px;
	}

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {

}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {

}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.carousel-caption h2{
		font-size: 3.5em;
	}
}