:root{
	--margen-y-ancho-izquierdo: 0px;
	--bg-color-1: #070707; /* color negro */
	--bg-color-2: #DC4242; /* color rojo */
}

#cargador {
	position: fixed;
	background: var(--bg-color-1);
	height: 100vh !important;
	width: 100% !important;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	display: flex;
	z-index: 9999;
}

.grecaptcha-badge { visibility: hidden; } /* ocultar recatchap v3 google*/

a, a:hover {
	text-decoration: none;
}

.slick-lightbox .slick-next {
	right: 30px;
}

.text-red {
	color: var(--bg-color-2);
}
.blanco-transparente{
	background-color: #ffffffe6;
}

.spinner-border{
	color: var(--bg-color-2);
}


.slick-prev::before, .slick-next::before {
	font-size: 40px;
}
.slick-lightbox-close::before {
	font-size: 40px;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: lighter;
}
p{
	font-weight: lighter!important;
	line-height: inherit;
}

a, a:hover{
	transition: 0.6s;
}

.btn-default{
	background: transparent;
	border: solid 2px;
	color: red;
	border-radius: 50px;
	min-width: 120px;
	min-height: 50px;
	margin-left: auto;
}

.logo2{
	transition: 2s;
	position: absolute;
	opacity: 0
}
.docSlider-id_nosotros .logo1{
	transition: 2s;
	opacity: 0;
	/*display: none;*/
}
.docSlider-id_nosotros .logo2{
	transition: 2s;
	display: block;
	opacity: 1;
}
.docSlider-id_contacto .logo1{
	transition: 2s;
	opacity: 0;
}
.docSlider-id_contacto .logo2{
	transition: 2s;
	display: block;
	opacity: 1;
}

/** GENERAL **/
.docSlider-pager{
	display: none;
}

.seccion{
	padding-top: 80px;
	padding-bottom: 80px;
	overflow: hidden;
}

.bg-negro {
	background: var(--bg-color-1);
}

.titulo-small{
	margin-bottom: 0px;
	color: var(--bg-color-2);
	text-transform: uppercase;

	display: inline-block;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 150%;
	text-transform: uppercase;
	position: relative;
	padding-left: 86px;
	margin-bottom: 0px;
	margin-top: -4px;
}
.titulo-small::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 60px;
	height: 1px;
	background-color: #a8afc2;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	background-color: var(--bg-color-2);
}

.brochure{
	/*height: 100%; overflow: hidden;*/
}

.brochure .h1{
	text-transform: full-size-kana;
	font-weight: bold;
	line-height: 40px;
}

.brochure .h1 span {
	width: 12px;
	height: 12px;
	background-color: var(--bg-color-2);
	display: inline-block;
	border-radius: 50%;
}
.brochure .h5 {
	line-height: 1.4;
}

#contenido {
	display: flex;
	background: gray;
}

#contenedor {
	height: 100%;
	width: 100%;
	min-height: 100vh;
}

#contenedor .main {
	width: auto;
	height: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	margin-left: var(--margen-y-ancho-izquierdo);
	transition: all .5s;
	overflow: hidden;
	background: white;
}

/** SIDEBAR **/
.sidebar {
	height: 100%;
	width: 300px;
	background: black;
	position: fixed;
	z-index: 9;
	transition: all .5s;
	right: 0px;
}
.margin-transition{
	margin-right: -300px;
}

.fondo-oscuro {
	background: #000000b0;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 8;
	display: none;
}
#accionMenu {
	position: absolute;
}
.menu {
	width: 100%;
	padding: 40px;
}
.menu ul {
	width: 100%;
}
.menu ul li{
	width: 100%;
	list-style: none;
	margin: 15px 0px;
}
.menu ul li a{
	color: white;
	font-size: 20px;
	text-transform: none;
	text-decoration: none;
	width: 100%;
	display: block;
}
.menu ul li a:hover{
	color: var(--bg-color-2);
}

/** CABEZERA **/
.cabecera {
	width: 100%;
	height: auto;
	position: absolute;
	overflow: hidden;
	z-index: 8;
}
.cabecera .contenedor{
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: auto;
	margin-left: var(--margen-y-ancho-izquierdo);
	transition: all .5s;
}

/** BANNER **/
#banner .lateral {
	width: 100%;
	max-width: 400px;
	background: var(--bg-color-1);
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99;
}
#banner .lateral img{
	max-width: 300px;
	width: 100%;
}
#banner .banner-img {
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

