/*Estilos Baffler*/

@font-face {
	font-family: "Montserrat-Regular";
	src: url("../fonts/Montserrat-Regular.ttf");
}

@font-face {
	font-family: "Montserrat-Bold";
	src: url("../fonts/Montserrat-Bold.ttf");
}

@font-face {
	font-family: "Montserrat-BoldItalic";
	src: url("../fonts/Montserrat-BoldItalic.ttf");
}

@font-face {
	font-family: "Montserrat-ExtraBold";
	src: url("../fonts/Montserrat-ExtraBold.ttf");
}

@font-face {
	font-family: "Montserrat-Light";
	src: url("../fonts/Montserrat-Light.ttf");
}

@font-face {
	font-family: "Montserrat-Medium";
	src: url("../fonts/Montserrat-Medium.ttf");
}

.navbar-custom {padding-top: 0;}

.navbar-left {padding-top: 1em;}

.navbar-custom .navbar-brand {
	padding: 0 10px;
    height: 100%;
}
.navbar-custom .navbar-brand .logo {
	max-height: 71px;
	margin-top: -1px;
}

.navbar-custom.top-nav-collapse .navbar-brand {padding-top: 10px;}

.navbar-custom.top-nav-collapse .navbar-brand .logodark {max-height: 40px;}

.navbar-custom.top-nav-collapse .navbar-left {padding-top: 0;}

.navbar-custom .nav li {position: relative;}

.navbar-custom .nav li a {
	padding: 0;
	margin: 21px 13px 15px;
}

.navbar-custom .nav li.active a,.navbar-custom .nav li.activo a {color: #fff !important;}

.navbar-custom.top-nav-collapse li.active a,.navbar-custom.top-nav-collapse li.activo a {color: #000 !important;}

.navbar-custom .nav li.active a:not(.btn):after,.navbar-custom .nav li.activo a:after {
    content: '';
    width: 100%;
    height: 3px;
    border-radius: 5px;
    position: absolute;
    left: 0;
    bottom: -5px;
	background: rgb(1,238,231);
    background: -moz-linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: -webkit-linear-gradient(
90deg
, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: linear-gradient(
90deg
, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01eee7",endColorstr="#01b1ef",GradientType=1);
}

.navbar-custom .nav li a.btn:hover {background-color: #f42b60;}

.navbar-custom .nav li a.btn.btn-red {
    margin: 12px 40px 10px 3px;
    padding: 5px 10px 5px;
    color: #fff !important;
}

/*Slider clientes*/
#slider-clientes {
    border-top: 24px #06d9e3 solid;
	padding: 3em 0;
}
/*.slick-slide img {
    margin: auto;
}*/

.slick-slide.img-slick{
	background-repeat:no-repeat;
	background-position:center;
	height:64px;
	filter: grayscale(100%);
	opacity:0.5;
}

.slick-slide.img-slick:hover{
	filter: none;
	opacity:1;
}

.intro .intro-body {
	padding: 0 1em;
	vertical-align: top;
}

.intro .intro-body h1,h3 {
	font-family: 'Montserrat-Light';
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
}

h3 {
	font-size: 32px;
	line-height: 1.5em;
}

.intro .intro-body h1 {
	line-height: normal;
    font-size: 34px;
	margin-top: 1em;
}

.intro .intro-body h1 span,h3 span,.classic {
	color: #06d9e3;
	text-transform: none;
}

.intro .intro-body h1 span {
    display: block;
	font-family: "Montserrat-Bold";
}

.intro .intro-body img {
	width: 100%;
	max-width: 600px;
}

#about {
	/*border-top: 24px #06d9e3 solid;*/
	border-top: none !important;
}

#carousel-light2 {margin-top: 0;}

#nosotros p,#about p,#mision p {
	font-family: 'Montserrat-Light';
    letter-spacing: normal;
    font-size: 16px;
    line-height: 2em;
}

#objetivos {
	padding-top: 8em;
	text-shadow: none;
}

#objetivos .overlay {background: #fff;}

#objetivos .container {color: #606060;}

#objetivos h3,#services h3 {margin-bottom: 0.5em;}

p.classic {
	font-size: 36px;
	line-height: normal;
}

svg {
    width: 110px;
    display: block;
    margin: 0 auto 1em;
}

#objetivos .col-lg-3 p {
    font-family: 'Montserrat-Light';
    letter-spacing: normal;
    max-width: 312px;
    font-size: 14px;
	margin: 0 auto 35px;
}

