Created
July 4, 2020 19:23
-
-
Save DreamDevLost/276ca4a48d46b7e769bed12fbc4990c8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
/* INDEX-LARGE OK */ | |
@media only screen and (min-width: 1366px) and (max-width: 1579px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
} | |
.header-two{ | |
width: 100%; | |
/* background: #1b3d7a; */ | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 30%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
.container-header nav{ | |
width: 70%; | |
} | |
.container-header nav ul{ | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
width: 100%; | |
} | |
.container-header nav ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
.container-header nav ul li:hover{ | |
color: #4eafc7; | |
} | |
.container-header nav ul li:hover .line{ | |
width: 100%; | |
} | |
.container-header nav ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
.container-header nav ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 60%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 2.5rem; | |
} | |
.form-cover form{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
margin-left: 3rem; | |
} | |
.form-cover form input{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
left: -2%; | |
} | |
.form-cover form button{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
left:-3.6%; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
position: absolute; | |
left: 36.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
position: absolute; | |
right: 40.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #2d66ad; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 18.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 37.8%; | |
top: 3px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
justify-content: space-around; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 5rem; | |
} | |
.container-peooples-figure img{ | |
width: 45%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 15rem; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 59rem; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 45rem; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 32rem; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 17rem; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 62rem; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 62rem; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
margin-top: 12rem; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
bottom:26rem; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom:22rem; | |
right: 6rem; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 2rem; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 3rem; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:11rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom:25rem; | |
left: 15rem; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:20rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom:23rem; | |
left: 22rem; | |
} | |
.effective-text{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 4.4rem; | |
position: relative; | |
top: 4rem; | |
left: 14rem; | |
} | |
.container-plataform{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 40%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 80%; | |
position: relative; | |
top: 8rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 5%; | |
position: absolute; | |
right: 9rem; | |
bottom: 13rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 3rem; | |
bottom:16rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 5rem; | |
bottom: 12rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 11rem; | |
bottom: 9rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1rem; | |
bottom: 8rem; | |
} | |
.content-text{ | |
width: 60%; | |
height: auto; | |
margin-top: 5rem; | |
position: relative; | |
top: 3rem; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 3rem; | |
line-height: 1.9rem; | |
font-size: 1.3rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 345px; | |
text-align: center; | |
font-size: 1.7rem; | |
margin: 0 auto; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
.buy{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: row-reverse; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
font-size: 4.4rem; | |
margin-bottom: 0; | |
position: relative; | |
left: -17.2rem; | |
top: 4rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -18rem !important; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: row wrap; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 50%; | |
height: auto; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 40%; | |
} | |
.left-section{ | |
width: 50%; | |
height: auto; | |
margin-bottom: 4rem; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 50%; | |
} | |
.container-bottom-section{ | |
display: flex; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content: flex-end; | |
width: 50%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
.alert { | |
padding: 15px; | |
margin-bottom: 20px; | |
border: 1px solid transparent; | |
border-radius: 4px; | |
} | |
.alert h4 { | |
margin-top: 0; | |
color: inherit; | |
} | |
.alert .alert-link { | |
font-weight: bold; | |
} | |
.alert > p, | |
.alert > ul { | |
margin-bottom: 0; | |
} | |
.alert > p + p { | |
margin-top: 5px; | |
} | |
.alert-dismissable, | |
.alert-dismissible { | |
padding-right: 35px; | |
} | |
.alert-dismissable .close, | |
.alert-dismissible .close { | |
position: relative; | |
top: -2px; | |
right: -21px; | |
color: inherit; | |
} | |
.alert-success { | |
color: #3c763d; | |
background-color: #dff0d8; | |
border-color: #d6e9c6; | |
} | |
.alert-success hr { | |
border-top-color: #c9e2b3; | |
} | |
.alert-success .alert-link { | |
color: #2b542c; | |
} | |
.alert-info { | |
color: #31708f; | |
background-color: #d9edf7; | |
border-color: #bce8f1; | |
} | |
.alert-info hr { | |
border-top-color: #a6e1ec; | |
} | |
.alert-info .alert-link { | |
color: #245269; | |
} | |
.alert-warning { | |
color: #8a6d3b; | |
background-color: #fcf8e3; | |
border-color: #faebcc; | |
} | |
.alert-warning hr { | |
border-top-color: #f7e1b5; | |
} | |
.alert-warning .alert-link { | |
color: #66512c; | |
} | |
.alert-danger { | |
color: #a94442; | |
background-color: #f2dede; | |
border-color: #ebccd1; | |
} | |
.alert-danger hr { | |
border-top-color: #e4b9c0; | |
} | |
.alert-danger .alert-link { | |
color: #843534; | |
} | |
.close { | |
float: right; | |
font-size: 21px; | |
font-weight: bold; | |
line-height: 1; | |
color: #000; | |
text-shadow: 0 1px 0 #fff; | |
filter: alpha(opacity=20); | |
opacity: .2; | |
} | |
.close:hover, | |
.close:focus { | |
color: #000; | |
text-decoration: none; | |
cursor: pointer; | |
filter: alpha(opacity=50); | |
opacity: .5; | |
} | |
} | |
/* INDEX-MEDIAM OK */ | |
@media only screen and (min-width: 880px) and (max-width: 1169px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
} | |
.header-two{ | |
width: 100%; | |
/* background: #1b3d7a; */ | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 30%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
.container-header nav{ | |
width: 70%; | |
} | |
.container-header nav ul{ | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
width: 100%; | |
} | |
.container-header nav ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
.container-header nav ul li:hover{ | |
color: #4eafc7; | |
} | |
.container-header nav ul li:hover .line{ | |
width: 100%; | |
} | |
.container-header nav ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
.container-header nav ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 80%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 2.5rem; | |
} | |
.form-cover form{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
margin-left: 3rem; | |
} | |
.form-cover form input{ | |
width: 26%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
left: -2%; | |
} | |
.form-cover form button{ | |
width: 25%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
left:-3.6%; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
position: absolute; | |
left: 34.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
position: absolute; | |
right: 36.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #2d66ad; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 11.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 35.8%; | |
top: 3px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
justify-content: space-around; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 5rem; | |
} | |
.container-peooples-figure img{ | |
width: 55%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 18%; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 75%; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 55%; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 35%; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 19%; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 75%; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 74%; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
top: -21rem; | |
left: 15%; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom: 18rem; | |
right: 18%; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 1%; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 10%; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:8rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom:21rem; | |
left: 50%; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:16rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom: 18rem; | |
left: 61%; | |
} | |
.effective-text{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 4.4rem; | |
position: relative; | |
top: 5rem; | |
left: 11rem; | |
} | |
.container-plataform{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 40%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 80%; | |
position: relative; | |
top: 8rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 5%; | |
position: absolute; | |
right: 31%; | |
bottom: 9rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 9%; | |
bottom: 13rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 18%; | |
bottom: 8rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 39%; | |
bottom: 6rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1%; | |
bottom: 4rem; | |
} | |
.content-text{ | |
width: 60%; | |
height: auto; | |
margin-top: 5rem; | |
position: relative; | |
top: 3rem; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 3rem; | |
line-height: 1.9rem; | |
font-size: 1.3rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 345px; | |
text-align: center; | |
margin: 0 auto; | |
font-size: 1.7rem; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: row-reverse; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
font-size: 4.4rem; | |
margin-bottom: 0; | |
position: relative; | |
left: -13rem; | |
top: 4rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -12rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: row wrap; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 50%; | |
height: auto; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 40%; | |
} | |
.left-section{ | |
width: 50%; | |
height: auto; | |
margin-bottom: 4rem; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 50%; | |
} | |
.container-bottom-section{ | |
display: flex; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content: flex-end; | |
width: 50%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
} | |
/* INDEX-SMALL OK */ | |
@media only screen and (min-width: 665px) and (max-width: 879px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
} | |
.header-two{ | |
width: 100%; | |
/* background: #1b3d7a; */ | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 30%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
#two-menu{ | |
display: none; | |
} | |
#one-menu{ | |
display: none; | |
width: 25%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#one-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#one-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#one-menu ul li:hover{ | |
color: #245daa; | |
} | |
#one-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#one-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#one-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
/* menu two */ | |
#two-menu{ | |
display: none; | |
} | |
#two-menu{ | |
display: none; | |
width: 25%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#two-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#two-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#two-menu ul li:hover{ | |
color: #245daa; | |
} | |
#two-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#two-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#two-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 90%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 2.5rem; | |
} | |
.form-cover form{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
margin-left: 3rem; | |
} | |
.form-cover form input{ | |
width: 30%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
left: -2%; | |
} | |
.form-cover form button{ | |
width: 28%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
left:-3.6%; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
position: absolute; | |
left: 32.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
position: absolute; | |
right: 33.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #205098; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 6.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 34.8%; | |
top: 3px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
justify-content: space-around; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 5rem; | |
} | |
.container-peooples-figure img{ | |
width: 75%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 18%; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 75%; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 55%; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 35%; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 19%; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 75%; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 74%; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
top: -16rem; | |
left: 15%; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom: 3rem; | |
right: 18%; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 1%; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 10%; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:8rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom:15rem; | |
left: 50%; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:13rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom: 8rem; | |
left: 61%; | |
} | |
.effective-text{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 685px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 3.4rem; | |
position: relative; | |
} | |
.container-plataform{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 40%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 80%; | |
position: relative; | |
top: 8rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 7%; | |
position: absolute; | |
right: 31%; | |
bottom: 0rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 9%; | |
bottom: 3rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 18%; | |
bottom: 7rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 39%; | |
bottom: 5rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1%; | |
bottom: -3rem; | |
} | |
.content-text{ | |
width: 60%; | |
height: auto; | |
margin-top: 4rem; | |
position: relative; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 2rem; | |
line-height: 1.9rem; | |
font-size: 1.1rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 335px; | |
text-align: center; | |
margin: 0 auto; | |
font-size: 1.7rem; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 685px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: row-reverse; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
font-size: 3.4rem; | |
margin-bottom: 0; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -9rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: row wrap; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 50%; | |
height: auto; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 40%; | |
} | |
.left-section{ | |
width: 50%; | |
height: auto; | |
margin-bottom: 4rem; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 50%; | |
} | |
.container-bottom-section{ | |
display: flex; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content: flex-end; | |
width: 50%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
/*============ Menu toggle=========== */ | |
.toggle-menu-container{ | |
display: flex; | |
justify-content: flex-end; | |
width: 70%; | |
height: auto; | |
} | |
.toggle-menu{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu-two{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu:hover{ | |
border: 1px solid #f8f8f8; | |
} | |
.toggle-menu:hover .lines:nth-of-type(2){ | |
transform: translateX(15%); | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(2){ | |
background:#4eafc7; | |
} | |
.toggle-menu:active .lines:nth-of-type(1){ | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(3){ | |
background:#f8f8f8; | |
} | |
.lines{ | |
width: 70%; | |
height: 2px; | |
background: #4eafc7; | |
margin: .15rem; | |
transition: all .2s ease-in-out; | |
} | |
} | |
/* INDEX-X-LARGE OK */ | |
@media only screen and (min-width: 1580px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
} | |
.header-two{ | |
width: 100%; | |
/* background: #1b3d7a; */ | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 30%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
.container-header nav{ | |
width: 70%; | |
} | |
.container-header nav ul{ | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
width: 100%; | |
} | |
.container-header nav ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
.container-header nav ul li:hover{ | |
color: #4eafc7; | |
} | |
.container-header nav ul li:hover .line{ | |
width: 100%; | |
} | |
.container-header nav ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
.container-header nav ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 60%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 2.5rem; | |
} | |
.form-cover form{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
margin-left: 3rem; | |
} | |
.form-cover form input{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
left: -2%; | |
} | |
.form-cover form button{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
left:-3.6%; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
position: absolute; | |
left: 36.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
position: absolute; | |
right: 40.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #2d66ad; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 18.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 37.8%; | |
top: 3px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
justify-content: space-around; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 5rem; | |
} | |
.container-peooples-figure img{ | |
width: 45%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 15rem; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 59rem; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 45rem; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 32rem; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 17rem; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 62rem; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 62rem; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
margin-top: 12rem; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
bottom:26rem; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom:22rem; | |
right: 6rem; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 2rem; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 3rem; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:11rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom:25rem; | |
left: 15rem; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:20rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom:23rem; | |
left: 22rem; | |
} | |
.effective-text{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 4.4rem; | |
position: relative; | |
top: 4rem; | |
left: 14rem; | |
} | |
.container-plataform{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 40%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 80%; | |
position: relative; | |
top: 8rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 5%; | |
position: absolute; | |
right: 9rem; | |
bottom: 13rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 3rem; | |
bottom:16rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 5rem; | |
bottom: 12rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 11rem; | |
bottom: 9rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1rem; | |
bottom: 8rem; | |
} | |
.content-text{ | |
width: 60%; | |
height: auto; | |
margin-top: 5rem; | |
position: relative; | |
top: 3rem; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 3rem; | |
line-height: 1.9rem; | |
font-size: 1.3rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 345px; | |
text-align: center; | |
font-size: 1.7rem; | |
margin: 0 auto; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: row-reverse; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
font-size: 4.4rem; | |
margin-bottom: 0; | |
position: relative; | |
left: -17.2rem; | |
top: 4rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -23rem !important; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: row wrap; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 50%; | |
height: auto; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 40%; | |
} | |
.left-section{ | |
width: 50%; | |
height: auto; | |
margin-bottom: 4rem; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 50%; | |
} | |
.container-bottom-section{ | |
display: flex; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content: flex-end; | |
width: 50%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
} | |
/* INDEX-X-SMALL OK */ | |
@media only screen and (min-width: 535px) and (max-width: 664px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
padding-top: .2rem; | |
} | |
.header-two{ | |
width: 100%; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
padding-top: .3rem; | |
padding-bottom: .3rem; | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 55%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
#two-menu{ | |
display: none; | |
} | |
#one-menu{ | |
display: none; | |
width: 25%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#one-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#one-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#one-menu ul li:hover{ | |
color: #245daa; | |
} | |
#one-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#one-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#one-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
/* menu two */ | |
#two-menu{ | |
display: none; | |
} | |
#two-menu{ | |
display: none; | |
width: 25%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#two-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#two-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#two-menu ul li:hover{ | |
color: #245daa; | |
} | |
#two-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#two-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#two-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 90%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.form-cover form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.form-cover form input{ | |
width: 90%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
margin-bottom: 1rem; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
/* left: -2%; */ | |
} | |
.form-cover form button{ | |
width: 50%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
display: none; | |
position: absolute; | |
left: 32.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
display: none; | |
position: absolute; | |
right: 33.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #205098; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 5.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 5.8%; | |
top: 69px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.links-form a:nth-of-type(1){ | |
margin-bottom: 1rem; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 3rem; | |
} | |
.container-peooples-figure img{ | |
width: 90%; | |
height: 305px; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 18%; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 75%; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 55%; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 35%; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 19%; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 75%; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 74%; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 100%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
top: -25rem; | |
left: 15%; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom: 3rem; | |
right: 18%; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 1%; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 10%; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:8rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom: 23rem; | |
left: 57%; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:13rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom: 8rem; | |
left: 61%; | |
} | |
.effective-text{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 1050px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 65%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 2.9rem; | |
position: relative; | |
} | |
.container-plataform{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 58%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 100%; | |
position: relative; | |
top: 6rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 7%; | |
position: absolute; | |
right: 31%; | |
bottom: 0rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 9%; | |
bottom: 3rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 18%; | |
bottom: 7rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 39%; | |
bottom: 5rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1%; | |
bottom: -3rem; | |
} | |
.content-text{ | |
width: 100%; | |
height: auto; | |
margin-top: 16rem; | |
position: relative; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 2rem; | |
line-height: 1.9rem; | |
font-size: 1.1rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 335px; | |
text-align: center; | |
margin: 0 auto; | |
font-size: 1.5rem; | |
position: relative; | |
top: 3.2rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 1120px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 55%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
position: relative; | |
top: -10rem; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: column; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 14rem; | |
font-size: 3.4rem; | |
margin-bottom: 0; | |
} | |
.content-img-two{ | |
position: relative !important; | |
left: 36% !important; | |
top: 1rem; | |
} | |
.content-text-two{ | |
margin-top: 10rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -7rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 100%; | |
} | |
.left-section{ | |
width: 100%; | |
height: auto; | |
margin: 4rem 0; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 100%; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.container-bottom-section{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content:center; | |
width: 100%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
/*============ Menu toggle=========== */ | |
.toggle-menu-container{ | |
display: flex; | |
justify-content: flex-end; | |
width: 70%; | |
height: auto; | |
} | |
.toggle-menu{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu-two{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu:hover{ | |
border: 1px solid #f8f8f8; | |
} | |
.toggle-menu:hover .lines:nth-of-type(2){ | |
transform: translateX(15%); | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(2){ | |
background:#4eafc7; | |
} | |
.toggle-menu:active .lines:nth-of-type(1){ | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(3){ | |
background:#f8f8f8; | |
} | |
.lines{ | |
width: 70%; | |
height: 2px; | |
background: #4eafc7; | |
margin: .15rem; | |
transition: all .2s ease-in-out; | |
} | |
} | |
/* INDEX-X-X-SMALL OK */ | |
@media only screen and (min-width: 400px) and (max-width: 534px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
padding-top: .2rem; | |
} | |
.header-two{ | |
width: 100%; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
padding-top: .3rem; | |
padding-bottom: .3rem; | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 90%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
#two-menu{ | |
display: none; | |
} | |
#one-menu{ | |
display: none; | |
width: 90%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#one-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#one-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#one-menu ul li:hover{ | |
color: #245daa; | |
} | |
#one-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#one-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#one-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
/* menu two */ | |
#two-menu{ | |
display: none; | |
} | |
#two-menu{ | |
display: none; | |
width: 25%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#two-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#two-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#two-menu ul li:hover{ | |
color: #245daa; | |
} | |
#two-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#two-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#two-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 90%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.form-cover form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.form-cover form input{ | |
width: 90%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
margin-bottom: 1rem; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
/* left: -2%; */ | |
} | |
.form-cover form button{ | |
width: 50%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
display: none; | |
position: absolute; | |
left: 32.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
display: none; | |
position: absolute; | |
right: 33.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #205098; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 5.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 5.8%; | |
top: 69px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.links-form a:nth-of-type(1){ | |
margin-bottom: 1rem; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: 260px; | |
position: relative; | |
top: 3rem; | |
} | |
.container-peooples-figure img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 18%; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 75%; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 55%; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 35%; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 19%; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 75%; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 74%; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 100%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
top: -20rem; | |
left: 15%; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom: 3rem; | |
right: 18%; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 1%; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 10%; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:8rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom: 17rem; | |
left: 57%; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:13rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom: 8rem; | |
left: 61%; | |
} | |
.effective-text{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 1050px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 65%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 2.9rem; | |
position: relative; | |
} | |
.container-plataform{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 58%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 100%; | |
position: relative; | |
top: 6rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 11%; | |
position: absolute; | |
right: 18%; | |
bottom: 0rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 11%; | |
position: absolute; | |
left: 9%; | |
bottom: 3rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 10%; | |
position: absolute; | |
left: 18%; | |
bottom: 7rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 11%; | |
position: absolute; | |
right: 15%; | |
bottom: 5rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1%; | |
bottom: -3rem; | |
} | |
.content-text{ | |
width: 100%; | |
height: auto; | |
margin-top: 17rem; | |
position: relative; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 2rem; | |
line-height: 1.9rem; | |
font-size: 1.1rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 290px; | |
text-align: center; | |
margin: 0 auto; | |
font-size: 1.3rem; | |
margin-top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 1150px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 55%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
position: relative; | |
top: -9rem; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: column; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 14rem; | |
font-size: 3.4rem; | |
margin-bottom: 0; | |
} | |
.content-img-two{ | |
position: relative !important; | |
left: 36% !important; | |
top: 1rem; | |
} | |
.content-text-two{ | |
margin-top: 12rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -5.5rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 100%; | |
} | |
.left-section{ | |
width: 100%; | |
height: auto; | |
margin: 4rem 0; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 100%; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.container-bottom-section{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content:center; | |
width: 100%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
/*============ Menu toggle=========== */ | |
.toggle-menu-container{ | |
display: flex; | |
justify-content: flex-end; | |
width: 70%; | |
height: auto; | |
} | |
.toggle-menu{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu-two{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu:hover{ | |
border: 1px solid #f8f8f8; | |
} | |
.toggle-menu:hover .lines:nth-of-type(2){ | |
transform: translateX(15%); | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(2){ | |
background:#4eafc7; | |
} | |
.toggle-menu:active .lines:nth-of-type(1){ | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(3){ | |
background:#f8f8f8; | |
} | |
.lines{ | |
width: 70%; | |
height: 2px; | |
background: #4eafc7; | |
margin: .15rem; | |
transition: all .2s ease-in-out; | |
} | |
} | |
/* INDEX-X-X-X-SMALL OK */ | |
@media only screen and (min-width: 0px) and (max-width: 399px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
padding-top: .2rem; | |
} | |
.header-two{ | |
width: 100%; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
padding-top: .3rem; | |
padding-bottom: .3rem; | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 100%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
#two-menu{ | |
display: none; | |
} | |
#one-menu{ | |
display: none; | |
width: 90%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#one-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#one-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#one-menu ul li:hover{ | |
color: #245daa; | |
} | |
#one-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#one-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#one-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
/* menu two */ | |
#two-menu{ | |
display: none; | |
} | |
#two-menu{ | |
display: none; | |
width: 90%; | |
position: absolute; | |
top: 4rem; | |
right: 5%; | |
background: #4eafc7; | |
border-radius: 20px 0; | |
} | |
.clip-set{ | |
width: 20px; | |
height: 60px; | |
background: #4eafc7; | |
position: absolute; | |
right: 4%; | |
top: -3.7rem; | |
-webkit-clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
clip-path: polygon(51% 85%, 0% 100%, 100% 100%); | |
} | |
#two-menu ul{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
align-items: center; | |
width: 100%; | |
} | |
#two-menu ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
#two-menu ul li:hover{ | |
color: #245daa; | |
} | |
#two-menu ul li:hover .line{ | |
width: 100%; | |
} | |
#two-menu ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
#two-menu ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 90%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.3rem; | |
} | |
.sections-cover .text-cover h1 > span{ | |
font-size:2.3rem !important; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.form-cover form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.form-cover form input{ | |
width: 90%; | |
height: 40px; | |
border-radius: 50px; | |
border:none; | |
margin-bottom: 1rem; | |
padding-left: 3rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
/* left: -2%; */ | |
} | |
.form-cover form button{ | |
width: 50%; | |
height: 40px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
display: none; | |
position: absolute; | |
left: 32.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
display: none; | |
position: absolute; | |
right: 33.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #205098; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 35px; | |
height: 35px; | |
position: absolute; | |
left: 5.8%; | |
top: 2px; | |
} | |
.img-input-two{ | |
width: 35px; | |
height: 35px; | |
position: absolute; | |
left: 5.8%; | |
top: 58px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
margin-bottom: .5rem; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 3rem; | |
} | |
.container-peooples-figure img{ | |
width: 90%; | |
height: 190px; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: .5rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 7%; | |
position: absolute; | |
left: 12%; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 82%; | |
top: 9rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 55%; | |
top:4rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 23%; | |
top: 6rem; | |
width: 7%; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 19%; | |
top:13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 85%; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 8%; | |
left: 85%; | |
top: 13rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 125px; | |
height: 125px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 15rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 100%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
top: -16rem; | |
left: 15%; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom: 3rem; | |
right: 18%; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 1%; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 10%; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:8rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom: 14rem; | |
left: 57%; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:13rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom: 8rem; | |
left: 61%; | |
} | |
.effective-text{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 995px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 65%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 2.9rem; | |
position: relative; | |
} | |
.container-plataform{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 58%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 100%; | |
position: relative; | |
top: 10rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 11%; | |
position: absolute; | |
right: 18%; | |
bottom: -1rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 11%; | |
position: absolute; | |
left: 9%; | |
bottom: 1rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 10%; | |
position: absolute; | |
left: 18%; | |
bottom: -1rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 11%; | |
position: absolute; | |
right: 15%; | |
bottom: -6rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1%; | |
bottom: -5rem; | |
} | |
.content-text{ | |
width: 100%; | |
height: auto; | |
margin-top: 13rem; | |
position: relative; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 2rem; | |
line-height: 1.4rem; | |
font-size: 1.1rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 218px; | |
text-align: center; | |
margin: 0 auto; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 1155px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 55%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
position: relative; | |
top: -12rem; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: column; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 14rem; | |
font-size: 3.4rem; | |
margin-bottom: 0; | |
} | |
.content-img-two{ | |
position: relative !important; | |
left: 36% !important; | |
top: 1rem; | |
} | |
.content-text-two{ | |
margin-top: 14rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -4rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 100%; | |
} | |
.left-section{ | |
width: 100%; | |
height: auto; | |
margin: 4rem 0; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 100%; | |
text-align: center; | |
margin-bottom: 2rem; | |
} | |
.container-bottom-section{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content:center; | |
width: 100%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
/*============ Menu toggle=========== */ | |
.toggle-menu-container{ | |
display: flex; | |
justify-content: flex-end; | |
width: 70%; | |
height: auto; | |
} | |
.toggle-menu{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu-two{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
border:1px solid #4eafc7; | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.toggle-menu:hover{ | |
border: 1px solid #f8f8f8; | |
} | |
.toggle-menu:hover .lines:nth-of-type(2){ | |
transform: translateX(15%); | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(2){ | |
background:#4eafc7; | |
} | |
.toggle-menu:active .lines:nth-of-type(1){ | |
background:#f8f8f8; | |
} | |
.toggle-menu:active .lines:nth-of-type(3){ | |
background:#f8f8f8; | |
} | |
.lines{ | |
width: 70%; | |
height: 2px; | |
background: #4eafc7; | |
margin: .15rem; | |
transition: all .2s ease-in-out; | |
} | |
} | |
/* INDEX OK */ | |
@media only screen and (min-width: 1170px) and (max-width: 1365px) | |
{ | |
body{ | |
overflow-x: hidden; | |
} | |
.cover{ | |
width: 100%; | |
height: 100vh; | |
background: #000; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
} | |
header{ | |
width: 100%; | |
height: auto; | |
} | |
.header-two{ | |
width: 100%; | |
/* background: #1b3d7a; */ | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/bg-cover.png); | |
position: fixed; | |
top: 0; | |
left: 0; | |
transform: translateY(-100%); | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
z-index: 99; | |
box-shadow: 0px 0px 0px 0px #4d4d4d; | |
} | |
.in-header{ | |
transform: translateY(0) | |
} | |
.container-header{ | |
display: flex; | |
align-items: center; | |
} | |
.container-header .logo{ | |
width: 30%; | |
} | |
.container-header .logo img{ | |
width: 100%; | |
} | |
.container-header nav{ | |
width: 70%; | |
} | |
.container-header nav ul{ | |
display: flex; | |
justify-content: flex-end; | |
align-items: center; | |
width: 100%; | |
} | |
.container-header nav ul li{ | |
width: 100%; | |
padding: .5rem 1.2rem; | |
color: #f8f8f8; | |
transition: all .4s ease-in-out; | |
position: relative; | |
} | |
.line{ | |
width: 0; | |
height: 1px; | |
background: #f8f8f8; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1); | |
} | |
.container-header nav ul li:hover{ | |
color: #4eafc7; | |
} | |
.container-header nav ul li:hover .line{ | |
width: 100%; | |
} | |
.container-header nav ul #last{ | |
background: #4eafc7; | |
border-radius: 20px; | |
} | |
.container-header nav ul #last:hover{ | |
color: #f8f8f8; | |
background: #2c7e92; | |
} | |
.sections-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
} | |
.sections-cover .text-cover{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.sections-cover .text-cover h1{ | |
width: 60%; | |
text-align: center; | |
margin-top: 5rem; | |
font-size: 2.7rem; | |
} | |
.form-cover{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: 100%; | |
height: auto; | |
margin-top: 2.5rem; | |
} | |
.form-cover form{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
margin-left: 3rem; | |
} | |
.form-cover form input{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
padding-left: 4rem; | |
} | |
.form-cover form input:nth-of-type(2){ | |
z-index: 2; | |
position: relative; | |
left: -2%; | |
} | |
.form-cover form button{ | |
width: 21%; | |
height: 50px; | |
border-radius: 50px; | |
border:none; | |
position: relative; | |
left:-3.6%; | |
z-index: 4; | |
/* background: linear-gradient(70deg, #d98e26, #f6be17); */ | |
background: #4eafc7; | |
color: #fff; | |
transition: all .4s ease-in-out; | |
} | |
.form-cover form button:hover{ | |
background: #1c4b91; | |
cursor: pointer; | |
} | |
.clip-border{ | |
position: absolute; | |
left: 36.6%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #1f4e96; | |
} | |
.clip-border-two{ | |
position: absolute; | |
right: 40.4%; | |
width: 50px; | |
height: 50px; | |
border-radius: 50%; | |
background: #2d66ad; | |
z-index: 3; | |
} | |
.img-input{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 18.8%; | |
top: 3px; | |
} | |
.img-input-two{ | |
width: 45px; | |
height: 45px; | |
position: absolute; | |
left: 37.8%; | |
top: 3px; | |
z-index: 10; | |
} | |
.img-input img , .img-input-two img{ | |
width: 100%; | |
} | |
.links-form{ | |
display: flex; | |
justify-content: space-around; | |
width: 100%; | |
height: auto; | |
margin-top: 1.5rem; | |
} | |
.links-form a{ | |
color: #fff; | |
text-decoration: underline; | |
} | |
.figurer-cover{ | |
width: 100%; | |
height: 600px; | |
position: relative; | |
overflow: hidden; | |
} | |
.container-peooples-figure{ | |
display: flex; | |
justify-content: center; | |
width: 100%; | |
height: auto; | |
position: relative; | |
top: 5rem; | |
} | |
.container-peooples-figure img{ | |
width: 45%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
position: relative; | |
left: 1rem; | |
} | |
@keyframes figure-people{ | |
from{ | |
transform: translateY(-5%); | |
} | |
to{ | |
transform: translateY(5%); | |
} | |
} | |
.figurer-cover .emojis{ | |
width: 4%; | |
position: absolute; | |
left: 15rem; | |
top: 10rem; | |
} | |
.figurer-cover .emojis:nth-of-type(2){ | |
left: 59rem; | |
top: 13rem; | |
} | |
.figurer-cover .emojis:nth-of-type(3){ | |
left: 45rem; | |
top:8rem; | |
} | |
.figurer-cover .emojis:nth-of-type(4){ | |
left: 32rem; | |
top:6rem; | |
} | |
.figurer-cover .emojis:nth-of-type(5){ | |
left: 17rem; | |
top:17rem; | |
} | |
.figurer-cover .emojis:nth-of-type(6){ | |
left: 62rem; | |
top: 5rem; | |
} | |
.figurer-cover .emojis:nth-of-type(7){ | |
width: 3%; | |
left: 62rem; | |
top: 18rem; | |
} | |
/* services */ | |
.services{ | |
width: 100%; | |
height: auto; | |
margin-top: 12rem; | |
} | |
.container-services{ | |
display: flex; | |
flex-flow: row wrap; | |
justify-content: space-between; | |
width: 100%; | |
height: auto; | |
} | |
.card-services{ | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
width: calc(97% / 2); | |
height: auto; | |
margin-bottom: 2rem; | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
border: 1px solid #0101; | |
padding: 1rem 0; | |
box-shadow: 0px 4px 19px -9px #4d4d4d; | |
} | |
.img-card{ | |
width: 175px; | |
height: 175px; | |
border-radius: 50%; | |
position: relative; | |
} | |
.img-card img{ | |
width: 100%; | |
height: auto; | |
} | |
.ball-over{ | |
width: 185px; | |
height: 185px; | |
border-radius: 50%; | |
border:1px solid rgb(107, 18, 134); | |
transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1); | |
background: rgb(85, 13, 107); | |
position: absolute; | |
} | |
.card-services p{ | |
color: #4d4d4d; | |
margin-top: 1rem; | |
font-weight: bold; | |
} | |
/* effective */ | |
.effective{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
margin-top: 25rem; | |
position: relative; | |
} | |
.effective > img{ | |
width: 100%; | |
position: absolute; | |
top: -16rem; | |
} | |
.container-effective{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
padding-top: 5rem; | |
overflow: hidden; | |
padding-bottom: 4rem; | |
} | |
.effective-img{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-img > img{ | |
width: 90%; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.effective-icons{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.effective-icons img:nth-of-type(1){ | |
width: 20%; | |
position: absolute; | |
bottom:26rem; | |
} | |
.effective-icons img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
bottom:22rem; | |
right: 6rem; | |
} | |
.effective-icons img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
bottom:2rem; | |
left: 2rem; | |
} | |
.effective-icons img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
bottom:10rem; | |
right: 3rem; | |
} | |
.effective-icons img:nth-of-type(5){ | |
width: 15%; | |
position: absolute; | |
bottom:11rem; | |
} | |
.effective-icons img:nth-of-type(6){ | |
width: 7%; | |
position: absolute; | |
bottom:25rem; | |
left: 15rem; | |
} | |
.effective-icons img:nth-of-type(7){ | |
width: 7%; | |
position: absolute; | |
bottom:20rem; | |
} | |
.effective-icons img:nth-of-type(8){ | |
width: 7%; | |
position: absolute; | |
bottom:23rem; | |
left: 22rem; | |
} | |
.effective-text{ | |
width: 50%; | |
height: auto; | |
} | |
.effective-text p{ | |
line-height: 1.4rem; | |
} | |
.bolder{ | |
font-weight: bolder; | |
color:#a5d76e; | |
} | |
.effective-text ul{ | |
width: 100%; | |
height: auto; | |
} | |
.effective-text ul li{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 1rem; | |
} | |
.effective-text button{ | |
width: 200px; | |
height: 40px; | |
border-radius: 20px; | |
border:none; | |
margin-top: 1rem; | |
} | |
/* plataform */ | |
.plataform{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
overflow: hidden; | |
} | |
.plataform h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
margin-bottom: 0; | |
font-size: 4.4rem; | |
position: relative; | |
top: 4rem; | |
left: 14rem; | |
} | |
.container-plataform{ | |
display: flex; | |
width: 100%; | |
height: auto; | |
} | |
.content-img{ | |
width: 40%; | |
height: auto; | |
} | |
.content-img > img{ | |
width: 80%; | |
position: relative; | |
top: 8rem; | |
animation: figure-people 1.7s ease-in-out alternate infinite; | |
} | |
.container-icons-plataform{ | |
width: 100%; | |
height: auto; | |
position: relative; | |
} | |
.container-icons-plataform > img:nth-of-type(1){ | |
width: 5%; | |
position: absolute; | |
right: 9rem; | |
bottom: 13rem; | |
} | |
.container-icons-plataform > img:nth-of-type(2){ | |
width: 7%; | |
position: absolute; | |
left: 3rem; | |
bottom:16rem; | |
} | |
.container-icons-plataform > img:nth-of-type(3){ | |
width: 7%; | |
position: absolute; | |
left: 5rem; | |
bottom: 12rem; | |
} | |
.container-icons-plataform > img:nth-of-type(4){ | |
width: 7%; | |
position: absolute; | |
right: 11rem; | |
bottom: 9rem; | |
} | |
.container-icons-plataform > img:nth-of-type(5){ | |
width: 9%; | |
position: absolute; | |
left: 1rem; | |
bottom: 8rem; | |
} | |
.content-text{ | |
width: 60%; | |
height: auto; | |
margin-top: 5rem; | |
position: relative; | |
top: 3rem; | |
} | |
.content-text ul{ | |
display: flex; | |
flex-flow: column; | |
width: 100%; | |
height: auto; | |
} | |
.content-text ul li{ | |
width: 100%; | |
font-weight: bolder; | |
color: rgb(156, 156, 156); | |
margin-bottom: 3rem; | |
line-height: 1.9rem; | |
font-size: 1.3rem; | |
letter-spacing: 0.1px; | |
} | |
#last-li{ | |
width: 345px; | |
text-align: center; | |
font-size: 1.7rem; | |
margin: 0 auto; | |
position: relative; | |
top: 4rem; | |
} | |
.bolder-black{ | |
font-weight: bolder; | |
color: rgb(90, 90, 90); | |
} | |
/* .conttent-infos{ | |
margin-top: 3rem; | |
} | |
.conttent-infos #insta{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #insta p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #insta .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #insta .info-img img{ | |
max-width: 100%; | |
} | |
.conttent-infos #insta .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #insta .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #insta .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* youtube configs */ | |
/* .conttent-infos #youtube{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #youtube .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #youtube p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #youtube .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #youtube .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #youtube .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end youtube configs */ | |
/* twitter configs */ | |
/* .conttent-infos #twitter{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} */ | |
/* .conttent-infos #twitter .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #twitter p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #twitter .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #twitter .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #twitter .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #facebook{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #facebook .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #facebook p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #facebook .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #facebook .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #facebook .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} | |
/* end twitter configs */ | |
/* facebook configs */ | |
/* .conttent-infos #soundcloud{ | |
display: flex; | |
flex-flow: column; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud .info-img{ | |
width: 100%; | |
display: flex; | |
justify-content: center; | |
} | |
.conttent-infos #soundcloud p{ | |
color: #4d4d4d; | |
} | |
.conttent-infos #soundcloud .insta-info { | |
display: flex; | |
flex-flow: column; | |
align-items: center; | |
} | |
.conttent-infos #soundcloud .insta-info h1{ | |
margin-bottom: 1rem; | |
} | |
.conttent-infos #soundcloud .insta-info p{ | |
width: 90%; | |
text-align: center; | |
margin-bottom: 1rem; | |
} */ | |
/* end twitter configs */ | |
/* buy */ | |
.buy{ | |
width: 100%; | |
height: 800px; | |
background-image: url(https://f000.backblazeb2.com/file/servicosredessociais/section-four-bg-right.png); | |
background-repeat: no-repeat; | |
background-size: 40%; | |
background-position-y: 30%; | |
background-position: right; | |
overflow: hidden; | |
} | |
.container-buy{ | |
display: flex; | |
flex-flow: row-reverse; | |
} | |
.buy h1{ | |
width: 100%; | |
height: auto; | |
text-align: center; | |
color: #5290c1; | |
margin-top: 4rem; | |
font-size: 4.4rem; | |
margin-bottom: 0; | |
position: relative; | |
left: -17.2rem; | |
top: 4rem; | |
} | |
/* footer */ | |
footer{ | |
width: 100%; | |
height: auto; | |
background: #35679c; | |
position: relative; | |
margin-top: 15rem; | |
} | |
.border-img{ | |
width: 100%; | |
height: auto; | |
position: absolute; | |
top: -16rem; | |
} | |
.border-img img{ | |
width: 100%; | |
} | |
.container-footer{ | |
display: flex; | |
flex-flow: row wrap; | |
width: 100%; | |
height: auto; | |
padding-top: 5rem; | |
} | |
.right-section{ | |
width: 50%; | |
height: auto; | |
} | |
.footer-logo{ | |
width: 100%; | |
height: auto; | |
} | |
.footer-logo img{ | |
width: 40%; | |
} | |
.left-section{ | |
width: 50%; | |
height: auto; | |
margin-bottom: 4rem; | |
} | |
.left-section ul{ | |
width: 100%; | |
height: auto; | |
margin-top: 1rem; | |
} | |
.left-section ul li{ | |
display: flex; | |
align-items: center; | |
color: #f8f8f8; | |
margin-bottom: .5rem; | |
transition: all .3s ease-in-out; | |
} | |
.left-section ul li:hover{ | |
color: #8ebbec; | |
} | |
.bottom-section{ | |
width: 100%; | |
height: auto; | |
margin-top: 3rem; | |
background: #5290c1; | |
padding: 2rem 0; | |
} | |
.bottom-section p{ | |
width: 50%; | |
} | |
.container-bottom-section{ | |
display: flex; | |
align-items: center; | |
} | |
.social-networks{ | |
display: flex; | |
justify-content: flex-end; | |
width: 50%; | |
height: auto; | |
} | |
.networks{ | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #f8f8f8; | |
margin-left: .8rem; | |
transition: all .2s ease-in-out; | |
} | |
.networks img{ | |
width: 100%; | |
} | |
.networks:hover{ | |
transform: translateY(-15%); | |
} | |
} | |
/* CSS Document */ | |
/*---------------------------------------------------------------------------*/ | |
/*NORMALIZE*/ | |
/*---------------------------------------------------------------------------*/ | |
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ | |
/* Document | |
========================================================================== */ | |
/** | |
* 1. Correct the line height in all browsers. | |
* 2. Prevent adjustments of font size after orientation changes in | |
* IE on Windows Phone and in iOS. | |
*/ | |
html { | |
line-height: 1.15; /* 1 */ | |
-ms-text-size-adjust: 100%; /* 2 */ | |
-webkit-text-size-adjust: 100%; /* 2 */ | |
} | |
/* Sections | |
========================================================================== */ | |
/** | |
* Remove the margin in all browsers (opinionated). | |
*/ | |
body { | |
margin: 0; | |
} | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
article, | |
aside, | |
footer, | |
header, | |
nav, | |
section { | |
display: block; | |
} | |
/** | |
* Correct the font size and margin on `h1` elements within `section` and | |
* `article` contexts in Chrome, Firefox, and Safari. | |
*/ | |
h1 { | |
font-size: 2em; | |
margin: 0.67em 0; | |
} | |
/* Grouping content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in IE. | |
*/ | |
figcaption, | |
figure, | |
main { /* 1 */ | |
display: block; | |
} | |
/** | |
* Add the correct margin in IE 8. | |
*/ | |
figure { | |
margin: 1em 40px; | |
} | |
/** | |
* 1. Add the correct box sizing in Firefox. | |
* 2. Show the overflow in Edge and IE. | |
*/ | |
hr { | |
box-sizing: border-box; /* 1 */ | |
height: 0; /* 1 */ | |
overflow: visible; /* 2 */ | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
pre { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/* Text-level semantics | |
========================================================================== */ | |
/** | |
* 1. Remove the gray background on active links in IE 10. | |
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | |
*/ | |
a { | |
background-color: transparent; /* 1 */ | |
-webkit-text-decoration-skip: objects; /* 2 */ | |
} | |
/** | |
* 1. Remove the bottom border in Chrome 57- and Firefox 39-. | |
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | |
*/ | |
abbr[title] { | |
border-bottom: none; /* 1 */ | |
text-decoration: underline; /* 2 */ | |
text-decoration: underline dotted; /* 2 */ | |
} | |
/** | |
* Prevent the duplicate application of `bolder` by the next rule in Safari 6. | |
*/ | |
b, | |
strong { | |
font-weight: inherit; | |
} | |
/** | |
* Add the correct font weight in Chrome, Edge, and Safari. | |
*/ | |
b, | |
strong { | |
font-weight: bolder; | |
} | |
/** | |
* 1. Correct the inheritance and scaling of font size in all browsers. | |
* 2. Correct the odd `em` font sizing in all browsers. | |
*/ | |
code, | |
kbd, | |
samp { | |
font-family: monospace, monospace; /* 1 */ | |
font-size: 1em; /* 2 */ | |
} | |
/** | |
* Add the correct font style in Android 4.3-. | |
*/ | |
dfn { | |
font-style: italic; | |
} | |
/** | |
* Add the correct background and color in IE 9-. | |
*/ | |
mark { | |
background-color: #ff0; | |
color: #000; | |
} | |
/** | |
* Add the correct font size in all browsers. | |
*/ | |
small { | |
font-size: 80%; | |
} | |
/** | |
* Prevent `sub` and `sup` elements from affecting the line height in | |
* all browsers. | |
*/ | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
/* Embedded content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
audio, | |
video { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in iOS 4-7. | |
*/ | |
audio:not([controls]) { | |
display: none; | |
height: 0; | |
} | |
/** | |
* Remove the border on images inside links in IE 10-. | |
*/ | |
img { | |
border-style: none; | |
} | |
/** | |
* Hide the overflow in IE. | |
*/ | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* Forms | |
========================================================================== */ | |
/** | |
* 1. Change the font styles in all browsers (opinionated). | |
* 2. Remove the margin in Firefox and Safari. | |
*/ | |
button, | |
input, | |
optgroup, | |
select, | |
textarea { | |
font-family: sans-serif; /* 1 */ | |
font-size: 100%; /* 1 */ | |
line-height: 1.15; /* 1 */ | |
margin: 0; /* 2 */ | |
} | |
/** | |
* Show the overflow in IE. | |
* 1. Show the overflow in Edge. | |
*/ | |
button, | |
input { /* 1 */ | |
overflow: visible; | |
} | |
/** | |
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |
* 1. Remove the inheritance of text transform in Firefox. | |
*/ | |
button, | |
select { /* 1 */ | |
text-transform: none; | |
} | |
/** | |
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` | |
* controls in Android 4. | |
* 2. Correct the inability to style clickable types in iOS and Safari. | |
*/ | |
button, | |
html [type="button"], /* 1 */ | |
[type="reset"], | |
[type="submit"] { | |
-webkit-appearance: button; /* 2 */ | |
} | |
/** | |
* Remove the inner border and padding in Firefox. | |
*/ | |
button::-moz-focus-inner, | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
/** | |
* Restore the focus styles unset by the previous rule. | |
*/ | |
button:-moz-focusring, | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring { | |
outline: 1px dotted ButtonText; | |
} | |
/** | |
* Correct the padding in Firefox. | |
*/ | |
fieldset { | |
padding: 0.35em 0.75em 0.625em; | |
} | |
/** | |
* 1. Correct the text wrapping in Edge and IE. | |
* 2. Correct the color inheritance from `fieldset` elements in IE. | |
* 3. Remove the padding so developers are not caught out when they zero out | |
* `fieldset` elements in all browsers. | |
*/ | |
legend { | |
box-sizing: border-box; /* 1 */ | |
color: inherit; /* 2 */ | |
display: table; /* 1 */ | |
max-width: 100%; /* 1 */ | |
padding: 0; /* 3 */ | |
white-space: normal; /* 1 */ | |
} | |
/** | |
* 1. Add the correct display in IE 9-. | |
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. | |
*/ | |
progress { | |
display: inline-block; /* 1 */ | |
vertical-align: baseline; /* 2 */ | |
} | |
/** | |
* Remove the default vertical scrollbar in IE. | |
*/ | |
textarea { | |
overflow: auto; | |
} | |
/** | |
* 1. Add the correct box sizing in IE 10-. | |
* 2. Remove the padding in IE 10-. | |
*/ | |
[type="checkbox"], | |
[type="radio"] { | |
box-sizing: border-box; /* 1 */ | |
padding: 0; /* 2 */ | |
} | |
/** | |
* Correct the cursor style of increment and decrement buttons in Chrome. | |
*/ | |
[type="number"]::-webkit-inner-spin-button, | |
[type="number"]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
/** | |
* 1. Correct the odd appearance in Chrome and Safari. | |
* 2. Correct the outline style in Safari. | |
*/ | |
[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
outline-offset: -2px; /* 2 */ | |
} | |
/** | |
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. | |
*/ | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/** | |
* 1. Correct the inability to style clickable types in iOS and Safari. | |
* 2. Change font properties to `inherit` in Safari. | |
*/ | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; /* 1 */ | |
font: inherit; /* 2 */ | |
} | |
/* Interactive | |
========================================================================== */ | |
/* | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in Edge, IE, and Firefox. | |
*/ | |
details, /* 1 */ | |
menu { | |
display: block; | |
} | |
/* | |
* Add the correct display in all browsers. | |
*/ | |
summary { | |
display: list-item; | |
} | |
/* Scripting | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
canvas { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in IE. | |
*/ | |
template { | |
display: none; | |
} | |
/* Hidden | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 10-. | |
*/ | |
[hidden] { | |
display: none; | |
} | |
/*---------------------------------------------------------------------------*/ | |
/*RESET*/ | |
/*---------------------------------------------------------------------------*/ | |
/*---------------------------------------------------------------------------*/ | |
/*Corpo*/ | |
/*---------------------------------------------------------------------------*/ | |
*{ | |
margin:0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body{ | |
font-size:16px; | |
color: #f8f8f8; | |
font-family: 'Lato'; | |
} | |
.container{ | |
width:90%; | |
height: auto; | |
margin: 0 auto; | |
} | |
/*---------------------------------------------------------------------------*/ | |
/*Tipografia*/ | |
/*---------------------------------------------------------------------------*/ | |
li{ | |
list-style-type: none; | |
} | |
a{ | |
text-decoration: none; | |
} | |
@font-face{ | |
font-family: 'Lato-Regular'; | |
src: url(../font/Lato-Regular.ttf); /*TTF fonte para demais navegadores, EOF para explorer*/ | |
font-weight: normal; | |
font-style: normal; | |
} | |
/*---------------------------------------------------------------------------*/ | |
/*ANIMATE*/ | |
/*---------------------------------------------------------------------------*/ | |
/*! | |
* animate.css -http://daneden.me/animate | |
* Version - 3.7.0 | |
* Licensed under the MIT license - http://opensource.org/licenses/MIT | |
* | |
* Copyright (c) 2018 Daniel Eden | |
*/ | |
@-webkit-keyframes bounce { | |
from, | |
20%, | |
53%, | |
80%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
40%, | |
43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -4px, 0); | |
transform: translate3d(0, -4px, 0); | |
} | |
} | |
@keyframes bounce { | |
from, | |
20%, | |
53%, | |
80%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
40%, | |
43% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
-webkit-transform: translate3d(0, -30px, 0); | |
transform: translate3d(0, -30px, 0); | |
} | |
70% { | |
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); | |
-webkit-transform: translate3d(0, -15px, 0); | |
transform: translate3d(0, -15px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -4px, 0); | |
transform: translate3d(0, -4px, 0); | |
} | |
} | |
.bounce { | |
-webkit-animation-name: bounce; | |
animation-name: bounce; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
@-webkit-keyframes flash { | |
from, | |
50%, | |
to { | |
opacity: 1; | |
} | |
25%, | |
75% { | |
opacity: 0; | |
} | |
} | |
@keyframes flash { | |
from, | |
50%, | |
to { | |
opacity: 1; | |
} | |
25%, | |
75% { | |
opacity: 0; | |
} | |
} | |
.flash { | |
-webkit-animation-name: flash; | |
animation-name: flash; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes pulse { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.05, 1.05, 1.05); | |
transform: scale3d(1.05, 1.05, 1.05); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.pulse { | |
-webkit-animation-name: pulse; | |
animation-name: pulse; | |
} | |
@-webkit-keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(0.95, 1.05, 1); | |
transform: scale3d(0.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, 0.95, 1); | |
transform: scale3d(1.05, 0.95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes rubberBand { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
30% { | |
-webkit-transform: scale3d(1.25, 0.75, 1); | |
transform: scale3d(1.25, 0.75, 1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.75, 1.25, 1); | |
transform: scale3d(0.75, 1.25, 1); | |
} | |
50% { | |
-webkit-transform: scale3d(1.15, 0.85, 1); | |
transform: scale3d(1.15, 0.85, 1); | |
} | |
65% { | |
-webkit-transform: scale3d(0.95, 1.05, 1); | |
transform: scale3d(0.95, 1.05, 1); | |
} | |
75% { | |
-webkit-transform: scale3d(1.05, 0.95, 1); | |
transform: scale3d(1.05, 0.95, 1); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.rubberBand { | |
-webkit-animation-name: rubberBand; | |
animation-name: rubberBand; | |
} | |
@-webkit-keyframes shake { | |
from, | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, | |
30%, | |
50%, | |
70%, | |
90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, | |
40%, | |
60%, | |
80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
@keyframes shake { | |
from, | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
10%, | |
30%, | |
50%, | |
70%, | |
90% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
20%, | |
40%, | |
60%, | |
80% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
} | |
.shake { | |
-webkit-animation-name: shake; | |
animation-name: shake; | |
} | |
@-webkit-keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
@keyframes headShake { | |
0% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
6.5% { | |
-webkit-transform: translateX(-6px) rotateY(-9deg); | |
transform: translateX(-6px) rotateY(-9deg); | |
} | |
18.5% { | |
-webkit-transform: translateX(5px) rotateY(7deg); | |
transform: translateX(5px) rotateY(7deg); | |
} | |
31.5% { | |
-webkit-transform: translateX(-3px) rotateY(-5deg); | |
transform: translateX(-3px) rotateY(-5deg); | |
} | |
43.5% { | |
-webkit-transform: translateX(2px) rotateY(3deg); | |
transform: translateX(2px) rotateY(3deg); | |
} | |
50% { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
} | |
.headShake { | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
-webkit-animation-name: headShake; | |
animation-name: headShake; | |
} | |
@-webkit-keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
@keyframes swing { | |
20% { | |
-webkit-transform: rotate3d(0, 0, 1, 15deg); | |
transform: rotate3d(0, 0, 1, 15deg); | |
} | |
40% { | |
-webkit-transform: rotate3d(0, 0, 1, -10deg); | |
transform: rotate3d(0, 0, 1, -10deg); | |
} | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 5deg); | |
transform: rotate3d(0, 0, 1, 5deg); | |
} | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, -5deg); | |
transform: rotate3d(0, 0, 1, -5deg); | |
} | |
to { | |
-webkit-transform: rotate3d(0, 0, 1, 0deg); | |
transform: rotate3d(0, 0, 1, 0deg); | |
} | |
} | |
.swing { | |
-webkit-transform-origin: top center; | |
transform-origin: top center; | |
-webkit-animation-name: swing; | |
animation-name: swing; | |
} | |
@-webkit-keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, | |
20% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, | |
50%, | |
70%, | |
90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, | |
60%, | |
80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes tada { | |
from { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
10%, | |
20% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); | |
} | |
30%, | |
50%, | |
70%, | |
90% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); | |
} | |
40%, | |
60%, | |
80% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); | |
} | |
to { | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.tada { | |
-webkit-animation-name: tada; | |
animation-name: tada; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes wobble { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes wobble { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
15% { | |
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); | |
} | |
30% { | |
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); | |
} | |
45% { | |
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); | |
} | |
60% { | |
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); | |
} | |
75% { | |
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.wobble { | |
-webkit-animation-name: wobble; | |
animation-name: wobble; | |
} | |
@-webkit-keyframes jello { | |
from, | |
11.1%, | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
@keyframes jello { | |
from, | |
11.1%, | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
22.2% { | |
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg); | |
transform: skewX(-12.5deg) skewY(-12.5deg); | |
} | |
33.3% { | |
-webkit-transform: skewX(6.25deg) skewY(6.25deg); | |
transform: skewX(6.25deg) skewY(6.25deg); | |
} | |
44.4% { | |
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg); | |
transform: skewX(-3.125deg) skewY(-3.125deg); | |
} | |
55.5% { | |
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg); | |
transform: skewX(1.5625deg) skewY(1.5625deg); | |
} | |
66.6% { | |
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
transform: skewX(-0.78125deg) skewY(-0.78125deg); | |
} | |
77.7% { | |
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg); | |
transform: skewX(0.390625deg) skewY(0.390625deg); | |
} | |
88.8% { | |
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
transform: skewX(-0.1953125deg) skewY(-0.1953125deg); | |
} | |
} | |
.jello { | |
-webkit-animation-name: jello; | |
animation-name: jello; | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
} | |
@-webkit-keyframes heartBeat { | |
0% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
14% { | |
-webkit-transform: scale(1.3); | |
transform: scale(1.3); | |
} | |
28% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
42% { | |
-webkit-transform: scale(1.3); | |
transform: scale(1.3); | |
} | |
70% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
} | |
@keyframes heartBeat { | |
0% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
14% { | |
-webkit-transform: scale(1.3); | |
transform: scale(1.3); | |
} | |
28% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
42% { | |
-webkit-transform: scale(1.3); | |
transform: scale(1.3); | |
} | |
70% { | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
} | |
.heartBeat { | |
-webkit-animation-name: heartBeat; | |
animation-name: heartBeat; | |
-webkit-animation-duration: 1.3s; | |
animation-duration: 1.3s; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
@-webkit-keyframes bounceIn { | |
from, | |
20%, | |
40%, | |
60%, | |
80%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9); | |
transform: scale3d(0.9, 0.9, 0.9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(0.97, 0.97, 0.97); | |
transform: scale3d(0.97, 0.97, 0.97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
@keyframes bounceIn { | |
from, | |
20%, | |
40%, | |
60%, | |
80%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
20% { | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
40% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9); | |
transform: scale3d(0.9, 0.9, 0.9); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.03, 1.03, 1.03); | |
transform: scale3d(1.03, 1.03, 1.03); | |
} | |
80% { | |
-webkit-transform: scale3d(0.97, 0.97, 0.97); | |
transform: scale3d(0.97, 0.97, 0.97); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale3d(1, 1, 1); | |
transform: scale3d(1, 1, 1); | |
} | |
} | |
.bounceIn { | |
-webkit-animation-duration: 0.75s; | |
animation-duration: 0.75s; | |
-webkit-animation-name: bounceIn; | |
animation-name: bounceIn; | |
} | |
@-webkit-keyframes bounceInDown { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInDown { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -3000px, 0); | |
transform: translate3d(0, -3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 25px, 0); | |
transform: translate3d(0, 25px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, 5px, 0); | |
transform: translate3d(0, 5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInDown { | |
-webkit-animation-name: bounceInDown; | |
animation-name: bounceInDown; | |
} | |
@-webkit-keyframes bounceInLeft { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInLeft { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
0% { | |
opacity: 0; | |
-webkit-transform: translate3d(-3000px, 0, 0); | |
transform: translate3d(-3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(25px, 0, 0); | |
transform: translate3d(25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(-10px, 0, 0); | |
transform: translate3d(-10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(5px, 0, 0); | |
transform: translate3d(5px, 0, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInLeft { | |
-webkit-animation-name: bounceInLeft; | |
animation-name: bounceInLeft; | |
} | |
@-webkit-keyframes bounceInRight { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInRight { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(3000px, 0, 0); | |
transform: translate3d(3000px, 0, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(-25px, 0, 0); | |
transform: translate3d(-25px, 0, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(10px, 0, 0); | |
transform: translate3d(10px, 0, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(-5px, 0, 0); | |
transform: translate3d(-5px, 0, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInRight { | |
-webkit-animation-name: bounceInRight; | |
animation-name: bounceInRight; | |
} | |
@-webkit-keyframes bounceInUp { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes bounceInUp { | |
from, | |
60%, | |
75%, | |
90%, | |
to { | |
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | |
} | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 3000px, 0); | |
transform: translate3d(0, 3000px, 0); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
75% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
90% { | |
-webkit-transform: translate3d(0, -5px, 0); | |
transform: translate3d(0, -5px, 0); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.bounceInUp { | |
-webkit-animation-name: bounceInUp; | |
animation-name: bounceInUp; | |
} | |
@-webkit-keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9); | |
transform: scale3d(0.9, 0.9, 0.9); | |
} | |
50%, | |
55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
} | |
@keyframes bounceOut { | |
20% { | |
-webkit-transform: scale3d(0.9, 0.9, 0.9); | |
transform: scale3d(0.9, 0.9, 0.9); | |
} | |
50%, | |
55% { | |
opacity: 1; | |
-webkit-transform: scale3d(1.1, 1.1, 1.1); | |
transform: scale3d(1.1, 1.1, 1.1); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
} | |
.bounceOut { | |
-webkit-animation-duration: 0.75s; | |
animation-duration: 0.75s; | |
-webkit-animation-name: bounceOut; | |
animation-name: bounceOut; | |
} | |
@-webkit-keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, | |
45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes bounceOutDown { | |
20% { | |
-webkit-transform: translate3d(0, 10px, 0); | |
transform: translate3d(0, 10px, 0); | |
} | |
40%, | |
45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, -20px, 0); | |
transform: translate3d(0, -20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.bounceOutDown { | |
-webkit-animation-name: bounceOutDown; | |
animation-name: bounceOutDown; | |
} | |
@-webkit-keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutLeft { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(20px, 0, 0); | |
transform: translate3d(20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.bounceOutLeft { | |
-webkit-animation-name: bounceOutLeft; | |
animation-name: bounceOutLeft; | |
} | |
@-webkit-keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes bounceOutRight { | |
20% { | |
opacity: 1; | |
-webkit-transform: translate3d(-20px, 0, 0); | |
transform: translate3d(-20px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.bounceOutRight { | |
-webkit-animation-name: bounceOutRight; | |
animation-name: bounceOutRight; | |
} | |
@-webkit-keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, | |
45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes bounceOutUp { | |
20% { | |
-webkit-transform: translate3d(0, -10px, 0); | |
transform: translate3d(0, -10px, 0); | |
} | |
40%, | |
45% { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 20px, 0); | |
transform: translate3d(0, 20px, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.bounceOutUp { | |
-webkit-animation-name: bounceOutUp; | |
animation-name: bounceOutUp; | |
} | |
@-webkit-keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes fadeIn { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
.fadeIn { | |
-webkit-animation-name: fadeIn; | |
animation-name: fadeIn; | |
} | |
@-webkit-keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInDown { | |
-webkit-animation-name: fadeInDown; | |
animation-name: fadeInDown; | |
} | |
@-webkit-keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInDownBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInDownBig { | |
-webkit-animation-name: fadeInDownBig; | |
animation-name: fadeInDownBig; | |
} | |
@-webkit-keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInLeft { | |
-webkit-animation-name: fadeInLeft; | |
animation-name: fadeInLeft; | |
} | |
@-webkit-keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInLeftBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInLeftBig { | |
-webkit-animation-name: fadeInLeftBig; | |
animation-name: fadeInLeftBig; | |
} | |
@-webkit-keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInRight { | |
-webkit-animation-name: fadeInRight; | |
animation-name: fadeInRight; | |
} | |
@-webkit-keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInRightBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInRightBig { | |
-webkit-animation-name: fadeInRightBig; | |
animation-name: fadeInRightBig; | |
} | |
@-webkit-keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInUp { | |
-webkit-animation-name: fadeInUp; | |
animation-name: fadeInUp; | |
} | |
@-webkit-keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes fadeInUpBig { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.fadeInUpBig { | |
-webkit-animation-name: fadeInUpBig; | |
animation-name: fadeInUpBig; | |
} | |
@-webkit-keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes fadeOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.fadeOut { | |
-webkit-animation-name: fadeOut; | |
animation-name: fadeOut; | |
} | |
@-webkit-keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes fadeOutDown { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.fadeOutDown { | |
-webkit-animation-name: fadeOutDown; | |
animation-name: fadeOutDown; | |
} | |
@-webkit-keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
@keyframes fadeOutDownBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, 2000px, 0); | |
transform: translate3d(0, 2000px, 0); | |
} | |
} | |
.fadeOutDownBig { | |
-webkit-animation-name: fadeOutDownBig; | |
animation-name: fadeOutDownBig; | |
} | |
@-webkit-keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeft { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.fadeOutLeft { | |
-webkit-animation-name: fadeOutLeft; | |
animation-name: fadeOutLeft; | |
} | |
@-webkit-keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutLeftBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(-2000px, 0, 0); | |
transform: translate3d(-2000px, 0, 0); | |
} | |
} | |
.fadeOutLeftBig { | |
-webkit-animation-name: fadeOutLeftBig; | |
animation-name: fadeOutLeftBig; | |
} | |
@-webkit-keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes fadeOutRight { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.fadeOutRight { | |
-webkit-animation-name: fadeOutRight; | |
animation-name: fadeOutRight; | |
} | |
@-webkit-keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
@keyframes fadeOutRightBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(2000px, 0, 0); | |
transform: translate3d(2000px, 0, 0); | |
} | |
} | |
.fadeOutRightBig { | |
-webkit-animation-name: fadeOutRightBig; | |
animation-name: fadeOutRightBig; | |
} | |
@-webkit-keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes fadeOutUp { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.fadeOutUp { | |
-webkit-animation-name: fadeOutUp; | |
animation-name: fadeOutUp; | |
} | |
@-webkit-keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
@keyframes fadeOutUpBig { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(0, -2000px, 0); | |
transform: translate3d(0, -2000px, 0); | |
} | |
} | |
.fadeOutUpBig { | |
-webkit-animation-name: fadeOutUpBig; | |
animation-name: fadeOutUpBig; | |
} | |
@-webkit-keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
@keyframes flip { | |
from { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, -360deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
40% { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -190deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -190deg); | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
50% { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -170deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) | |
rotate3d(0, 1, 0, -170deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
80% { | |
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
to { | |
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) | |
rotate3d(0, 1, 0, 0deg); | |
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
} | |
.animated.flip { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
-webkit-animation-name: flip; | |
animation-name: flip; | |
} | |
@-webkit-keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInX { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInX { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInX; | |
animation-name: flipInX; | |
} | |
@-webkit-keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
@keyframes flipInY { | |
from { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -20deg); | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
60% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 10deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -5deg); | |
} | |
to { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
} | |
.flipInY { | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipInY; | |
animation-name: flipInY; | |
} | |
@-webkit-keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutX { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, -20deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
transform: perspective(400px) rotate3d(1, 0, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutX { | |
-webkit-animation-duration: 0.75s; | |
animation-duration: 0.75s; | |
-webkit-animation-name: flipOutX; | |
animation-name: flipOutX; | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
} | |
@-webkit-keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes flipOutY { | |
from { | |
-webkit-transform: perspective(400px); | |
transform: perspective(400px); | |
} | |
30% { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, -15deg); | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
transform: perspective(400px) rotate3d(0, 1, 0, 90deg); | |
opacity: 0; | |
} | |
} | |
.flipOutY { | |
-webkit-animation-duration: 0.75s; | |
animation-duration: 0.75s; | |
-webkit-backface-visibility: visible !important; | |
backface-visibility: visible !important; | |
-webkit-animation-name: flipOutY; | |
animation-name: flipOutY; | |
} | |
@-webkit-keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes lightSpeedIn { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); | |
transform: translate3d(100%, 0, 0) skewX(-30deg); | |
opacity: 0; | |
} | |
60% { | |
-webkit-transform: skewX(20deg); | |
transform: skewX(20deg); | |
opacity: 1; | |
} | |
80% { | |
-webkit-transform: skewX(-5deg); | |
transform: skewX(-5deg); | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.lightSpeedIn { | |
-webkit-animation-name: lightSpeedIn; | |
animation-name: lightSpeedIn; | |
-webkit-animation-timing-function: ease-out; | |
animation-timing-function: ease-out; | |
} | |
@-webkit-keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
@keyframes lightSpeedOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg); | |
transform: translate3d(100%, 0, 0) skewX(30deg); | |
opacity: 0; | |
} | |
} | |
.lightSpeedOut { | |
-webkit-animation-name: lightSpeedOut; | |
animation-name: lightSpeedOut; | |
-webkit-animation-timing-function: ease-in; | |
animation-timing-function: ease-in; | |
} | |
@-webkit-keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes rotateIn { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, -200deg); | |
transform: rotate3d(0, 0, 1, -200deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
.rotateIn { | |
-webkit-animation-name: rotateIn; | |
animation-name: rotateIn; | |
} | |
@-webkit-keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
.rotateInDownLeft { | |
-webkit-animation-name: rotateInDownLeft; | |
animation-name: rotateInDownLeft; | |
} | |
@-webkit-keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
.rotateInDownRight { | |
-webkit-animation-name: rotateInDownRight; | |
animation-name: rotateInDownRight; | |
} | |
@-webkit-keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
.rotateInUpLeft { | |
-webkit-animation-name: rotateInUpLeft; | |
animation-name: rotateInUpLeft; | |
} | |
@-webkit-keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes rotateInUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -90deg); | |
transform: rotate3d(0, 0, 1, -90deg); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
opacity: 1; | |
} | |
} | |
.rotateInUpRight { | |
-webkit-animation-name: rotateInUpRight; | |
animation-name: rotateInUpRight; | |
} | |
@-webkit-keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOut { | |
from { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: center; | |
transform-origin: center; | |
-webkit-transform: rotate3d(0, 0, 1, 200deg); | |
transform: rotate3d(0, 0, 1, 200deg); | |
opacity: 0; | |
} | |
} | |
.rotateOut { | |
-webkit-animation-name: rotateOut; | |
animation-name: rotateOut; | |
} | |
@-webkit-keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 45deg); | |
transform: rotate3d(0, 0, 1, 45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownLeft { | |
-webkit-animation-name: rotateOutDownLeft; | |
animation-name: rotateOutDownLeft; | |
} | |
@-webkit-keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutDownRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutDownRight { | |
-webkit-animation-name: rotateOutDownRight; | |
animation-name: rotateOutDownRight; | |
} | |
@-webkit-keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpLeft { | |
from { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: left bottom; | |
transform-origin: left bottom; | |
-webkit-transform: rotate3d(0, 0, 1, -45deg); | |
transform: rotate3d(0, 0, 1, -45deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpLeft { | |
-webkit-animation-name: rotateOutUpLeft; | |
animation-name: rotateOutUpLeft; | |
} | |
@-webkit-keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
@keyframes rotateOutUpRight { | |
from { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform-origin: right bottom; | |
transform-origin: right bottom; | |
-webkit-transform: rotate3d(0, 0, 1, 90deg); | |
transform: rotate3d(0, 0, 1, 90deg); | |
opacity: 0; | |
} | |
} | |
.rotateOutUpRight { | |
-webkit-animation-name: rotateOutUpRight; | |
animation-name: rotateOutUpRight; | |
} | |
@-webkit-keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
@keyframes hinge { | |
0% { | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
20%, | |
60% { | |
-webkit-transform: rotate3d(0, 0, 1, 80deg); | |
transform: rotate3d(0, 0, 1, 80deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
} | |
40%, | |
80% { | |
-webkit-transform: rotate3d(0, 0, 1, 60deg); | |
transform: rotate3d(0, 0, 1, 60deg); | |
-webkit-transform-origin: top left; | |
transform-origin: top left; | |
-webkit-animation-timing-function: ease-in-out; | |
animation-timing-function: ease-in-out; | |
opacity: 1; | |
} | |
to { | |
-webkit-transform: translate3d(0, 700px, 0); | |
transform: translate3d(0, 700px, 0); | |
opacity: 0; | |
} | |
} | |
.hinge { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
-webkit-animation-name: hinge; | |
animation-name: hinge; | |
} | |
@-webkit-keyframes jackInTheBox { | |
from { | |
opacity: 0; | |
-webkit-transform: scale(0.1) rotate(30deg); | |
transform: scale(0.1) rotate(30deg); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
50% { | |
-webkit-transform: rotate(-10deg); | |
transform: rotate(-10deg); | |
} | |
70% { | |
-webkit-transform: rotate(3deg); | |
transform: rotate(3deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
} | |
@keyframes jackInTheBox { | |
from { | |
opacity: 0; | |
-webkit-transform: scale(0.1) rotate(30deg); | |
transform: scale(0.1) rotate(30deg); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
} | |
50% { | |
-webkit-transform: rotate(-10deg); | |
transform: rotate(-10deg); | |
} | |
70% { | |
-webkit-transform: rotate(3deg); | |
transform: rotate(3deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: scale(1); | |
transform: scale(1); | |
} | |
} | |
.jackInTheBox { | |
-webkit-animation-name: jackInTheBox; | |
animation-name: jackInTheBox; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes rollIn { | |
from { | |
opacity: 0; | |
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); | |
} | |
to { | |
opacity: 1; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.rollIn { | |
-webkit-animation-name: rollIn; | |
animation-name: rollIn; | |
} | |
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ | |
@-webkit-keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
@keyframes rollOut { | |
from { | |
opacity: 1; | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); | |
} | |
} | |
.rollOut { | |
-webkit-animation-name: rollOut; | |
animation-name: rollOut; | |
} | |
@-webkit-keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
@keyframes zoomIn { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
.zoomIn { | |
-webkit-animation-name: zoomIn; | |
animation-name: zoomIn; | |
} | |
@-webkit-keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomInDown { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomInDown { | |
-webkit-animation-name: zoomInDown; | |
animation-name: zoomInDown; | |
} | |
@-webkit-keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomInLeft { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomInLeft { | |
-webkit-animation-name: zoomInLeft; | |
animation-name: zoomInLeft; | |
} | |
@-webkit-keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomInRight { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomInRight { | |
-webkit-animation-name: zoomInRight; | |
animation-name: zoomInRight; | |
} | |
@-webkit-keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomInUp { | |
from { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
60% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomInUp { | |
-webkit-animation-name: zoomInUp; | |
animation-name: zoomInUp; | |
} | |
@-webkit-keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
@keyframes zoomOut { | |
from { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
-webkit-transform: scale3d(0.3, 0.3, 0.3); | |
transform: scale3d(0.3, 0.3, 0.3); | |
} | |
to { | |
opacity: 0; | |
} | |
} | |
.zoomOut { | |
-webkit-animation-name: zoomOut; | |
animation-name: zoomOut; | |
} | |
@-webkit-keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomOutDown { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomOutDown { | |
-webkit-animation-name: zoomOutDown; | |
animation-name: zoomOutDown; | |
} | |
@-webkit-keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); | |
transform: scale(0.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
@keyframes zoomOutLeft { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); | |
transform: scale(0.1) translate3d(-2000px, 0, 0); | |
-webkit-transform-origin: left center; | |
transform-origin: left center; | |
} | |
} | |
.zoomOutLeft { | |
-webkit-animation-name: zoomOutLeft; | |
animation-name: zoomOutLeft; | |
} | |
@-webkit-keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0); | |
transform: scale(0.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
@keyframes zoomOutRight { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0); | |
transform: scale(0.1) translate3d(2000px, 0, 0); | |
-webkit-transform-origin: right center; | |
transform-origin: right center; | |
} | |
} | |
.zoomOutRight { | |
-webkit-animation-name: zoomOutRight; | |
animation-name: zoomOutRight; | |
} | |
@-webkit-keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
@keyframes zoomOutUp { | |
40% { | |
opacity: 1; | |
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); | |
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); | |
} | |
to { | |
opacity: 0; | |
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); | |
} | |
} | |
.zoomOutUp { | |
-webkit-animation-name: zoomOutUp; | |
animation-name: zoomOutUp; | |
} | |
@-webkit-keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInDown { | |
from { | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInDown { | |
-webkit-animation-name: slideInDown; | |
animation-name: slideInDown; | |
} | |
@-webkit-keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInLeft { | |
from { | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInLeft { | |
-webkit-animation-name: slideInLeft; | |
animation-name: slideInLeft; | |
} | |
@-webkit-keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInRight { | |
from { | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInRight { | |
-webkit-animation-name: slideInRight; | |
animation-name: slideInRight; | |
} | |
@-webkit-keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes slideInUp { | |
from { | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
visibility: visible; | |
} | |
to { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
.slideInUp { | |
-webkit-animation-name: slideInUp; | |
animation-name: slideInUp; | |
} | |
@-webkit-keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
@keyframes slideOutDown { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, 100%, 0); | |
transform: translate3d(0, 100%, 0); | |
} | |
} | |
.slideOutDown { | |
-webkit-animation-name: slideOutDown; | |
animation-name: slideOutDown; | |
} | |
@-webkit-keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
@keyframes slideOutLeft { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(-100%, 0, 0); | |
transform: translate3d(-100%, 0, 0); | |
} | |
} | |
.slideOutLeft { | |
-webkit-animation-name: slideOutLeft; | |
animation-name: slideOutLeft; | |
} | |
@-webkit-keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
@keyframes slideOutRight { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(100%, 0, 0); | |
transform: translate3d(100%, 0, 0); | |
} | |
} | |
.slideOutRight { | |
-webkit-animation-name: slideOutRight; | |
animation-name: slideOutRight; | |
} | |
@-webkit-keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
@keyframes slideOutUp { | |
from { | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
} | |
to { | |
visibility: hidden; | |
-webkit-transform: translate3d(0, -100%, 0); | |
transform: translate3d(0, -100%, 0); | |
} | |
} | |
.slideOutUp { | |
-webkit-animation-name: slideOutUp; | |
animation-name: slideOutUp; | |
} | |
.animated { | |
-webkit-animation-duration: 1s; | |
animation-duration: 1s; | |
-webkit-animation-fill-mode: both; | |
animation-fill-mode: both; | |
} | |
.animated.infinite { | |
-webkit-animation-iteration-count: infinite; | |
animation-iteration-count: infinite; | |
} | |
.animated.delay-1s { | |
-webkit-animation-delay: 1s; | |
animation-delay: 1s; | |
} | |
.animated.delay-2s { | |
-webkit-animation-delay: 2s; | |
animation-delay: 2s; | |
} | |
.animated.delay-3s { | |
-webkit-animation-delay: 3s; | |
animation-delay: 3s; | |
} | |
.animated.delay-4s { | |
-webkit-animation-delay: 4s; | |
animation-delay: 4s; | |
} | |
.animated.delay-5s { | |
-webkit-animation-delay: 5s; | |
animation-delay: 5s; | |
} | |
.animated.fast { | |
-webkit-animation-duration: 800ms; | |
animation-duration: 800ms; | |
} | |
.animated.faster { | |
-webkit-animation-duration: 500ms; | |
animation-duration: 500ms; | |
} | |
.animated.slow { | |
-webkit-animation-duration: 2s; | |
animation-duration: 2s; | |
} | |
.animated.slower { | |
-webkit-animation-duration: 3s; | |
animation-duration: 3s; | |
} | |
@media (print), (prefers-reduced-motion) { | |
.animated { | |
-webkit-animation: unset !important; | |
animation: unset !important; | |
-webkit-transition: none !important; | |
transition: none !important; | |
} | |
} | |
/*---------------------------------------------------------------------------*/ | |
/*ANIMATE*/ | |
/*---------------------------------------------------------------------------*/ | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment