@charset "utf-8";

* {
	scroll-behavior: smooth;
}

/**** COLORES
#f7deab amarillo
#cdeaec celeste

**/

/****** TIPOGRAFIA ******/
html {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	overflow-x: hidden;
}

body {
	font-family: 'Raleway', sans-serif;
	color: #383838;
	line-height: 1.75;
	font-weight: 400;
	font-size: .9rem;
	overflow-x: hidden;
}

body.page {
	margin-top: 110px;
}

.tooltip,
.popover {
	font-family: 'Raleway', sans-serif;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1.125rem;
}

p {
	font-size: .9rem;
}

.fw-400 {
	font-weight: 300;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.fw-900 {
	font-weight: 900;
}

i,
em,
.oblicua {
	font-style: oblique;
}

b,
strong {
	font-weight: 800;
}

.fst-normal {
	font-style: normal;
}

/****** NUEVOS ******/
.fs-1 {
	font-size: 1rem;
}

.fs-110 {
	font-size: 1.1rem;
}

.fs-150 {
	font-size: 1.5rem;
}

.align-sub {
	vertical-align: sub;
}

.text-black {
	color: rgba(0, 0, 0, 1);
}

.lh-50 {
	line-height: .5 !important;
}

.lh-75 {
	line-height: .75 !important;
}

.lh-90 {
	line-height: .9 !important;
}

.lh-100 {
	line-height: 1 !important;
}

.lh-125 {
	line-height: 1.25 !important;
}

.lh-150 {
	line-height: 1.5 !important;
}

.lh-200 {
	line-height: 2 !important;
}

.ls-0 {
	letter-spacing: 0;
}

.ls-1 {
	letter-spacing: .025rem;
}

.ls-2 {
	letter-spacing: .05rem;
}

.ls-3 {
	letter-spacing: .1rem;
}

.ls-n1 {
	letter-spacing: -.025rem;
}

.ls-n2 {
	letter-spacing: -.05rem;
}

.ls-n3 {
	letter-spacing: -.1rem;
}

/**** NAVBAR *****/
#navPpal {
	background: rgba(255, 255, 255, 0);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0);
	transition: all ease .25s;
}

#navPpal.scroll-on {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15);
	transition: all ease .25s;
}

#navPpal.scroll-on .icon-bar {
	background-color: #141313;
}

#navPpal .navbar-brand img {
	max-height: 100px;
	padding-top: 20px;
	padding-bottom: 10px;
}

#navPpal .navbar-brand img.logo-rojo,
#navPpal.scroll-on .navbar-brand img.logo-blanco {
	display: none;
}

#navPpal.scroll-on .navbar-brand img.logo-rojo {
	display: block;
}

#navPpal .rrss .nav-link {
	font-size: 1.25rem;
	transition: all ease .25s;
}

#navPpal .rrss .nav-link:hover {
	color: #44CCBE !important;
	transition: all ease .25s;
}

.navbar-toggler:focus,
.navbar-toggler:active {
	outline: none;
}

#navPpal .nav-link {
	color: #fff;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	position: relative;
	padding-left: 0;
	padding-right: 0;
	margin: 1rem;
}

#navPpal .nav-item:not(.rrss) .nav-link:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 3px;
	border-radius: 5px;
	display: block;
	background-color: transparent;
	transition: all ease .25s;
}

#navPpal .nav-item:not(.rrss) .nav-link:hover:after,
#navPpal .nav-item:not(.rrss) .nav-link.active:after {
	width: 100%;
	background-color: #44CCBE !important;
	transition: all ease .25s;
}

#navPpal.scroll-on .nav-link {
	color: #142329;
}

#navPpal .nav-link.active:after,
#navPpal .nav-link:hover:after {
	background-color: #314890;
	transition: all ease .5s;
}

.navbar-nav {
	text-align: center;
}

.page #navPpal {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15);
	transition: all ease .25s;
}

.page #navPpal .icon-bar {
	background-color: #141313;
}

.page #navPpal .navbar-brand img {
	max-height: 100px;
	padding-top: 20px;
	padding-bottom: 10px;
}

.page #navPpal .navbar-brand img.logo-rojo,
.page #navPpal .navbar-brand img.logo-blanco {
	display: none;
}

.page #navPpal .navbar-brand img.logo-rojo {
	display: block;
}

/**** BTN HAMBURGER *****/
.icon-bar {
	width: 22px;
	height: 3px;
	border-radius: 15px;
	background-color: #fff;
	display: block;
	transition: all ease .5s;
	margin-top: 4px
}

