html, body{padding:0;margin:0;width: 100%;height: 100%;font-family: 'DIN';color: #2f2727;}
*{box-sizing: border-box;}
.anima{transition: all 1.5s cubic-bezier(.165,.84,.44,1);}
.hideme{opacity: 0;}
.delay1{transition-delay: .1s}
.delay2{transition-delay: .2s}
.delay3{transition-delay: .3s}
.delay4{transition-delay: .4s}
.delay5{transition-delay: .5s}
.delay6{transition-delay: .6s}
.g-recaptcha{opacity: 0;transition: all 3s cubic-bezier(.165,.84,.44,1);}
.wp {
    width: 100%;
    padding: 0 15px;
    max-width: 1360px;
    position: relative;
    margin: auto;
    z-index: 2;
}
.wp-small {
    width: 100%;
    padding: 0 15px;
    max-width: 960px;
    position: relative;
    margin: auto;
    z-index: 2;
}
img{display: block;}
img.diag{width: 100%;}
p{font-size: 26px;line-height: 1.15;font-weight: 500}
a{color: inherit;}

h1,h2,h3,h4, h5{text-transform: uppercase;font-weight: bold;}
/*HEADER*/
header{padding: 38px 0 30px;}
header img{max-width: 220px;display: block;}
header img.hideme{transform: translateY(-60px);}
header #burger{
	width: 36px;
	padding: 5px 0 5px 10px;
	position: relative;
	cursor: pointer;
}
header #burger i{width: 100%;height: 3px;background: #000;margin:4px 0;display: block;transition: ease-out 0.3s;position: relative;left:0;}

header nav{
	display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 8;
    background: rgba(0,0,0,0.9);
}
header nav ul{
	position: absolute;
	top:100px;
	color:#FFF;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 700;
	letter-spacing: .1em
}
header nav ul li ul{
	font-size: 14px;
	text-transform: initial;
	font-weight: 400;
	position: static;
	transform: translateX(0%);
	padding-top: 25px;
}
header nav ul li ul > li a{padding:8px 0;display: block;color: #fff;}
header nav ul li > img{width: 185px;margin: 20px 0;}
/*SECTION*/
section{display: flex;justify-content: center;flex-wrap: wrap;padding: 30px 0;position: relative;}
article{width: 50%;}

section#hero{overflow:hidden; }
section#hero article,
section#solutions article{max-width: 683px;padding: 20px}

section#hero article > img{
	position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: 140%;
}
section#hero article h1{font-size: 46px;line-height: 1.1;margin-top: 50px;}
section#hero article h1.hideme{transform: translateX(-20px);}
section#hero article > img.hideme{transform: translateX(-45%);}

section#solutions{padding-bottom: 0;}
section#solutions article{padding-left: 70px;position: relative;}
section#solutions article > img{position: absolute;width: 50px;left: 10px;}
section#solutions article h2{font-size: 33px;margin-bottom: 30px;}
section#solutions article h3{font-size: 26px;margin: 20px auto;}
section#solutions .tit-totem{max-width: 400px;width: 100%;display: block;margin: auto;margin-bottom: 40px;}
section#solutions .imagen_totem{width: 100%;height: 570px;background-image: url(../img/postpandemia.jpg);background-size: cover;background-position: top center}

section#solutions article > img.hideme,
section#solutions article h2.hideme,
section#solutions article h3.hideme,
section#solutions article p.hideme{transform: translateY(20px);}


section#catalogo{padding-bottom: 70px;padding-top: 70px;background-color: #292632;flex-direction: column;align-items: center;}
section#catalogo article > img{max-width: 100%;}
section#catalogo article:last-child{background-color: #eeeeee;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;padding: 20px;padding-left: 70px;}
section#catalogo article:last-child > *{width: 100%; max-width: 500px;}
section#catalogo article h2{font-size: 42px;margin-bottom: 30px;line-height: 1.15;}
section#catalogo article p{font-size: 22px;}
section#catalogo h2{font-size: 24px;margin-bottom: 30px;line-height: 1.15;color: #fff;}
section#catalogo .video-totem{width: 100%;padding-top: 56.25%;position: relative;}
section#catalogo .video-totem iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
section#catalogo .icons-totem{display: block;width: 100%;margin-top: 40px;}

section#catalogo article > img.hideme{transform: translateX(-30px);}
section#catalogo article h2.hideme,
section#catalogo article p.hideme{transform: translateY(20px);}

