/*!
* Theme Name: Zeus Data&Go
* Theme URI: http://www.sitename.com
* Description: Site Name WordPress Theme
* Version: 1.5.0
* Author: Artvisual
* Author URI: http://www.artvisual.es
* Tags: Blank, HTML5, CSS3
*
* License: MIT
* License URI: http://opensource.org/licenses/mit-license.php
*/

@charset "UTF-8";

/**
* styles.scss
* ---
* Main `sass` file. Import here `sass` files
*/

/**
* partials/reset
* ---
* Reset file
* NOTE: also `normalize.css` is used
*/

*,
*:after,
*:before {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


html {
   -webkit-tap-highlight-color: transparent;
   padding: 0;
   margin: 0;
   width: 100%;
   overflow-x: hidden !important;
}

body {
   font-family: 'Ubuntu', sans-serif;
   font-size: 17px;
   color: #1C1F2A;
   background-color: #f7f7f7;
   overflow-x: hidden !important;
   padding: 0;
   margin: 0;
   width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Ubuntu', sans-serif;
   font-size: 2.4em;
   padding: 0.5em 0;
   line-height: 1.2;
}

h1 {
   font-weight: 700;
   font-size: 3.4em;
   line-height: 1;
}

h2 {
   font-weight: 700;
   font-size: 2.5em;
   color: #1C1F2A;
   margin: 0;

}

h2.big-title {
   font-size: 4.5em;
   line-height: 1;
}

h3 {
   font-weight: 700;
   font-size: 4.25em;
   color: #1C1F2A;
   line-height: 1;
}

h4 {
   font-weight: 700;
   font-size: 0.7em;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding-top: 1.5em;
}

h5 {
   margin: 0;
   font-size: 1.65em;
}

h6 {
   font-size: 0.85em;
   letter-spacing: 2px;
   display: block;
}

img {
   max-width: 100%;
   vertical-align: middle;
}

a {
   color: #434141;
   text-decoration: none;
   -webkit-transition: all .15s linear;
   transition: all .15s linear;
}

p {
   font-size: 0.97em;
   line-height: 1.8;
   color: #8e8dac;
   color: #4d4c68;
}


ul {
   list-style: none;
   margin-left: 0;
}

b,
strong {
   font-weight: 800;
}

.yellow {
   color: #E5B136;
}

.yellow-bg {
   background-color: #E5B136;
}

.blue {
   color: #278A9B;
   /* color: #39aec2;*/
}

.white {
   color: rgba(255, 255, 255, 0.7);
}

h2.white {
   color: white;
}

.dark-bg {
   background-color: #1C1F2A;
}

.light-bg {
   background-color: #ECEEF1;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
textarea {
   background-color: #bcbdcc3d;
   box-shadow: none;
   border: none;
   margin: 5px;
   padding: 1.3em 1em .65em;
   width: 100%;
   z-index: 999;
   position: relative;
   color: white;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea {
   /*background-color: #fff;*/
}

.area label {
   position: absolute;
   top: 3.5em;
   left: 40px;
   z-index: 1;
   width: auto;
   text-align: left;
   font-size: .95rem;
   -webkit-transition: all .2s linear;
   transition: all .2s linear;
   font-weight: 700;
   font-size: .7em;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding-top: 1.5em;
   color: #3dbad0;
}

.area label.active {
   top: 1.75em;
}

input.button {
   /* background-color: #1C1F2A;
   padding: 1.25em 2.75em;
   font-size: .8rem;
   font-weight: 900;*/
   width: 80%;
   border: none;
   box-shadow: none;
   background-color: #2c94a7;
   padding: 1.35em 3.1em;
   color: white;
   font-weight: 700;
   font-size: 0.95em;
   border-radius: 37px;
   transition: all .15s linear;
}

::-moz-selection {
   background-color: #ffb318;
   color: white;
   text-shadow: none;
}

::selection {
   background-color: #ffb318;
   color: white;
   text-shadow: none;
}

.large-padding {
   padding: 4em 0;
}

.default-padding {
   padding: 2.75em 0;
}


/*Placeholder*/

/*input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #434141;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
color: #434141;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #434141;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
color: #434141;
}*/

/**
* partials/wrapper
* ---
*/

main {
   margin-top: 0;
}


.wrapper {
   max-width: 1170px;
   margin: 0 auto;
}

.mini-wrapper {
   max-width: 940px;
   margin: 0 auto;
}

.small-wrapper {
   max-width: 720px;
   margin: 0 auto;
}

.contenido {
   background-color: #fff;
   padding: 2em 0;
}

.contenido p {
   line-height: 30px;
}

.text-center {
   text-align: center !important;
}

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.main-cta {
   padding: 1.5em 0;
}

.pagination .current {
   background: #e0481d;
}


/*Forms*/

div.wpcf7-validation-errors {
   background-color: #ffb318;
}

div.wpcf7-mail-sent-ng {
   background-color: #e0481d;
}

div.wpcf7-mail-sent-ok {
   background-color: #c4d887;
}

div.wpcf7-validation-errors,
div.wpcf7-mail-sent-ng {
   border: none;
   color: white;
   font-weight: 600;
   font-size: 100%;
}


/* Header container*/

#header {
   width: 100%;
   background-color: transparent;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000000000;
   -webkit-transition: all .3s;
   transition: all .3s;
}

@media only screen and (max-width: 1024px) {
   #header {
      display: none;
   }
}

#header .top-header {
   margin: 0;
   height: 75px;
   -webkit-transition: all .3s;
   transition: all .3s;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

.row.top-header {
   margin-left: auto;
   margin-right: auto;
   position: relative;
}



/* Logo*/

.logo {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
   height: 85px;
}

.logo a {
   width: auto;
}

.logo img.logo-zeus {
   max-width: 150px;
   display: inline-block;
   margin-right: 1em;
   width: 100%;
}

.logo img.logo-retail {
   max-width: 150px;
   display: inline-block;
   width: 100%;
}

.logo-zeus-contact {
   max-width: 160px;
}

a.retail-logo {
   font-weight: 700;
   color: white;
}

a.retail-logo:hover {
   color: white;
}

a.retail-logo::after {
   content: '';
   display: block;
   width: 20px;
   height: 3px;
   background: #278a9b;
   transition: width .3s;
   -webkit-animation: mymove 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-delay: 4s;
   animation: mymove 1s;
   animation-iteration-count: 1;
   animation-delay: 4s;
}


@-webkit-keyframes mymove {
   from {
      width: 0px;
   }
   to {
      width: 100%;
   }
}

@keyframes mymove {
   from {
      width: 0px;
   }
   to {
      width: 100%;
   }
}

a.retail-logo:hover::after {
   width: 100%;
}

/*Logo responsive*/

div#logo-mobile {
   display: block;
   position: relative;
   margin: 0 auto;
   text-align: center;
   font-size: 120%;
}

