html, body{padding:0;margin:0;width: 100%;height: 100%;font-family: 'Cera Pro';font-weight: 400}
*{box-sizing:border-box;}
a{color: inherit;}
section{position: relative;}
.wp{width: 100%;max-width: 1366px;margin: 0 auto;padding: 0 20px;position: relative;}
.mid{width: 49%;position: relative;z-index: 1}
.divDotted {
  position: relative;
  height: 250px;
  width: 250px;
  overflow: hidden;
}
.divDotted img{display: block;width: 100%;}
.hideme{opacity: 0}
.anima {
    transition: opacity 1s, transform 1.2s cubic-bezier(.165,.84,.44,1);
    will-change: transform, opacity;
}
.delay02{transition-delay:.2s }
.delay04{transition-delay:.4s }
.delay06{transition-delay:.6s }
.delay08{transition-delay:.8s }
.delay10{transition-delay:1s }
header{
	position: absolute;
	top: 0;left: 0;
	z-index: 99;
	width: 100%;
	padding-top: 40px;
}
header .wp, header .wp ul{display: flex;align-items: center;justify-content: space-between;color: #FFF;font-size: 15px;}
header ul a.bt{color: #1c5afb;line-height: 43px;width: 168px;border-radius: 22px;background-color: #FFF;display: block;text-align: center;margin-left: 20px;transition: ease-out 0.3s;}
header ul li{margin-left: 36px;font-weight: 500}
header ul li a{position: relative;}
header ul li a:not(.bt):after{
	content: '';
	width: 0;height: 2px;
	position: absolute;
	top:140%;left: 0;
	background-color: #FFF;
	transition: ease-out 0.3s;
}
header ul li a:hover:after{width: 100%;}
header img{max-width: 132.5px;display: block;}
header ul a.bt:hover{color: #FFF;background-color: #1c5afb}
header.hideme{transform: translateY(-100%);}
/*HERO*/
#hero{
	/*background-color: #062cfa;
	background-image: url(../img/hero.jpg);*/
	background-color: rgba(0,39,249,.8);
	background-size: cover;
	background-position: top center;
	background-blend-mode: overlay;
	position: relative;
	height: 90vh;
}
#hero .wpVideo{position: absolute;width: 100%;height: 100%;top: 0;z-index: -1;display: flex;align-items: center;overflow: hidden;}
#hero .wp{height: 100%;display: flex;align-items: center;}
#hero h1{font-size: 47px;color: #FFF;line-height: 1.2;font-weight: bold;max-width: 410px;letter-spacing: -2.5px}
#hero .copy p{font-size: 19px;color: #FFF;font-weight: 500;display: flex;align-items: center;margin-top: 30px;}
#hero .copy p:after{
	content: '';
	display: block;
	width: 94px;
  	height: 2px;
  	margin-left: 16px;
  	background-color: #fe8766;
  	transition: ease-out 0.3s;
}
#hero .copy p:hover:after{width: 126px}
#hero .divDotted{
	position: absolute;
	right: 0%;top:40%;
	width: 125px;
	opacity: .2
}
#hero .clients{
	position: absolute;
	bottom:-70px;right: 0;
	height: 140px;
	width: calc(50vw + 683px);
	background-color: #FFF;
	border-radius: 80px 0 0 80px;
	box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.16);
	padding: 0 20px;
	display: flex;
	align-items: center;
	font-size: 18px;
	font-weight: 500;
	color: #404040;
	overflow:hidden;
}
#hero .clients > p{margin:0 60px;white-space: nowrap;}
#hero .clients img{display: block;max-width: 120px;max-height: 40px;width: auto;margin: auto;filter: grayscale(1);}
#hero .clients .owl-carousel .owl-stage{display: flex;align-items: center;}
#hero .clients:after{
	content: '';
	background: linear-gradient(267deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 70%);
    height: 100%;
    width: 80px;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 286px;
}

#hero .copy h1.hideme,
#hero .copy p.hideme,
#hero .clients.hideme{transform: translateY(30px);}