section#marketing{background: #1b1b1b;color: #FFF;flex-direction: column;justify-content: center;align-items: center;}
section#marketing h2{font-size: 42px;margin:80px 0;}
section#marketing .items{font-size: 25px;height: 120px;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;position: absolute;}
section#marketing .items.tops{top: 300px;}
section#marketing .items.foos{top: 560px;}
section#marketing .items.i01{transform: translateX(-400px);min-width: 230px;}
section#marketing .items.i02{transform: translateX(400px);min-width: 205px;}
section#marketing .items h5{margin-bottom: 20px;}

section#marketing h2.hideme{transform: translateY(30px);}
section#marketing .items.tops.hideme{top: 330px;}
section#marketing .items.foos.hideme{top: 590px;}

section#camaras{background-color: #ffdc64;align-items: center;}
section#camaras > img{width: 40%;max-width: 680px;}
section#camaras h2{font-size: 60px;margin-bottom: 40px;}
section#camaras .copy{padding: 20px 70px;}

section#camaras > img.hideme{transform: translateX(30px);}
section#camaras h2.hideme,
section#camaras p.hideme{transform: translateX(-30px);}

section#web{
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 23%, #ffffff 23%, #f0f0f0 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 23%,#ffffff 23%,#f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 23%,#ffffff 23%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding-bottom: 5px;
	border-bottom: 60px solid #f6b65d;
	align-items: center;
}
section#web article{margin-bottom: 70px;}
section#web article > img{max-width: 100%;}
section#web article:first-child{display: flex;align-items: center;justify-content: flex-end;}
section#web article .copy{max-width: 520px;padding: 20px 60px}
section#web article .copy h3{font-size: 40px;margin-bottom: 40px;}
section#web article .copy h4{font-size: 26px;margin-bottom: 40px;}
section#web article .copy p{font-size: 22px;line-height: 1.5}

section#web img.hideme{transform: translateY(30px);}
section#web h3.hideme,
section#web h4.hideme,
section#web p.hideme{transform: translateX(-30px);}

section#negocios{padding-top: 0;border-top: 60px solid #553293;}
section#negocios img{position: relative;top:-2px;max-width: 520px;margin-right: 70px;max-width: calc(50% - 70px)}
section#negocios .copy{display: flex;align-items: flex-start;justify-content: flex-end;flex-direction: column;padding:0 20px 40px 70px;max-width:600px;width:50%;}
section#negocios .copy h2{font-size: 60px;margin-bottom: 40px;}

section#negocios img.hideme{transform: translateY(-20px);}
section#negocios h2.hideme,
section#negocios p.hideme{transform: translateY(30px);}

section#contenidos{padding-top: 200px}
section#contenidos .wp h2{font-size: 60px;text-align: center;font-weight: bold}
section#contenidos .wp .texto{border: #000 solid;border-width: 6px 0;padding:30px 0;margin: 40px 0;text-align: center;}
section#contenidos .wp .texto p{font-size: 30px;padding: 26px 0;}
section#contenidos .wp-icons{display: flex;align-items: flex-start;justify-content: center;width: 100%;padding: 20px;max-width: 1500px;margin-top: 30px;}
section#contenidos .wp-icons .icons{width: 16.66%;text-align: center;padding: 0 10px;}
section#contenidos .wp-icons .icons p{font-size: 18px;font-weight: 400;text-transform: uppercase;}
section#contenidos .wp-icons .icons .ico{width: 90%;padding-bottom: 90%;background-color: #313131;margin: auto;margin-bottom: 30px;position: relative;border-radius: 100%;}
section#contenidos .wp-icons .icons .ico img{position: absolute;max-width: 60%;top:50%;left: 50%;transform: translate(-50%, -50%);max-height: 70%;}
section#contenidos .wp-icons .icons .ico.i05 img{max-height: 105%;top: 35%}

section#contenidos .wp h2.hideme,
section#contenidos .wp .texto.hideme,
section#contenidos .wp-icons .icons.hideme{transform: translateY(20px);}