/** PORTAFOLIO **/
.portafolio-contenedor{
	height: 100vh;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0px;
}
.portafolio{
	height: 100%;
    width: 100%;
}

.portafolio > div{
	overflow: hidden;
}

.img-portafolio{
	width: 100%;
	height: 100%;
	/*min-height: 400px;*/
	overflow: hidden;
}

.banner-img{
	transition-delay: 0.3s
	transform-origin: 50 50;
	transform: scale(1);
	transition: 2s;
}
.banner-img:hover{
	transition-delay: 0.3s
	transform-origin: 50 50;
	transform: scale(1.4);
	transition: 2s;
}

.img-portafolio .child{
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;

	transition-delay: 0.3s
	transform-origin: 50 50;
	transform: scale(1);
	transition: 2s;
}
.img-portafolio:hover > .child{
	transition-delay: 0.3s
	transform-origin: 50 50;
	transform: scale(1.2);
	transition: 2s;
	/*opacity: 0.2;*/
}
.bg-hover{
	transition: 1s;
	/*display: none;*/
	width: 100%;
	height: 100%;
	position: absolute;
	background: transparent;
	/*top: 0;*/
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-portafolio:hover > .bg-hover {
	transition: 1s;
	background: #000000ab;
	bottom: 0;
	/* display: block; */
	display: flex;
	align-items: center;
	justify-content: center;
}
.img-portafolio .titulo {
	color: white;
	font-weight: 500!important;
}
.img-portafolio p {
	color: var(--bg-color-2);
	font-weight: 600!important;
}

#portafolio .slick-prev{
    background: #e4000000;
    left: 10px;
    z-index: 9;
}
#servicios .slick-prev {
	background: #e4000000;
    left: 20px;
    z-index: 9;
}
#servicios .slick-next {
	background: #e4000000;
    right: 28px;
    z-index: 9;
}
#servicios .slick-prev::before {
	font-size: 30px;
}
#servicios .slick-next::before {
	font-size: 30px;
}

#portafolio .slick-prev {
	position: absolute;
	z-index: 99;
	display: flex;
	align-items: center;
	left: 10px;
	width: 40px;
	height: 40px;
}
#portafolio .slick-next {
	position: absolute;
	z-index: 99;
	display: flex;
	align-items: center;
	right: 10px;
	width: 40px;
	height: 40px;
}
#portafolio .slick-slide > div {
	display: flex;
	height: 50%;
}

#portafolio .slick-prev::before {
	font-size: 40px;
}
#portafolio .slick-next::before {
	font-size: 40px;
}
#galeria .slick-prev::before{
	font-size: 40px;
}
#galeria .slick-next::before{
	font-size: 40px;
}

#portafolio .slick-track {
	height: 90vh; /* actualizado */
}


/*** NOSOTROS **/
#nosotros .centrado {
	min-height: 100vh;
	align-items: center;
	display: flex;
	margin-left: auto;
}
#nosotros .img-banner {
	height: 100%;
	position: absolute;
	width: 45%;
	top: 0px;
	background-repeat: no-repeat;
	opacity: 0.3;
	background-position: center;
	left: 0px;
}
/*** CONTACTO ***/
#contacto .centrado {
	min-height: 100vh;
	align-items: center;
	display: flex;
}
#contacto .img-banner {
	height: 100%;
	position: absolute;
	width: 45%;
	background-repeat: no-repeat;
	opacity: 0.3;
	background-position: center;
	right: 0px;
	top: 0px;
}
#contacto .ancho{
	width: 75%;
}


/* BTN for Menu */
.button-nav--toggle {
  background: rgb(18, 19, 24);
  height: 48px;
  position: relative;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
  width: 48px;
  border-radius: 50%;
}
.button-nav--toggle span {
  background-color: #fff;
  display: block;
  height: 2px;
  left: 14px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  -webkit-transition: .4s;
  transition: .4s;
  width: 20px;
}
.button-nav--toggle span:first-child {
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
}
.button-nav--toggle span:last-child {
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
}

/* Menu Active */
.button-nav--toggle.active span:first-child {
  -webkit-transform: rotate(45deg) translate(0);
          transform: rotate(45deg) translate(0);
}
.button-nav--toggle.active span:nth-child(2) {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button-nav--toggle.active span:last-child {
  -webkit-transform: rotate(-45deg) translate(0);
          transform: rotate(-45deg) translate(0);
}




/** SERVICIOS **/
#servicios .slick-slide {
}