.section{min-height: 100vh;padding: 70px 0;display: flex;align-items: center;position: relative;}
.section h3{ 
  font-size: 33px;
  font-weight: bold;
  line-height: 1.12;
  letter-spacing: -1.32px;
  color: #062cfa;
}
.section h4{
  font-size: 20px;
  line-height: 1.45;
  color: #000000;
  font-weight: 400;
  margin: 30px 0;
}
.section h4 strong{
	font-weight: bold;
  	color: #062cfa;
}
.section p{
	font-size: 16px;
	font-weight: normal;
	line-height: 1.44;
	letter-spacing: -0.32px;
	color: #404040;
}
.section .circle{position: absolute;z-index: 0;border-radius: 100%;}
#block01.section{overflow: hidden;min-height: 960px}
#block01 .wp{height: 100%;}
#block01 .mid{max-width: 544px}
#block01 .rotate{ 
	width: 178px;
	height: 46px;
	font-size: 23px;
	font-weight: bold;
	color: #062cfa;
	position: relative;
	border-bottom: 3px solid #062cfa;
	padding:10px;
	margin-top: 40px;
}

#block01 .rotate strong{
  position: absolute;
  white-space: nowrap;
  left: 0px;
  width: 100%;
  text-align: center;
  top: 10px;
  opacity: 0;
}
#block01 .rotate .tit1{animation: 8s slideUp 0s infinite}
#block01 .rotate .tit2{animation: 8s slideUp 2s infinite;}
#block01 .rotate .tit3{animation: 8s slideUp 4s infinite;}
#block01 .rotate .tit4{animation: 8s slideUp 6s infinite;}
.tit5{animation: 14s slideUp 8s infinite;}
.tit6{animation: 14s slideUp 10s infinite;}
.tit7{animation: 14s slideUp 12s infinite;}

#block01 .rotate.hideme,
#block01 h3.hideme,
#block01 h4.hideme,
#block01 p.hideme,
#block01 .divDotted.hideme{transform: translateY(30px);opacity: 0}
#block01 .image-circle.hideme,
#block01 .circle.hideme{transform: scale(.3);}

@keyframes slideUp {
	0%{
	  opacity: 0;
	  top: -10px;
	}
	14%{
	  opacity: 1;
	  top: 10px;
	}
	26%{
	  opacity: 1;
	  top: 10px;
	}
	33.33%{
	  opacity: 0;
	  top: 20px;
	}
}

#block01 .image-circle{z-index:1;width: 80vh;padding-top:80vh;background-size: auto 120%;position: absolute;right: -20px;border-radius: 100%;background-repeat: no-repeat;background-position: top center}
@media (min-width: 1650px) {
	#block01 .image-circle{width: 700px;padding-top:700px;}
}
#block01 .divDotted{
	position: absolute;
	right: 30%;top: 60%;
	opacity: .3
}
#block01 .circle.blue{width: 188px;height: 188px;background-color: #062cfa;z-index: 3;top: 60%;right: 30%}
#block01 .circle.orange{width: 80px;height: 80px;background-color: #fe8766;top:-10%;left:-3%}

h2{font-size: 47px;letter-spacing: -1.88px;}
h2 strong{color: #062cfa;display: block;}
#block02 h2{margin-bottom: 32px}
#block02 .image{width: 45%;position: relative;left: -10%;z-index: 2}
#block02 .image img{display: block;width: 100%;filter: drop-shadow(10px 0 20px rgba(0,0,0,0.16));}
#block02 .contentTabs{max-width: 550px;}
#block02 .contentTabs .navtabs .after{width: 132px}
#block02 .circle.grey{background-color: #f9f9f9;right: 60%;top: 0;width: 430px;height: 430px;z-index: -1;}
#block02 .divDotted{
	position: absolute;
	top:12%;height: 125px;
	right: 60%;
}
#block02 .image img.hideme{transform: translateX(-80px);}
#block02 h2.hideme,
#block02 .tabs.hideme,
#block02 .maintabs.hideme,
#block02 .divDotted{transform: translateY(30px);}
#block02 .circle.hideme{transform: scale(.3);}

#block03{max-height: 800px;min-height:auto; }
#block03 .wp{display: flex;align-items: center;justify-content: center;}
#block03 h2{margin-bottom: 32px}
#block03 .wp .image{position: relative;width: 430px;z-index: 1}
#block03 .wp .image:before{content: '';position: absolute;width: 100%;padding-top: 100%;border-radius: 100%;background-color: #fe8766;top:50%;transform: translateY(-50%);transition: ease-out .5s;transform-origin: center; }
#block03 .wp .image img{display: block;width: 235px;margin: auto;position: relative;z-index: 1;filter: drop-shadow(10px 0 20px rgba(0,0,0,0.16));}
#block03 .wp .mid .contentTabs{max-width: 490px;}
#block03 .divDotted{
	position: absolute;
	top:-10%;
	right: 30%;
}
#block03 h2.hideme,
#block03 .tabs.hideme,
#block03 .maintabs.hideme,
#block03 .divDotted,
#block03 .image img.hideme{transform: translateY(30px);}
#block03 .image.hideme:before{transform: scale(.6) translateY(-50%);}

#block04 .wp{display: flex;align-items: flex-start;}
#block04 .image{height: 100vh;display: flex;align-items: center;}
#block04 .space{height: 30vh}
#block04 .texto{max-width: 440px;padding: 60px 0;opacity: .3;transition: ease-out .3s}
#block04 .texto.show{opacity: 1}
#block04 .texto h2{margin-bottom: 30px;}
#block04 .appslide{
	width: 260px;
	height: 458px;
	border-radius: 26px;
	overflow: hidden;
	position: relative;
	background-blend-mode: overlay;
	background-position: center;
	margin: auto;
	box-shadow: 0 24px 40px rgba(6,2,250,0.6);
	color: #062cfa;
}
#block04 .appslide:after{
	content: '';
	position: absolute;
	background-color: #062cfa;
	width: 100%;height: 100%;
	opacity: .7;
	z-index: 1;
	border-radius: 26px;
}
#block04 .appslide img{position: absolute;top:40%;left: 50%;transform: translate(-50%,-50%);opacity: 0;transition: ease-out 0.3s;}
#block04 .appslide img.img-1, #block04 .appslide img.img-2, #block04 .appslide img.img-3{height: 100%;z-index: 0;}
#block04 .appslide img.ico-1, #block04 .appslide img.ico-2, #block04 .appslide img.ico-3{z-index: 2;max-width: 76px;}

#block04 .appslide.case-1 img.img-1{top:50%;opacity: 1}
#block04 .appslide.case-1 img.ico-1{transition-delay:.2s;top:50%;opacity: 1}
#block04 .appslide.case-2 img.img-2{top:50%;opacity: 1}
#block04 .appslide.case-2 img.ico-2{transition-delay:.2s;top:50%;opacity: 1}
#block04 .appslide.case-3 img.img-3{top:50%;opacity: 1}
#block04 .appslide.case-3 img.ico-3{transition-delay:.2s;top:50%;opacity: 1}

#block04 .divDotted{
	position: absolute;
	top:7%;
	left:5%;opacity: 1;
	z-index: -1
}
#block04 .circle.orange{width: 180px;height: 180px;background-color: #fe8766;top:6%;left:50%;z-index: -1}
@media (min-width: 1550px) {
	#block04 .divDotted{top:14%;}
	#block04 .circle.orange{top: 12%}
}
#block04 .circle.hideme{transform: scale(.3);}

#block05{ background-color: #fafafa;}
#block05 .owl-stage-outer{padding: 50px 0;}
#block05 .item{
	background-color: #FFF;
	width: 60vw;
  	height: 340px;
  	border-radius: 30px;
	padding: 30px;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-end;
	transform: scale(0.9);
	opacity: 0.6;
	transition: ease-out 0.6s
}
#block05 .owl-item.active.center .item {box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.03);transform: scale(1);opacity: 1}
#block05 .item img{max-width: 160px;display: block;margin: 25px 0 15px}
#block05 .item p{max-width: 560px;text-align: center;}
#block05 .item small{color: #7c7c7c;font-size: 13px;}