div#logo-mobile img {
   max-width: 130px;
}

div#logo-mobile a {
   font-weight: 400;
   display: inline-block;
   height: 35px;
   width: 200px;
}

div#logo-mobile span {
   font-size: 60%;
   font-weight: 600;
   display: block;
   line-height: 0.8;
}

#mobile-header.sticky {
   padding: 1em 4.5455% !important;
   position: fixed;
   background-color: #fff;
   top: 0;
   left: 0;
   width: 100%;
   box-shadow: 0 1px 1px #ebebeb;
}


/*Cta header*/

.header-cta a {
   color: #fff;
   font-size: 0.85em;
   padding: 0.4em 2em 0.5em;
   text-align: center;
   height: 75px;
   display: flex;
   flex-direction: row;
   width: auto;
   align-items: center;
   background-color: #2c94a7;
   justify-content: center;
   transition: all .15s linear;
}

.header-cta a:hover,
a.button:hover {
   background: linear-gradient(270deg, #a90d5f, #e5b136);
   background-size: 400% 400%;
   -webkit-animation: BgZeus 5s ease infinite;
   -moz-animation: BgZeus 5s ease infinite;
   animation: BgZeus 5s ease infinite;
   color: white;
   text-decoration: none;
}

.header-cta a:hover span {
   margin-bottom: 0.5em;
   color: white;
}

a.button {
   background-color: #2c94a7;
   padding: .75em 3.1em;
   color: white;
   font-weight: 700;
   font-size: 0.95em;
   border-radius: 37px;
   transition: all .15s linear;
}

/*Mobile Header*/

#scroll-header .logo a {
   width: auto;
}

.logo-smaller {
   display: none;
}

.logo-smaller a {
   width: 70px;
   display: inline-block;
}

#mobile-header {
   display: none;
   z-index: 100000;
}

@media only screen and (max-width: 1024px) {
   #mobile-header {
      display: block;
   }
}

#mobile-header .mobile-top-bar {
   height: 60px;
   width: 100%;
   background-color: #e0481d;
   position: fixed;
   top: 0;
   left: 0;
}