#servicios .slick-dotted.slick-slider {
	margin-bottom: 30px;
	left: 0;
	right: 0;
}

.servicios {
	align-items: center;
	display: flex;
	overflow: hidden;

	height: 100vh;
	align-items: center;
	position: absolute;
	top: 0px;
	width: 100%;
	left: 0px;
}
.servicios .caja {
	min-height: 300px;
	background-color: rebeccapurple;
	background: linear-gradient(180deg, #080A12 0%, rgba(8, 10, 18, 0) 100%);
	padding: 30px;
	text-align: center;
}
.servicios .fondo {
	background: linear-gradient(180deg, #191C26 0%, rgba(25, 28, 38, 0) 100%);
}
.servicios .caja .icono{
	width: 130px;
	height: 130px;
	background: #22252e;
	margin: 0 auto;
	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
}
.servicios .caja .icono img{
	width: 70px;
	height: 70px;
}
.servicios .caja .titulo{
	color: white;
	display: flex;
	justify-content: center;
	font-size: 20px;
	padding-top: 20px;
}
.servicios .caja p{
	color: #969696;
}
.servicios .caja a{
	color: var(--bg-color-2);
}


.servicios .caja{
	position: relative;
	z-index: 99;
	transition: 0.6s;
}
.servicios a:hover > .caja{
	transition-delay: 0.3s
	transform-origin: 50 50;
	transform: scale(1.05);
	transition: 0.6s;
	/*opacity: 0.2;*/
	z-index: 999;
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.33),0 0px 20px 0 rgba(0, 0, 0, 0.35) !important;
	background: #080a12;
}

.servicios a:hover > .fondo {
	background: #191c26;
}

.servicios .slick-list {
	padding-top: 40px;
	padding-bottom: 40px;
}



.slick-lightbox .slick-prev {
	left: 15px;
	display: flex;
	z-index: 99;
}

.desktop {
	display: block!important;
}

.movil {
	display: none!important;
}


#portafolioMovil{
	display: none;
}

@media (max-width: 991.98px) { 

	#portafolioDesktop{
		display: none;
	}

	#portafolioMovil{
		display: block;
	}

	/** BROCHURE **/
	.brochure .h1 {
		font-size: 1.9rem;
	}


	#nosotros .centrado {
		margin: 0 auto;
	}

	@media (max-height: 400px) {
		.titulo-servicio{
			display: none;
		}
	}
}


@media (max-width: 767.98px) {

	.desktop {
		display: none!important;
	}

	.movil {
		display: block!important;
	}

	#portafolio .slick-lightbox-slick-img {
		max-width: 100%;
		max-height: 100%;
	}

	.brochure .h1 {
		font-size: 2rem;
	}

	#contacto .ancho{
		width: 80%;
	}

	#contacto .img-banner {
		position: absolute;
		width: 100%;
	}

	#banner .lateral .frase{
		max-width: 250px;
		width: 100%;
	}

	#banner .lateral .logo-chico {
		max-width: 190px!important;
		margin-top: 50px!important;
		width: 100%!important;
	}


	#servicios .slick-slide {
    	/*overflow: hidden;
    	min-height: 100vh;*/
	}

	.portafolio {
		overflow: hidden;
	}

	#portafolio .slick-slide {
		overflow: hidden;
		height: 100vh;
		/*padding-top: 80px;*/
		padding-top: 0px;
		padding-bottom: 60px;
	}
	.portafolio-contenedor{
		height: 100%;
	}	

	.img-portafolio{
		width: 100%;
		height: 100%;
		/*min-height: 180px;*/

		min-height: 300px;
		display: grid;
	}

	#portafolio{
		/*padding-top: 80px;*/
	}

	/** BANNER **/
	#banner .lateral {
		background: transparent;
		z-index: 9;
	}
	#banner .banner-img {
		width: 100%;
		height: 100%;
		position: absolute;
		background-position: center;
		background-size: cover;
		opacity: 0.5;
	}

	/** NOSOTROS **/
	#nosotros .img-banner {
		position: absolute;
		width: 100%;
	}

	#nosotros .w-75 {
		width: 100%!important;
	}

	.bg-hover {
		background: #0000008c;
	}

	@media (max-height: 400px) {
		#nosotros {
			padding-top: 30px;
		}
		.titulo-servicio{
			display: none;
		}
	}


}





@media (max-width: 575.98px) {

	#contacto .ancho{
		width: 90%;
	}

	.brochure .h1 {
		font-size: 2rem;
	}

}