h1, h2, h3, h4 { -webkit-animation-name: slidein; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 8s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } @-webkit-keyframes appear { 0%{ opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } } @keyframes appear { 0%{ opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; transform: scale3d(1,1,1); } } .hamburger { min-height: 30px; max-width: 50px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color: blue; position: absolute; width: 40px; height: 4px; border-radius: 5px; content: ''; transition-timing-function: ease; transition-duration: .2s; transition-property: transform,opacity; } .hamburger-inner:before { top: 10px; } .hamburger-inner:after { top: 20px; } /* Prelaoder */ #preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #fff url("../img/preloader.svg") no-repeat center center; } .h2 { font-size:45px; font-weight:normal; color: #fff; text-align:center; font-family: 'roboto', serif; text-shadow: 2px 2px #000; line-height: 1.3; padding-top:180px; padding-bottom:35px; text-transform:uppercase; -webkit-animation-name: appear; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 8s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } @-webkit-keyframes appear { 0%{ opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } } @keyframes appear { 0%{ opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; transform: scale3d(1,1,1); } } .img1{ -webkit-animation-name: appear; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } .h3 { font-size:18px; font-weight:normal; color: #fff; text-align:center; font-family: 'roboto', serif; line-height: 1.3; padding-top:15px; padding-bottom:35px; text-transform:uppercase; -webkit-animation-name: appear; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } @-webkit-keyframes appear { 0%{ opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } } @keyframes appear { 0%{ opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 60%{ opacity: 1; transform: scale3d(1,1,1); } } .h4{ text-align: center; font-size: 32px; color: #000; text-transform: uppercase; text-align: center; font-weight: 700; margin-bottom: 5px; -webkit-animation-name: appear; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 8s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } .h5{ padding: 10px; text-align: center; font-size: 25px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 500px; margin-bottom: 0px; -webkit-animation-name: appear; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 8s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } .h6{ text-align: center; font-size: 32px; color: #fff; text-transform: uppercase; text-align: center; font-weight: 500; margin-bottom: 5px; -webkit-animation-name: appear; -webkit-animation-duration: 8s; -webkit-animation-timing-function: ease; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: none; animation-name: appear; animation-duration: 8s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: none; } /* Facts Section --------------------------------*/ #facts2 { background: linear-gradient(rgba(15,43,72,.8), rgba(15,43,72,.8)), url(../img/cambio.jpg) fixed center center; } #facts .counters span { font-size: 48px; display: block; color: #fff; } #facts .counters p { padding: 0; margin: 0 0 20px 0; font-family: "Poppins", sans-serif; font-size: 14px; } #services .box:hover .icon a { color: #008BE0; background: #fff; } #services .title { font-weight: 700; font-size: 18px; margin-bottom: 15px; text-transform: uppercase; } #services .title a { color: #111; } #services .description { font-size: 14px; line-height: 24px; }