#mobile-header .mobile-menu-container {
   background-color: #ffffff;
   height: -webkit-calc(100% - 60px);
   height: calc(100% - 60px);
   width: 100%;
   position: fixed;
   z-index: 100000;
   top: 60px;
   overflow: scroll;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav {
   width: 100%;
   padding: 0;
   margin: 0;
   list-style-type: none;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li {
   width: 100%;
   padding: 0;
   margin: 0;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > a {
   width: 100%;
   padding: 15px 30px;
   display: block;
   border-bottom: 1px solid #eeeeee;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > a:hover {
   text-decoration: none;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > a > i.fa {
   color: #e0481d;
   margin-left: 10px;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > a > i.fa.rotated {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu {
   display: none;
   padding: 0;
   margin: 0;
   width: 100%;
   list-style-type: none;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li {
   width: 100%;
   padding: 0;
   margin: 0;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li a {
   border-bottom: 1px solid #eeeeee;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li a:hover {
   text-decoration: none;
   background-color: #fff;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li > ul.sub-menu {
   list-style-type: none;
   width: 100%;
   padding: 0;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li > ul.sub-menu a {
   padding: 15px 70px;
   width: 100%;
   display: block;
   border-bottom: 1px solid #eeeeee;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li > ul.sub-menu ul.sub-menu {
   list-style-type: none;
   width: 100%;
   padding: 0;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li > ul.sub-menu ul.sub-menu a {
   padding: 15px 90px;
   width: 100%;
   display: block;
   border-bottom: 1px solid #eeeeee;
}

#mobile-header .mobile-menu-container ul.mobile-top-nav > li > ul.sub-menu li a {
   padding: 15px 50px;
   width: 100%;
   display: block;
}

#mobile-header {
   background-color: #fff;
   padding: 0.5em 0.5em 0 0.5em;
   width: 100%;
   /*border-bottom: 4px solid $details;*/
}

#mobile-header #logo-mobile {
   max-width: 200px;
}


/*Svg animations*/

#yellow-line {
   position: relative;
}

#blue-line {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

#yellow-line,
#blue-line {
   stroke-dasharray: 2230;
   stroke-dashoffset: 1000;
   animation: dash 5s linear;
}

@keyframes dash {
   from {
      stroke-dashoffset: 1000;
   }
   to {
      stroke-dashoffset: 0;
   }
}

/* Menus*/

nav {
   padding-top: 0.5em;
   display: inline-block !important;
}

nav ul li {
   display: inline-block;
   margin-right: 2em;
}

nav ul li a {
   color: #fff;
   text-transform: uppercase;
   font-weight: 700;
   font-size: 0.7em;
   letter-spacing: .5px;
}


nav#nav-mobile {
   position: relative;
   display: none;
}

nav#nav-mobile .fa {
   margin-left: 0.85em;
}

nav#nav-mobile ul {
   display: none;
   list-style-type: none;
   position: relative;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   background-color: #fff;
   margin-bottom: 0;
}

nav#nav-mobile ul:last-child li {
   border-bottom: 1px solid #eeeeee;
}

nav#nav-mobile li {
   display: block;
   padding: 5px 0;
   margin: 0 5px 0 0;
}

nav#nav-mobile a {
   display: block;
   color: #1C1F2A;
   font-size: .7em;
   padding: 10px 30px;
}

nav#nav-mobile a:hover {
   color: #434141;
   text-decoration: none;
}

/*Menu hamburguesa*/

#nav-trigger {
   display: none;
   text-align: center;
}

#nav-trigger span {
   content: '';
   display: inline-block;
   padding: 10px 30px 10px 10px;
   color: #E5B136;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 90%;
   font-weight: 900;
   letter-spacing: 1px;
   translate: translateY(10px) rotate(45deg);
}

#nav-trigger span:before,
#nav-trigger span:after {
   background-color: #101218;
   content: '';
   display: block;
   height: 5px;
   width: 35px;
}

#nav-trigger span:before {
   background-color: #101218;
   margin-bottom: 10px;
   height: 5px;
   width: 35px;
}

#nav-trigger span.open:hover:before {
   -webkit-transform: translateY(5px) rotate(45deg);
   transform: translateY(5px) rotate(45deg);
}

#nav-trigger span.open:hover:after {
   -webkit-transform: translateY(-11px) rotate(-45deg);
   transform: translateY(-11px) rotate(-45deg);
}

.nav-up {
   -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
}

.main-menu.text-right {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   align-items: center;
   padding-right: 0;
}

.main-menu.text-left {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
}

.header-cta {
   display: flex;
   margin-left: 25px;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   font-weight: 700;
}

.full-photo-bg {
   background-image: url('img/9.jpg');
   background-size: cover;
   height: 100vh;
   width: 100%;
}

.full-photo-bg h2 {
   font-size: 3em;
   margin-bottom: 0;
   padding-bottom: .35em;
   color: white;
}