.navbar-toggler {
	border: none;
	background: transparent !important;
	padding: 0.25rem 0.25rem 0.25rem 0.75rem;
}

.navbar-toggler:focus,
.navbar-toggler:active {
	outline: none;
}

.drawer-open .navbar-toggler .top-bar {
	transform: rotate(45deg);
	transform-origin: 10% 10%;
}

.drawer-open .navbar-toggler .middle-bar {
	opacity: 0;
}

.drawer-open .navbar-toggler .bottom-bar {
	transform: rotate(-45deg);
	transform-origin: 10% 90%;
}

.navbar-toggler .top-bar {
	transform: rotate(0);
}

.navbar-toggler .middle-bar {
	opacity: 1;
}

.navbar-toggler .bottom-bar {
	transform: rotate(0);
}

.collapse:not(.show) {
	display: block;
}



/**** INTRO *****/
.intro {
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.cubierta {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 10;
}

.intro-video-cover {
	position: absolute;
	z-index: 10;
	border: 0;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%)
}

@supports ((-o-object-fit: cover) or (object-fit: cover)) {
	.intro-video-cover {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: translate(0, 0);
		object-fit: cover
	}
}

/*SLIDE INTRO*/
.slickHome {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 10;
	background: black;
}

.slickHome .slide {
	width: 100%;
	height: 100vh;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	outline: none;
	/*opacity: 0.7;*/
}

.slickHome .slick-arrow {
	color: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 50px;
	z-index: 2;
	cursor: pointer;
	margin: 20px;
	transition: color 0.3s ease-in-out;
}

.slickHome .slick-arrow:hover {
	color: rgba(255, 255, 255, 0.5);
}

.slickHome .slick-arrow-left {
	left: 0;
}

.slickHome .slick-arrow-right {
	right: 0;
}

.dark {
	background: #000;
	color: #fff;
}

/*SKIP INTRO*/
.skip-intro {
	position: absolute;
	bottom: 1.5rem;
	left: calc(50% - 35px);
	z-index: 11;
}

.skip-intro a i {
	font-size: 1.75rem;
}

.skip-intro a {
	background-color: transparent;
	width: 70px;
	height: 70px;
	line-height: 77px;
	border-radius: 70px;
	text-align: center;
	border: 3px solid #fff;
	color: #fff;
	display: block;
	opacity: .75;
	transition: all ease .25s;
}

.skip-intro a:hover {
	text-decoration: none;
	background-color: #44CCBE;
	opacity: 1;
	transition: all ease .25s;
}

.intro-text {
	font-size: 2rem;
	line-height: 2.4rem;
	font-weight: 600;
}

.intro-tags {
	font-size: 2.6rem;
	line-height: 3.2rem;
	font-weight: 800;
}

.intro-tags span {
	transform: rotate(13deg);
	display: inline-block;
	font-weight: 600
}

