.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 6;
  stroke-miterlimit: 10;
  stroke: #1433d9;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #1433d9;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #1433d9;
  }
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 56px;
  height: 56px;
  margin: 8px;
  border: 6px solid #1433d9;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #1433d9 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


html {
  scroll-behavior: smooth;
}

body {font-family: 'DM Sans', Arial, sans-serif; font-weight: 400;}
h6 {font-family: 'DM Sans', Arial, sans-serif; font-size: 23px; margin-bottom: 55px; font-weight: 600;}
h3 {font-family: 'DM Sans', Arial, sans-serif; font-size: 22px; margin-bottom: 15px; font-weight: 600;}
p {font-size: 19px;}
.animate{-moz-transition: all 0.3s ease-out;  /*FF3.7+*/ -o-transition: all 0.3s ease-out;  /*Opera 10.5*/ -webkit-transition: all 0.3s ease-out;  /*Saf3.2+, Chrome*/ transition: all 0.3s ease-out;}
figure .fotozoom {width: 100%;  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;}

figure:hover .fotozoom { z-index: 1;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.navbar {background-color: #fff; top: 0px; position: fixed; width: 100%; display: block; transition: 0.4s; z-index: 1; padding-top: 20px; padding-bottom: 20px;}
.navbar-nav .nav-item:last-child .nav-link {padding-right: 0px !important;}
.navbar-nav .nav-link {color: #333333; font-family: 'DM Sans', Arial, sans-serif; font-size: 16px; line-height: 24px; padding-left: 18px !important; padding-right: 18px !important; }
.navbar-nav .nav-link::after {content: '';display: block;width: 0;height: 1px;background: #fff;transition: width .2s;}
.navbar-nav .nav-link:hover::after {width: 100%;//transition: width .3s;}

.navbar.scrolled {background-color: #fff !important; transition:0.5s; z-index: 1; color: #000; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #f2f2f2;}
.navbar.scrolled .nav-link {color: #000;}
.navbar.scrolled .nav-link::after {background: #000;}
.navbar.scrolled img { filter: brightness(0.05); }
.navbar-brand svg {height: 36px;}

.menu-btn {display: none;}

.btn {border-radius: 100px;padding: 12px 16px;transition: all ease-in-out .15s;font-size: .8rem;}
.btn.btn-2 {color: #333333; background-color: #fff; padding: 12px 25px; font-size: 15px; font-weight: 500;}
.btn.btn-2.btn-white {background-color: #fff;}
.btn.btn-2.btn-gris {background-color: #F9F9F9;}
.btn.btn-2.btn-blue {background-color: #1434D8; color: #fff;}
.btn.btn-2.btn-outline {background-color: transparent; border: 1px solid rgba(255,255,255,0.6); color: #fff;}


.intro {display: table; width: 100%; position: relative;  color: #fff; padding-top: 140px; padding-bottom: 140px;font-size: 21px; font-family: 'DM Sans', Arial, sans-serif; overflow: hidden;
}
.intro .isotn {position: absolute; width: 60%; height: 100%;  top: 4%; right: 5%; height: 100%; z-index: -1; opacity: 0.4; background-repeat: no-repeat; background-image: url(../img/iso-tiendanube.svg); background-size: contain; background-position: right center;}
.intro .fondo {position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: -2; 
background: rgba(21,51,203,1);
background: -moz-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(21,51,203,1)), color-stop(100%, rgba(44,52,89,1)));
background: -webkit-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -o-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -ms-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: linear-gradient(to right, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1533cb', endColorstr='#2c3459', GradientType=1 );}
.intro .txt {position: absolute; text-transform: uppercase; opacity: 0.3; color: #fff; margin: 0px; font-size: 13px; transform: rotate(-90deg);}
.intro .txt.t1 {position: absolute; left: -50px; bottom: 100px;}
.intro .txt.t2 {position: absolute; right: -55px; top: 190px;}
.intro .info {margin-top: 160px;}
.intro h1 {font-family: 'DM Sans', Arial, sans-serif; font-size: 46px; line-height: 51px; margin-bottom: 15px;}
.intro .bajada {margin-bottom: 40px; font-size: 16px; font-family: 'DM Sans', Arial, sans-serif; width: 93%;}
.intro .photo {position: relative;}
.intro .photo .base {width: 46%; position: relative; padding: 15px; border: 1px solid rgba(255,255,255,0.5);  border-radius: 34px;}
.intro .photo .base img {width: 100%;  border-radius: 24px;}
.intro .photo .display1 {position: absolute; left: 33%; top: 11%; border-radius: 34px; width: 46%;}
.intro .photo .display1 .caption {width: 100%;border-radius: 34px;
-webkit-box-shadow: -15px 20px 22px -2px rgba(0,0,0,0.41);
-moz-box-shadow: -15px 20px 22px -2px rgba(0,0,0,0.41);
box-shadow: -15px 20px 22px -2px rgba(0,0,0,0.41);}

.content.servicestop {color: #000000; background-color: #F9F9F9;}
.content.servicestop p {margin-bottom: 25px;}
.content.servicestop .mod1 {background-color: #F9F9F9;}
.content.servicestop .mod2 {background-color: #F9F9F9;}
.content.servicestop .modulo {width: 100%; float: right; max-width: 465px; background: rgba(0,0,0,0); padding-top: 60px; padding-bottom: 60px;}
.content.servicestop .mod2 .modulo {float: left; background: rgba(0,0,0,0);padding-left: 40px;}
.content.servicestop .mod1 .modulo {padding-right: 40px;}
.mod-full {max-width: none !important; padding: 0px !important;}
.content.servicestop .modulo h2 {font-size: 16px; color: #c69b6d;}
.content.servicestop .modulo h2 small {display: block; font-size: 23px; color: #000000;}

.content.speech {background-color: #fff; color: #000; padding-top: 100px; padding-bottom: 100px; font-size: 21px; font-family: 'DM Sans', Arial, sans-serif; background-repeat: no-repeat; background-image: url(../img/bg-especialistas.jpg); background-position: right center;}
.content.speech img {width: 40%; float: right;}

.content.clients {background-color: #fff; color: #000; padding-top: 55px; padding-bottom: 85px;}
#slider-clients {display: none; margin-bottom: 40px;}
#slider-clients img {width: 100%; filter: grayscale(100%); opacity: 0.85; filter: alpha(opacity=85); margin-top: 8px; margin-bottom: 8px;}
.open {display: block !important;}

.content.clients {padding-top: 60px; padding-bottom: 50px; /*background-image: url(../img/bg-clientes.jpg); background-position: center bottom; background-size: contain; background-repeat: no-repeat;*/}
.content.clients h3 {margin-bottom: 30px;}
.content.clients .comentario { padding: 20px; margin-right: 20px; min-height: 290px;
background: rgba(252,252,252,1);
background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(248,249,250,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,252,252,1)), color-stop(100%, rgba(248,249,250,1)));
background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(248,249,250,1) 100%);
background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(248,249,250,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 0%, rgba(248,249,250,1) 100%);
background: linear-gradient(135deg, rgba(252,252,252,1) 0%, rgba(248,249,250,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f8f9fa', GradientType=1 );
}
.content.clients .comentario p {font-size: 15px;}
.content.clients .comentario .firma {font-size: 13px; margin-bottom: 0px;}
.content.clients .comentario .firma strong {display: block;}
.content.clients .comentario .firma span {color: #1434D8;}

.content.diferencial {padding-top: 100px; padding-bottom: 100px; color: #fff; position: relative;}
.content.diferencial h3 {margin-bottom: 25px;}
.content.diferencial p {font-weight: 400; font-size: 20px; margin-bottom: 30px;}
.content.diferencial .isotn {position: absolute; width: 60%; height: 100%;  top: 4%; right: 5%; height: 100%; z-index: -1; opacity: 0.4; background-repeat: no-repeat; background-image: url(../img/iso-tiendanube.svg); background-size: contain; background-position: right center;}
.content.diferencial .fondo {position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: -2; 
background: rgba(21,51,203,1);
background: -moz-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(21,51,203,1)), color-stop(100%, rgba(44,52,89,1)));
background: -webkit-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -o-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: -ms-linear-gradient(left, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
background: linear-gradient(to right, rgba(21,51,203,1) 0%, rgba(44,52,89,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1533cb', endColorstr='#2c3459', GradientType=1 );}

.content.services {background-color: #262626; color: #fff; padding-top: 55px; padding-bottom: 65px;}
.content.services .module {margin-bottom: 40px; text-align: center;}
.content.services .module svg {height: 36px; width: auto; fill: #fff; margin-bottom: 10px;}
.content.services .module h3 {font-size: 33px; margin-bottom: 10px;font-family: 'DM Sans', Arial, sans-serif;}
.content.services .module p {color: #828282; font-size: 20px; line-height: 27px; font-family: 'DM Sans', Arial, sans-serif; width: 90%; text-align: center; margin: auto;}

.content.ventajas h4 {font-family: 'DM Sans', Arial, sans-serif; color: #1434D8; font-size: 16px; font-weight: 600;}
.content.ventajas .text p {margin-bottom: 35px; width: 70%;}
.content.ventajas .row.no-gutters .col-6 {border: 1px solid #ccc; padding: 20px; padding-top: 25px;}
.content.ventajas .row.no-gutters .col-6:not(:last-child) {border-right-width: 0;}
.content.ventajas .row.line1 .col-6 {border-bottom: 0px;}
.content.ventajas p a {color: #212529; text-decoration: none;}
.content.ventajas .item p {font-size: 15px;}
.content.ventajas .crear {padding-top: 70px;}
.content.ventajas .crear p {font-size: 14px; line-height: 23px; margin-bottom: 20px;}

.content.works { color: #000; padding-top: 70px; padding-bottom: 70px; background-color: #F9F9F9;}
.content.works p {width: 70%; margin-bottom: 30px;}
.content.works figure {position: relative; overflow: hidden; margin: 0px; cursor: pointer; font-family: 'DM Sans', Arial, sans-serif;}
.content.works figure .overlay .text span {font-size: 13px; color: #c69b6d;}
.content.works figure .overlay .arrow {position: absolute; right: 10%; bottom: 10%; width: 38px; border: 1px solid #fff; border-radius: 50%;}
.content.works figure h5 {margin-bottom: 0px;}
.content.works figure h5 small {font-family: 'DM Sans', Arial, sans-serif;}
.content.works h6 {color: #000;}
.content.works img {width: 100%;}
.content.works .col-md-4 {background-color: #3a1f47;}
.content.works .dos {background-color: #7d40a0;}
.content.works .tres {background-color: #233ccc;}

.content.works figure .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(20,52,216,0);
}

.content.works figure:hover .overlay {
  opacity: 1;
  background-color: rgba(20,52,216,0.85);
}

.content.works figure .text {
  color: white;
  font-size: 20px; line-height: 20px;
  position: absolute;
  bottom: 30px;
  left: 25px;
  text-align: left;
  opacity: 1;
}
.content.ventajas {padding-top: 70px; padding-bottom: 70px;}

.content.contact {background-color: #262626;padding-top: 50px; padding-bottom: 30px;color: #fff; font-size: 20px;}
.profile {font-family: 'DM Sans', Arial, sans-serif;  margin-top: 0px; margin-bottom: 30px;}
.profile img {width: 50px; border-radius: 50%; display: inline-table; margin-right: 20px; margin-top: 5px;}
.profile p {font-family: 'DM Sans', Arial, sans-serif; margin-bottom: 40px;}
.profile ul {margin-left: 0px; padding-left: 0px; list-style-type: none; margin: 0px; display: inline-table; vertical-align: middle; }
.profile a {color: #fff;}
.content.contact .social {margin-top: 50px;}
.content.contact .social a {color: #636363;}
.content.contact .social .fa {font-size: 24px; margin-right: 8px;}

#contact-form {position: relative;}
#contact-form .sending {position: absolute; background: rgba(38, 38, 38, .95); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center;}
#contact-form .sending, #contact-form .state1, #contact-form .state2  {display: none;}

.contact .vermas {text-align: center; display: table; margin: auto; font-size: 13px; color: #ccc; margin-top: 80px;}

.whatsapp-float {width: 64px; height: 64px; cursor: pointer !important; background-color: #1c1c1c; border: 1px solid #1434d8; border-radius: 50%; color: #fff; text-align: center; position: fixed; bottom: 20px; right: 25px;}
.whatsapp-float .fa {font-size: 32px; line-height: 62px; }
.whatsapp-float:hover {cursor: pointer !important; color: #c69b6d;}

.form-bottom .form-control-lg {background-color: #333333; border:0px; color: #ffffff; font-size: 17px;font-family: 'DM Sans', Arial, sans-serif;}
.form-bottom .form-control-lg::placeholder {color: #eaeaea;}
.btn-zur {border-radius: 50px; border: 2px solid rgba(20,52,216,1); color: #fff;font-size: 17px;font-family: 'DM Sans', Arial, sans-serif; background: transparent; padding: 15px; padding-left: 30px; padding-right: 30px; text-align: center;}
.btn-zur:focus {box-shadow: none !important;}
.btn-zur:hover {text-decoration: none;}
#contact-form .btn-zur:hover{background-color: rgba(20,52,216,1); border: 2px solid rgba(20,52,216,1);}
.content.intro .btn-zur {border: 2px solid rgba(28,28,28,0.7);}
.content.intro .btn-zur:hover {color: rgba(28,28,28,1); background-color: #fff; border:2px solid rgba(255,255,255,1);}

footer {padding-top: 20px; padding-bottom: 20px; font-size: 14px; color: #7f7f7f}
footer .copy { text-align: right;}

.grecaptcha-badge {display: none;}

@media (min-width: 1200px) {
  .content.servicestop .modulo {max-width: 555px;}
}

@media (max-width: 992px) {
  .content.servicestop .modulo {max-width: 345px;}
}

@media screen and (max-width: 767px) {

h6 {margin-bottom: 35px; text-align: center;}
p {width: 100%; font-size: 18px;}

.navbar-brand {margin: 0px; width: 100%;}
.navbar-brand svg {height: auto; width: 100%;}
.navbar-toggler {display: none;}

.navbar {padding-left: 16px; padding-bottom: 17px;}
.menu-btn {display: none; padding: 5px; margin-top: 5px;}
.menu-btn .line {background-color: #fff; height: 3px; margin: 5px; display: block; width: 26px;}
.menu-btn .line::before {content: '';}
.navbar.scrolled .line {background-color: #000; }
.pushy-active .pushy {width: 100%;}
.pushy {background-color: rgb(38,38,38);}
.pushy ul {margin-left: 30px; margin-right: 30px;}
.pushy-active .site-overlay {background-color: rgba(28,28,28,0.9);}
.pushy .cerrar-pushy {color: #fff !important; text-align: right; font-size: 35px; border: 0px; display: table; float: right;}
.pushy ul li:first-child a {border: 0px !important; }
.link-pushy {font-family: 'DM Sans', Arial, sans-serif; font-size: 22px; border:0px !important; border-top: 1px solid rgba(255,255,255,0.1) !important; text-align: left; padding-left: 0px !important;}
.logo-pushy {height: 27px; margin-left: 30px; margin-top: 30px; margin-bottom: 30px;}

.btns-calls {text-align: center; margin-top: 20px;}
.btns-calls .link {width: 64px; height: 64px; border: 1px solid #1434d8; margin-left: 5px; margin-right: 5px; padding: 0px !important; text-align: center !important; cursor: pointer !important; background-color: transparent; border-radius: 50%; color: #fff; text-align: center;display: inline-block;}
.btns-calls .link .fa {font-size: 32px; line-height: 65px; margin: 0px !important; display: inline-block; float: none;}
.btns-calls .link:hover {text-decoration: none;}

.intro .info {margin-top: 70px;}
.intro h1 {font-size: 29px; line-height: 35px;}
.intro p {width: 90%; font-size: 18px; line-height: 25px;}

.intro {overflow: hidden; padding-top: 100px; padding-bottom: 50px;}
.intro .photo {width: 90%; margin: auto;}
.intro .photo .base {width: 60%; text-align: left; height: auto;}
.intro .photo .display1 {width: 55%; left: 40%;}

.intro .txt.t1 {position: absolute; font-size: 12px; transform: none; left: 15px; bottom: 10px;}
.intro .txt.t2 {position: absolute;right: -155px;top: 190px; font-size: 12px;}

.content.speech { background-position: center -75px; background-size: 90%; padding-top: 190px;}
.content.speech .photo {display: none;}

.content.clients {overflow: hidden; padding-bottom: 70px;}

.content.works p {width: 100%;}

.content.ventajas .row.no-gutters .col-6:not(:last-child) {border-right-width: 0;}

.content.ventajas .text p {width: 100%;}

.content.ventajas .row.no-gutters .col-6:nth-child(2n), .content.ventajas .row.no-gutters .col-6:nth-child(4n) {border-right-width: 1px;}

.btn-zur {width: 60%; display: block; margin: auto;}

.content.contact .social {margin-bottom: 30px;}

}