.full-photo-bg p {
   color: white;
}

.big-title-box {
   /* background-color: #e2e3e8ba;*/
   padding: 0 0 2em;
   margin-bottom: -4em;
}

.header-cta .white-cta {
   background-color: white;
   color: #1C1F2A;
}

/* Conection */

.full-video {
   margin: 0 auto;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.conect-logo .texting-big {
   width: 100%;
   display: block;
   font-size: 1.2em;
}

.social-logo,
.analytics-logo {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
}


.conection-logo {
   background-color: white;
   border-radius: 8px;
   margin: 14px 5px;
   padding: 1.75em 1.25em;
   width: 19%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   position: relative;
}

.conection-logo img {
   max-width: 45px;
   margin-bottom: 1.2em;
   margin-left: 10px;
}

.conection-logo .logo-title {
   font-weight: 700;
}

.conection-logo .logo-text {
   font-size: .8em;
   color: #4d4c68;
}

/**
* partials/footer
* ---
*/

ul#menu-menu-footer {
   margin-left: 0;
}

ul#menu-menu-footer li {
   display: block;
}

ul#menu-menu-footer li a {
   padding-left: 0;
}

.footer {
   background-color: #fff;
   padding: 0 0 3em 0;
   color: #1C1F2A;
   position: relative;
   font-size: .9em;
}

.footer a {
   font-size: 1em;
   transition: all .2s linear;
}

.footer a h3:hover {
   text-decoration: none;
   border-bottom: none;
   color: #E5B136;
}

.footer img {
   max-width: 100px;
}

.footer ul,
.footer .textwidget {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   margin-left: 0;
   padding-left: 0;
}

.footer ul li {
   padding: 0 .85em;
}

.footer .the-footer {
   padding: 3em 0;
}

.footer .the-footer p {
   font-size: 92%;
   padding-top: 3em;
}

.sub-footer {
   position: absolute;
   bottom: 1.5em;
   left: 1.5em;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
       font-size: .9em;
}

.sub-footer a:hover {
   color: inherit;
   text-decoration: none;
   opacity: 0.7;
}

.sub-footer .zeus-footer-logo {
   text-align: right;
   padding-right: 3em;
}


#contact,
#contact .texting-big p {
   text-align: left;
}

#contact h2,
#contact h4 {
   color: white;
}

#contact p {
   color: #9dacb4;
}


.top-page-default {
   background-size: cover;
   background-repeat: no-repeat;
   height: 70vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/**
* partials/print
* ---
* Print version
* (from https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css)
*/

@media print {
   *,
   *:before,
   *:after {
      background: transparent !important;
      color: #000 !important;
      /* Black prints faster: h5bp.com/s */
      box-shadow: none !important;
      text-shadow: none !important;
   }
   a,
   a:visited {
      text-decoration: underline;
   }
   a[href]:after {
      content: " (" attr(href) ")";
   }
   abbr[title]:after {
      content: " (" attr(title) ")";
   }
   /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
   a[href^="#"]:after,
   a[href^="javascript:"]:after {
      content: "";
   }
   pre,
   blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
   }
   thead {
      display: table-header-group;
      /* h5bp.com/t */
   }
   tr,
   img {
      page-break-inside: avoid;
   }
   img {
      max-width: 100% !important;
   }
   p,
   h2,
   h3 {
      orphans: 3;
      widows: 3;
   }
   h2,
   h3 {
      page-break-after: avoid;
   }
}