#objetivos .col-lg-3 h4:after,#caracteriza h4:after {
    content: '';
    display: block;
    height: 4px;
    border-radius: 4px;
    width: 4em;
    margin: 0.5em auto 0;
	background: rgb(1,238,231);
	background: -moz-linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
	background: linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01eee7",endColorstr="#01b1ef",GradientType=1);
}

#ondemand {
    padding-top: 0;
	padding-bottom: 8em !important;
}

#services {padding-top: 0;}

#services .bf-serv{margin-top: -1px;}

#services.bg-img4 {
	background: url("../img/header/baffler-servicios.jpg");
	background-size: cover;
}

#services .overlay,#numeros .overlay {background: rgb(7 9 21 / 82%);}

#services .overlay.bubbles,#numeros .overlay.bubbles {
	background: none;
	background-image: url("../img/bubbles.png");
	background-repeat: no-repeat;
    background-size: auto;
    height: 50%;
    background-position: top right;
}

#services .overlay.bubbles.bottom,#numeros .overlay.bubbles.bottom {
	top: auto;
    bottom: 0;
    background-position: bottom left;
    background-image: url(../img/bubbles-1.png);
}

#services .col-lg-3 p, #services .col-lg-4 p {
    font-family: 'Montserrat-Light';
    font-size: 14px;
    max-width: 338px;
    margin: 0 auto 35px;
}

#services h4 {
	font-family: "Montserrat-Medium";
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 16px;
	font-weight: normal;
}

#services h4 img {
    display: block;
    margin: auto;
	width: 70px;
}

#services h5 {
	font-family: 'Montserrat-Light';
    color: #06d9e3;
    font-size: 12px;
    text-transform: none;
    margin: auto;
    margin-bottom: 1em;
    line-height: normal;
    max-width: 130px;
}

#ondemand p {
	font-family: 'Montserrat-Light';
    font-size: 18px;
    letter-spacing: normal;
}

/*Gente*/

#gente.bg-img4 {
	background: url("../img/header/gente-baffler.webp");
	/*background-size: cover;*/
	padding-top: 25em;
	background-repeat: no-repeat;
    padding-bottom: 6em;
	/*min-height: 550px;
	background-position: center;*/
}

#gente .overlay {background: rgb(7 9 21 / 60%);}

#gente h3 {
	font-family: 'Montserrat-Medium';
    font-size: 48px;
	line-height: initial;
}

#gente p {
    font-family: 'Montserrat-Light';
    font-size: 20px;
    margin: 0 auto 35px;
	max-width: 720px;
}

.btn.btn-red {
	border: 2px solid #f52b60;
    background-color: #f52b60;
    color: #fff;
    border-radius: 4px !important;
    font-family: 'Montserrat-Medium';
	font-weight: normal;
    text-transform: none;
    font-size: 16px !important;
    letter-spacing: normal;
}

.bg-white {border: #fff;}

.portfolio-sorting.list-inline {margin-bottom: 1em;}

.portfolio-sorting.list-inline li a {
    font-family: 'Montserrat-Bold';
    color: #606060;
    letter-spacing: normal;
    line-height: normal;
}

#portfolio .items-p {
    min-height: 55px;
    max-width: 720px;
    margin: 0 auto 1em;
	font-family: 'Montserrat-Medium';
	letter-spacing: normal;
	color: #666;
}

#portfolio p.oculto {display: none;}

#portfolio .btn-red {margin: 0 auto 2em;}

#portfolio-img {
    position: fixed;
    display: none;
    align-items: center;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: #000000b5;
    padding: 0 3em;
    backdrop-filter: blur(5px);
    z-index: 99999;
}

.cont-portfolio-img {
	display: flex;
    width: 100%;
    height: 100%;
}

.cont-portfolio-img .content-portfolio-img {
	position: relative;
	margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.close-portfolio {
	width: auto;
    position: absolute;
    top: 1em;
    right: -30px;
    font-family: 'Montserrat-Light';
    cursor: pointer;
    font-size: 24px;
    line-height: normal;
    text-align: center;
    color: #fff;
}

.cont-portfolio-img .content-portfolio-img img {
    width: 100%;
    box-shadow: 6px 9px 14px 0px #1d1d1d;
    height: auto;
}

/*.portfolio-item img {
	min-width: 660px;
}*/

/*Nuevo portafolio*/

#grid {
    margin-bottom: 6em;
	margin-top: 2em;
}

#grid>div {
    padding: 0.5em !important;
}

/*.container-fluid {
    max-width: 1420px;
}*/

#grid.caso-grid .portfolio-item a{display: block;}

.header-portfolio {
    height: 90px;
    background: #01c2ed;
}

.navbar-custom.navbar-portfolio .nav li.activo a:after {
    background: #fff;
}

.portfolio-overlay {
	/*background: none repeat scroll 0 0 rgb(34 189 204 / 68%);*/
	/*background: none repeat scroll 0 0 rgb(255 255 255 / 50%);*/
	background: none;
}

.portfolio-item a:hover .portfolio-overlay .caption {
    background: #01c2ed;
    padding: 2em;width: 100%;
}

.portfolio-item a h5{
	font-weight: normal;
	font-size: 24px;
	color: #fff;
}

.portfolio-item a h5 + span {
	font-size: 34px;
    font-weight: 800;
	color: #fff;
}

.portfolio-item a h5 + span + p {
	color: #fff;
	font-size: 18px;
}

.ver-behance {
    margin: 6em auto 0;
    font-size: 1.5em;
}

#team img {
    max-width: 240px;
    width: 100%;
}

#team h2 {
	background: #fff;
	opacity: 1;
	margin-top: -20px !important;
}

#team h6 {
    font-family: 'Montserrat-Medium';
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
	font-size: 14px;
}

#team p.team,#caracteriza .col-lg-4 p {
    max-width: 845px;
    margin: 0 auto 35px;
    padding: 0 1em;
    font-family: 'Montserrat-Light';
    letter-spacing: normal;
    font-size: 16px;
    line-height: 2em;
}

#caracteriza h3,#clientes h3 {margin-bottom: 0.5em;}

#caracteriza .col-lg-4 p {line-height: 1.8em;}

#caracteriza h4 {margin-bottom: 1em;}

#slider-mockups {
    padding-top: 0;
	padding-bottom: 1em;
}

#slider-mockups .slick-slide.img-slick {
	height: 300px;
	opacity: 1;
	filter: none;
	background-size: cover;
}

#slider-mockups .slick-slide.img-slick a {
    height: 100%;
    display: block;
}

#numeros {
	display: none;
	padding: 2em 0;
}

#numeros.bg-img {background-image: url("../img/header/baffler-back.jpg");}

#numeros .overlay.bubbles {background-size: 120px;}

#numeros .numscroller {
    font-family: 'Montserrat-Medium';
    letter-spacing: normal;
}

#numeros h5 {
    font-family: 'Montserrat-Light';
    font-weight: normal;
    letter-spacing: inherit;
    text-transform: none;
}

#clientes {
	text-shadow: none;
	background: #fff;
	padding-top: 8em !important;
}