#block06{background-color: #062cfa;padding: 0;min-height: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;padding-bottom: 80px;}
#block06 > img.dash{max-width: 493px;position: relative;top: -130px;z-index: 1}
#block06 h2{color: #fff;}
#block06 form .flex{display: flex;align-items: center;margin-top: 40px;height: 46px;border-radius: 24px;background: #FFF;max-width: 510px;padding: 0 16px;width: 100%}
#block06 form input{
	-webkit-appearance:none;
	-moz-appearance:none;
	outline: none;
	background: transparent;
	border:none;
	height: 100%;
	font-family: 'Cera Pro';
	font-size: 15px;
	text-align: center;
	width: 33.33%
}
#block06 form button,
#block06 a.btn-blog{
	display: block;
	margin:40px auto 0;  
	width: 212px;
	height: 48px;
	border-radius: 26px;
	background-color: #fe8766;
	text-align: center;
	font-family: 'Cera Pro';
	font-size: 15px;
	color: #FFF;
	border:0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance:none;
	-moz-appearance:none;
	outline: none;
	transition: ease-out 0.3s;
}
#block06 form button:hover,
#block06 a.btn-blog:hover{
	background-color:#FFF;
	color: #062cfa;
}
#block06 a.btn-blog{line-height: 48px;}
#block06 .divDotted{
	position: absolute;
	top:-5%;
	left:55%;
	filter: contrast(1);
	background-color: transparent;	
}
#block06 .divDotted:before{background: radial-gradient(#ffffff, #ffffff 15%, transparent 10%, transparent 100%) 0 0/1.4em 1.4em transparent;}
#block06 .circle.orange{
  width: 78px;
  height: 79px;
  position: absolute;
  top: -170px;left: calc(50% + 170px);
  background-color: #fe8766;
}
#block06 .circle.grad {
  width: 168px;
  height: 169px;
  position: absolute;
  top: -80px;left: 57%;
  background: linear-gradient(180deg, rgba(255,255,255,1) 36%, rgba(6,44,250,1) 100%);
}
#block06 img.hideme,
#block06 h2.hideme,
#block06 form.hideme,
#block06 .divDotted.hideme{transform: translateY(30px);}
#block06 .circle.hideme{transform: scale(.3);}