.slide {
   position: relative;
   height: 65vh;
   background: linear-gradient(270deg, #0c0f1a, #032f55);
   background-size: 400% 400%;
   -webkit-animation: AnimationName 14s ease infinite;
   -moz-animation: AnimationName 14s ease infinite;
   animation: AnimationName 14s ease infinite;
   text-align: center;
}

.slide-content {
   height: 55vh;
}

.slider-image.container {
    margin-top: -20.6vh;
}

@-webkit-keyframes AnimationName {
   0% {
      background-position: 0% 50%
   }
   50% {
      background-position: 100% 50%
   }
   100% {
      background-position: 0% 50%
   }
}

@-moz-keyframes AnimationName {
   0% {
      background-position: 0% 50%
   }
   50% {
      background-position: 100% 50%
   }
   100% {
      background-position: 0% 50%
   }
}

@keyframes AnimationName {
   0% {
      background-position: 0% 50%
   }
   50% {
      background-position: 100% 50%
   }
   100% {
      background-position: 0% 50%
   }

}

.slide h1 {
   font-size: 3em;
   margin-bottom: 0;
   padding-bottom: 0.35em;
   color: white;
}

.slide h2 {
   font-size: 1.5em;
}

.slide .slide-content {
   padding: 0;
}

.slider-image.container {
   margin-top: -20vh;
}

.slider-image img {
   width: 100%;
   border-radius: 13px;
   position: relative;
   box-shadow: 0 10px 20px #32314757;
}

.slider-top-content {
   color: white;
   width: 100%;
   height: 55vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   z-index: 99999;
   position: relative;
}

.slider-top-content h4 {
   padding: 0;
}

.slider-top-content p {
   margin: 0;
}

.slide .slide-content .slide-content-title {
   color: white;
   text-transform: uppercase;
   text-align: center;
   /*position: absolute;
   bottom: 20%;*/
   z-index: 999;
   opacity: 1;
   width: 100%;
}

.slide .slide-content .slide-content-title h1,
.slide .slide-content .slide-content-title h2 {
   padding: 0;
   margin-top: 0;
   color: white;
}

.slide .slide-content img {
   width: 100%;
   object-fit: cover;
   height: 70vh;
}

canvas#demo-canvas {
   position: absolute;
   top: -40%;
   left: 0;
   display: inline-block;
   z-index: 0;
   width: 100%;
   opacity: .5
}


.zeus-intro {
   margin-top: -5em;
   color: white;
   padding: 3em 2em 2em;
   background-color: #1c1f2af0;
   /*background-color: #e2e3e8e0;*/
   background: linear-gradient(to right, white 50%, #1c1f2a 50%);
   background-size: 200% 100%;
   background-position: left bottom;
   margin-left: 10px;
   transition: all 1.5s ease;
}

.zeus-intro.full-bg {
   opacity: 1;
   background-position: right bottom;
}


.zeus-intro h3 {
   color: white;
}

.zeus-intro p {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.3em;
   line-height: 1.5;
   font-weight: 300;
}


.zeus-box {
   background-color: #278a9b;
   color: white;
   padding: 2em 2em;
   /*margin-top: -8em;*/
}

.zeus-box p {
   color: rgba(255, 255, 255, .55);
}

#mobile-devices {
   display: none;
}

#scene {
   display: block;
}

.main-devices {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}

.devices {
   position: relative;
   min-height: 55vh;
}

.image-tv {
   top: 5vh;
   position: absolute;
   max-width: 900px;
   right: 0;
   z-index: 9;
}

.image-tv-mobile {
   margin-bottom: 1em;
   /*    top: 0;
   position: absolute;
   max-width: 100%;
   right: 0;
   z-index: 9;*/
}

.image-laptop {
   top: 17vh;
   position: absolute;
   max-width: 700px;
   left: 60%;
   z-index: 999;
}

.image-laptop-mobile {
   margin-bottom: 1em;
   /* bottom: 0;
   position: absolute;
   max-width: 410px;
   left: 0;
   z-index: 999;*/
}

.image-phone {
   top: 15vh;
   position: absolute;
   max-width: 220px;
   right: 0;
   z-index: 99999 !important;
}

.image-phone-mobile {
   margin-bottom: 1em;
   max-width: 180px;
   /*    bottom: 0;
   position: absolute;
   max-width: 90px;
   right: 2vw;
   z-index: 99999 !important;*/
}

li.layer.red {
   width: 80%;
}

.fondo {
   position: relative;
   width: 1280px;
   z-index: 1;
   height: 100%;
}

#conections {
   z-index: 999999999;
   position: relative;
}

.link {
   color: #278a9b;
   /* border-bottom: 3px solid #E5B136; */
   transition: .25s linear;
   padding-bottom: 0.35em;
   width: auto;
   display: inline-block;
   font-weight: 700;
   text-transform: uppercase;
   font-size: 0.85rem;
}

.link::after {
   content: '';
   display: block;
   width: 20px;
   height: 3px;
   background: #278a9b;
   transition: width .3s;
}

.link:hover {
   border-bottom: none;
   text-decoration: none;
   color: inherit;
}

.link:hover::after {
   width: 100%;
}

.main-menu li a:hover {
   color: white;
   text-decoration: none;
}

.main-menu li a::after {
   content: '';
   display: block;
   width: 0;
   height: 3px;
   background: #278a9b;
   transition: width .3s;
}

.main-menu li a:hover::after {
   width: 100%;
}

.formulario {
   height: auto;
   /* min-height: 100vh;*/
   display: flex;
}

#clients {
   margin-bottom: 4em;
}

.pricing {
   background-color: #2cabc2;
   color: white;
   padding-bottom: 0;
   margin-bottom: -105px;
}
/* .price-column:first-child .price-inout {
text-align: left;
color: #ffffff82;
} */