#clientes p.classic+p {
    margin-top: 2em;
    font-size: 16px;
    font-family: 'Montserrat-Light';
    line-height: 2em;
    letter-spacing: normal;
}

#clientes .col-lg-3, #clientes .col-lg-4 {padding: 40px 15px;}

#clientes img {width: 180px;}

#nosotros {
    display: none;
}

#nosotros .container {max-width: 796px;}

#nosotros img {
	width: 100%;
	margin-bottom: 4em;
}

#nosotros p+h2 {
	font-size: 20px;
    margin-bottom: 0;
    margin-top: 1em;
}

#mision .container {width: 100%;}

#mision .row .col-lg-5 {
    position: relative;
    padding-left: 8%;
    padding-right: 4em;
    margin-right: 4em;
}

#mision .row .col-lg-5:before {
    content: '';
    position: absolute;
    height: 55%;
    max-height: 164px;
    width: 100%;
    /*display: block;*/
	display: none;
    left: 0;
    border-radius: 0 200px 200px 0;
    z-index: -1;
    top: 0;
    background: rgb(1,238,231);
    background: -moz-linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: -webkit-linear-gradient( 
90deg
 , rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: linear-gradient( 
90deg
 , rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01eee7",endColorstr="#01b1ef",GradientType=1);
}

#mision .row .col-lg-5 h3 {
	display: none;
	padding-top: 20px;
    margin-bottom: 0;
    padding-bottom: 30px;
    color: #fff;
    line-height: normal;
}

#mision .row .col-lg-5 h3 span {
    color: #fff;
    font-family: 'Montserrat-Medium';
}

#mision .row .col-lg-5 p {margin-top: 1.5em;}

#mision #carousel-light2 {
	max-width: 440px;
	margin: auto;
}

#team {
    padding-top: 0;
    padding-bottom: 5em !important;
}

#team.team-baffler h3 {margin-bottom: 0;}

#team.team-baffler .col-md-12.col-sm-12 {margin-bottom: 6em;}

#team .col-md-2.col-sm-12 {margin: 3em 1.5% 0;}

#team.team-baffler .col-md-2.col-sm-12 h2 {
	font-size: 22px;
	margin-top: -15px !important;
}

#team.team-baffler .col-md-2.col-sm-12 h6 {font-size: 12px;}

#video-servicios {
	background: none;
	padding: 0;
	padding-bottom: 2em;
	padding-top: 10em;
}

#video-servicios .overlay {background: #fff;}

#video-servicios img {
	width: 100%;
	max-width: 768px;
	background: rgb(1,238,231);
    background: -moz-linear-gradient(90deg, rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: -webkit-linear-gradient( 
90deg
 , rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    background: linear-gradient( 
90deg
 , rgba(1,238,231,1) 0%, rgba(1,177,239,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#01eee7",endColorstr="#01b1ef",GradientType=1);
}

#video-servicios .container {margin-bottom: 2em;}

#video-servicios h3,#ondemand.servi h3 {margin-bottom: 0;}

#video-servicios ul.redes-mas {
    margin: 2em auto;
    height: 35px;
    padding: 0;
}

#video-servicios ul.redes-mas li {
    list-style: none;
    height: 100%;
    display: inline-block;
    min-width: 75px;
}

#video-servicios ul.redes-mas li a {
    width: 100%;
    height: 100%;
    display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: none;
	margin: 0;
}

#video-servicios ul.redes-mas li a.fb {background-image: url("../img/misc/fb-serv.svg");}
#video-servicios ul.redes-mas li a.ig {background-image: url("../img/misc/ig-serv.svg");}
#video-servicios ul.redes-mas li a.in {background-image: url("../img/misc/in-serv.svg");}
#video-servicios ul.redes-mas li a.vi {background-image: url("../img/misc/vimeo-serv.svg");}
#video-servicios ul.redes-mas li a.be {background-image: url("../img/misc/be-serv.svg");}

