WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1114
webtemplates
Abrir no Editor
Publique Seu Código
23 March 2025
Portfólio
HTML
Copy
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Transform — Premium Website Template by WebDesignCo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Premium HTML5 Template by WebDesignCo" /> <meta name="keywords" content="premium website templates, html5, css3, mobile responsive, web design, bootstrap" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> </head> <body> <div id="page"> <nav class="fh5co-nav" role="navigation"> <div class="container"> <div class="fh5co-top-logo"> <div id="fh5co-logo"><a href="index.html">Transform</a></div> </div> <div class="fh5co-top-menu menu-1 text-center"> <ul> <li><a href="work.html">Projects</a></li> <li><a href="about.html">About Me</a></li> <li class="has-dropdown"> <a href="#">Services</a> <ul class="dropdown"> <li><a href="#">Graphic Design</a></li> <li><a href="#">Online Store</a></li> <li><a href="#">Identity Creation</a></li> <li><a href="#">API Integration</a></li> </ul> </li> <li><a href="contact.html">Reach Out</a></li> </ul> </div> <div class="fh5co-top-social menu-1 text-right"> <ul class="fh5co-social"> <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-x"></i></a></li> </ul> </div> </div> </nav> <div id="fh5co-work"> <div class="container"> <div class="row top-line animate-box"> <div class="col-md-7 col-md-push-5 text-left intro"> <h2>Transform is a premium template to showcase your projects.</h2> </div> </div> <div class="row"> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Illuminated Origami</h3> <span class="cat">Identity Creation</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Modern LED Lamp</h3> <span class="cat">Digital Illustration</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Creative Branding</h3> <span class="cat">Logo Design</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Urban Mobility</h3> <span class="cat">Web Development</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Ocean Explorer</h3> <span class="cat">Brand Identity</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Berlin Modern Art</h3> <span class="cat">Logo Creation</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Hawaiian Vibes</h3> <span class="cat">Website Design</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Versailles Fountain</h3> <span class="cat">Brand Creation</span> </div> </div> </div> </a> </div> <div class="col-md-4 text-center animate-box"> <a class="work" href="#"> <div class="work-grid" style="background-image:url(/assets/img/placeholder.webp);"> <div class="inner"> <div class="desc"> <h3>Handcrafted Care</h3> <span class="cat">Logo Development</span> </div> </div> </div> </a> </div> </div> </div> </div> <div id="fh5co-author" class="fh5co-bg-section"> <div class="container"> <div class="row animate-box"> <div class="col-md-8 col-md-offset-2 text-center fh5co-heading"> <h2>A little about me</h2> </div> </div> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="author"> <div class="author-inner animate-box" style="background-image: url(images/person3.jpg);"> </div> <div class="desc animate-box"> <span>Designer & Developer</span> <h3>Alex Horizon</h3> <p>In a quiet place, far beyond the known realms, where the texts dwell peacefully, surrounded by the serene ocean of semantics.</p> <p><a href="about.html" class="btn btn-primary btn-outline">Discover More</a></p> <ul class="fh5co-social-icons"> <li><a href="#"><i class="icon-facebook"></i></a></li> <li><a href="#"><i class="icon-twitter"></i></a></li> <li><a href="#"><i class="icon-dribbble"></i></a></li> <li><a href="#"><i class="icon-github"></i></a></li> </ul> </div> </div> </div> </div> </div> </div> <div id="fh5co-started"> <div class="container"> <div class="row animate-box"> <div class="col-md-8 col-md-offset-2 text-center fh5co-heading"> <h2>Begin Your Journey</h2> <p>We design unique themes for your site, inspired by distant lands where imagination knows no bounds.</p> <p><a href="#" class="btn btn-primary">Let's collaborate</a></p> </div> </div> </div> </div> <footer id="fh5co-footer" role="contentinfo"> <div class="container"> <div class="row copyright"> <div class="col-md-12 text-center"> <p> <small class="block">© 2024 All Rights Reserved.</small> </p> <ul class="fh5co-social-icons"> <li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li> <li><a href="#"><i class="fa-brands fa-instagram"></i></a></li> <li><a href="#"><i class="fa-brands fa-x"></i></a></li> </ul> </div> </div> </div> </footer> </div> <div class="gototop js-top"> <a href="#" class="js-gotop"><i class="fa fa-arrow-up"></i></a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script> <script src="js/main.js"></script> </body> </html>
CSS
Copy
@font-face { font-family: 'icomoon'; src: url("../fonts/icomoon/icomoon.eot?srf3rx"); src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg"); font-weight: normal; font-style: normal; } body { font-family: "Montserrat", Arial, sans-serif; font-weight: 300; font-size: 16px; line-height: 1.7; color: #828282; background: #fff; } #page { position: relative; overflow-x: hidden; width: 100%; height: 100%; padding-top: 6em !important; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .offcanvas #page { overflow: hidden; position: absolute; } .offcanvas #page:after { -webkit-transition: 2s; -o-transition: 2s; transition: 2s; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 101; background: rgba(0, 0, 0, 0.7); content: ""; } a { color: #cabcab; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:active, a:focus { color: #cabcab; outline: none; text-decoration: none; } p { margin-bottom: 20px; } h1, h2, h3, h4, h5, h6, figure { color: #000; font-family: "Montserrat", Arial, sans-serif; font-weight: 400; margin: 0 0 20px 0; } ::-webkit-selection { color: #fff; background: #cabcab; } ::-moz-selection { color: #fff; background: #cabcab; } ::selection { color: #fff; background: #cabcab; } .fh5co-nav { position: fixed; top: 0; left: 0; right: 0; padding: 25px 0; z-index: 1; background: #edebe8; } @media screen and (max-width: 768px) { .fh5co-nav { padding: 20px 0; } } .fh5co-nav .fh5co-top-logo, .fh5co-nav .fh5co-top-menu, .fh5co-nav .fh5co-top-social { float: left; } .fh5co-nav .fh5co-top-logo { width: 20%; } .fh5co-nav .fh5co-top-menu { width: 60%; } .fh5co-nav .fh5co-top-social { width: 20%; } .fh5co-nav #fh5co-logo { font-size: 20px; margin: 0; padding: 0; text-transform: uppercase; font-weight: bold; font-family: "Montserrat", Arial, sans-serif; } .fh5co-nav .fh5co-social { margin: 3px 0 0 0; padding: 0; } .fh5co-nav .fh5co-social li { padding: 0; margin: 0; } .fh5co-nav .fh5co-social li a { font-size: 20px; color: rgba(0, 0, 0, 0.4); } .fh5co-nav a { padding: 5px 0; color: #000; } @media screen and (max-width: 768px) { .fh5co-nav .menu-1, .fh5co-nav .menu-2 { display: none; } } .fh5co-nav .menu-2 li.search { float: left; width: 83%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; padding: 0; margin: -5px 0 0 0; } .fh5co-nav .menu-2 li input[type=text] { padding: 6px 10px; width: 40%; border: none; float: right; font-size: 13px; margin-top: 4px; background: transparent; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .fh5co-nav .menu-2 li input[type=text]:focus { width: 100%; outline: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .fh5co-nav .menu-2 li button { margin-top: 4px; padding: 5px; background: transparent; border: none; } .fh5co-nav .menu-2 li button i { color: rgba(0, 0, 0, 0.5); } .fh5co-nav .menu-2 li button:hover, .fh5co-nav .menu-2 li button:focus { background: transparent !important; } .fh5co-nav .menu-2 li button:hover i, .fh5co-nav .menu-2 li button:focus i { color: black; } .fh5co-nav ul { padding: 0; margin: 3px 0 0 0; } .fh5co-nav ul li { padding: 0; margin: 0; list-style: none; display: inline-block; font-family: "Montserrat", Arial, sans-serif; } .fh5co-nav ul li a { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 30px 10px; color: rgba(0, 0, 0, 0.9); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .fh5co-nav ul li a:hover, .fh5co-nav ul li a:focus, .fh5co-nav ul li a:active { color: black; } .fh5co-nav ul li.has-dropdown { position: relative; } .fh5co-nav ul li.has-dropdown .dropdown { width: 150px; -webkit-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.55); -moz-box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.55); box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.55); z-index: 1002; visibility: hidden; opacity: 0; position: absolute; top: 40px; left: 0; text-align: left; background: #000; padding: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } .fh5co-nav ul li.has-dropdown .dropdown:before { bottom: 100%; left: 40px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-bottom-color: #000; border-width: 8px; margin-left: -8px; } .fh5co-nav ul li.has-dropdown .dropdown li { display: block; margin-bottom: 7px; } .fh5co-nav ul li.has-dropdown .dropdown li:last-child { margin-bottom: 0; } .fh5co-nav ul li.has-dropdown .dropdown li a { padding: 2px 0; display: block; color: #999999; line-height: 1.2; text-transform: none; letter-spacing: 0px; font-size: 15px; } .fh5co-nav ul li.has-dropdown .dropdown li a:hover { color: #fff; } .fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a { color: #000; } .fh5co-nav ul li.active > a { color: #cabcab !important; } .fh5co-nav ul li .form-group { border: 1px solid red; width: 100%; } .about-content { margin-bottom: 7em; } .about-content img { border: 1px solid rgba(0, 0, 0, 0.05); padding: 10px; } .about-content .desc { margin-bottom: 3em; } .fh5co-staff { text-align: center; margin-bottom: 30px; } .fh5co-staff img { width: 170px; margin-bottom: 20px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .fh5co-staff h3 { font-size: 24px; margin-bottom: 5px; } .fh5co-staff p { margin-bottom: 30px; } .fh5co-staff .role { color: #bfbfbf; margin-bottom: 30px; font-weight: normal; display: block; } .fh5co-social-icons { margin: 0; padding: 0; } .fh5co-social-icons li { margin: 0; padding: 0; list-style: none; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .fh5co-social-icons li a { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; color: #cabcab; padding-left: 10px; padding-right: 10px; } .fh5co-social-icons li a i { font-size: 20px; } .fh5co-contact-info ul { padding: 0; margin: 0; } .fh5co-contact-info ul li { padding: 0 0 0 40px; margin: 0 0 30px 0; list-style: none; position: relative; } .fh5co-contact-info ul li:before { color: #cabcab; position: absolute; left: 0; top: .05em; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fh5co-contact-info ul li.address:before { font-size: 30px; content: "\e9d1"; } .fh5co-contact-info ul li.phone:before { font-size: 23px; content: "\e9f4"; } .fh5co-contact-info ul li.email:before { font-size: 23px; content: "\e9da"; } .fh5co-contact-info ul li.url:before { font-size: 23px; content: "\e9af"; } .fh5co-bg-section { background: rgba(0, 0, 0, 0.05); } #fh5co-started, #fh5co-author, #fh5co-work, #fh5co-about, #fh5co-contact, #fh5co-footer { padding: 7em 0; clear: both; } @media screen and (max-width: 768px) { #fh5co-started, #fh5co-author, #fh5co-work, #fh5co-about, #fh5co-contact, #fh5co-footer { padding: 3em 0; } } .feature-center { float: left; width: 100%; margin-bottom: 40px; } .feature-center .desc { padding-left: 180px; } .feature-center .icon { width: 90px; height: 90px; background: #cabcab; display: table; text-align: center; margin-bottom: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .feature-center .icon i { display: table-cell; vertical-align: middle; height: 90px; font-size: 40px; line-height: 40px; color: #fff; } .feature-center p, .feature-center h3 { margin-bottom: 30px; } .feature-center h3 { text-transform: uppercase; font-size: 15px; letter-spacing: 1px; font-weight: 600; } @media screen and (max-width: 768px) { .feature-center { margin-bottom: 50px; text-align: center; } .feature-center .icon { margin: 0 auto 30px auto; } } .work { margin-bottom: 40px; } .work .work-grid { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; height: 300px; margin-bottom: 20px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .work .work-grid .inner { display: table; height: 300px; width: 100.1%; opacity: 0; background: rgba(237, 235, 232, 0.9); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media screen and (max-width: 768px) { .work .work-grid .inner { opacity: 1; background: rgba(237, 235, 232, 0.7); } } .work .work-grid .inner .desc { display: table-cell; vertical-align: middle; padding: 40px; } .work .work-grid .inner .desc h3 { font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; font-weight: bold; line-height: 24px; } .work .work-grid .inner .desc h3 a { color: #000; } .work .work-grid .inner .desc .cat { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; } @media screen and (max-width: 768px) { .work .work-grid .inner .desc .cat { color: #333333; } } .work:hover .inner, .work:focus .inner { opacity: 1; } .work:hover .desc h3 a, .work:focus .desc h3 a { color: #cabcab; } .top-line { padding-bottom: 7em; } .top-line .fh5co-heading { margin-bottom: 0 !important; } .categories { padding: 0; margin: 0; } .categories li { font-family: "Montserrat", Arial, sans-serif; list-style: none; margin-bottom: 5px; } .categories li.cat { color: #000; font-size: 20px; margin-bottom: 10px; } .categories li a:hover { color: #000; } .intro h2 { font-size: 49px; line-height: 55px; letter-spacing: 1px; } @media screen and (max-width: 768px) { .intro h2 { font-size: 30px; line-height: 45px; } } .intro h2 .fh5co-highlight { display: block; font-size: 16px; } .intro h2 .fh5co-highlight i { position: relative; top: 1px; } .fh5co-heading { margin-bottom: 5em; } .fh5co-heading.fh5co-heading-sm { margin-bottom: 2em; } .fh5co-heading h2 { font-size: 28px; margin-bottom: 20px; line-height: 1.5; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #000; } .fh5co-heading h3 { font-size: 18px; } .fh5co-heading p { font-size: 18px; line-height: 1.5; color: #828282; } .fh5co-heading span { display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 12px; letter-spacing: 2px; font-family: "Montserrat", Arial, sans-serif; } .title { margin-bottom: 40px; } @media screen and (max-width: 768px) { .title { text-align: center; } } .author { width: 100%; float: left; margin-bottom: 5em; } .author .author-inner { background-size: cover; background-position: top center; background-repeat: no-repeat; position: relative; width: 40%; height: 350px; float: left; } @media screen and (max-width: 480px) { .author .author-inner { width: 100%; margin-bottom: 40px; } } .author .desc { width: 60%; float: left; padding-left: 50px; } @media screen and (max-width: 480px) { .author .desc { width: 100%; padding-left: 0; } } .author .desc span { font-size: 13px; text-transform: uppercase; display: block; margin-bottom: 20px; letter-spacing: 1px; } .author .desc .fh5co-social-icons li a { color: #cabcab; padding-left: 0; padding-right: 10px; } .skills h3 { font-size: 16px; } .skills .progress { border: none !important; box-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; } .skills .progress-bar { box-shadow: none; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; border-radius: 50px; background: #cabcab !important; } #fh5co-started { background: #cabcab; } #fh5co-started .fh5co-heading { margin-bottom: 20px !important; } #fh5co-started .fh5co-heading h2 { color: #fff; color: #685641; margin-bottom: 20px !important; } #fh5co-started .fh5co-heading p { color: #685641; } #fh5co-started .btn { margin-top: 20px; border: 3px solid #8c7961; color: #8c7961; font-size: 20px; font-weight: 400; padding: 20px 0; padding-left: 70px; padding-right: 70px; } #fh5co-started .btn:hover { background: #8c7961 !important; border: 3px solid #8c7961 !important; color: #fff; } #fh5co-footer { background: #efefef; } #fh5co-footer .fh5co-footer-links { padding: 0; margin: 0; } #fh5co-footer .fh5co-footer-links li { padding: 0; margin: 0; list-style: none; } #fh5co-footer .fh5co-footer-links li a { color: #000; text-decoration: none; } #fh5co-footer .fh5co-footer-links li a:hover { text-decoration: underline; } #fh5co-footer .fh5co-widget { margin-bottom: 30px; } @media screen and (max-width: 768px) { #fh5co-footer .fh5co-widget { text-align: left; } } #fh5co-footer .fh5co-widget h3 { margin-bottom: 15px; font-weight: bold; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; } #fh5co-footer .copyright .block { display: block; } #fh5co-offcanvas { position: absolute; z-index: 1901; width: 270px; background: black; top: 0; right: 0; top: 0; bottom: 0; padding: 45px 40px 40px 40px; overflow-y: auto; display: none; -moz-transform: translateX(270px); -webkit-transform: translateX(270px); -ms-transform: translateX(270px); -o-transform: translateX(270px); transform: translateX(270px); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } @media screen and (max-width: 768px) { #fh5co-offcanvas { display: block; } } .offcanvas #fh5co-offcanvas { -moz-transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } #fh5co-offcanvas a { color: rgba(255, 255, 255, 0.5); } #fh5co-offcanvas a:hover { color: rgba(255, 255, 255, 0.8); } #fh5co-offcanvas .fh5co-social { margin-top: 20px; } #fh5co-offcanvas .fh5co-social li { display: inline !important; margin-right: 10px; } #fh5co-offcanvas ul { padding: 0; margin: 0; } #fh5co-offcanvas ul li { padding: 0; margin: 0; list-style: none; } #fh5co-offcanvas ul li.search { float: left; width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; padding: 0; margin: 5px 0 0 0; } #fh5co-offcanvas ul li input[type=text] { padding: 6px 10px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); float: right; font-size: 13px; margin-top: 4px; background: transparent; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #fh5co-offcanvas ul li input[type=text]:focus { width: 100%; outline: none; } #fh5co-offcanvas ul li button { margin-top: 4px; padding: 6px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); margin-left: 1px; } #fh5co-offcanvas ul li button i { color: rgba(255, 255, 255, 0.5); } #fh5co-offcanvas ul li button:hover, #fh5co-offcanvas ul li button:focus { background: transparent !important; } #fh5co-offcanvas ul li button:hover i, #fh5co-offcanvas ul li button:focus i { color: white; } #fh5co-offcanvas ul li.shopping-cart { float: left; } #fh5co-offcanvas ul li a.cart { display: block; margin-top: 30px; color: rgba(255, 255, 255, 0.5); } #fh5co-offcanvas ul li a.cart span { position: relative; } #fh5co-offcanvas ul li a.cart span small { position: absolute; top: -20px; right: -15px; padding: 10px 6px; line-height: 0; font-size: 11px; background: #cabcab; color: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } #fh5co-offcanvas ul li > ul { padding-left: 20px; display: none; } #fh5co-offcanvas ul li.offcanvas-has-dropdown > a { display: block; position: relative; } #fh5co-offcanvas ul li.offcanvas-has-dropdown > a:after { position: absolute; right: 0px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\e921"; font-size: 20px; color: rgba(255, 255, 255, 0.2); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } #fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .uppercase { font-size: 14px; color: #000; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; } .gototop { position: fixed; bottom: 20px; right: 20px; z-index: 999; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .gototop.active { opacity: 1; visibility: visible; } .gototop a { width: 50px; height: 50px; display: table; background: rgba(0, 0, 0, 0.5); color: #fff; text-align: center; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } .gototop a i { height: 50px; display: table-cell; vertical-align: middle; } .gototop a:hover, .gototop a:active, .gototop a:focus { text-decoration: none; outline: none; } .fh5co-nav-toggle { width: 25px; height: 25px; cursor: pointer; text-decoration: none; position: fixed !important; } .fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after { background: #444; } .fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active { outline: none; border-bottom: none !important; } .fh5co-nav-toggle i { position: relative; display: inline-block; width: 25px; height: 2px; color: #252525; font: bold 14px/.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #252525; transition: all .2s ease-out; } .fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after { content: ''; width: 25px; height: 2px; background: #252525; position: absolute; left: 0; transition: all .2s ease-out; } .fh5co-nav-toggle.fh5co-nav-white > i { color: #fff; background: #000; } .fh5co-nav-toggle.fh5co-nav-white > i::before, .fh5co-nav-toggle.fh5co-nav-white > i::after { background: #000; } .fh5co-nav-toggle i::before { top: -7px; } .fh5co-nav-toggle i::after { bottom: -7px; } .fh5co-nav-toggle:hover i::before { top: -10px; } .fh5co-nav-toggle:hover i::after { bottom: -10px; } .fh5co-nav-toggle.active i { background: transparent; } .fh5co-nav-toggle.active i::before { background: #fff; top: 0; -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); transform: rotateZ(45deg); } .fh5co-nav-toggle.active i::after { background: #fff; bottom: 0; -webkit-transform: rotateZ(-45deg); -moz-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } .fh5co-nav-toggle { position: absolute; right: 0px; top: 10px; z-index: 21; padding: 6px 0 0 0; display: block; margin: 0 auto; display: none; height: 44px; width: 44px; z-index: 2001; border-bottom: none !important; } @media screen and (max-width: 768px) { .fh5co-nav-toggle { display: block; } } .btn { margin-right: 4px; margin-bottom: 4px; font-family: "Montserrat", Arial, sans-serif; font-size: 16px; font-weight: 400; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 8px 20px; } .btn.btn-md { padding: 8px 20px !important; } .btn.btn-lg { padding: 18px 36px !important; } .btn:hover, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; } .btn-primary { background: #cabcab; color: #fff; border: 2px solid #cabcab; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: #d4c8bb !important; border-color: #d4c8bb !important; } .btn-primary.btn-outline { background: transparent; color: #cabcab; border: 2px solid #cabcab; } .btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active { background: #cabcab; color: #fff; } .btn-success { background: #5cb85c; color: #fff; border: 2px solid #5cb85c; } .btn-success:hover, .btn-success:focus, .btn-success:active { background: #4cae4c !important; border-color: #4cae4c !important; } .btn-success.btn-outline { background: transparent; color: #5cb85c; border: 2px solid #5cb85c; } .btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active { background: #5cb85c; color: #fff; } .btn-info { background: #5bc0de; color: #fff; border: 2px solid #5bc0de; } .btn-info:hover, .btn-info:focus, .btn-info:active { background: #46b8da !important; border-color: #46b8da !important; } .btn-info.btn-outline { background: transparent; color: #5bc0de; border: 2px solid #5bc0de; } .btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active { background: #5bc0de; color: #fff; } .btn-warning { background: #f0ad4e; color: #fff; border: 2px solid #f0ad4e; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #eea236 !important; border-color: #eea236 !important; } .btn-warning.btn-outline { background: transparent; color: #f0ad4e; border: 2px solid #f0ad4e; } .btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active { background: #f0ad4e; color: #fff; } .btn-danger { background: #d9534f; color: #fff; border: 2px solid #d9534f; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #d43f3a !important; border-color: #d43f3a !important; } .btn-danger.btn-outline { background: transparent; color: #d9534f; border: 2px solid #d9534f; } .btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active { background: #d9534f; color: #fff; } .btn-outline { background: none; border: 2px solid gray; font-size: 16px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn-outline:hover, .btn-outline:focus, .btn-outline:active { box-shadow: none; } .btn.with-arrow { position: relative; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn.with-arrow i { visibility: hidden; opacity: 0; position: absolute; right: 0px; top: 50%; margin-top: -8px; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .btn.with-arrow:hover { padding-right: 50px; } .btn.with-arrow:hover i { color: #fff; right: 18px; visibility: visible; opacity: 1; } .form-control { box-shadow: none; background: transparent; border: 2px solid rgba(0, 0, 0, 0.1); height: 54px; font-size: 18px; font-weight: 300; } .form-control:active, .form-control:focus { outline: none; box-shadow: none; border-color: #cabcab; } .row-pt-md { padding-top: 4em !important; } .row-pb-md { padding-bottom: 4em !important; } .row-pb-sm { padding-bottom: 2em !important; } .fh5co-loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(../images/loader.gif) center no-repeat #fff; } .js .animate-box { opacity: 0; } .testimony { margin: 5em 0; } @media screen and (max-width: 768px) { .testimony { margin: 3em 0; } } blockquote { padding-left: 0; border-left: none; } blockquote p { font-family: "Georgia", Times; font-style: italic; font-size: 20px; line-height: 1.5; color: #666666; } blockquote .person { font-family: "Montserrat", Arial, sans-serif; font-size: 14px; color: #b3b3b3; } blockquote .person cite { font-style: normal; color: #000; } .portfolio-navigation i { font-size: 20px; position: relative; top: 3px; } .role { margin-top: 2.5em; margin-bottom: 2.5em; } .role h3 { text-transform: uppercase; font-size: 12px; letter-spacing: 2px; margin-bottom: 20px; } .role ul { padding: 0; margin: 0; } .role ul li { font-size: 14px; list-style: none; padding: 0; margin: 0 0 5px 0; } @charset "UTF-8"; .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated-fast { -webkit-animation-duration: .5s; animation-duration: .5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -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(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .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(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .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 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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .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: none; transform: none; } 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: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 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: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 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: none; transform: none; } 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 bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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: none; transform: none; } } .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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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(.9, .9, .9); transform: scale3d(.9, .9, .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .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(.3, .3, .3); transform: scale3d(.3, .3, .3); } } .bounceOut { -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; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } } @keyframes fadeIn { from { opacity: 0; -ms-transform: scale(0.95); -webkit-transform: scale(0.95); transform: scale(0.95); } to { opacity: 1; -ms-transform: scale(1.0); -webkit-transform: scale(1.0); transform: scale(1.0); } } .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);*/ -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; /*-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);*/ -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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);*/ -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; /*-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);*/ -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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);*/ -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; /*-webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);*/ -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { opacity: 1; /*visibility: visible;*/ -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpMenu { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } } @keyframes fadeInUpMenu { from { opacity: 0; visibility: hidden; /*-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);*/ -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { visibility: visible; opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpMenu { -webkit-animation-name: fadeInUpMenu; animation-name: fadeInUpMenu; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .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, 40px, 0); transform: translate3d(0, 40px, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 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) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) 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(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) 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) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in;
JS
Copy
;(function () { 'use strict'; var mobileMenuOutsideClick = function() { $(document).click(function (e) { var container = $("#fh5co-offcanvas, .js-fh5co-nav-toggle"); if (!container.is(e.target) && container.has(e.target).length === 0) { if ( $('body').hasClass('offcanvas') ) { $('body').removeClass('offcanvas'); $('.js-fh5co-nav-toggle').removeClass('active'); } } }); }; var offcanvasMenu = function() { $('#page').prepend('<div id="fh5co-offcanvas" />'); $('#page').prepend('<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle fh5co-nav-white"><i></i></a>'); var clone1 = $('.menu-1 > ul').clone(); $('#fh5co-offcanvas').append(clone1); var clone2 = $('.menu-2 > ul').clone(); $('#fh5co-offcanvas').append(clone2); $('#fh5co-offcanvas .has-dropdown').addClass('offcanvas-has-dropdown'); $('#fh5co-offcanvas') .find('li') .removeClass('has-dropdown'); // Hover dropdown menu on mobile $('.offcanvas-has-dropdown').mouseenter(function(){ var $this = $(this); $this .addClass('active') .find('ul') .slideDown(500, 'easeOutExpo'); }).mouseleave(function(){ var $this = $(this); $this .removeClass('active') .find('ul') .slideUp(500, 'easeOutExpo'); }); $(window).resize(function(){ if ( $('body').hasClass('offcanvas') ) { $('body').removeClass('offcanvas'); $('.js-fh5co-nav-toggle').removeClass('active'); } }); }; var burgerMenu = function() { $('body').on('click', '.js-fh5co-nav-toggle', function(event){ var $this = $(this); if ( $('body').hasClass('overflow offcanvas') ) { $('body').removeClass('overflow offcanvas'); } else { $('body').addClass('overflow offcanvas'); } $this.toggleClass('active'); event.preventDefault(); }); }; var contentWayPoint = function() { var i = 0; $('.animate-box').waypoint( function( direction ) { if( direction === 'down' && !$(this.element).hasClass('animated-fast') ) { i++; $(this.element).addClass('item-animate'); setTimeout(function(){ $('body .animate-box.item-animate').each(function(k){ var el = $(this); setTimeout( function () { var effect = el.data('animate-effect'); if ( effect === 'fadeIn') { el.addClass('fadeIn animated-fast'); } else if ( effect === 'fadeInLeft') { el.addClass('fadeInLeft animated-fast'); } else if ( effect === 'fadeInRight') { el.addClass('fadeInRight animated-fast'); } else { el.addClass('fadeInUp animated-fast'); } el.removeClass('item-animate'); }, k * 200, 'easeInOutExpo' ); }); }, 100); } } , { offset: '85%' } ); }; var dropdown = function() { $('.has-dropdown').mouseenter(function(){ var $this = $(this); $this .find('.dropdown') .css('display', 'block') .addClass('animated-fast fadeInUpMenu'); }).mouseleave(function(){ var $this = $(this); $this .find('.dropdown') .css('display', 'none') .removeClass('animated-fast fadeInUpMenu'); }); }; var goToTop = function() { $('.js-gotop').on('click', function(event){ event.preventDefault(); $('html, body').animate({ scrollTop: $('html').offset().top }, 500, 'easeInOutExpo'); return false; }); $(window).scroll(function(){ var $win = $(window); if ($win.scrollTop() > 200) { $('.js-top').addClass('active'); } else { $('.js-top').removeClass('active'); } }); }; // Loading page var loaderPage = function() { $(".fh5co-loader").fadeOut("slow"); }; var counter = function() { $('.js-counter').countTo({ formatter: function (value, options) { return value.toFixed(options.decimals); }, }); }; $(function(){ mobileMenuOutsideClick(); offcanvasMenu(); burgerMenu(); contentWayPoint(); dropdown(); goToTop(); loaderPage(); }); }());