.price-column .price-inout:first-child {
   color: #e5b136;
   font-size: 1.2em;
}
.price-inout {
   padding: .95em;
   /* border: 1px solid white; */
   background-color: #1c1f2a;
   border-radius: 5px;
   margin-bottom: 3px;
   font-size: .9em;
   color: #9dacb4;
}
.price-button {
   cursor: pointer;
   background: linear-gradient(270deg, #a90d5f, #e5b136);
   background-size: 400% 400%;
   -webkit-animation: BgZeus 5s ease infinite;
   -moz-animation: BgZeus 5s ease infinite;
   animation: BgZeus 5s ease infinite;
   color: white;
   text-decoration: none;
   text-align: center;
   font-weight: 700;
}


.client-logo {
   text-align: center;
   width: 50%;
}

.client-logo img {
   max-width: 155px;
   opacity: .7;
}


.content-box {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   margin: 2.5em 0 4em;
}

.content-box img {
   z-index: 22;
   position: relative;
   border-radius: 8px;
   /* box-shadow: 0 6px 16px #27264173;*/
}

.content-box li.social-card img {
   border-top-left-radius: none;
   border-bottom-left-radius: none;
}

li.social-card img {
   opacity: .5;
   transition: all .3s linear;
   margin-bottom: 5px;
}
li.social-card.on img {
   opacity: 1;
   box-shadow: 0 8px 16px #00000052;
}



.content-box.texting-big {
   text-align: center !important;
   margin: 0 auto;
   justify-content: center;
}

.content-box.texting-big p {
   text-align: center;
   font-size: 1.5em;
}


.texting-big img {
   max-width: 300px;
}

.texting-big p {
   font-size: 1.5em;
   text-align: center;
   line-height: 1.6;
   font-weight: 300;
   color: #4d4c68;
}






/* Button Sacnite */

a.button.button--sacnite {
   min-width: 0;
   padding: 0;
   color: #e0481d;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
}

a.button--scanite.button--round-l {
   border-radius: 50%;
}

a.button--sacnite.button--inverted {
   color: #e0481d;
}

a.button--sacnite::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: inherit;
   z-index: -1;
   box-shadow: inset 0 0 0 35px #fff;
   -webkit-transform: scale3d(0.9, 0.9, 1);
   transform: scale3d(0.9, 0.9, 1);
   -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
   transition: box-shadow 0.3s, transform 0.3s;
}

a.button--sacnite.button--inverted::before {
   box-shadow: inset 0 0 0 35px #fff;
}

a.button--sacnite span {
   font-size: 22px;
   width: 22px;
   color: #e0481d !important;
}