#video-servicios ul.redes-mas li a.fb:hover {background-image: url("../img/misc/fb-serv-h.svg");}
#video-servicios ul.redes-mas li a.ig:hover {background-image: url("../img/misc/ig-serv-h.svg");}
#video-servicios ul.redes-mas li a.in:hover {background-image: url("../img/misc/in-serv-h.svg");}
#video-servicios ul.redes-mas li a.vi:hover {background-image: url("../img/misc/vimeo-serv-h.svg");}
#video-servicios ul.redes-mas li a.be:hover {background-image: url("../img/misc/be-serv-h.svg");}

#video-servicios p.classic {
    margin: 0 auto;
    font-size: 32px;
    letter-spacing: normal;
    max-width: 400px;
}

#ondemand.servi p.classic {
	font-family: 'Caveat';
	margin-bottom: 1.5em;
    font-size: 28px;
}

#contact h3, #contact p,#contact h5 {font-family: 'Montserrat-Light';}

#contact p {font-size: 16px;}

#contact h5 {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}

#contact a {height: 100%;}

#contact h5 img {
	width: 30px;
    margin-right: 5px;
}

#contact .col-md-5:last-child h3 {
    color: #f52b60;
    font-family: 'Montserrat-Bold';
}

#contact form .btn {
    background-color: #06d9e3;
    border: 2px solid #06d9e3;
    border-radius: 4px !important;
    font-family: 'Montserrat-Medium';
	font-weight: normal;
    text-transform: none;
    font-size: 16px !important;
    letter-spacing: normal;
	color: #fff;
}

#contact form .form-group {margin-bottom: 2em;}

#contact form .form-control {border-radius: 4px !important;}

#mensaje {
    background-color: transparent;
  }

#mensaje::placeholder {
    color:#acacac;
  }

footer {
	background: #000;
	border-top: 1em #06dfe9 solid;
}

footer .container {width: 100%;}

footer .col-sm-12:nth-child(2n) {padding-bottom: 1em;}

footer .col-sm-12:nth-child(2n) a {color: #fff;}

footer .col-sm-12:nth-child(2n) img {
    width: 30px;
	margin: 1em;
}

footer .col-sm-12:last-child {background: #fff;}

footer p {
    opacity: 1;
    margin: 0;
    padding: 1em 0;
    color: #000;
}

@media (max-width: 1199px) {
	#mision .row .col-lg-5{
		margin-right: 0;
	}
	
	#mision .row .col-lg-5 p {
		text-align: center;
	}
}

@media (max-width: 1024px) {

	#ondemand {text-align: center;}
}

@media (max-width: 990px) {
	
	.navbar-collapse {
		background-color: #fff !important;
		padding: 0 2em;
		border-top: none;
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
	}
	.navbar-collapse ul {
		padding-top: 0;
		margin: 0;
		text-align: center;
	}
	.navbar-custom .navbar-collapse ul.nav li.active a:not(.btn), .navbar-custom .navbar-collapse ul.nav li.activo a {color: #06d9e3 !important;}
	.navbar-custom .nav li a.btn.btn-red {
		margin: 12px auto 10px;
		max-width: 200px;
	}
	.navbar-custom .nav li.active a, .navbar-custom .nav li.activo a {
		color: #000 !important;
	}
	.navbar-custom .nav li.active a:after, .navbar-custom .nav li.activo a:after {display: none;}
}

@media (max-width: 768px) {
	.navbar-custom .navbar-brand .logo {max-height: 40px;}
	.navbar-custom.top-nav-collapse .navbar-brand {padding-top: 8px;}
	section#ondemand {text-align: center;}
}

@media (max-width: 540px) {
	#mision .row .col-lg-5:before {max-height: 100%;}
	#video-servicios ul.redes-mas li {min-width: 50px;}
	footer .col-sm-12:nth-child(2n) a {
		width: 100%;
		display: block;
		margin: 0.6em 0;
	}
}