@media (max-width: 1300px) {
	p{font-size: 20px;}
	section#hero article h1{font-size: 34px;}
	section#solutions article h2{font-size: 28px;}
	section#catalogo article h2, section#marketing h2, section#web article .copy h3{font-size: 30px;}
	section#catalogo article p, section#web article .copy p{font-size: 18px;}
	section#marketing .items, section#web article .copy h4, section#contenidos .wp .texto p{font-size: 22px;}
	section#marketing .items.i02{transform: translateX(360px);}
	section#marketing .items.i01 {transform: translateX(-330px);}
	section#camaras h2, section#negocios .copy h2, section#contenidos .wp h2{font-size: 50px;}
	section#contenidos .wp-icons .icons p{font-size: 16px;}
	section#contenidos{padding-top: 150px;}
}
@media (max-width: 900px) {
	header{padding: 20px 0;}
	header img{width: 140px;}
	section{flex-direction: column;}
	article{width: 100%;}
	section#hero article h1{margin-top: 0}
	section#catalogo{padding-top: 0;flex-direction: column-reverse;}
	section#catalogo article{min-height: 240px;}
	section#marketing{flex-direction: row;align-items: flex-start;}
	section#marketing > img{max-width: 60%;}
	section#marketing .items{width: auto;height: auto;padding:15px;position: static;width: 50%;align-items: center;text-align: center;}
	section#marketing .items.i02{transform: translateX(0);}
	section#marketing .items.i01 {transform: translateX(0);}
	section#marketing .items.i02{right: 0;min-width: 0;}
	section#marketing .items.i01 {left: 0;min-width: 0;}
	section#marketing .items.foos{top: 0;}


	p{font-size: 16px;}
	section#hero article h1{font-size: 28px;}
	section#solutions article h2{font-size: 20px;}
	section#catalogo article h2, section#marketing h2, section#web article .copy h3{font-size: 22px;}
	section#catalogo article p, section#web article .copy p{font-size: 14px;}
	section#marketing .items, section#web article .copy h4, section#contenidos .wp .texto p, section#solutions article h3{font-size: 16px;}
	section#camaras h2, section#negocios .copy h2, section#contenidos .wp h2{font-size: 30px;}
	section#contenidos .wp-icons .icons p{font-size: 16px;}
	section#camaras{padding: 15px 0;}
	section#camaras .copy{padding: 0 20px;width: 100%;text-align: center;}
	section#camaras > img{width: 60%;margin-top: 30px;}
	section#web{border-bottom-width: 30px;}
	section#negocios{border-top-width: 30px;align-items: center;}
	section#negocios img{margin: 0;margin-bottom: 30px;max-width: 60%;}
	section#negocios .copy{text-align: center;width: 100%;padding: 20px;}
	section#contenidos{padding-top: 20px;padding-bottom: 1px;}
	section#contenidos .wp .texto{padding: 20px 0;margin:30px auto;}
	section#contenidos .wp .texto p{padding: 20px 0;}
	section#contenidos .wp-icons{margin-top: 0;flex-wrap: wrap;}
	section#contenidos .wp-icons .icons{width: 50%;padding: 10px;margin-bottom: 20px;}
}
/*FOOTER*/
footer{
	background-color: #000;
	padding-top: 80px;
}
footer h2{letter-spacing: .15em}
footer .title{
	display: flex;
	align-items: flex-end;
	text-transform: uppercase;
	color:#FFF;font-size: 30px;
	letter-spacing: .1em;
	margin-bottom: 50px;
	padding: 0 50px;
}
footer .title .ico svg{width: 100%;}
footer .title .ico{width: 100px;margin-right: 35px;color:#FFF;}

footer .title .ico .line{
	animation-duration: 1.5s;
  	animation-name: zoom;
  	animation-iteration-count: infinite;
	animation-direction: alternate;
}
footer .title .ico .line.l1{animation-delay: .3s}
footer .title .ico .line.l3{animation-delay: .6s}
footer form{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items:flex-start;
	padding: 0 25px;
	position: relative;
}
footer form .mensaje{
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	z-index: 1;
	text-align: center;
	font-size: 27px;
	color: #FFF;
	line-height: 1.2;
	display: none;
}
footer form .mensaje .msj{
	position: absolute;
	left: 50%;top: 50%;
	transform: translate(-50%,-50%);
	max-width: 330px;
}
footer form .boxMid{
	width: 50%;
	padding: 0 25px;
	position: relative;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap
}
footer form .boxMid .select{
	position: relative;width: 100%;
	cursor: pointer;
}
footer form .boxMid .select:after{
	content: '';
	width: 10px;
	height: 10px;
	border:#FFF solid;
	border-width: 2px 2px 0 0;
	position: absolute;
	right: 20px;
	top:20px;
	transform: rotate(135deg); 
	transition:ease-out 0.3s;
}
footer form .boxMid .select > input{cursor: pointer;transition:ease-out 0.3s;}
footer form .boxMid .select ul{
	width: 100%;
	padding: 20px 0;
	background-color: #FFF;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .12em;
	position: absolute;
	top:50px;
	width: 100%;
	display: none;
	z-index: 9;
}
footer form .boxMid .select ul li{line-height: 30px;transition:ease-out 0.3s;padding: 0 20px}
footer form .boxMid .select.open{background-color: #FFF}
footer form .boxMid .select.open input{color: #000;padding-left: 10px}
footer form .boxMid .select.open:after{border-color: #000;transform: rotate(-45deg); }

footer form .boxMid .select ul li:hover{background-color: #000;color:#FFF;}
footer form input[name="nos_conocio"]{pointer-events: none;}
footer form input,
footer form textarea,
footer form select{
	-webkit-appearance:none;
	-moz-appearance:none;
	border-radius: 0;
	padding: 0;
	background:none;
	border:0;
	height: 50px;
	outline: none;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	color:#FFF;
	font-size: 16px;
	font-family: 'DIN';
	font-weight: 500;
	border-bottom: 1px solid #777777;
	letter-spacing: .12em
}
footer form textarea{
	padding: 20px;
	border:1px solid #777777;
	resize: none;
	height: 190px;
}
footer form input.error,
footer form textarea.error,
footer form select.error{border-color: #f10000 !important }
footer h3{color: #FFF;font-size: 2em;text-align: center;}
footer form button{
	display: block;
	-webkit-appearance:none;
	-moz-appearance:none;
	border-radius: 0;
	padding: 0;
	background:none;
	border:0;
	cursor: pointer;
	width: 170px;
	line-height: 50px;
	font-size: 14px;
	text-transform: uppercase;
	color: #000;
	font-weight: 500;
	font-family: 'DIN';
	background-color: #FFF;
	outline: none;
	transition: ease-out .5s;
	height: 50px;
    margin-top: 13px;
}
footer form button:hover{
	background-color: #c44927
}
input::placeholder,
textarea::placeholder { 
    color: #FFF;
    opacity: 1;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder  { 
    color: #FFF;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #FFF;
}
footer .coete{
	position: absolute;
	right: 50px;
	top:-20px;
	animation-direction: alternate;
	animation-duration: 6s;
	animation-name: move;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
footer .office{
	padding-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
footer .office h4{font-size: 16px;color:#a2a2a2;font-weight: 300;margin-bottom: 20px;width: 100%;letter-spacing: .12em}
footer .office .country{
	width: 25%;
	padding-top: 15%;
	background-position: center;
	background-size: cover;
	position: relative;
}
footer .office .country span{
	color: #FFF;
	font-weight: 500;
	width: 100%;
	position: absolute;
	top:50%;
	text-align: center;
	margin-top: -5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	transition: ease-out 2s;
}
footer .office .country.hideme span{transform: translateY(15px);}
footer .office .country:nth-child(3){transition-delay: .3s}
footer .office .country:nth-child(3) span{transition-delay: .6s}
footer .office .country:nth-child(4){transition-delay: .6s}
footer .office .country:nth-child(4) span{transition-delay: .9s}
footer .office .country:nth-child(5){transition-delay: .9s}
footer .office .country:nth-child(5) span{transition-delay: 1.2s}

footer .wp.foo{
	display: flex;
	height: 120px;
	justify-content: space-between;
	color: #FFF;
	font-size: 14px;
	font-weight: 300;
	align-items: center;
	text-transform: uppercase;
	letter-spacing: .1em;
    flex-wrap: wrap;
    align-content: center;
}
footer .wp.foo small{width: 90%;position: absolute;font-size: 8px;bottom: 10px;opacity: .8}
footer .wp.foo li{display: inline-block;margin-right: 10px}
footer .wp.foo .copy{display: flex;align-items: flex-end;}
footer .wp.foo .copy > img{margin-right: 20px;position: relative;top:4px;}

@keyframes move {
  0%{
    transform: translate(-15px,-25px);
  }
  20% {
    transform: translate(0px,-20px);
  }
  40% {
    transform: translate(15px,-15px);
  }
  60% {    
    transform: translate(0px;15px);
  }
  80% {    
    transform: translate(15px,20px);
  }
  100% {    
    transform: translate(0px,0px);
  }
}
@media (max-width: 800px) {
	footer{padding-top: 40px}
	footer .coete{display: none;}
	footer .title{padding: 0;font-size: 20px}
	footer form{flex-wrap: wrap;padding: 0}
	footer form .boxMid{width: 100%;padding: 0}
	footer form button{width: 100%}
	footer .office h4{text-align: center;}
	footer .office .country{width: 50%;padding-top: 30%;}
	footer .wp.foo{justify-content: center;height: 200px;flex-wrap: wrap}
	footer .wp.foo .copy > img{margin:20px 0 10px;}
	footer .wp.foo .copy{flex-direction: column;width: 100%;align-items: center;}
	footer .wp.foo small{position: static;padding-top: 15px;text-align: center;}
}