/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* RM */
h1{
font-family:"museo-sans";
font-weight: 500;
font-size:44px;
margin:0;
}
h2{
font-weight: 500;
font-size:32px;
margin-top:0;
}
.grid{
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
.text-center{
text-align: center;
}
.f-l{
float:left;
}
.f-r{
float:right;
}
.d-ib{
display:inline-block;
}
.d-b{
display:block;
}
.d-f{
display:flex;
}
.d-n{
display:none;
}
/* unvisited link */
a:link {
color: #71d5f9;
}
/* visited link */
a:visited {
color: #71d5f9;
}
/* mouse over link */
a:hover {
color: #71d5f9;
}
/* selected link */
a:active {
color: #71d5f9;
}
.title-sp{
margin-top:30px;
}
body{
font-family: "museo-sans-rounded";
font-size: 18px;
font-weight: 300;
text-align: left;
overflow-x: hidden;
}
header{
background-image: linear-gradient(to bottom, #977cec, #5f51cf);
position:relative;
overflow-x: hidden;
}
#home header nav.navigation{
padding: 9px 0 0 0;
}
header nav.navigation{
display: inline-block;
float:right;
}
header nav.navigation ul{
margin:5px 0;
}
header nav.navigation ul li{
list-style: none;
display: inline-block;
color:white;
margin-right:25px;
}
header nav.navigation ul li a{
text-decoration: none;
color:white;
cursor:pointer;
}
header nav.navigation ul li a:hover{
color:#caf1fc;
}
header nav.navigation ul li.nav-btn{
margin-right:0;
}
header nav.navigation ul li.nav-btn a{
padding: 5px 20px;
background:rgba(255,255,255,0.3);
border:2px solid white;
border-radius: 20px;
color:white;
}
header nav.navigation ul li.nav-btn a:hover{
background-color:rgba(255,255,255,0.5);
cursor:pointer
}
header .fixed-bar{
position:fixed;
width:100%;
padding:10px 0;
z-index:9999;
max-height:70px;
background:linear-gradient(to bottom, #977cec, #8f76e8)
}
main:before{
content: "";
width: calc(100% + 100px);
height: 140px;
left: -50px;
top: calc(0% - 75px);
/*
background: linear-gradient(45deg, #6254d0 0%,#6b5ad5 50%,#6c5bd5 51%,#715fd8 100%);
background: -moz-linear-gradient(45deg, #6254d0 0%,#6b5ad5 50%,#6c5bd5 51%,#715fd8 100%);
background: -webkit-linear-gradient(45deg, #6254d0 0%,#6b5ad5 50%,#6c5bd5 51%,#715fd8 100%);
*/
background-color:#6052cf;
display: inline-block;
position: absolute;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
z-index: 4;
}
form.open input:first-child{
width:auto;
height:42px;
}
form input:first-child{
width:100%;
max-width: 450px;
min-width:250px;
height:42px;
}
main{
overflow: hidden;
}
main > section:first-child .title-sec{
padding-top:100px;
}
header .logo{
height:50px;
}
header h1{
font-size: 44px;
max-width:430px;
margin:0 auto;
color: #faeed7;
font-weight: 300;
margin-bottom:30px;
margin-top:95px;
line-height: 1.2;
font-weight: 900;
}
header form input:not([type="button"]){
border: 2px solid #bbb1ee;
background-color:#bbb1ee;
border: 2px solid #bbb1ee;
}
form{
margin-top:45px;
}
.try-free form{
margin-top:20px;
margin-bottom:20px;
}
main .try-free .header-form-ok .elastic-text{
font-weight:500;
}
.try-free form.open-ok{
margin-top:0px;
margin-bottom:0px;
}
.try-free .contentEmail{
padding-bottom:0;
margin-bottom:10px;
}
form input{
border:none;border-radius: 10px;
padding:8px 10px ;
box-sizing: border-box;
outline:none;
-webkit-appearance: none;
}
header form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #977ee9;
font-size:18px;
}
header form input::-moz-placeholder { /* Firefox 19+ */
color: #977ee9;
font-size:18px;
}
header form input:-ms-input-placeholder { /* IE 10+ */
color: #977ee9;
font-size:18px;
}
header form input:-moz-placeholder { /* Firefox 18- */
color: #977ee9;
font-size:18px;
}
form input[type="button"]{
background-color: #fdb52b;
color:white;
margin-left:10px;
height:42px;
font-weight: 500;
}
main{
position:relative;
}
main section{
position:relative;
}
/* Green sec */
main section.left-sec .title-sec{
width: calc(50% - 200px);
position:relative;
}
main section.left-sec.green-sec .title-sec{
background-image: linear-gradient(to bottom, #caf6cf, #41db8e);
}
main section.left-sec.blue-sec .title-sec{
background-image: linear-gradient(to bottom, #9cdce0, #5fcaeb);
}
main section.left-sec .content-sec{
width: calc(50% + 200px);
padding-bottom:30px;
padding-top:0px;
}
main section.left-sec.green-sec .content-sec{
z-index:1;
padding-top:100px;
}
main section.left-sec .content-sec .grid{
width: calc(100% - 200px);
margin-left: 150px;
z-index:7;
}
main section.left-sec{
display:flex;
}
main section.left-sec .title-sec .content-title{
/* max-width: 400px; */
padding-bottom:100px;
float:right;
text-align: right;
z-index:2;
}
main section.left-sec .title-sec:before{
content: "";
-webkit-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-o-transform: skew(-10deg);
right: calc(0% - 150px);
position: absolute;
width: calc(50% + 100px);
height: calc(100% + 50px);
top:0;
display: inline-block;
}
main section.left-sec:not(.green-sec) .title-sec:before{
top:-70px;
}
main section.left-sec.green-sec .title-sec:before{
background-image: linear-gradient(to bottom, #caf6cf, #41db8e);
}
main section.left-sec.blue-sec .title-sec:before{
background-image: linear-gradient(to bottom, #9cdce0, #5fcaeb);
}
main section.left-sec .title-sec h2{
padding-top:50px;
max-width:300px;
margin:0 0 25px auto;
text-align: center;
}
main section.green-sec .title-sec h2{
color:#1dae6f;
}
main section.orange-sec .title-sec h2{
color: #e08021;
}
main section.blue-sec .title-sec h2{
color: #219ed1;
}
main section.left-sec .title-sec svg{
width:200px;
height:200px;
margin:0 50px 30% auto;
position:relative;
}
/* RIGHT */
main section.right-sec .title-sec{
width: calc(50% - 200px);
position:relative;
}
main section.right-sec.orange-sec .title-sec{
background-image: linear-gradient(to bottom, #fedb62, #fdbb3a);
}
main section.right-sec .content-sec{
width: calc(50% + 200px);
padding-top:100px;
position:relative;
}
main section .content-sec{
padding:50px 0 100px 0;
text-align: center;
}
main section .content-sec img{
max-width: calc(100% - 100px);
min-width:430px;
margin-bottom:20px;
}
main section .content-sec p{
font-size:23px;
font-weight: 300;
margin:10px auto 0 auto;
max-width:700px;
}
main section.green-sec .content-sec p{
color: #08bc76;
padding-bottom:100px;
}
main section.orange-sec .content-sec p{
color: #f78c00;
}
main section.blue-sec .content-sec p{
color: #13ace8;
}
main section.orange-sec .content-sec p{
padding-bottom:50px;
}
main section.right-sec .content-sec:before{
content: "";
display: inline-block;
width: calc(100% + 60px);
height: 250px;
position: absolute;
top: -100px;
left: -60px;
transform: rotate(9deg);
-moz-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
background: white;
}
main section.left-sec .content-sec{
position:relative;
margin-top:10px;
}
main section.right-sec .content-sec{
padding-top:0px;
padding-bottom:100px;
margin-top:10px;
}
main section.left-sec.blue-sec .content-sec:before{
content: "";
display: inline-block;
width: calc(100% - 100px);
height: 200px;
position: absolute;
top: -95px;
right: -60px;
transform: rotate(-9deg);
-moz-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
background: white;
z-index:7;
}
main section.right-sec .content-sec .grid{
width: calc(100% - 200px);
margin-right: 200px;
}
main section.right-sec{
display:flex;
}
main section.right-sec .title-sec .content-title{
/* max-width: 400px; */
padding-bottom:100px;
float:right;
text-align: left;
z-index:7;
}
main section.right-sec .title-sec:before{
content: "";
background-image: linear-gradient(to bottom, #fedb62, #fdbb3a);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-o-transform: skew(10deg);
position: absolute;
width: calc(50% + 150px);
left: calc(0% - 100px);
height: calc(100% + 50px);
top:-75px;
display: inline-block;
z-index:7;
}
main section.right-sec .title-sec:after{
content:"";
display:inline-block;
width:calc(100% + 600px);
height: 200px;
position:absolute;
top:-100px;
right:0;
/* background: red; */
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
background-color: #fedb62;
}
main section.left-sec:not(.green-sec) .title-sec:after{
content:"";
display:inline-block;
width:calc(100% + 600px);
height: 150px;
position:absolute;
top:-90px;
left:-25px;
background: -webkit-linear-gradient(-45deg, #8dd8e2 0%,#99dce1 50%,#9adbe0 51%,#9adbe0 100%);
/* background: red; */
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
z-index:3;
}
main section.right-sec .title-sec h2{
padding-top:0px;
max-width:300px;
margin:0 auto 25px 0;
text-align: center;
}
main section.right-sec .title-sec svg{
width:200px;
height:200px;
margin:0 auto 20% 50px;
position:relative;
}
main:after{
content: "";
display: inline-block;
width: calc(100% + 600px);
height: 100px;
position: absolute;
bottom: -67px;
left: -25px;
background: #967bec;
/* background: red; */
transform: rotate(2deg);
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
z-index: 9;
}
body.guide main:after{
display:none;
}
/* ORANGE SEC */
/* Z-INDEX */
main section.left-sec.green-sec{
z-index:2;
padding-bottom:0px;
}
main section.right-sec .content-title:before{
z-index:1;
}
main section.right-sec .title-sec:after{
z-index:-1;
}
main section.left-sec.blue-sec .title-sec:before{
z-index:8;
}
main section.left-sec.green-sec .title-sec:before{
z-index:4;
}
main section.left-sec .title-sec .content-title{
z-index:8;
}
main section.right-sec .content-sec{
z-index:3;
}
/* */
main .try-free{
background-color: #fedb62;
padding: 100px 0 40px 0;
padding-bottom:100px;
}
main .try-free .contentEmail .mail-message h4, main .try-free .header-form-ok .elastic-text, main .try-free .contentEmail .wrong-adress{
color:#6f6f6f;
}
header .grid{
overflow:hidden;
}
main .try-free .contentEmail .sign-up--again{
color:#e5902d;
}
main .try-free:after{
content: "";
height: 75px;
width: calc(100% + 100px);
background: #fedb62;
display: inline-block;
z-index: 1;
position: absolute;
bottom: -30px;
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
left: -50px;
}
main .try-free:before{
content: "";
height: 100px;
width: calc(100% + 100px);
background:#f0f0f0;
display: inline-block;
z-index: 1;
position: absolute;
top: -50px;
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
left: -50px;
}
main .try-free form input[type="button"]{
background-color: #967bec;
color:white;
padding:8px 15px;
}
main .try-free h2{
color: #e5902d;
text-align: center;
margin-bottom:0;
}
main .plan{
background-color: #f0f0f0;
padding: 50px 0 40px 0;
z-index:9;
}
main .plan div.plan-svg{
margin-bottom:70px;
display:inline-block;
}
main .plan div.plan-svg > div:not(:last-child){
margin-right:25px;
}
main .plan div.plan-svg svg{
width:150px;
height:150px;
display:block;
margin:0 auto;
}
main .plan div.plan-svg span{
display:inline-block;
float:left;
color:#5b5b5b;
font-weight: 500;
font-size:14px;
}
main .plan div.plan-svg span:not(:first-child){
margin-left:5px;
}
main .plan div.plan-svg .d-ib .d-ib{
width:100%;
}
.i-container-system span.android, .i-container-system span.windows, .i-container-system span.apple{
width:20px;
height:20px;
}
span.android:before{
content:"";
display:inline-block;
background: url("../img/systems/Android.png");
background-size: cover;
width:20px;
height:20px;
position:relative;
}
span.windows:before{
content:"";
display:inline-block;
background: url("../img/systems/Windows.png");
background-size: cover;
width:20px;
height:20px;
position:relative;
}
span.apple:before{
content:"";
display:inline-block;
background: url("../img/systems/Apple.png");
background-size: cover;
width:20px;
height:20px;
position:relative;
top:-2px;
}
.i-container-system{
display:inline-block;
margin-top:20px;
position:relative;
}
.tools-svg .i-container-company{
display:inline-block;
margin:0 45px 0 0;
float:left;
}
.tools-svg .i-container-company:last-child{
margin:0;
}
.tools-svg .i-container-company svg{
width:50px;
height:50px;
}
.tools-svg .i-container-company span{
margin-top:10px;
line-height: 1;
color: #5b5b5b;
font-weight: 500;
font-size: 14px;
}
main .plan:before{
content: "";
height: 75px;
width: calc(100% + 100px);
background: #f0f0f0;
display: inline-block;
z-index: 2;
position: absolute;
top: -30px;
-ms-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
left: -50px;
}
main .plan h2{
color: #70bdf5;
}
main .plan .tools-svg h2{
margin-bottom:45px;
}
.fake-bottom-left{
width: calc(100% + 100px);
height: 90px;
background: red;
z-index: 11;
position: absolute;
left: -50px;
bottom:-45px;
-webkit-animation-name: venue_top;
-webkit-animation-duration:20s;
-webkit-animation-delay: 0.1s;
-webkit-animation-timing-function: linear;
-webkit-animation: venue_top 20s steps(150) infinite ;
-moz-animation: venue_top 20s steps(150) infinite;
-ms-animation: venue_top 20s steps(150) infinite;
-o-animation: venue_top 20s steps(150) infinite;
animation: venue_top 20s steps(150) infinite;
animation-name: venue_top;
animation-duration: 20s;
animation-delay: 0.1s;
animation-timing-function: linear;
}
.fake-top-left{
top: -45px;
width: calc(100% + 100px);
margin-left: -50px;
height: 90px;
background: red;
z-index: 1;
position: absolute;
-webkit-animation-name: header_base;
-webkit-animation-duration: 150s;
-webkit-animation-delay: 0.1s;
-webkit-animation-timing-function: linear;
-webkit-animation: header_base 15s steps(150) infinite;
-moz-animation: header_base 15s steps(150) infinite;
-ms-animation: header_base 15s steps(150) infinite;
-o-animation: header_base 15s steps(150) infinite;
animation: header_base 15s steps(150) infinite;
animation-name: header_base;
animation-duration: 150s;
animation-delay: 0.1s;
animation-timing-function: linear;
outline: 1px solid transparent;
}
form input:not([type="button"]):focus{
background-color:white;
border-color:white;
}
form .password{
max-width: 0;
min-width: 0;
padding:0;
border:0;
height:42px;
visibility: hidden;
transition: max-width .2s linear, margin-right .2s linear;
-webkit-transition: max-width .2s linear, margin-right .2s linear;
-moz-transition: max-width .2s linear, margin-right .2s linear;
}
form.open .password{
max-width: 200px;
padding:8px 10px;
height:42px;
border:none;
visibility: visible;
transition: max-width .40s linear, margin-right .40s linear;
-webkit-transition: max-width .40s linear, margin-right .40s linear;
-moz-transition: max-width .40s linear, margin-right .40s linear;
}
/* RESPONSIVE */
.mobile{
display:none;
}
.hidden{
display:none;
}
footer{padding:20px 0 45px 0;font-size:16px;background-image: linear-gradient(to bottom, #977cec, #5f51cf);color: #dcddfe;}footer ul li{list-style: none;}footer h6{font-size:18px;margin: 10px 0 0 0;font-weight: 500;}footer .footer-menu--list li{margin-bottom:5px}footer .footer-menu--list li a,footer .contact-us a{color:#6ce3ff;text-decoration:underline}footer .footer-menu--list li a:hover,footer .contact-us a:hover{text-decoration:underline;color:#b3f4ff}footer .contact-us{margin:0 0 20px 0}.footer-content--right{float:right}.social{float:left;width:30px;height:30px;margin:0 10px 10px 0}.copywrite{margin-top:25px;font-size:13px;bottom:0;margin-bottom:0;color:#dcdcff}footer .follow-us h6{margin:0px 0 10px 0}.footer-menu--list{
margin-bottom:30px;
padding-left:0;
}
header form input.error-field:not([type="button"]), form input.error-field:not([type="button"]){
border:2px solid red;
}
/* SLIDESHOWWW */
header .d-b svg{
max-width:700px;
}
header .btn-burguer{
display:none;
}
/* ANIMATIONS */
/* */
/* GUIDE */
.guide header{
background-image:none;
}
.guide header .logo{
margin:10px 0;
}
.guide header nav.navigation{
margin:20px 0;
}
.guide main{
padding:70px 0 200px 0;
background-color:white;
}
.guide main:before{
display:none;
}
.guide main .list-guide{
display:flex;
flex-direction: row;
flex-wrap: wrap;
padding:0;
list-style: none;
margin:0 auto;
}
.guide main .list-guide li{
padding:0 20px;
width:calc(33.33% - 40px);
margin-bottom:15px;
}
.guide .section-title{
background:linear-gradient(to bottom, #fedb62, #fdbb3a);
padding:20px 0;
position:fixed;
top:70px;
width:100%;
z-index:4
}
.guide .section-title h2{
margin:0;
color:#e08021;
}
.guide main.page .section-title{
margin-bottom:50px;
}
.guide main.page .section-title a{
color:white;
position:absolute;
top:50%;
transform:translateY(-50%);
text-decoration:none;
}
.guide .page-cover-image{
margin-bottom:10px;
border-radius: 10px;
border:1px solid #e8efff;
}
.guide .list-guide a{
color:#20b6f2;
text-decoration:none;
}
.guide .list-guide a:hover{
text-decoration:underline;
}
@media only screen and (max-width: 800px) {
.guide main .list-guide li{
width: calc(50% - 20px);
padding:0 10px;
}
}
.guide header .fixed-bar{
padding:0;
}
.guide .fixed-bar nav ul > li{
position:relative;
}
.guide .fixed-bar nav ul > li:nth-child(4):after{
content:"";
width:100%;
height:7px;
position:absolute;
left:0;
right:0;
top:38px;
background:#fedb62;
}
.guide .guide-content .guide-categories{
display:none;
}
.guide .guide-content{
display:flex;
padding-top:85px;
}
.guide .guide-content .guide-categories{
display:inherit;
flex: 0 0 250px;
padding-top:70px;
}
.guide .guide-content .guide-categories nav{
display:flex;
flex-direction: column;
}
/* .guide .guide-content .guide-categories > div.fixed{
position:fixed;
} */
/* .guide .guide-content .guide-categories > div.fixed nav{
margin-top:0;
} */
.guide .guide-content .guide-categories nav a{
cursor: pointer;
padding: 10px;
display: block;
text-decoration: none;
border-radius: 5px;
color: black;
font-size: 16px;
}
.guide .guide-content .guide-categories nav a.active{
background-color:#20b6f2;
color:white;
}
.guide .guide-categories.fixed nav{
position:fixed;
top:155px
}
.guide main.page .container{
padding-top:155px;
}
.guide footer{
z-index: 1;
position: relative;
}
@media only screen and (max-width: 1024px) {
.guide .fixed-bar nav ul > li:nth-child(4):after{
display:none;
}
.guide header .btn-burguer{
padding:15px 0;
}
header .navigation li{
position: relative;
}
.guide header .navigation li:nth-child(4) a:after{
content:"";
display:inline-block;
width:5px;
height:100%;
position: absolute;
background:#fdbb3a ;
top:0;
left:0;
}
header nav.navigation ul{
padding-left:0 !important;
}
.guide header nav.navigation ul{
padding-left:0 ;
}
.guide main.page .container{
padding-top:170px;
}
}
@media only screen and (max-width: 800px) {
.guide .guide-content .guide-categories{
display:none;
}
.guide .guide-content{
padding-top: 140px;
}
.guide .guide-content.w-mobile{
padding-top: 140px;
}
.guide .mobile-container{
background:white;
position:absolute;
left:0;
right:0;
padding:20px;
}
.guide .mobile-container.fixed{
position:fixed;
top:70px;
}
.guide .mobile-categories{
display: block;
border:2px solid #20b6f2;
height:50px;
margin-top:70px;
color: #20b6f2;
padding:0 10px;
background:white;
}
.guide .mobile-categories select{
display:inline-block;
width:100%;
height:100%;
border:none;
outline:none;
background:white;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 12px;
background-position: 100% calc(50% + 5px);
background-repeat: no-repeat;
}
.guide .mobile-categories.fixed{
position:fixed;
top:140px;
right:20px;
left:20px;
margin-top:0;
}
body.window-mobile .guide-category:not(:first-child){
display:none;
}
body.window-mobile .guide-category.open-cat{
display:block;
}
body.window-mobile .guide-category.disable{
display:none;
}
body main.sub-page .page-flex-container >div:first-child{
display:none;
}
body main.sub-page .page-flex-container >div:last-child{
max-width: 100%;
margin-right:0;
}
body main.sub-page .section-title a span{
display:none;
}
.guide main.sub-page .mobile-categories {
border-color:#8f76e8;
color:#8f76e8;
}
.guide main.sub-page .mobile-categories select{
background: url("data:image/svg+xml;utf8,") no-repeat;
background-size: 12px;
background-position: 100% calc(50% + 5px);
background-repeat: no-repeat;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
#privacy a[href="privacy.html"], #terms a[href="terms.html"], #aboutUs a[href="about-us.html"], #home a[href="index.html"], #pricing a[href="pricing.html"], #features a[href="features.html"]{
pointer-events: none !important;
cursor: default !important;
}
body:not(.about-us) header .fixed-bar li:last-child, body#home header .fixed-bar li:first-child, body:not(.about-us) header .fixed-bar .btn-burguer .lang{
display:none;
}
.contentEmail{
padding-bottom: 57px;
}
.header-form-ok .elastic-text{
color:white;
}
.contentEmail .mail-message h4{
color:rgba(255,255,255,0.7);
font-weight: 300;
margin-bottom:0;
}
.contentEmail .header-form-ok{
margin-bottom:20px;
}
.contentEmail .mail-message svg{
width:200px;
padding:20px 30px 0px 50px;
}
.contentEmail .wrong-adress{
color:rgba(255,255,255,0.7);
}
.contentEmail .sign-up--again{
color:#fdb52b;
cursor:pointer;
}
/* SLIDE */
.left-sec .content-sec .grid.xpum{
visibility:hidden;
margin-right:-1000px !important;
transition: margin-right 500ms ease-in;
position:absolute;
top:0;
}
.left-sec .content-sec .grid{
transition: margin-right 500ms ease-in;
visibility:visible;
position:relative;
margin-right:200px !important;
display:inline-block;
}
.right-sec .content-sec .grid.xpum{
visibility:hidden;
margin-left:-1000px !important;
transition: margin-right 500ms ease-in;
-webkit-transition: margin-right 500ms ease-in;
-moz-transition: margin-right 500ms ease-in;
position:absolute;
top:0;
}
.right-sec .content-sec .grid{
transition: margin-left 500ms ease-in;
-webkit-transition: margin-left 500ms ease-in;
-moz-transition: margin-left 500ms ease-in;
visibility:visible;
position:relative;
margin-left:0;
display:inline-block;
}
svg .desktop-version{
display:inline-block;
}
svg .mobile-version{
display:none;
}
.tools-svg .i-container-company a{
text-decoration:none;
}
/* ----- */
@media only screen and (max-width: 1160px) {
main section.left-sec .title-sec{
width:370px;
}
main section.left-sec .content-sec{
width:calc(100% - 370px);
}
}
@media only screen and (max-width: 470px) {
.footer-content--right{
float:none !important;
}
}
@media only screen and (min-width: 1500px) {
main section .content-sec{
padding-top:50px;
}
}
@media only screen and (max-width: 1020px) {
header{
padding-top:0px;
padding-bottom:0px;
overflow:hidden;
}
header nav{
float:none;
}
h2{
font-size: 20px;
}
.grid{
padding:0 20px;
}
main section.left-sec{
width:100%;
display: inline-block;
}
main section.left-sec .title-sec{
width:100%;
display: inline-block;
}
main section .title-sec{
padding:25px 0;
z-index:99;
}
main section.left-sec .title-sec h2, main section.right-sec .title-sec h2{
display :inline-block;
text-align: left ;
padding-top:0;
margin:10px 0;
max-width:calc(100% - 75px)
}
main section.left-sec.green-sec .title-sec h2{
margin:12px 0;
}
main section.right-sec .title-sec h2{
margin:12px 0;
}
main section.right-sec .title-sec{
padding:0;
}
main section.left-sec .title-sec .content-title, main section.right-sec .title-sec .content-title{
text-align: left;
padding-bottom:0;
height:75px;
max-width:100%;
}
main section.left-sec .title-sec svg, main section.right-sec .title-sec svg{
height:75px;
width:75px;
float:right;
margin-bottom:0;
margin-right:0;
z-index:8;
}
main section.left-sec.green-sec .content-sec{
padding-top:0;
padding-bottom:0;
}
main section.left-sec.green-sec .title-sec:before,
main section.right-sec .content-sec:before,
main section.right-sec .title-sec:after,
main section.right-sec .title-sec:before,
main section.left-sec:not(.green-sec) .title-sec:after,
main section.left-sec.blue-sec .title-sec:before,
main section.left-sec.blue-sec .content-sec:before{
display:none;
}
main section.left-sec .content-sec{
width:100%;
padding-top:0;
}
main section.left-sec .content-sec .grid, main section.right-sec .content-sec .grid{
width:100%;
margin-left:0;
}
main section.right-sec .title-sec{
width:100%;
position:absolute;
top:0;
}
.mobile.active ul{
display:inline-block;
}
header h1{
font-size:22px;
margin-top:15px;
margin-bottom:15px;
line-height: 1.2;
margin-top: 70px;
}
header form{
margin-top:25px;
}
header form input{
display: inline-block;
width: calc(100% - 50px);
margin-bottom: 10px;
margin: 10px 25px;
box-sizing: border-box;
}
form .password{
margin:0;
position:absolute;
}
form.open .password{
margin: 10px 25px;
position:relative;
}
form input[type="button"]{
margin-left:inherit;
margin: 10px 25px;
width: calc(100% - 50px);
}
main section .content-sec img{
min-width:100%;
}
main section.orange-sec .content-sec{
margin-top:100px;
box-sizing:border-box;
}
main section.orange-sec .content-sec p{
padding-bottom:0;
}
main section.green-sec .content-sec p{
padding-bottom:50px;
}
main section .content-sec{
padding:0 20px;
box-sizing: border-box;
}
main section.left-sec:not(.green-sec) .title-sec:before, main section.right-sec .title-sec:before{
content:"";
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
position: absolute;
width:calc(100% + 40px);
left: -20px;
height: 40px;
top: calc(0% - 20px);
display: inline-block;
}
main section.left-sec:not(.green-sec) .title-sec:after, main section.right-sec .title-sec:after{
content:"";
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
position: absolute;
width:calc(100% + 40px);
left: -20px;
height: 40px;
top: calc(100% - 20px);
display: inline-block;
}
main section.left-sec:not(.green-sec) .title-sec:before{
background-color:#95dae1;
background-image: none;
}
main section.left-sec:not(.green-sec) .title-sec:after{
background-color:#6bcee9;
background-image: none;
}
main section.left-sec:not(.green-sec) .title-sec{
padding:0;
}
main section.right-sec .title-sec:after{
background-color:#ffc448;
}
main section.right-sec .title-sec:before{
background-image:none;
background-color:#fdd55c;
}
main section.left-sec.green-sec .title-sec:after{
content: "";
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
position: absolute;
width: calc(100% + 40px);
left: -20px;
height: 50px;
top: calc(100% - 25px);
display: inline-block !important;
z-index: 7;
background: #4cdc93;
}
main > section:first-child .title-sec{
padding-top:90px;
padding-bottom:10px;
}
main section .content-sec p{
margin-bottom:50px;
font-size:16px;
}
main section.left-sec .content-sec .grid, main section.right-sec .content-sec .grid{
padding-top:50px;
}
main section.left-sec:not(.green-sec) .content-sec{
padding-top:25px;
}
main section.right-sec .title-sec svg{
float:left;
margin-left:0;
}
main section.right-sec .title-sec h2{
float:right;
}
main section.right-sec .content-sec{
width:100%;
padding-top:0;
}
main .try-free{
padding:100px 0 40px 0;
}
main .try-free form{
margin-top:30px;
padding-bottom:50px;
}
.footer-content--right{
display: inline-block;
}
.copywrite{
position:absolute;
}
footer .contact-us{
margin-bottom:25px !important;
}
.follow-us{
padding-bottom:25px;
display: inline-block;
}
main:after{
height:50px;
bottom: -50px;
}
main .plan:before{
height:50px;
top:-15px;
}
form.open input:first-child{
width:100%;
max-width: 400px;
}
form input{
width:100%;
max-width: 400px;
min-width: 250px;
}
form input, form input.password, form input.email{
width:calc(100% - 50px);
max-width:inherit;
}
form.open input, form.open input.password, form.open input.email{
width:calc(100% - 50px);
max-width:100%;
}
form.open input.password, form.open input.email{
display: block;
margin: 20px auto;
}
.try-free form input.password, .try-free form input.email{
display: block;
margin: 20px auto;
position:relative;
}
form.open input[type="button"]{
max-width:200px;
}
.try-free form.open input[type="button"]{
max-width:inherit;
}
header nav.navigation{
display:none;
}
header .btn-burguer{
display:inline-block;
background:none;
box-shadow: none;
border:none;
outline:none;
float:right;
padding:5px 0;
height:auto;
}
header .btn-burguer.active .i-close,
header .btn-burguer .i-burguer{
display:inline-block;
}
header .btn-burguer .i-close,
header .btn-burguer.active .i-burguer{
display:none;
}
header .btn-burguer i svg{
width:35px;
height:35px;
}
header .fixed-bar > .active nav{
display:inline-block;
position:fixed;
top:70px;
left:0;
width:100%;
}
header .fixed-bar > .active nav{
width:100%;
padding-left:0;
background:#493e9c;
margin-top:0;
}
header .fixed-bar > .active nav ul li{
display:block;
text-align: left;
line-height:60px;
margin:0;
}
header nav.navigation ul li{
margin-right: 0;
}
header .fixed-bar > .active nav ul li.nav-btn a{
background:none;
border:none;
padding:0;
padding-left:25px;
}
main .plan div.plan-svg svg{
max-width: inherit;
display: inline-block;
box-sizing:border-box;
padding:10px;
}
span.apple:before, span.android:before, span.windows:before{
width: 15px;
height: 15px;
}
main .plan div.plan-svg span:not(:first-child){
margin-left:0;
}
main .plan div.plan-svg span:last-child{
position: relative;
top:-2px;
}
main section.green-sec .content-sec p{
position:relative;
}
main .plan div.plan-svg > div{
margin-bottom:20px;
width:50%;
}
main .plan .plan-svg > .illust:nth-child(even){
float:left;
margin-right: 0px;
}
main .plan .plan-svg > .illust:nth-child(odd){
float:right;
margin-right: 0;
}
header nav.navigation ul li a{
display:inline-block;
width:100%;
padding-left:25px;
}
header nav.navigation ul{
padding-left:0;
}
header nav.navigation ul li.nav-btn a:hover{
color: #caf1fc;
}
main section.right-sec .content-sec{
padding-bottom:50px;
}
svg .desktop-version{
display:none
}
svg .mobile-version{
display:inline-block;
}
main section.right-sec, main section.left-sec{
display:inline-block;
width:100%;
}
.contentEmail .mail-message svg{
width: 200px;
}
.contentEmail .mail-message svg{
padding:10px 30px;
}
.contentEmail .mail-message h4, .contentEmail .wrong-adress, .contentEmail .sign-up--again{
font-size:16px;
}
.contentEmail .sign-up--again{
display:block;
}
main .plan div.plan-svg{
margin-bottom:20px;
}
main section .content-sec p{
margin-bottom:0;
}
main section.right-sec .content-sec, main section.left-sec .content-sec{
background:white;
}
.try-free form{
margin-bottom:0;
}
}
.form-ok{
visibility: hidden;
height: 0;
}
form.open-ok .form-ok{
visibility: visible;
height: auto;
}
.form-ok svg{
margin-left:-500px;
}
.open-ok .form-ok svg{
margin-left:0px;
transition: margin-left .5s ease-in;
-webkit-transition: margin-left .5s ease-in;
-moz-transition: margin-left .5s ease-in;
}
.form-ok svg .nuvem{
opacity:0;
}
.open-ok .form-ok svg .nuvem{
opacity:1;
transition:opacity 1s ease-in;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
}
@media only screen and (max-width: 520px) {
form input, form input.password, form input.email{
width:calc(100% - 50px);
max-width:auto;
}
form.open input, form.open input.password, form.open input.email{
width:calc(100% - 50px);
max-width:100%;
}
.tools-svg .i-container-company{
margin-right:50px;
float:none;
}
.tools-svg .i-container-company:nth-child(3){
margin-right:0;
position: relative;
top: 12px;
}
.tools-svg .i-container-company:first-child, .tools-svg .i-container-company:nth-child(2), .tools-svg .i-container-company:nth-child(3){
margin-bottom:30px;
}
main .plan .tools-svg h2{
margin-bottom:25px;
}
.tools-svg .i-container-company:first-child{
margin-left:15px;
}
main .plan{
padding-bottom:0;
}
header nav.navigation ul{
padding-left:25px;
}
}
@media only screen and (max-width: 1020px) and (min-width: 420px) {
header .fixed-bar > .active nav {
width:50%;
right:0;
left:inherit;
float:right;
}
}
@media only screen and (max-width: 320px) {
header .fixed-bar{
max-height: 50px;
}
header .btn-burguer{
padding:0;
}
header .logo{
height:25px;
}
header .btn-burguer i svg{
width:25px;
height:25px;
}
header h1{
font-size:18px;
}
header form input{
margin-bottom:0px;
font-size: 12px;
padding: 5px;
border-radius: 5px;
}
header form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size: 12px;
}
header form input::-moz-placeholder { /* Firefox 19+ */
font-size: 12px;
}
header form input:-ms-input-placeholder { /* IE 10+ */
font-size: 12px;
}
header form input:-moz-placeholder { /* Firefox 18- */
font-size: 12px;
}
main:before, main:after{
height:100px;
}
main > section:first-child .title-sec{
padding-top: 50px;
}
.tools-svg .i-container-company:first-child{
margin-left:0;
}
main:after{
height:50px;
}
}
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
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;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}