.centrar-xy {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

.bg-u {
	background: url(../images/bg-u.png) repeat;
}

.bg-m {
	background: url(../images/bg-m.png) repeat;
}

.bg-milanga {
	background: url(../images/bg-milanga2.jpg) 1px 10px no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

.mapa {
	border: 2px solid #CE103A !important;
	margin-left: -10px;
	margin-top: 0px;
}

.bg-propio {
	background: url(../images/propio-pepecito.jpg) center center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	min-height: 250px;
}

.my-45 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.pt-45 {
	padding-top: 2rem;
}

.px-6 {
	padding-left: 3rem;
	padding-right: 3rem;
}

.box-shadow-1 {
	box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
}

.text-shadow-1 {
	text-shadow: 0px 2px 10px rgba(0, 0, 0, .5);
}

.hvr-float-shadow {
	vertical-align: baseline
}


/********** FORMULARIO ***************/
#response {
	background: #44CCBE;
	color: #fff;
	text-align: center;
	padding: 25px 0px
}

.fx-fading-circle {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	background: #d4d4d45c url(../images/loading.gif) center no-repeat;
}

.loading {
	display: none;
}

label {
	/*font-size: .7rem;
	font-weight: 800;
	color: #a7bec7;
	text-transform: uppercase;
	margin-bottom: .25rem;
  */
	display: none;
}

.form-control {
	font-size: .9rem;
	font-weight: 500;
	height: calc(1.5em + .75rem + 10px);
	background: none;
	border: 0px;
	border-bottom: 1px solid #181818;
	border-radius: 0px
}

.form-control:focus {
	color: #000;
	background: none;
	border: 0px;
	border-bottom: 2px solid #181818;
	outline: 0;
	box-shadow: none;
}

::placeholder {
	color: #000;
}

.invisible {
	display: none;
}

.custom-file-input,
.custom-file-label,
.custom-file {
	height: calc(1.5em + .75rem + 10px);
}

.custom-file-label::after {
	height: calc(1.5em + .75rem + 8.5px);
}

.custom-file-label,
.custom-file-label::after {
	line-height: 2.25;
	font-size: .9rem;
	color: #6c757d;
}

.custom-file-label {
	text-transform: none;
}

.btn-primary {
	color: #2f2f2f;
	background-color: #0BFCFF;
	border-color: #0BFCFF;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: #03c3c5;
	border-color: #03c3c5;
	color: #2f2f2f;
}

/************** FOOTER ***************/
footer {
	background: #d4d4d4;
	color: #1d1d1b;
}

footer a,
footer button.btn-link {
	color: #181818;
	transition: all ease .25s;
}

footer a:hover,
footer button.btn-link:hover {
	color: #0BFCFF;
	transition: all ease .25s;
}

footer img {
	max-height: 63px;
}

footer .nav-link {
	padding: .5rem .5rem;
}

.bt-white {
	border-top: 1px solid #383838;
}

.nav-separator {
	border-right: 1px solid #383838;
}

.st0 {
	fill: 000;
}

/************** FOOTER ALTERNATIVO ***************/
.footer-alt footer {
	background: #000;
	color: #eee;
}

.footer-alt footer a,
.footer-alt footer button.btn-link {
	color: #eee;
	transition: all ease .25s;
}

footer a:hover,
footer button.btn-link:hover {
	color: #0BFCFF;
	transition: all ease .25s;
}

footer img {
	max-height: 63px;
}

footer .nav-link {
	padding: .5rem .5rem;
}

.bt-white {
	border-top: 1px solid #383838;
}

.nav-separator {
	border-right: 1px solid #383838;
}

.footer-alt .form-control {
	border-bottom: 1px solid #8e8e8e;
}

.footer-alt .form-control:focus {
	color: #eee;
	background: none;
	border: 0px;
	border-bottom: 2px solid #eee;
}

.footer-alt ::placeholder {
	color: #999;
}

.footer-alt .st0 {
	fill: #eee;
}

.social-contacto a {
	border: 1px solid #eee;
	padding: 8px 0 0 5px;
	border-radius: 100px;
	width: 45px;
	height: 45px;
	text-align: center;
	margin-right: 15px;
	color: #eee;
	transition: all ease .25s;
}

.social-contacto a:hover,
.social-contacto a:focus {
	color: #0BFCFF;
	border: 1px solid #0BFCFF;
}


.whatsapp-mobile {
	position: fixed;
	z-index: 700;
	bottom: 1.5rem;
	right: 1.5rem;
	opacity: .9;
	transition: all ease .25s;
}

.whatsapp-mobile {
	width: 56px;
	height: 56px;
}

.whatsapp-mobile:hover {
	opacity: 1;
	transition: all ease .25s;
}

/************* PORTFOLIO HOME ******************/
.grid-home {}

.grid-home .grid-home-item {
	width: 100%;
	float: left;
}

.grid-home .grid-sizer .grid-home .grid-home-item {
	width: 100%;
}

.grid-home .grid-home-item-inner {
	padding-top: 71.6%;
	position: relative;
}

.grid-home .grid-home-item-inner>div {
	padding: 14px;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.grid-home .grid-home-item-inner>div>div {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	width: 100%;
}

.grid-home .overlay-info {
	width: calc(100% - 28px);
	line-height: 1;
	height: calc(100% - 28px);
	padding: 0;
	margin: 0;
	color: #181818;
	border: none;
	background: rgb(11, 252, 255);
	text-align: center;
	opacity: 0;
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	transition: 0.3s;
}

.grid-home .grid-home-item:hover .overlay-info {
	opacity: 1;
}

.grid-home .overlay-info>span>span {
	text-align: center;
	vertical-align: middle;
	color: #181818;
	display: table-cell;
}

.grid-home .overlay-info .project-title {
	font-size: 2.6rem;
	font-weight: 800
}

.grid-home .project-title,
.grid-home .project-description {
	display: block;
}

.grid-home .overlay-info>span {
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	font-size: 1.2rem;
	font-style: normal;
	display: table;
}

.grid-home .project-title+.project-description {
	margin-top: 0.5rem;
}

.grid-home .project-description {
	font-size: 1rem;
}

.portfolio-intro img {
	width: 100%;
}

.portfolio-details h2 {
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
}

.portfolio-details .description {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
}

.portfolio-details .client {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
}

/************* PORTFOLIO MASONRY ******************/
.portfolio-grid {
	margin-left: 15px;
	margin-right: 15px;
}

.grid-sizer,
.grid-item {
	width: 100%;
}

.grid-item {
	float: left;
}

.grid-item-inner {
	padding-top: 100%;
	position: relative;
}

.grid-item--width2 {
	width: 100%;
}

.grid-item--width2 .grid-item-inner {
	padding-top: 50%;
}

.grid-item--width2.grid-item--height2 .grid-item-inner {
	padding-top: 70%;
}

.grid-item--height3 .grid-item-inner {
	padding-top: 140%;
}

.grid-item--width3 {
	width: 100%;
}

.grid-item--width3 .grid-item-inner {
	padding-top: 40%;
}

.grid-item-inner__inner {
	position: absolute;
	top: 8px;
	left: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}


.video-wrapper {
	position: absolute;
	top: 16px;
	left: 16px;
	width: calc(100% - 32px);
	height: calc(100% - 32px);
}

.video-wrapper:before {
	position: relative;
	content: '';
	display: block;
	padding-top: 56.25%;
}

.video-wrapper .inner,
.video-wrapper .poster,
.video-wrapper .video {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.video-wrapper .poster {
	background-color: #0BFCFF;
	background-position: center;
	background-size: cover;
}

.video-wrapper .video {
	background: black;
	opacity: 0;
	transition: 0.8s;
}

.video-wrapper video {
	width: 100%;
	height: 100%;
	outline: none;
}

.video-wrapper .video.loaded {
	opacity: 1;
	z-index: 2;
}

.video-wrapper .play-button {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	background-image: url(../images/icon-playvideo.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	cursor: pointer;
	opacity: 0.5;
	transition: all 0.3s;
	z-index: 1;
}

.video-wrapper .play-button:hover {
	opacity: 0.9;
}


/****** MEDIA QUERYS *******/
/****** XS HASTA MD *******/
/* @media (max-width: 1991px) { */
.navbar-collapse {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 300px;
	height: 100vh !important;
	left: -300px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 2;
	background-color: #fff;
	transition: all .25s ease;
}

.drawer-open .navbar-collapse {
	left: 0px;
	transition: all .25s ease;
}

.navbar-collapse.collapsing {
	height: 100vh !important;
}

body .fixed-top:before {
	content: '';
	width: 0vw;
	height: 200vh;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	opacity: 0;
	display: block;
	transition: all .25s ease;
}

body.drawer-open .fixed-top:before {
	width: 100vw;
	opacity: 1;
	transition: all .25s ease;
}

body.drawer-open {
	overflow-y: hidden;
}

#navPpal li {
	text-align: left;
}

#navPpal .rrss {
	margin-top: 1rem;
}

#navPpal .navbar-nav li>a {
	color: #142329;
}

/* } */

/****** SM *******/
@media (min-width: 576px) {
	.mapa {
		margin-left: 150px;
		margin-top: 50px;
	}

	.grid-portfolio .grid-pitem {
		width: 50%;
	}

	.grid-portfolio .thumbnail {
		padding: 14px;
	}
}

/****** MD *******/
@media (max-width: 768px) {
	.intro{
		height: 60vh;
	}
	.slickHome {
		height: 60vh;
	}
	.slickHome .slide {
		height: 60vh;
	}
}

@media (min-width: 768px) {

	.grid-sizer,
	.grid-item {
		width: 33.33333%;
	}

	.grid-item--width2 {
		width: 66.66666%;
	}

	.grid-item--width3 {
		width: 100%;
	}

	.intro-text {
		font-size: 2.4rem;
		line-height: 2.6rem;
		font-weight: 600;
	}

	.grid-home .grid-sizer,
	.grid-home .grid-home-item {
		width: 33.33333%;
	}

	.grid-home .grid-home-item-w2 {
		width: 66.66666%;
	}




}

/****** LG *******/
@media (min-width: 992px) {
	#navPpal .nav-link {
		margin: .5rem;
		margin-right: .5rem;
	}

	.mapa {
		margin-left: 100px;
		margin-top: 150px;
	}
}

/****** XL *******/
@media (min-width: 1200px) {
	#navPpal .nav-link {
		margin: 1rem;
	}

	.mapa {
		margin-left: 150px;
		margin-top: 50px;
	}

	.grid-item-inner__inner {
		position: absolute;
		top: 15px;
		left: 15px;
		width: calc(100% - 30px);
		height: calc(100% - 30px);
	}

}