html,
body {
height: 100%
}
html {
font-size: 10px;
box-sizing: border-box
}
*,
*::before,
*::after {
box-sizing: inherit
}
body {
font-weight: normal;
line-height: 1;
text-rendering: optimizeLegibility;
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: none
}
body,
input,
button {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased
}
@media only screen and (max-width: 1024px) {
html {
font-size: 9.375px
}
}
@media only screen and (max-width: 768px) {
html {
font-size: 10px
}
}
@media only screen and (max-width: 400px) {
html {
font-size: 9.375px
}
}
body {
background: #141515;
font-size: 1.6rem;
line-height: 1.875;
color: #767676;
margin: 0;
padding: 0
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin: 0;
padding: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility
}
em,
i {
font-style: italic;
line-height: inherit
}
strong,
b {
font-weight: bold;
line-height: inherit
}
small {
font-size: 60%;
line-height: inherit
}
ol,
ul {
list-style: none
}
li {
display: block
}
img,
video {
max-width: 100%;
height: auto
}
a {
text-decoration: none;
line-height: inherit
}
a img {
border: none
}
a,
a:visited {
color: #ec965f;
transition: all 0.3s ease-in-out
}
a:hover,
a:focus {
color: #ffffff
}
fieldset {
margin: 0;
padding: 0
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none
}
h1.intro-header {
font-family: "montserrat", sans-serif;
font-size: 3.4rem;
line-height: 1.324;
color: #151515;
position: relative;
padding-bottom: 3.6rem
}
h1.intro-header::before {
display: block;
content: "";
height: 2px;
width: 70px;
background-color: #2681c7;
position: absolute;
left: 0;
bottom: 0
}
.wide {
max-width: 1300px
}
.narrow {
max-width: 800px
}
@media only screen and (max-width: 768px) {
h1.intro-header {
font-size: 3.1rem
}
}
@media only screen and (max-width: 600px) {
h1.intro-header {
font-size: 2.6rem
}
}
button,
.button {
margin-bottom: 1.2rem
}
fieldset {
margin-bottom: 1.5rem
}
input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.fluid-video-wrapper,
.ss-custom-select {
margin-bottom: 3rem
}
body {
font-family: "mulish", sans-serif
}
h1,
h2,
h3,
h4,
h5,
h6,
.h01,
.h02,
.h03,
.h04,
.h05,
.h06 {
font-family: "montserrat", sans-serif;
color: #151515;
font-style: normal;
text-rendering: optimizeLegibility;
margin-bottom: 2.4rem
}
h3,
.h03,
h4,
.h04 {
margin-bottom: 1.5rem
}
h5,
.h05,
h6,
.h06 {
margin-bottom: 1.2rem
}
h1,
.h01 {
font-size: 3.1rem;
line-height: 1.35;
letter-spacing: -0.1rem
}
@media only screen and (max-width: 600px) {
h1,
.h01 {
font-size: 2.6rem;
letter-spacing: -0.07rem
}
}
h2,
.h02 {
font-size: 2.4rem;
line-height: 1.25
}
h3,
.h03 {
font-size: 2rem;
line-height: 1.5
}
h4,
.h04 {
font-size: 1.7rem;
line-height: 1.76
}
h5,
.h05 {
font-size: 1.4rem;
line-height: 1.7;
text-transform: uppercase;
letter-spacing: 0.2rem
}
h6,
.h06 {
font-size: 1.3rem;
line-height: 1.85;
text-transform: uppercase;
letter-spacing: 0.2rem
}
p img {
margin: 0
}
p.lead {
font-weight: 300;
font-size: 2.1rem;
line-height: 1.857;
color: #838383;
margin-bottom: 3.6rem
}
p.lead strong {
font-size: inherit
}
@media only screen and (max-width: 768px) {
p.lead {
font-size: 2rem
}
}
em,
i,
strong,
b {
font-size: 1.6rem;
line-height: 1.875;
font-style: normal;
font-weight: normal
}
em,
i {
font-style: italic
}
strong,
b {
font-weight: bold
}
small {
font-size: 1.1rem;
line-height: inherit
}
blockquote {
margin: 3rem 0;
padding-left: 5rem;
position: relative
}
blockquote:before {
content: "\201C";
font-size: 10rem;
line-height: 0px;
margin: 0;
color: rgba(0, 0, 0, 0.3);
font-family: arial, sans-serif;
position: absolute;
top: 3.6rem;
left: 0
}
blockquote p {
font-weight: 300;
padding: 0;
font-size: 1.9rem;
line-height: 1.895
}
blockquote cite {
display: block;
font-size: 1.3rem;
font-style: normal;
line-height: 1.615
}
blockquote cite:before {
content: "\2014 \0020"
}
blockquote cite a,
blockquote cite a:visited {
color: #838383;
border: none
}
abbr {
font-weight: bold;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: 0.05rem;
color: #838383
}
var,
kbd,
samp,
code,
pre {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace
}
pre {
padding: 2.4rem 3rem 3rem;
background: #f1f1f1
}
code {
font-size: 1.4rem;
margin: 0 0.2rem;
padding: 0.3rem 0.6rem;
white-space: nowrap;
background: #f1f1f1;
border: 1px solid #e1e1e1;
border-radius: 3px
}
pre>code {
display: block;
white-space: pre;
line-height: 2;
padding: 0;
margin: 0
}
pre.prettyprint>code {
border: none
}
del {
text-decoration: line-through
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none
}
mark {
background: #fff49b;
color: #000
}
hr {
border: solid rgba(0, 0, 0, 0.1);
border-width: 1px 0 0;
clear: both;
margin: 2.4rem 0 1.5rem;
height: 0
}
.is-hidden {
display: none
}
.is-invisible {
visibility: hidden
}
.antialiased {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.overflow-hidden {
overflow: hidden
}
.remove-bottom {
margin-bottom: 0
}
.half-bottom {
margin-bottom: 1.5rem !important
}
.add-bottom {
margin-bottom: 3rem !important
}
.no-border {
border: none
}
.full-width {
width: 100%
}
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.pull-left {
float: left
}
.pull-right {
float: right
}
.align-center {
margin-left: auto;
margin-right: auto;
text-align: center
}
.flip-horizontally {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-filter: FlipH;
filter: FlipH
}
img.pull-right {
margin: 1.5rem 0 0 3rem
}
img.pull-left {
margin: 1.5rem 3rem 0 0
}
.row {
width: 94%;
max-width: 1170px;
margin: 0 auto
}
.row:after {
content: "";
display: table;
clear: both
}
.row .row {
width: auto;
max-width: none;
margin-left: -20px;
margin-right: -20px
}
[class*="col-"],
.bgrid {
float: left
}
[class*="col-"]+[class*="col-"].end {
float: right
}
[class*="col-"] {
padding: 0 20px
}
.col-one {
width: 8.33333%
}
.col-two,
.col-1-6 {
width: 16.66667%
}
.col-three,
.col-1-4 {
width: 25%
}
.col-four,
.col-1-3 {
width: 33.33333%
}
.col-five {
width: 41.66667%
}
.col-six,
.col-1-2 {
width: 50%
}
.col-seven {
width: 58.33333%
}
.col-eight,
.col-2-3 {
width: 66.66667%
}
.col-nine,
.col-3-4 {
width: 75%
}
.col-ten,
.col-5-6 {
width: 83.33333%
}
.col-eleven {
width: 91.66667%
}
.col-twelve,
.col-full {
width: 100%
}
@media only screen and (max-width: 1024px) {
.row .row {
margin-left: -18px;
margin-right: -18px
}
[class*="col-"] {
padding: 0 18px
}
.md-two,
.md-1-6 {
width: 16.66667%
}
.md-one {
width: 8.33333%
}
.md-three,
.md-1-4 {
width: 25%
}
.md-four,
.md-1-3 {
width: 33.33333%
}
.md-five {
width: 41.66667%
}
.md-six,
.md-1-2 {
width: 50%
}
.md-seven {
width: 58.33333%
}
.md-eight,
.md-2-3 {
width: 66.66667%
}
.md-nine,
.md-3-4 {
width: 75%
}
.md-ten,
.md-5-6 {
width: 83.33333%
}
.md-eleven {
width: 91.66667%
}
.md-twelve,
.md-full {
width: 100%
}
}
@media only screen and (max-width: 768px) {
.row {
width: auto;
padding-left: 30px;
padding-right: 30px
}
.row .row {
padding-left: 0;
padding-right: 0;
margin-left: -15px;
margin-right: -15px
}
[class*="col-"] {
padding: 0 15px
}
.tab-1-4 {
width: 25%
}
.tab-1-3 {
width: 33.33333%
}
.tab-1-2 {
width: 50%
}
.tab-2-3 {
width: 66.66667%
}
.tab-3-4 {
width: 75%
}
.tab-full {
width: 100%
}
}
@media only screen and (max-width: 600px) {
.row {
padding-left: 25px;
padding-right: 25px
}
.row .row {
margin-left: -10px;
margin-right: -10px
}
[class*="col-"] {
padding: 0 10px
}
.mob-1-4 {
width: 25%
}
.mob-1-3 {
width: 33.33333%
}
.mob-1-2 {
width: 50%
}
.mob-2-3 {
width: 66.66667%
}
.mob-3-4 {
width: 75%
}
.mob-full {
width: 100%
}
}
@media only screen and (max-width: 400px) {
.row .row {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0
}
[class*="col-"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0;
padding: 0
}
[class*="col-"]+[class*="col-"].end {
float: none
}
}
[class*="block-"]:after {
content: "";
display: table;
clear: both
}
.block-1-6 .bgrid {
width: 16.66667%
}
.block-1-5 .bgrid {
width: 20%
}
.block-1-4 .bgrid {
width: 25%
}
.block-1-3 .bgrid {
width: 33.33333%
}
.block-1-2 .bgrid {
width: 50%
}
.block-1-6 .bgrid:nth-child(6n+1),
.block-1-5 .bgrid:nth-child(5n+1),
.block-1-4 .bgrid:nth-child(4n+1),
.block-1-3 .bgrid:nth-child(3n+1),
.block-1-2 .bgrid:nth-child(2n+1) {
clear: both
}
@media only screen and (max-width: 1024px) {
.block-m-1-6 .bgrid {
width: 16.66667%
}
.block-m-1-5 .bgrid {
width: 20%
}
.block-m-1-4 .bgrid {
width: 25%
}
.block-m-1-3 .bgrid {
width: 33.33333%
}
.block-m-1-2 .bgrid {
width: 50%
}
.block-m-full .bgrid {
width: 100%;
clear: both
}
[class*="block-m-"] .bgrid:nth-child(n) {
clear: none
}
.block-m-1-6 .bgrid:nth-child(6n+1),
.block-m-1-5 .bgrid:nth-child(5n+1),
.block-m-1-4 .bgrid:nth-child(4n+1),
.block-m-1-3 .bgrid:nth-child(3n+1),
.block-m-1-2 .bgrid:nth-child(2n+1) {
clear: both
}
}
@media only screen and (max-width: 768px) {
.block-tab-1-6 .bgrid {
width: 16.66667%
}
.block-tab-1-5 .bgrid {
width: 20%
}
.block-tab-1-4 .bgrid {
width: 25%
}
.block-tab-1-3 .bgrid {
width: 33.33333%
}
.block-tab-1-2 .bgrid {
width: 50%
}
.block-tab-full .bgrid {
width: 100%;
clear: both
}
[class*="block-tab-"] .bgrid:nth-child(n) {
clear: none
}
.block-tab-1-6 .bgrid:nth-child(6n+1),
.block-tab-1-6 .bgrid:nth-child(5n+1),
.block-tab-1-4 .bgrid:nth-child(4n+1),
.block-tab-1-3 .bgrid:nth-child(3n+1),
.block-tab-1-2 .bgrid:nth-child(2n+1) {
clear: both
}
}
@media only screen and (max-width: 600px) {
.block-mob-1-6 .bgrid {
width: 16.66667%
}
.block-mob-1-5 .bgrid {
width: 20%
}
.block-mob-1-4 .bgrid {
width: 25%
}
.block-mob-1-3 .bgrid {
width: 33.33333%
}
.block-mob-1-2 .bgrid {
width: 50%
}
.block-mob-full .bgrid {
width: 100%;
clear: both
}
[class*="block-mob-"] .bgrid:nth-child(n) {
clear: none
}
.block-mob-1-6 .bgrid:nth-child(6n+1),
.block-mob-1-5 .bgrid:nth-child(5n+1),
.block-mob-1-4 .bgrid:nth-child(4n+1),
.block-mob-1-3 .bgrid:nth-child(3n+1),
.block-mob-1-2 .bgrid:nth-child(2n+1) {
clear: both
}
}
@media only screen and (max-width: 400px) {
.stack .bgrid {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
}
.bgrid {
padding: 0 20px
}
@media only screen and (max-width: 1024px) {
.bgrid {
padding: 0 18px
}
}
@media only screen and (max-width: 768px) {
.bgrid {
padding: 0 15px
}
}
@media only screen and (max-width: 600px) {
.bgrid {
padding: 0 10px
}
}
@media only screen and (max-width: 400px) {
.bgrid {
padding: 0
}
}
.group:after {
content: "";
display: table;
clear: both
}
#header {
width: 100%;
height: 72px;
background-color: #ffffff;
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 501;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.26)
}
.header-img {
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 1s ease-in-out;
z-index: 501
}
.header-logo {
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all 1s ease-in-out;
z-index: 501
}
.header-logo a {
display: block;
margin: 0;
padding: 0;
outline: 0;
border: none;
width: 197px;
height: 82px;
background: url(../../content/img/logo_xs.png) no-repeat center;
background-size: contain;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: all 0.5s ease-in-out
}
.header-menu-toggle {
display: none;
position: fixed;
right: 32px;
top: 15px;
height: 42px;
width: 42px;
line-height: 42px;
font-family: "montserrat", sans-serif;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease-in-out
}
.header-menu-toggle:hover,
.header-menu-toggle:focus {
color: #f0f0f0
}
.header-menu-toggle span {
display: block;
width: 24px;
height: 2px;
margin-top: -1px;
position: absolute;
left: 9px;
top: 50%;
right: auto;
bottom: auto;
background-color: white;
transition: all 0.5s ease-in-out;
font: 0/0 a;
text-shadow: none;
color: transparent
}
.header-menu-toggle span::before,
.header-menu-toggle span::after {
content: "";
width: 100%;
height: 100%;
background-color: inherit;
position: absolute;
left: 0;
transition: all 0.5s ease-in-out
}
.header-menu-toggle span::before {
top: -9px
}
.header-menu-toggle span::after {
bottom: -9px
}
.header-menu-toggle.is-clicked span {
background-color: rgba(255, 255, 255, 0);
transition: all 0.1s ease-in-out
}
.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
background-color: white
}
.header-menu-toggle.is-clicked span::before {
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
.header-menu-toggle.is-clicked span::after {
bottom: 0;
-webkit-transform: rotate(225deg);
transform: rotate(225deg)
}
#header-nav-wrap {
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 14px;
position: absolute;
top: 0;
right: 40px
}
#header-nav-wrap .header-main-nav {
display: inline-block;
list-style: none;
height: 72px;
margin: 0 1rem 0 0
}
#header-nav-wrap .header-main-nav li {
display: inline-block;
padding-left: 0;
margin-right: 1.5rem
}
#header-nav-wrap .header-main-nav li a {
display: block;
line-height: 72px
}
#header-nav-wrap .header-main-nav li a,
#header-nav-wrap .header-main-nav li a:visited {
color: #470685 /* Anterior:72366D */
}
#header-nav-wrap .header-main-nav li a:hover,
#header-nav-wrap .header-main-nav li a:focus {
color: #CE8F64 /* Anterior:CE8F64 */
}
#header-nav-wrap .header-main-nav li.current a {
color: #831c83 /* Anterior:dddcdc */
}
#header-nav-wrap .cta {
height: 3.6rem;
line-height: calc(3.6rem - 0.6rem);
padding: 0 1.5rem;
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 14px;
text-transform: none;
letter-spacing: normal;
margin: 0
}
@media only screen and (max-width: 1230px) {
#header {
max-width: none
}
}
@media only screen and (max-width: 768px) {
.header-logo a {
width: 100px
}
#header-nav-wrap {
display: none;
height: auto;
width: 100%;
right: auto;
left: 0;
background-color: #111111;
padding: 30px 40px 54px;
top: 72px
}
#header-nav-wrap .header-main-nav {
display: block;
height: auto;
margin: 0 0 4.2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.03)
}
#header-nav-wrap .header-main-nav li {
display: block;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03)
}
#header-nav-wrap .header-main-nav li a {
padding: 18px 0;
line-height: 18px
}
#header-nav-wrap .cta {
height: 42px;
line-height: calc(42px - 0.6rem);
padding: 0 30px
}
.header-menu-toggle {
display: block
}
}
@media only screen and (max-width: 600px) {
#header-nav-wrap .cta {
padding: 0 20px
}
}
@media only screen and (max-width: 400px) {
.header-menu-toggle {
right: 24px
}
}
@media only screen and (min-width: 769px) {
#header-nav-wrap {
display: block !important
}
}
footer {
padding: 2rem;
font-size: 1.5rem;
line-height: 2.7rem;
color: rgba(255, 255, 255, 0.25)
}
footer a,
footer a:visited {
color: #CE8F64
}
footer a:hover,
footer a:focus {
color: white
}
footer h4 {
color: white;
font-size: 1.5rem;
padding-bottom: 2.4rem;
margin-bottom: 2.4rem;
position: relative
}
footer h4::before {
content: "";
display: block;
width: 120px;
height: 1px;
background-color: rgba(255, 255, 255, 0.05);
position: absolute;
left: 0;
bottom: 0
}
footer ul {
list-style: none;
margin: 0
}
footer ul li {
padding-left: 0
}
footer ul a,
footer ul a:visited {
color: rgba(255, 255, 255, 0.25)
}
.footer-logo {
display: block;
margin: 0 0 3rem 0;
padding: 0;
outline: 0;
border: none;
width: 131px;
height: 56px;
background: url(../branding/logo_xs.png) no-repeat center;
background-size: contain;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: all 0.5s ease-in-out
}
.footer-social-list {
font-size: 1.8rem;
margin-top: -1.5rem;
margin-bottom: 3rem
}
.footer-social-list li {
display: inline-block;
margin-right: 8px
}
.footer-social-list li:last-child {
margin-right: 0
}
.footer-site-links .list-links {
margin-bottom: 3rem
}
.footer-bottom {
text-align: center
}
.footer-bottom .copyright span {
display: inline-block
}
.footer .copyright a,
.footer .copyright a:visited {
color: #ec965f
}
.footer-bottom .copyright span::after {
content: "|";
display: inline-block;
padding: 0 1rem 0 1.2rem;
color: rgba(255, 255, 255, 0.1)
}
.footer-bottom .copyright span:last-child::after {
display: none
}
@media only screen and (max-width: 1024px) {
.footer-main>.row {
max-width: 800px
}
.footer-info,
.footer-contact,
.footer-site-links {
margin-bottom: 1.2rem
}
.footer-subscribe {
clear: both
}
}
@media only screen and (max-width: 768px) {
.footer-main>.row {
max-width: 600px
}
.footer-logo {
margin-left: auto;
margin-right: auto
}
.footer-info {
text-align: center
}
#go-top {
bottom: 0;
right: 0
}
#go-top a,
#go-top a:visited {
border-radius: 5px 0 0 0
}
}
@media only screen and (max-width: 600px) {
.footer-main .row {
max-width: 480px
}
.footer-main h4 {
padding-bottom: 0;
margin-bottom: 2.4rem
}
.footer-main h4::before {
display: none
}
.footer-main ul.list-links {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto
}
.footer-main ul.list-links li a {
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
padding: 0.6rem 0
}
.footer-main ul.list-links li:first-child a {
border-top: 1px solid rgba(255, 255, 255, 0.03)
}
.footer-contact,
.footer-site-links,
.footer-subscribe {
text-align: center
}
.footer-bottom {
padding-bottom: 0.6rem
}
.footer-bottom .copyright span {
display: block
}
.footer-bottom .copyright span::after {
display: none
}
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: 800;
height: 100%;
width: 100%
}
.no-js #preloader,
.oldie #preloader {
display: none
}
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 2000;
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 5px;
width: 150px;
background: #dedede;
overflow: hidden
}
.pace .pace-progress { /* <--------- BARRA DE CARGAR PAGINA */
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
max-width: 150px;
position: fixed;
z-index: 2000;
display: block;
position: absolute;
top: 0;
right: 100%;
height: 100%;
width: 100%;
background: #5980e9
}
.pace.pace-inactive {
display: none
}
.oldie .pace {
display: none
}
ol {
list-style: decimal
}
ul {
list-style: disc
}
li {
display: list-item
}
ol,
ul {
margin-left: 1.7rem
}
ul li {
padding-left: 0.4rem
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 0.6rem 0 0.6rem 1.7rem
}
ul.disc li {
display: list-item;
list-style: none;
padding: 0 0 0 0.8rem;
position: relative
}
ul.disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #2681c7;
position: absolute;
left: -17px;
top: 11px;
vertical-align: middle
}
dt {
margin: 0;
color: #2681c7
}
dd {
margin: 0 0 0 2rem
}
fieldset {
border: none
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
display: block;
height: 6rem;
padding: 1.5rem 2rem;
border: 0;
outline: none;
color: #333333;
font-size: 1.5rem;
line-height: 3rem;
max-width: 100%;
background: rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
border-radius: 5px
}
.ss-custom-select {
position: relative;
padding: 0
}
.ss-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: "";
margin: 0;
line-height: 3rem;
vertical-align: middle
}
.ss-custom-select select option {
padding-left: 2rem;
padding-right: 2rem
}
.ss-custom-select select::-ms-expand {
display: none
}
.ss-custom-select::after {
content: "\f0d7";
font-family: "FontAwesome";
position: absolute;
top: 50%;
right: 1.5rem;
margin-top: -10px;
bottom: auto;
width: 20px;
height: 20px;
line-height: 20px;
font-size: 18px;
text-align: center;
pointer-events: none;
color: #252525
}
.oldie .ss-custom-select::after {
display: none
}
textarea {
min-height: 25rem
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color: #000000
}
label,
legend {
font-family: "montserrat", sans-serif;
font-weight: bold;
font-size: 1.4rem;
margin-bottom: 0.6rem;
color: #151515;
display: block
}
input[type="checkbox"],
input[type="radio"] {
display: inline
}
label>.label-text {
display: inline-block;
margin-left: 1rem;
font-family: "montserrat", sans-serif;
line-height: inherit
}
label>input[type="checkbox"],
label>input[type="radio"] {
margin: 0;
position: relative;
top: 0.15rem
}
::-webkit-input-placeholder {
color: #838383
}
:-moz-placeholder {
color: #838383
}
::-moz-placeholder {
color: #838383
}
:-ms-input-placeholder {
color: #838383
}
.placeholder {
color: #838383 !important
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
-webkit-text-fill-color: #57ca67;
-webkit-transition: background-color 5000s ease-in-out 0s;
transition: background-color 5000s ease-in-out 0s
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
font-family: "montserrat", sans-serif;
font-size: 1.5rem;
height: 5.4rem;
line-height: calc(5.4rem - 0.6rem);
padding: 0 3rem;
margin: 0 0.3rem 1.2rem 0;
color: #222222;
text-decoration: none;
cursor: pointer;
text-align: center;
white-space: nowrap;
border-radius: 0.5rem;
transition: all 0.3s ease-in-out;
background-color: #ffffff;
border: 0.3rem solid #ffffff
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: #ffffff;
border-color: #ffffff;
color: #000000;
outline: 0
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
background-color: #4c007ea1;
border-color: #350753cb;
color: #ffffff
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
background: #148bc2;
border-color: #0EA5E9;
}
button.full-width,
.button.full-width {
width: 100%;
margin-right: 0
}
button.medium,
.button.medium {
height: 5.7rem !important;
line-height: calc(5.7rem - 0.6rem) !important
}
button.large,
.button.large {
height: 6rem !important;
line-height: calc(6rem - 0.6rem) !important
}
button.stroke, /* <------------------------ BOTON Contactanos por WhastApp */
.button.stroke {
background: transparent !important;
color: #ffffff !important
}
button.stroke.button-primary,
.button.stroke.button-primary {
color: #ffffff !important
}
button.stroke:hover,
.button.stroke:hover {
border: 0.3rem solid #ffffff;
color: #ffffff
}
button.pill,
.button.pill {
padding-left: 3rem !important;
padding-right: 3rem !important;
border-radius: 1000px
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
.alert-box {
padding: 2.1rem 4rem 2.1rem 3rem;
position: relative;
margin-bottom: 3rem;
border-radius: 3px;
font-family: "montserrat", sans-serif;
font-size: 1.5rem
}
.alert-box .close {
position: absolute;
right: 1.8rem;
top: 1.8rem;
cursor: pointer
}
.ss-error {
background-color: #ffd1d2;
color: #e65153
}
.ss-success {
background-color: #c8e675;
color: #758c36
}
.ss-info {
background-color: #d7ecfb;
color: #4a95cc
}
.ss-notice {
background-color: #fff099;
color: #bba31b
}
#home {
width: 100%;
height: 786px;
min-height: 786px;
background-color: transparent;
position: relative;
display: table
}
#home .shadow-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
background: linear-gradient(to right, black 0%, black 20%, transparent 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000', GradientType=1)
}
#home .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #FFFFFF 0%, #e5f9ff 65%, #cceaff 100%)
/* background: linear-gradient(to bottom right, #FFFFFF 0%, #c193f5 65%, #6f2bed 100%) */
}
.no-js #home {
background: #151515
}
.home-content {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: bottom
}
.home-content .contents {
position: relative
}
.home-content-left {
padding: 15rem 0 12rem 40px;
position: relative;
width: 50%
}
.home-content-left h3 {
color: rgba(11, 13, 69, 0.8); /*rgba(11, 13, 69, 0.8);*/
font-size: 1.6rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: 0.2rem;
margin-bottom: 2.4rem
}
.home-content-left h1 {
font-family: "montserrat", sans-serif;
font-size: 5.2rem;
letter-spacing: -0.05rem;
line-height: 1.269;
color: #2b0b45cc;
margin-bottom: 9rem
}
.home-content-left .note {
color: #2b0b45cc;
margin: 0 1rem;
font-size: 1.3rem
}
.home-content-left .button.stroke {
color: #ffffffcc !important;
border-color: #ffffffcc;
margin: 0 0.6rem 1.2rem;
padding: 0 2.2rem;
min-width: 188px
}
.home-content-left .button.stroke span[class*="icon"] {
margin-right: 5px;
position: relative;
top: 2px
}
.home-content-left .button.stroke:hover,
.home-content-left .button.stroke:focus {
background-color: #ffffff !important;
color: #000000 !important
}
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 500;
width: 60%;
text-align: right
}
.home-image-right img {
vertical-align: bottom
}
.home-social-list {
position: absolute;
right: 42px;
top: 50%;
margin: 0;
padding: 0;
list-style: none;
font-size: 2.2rem;
line-height: 1.75;
text-align: center;
-webkit-transform: translateY(-55%);
transform: translateY(-55%)
}
.home-social-list::before {
display: block;
content: "";
width: 2px;
height: 42px;
background-color: rgba(255, 255, 255, 0.15);
margin-left: auto;
margin-right: auto;
margin-bottom: 12px
}
.home-social-list li {
padding-left: 0
}
.home-social-list li a,
.home-social-list li a:visited,
.home-social-list li a:hover,
.home-social-list li a:focus,
.home-social-list li a:active {
color: #ffffff
}
.home-scrolldown {
position: absolute;
bottom: 0;
right: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: right top;
transform-origin: right top;
float: right
}
.home-scrolldown i {
padding-left: 9px;
color: #ffffff !important
}
.home-scrolldown a:hover,
.home-scrolldown a:focus {
color: #ffffff !important
}
html[data-useragent*="MSIE 10.0"] .home-scrolldown,
.oldie .home-scrolldown {
display: none
}
.scroll-icon {
display: inline-block;
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.3rem;
color: #ffffff !important;
background: transparent;
position: relative;
top: 36px;
right: 42px;
-webkit-animation: animate-it 3s ease infinite;
animation: animate-it 3s ease infinite
}
.scroll-icon i {
font-size: 2.4rem;
position: relative;
bottom: -6px
}
@-webkit-keyframes animate-it {
0%,
60%,
80%,
100% {
-webkit-transform: translateX(0)
}
0%,
60%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
20% {
-webkit-transform: translateX(-5px)
}
20% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px)
}
40% {
-webkit-transform: translateX(20px)
}
40% {
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
}
@keyframes animate-it {
0%,
60%,
80%,
100% {
-webkit-transform: translateX(0)
}
0%,
60%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0)
}
20% {
-webkit-transform: translateX(-5px)
}
20% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px)
}
40% {
-webkit-transform: translateX(20px)
}
40% {
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
}
@media only screen and (max-width: 1300px) {
.home-image-right {
right: 5rem
}
}
@media only screen and (max-width: 1200px) {
#home {
overflow: hidden
}
.home-content {
vertical-align: middle
}
.home-content-left {
padding: 18rem 0 12rem 40px
}
.home-content-left h3 {
font-size: 1.5rem
}
.home-content-left h1 {
font-size: 4.8rem
}
.home-image-right {
padding-top: 18rem
}
.home-image-right img {
vertical-align: top;
width: 70%
}
}
@media only screen and (max-width: 1100px) {
.home-content-left h1 {
font-size: 4.6rem
}
.home-content-left h1 br {
display: none
}
}
@media only screen and (max-width: 1024px) {
.home-content-left {
width: 60%;
padding: 18rem 6rem 12rem 4rem
}
.home-content-left h3 {
font-size: 1.5rem
}
.home-content-left h1 {
font-size: 4.2rem
}
.home-image-right {
width: 50%;
padding-top: 100px
}
.home-image-right img {
vertical-align: top;
width: 100%
}
}
@media only screen and (max-width: 900px) {
#home {
height: auto;
min-height: 840px
}
#home,
.home-content {
display: block;
text-align: center
}
.home-content-left {
width: 94%;
position: static;
padding: 15rem 6rem 366px;
margin: 0 auto
}
.home-content-left h1 {
margin-bottom: 3.6rem
}
.home-image-right {
width: 400px;
right: auto;
top: auto;
left: 50%;
bottom: -40px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 0;
margin-bottom: -8px
}
}
@media only screen and (max-width: 768px) {
#home {
min-height: auto
}
.home-content-left h3 {
font-size: 1.4rem
}
.home-content-left h1 {
font-size: 3.6rem
}
}
@media only screen and (max-width: 600px) {
.home-content-left {
padding: 12rem 6rem 366px
}
.home-content-left h1 {
font-size: 3.3rem
}
.home-content-left .button.stroke {
width: 100%;
min-width: 0;
max-width: 280px
}
.home-social-list {
font-size: 2rem;
right: 30px
}
.scroll-icon {
top: 21px
}
}
@media only screen and (max-width: 500px) {
.home-social-list,
.home-scrolldown {
display: none
}
.home-content-left {
padding: 12rem 2.5rem 366px;
width: 100%
}
.home-content-left h1 {
font-size: 3rem
}
}
@media only screen and (max-width: 400px) {
.home-content-left {
padding: 12rem 0 300px
}
.home-content-left .button.stroke {
margin: 0 0 1.2rem 0
}
.home-image-right {
width: 320px;
margin-bottom: -8px
}
}
#about {
min-height: 786px;
background: #ffffff;
padding-top: 18rem;
overflow: hidden
}
.about-intro {
padding-bottom: 3.6rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.07)
}
.about-features .features-list {
padding-top: 5.4rem
}
.about-features .feature {
margin-bottom: 1.8rem
}
.about-features .feature img {
margin-bottom: 1.5rem;
max-width: 100px
}
.about-features .feature .icon {
margin-bottom: 1.5rem;
display: inline-block
}
.about-features .feature .icon i {
color: #2681c7;
font-size: 4.8rem
}
.about-features .feature h3 {
font-family: "montserrat", sans-serif;
font-size: 1.9rem;
color: #151515;
margin-bottom: 3rem
}
.about-features .feature .service-content {
margin-bottom: 2rem
}
.about-features .feature .service-content p {
margin-bottom: 1rem
}
.about-how {
padding-top: 7.2rem
}
.about-how h1.intro-header {
text-align: center;
margin-bottom: 3.6rem
}
#why {
min-height: 786px;
background: #ffffff;
overflow: hidden
}
#why .about-how h1.intro-header::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.about-how-content {
position: relative;
width: 100%;
max-width: 1000px;
min-height: 300px;
margin-top: 7.2rem;
margin-left: auto;
margin-right: auto;
clear: both
}
.about-how-content::before,
.about-how-content::after {
content: "";
display: block;
width: 1px;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 0
}
.about-how-content::before {
left: 0
}
.about-how-content::after {
left: 50%
}
.about-how-content .about-how-steps {
width: 100%
}
.about-how-content .step {
padding: 0 40px 1.5rem 60px;
position: relative;
min-height: 240px
}
.about-how-content .step h3 {
margin-bottom: 2.4rem
}
.about-how-content .step::before {
display: block;
font-weight: bold;
font-size: 2rem;
content: attr(data-item);
color: initial;
height: 54px;
width: 54px;
line-height: 54px;
text-align: center;
border-radius: 50%;
background-color: #b3e9ef;
box-shadow: 0 0 0 15px #ffffff;
z-index: 500;
position: absolute;
top: -12px;
left: -27px
}
.about-bottom-image img {
vertical-align: bottom
}
@media only screen and (max-width: 1200px) {
.about-how-content {
max-width: 800px
}
}
@media only screen and (max-width: 1024px) {
.about-intro {
max-width: 800px;
text-align: center
}
.about-intro h1::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.about-intro [class*="col-"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
.about-how-content {
max-width: 700px
}
}
@media only screen and (max-width: 850px) {
.about-how-content {
max-width: 550px
}
.about-how-content::after {
display: none
}
.about-how-content .step {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0;
padding-right: 18px;
min-height: auto;
padding: 0 40px 0.9rem 60px
}
}
@media only screen and (max-width: 768px) {
.about-features .feature .icon i {
font-size: 4.4rem
}
.about-features .feature h3 {
font-size: 1.8rem
}
.about-how h3 {
font-size: 1.9rem
}
.about-how-content::before {
left: 30px
}
.about-how-content .step {
padding: 0 10px 0 80px
}
.about-how-content .step::before {
font-size: 1.6rem;
height: 45px;
width: 45px;
line-height: 45px;
top: -9px;
left: 7.5px
}
.about-bottom-image {
display: none
}
#about {
padding-bottom: 15rem
}
}
@media only screen and (max-width: 650px) {
.about-features {
max-width: 600px;
text-align: center
}
.about-features .feature {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0;
margin-bottom: 4.5rem
}
.about-features .feature h3 {
margin-bottom: 1.5rem
}
}
@media only screen and (max-width: 400px) {
.about-how-content {
text-align: center
}
.about-how-content::before {
display: none
}
.about-how-content .step {
padding: 60px 0 0 0
}
.about-how-content .step::before {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
}
#plans {
background: #ffffff;
padding-top: 15rem;
padding-bottom: 12rem
}
#plans h1 {
margin-bottom: 3.6rem
}
.pricing-intro {
padding-top: 0.6rem
}
.pricing-intro p span,
.pricing-intro p strong {
color: #2681c7
}
.pricing-table {
text-align: center
}
.pricing-table .plan-block {
background: #ffffff;
border-radius: 5px;
padding: 4.8rem 2rem 5.4rem;
margin-bottom: 4.8rem;
position: relative
}
.pricing-table .plan-block:after {
content: "";
display: table;
clear: both
}
.pricing-table .plan-block .plan-block-title {
font-family: "montserrat", sans-serif;
font-size: 2.4rem;
margin-bottom: 3.6rem;
margin-top: 16px
}
.pricing-table .plan-block .plan-block-price {
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 5.8rem;
color: #151515;
line-height: 1;
margin-bottom: 0
}
.pricing-table .plan-block .plan-block-price sup {
font-family: "montserrat", sans-serif;
font-size: 2rem;
top: -3.6rem;
margin-right: 3px
}
.pricing-table .plan-block .plan-block-price sub {
font-family: "montserrat", sans-serif;
font-size: 2rem;
bottom: 0rem;
margin-left: 3px
}
.pricing-table .plan-block .plan-block-per {
margin-top: -0.6rem;
margin-bottom: 0;
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 1.7rem
}
.pricing-table .plan-block .plan-block-features {
list-style: none;
margin: 0 2rem 4.2rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
font-size: 1.6rem;
line-height: 2.4rem
}
.pricing-table .plan-block .plan-block-features li {
padding: 1.2rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.pricing-table .plan-block .plan-block-features li span {
color: #2681c7;
font-weight: bold
}
.pricing-table .plan-block.primary {
background: #2681c7;
color: rgba(255, 255, 255, 0.8)
}
.pricing-table .plan-block.primary .plan-block-title,
.pricing-table .plan-block.primary .plan-block-price {
color: #ffffff
}
.pricing-table .plan-block.primary .plan-block-features {
border-top: 1px solid rgba(255, 255, 255, 0.2)
}
.pricing-table .plan-block.primary .plan-block-features li {
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}
.pricing-table .plan-block.primary .plan-block-features li span {
color: #ffffff
}
.pricing-table .plan-block.primary .button.button-primary {
background: #ffffff;
color: #151515;
border-color: #ffffff
}
.pricing-table .plan-block.primary .button.button-primary:hover,
.pricing-table .plan-block.primary .button.button-primary:focus {
color: #2681c7
}
.pricing-table .plan-block.primary .button.button-primary.stroke,
.pricing-table .plan-block.primary .button.button-primary.stroke {
color: #ffffff !important
}
.pricing-table .plan-block .discount-label {
color: #00b4c9;
font-weight: 600;
display: block;
line-height: 1rem;
margin-top: 0.6rem
}
.pricing-table .plan-block .demo-label {
line-height: 1.6rem;
color: inherit;
display: block;
margin: 1.2rem 0 1rem
}
.pricing-table .plan-bottom-part {
margin-top: 2rem
}
.pricing-table .not-included {
text-decoration: line-through
}
@media only screen and (max-width: 1024px) {
#plans .pricing-content>[class*="col"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
#plans [class*="col"].pricing-intro {
text-align: center;
margin-left: auto;
margin-right: auto;
max-width: 650px
}
#plans [class*="col"].pricing-intro h1::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
#plans [class*="col"].pricing-table {
margin-top: 5.4rem;
margin-left: auto;
margin-right: auto
}
}
@media only screen and (max-width: 768px) {
.pricing-table .plan-wrap {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
.pricing-table .plan-top-part,
.pricing-table .plan-bottom-part {
float: left
}
.pricing-table .plan-top-part {
width: 41.66667%;
margin-top: 1.2rem
}
.pricing-table .plan-bottom-part {
width: 58.33333%
}
}
@media only screen and (max-width: 600px) {
#plans [class*="col"].pricing-table {
max-width: 360px
}
#plans .plan-top-part,
#plans .plan-bottom-part {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
}
#testimonials {
background: #E7EFFE;
padding: 15rem 0 9rem;
text-align: center;
min-height: 600px
}
#testimonials h1::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
#testimonials .owl-wrap {
width: 80%;
max-width: 900px;
margin: 4.2rem auto 0
}
#testimonial-slider {
margin: 0 0 3rem 0;
position: relative
}
#testimonial-slider .slides {
padding-bottom: 3rem
}
#testimonial-slider p {
font-size: 2.2rem;
line-height: 1.5;
color: #303030;
margin-top: 4rem
}
#testimonial-slider p::before,
#testimonial-slider p::after {
display: inline-block;
font-size: 2.9rem;
line-height: 1;
position: relative;
top: 0.3rem
}
#testimonial-slider p::before {
content: "\201C"
}
#testimonial-slider p::after {
content: "\201D"
}
#testimonial-slider .testimonial-author {
margin-top: 3rem
}
#testimonial-slider .testimonial-author img {
width: 7.4rem;
height: 7.4rem;
margin: 0 auto 1.2rem auto;
display: block;
border-radius: 50%
}
#testimonial-slider .testimonial-author .author-info {
display: inline-block;
vertical-align: middle;
text-align: center;
font-family: "montserrat", sans-serif;
font-weight: 600;
font-size: 1.7rem;
margin-top: 0.9rem;
margin-bottom: 3rem;
color: #151515
}
#testimonial-slider .testimonial-author .author-info span {
display: block;
font-weight: bold;
font-size: 1.6rem;
line-height: 1.313;
letter-spacing: 0;
text-transform: none;
color: rgba(0, 0, 0, 0.5);
margin-top: 0.3rem
}
#testimonial-slider .owl-nav {
margin-top: 1.8rem;
margin-bottom: 1.5rem;
text-align: center;
-webkit-tap-highlight-color: transparent
}
#testimonial-slider .owl-nav [class*="owl-"] {
color: #ffffff;
font-family: "montserrat", sans-serif;
font-size: 1.4rem;
height: 3rem;
line-height: 3rem;
margin: 0.6rem;
padding: 0 10px;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
cursor: pointer;
border-radius: 3px;
transition: all 0.3s ease-in-out
}
#testimonial-slider .owl-nav [class*="owl-"]:hover {
background: rgba(0, 0, 0, 0.7);
color: #ffffff;
text-decoration: none
}
#testimonial-slider .owl-nav .disabled {
background: rgba(0, 0, 0, 0.2);
cursor: default
}
#testimonial-slider .owl-nav.disabled+.owl-dots {
margin-top: 1.8rem
}
#testimonial-slider .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent
}
#testimonial-slider .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
display: inline
}
#testimonial-slider .owl-dots .owl-dot span {
width: 9px;
height: 9px;
background-color: #959595;
margin: 9px 9px;
display: block;
-webkit-backface-visibility: visible;
backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 50%;
transition: all 0.3s ease-in-out
}
#testimonial-slider .owl-dots .owl-dot.active span,
#testimonial-slider .owl-dots .owl-dot:hover span {
background-color: #2681c7
}
@media only screen and (max-width: 1024px) {
#testimonials [class*="col-"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
#testimonials h1 {
margin-top: 7rem
}
}
@media only screen and (max-width: 768px) {
#testimonial-slider .testimonial-author img {
width: 6.6rem;
height: 6.6rem
}
#testimonial-slider .testimonial-author .author-info {
font-size: 1.8rem
}
#testimonial-slider .testimonial-author .author-info span {
font-size: 1.5rem
}
}
@media only screen and (max-width: 600px) {
#testimonials .owl-wrap {
width: 90%
}
#testimonial-slider p {
font-size: 2.4rem
}
}
@media only screen and (max-width: 400px) {
#testimonials .owl-wrap {
width: 100%
}
#testimonial-slider p {
font-size: 2rem
}
}
#signup {
background: #b79ac0;
color: #ffffff;
padding-top: 12rem;
padding-bottom: 12rem;
text-align: center
}
#signup h1 {
color: #ffffff
}
#signup h1::before {
background-color: #b79ac0; /* 2681c7 = ca8ec5 */
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
#signup .lead {
color: #ffffff;
margin-top: 4.8rem
}
#signup .row {
max-width: 800px
}
#signup .button.stroke {
color: #ffffff !important;
border-color: #ffffff;
margin: 0 0.6rem 1.2rem;
padding: 0 2.2rem;
min-width: 188px
}
#signup .button.stroke span[class*="icon"] {
margin-right: 5px;
position: relative;
top: 2px
}
#signup .button.stroke:hover,
#signup .button.stroke:focus {
background-color: white !important;
color: #000000 !important
}
/* BOTEON 2 */
#faqs .button.stroke {
color: #ffffff !important;
border-color: #ffffff;
margin: 0 0.6rem 1.2rem;
padding: 0 2.2rem;
min-width: 188px
}
#faqs .button.stroke span[class*="icon"] {
margin-right: 5px;
position: relative;
top: 2px
}
#faqs .button.stroke:hover,
#faqs .button.stroke:focus {
background-color: white !important;
color: #000000 !important
}
/* -------------------------- */
#signup .download-badges {
list-style: none;
margin: 0;
text-align: center
}
#signup .download-badges li {
display: inline-block;
margin: 0 7.5px;
padding-left: 0
}
#signup .download-badges li a {
display: block;
width: 230px;
height: 71px;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 230px 71px
}
#signin {
margin-left: 1rem !important;
color: white !important;
border-color: white;
opacity: 0.8
}
#signin::hover {
opacity: 1
}
#go-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 600;
display: none
}
#go-top a,
#go-top a:visited {
text-decoration: none;
border: 0 none;
display: block;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
background: black;
color: rgba(255, 255, 255, 0.5);
text-align: center;
text-transform: uppercase;
border-radius: 5px;
transition: all 0.3s ease-in-out
}
#go-top a i,
#go-top a:visited i {
font-size: 18px;
line-height: inherit
}
#go-top a:hover,
#go-top a:focus {
color: #ffffff
}
#features {
padding-top: 3rem;
padding-bottom: 6rem;
background-color: white
}
#features h2 {
margin-top: 5rem
}
#features p {
margin-bottom: 0.5rem
}
#features img {
margin-top: 4rem
}
#features img.round {
border-radius: 30px
}
#features-nav {
background: white;
padding-bottom: 6rem
}
@media only screen and (min-width: 769px) {
#features .row.align-items-center {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center
}
#features .row {
margin-bottom: 6rem
}
}
#page-title {
padding-top: 18rem;
background-color: white;
text-align: center;
background-size: cover;
position: relative
}
#page-title .row {
max-width: 670px
}
#page-title h1::before {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
#faqs {
background: #CE8F64; /*#084e69 !important;*/
padding-top: 15rem;
padding-bottom: 12rem
}
#plan {
padding-top: 15rem;
padding-bottom: 12rem;
background-color: white
}
#plan .alert-box a {
-webkit-text-decoration-line: underline;
text-decoration-line: underline
}
#plan .price {
margin: 4rem 0;
color: #151515
}
#plan .price {
margin: 4rem 0;
color: #151515;
font-family: "montserrat", sans-serif;
font-weight: 500;
font-size: 4.7rem;
line-height: 1
}
#plan .price sup {
font-family: "montserrat", sans-serif;
font-size: 1.8rem;
top: -2.7rem;
margin-right: 3px
}
#plan .price sub {
font-family: "montserrat", sans-serif;
font-size: 1.8rem;
bottom: 0rem;
margin-left: 3px
}
@media only screen and (max-width: 1024px) {
#plan .plan-pricing>[class*="col"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0;
margin-top: 3rem
}
}
@media only screen and (max-width: 768px) {
#plan [class*="col"] {
width: 100% !important;
float: none !important;
clear: both !important;
margin-left: 0;
margin-right: 0
}
#plan .plan-details {
margin-bottom: 4rem
}
}
/* Columnas PLANES */
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
.snip1214 { /* PRECIOS */
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 40px 10px;
display: flex;
justify-content: center; /* Centra los elementos horizontalmente */
flex-wrap: wrap; /* Permite que bajen de línea en móviles */
}
.snip1214 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.snip1214 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1214 header {
position: relative;
}
.snip1214 .plan-title {
position: relative;
top: 0;
font-weight: 800;
padding: 5px 15px;
margin: 0 auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
display: inline-block;
background-color: #2681c7;
color: #ffffff;
text-transform: uppercase;
}
.snip1214 .plan-titlePRO {
position: relative;
top: 0;
font-weight: 800;
padding: 5px 15px;
margin: 0 auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
display: inline-block;
background-color: #21c7a3;
color: #ffffff;
text-transform: uppercase;
}
.snip1214 .plan-cost {
padding: 0px 10px 20px;
}
.snip1214 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2.4em;
color: #a1a7ad;
}
.snip1214 .plan-type {
opacity: 0.6;
}
.snip1214 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1214 .plan-features li {
height: 45px; /* Ajusta este valor si el texto se corta */
display: flex;
align-items: center; /* Centra verticalmente */
justify-content: center; /* Centra horizontalmente los iconos */
margin: 0;
padding: 0 10px;
border-bottom: 1px solid rgba(0,0,0,0.05); /* Opcional: línea divisora sutil */
}
/* 2. Ajustes específicos para la PRIMERA COLUMNA (Textos) */
.snip1214 .plan:first-child .plan-features li {
justify-content: flex-start; /* Alinea el texto a la izquierda */
text-align: left;
font-weight: 600; /* Texto un poco más grueso */
font-size: 14px; /* Tamaño de letra legible */
color: #444;
}
/* 3. Igualar la altura del ENCABEZADO invisible de la primera columna */
/* Esto es vital para que la lista empiece al mismo nivel que las otras */
.snip1214 .plan:first-child .plan-title,
.snip1214 .plan:first-child .plan-cost {
visibility: hidden; /* Lo ocultamos pero mantenemos su espacio */
}
/* Opcional: Quitar el borde de tarjeta a la primera columna para que parezca una lista */
.snip1214 .plan:first-child {
box-shadow: none;
background: transparent;
border: none;
}
.snip1214 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1214 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1214 .plan-select {
border-top: 1px solid #d2d7e2;
padding: 10px 10px 0;
}
.snip1214 .plan-select a {
background-color: #3b223d;
color: #ffffff;
text-decoration: none;
padding: 0.5em 1em;
-webkit-transform: translateY(50%);
transform: translateY(50%);
font-weight: 800;
text-transform: uppercase;
display: inline-block;
}
.snip1214 .plan-select a:hover {
background-color: #72467f;
}
.snip1214 .featured {
margin-top: -10px;
background-color: #ec965f;
color: #ffffff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
z-index: 1;
}
.snip1214 .featured .plan-title,
.snip1214 .featured .plan-price {
color: #ffffff;
}
.snip1214 .featured .plan-cost {
padding: 10px 10px 20px;
}
.snip1214 .featured .plan-features li {
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.snip1214 .featured .plan-select {
padding: 20px 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
@media only screen and (max-width: 767px) {
.snip1214 .plan {
width: 50%;
}
.snip1214 .plan-title,
.snip1214 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1214 .plan-cost,
.snip1214 .featured .plan-cost {
padding: 20px 10px 20px;
}
.snip1214 .plan-select,
.snip1214 .featured .plan-select {
padding: 10px 10px 10px;
}
.snip1214 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1214 .plan {
width: 100%;
}
}
/* =========================================
CORRECCIONES: PALETA MINIMALISTA ESTÉRIL
========================================= */
/* 1. Fondo General y Tipografía */
body {
background: #FFFFFF !important; /* Cambio de negro a blanco */
color: #475569; /* Gris suave para lectura */
}
h1, h2, h3, h4, h5, h6,
h1.intro-header,
.h01, .h02, .h03, .h04, .h05, .h06 {
color: #475569 !important; /* Gris Pizarra fuerte 334155 */
}
p.lead {
color: #64748B !important; /* Gris medio */
}
/* 2. Enlaces y Acentos */
a, a:visited {
color: #ec965f; /* Azul Eléctrico */
}
a:hover, a:focus {
color: #ffffff; /* Azul más oscuro al pasar el mouse */
}
/* Línea decorativa debajo de los títulos 3f5d9e*/
h1.intro-header::before {
background-color: #ffffff !important;
}
/* 3. Botones (Llamada a la acción) */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
background-color: #ec965f !important;
border-color: #ec965f !important;
color: #FFFFFF !important;
}
.button.button-primary:hover,
button.button-primary:hover {
background-color: #130903 !important;
}
/* Botones transparentes (Stroke) */
button.stroke.button-primary,
.button.stroke.button-primary {
color: #FFFFFF !important;
border-color: #ec965f !important;
}
button.stroke:hover,
.button.stroke:hover {
background-color: #ffffff !important;
color: #FFFFFF !important;
}
button.strokez:hover,
button.strokez:hover {
background-color: #ffffff !important;
color: #FFFFFF !important;
}
/* 4. Sección HERO (#home) - Limpieza visual */
#home {
background: linear-gradient(to bottom right, #FFFFFF 15%, #e3c1ff 75%, #cceaff 40%, #e3c1ff 65%, #cceaff 100%)
/* background: linear-gradient(to bottom right, #4c007ea1 0%, #CE8F64 100%)*/
}
#home .overlay {
/* Eliminamos el gradiente morado antiguo */
background: transparent !important;
opacity: 0;
}
#home .home-content-left h1 {
color: #2b0b45cc !important; /* Gris casi negro para máximo impacto */
}
#home .home-content-left h3 {
color: #2b0b45cc !important; /* Subtítulo en azul 3f5d9e */
}
/* Icono de scroll */
.scroll-icon {
color: #2b0b45cc !important;
border-color: #2b0b45cc !important;
}
/* 5. Iconos de Funcionalidades (#about) */
.about-features .feature .icon i,
.fa, .fas, .far {
color: #F1F5F9 !important; /* Cambia iconos morados a azules */
}
/* 6. Sección Testimonios (#testimonials) */
#testimonials {
background: #F1F5F9 !important; /* Gris Hielo para separar secciones */
}
#testimonial-slider p {
color: #334155 !important;
}
#testimonial-slider .owl-dots .owl-dot.active span {
background-color: #3f5d9e !important;
}
/* 7. Sección Signup/CTA Final (#signup) */
#signup {
/* Fondo sólido Gris Pizarra elegante en vez de gradiente azul */
background: #CE8F64 !important;
}
#signup h1, #signup p {
color: #FFFFFF !important;
}
#signup h1::before {
background-color: #ffffff !important;
}
/* 8. Footer */
footer {
background-color: #1E293B !important; /* Gris muy oscuro (Dark Slate) */
padding-top: 4rem;
}
footer a, footer a:visited {
color: #ffffff !important; /* Gris claro para enlaces footer */
}
footer a:hover {
color: #ec965f !important;
}
/* 9. TABLA DE PRECIOS (Corrección crítica) */
.snip1214 .plan {
background-color: #FFFFFF;
border: 1px solid #E2E8F0; /* Borde sutil */
}
/* Títulos de planes (Básico) */
.snip1214 .plan-title {
background-color: #c4b6eb !important; /* Gris Pizarra */
color: #FFFFFF !important;
}
/* Título de plan destacado (Profesional) */
.snip1214 .plan-titlePRO {
background-color: #CE8F64 !important; /* Azul Eléctrico */
color: #FFFFFF !important;
}
/* Fondo del plan destacado */
.snip1214 .featured {
background-color: #FFFFFF !important;
border: 2px solid #CE8F64 !important; /* Borde azul para destacar */
margin-top: -10px; /* Mantener efecto pop-up */
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important; /* Sombra azul suave */
}
/* Corrección para el texto "/ Mensual" en el plan destacado */
.snip1214 .featured .plan-type {
color: #6f7781 !important; /* Gris medio visible sobre fondo blanco */
opacity: 1 !important; /* Aseguramos que no tenga transparencia */
}
/* Precios y Textos en tabla */
.snip1214 .plan-price {
color: #334155 !important;
}
.snip1214 .featured .plan-title,
.snip1214 .featured .plan-price {
color: #334155 !important; /* Forzar texto oscuro en fondo blanco */
}
/* Checkmarks (Palomitas) */
.snip1214 .plan-features li {
color: #475569;
}
/* Iconos FontAwesome dentro de la tabla */
.snip1214 .plan-features i.fa-check,
.snip1214 .plan-features li:contains("✅") {
color: #3f5d9e !important; /* Azul */
}
/* Contenedor para agrupar los precios */
.plan-cost-container {
margin-bottom: 5px; /* Espacio antes de la lista de características */
}
/* Estilo para "Precio Regular" */
.plan-price-regular {
font-size: 14px;
color: #999; /* Color gris suave */
margin-bottom: -5px; /* Pegarlo un poco al precio grande */
font-weight: 400;
}
.plan-price-regular span {
text-decoration: line-through; /* Tachado */
color: #e07a5f; /* Opcional: color naranja/rojo para el precio tachado */
font-weight: 600;
}
/* Ajuste para el precio grande existente */
.plan-cost {
margin-bottom: 0; /* Quitar margen inferior para pegar el texto promo */
}
/* Estilo para "Precio promocional..." */
.plan-price-promo {
font-size: 12px;
color: #555;
margin-top: -5px;
font-weight: 500;
}
/* Lógica de visualización Móvil */
@media only screen and (max-width: 991px) {
/* Mostrar los botones */
.mobile-plan-switcher {
display: block;
}
.snip1214 {
display: flex;
width: 100%;
}
/* Columna 1 (Características): Siempre visible, ocupa 40% */
.snip1214 .plan:first-child {
width: 40% !important;
flex: 0 0 40% !important;
font-size: 11px;
padding: 0;
z-index: 10;
background: #fff;
border-right: 1px solid #eee;
}
/* Ajuste de texto columna 1 */
.snip1214 .plan:first-child li {
text-align: left;
padding-left: 5px;
justify-content: flex-start;
font-weight: 600;
color: #555;
}
/* Columnas de Planes: Ocupan el 60% restante */
.snip1214 .plan {
width: 60% !important;
flex: 0 0 60% !important;
margin: 0;
}
/* Altura uniforme de filas */
.snip1214 .plan li {
height: 50px; /* Altura fija para alinear filas */
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #f9f9f9;
}
/* OCULTAR/MOSTRAR PLANES */
/* Por defecto ocultamos el profesional en móvil */
.plan-hidden-mobile {
display: none !important;
}
/* Clase para mostrar el activo */
.plan-visible-mobile {
display: block !important;
animation: fadeIn 0.3s;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}