a.button--sacnite > span {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

a.button--sacnite:hover {
   color: #e0481d;
}

a.button--sacnite.button--inverted:hover {
   color: #fff;
}

a.button--sacnite:hover::before {
   box-shadow: inset 0 0 0 2px #e0481d;
   -webkit-transform: scale3d(1, 1, 1);
   transform: scale3d(1, 1, 1);
}

a.button--sacnite.button--inverted:hover::before {
   box-shadow: inset 0 0 0 2px #fff;
}

a.button.button--sacnite.button--round-l span {
   color: #e0481d !important;
}


/* Button Winona */

a.button--winona {
   overflow: hidden;
   padding: 0;
   -webkit-transition: border-color 0.3s, background-color 0.3s;
   transition: border-color 0.3s, background-color 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

a.button--winona::after {
   content: attr(data-text);
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   opacity: 0;
   color: #3f51b5;
   -webkit-transform: translate3d(0, 25%, 0);
   transform: translate3d(0, 25%, 0);
}

a.button--winona > span {
   display: block;
}

a.button--winona.button--inverted {
   color: #7986cb;
}

a.button--winona.button--inverted:after {
   color: #fff;
}

a.button--winona::after,
a.button--winona > span {
   padding: 1em 2em;
   -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
   transition: transform 0.3s, opacity 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

a.button--winona:hover {
   border-color: #3f51b5;
   background-color: rgba(63, 81, 181, 0.1);
}

a.button--winona.button--inverted:hover {
   border-color: #21333C;
   background-color: #21333C;
}

a.button--winona:hover::after {
   opacity: 1;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

a.button--winona:hover > span {
   opacity: 0;
   -webkit-transform: translate3d(0, -25%, 0);
   transform: translate3d(0, -25%, 0);
}


/* Button Aylen */

input.button.button--aylen {
   background: #fff;
   color: #37474f;
   overflow: hidden;
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
}

input.button--aylen.button--inverted {
   background: white;
   color: #fff;
   border: 3px solid red;
}

input.button--aylen::before,
input.button--aylen::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   bottom: 100%;
   left: 0;
   z-index: -1;
   -webkit-transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

input.button--aylen::before {
   background: #7986cb;
}

input.button--aylen::after {
   background: #3f51b5;
}

input.button--aylen:hover {
   color: #fff;
}

input.button--aylen:hover::before,
input.button--aylen:hover::after {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}

input.button--aylen:hover::after {
   -webkit-transition-delay: 0.175s;
   transition-delay: 0.175s;
}

input.btn-lined,
.btn-lined {
   background: white;
   border: 3px solid #e0481d;
   padding: .8em 2.8em;
   text-transform: uppercase;
   font-weight: 700;
   color: #e0481d;
   font-size: 1em;
   margin: 0.5em 0;
   display: inline-block;
}

input.btn-lined::before,
input.btn-lined::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   bottom: 100%;
   left: 0;
   z-index: -1;
   -webkit-transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
   transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

input.btn-lined::before {
   background-color: red;
}

input.btn-lined::after {
   background-color: green;
}

input.btn-lined:hover,
.btn-lined:hover {
   color: #fff;
}

input.btn-lined:hover::before,
input.btn-lined:hover::after {
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);
}

input.btn-lined:hover::after {
   -webkit-transition-delay: 0.175s;
   transition-delay: 0.175s;
}

body.error404 {
   background-image: url(img/ny.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   height: 100vh;
   width: 100%;
   overflow: hidden;
   /*Tipo*/
   /*section*/
}
#try {
   text-align: center;
}
.try-free {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

a.round-button {
   background-color: white;
   height: 120px;
   width: 120px;
   border-radius: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 2.2em;
   box-shadow: 0 5px 15px #1c1f2a69;
}
a.round-button i {
   animation: bounce 2s infinite alternate;
   -webkit-animation: bounce 2s infinite alternate;
   color: #2cabc2;
}



@keyframes bounce {
   from {
      transform: translateY(10px);
   }
   to {
      transform: translateY(-10px);
   }
}
@-webkit-keyframes bounce {
   from {
      transform: translateY(10px);
   }
   to {
      transform: translateY(-10px);
   }
}


.content {
   padding: 2em 0;
}

.content a {
   color: #b2bf2a;
   text-decoration: none;
   border-bottom: 2px solid #b2bf2a;
   -webkit-transition: border .3s linear;
   transition: border .3s linear;
}

.content-module img {
   z-index: 222;
   position: relative;
}


/*Waves*/

.box {
   width: 90%;
   height: 780px;
   border-radius: 5px;
   box-shadow: 0 2px 30px rgba(black, .2);
   background: lighten(#f0f4c3, 10%);
   position: absolute;
   left: 3em;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
   margin-top: 0;
   z-index: 0;
   left: 10%;
}

.wave {
   opacity: .7;
   position: absolute;
   top: 25%;
   left: 29%;
   background: #278A9B;
   width: 440px;
   height: 420px;
   margin-left: -250px;
   margin-top: 10px;
   transform-origin: 50% 48%;
   border-radius: 43%;
   animation: drift 35s infinite linear;
}

.wave.-four {
   opacity: .35;
   position: relative;
   top: 0%;
   left: 0;
   background: #e5b136;
   width: 46px;
   height: 50px;
   margin-left: 10px;
   transform-origin: 50% 48%;
   border-radius: 43%;
   animation: drift 15s infinite linear;
   z-index: 6;
}

.wave.-three {
   animation: drift 10s infinite linear;
   opacity: .8;
   background: #1D588B;
   right: 29%;
   left: auto;
   top: 2%;
   width: 240px;
   height: 220px;
   z-index: 0;
}

.wave.-two {
   animation: drift 7000ms infinite linear;
   opacity: .8;
   background: #1D588B;
   right: 29%;
   left: auto;
}

.box:after {
   content: '';
   display: block;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
   z-index: 11;
   transform: translate3d(0, 0, 0);
}



@keyframes drift {
   from {
      transform: rotate(0deg);
   }
   from {
      transform: rotate(360deg);
   }
}











/* Small only - Mobile */

@media screen and (max-width: 39.9375em) {
   body {
      overflow-x: hidden;
   }
   .slide {
      max-width: 100vw;
   }
   .slide-content-title h1 {
      font-size: 2.4em;
   }
   .slide .slide-content img {
      height: 210px;
   }
   #owl-demo .item {
      max-width: 1200px;
   }
   .slide {
      height: 70vh;
      min-height: 450px;
   }
   .slide h1 {
      font-size: 3em;
      top: 20%;
   }
   .large-padding {
      padding: 2.5em 0;
   }
   .default-padding {
      padding: 2em 0;
   }
   h2.big-title {
      font-size: 2.75em;
   }
   h3 {
      font-size: 2.5em;
   }
   .texting-big p,
   .big-mobile-text p {
      font-size: 1.2em;
   }

   .price-column {
      margin-bottom: 2em;

   }

   .zeus-intro {

      background: linear-gradient(to right, white 50%, #1c1f2a 50%);
      background-size: 200% 100%;
      background-position: bottom right;
      margin-left: 10px;
      transition: all 1.5s ease;
   }
   .zeus-intro.full-bg {
      opacity: 1;
      background-position: top right;
   }

   .social-logo,
   .analytics-logo {
      justify-content: space-between;
   }

   .top-page {
      height: 70vh;
   }

   .footer ul li {
      padding: .85em;
   }

   h2 {
      font-size: 2em;
      margin: 1em 0 0em;
   }
   .sub-footer {
      position: relative;
      left: 0;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
   }
   .sub-footer .zeus-footer-logo {
      text-align: center;
      padding-right: 0;
      padding-left: 0;
      margin-top: 20px;
   }

   .conection-logo {
      width: 49%;
      margin: 3px 0px;
   }

   .top-page-content,
   .top-page-default {
      height: 20vh;
   }
   .top-page-default h1 {
      font-size: 1.4em;
      text-align: center;
   }

   #contact,
   #contact .texting-big p {
      text-align: center !important;
   }


   .image-laptop {
      max-width: 100%;
   }

   .zeus-intro {
      margin-top: 0;
      margin-left: 0;
   }
   .zeus-box {
      margin-top: 0;
   }
   .slider-top-content {
      top: 0%;
      height: 60vh;
      min-height: 450px;
   }
   .box {
      width: 100%;
   }
   .wave {
      top: 30px;
      left: 0%;
      width: 300px;
      height: 300px;
      margin-left: 0;
      margin-top: 10px;
   }
   .wave.-two {
      right: 20%;
      left: auto;
      bottom: 4em;
      top: auto;
   }
   #mobile-header {
      display: block;
      z-index: 9999999999;
      position: fixed;
   }
   nav#nav-mobile ul {
      margin-bottom: 0;
      padding-left: 0;
      border-top: 1px solid #eeeeee;
   }
   nav#nav-mobile a {
      font-size: 14px !im
   }

   .big-title-box {
      margin-bottom: 0;
      text-align: center;
   }
   .main-devices .text-right {
      text-align: center !important;
   }

   #mobile-devices {
      display: block;
      text-align: center;
      text-align: center;
   }
   #scene {
      display: none;
   }

   .sentence {
      text-align: center;
   }

   a.round-button {
      height: 80px;
      width: 80px;
   }
   a.round-button i {
      font-size: .8em;
   }
   .pricing {
      margin-bottom: -110px;
   }
   p.white.small.text-right {
      text-align: center !important;
   }
   #contact h2 {
      font-size: 2.75em;
   }

   .area {
      max-width: 99vw;
      margin: 0 auto;
   }

   .wpcf7-form-control.g-recaptcha.wpcf7-recaptcha div {
    text-align: center;
    margin: .5em auto;

    .slider-image.container {
        margin-top: -110px;
    }
}

   /* Tablet vertical */
   @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      main {
         margin-top: 20px;
         max-width: 100%;
         overflow: hidden;
      }
      main.big-header {
         margin-top: 0;
      }
      body.single main.big-header {
         margin-top: 2em;
      }
      nav#nav-mobile ul {
         margin-bottom: 0;
         border-top: 1px solid #eeeeee;
      }
      div#nav-trigger {
         display: block;
      }
   }


   /* Horizontal Tablet  */
   @media only screen and (min-width: 48em) and (max-width: 64.063em) {
      #mobile-header {
         box-shadow: 0px 2px 2px #eee;
      }
      main {
         margin-top: 20px;
      }
      main.big-header {
         margin-top: 0;
      }
      body.single main.big-header {
         margin-top: 2em;
      }
      div#nav-trigger {
         display: block;
      }

   }

   @media all and (max-width: 64.063em) {
      #nav-trigger {
         display: inline-block;
         width: auto;
         position: absolute;
         left: 1%;
         top: 10px;
         z-index: 9999;
      }
      nav#nav-main {
         display: none;
      }
      nav#nav-mobile {
         display: block;
         padding-top: 15px;
         max-height: 75vh;
         overflow: auto;
         width: 100%;
      }
   }