footer{padding: 60px 0 30px;}
footer .flex{display: flex;align-items: flex-start;justify-content: space-between;}
footer .logo img{display: block;max-width: 150px;}
footer .rrss{color: #062cfa;font-size: 26px;}
footer .rrss a{display: inline-block;margin-left: 20px;}
footer .nav ul li{
	font-size: 14px;
	padding-bottom: 10px;
	width: 143px;
}
footer .nav ul li a{color: #929292;position: relative;transition: ease-out 0.3s;}
footer .nav ul li a:after{
	content: '';
	position: absolute;
	top: 115%;width: 0;
	height: 1px;left: 0;
	background-color: #323232;
	transition: ease-out 0.3s;
}
footer .nav ul li a:hover{color: #323232}
footer .nav ul li a:hover:after{width: 100%;}
footer .nav ul:nth-child(2){margin: 0 70px;}
footer .nav ul li:first-child{margin-bottom: 10px}
footer .foo{color: #929292;font-size: 10px;line-height: 1.2;margin-top: 60px}
footer .capitan{display: flex;align-items: center;}
footer .capitan img{max-width: 93px;margin-left: 10px}

.contentTabs{transition-delay: .4s;}
.contentTabs .navtabs{position: relative;margin-bottom: 30px;font-size: 20px;display: flex;}
.contentTabs .navtabs a{line-height: 50px;position: relative;padding: 0;margin-right: 20px;cursor: pointer;color: #929ba2;font-weight: 500;transition: ease-out 0.3s}
.contentTabs .navtabs a:hover{color: #5d656b}
.contentTabs .navtabs a.active{color: #062cfa;}
.contentTabs .navtabs .after{
	content: '';
	width: 90px;
	position: absolute;
	bottom:0px;
	height: 3px;
	background-color: #062cfa;
	left: 0;
	transition: ease-out 0.3s;
}
.contentTabs .maintabs{height: 120px}
.contentTabs .maintabs .text{display: none;}

@media (max-width: 1100px) {
	#hero .clients{width: 100%;}
	#block01 .image-circle{width: 60vh;padding-top: 60vh}
}
@media (max-width: 860px) {
	.section{min-height: 0}
	header .wp ul{display: none;}
	#hero h1, h2{font-size: 36px;}
	#hero .copy p{font-size: 16px;margin-top: 20px}
	#hero .copy p:after{width: 60px;}
	#hero .clients{flex-direction:column;align-items: center;justify-content: center;border-radius: 0}
	#hero .clients p{margin: 0 0 20px;}
	#hero .clients:after{opacity: 0}
	#hero .wpVideo video{width: auto !important;height: 100%;position: absolute;}
	#block01, #block03 .wp{flex-direction: column-reverse;}
	#block01 .mid{width: 100%;}
	#block01 .image-circle{position: static;width: 100%;padding-top: 100%;margin: 50px 0;background-size: auto 130%;}
	#block01 .circle.blue, #block01 .divDotted{display: none;}
	#block02{flex-direction: column;}
	#block02 .image{width: 100%;}
	#block02 .contentTabs{margin-top: 50px;max-width: 100%;padding: 20px;}
	.contentTabs .navtabs {font-size: 16px;}
	.contentTabs .navtabs a{margin-right: 10px}
	#block02 .contentTabs .navtabs .after{width: 105px;}
	.contentTabs .maintabs{height: auto;min-height: 200px}
	#block03 h2{margin-bottom: 20px}
	#block03 .wp .image{width: 100%;margin-bottom: 50px}
	#block03 .wp .mid{width: 100%;}
	#block03  .navtabs .after{width: 72px}
	#block04 .space{height: 10vh}
	#block04 .wp{flex-direction: column;}
	#block04 .mid{width: 100%;}
	#block04 .circle.orange{top:-15%;left: auto;right: 0}
	#block04 .divDotted{left: 0;top:-10%;}
	#block04 .appslide{width: 300px;height: 300px;z-index: 1;}
	#block04 .texto{opacity: 1}
	#block04 .image{height: auto;padding: 20px 0;background-color: #FFF;position: relative;}
	#block04 .image:after{content:'';background: linear-gradient(0deg, rgba(255,255,255,0) 30%, rgba(255,255,255,1) 70%);width: 100%;height: 120px;position: absolute;top:100%;}
	#block05 .item{height: auto;width: 90vw;padding:30px 20px;text-align: center;}
	#block05{padding-bottom: 100px;padding-top: 0}
	#block06 .circle.grad{top:-50px;right: 0;left: auto}
	#block06 .circle.orange{top:-100px;left: auto;right: 0;}
	#block06 .divDotted{right: 0;left: auto;width: 200px}
	#block06 > img.dash{width: 100%;top: -70px;}
	#block06 h2{font-size: 26px;}
	#block06 form{width: 100%;padding: 0 20px;}
	#block06 form .flex{flex-direction: column;height: auto;width: 100%}
	#block06 form input{display: block;height: 46px;width: 100%;}
	#block06 form button{width: 100%;margin-top: 20px}
	footer .logo img{margin-bottom: 30px;}
	footer .flex:not(.foo){flex-wrap: wrap;width: 100%;}
	footer .flex:not(.foo) ul{width: 50%;}
	footer .nav ul,
	footer .nav ul:nth-child(2){margin: 15px 0;}
	footer .foo{margin-top: 30px;}
	footer .rrss{position: absolute;bottom: 80px;right: 20px;width: 50%;padding: 0 20px;}
	footer .rrss a{margin-left: 0;margin-right: 20px;}
}