<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Tasty Food a Hotel Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!--mobile apps-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Tasty Food Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free Webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--mobile apps-->
<!--Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!--web-fonts-->
<link href='//fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!--animate-->
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<!--//end-animate-->
<!-- start-smooth-scrolling-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!--//end-smooth-scrolling-->
</head>
<body>
<!--banner-->
<div class="banner">
<div class="container">
<!--header-->
<div class="header">
<div class="logo">
<h1 class="wow zoomIn animated" data-wow-delay=".5s"><a href="index.html">Tasty Food</a></h1>
</div>
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""/></span>
<ul>
<li class="wow slideInDown animated" data-wow-delay=".5s"><a class="active" href="index.html">Home</a></li>
<li class="wow slideInDown" data-wow-delay=".6s"><a href="about.html">About</a></li>
<li class="wow slideInDown" data-wow-delay=".7s"><a href="gallery.html">Gallery</a></li>
<li class="wow slideInDown" data-wow-delay=".7s"><a href="codes.html">Codes</a></li>
<li class="wow slideInDown" data-wow-delay=".8s"><a href="blog.html">Blog</a></li>
<li class="wow slideInDown" data-wow-delay=".9s"><a href="contact.html">Contact</a></li>
</ul>
<!-- script-for-menu -->
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle("slow" , function(){
});
});
</script>
<!-- script-for-menu -->
</div>
<div class="clearfix"> </div>
</div>
<!--//header-->
<div class="bnr-text wow slideInUp animated" data-wow-delay=".5s">
<div class="flexslider">
<ul class="slides">
<li>
<h2 class="bnr-title">Traditional baking of food</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecat officia deserunt mollitia laborum et dolorum fuga.</p>
</li>
<li>
<h3 class="bnr-title">We have a lot of foodstuffs</h3>
<p>Vero eos at et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecat officia deserunt mollitia laborum et dolorum fuga.</p>
</li>
<li>
<h3 class="bnr-title">Delicious food recipes & Soups</h3>
<p>Dignissimos at vero eos et accusamus et iusto odio ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecat officia deserunt mollitia laborum et dolorum fuga.</p>
</li>
</ul>
<div class="clearfix"></div>
<!--FlexSlider-->
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!--End-slider-script-->
</div>
<a href="about.html" class="more more-right">More About</a>
<a href="single.html" class="more more-left">Learn More</a>
</div>
</div>
</div>
<!--//banner-->
<!--welcome-->
<div class="welcome">
<div class="container">
<h3 class="title wow fadeInDown animated" data-wow-delay=".5s">What About us </h3>
<div class="welcome-info">
<div class="col-md-4 welcome-left w3l wow slideInLeft animated" data-wow-delay=".5s">
</div>
<div class="col-md-8 welcome-right w3l">
<div class="welcome-text wow fadeInDown animated" data-wow-delay=".5s">
<div class="col-md-2 wtext-left">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
</div>
<div class="col-md-10 wtext-right">
<h4>Odio dignissimos</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum </p>
</div>
<div class="clearfix"> </div>
<div class="welcome-bars">
<label>60%</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>
</div>
</div>
</div>
<div class="welcome-text wow fadeInDown animated" data-wow-delay=".7s">
<div class="col-md-2 wtext-left w3l">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
</div>
<div class="col-md-10 wtext-right">
<h4>Sccusamus et</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum </p>
</div>
<div class="clearfix"> </div>
<div class="welcome-bars">
<label class="bar2">82%</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
</div>
</div>
</div>
</div>
<div class="welcome-text w3l wow fadeInDown animated" data-wow-delay=".9s">
<div class="col-md-2 wtext-left">
<span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
</div>
<div class="col-md-10 wtext-right">
<h4>Blanditiis prae</h4>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum </p>
</div>
<div class="clearfix"> </div>
<div class="welcome-bars agile">
<label class="bar3">45%</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--//welcome-->
<!--menu-form-->
<div class="menu-form">
<div class="menu-info">
<h3 class="title wow fadeInDown animated" data-wow-delay=".5s">Our Menu</h3>
<div class="scrollbar scrollbar1">
<div class="menu-grids agile wow fadeInDown animated" data-wow-delay=".5s">
<div class="menu-left">
<h4>Sandwich</h4>
<p>Porttitor vestibulum eu nisl dignissimos ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$18</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids menu-grids-mdl wow fadeInDown animated" data-wow-delay=".6s">
<div class="menu-left">
<h4>Fried rice </h4>
<p>Vestibulum porttitor eu nisl dignissimos ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$12</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids wow fadeInDown animated" data-wow-delay=".7s">
<div class="menu-left">
<h4> Salads </h4>
<p>Dignissimos porttitor vestibulum eu nisl ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$14</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids menu-grids-mdl">
<div class="menu-left">
<h4> Ham hock </h4>
<p>Porttitor vestibulum eu nisl dignissimos ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$20</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids">
<div class="menu-left">
<h4> Calamari </h4>
<p>Vestibulum porttitor eu nisl dignissimos ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$25</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids menu-grids-mdl">
<div class="menu-left">
<h4> Twinkies </h4>
<p>Dignissimos porttitor vestibulum eu nisl ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$20</h5>
</div>
<div class="clearfix"> </div>
</div>
<div class="menu-grids">
<div class="menu-left">
<h4> Beignets </h4>
<p>Porttitor vestibulum eu nisl dignissimos ducimus qui blanditiis praesentium voluptatum</p>
</div>
<div class="menu-right">
<h5>$11</h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--//menu-form-->
<!--reservation-->
<div class="reservation">
<div class="container">
<h3 class="title w3agile wow fadeInDown animated" data-wow-delay=".5s">Make a Reservation</h3>
<div class="book-info">
<div class="col-md-5 book-left wow fadeInLeft animated" data-wow-delay=".5s">
<h4 class="wow fadeInDown animated" data-wow-delay=".5s">Working Hours:</h4>
<h5 class="wow fadeInDown animated" data-wow-delay=".6s">Monday – Saturday 8:00 a.m – 11:00 p.m <br>
Sunday 10 a.m – 9 p.m <br>
<span class="glyphicon glyphicon-earphone"></span> +11 999 8888 7777 </h5>
<span class="burger wow zoomIn animated" data-wow-delay=".7s"> </span>
</div>
<div class="col-md-7 book-right agileinfo wow fadeInRight animated" data-wow-delay=".5s">
<form>
<label class="wow fadeInDown animated" data-wow-delay=".5s">Date :</label>
<input class="wow fadeInDown animated" data-wow-delay=".5s"type="date">
<div class="form-left wow fadeInDown animated" data-wow-delay=".7s">
<label>No.of People :</label>
<select class="form-control">
<option>1 Person</option>
<option>2 People</option>
<option>3 People</option>
<option>4 People</option>
<option>5 People</option>
<option>More</option>
</select>
</div>
<div class="form-right wow fadeInDown animated" data-wow-delay=".7s">
<label>Time :</label>
<input type="time">
</div>
<div class="clearfix"> </div>
<label class="wow fadeInDown animated" data-wow-delay=".9s">Contact Info :</label>
<input class="wow fadeInDown animated" data-wow-delay=".9s" type="text" value="Contact Info" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Contact';}" required="">
<input type="submit" value="Book a Table">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--//reservation-->
<!--footer-->
<div class="footer">
<div class="container">
<div class="footer-info w3agile">
<div class="col-md-4 footer-grids footer-address">
<h3 class="wow fadeInDown animated" data-wow-delay=".5s">Contact Us:</h3>
<ul>
<li class="wow slideInLeft animated" data-wow-delay=".5s"><i class="glyphicon glyphicon-send"></i> 123 San Sebastian <span> New York City USA. </span></li>
<li class="wow slideInLeft animated" data-wow-delay=".5s"><i class="glyphicon glyphicon-phone"></i> +11 222 3333 <span> +00 1111 222 </span></li>
<li class="wow slideInLeft animated" data-wow-delay=".5s"><i class="glyphicon glyphicon-envelope"></i> <a href="mailto:example@mail.com"> mail@example.com</a></li>
</ul>
</div>
<div class="col-md-4 footer-grids">
<h3 class="wow fadeInDown animated" data-wow-delay=".5s">Popular Items</h3>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f1.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f2.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f3.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="clearfix"> </div>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f4.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f5.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="footer-grd wow zoomIn animated" data-wow-delay=".5s">
<a href="single.html">
<img src="images/f6.jpg" class="img-responsive" alt=" ">
</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grids">
<h3 class="wow fadeInDown animated" data-wow-delay=".5s">Newsletter</h3>
<div class="subscribe wow slideInRight animated" data-wow-delay=".5s">
<form>
<input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
<input type="submit" value="Go">
</form>
<div class="clearfix"> </div>
</div>
<div class="social-icons wow slideInRight animated" data-wow-delay=".5s">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="fb"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="dott"> </a></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-copy wow slideInUp animated" data-wow-delay=".5s">
<p>© 2016 Tasty Food. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
</div>
</div>
</div>
<!--//footer-->
<!--smooth-scrolling-of-move-up-->
<script type="text/javascript">
$(document).ready(function() {
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!--//smooth-scrolling-of-move-up-->
<!--scrolling js-->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!--//scrolling js-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.js"></script>
</body>
</html>
/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
body{
margin:0;
font-family: 'Roboto', sans-serif;
background: #f0f0f0;
}
body a{
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
text-decoration:none;
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-family: 'Stint Ultra Condensed', cursive;
}
p{
margin:0;
}
ul,label{
margin:0;
padding:0;
}
body a:hover{
text-decoration:none;
}
/*--header--*/
.header {
background: none;
position: relative;
padding: 4em 0;
}
.logo {
position: absolute;
top: 16%;
z-index: 999;
left: 38.5%;
}
.logo h1 a {
display: block;
font-size: 2.5em;
color: #fff;
text-decoration: none;
letter-spacing: 2px;
}
.top-nav {
text-align: center;
width: 100%;
margin: 0 auto;
}
span.menu {
display: none;
}
.top-nav ul {
margin: 0;
}
.top-nav ul li{
list-style-type:none;
display: inline-block;
margin: 0 2em;
}
.top-nav ul li:nth-child(3) {
margin-right: 38em;
}
.top-nav li a {
color: #fff;
font-size: 2em;
padding: 0;
font-family: 'Stint Ultra Condensed', cursive;
}
.top-nav li a:hover ,.top-nav li a.active{
color: #E88010;
}
/*--//header--*/
/*--banner--*/
.banner {
background: url(https://images.pexels.com/photos/54455/cook-food-kitchen-eat-54455.jpeg?w=940&h=650&auto=compress&cs=tinysrgb) no-repeat 0px -64px;
background-size: cover;
min-height: 799px;
}
.bnr-text {
text-align: center;
color: #fff;
margin-top: 8em;
overflow:hidden;
}
.bnr-text .bnr-title {
font-size: 3.5em;
color: #E88010;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.bnr-text p {
font-size: 1.1em;
line-height: 1.8em;
width: 53%;
margin: 1em auto 2.5em;
color: rgba(255, 255, 255, 0.62);
font-family: 'Roboto', sans-serif;
}
.bnr-text a.more {
font-size: 1.1em;
color: #fff;
border: 3px solid #fff;
padding: 0.6em 2.5em;
display: inline-block;
}
.bnr-text a.more.more-left {
margin-right: 2em;
color: #E88010;
}
a.more.more-right {
border-color: #E88010;
background-color: #E88010;
margin-right: 2em;
}
a.more.more-right:hover {
background: none;
color: #fff;
}
.bnr-text a.more.more-left:hover {
background-color: #E88010;
border-color: #E88010;
color: #fff;
}
/*--//banner--*/
/*--welcome--*/
.welcome,.reservation,.about,.news,.codes,.blog,.single,.gallery,.contact{
padding:7em 0;
}
h3.title {
font-size: 4em;
text-align: center;
color: #000;
margin-bottom: 1.2em;
}
p {
font-size: 1em;
color: #999;
line-height: 1.8em;
margin-top: 0.5em;
font-family: 'Roboto', sans-serif;
}
.welcome h4 {
font-size: 1.8em;
color: #000;
letter-spacing: 1px;
text-transform: uppercase;
}
.welcome span.glyphicon {
font-size: 2em;
color: #FF7F50;
}
.welcome span.glyphicon.glyphicon-list-alt {
color: #5F9EA0;
}
.welcome span.glyphicon.glyphicon-signal {
color: #9370DB;
}
.wtext-left {
text-align: center;
padding-top: 0.5em;
}
.welcome-left {
background: url(../images/img1.png) no-repeat 0px 0px;
min-height: 414px;
background-size: cover;
padding: 0;
}
.welcome-text:nth-child(2) {
margin: 2em 0;
}
/*--progress-bars--*/
.welcome-bars {
margin: 1em 4em;
position: relative;
padding-top: 1.5em;
}
.welcome .progress {
height: 3px;
background: #E6E6E6;
}
.welcome .progress-bar {
background-color: #FF7F50;
line-height: 15px;
}
.welcome-bars label {
left: 56%;
position: absolute;
top: -18px;
background: #FF7F50;
padding: 5px 10px;
color: #fff;
font-size: 1em;
font-weight: 400;
}
/*-- agileits --*/
.welcome-bars label:before {
width: 0;
height: 0;
position: absolute;
content: '';
bottom: -5px;
left: 0;
right: 0;
margin: auto;
display: block;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #FF7F50 transparent transparent transparent;
}
.welcome-bars label.bar2 {
left: 78%;
}
.welcome-bars label.bar3 {
left: 41%;
}
/*--//welcome--*/
/*--menu-form--*/
.menu-form{
background: url(../images/bg.jpg) no-repeat 0px 0px fixed;
background-size: cover;
}
.scrollbar {
height: 395px;
overflow-y: scroll;
}
.scrollbar.scrollbar1 {
margin-right: -3em;
}
div#ascrail2001 {
left: 20px !important;
}
div#ascrail2001-hr {
display: none;
}
div#ascrail2001 {
border-radius: 10px;
}
.menu-info {
background: rgba(0, 0, 0, 0.72);
width: 50%;
padding: 7em 0;
text-align: right;
}
/*-- agileits --*/
.menu-form h3.title {
color: #fff;
text-align: right;
margin-right: -1em;
}
.menu-grids.menu-grids-mdl {
margin: 4em 0;
}
.menu-left{
float:left;
width: 83%;
}
.menu-right{
float:right;
}
.menu-form h4 {
font-size: 2.5em;
color: #E88010;
}
.menu-form p {
color: #fff;
width: 53%;
margin: 0.5em 0 0 auto;
}
.menu-form h5 {
font-size: 2em;
color: #333;
background: #fff;
padding: 1em;
display: inline-block;
font-weight: 700;
letter-spacing: 2px;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-border-radius: 50%;
}
.menu-grids:hover h5 {
color: #E88010;
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);
-moz-transform: rotatey(360deg);
-o-transform: rotatey(360deg);
-ms-transform: rotatey(360deg);
-webkit-transition: 0.5s all;
transition: 0.5s all;
-moz-transition: 0.5s all;
}
/*-- agileinfo --*/
/*--//menu-form--*/
/*--reservation--*/
.book-left {
background: #E88010;
padding: 5em 4em 11.5em;
position: relative;
}
.book-right {
background: url(../images/bg1.jpg) no-repeat 0px 0px;
background-size: cover;
padding: 4em 5em;
margin-left: 3em;
width: 54%;
}
.book-info h4 {
font-size: 3em;
color: #800000;
margin-bottom: 0.2em;
}
.book-info h5 {
font-size: 2em;
color: #fff;
line-height: 1.8em;
}
.book-info h5 span.glyphicon {
font-size: 0.8em;
vertical-align: middle;
}
.book-right label {
font-size: 2em;
color: #fff;
margin-bottom: .2em;
text-align: left;
display: block;
font-weight: 400;
font-family: 'Stint Ultra Condensed', cursive;
line-height: 1em;
}
.form-left {
float: left;
width: 48%;
}
.form-right {
float: right;
width: 48%;
}
/*-- agileits --*/
.book-right input[type="text"],.book-right input[type="date"],.book-right input[type="time"] {
width: 100%;
color: #555;
outline: none;
font-size: 1em;
padding: .5em 1em;
border: none;
-webkit-appearance: none;
margin-bottom: 1.5em;
line-height: 1.8em;
font-family: 'Roboto', sans-serif;
}
.book-right select.form-control {
outline: none;
font-size: 1em;
padding: .5em 1em;
border-radius: 0;
border: none;
height: 3em;
}
.book-right input[type=submit] {
color: #FFFFFF;
padding: .4em 1em;
font-size: 1.5em;
cursor: pointer;
border: 2px solid #E88010;
outline: none;
border-radius: 3px;
background: #E88010;
width: 100%;
font-family: 'Stint Ultra Condensed', cursive;
line-height: 1em;
}
.book-right input[type=submit]:hover {
background: none;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
}
span.burger {
background: url(../images/img2.jpg)no-repeat;
background-size: contain;
min-height: 152px;
position: absolute;
width: 200px;
bottom: 31px;
right: 33px;
}
/*--//reservation--*/
/*--footer--*/
.footer{
background: url(../images/footer.jpg)no-repeat;
background-size:cover;
padding:6em 0;
}
.footer h3 {
font-size: 3em;
color: #E88010;
margin-bottom: 0.8em;
}
.footer ul li {
display: block;
margin-bottom: 1.5em;
color: #fff;
font-size: 1.1em;
}
.footer-grids.footer-address ul li:nth-child(2) {
border-top: 1px dashed #5D5D5D;
border-bottom: 1px dashed #5D5D5D;
padding: 1.5em 0;
}
.footer ul li:nth-child(4),.social-icons ul li:nth-child(4){
margin: 0;
}
.footer ul li i.glyphicon {
font-size: 1.1em;
color: #fff;
margin-right: 0.8em;
vertical-align: middle;
}
.footer ul li span {
display: block;
margin-left: 2.5em;
padding-top: 0.5em;
}
.footer ul li a {
color: #fff;
}
.footer ul li a:hover{
color: #E88010;
}
.footer-grd {
float: left;
width: 25%;
border: 2px solid #fff;
margin: 0 15px 15px 0;
}
.footer-grd a img {
width: 100%;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
-ms-transition: 0.5s all;
}
/*-- agileits --*/
.subscribe input[type="text"] {
width: 72%;
padding: 1em;
font-size: 0.9em;
float: left;
color: #fff;
outline: none;
border: 1px solid #fff;
border-right: none;
background: none;
-webkit-appearance: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
}
.subscribe input[type="submit"] {
width: 18%;
float: left;
color: #fff;
font-size: .9em;
outline: none;
padding: 1em;
border: 1px solid #fff;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-webkit-appearance: none;
background:none;
}
.subscribe:hover input[type="text"]{
border-color: #E88010;
}
.subscribe:hover input[type="submit"]{
color: #E88010;
border-color: #E88010;
}
/*--social-icons--*/
.social-icons {
margin-top: 2em;
}
.social-icons ul{
display:block;
padding: 0;
}
.social-icons ul li{
display: inline-block;
text-align: left;
margin: 0 1em 0 0;
}
.social-icons ul li a {
background: url(../images/social-icons.png)#E88010 no-repeat 0px 0px;
display: block;
height: 41px;
width: 41px;
border: 1px solid #E88010;
-webkit-transition: .5s all;
transition: .5s all;
-moz-transition: .5s all;
}
.social-icons ul li a:hover {
background-color: transparent;
border-radius: 65%;
}
.social-icons ul li a.fb{
background-position:0px -48px;
}
.social-icons ul li a.in {
background-position: 1px -96px;
}
.social-icons ul li a.dott {
background-position: 0px -145px;
}
/*--//social-icons--*/
.footer-copy p {
color: #fff;
text-align: center;
}
.footer-copy p a {
color: #fff;
}
.footer-copy p a:hover {
color: #E88010;
}
.footer-copy {
margin-top: 3em;
padding-top: 2em;
border-top: 2px dashed #5D5D5D;
}
/*--//footer--*/
/*--slider-up-arrow--*/
#toTop {
display: none;
text-decoration: none;
position: fixed;
bottom: 3%;
right: 3%;
overflow: hidden;
width: 40px;
height: 40px;
border: none;
text-indent: 100%;
background: url("../images/move-up.png")#f0f0f0 no-repeat center;
}
a#toTop:hover {
background-color: #E88010;
}
#toTopHover {
width: 32px;
height: 32px;
display: block;
overflow: hidden;
float: right;
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}
/*--//slider-up-arrow--*/
/*--about-page--*/
.banner.about-banner {
min-height: 350px;
}
.banner.about-banner .bnr-text {
margin-top: 4em;
}
.about-info {
margin: 0 auto;
}
.about-left img {
width: 100%;
}
/*-- w3ls --*/
.about-right {
background-color: #fff;
padding: 3em;
}
.about-info h4 {
font-size: 2.2em;
color: #E88010;
margin-bottom: 0.5em;
letter-spacing: 2px;
line-height: 1.2em;
}
/*--team--*/
.team {
background: url(../images/bg2.jpg) no-repeat 0px 0px fixed;
background-size: cover;
padding:6em 0;
}
.team-grids img {
width: 100%;
}
.thumbnail.team-thmnl {
overflow: hidden;
padding: 0;
border: 10px solid #fff;
margin: 0;
position:relative;
}
.thumbnail .caption {
padding: 0;
text-align: center;
margin: 20px;
}
.thumbnail.team-thmnl:hover {
border-color: #E88010;
}
.team-grids h4 {
font-size: 2em;
color: #E88010;
}
.social-icons.team-icons {
position: absolute;
bottom:-100px;
margin: 0;
left: 0;
background: #fff;
padding: 1em 0 .7em;
-webkit-transition:.5s all;
transition:.5s all;
-moz-transition:.5s all;
width: 100%;
text-align: center;
}
.social-icons.team-icons ul li a:hover{
background-color: #E88010;
}
.thumbnail.team-thmnl:hover div.social-icons.team-icons{
bottom:0px;
}
/*--//team--*/
/*--news--*/
.news-grid-info {
margin-top: 1em;
}
.news-grid img {
width: 100%;
}
.news-grid a {
font-size: 2.2em;
color: #E88010;
font-family: 'Stint Ultra Condensed', cursive;
text-decoration:none;
}
.news-grid a:hover{
color:#000;
}
.news-grid h5 {
color: #555;
font-size: 1.2em;
margin: .5em 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
/*--//about-page--*/
/*--blog--*/
.blog-info.blog-mdl-info {
margin: 4em 0;
}
.blog-left {
float: left;
width: 12%;
background: #E88010;
padding: 1em;
border-top: 4px solid #800000;
}
.blog-right {
float: right;
width: 82%;
}
.blog img.img-responsive {
width: 100%;
}
.blog-left h6 {
font-size: 3em;
color: #fff;
}
.blog-left h6 span {
vertical-align: super;
font-size: 0.7em;
margin-left: 6px;
}
.blog-left h5 {
font-size: 1.5em;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 200;
}
.blog-text {
background: #fff;
padding: 2em;
}
.blog-img {
overflow: hidden;
}
.blog-right h4 {
font-size: 2em;
color: #E88010;
}
.blog-right h4 a{
color: #E88010;
}
.blog-right h4 a:hover{
color: #800000;
}
.more a {
font-size: 1em;
font-family: 'Roboto', sans-serif;
color: #E88010;
border: 1px solid;
border-top: 4px solid #800000;
padding: .6em 1.5em;
font-weight: 700;
position:relative;
z-index: 99;
}
.more a:before {
content: '';
background: #800000;
width: 100%;
height: 0px;
display: block;
position: absolute;
top: 0;
left: 0;
transition:.5s all;
z-index: -1;
}
.more a:hover:before{
height: 100%;
}
.more a:hover{
color:#fff;
border-color:#800000;
}
.blog p {
margin: 1em 0 1.5em;
}
/*--//blog--*/
/*-- single--*/
.article-links ul {
padding: 1.5em 0;
border: 1px dotted #CECECE;
border-left: none;
border-right: none;
}
.article-links ul li {
display: inline-block;
font-family: 'Roboto', sans-serif;
padding-left: 4em;
color: #999;
font-size: 1em;
}
.article-links ul li:nth-child(1) {
padding-left: .5em;
}
.article-links ul li i {
vertical-align: inherit;
margin-right: .8em;
}
.article-links ul li:last-child{
float:right;
}
.article-links ul li a{
color: #999;
}
.article-links ul li a:hover{
text-decoration:underline;
color:#E88010;
}
.artical-content h4{
color: #000;
text-align: left;
text-transform: capitalize;
font-size: 1.7em;
margin: 0 0 1em;
}
.artical-content p {
color: #999;
font-size: 1em;
line-height: 1.8em;
margin:2em 0;
}
/*--admin-text--*/
.admin-text {
border: 1px solid #E4E4E4;
padding: 2em 4em;
margin: 4em 0 0;
background: #fff;
}
.admin-text:hover {
box-shadow: 1px 1px 3px #A5A5A5;
-webkit-box-shadow: 1px 1px 3px #A5A5A5;
-moz-box-shadow: 1px 1px 3px #A5A5A5;
-o-box-shadow: 1px 1px 3px #A5A5A5;
-ms-box-shadow: 1px 1px 3px #A5A5A5;
}
.admin-text h5 {
font-size: 1.9em;
margin: 0 0 0.5em 0;
color: #E88010;
}
.admin-text-left {
float: left;
width: 11%;
}
.admin-text-right {
float: right;
width: 86%;
}
.admin-text-right p {
font-size: 1em;
margin: 0 0 1em;
}
.admin-text-right span {
font-size: 1.1em;
margin: 0 0 1em 0;
color: #555;
}
.admin-text-right span a {
color: #E88010;
}
.admin-text-right span a:hover{
color: #800000;
}
/*--related-posts--*/
.related-posts {
margin: 0;
}
.related-grids {
padding-left: 0 !important;
}
.related-posts img{
width: 100%;
}
.related-grids h5 {
font-size: 1.6em;
}
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover {
border-color: #800000;
}
.related-grids h5 a {
color: #000;
}
.related-grids h5 a:hover{
color: #E88010;
}
/*---comment-form----*/
.table-form input[type="text"],.table-form input[type="email"],.table-form textarea{
border:1px solid #E3E3E3;
outline: none;
padding: .8em 1em;
color:#999;
overflow: hidden;
display: block;
font-size: 1em;
background:none;
}
.table-form input[type="email"]{
margin:1em 0;
}
.table-form textarea{
min-height:200px;
resize: none;
margin:1em 0;
}
.table-form input[type="submit"],.table-form textarea,.table-form input[type="text"],.table-form input[type="email"] {
width:70%;
}
.table-form input[type="submit"] {
background:#E88010;
color: #fff;
font-size: 1.2em;
display: block;
outline: none;
border: none;
padding:0.5em 0;
text-align:center;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.table-form input[type="submit"]:hover{
background:#800000;
}
.comment-grid-top h3, .artical-commentbox h3, .related-posts h3 {
color: #E88010;
text-transform: capitalize;
margin: 1em 0 .5em;
font-size: 3.5em;
}
.top-comment-left{
float: left;
width: 13%;
}
.top-comment-right{
float: left;
width:84%;
margin-left:1em;
}
.top-comment-right ul{
padding: 0;
margin: 0;
}
.top-comment-right ul li {
display: inline-block;
color: #000;
padding: 0.3em;
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
font-weight: 300;
}
.top-comment-right ul li a {
text-decoration: none;
font-size: 1.1em;
color: #E88010;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.top-comment-right ul li a:hover{
color:#800000;
}
.top-comment-right p {
color:#999;
font-size: 1em;
margin: 0;
line-height: 1.8em;
}
.comments-top-top {
margin: 2.5em 0 0;
border: 1px solid #E4E4E4;
padding: 2em;
width: 70%;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.comments-top-top:hover{
border-color:#E88010;
}
.blog-top p {
font-size: 1em;
color: #fff;
line-height: 1.8em;
text-align: left;
margin: 1em 0;
}
.artical-content img {
width: 100%;
}
.article-links ul li span {
font-size: 1.1em;
display: inline-block;
font-weight: 300;
}
/*-- //single --*/
/*--gallery--*/
.gallery-grids.gallery-grids-mdl {
margin: 2em 0;
}
.gallery-grids:nth-child(5) {
float: right;
}
.gallery-grids a {
display: block;
overflow: hidden;
position:relative;
}
.b-wrapper {
background: rgba(0, 0, 0, 0.58);
position: absolute;
width: 100%;
height: 0%;
top: 0;
left: 0;
transition:.5s all;
opacity: 0;
}
.gallery-grids a:hover .b-wrapper{
height: 100%;
opacity: 1;
}
.b-wrapper h5 {
font-size: 3.5em;
color: #fff;
text-align: center;
margin-top: 2.5em;
}
/*--//gallery--*/
/*--short-codes--*/
.codes h3.title1 {
margin-bottom: 0.5em;
}
.codes h3.title1,.codes h4.title {
text-align: right;
}
.codes span.bg-text{
top:1%;
}
.gallery span.bg-text,.contact span.bg-text,.testimonial span.bg-text{
top:3%;
}
h3.hdg {
font-size: 2.5em;
color:#000 !important;
}
.show-grid [class^=col-] {
background: #fff;
text-align: center;
margin-bottom: 10px;
line-height: 2em;
border: 10px solid #f0f0f0;
}
.show-grid [class*="col-"]:hover {
background: #e0e0e0;
}
.grid_3{
margin-bottom:2em;
}
.xs h3, h3.m_1{
color:#000;
font-size:1.7em;
font-weight:300;
margin-bottom: 1em;
}
.grid_3 p{
color: #555;
font-size: 0.85em;
margin-bottom: 1em;
font-weight: 300;
}
.grid_4{
background:none;
margin-top:50px;
}
.label {
font-weight: 300 !important;
border-radius:4px;
}
.grid_5{
background:none;
padding:2em 0;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg {
margin-bottom:1em;
color: #333;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-top: none !important;
}
.tab-content > .active {
display: block;
visibility: visible;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
z-index: 0;
}
.badge-primary {
background-color: #03a9f4;
}
.badge-success {
background-color: #8bc34a;
}
.badge-warning {
background-color: #ffc107;
}
.badge-danger {
background-color: #e51c23;
}
.grid_3 p{
line-height: 2em;
color: #888;
font-size: 0.9em;
margin-bottom: 1em;
font-weight: 300;
}
.bs-docs-example {
margin: 1em 0;
}
section#tables p {
margin-top: 1em;
}
.tab-container .tab-content {
border-radius: 0 2px 2px 2px;
border: 1px solid #e0e0e0;
padding: 16px;
background-color: #ffffff;
}
.table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 15px!important;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
font-size: 0.9em;
color: #555;
border-top: none !important;
}
.tab-content > .active {
display: block;
visibility: visible;
}
.label {
font-weight: 300 !important;
}
.label {
padding: 4px 6px;
border: none;
text-shadow: none;
}
.nav-tabs {
margin-bottom: 1em;
}
.alert {
font-size: 0.85em;
}
h1.t-button,h2.t-button,h3.t-button,h4.t-button,h5.t-button {
line-height:1.8em;
margin-top:0.5em;
margin-bottom: 0.5em;
}
li.list-group-item1 {
line-height: 2.5em;
}
.input-group {
margin-bottom: 20px;
}
.in-gp-tl{
padding:0;
}
.in-gp-tb{
padding-right:0;
}
.list-group {
margin-bottom: 48px;
}
ol {
margin-bottom: 44px;
}
h2.typoh2{
margin: 0 0 10px;
}
@media (max-width:991px){
.list-group {
margin-bottom: 25px;
}
.grid_3 {
margin-bottom: 0em;
}
.grid_5 {
padding: 1em 0;
}
}
@media (max-width:768px){
.grid_5 {
padding: 0 0 1em;
}
.grid_3 {
margin-bottom: 0em;
}
}
@media (max-width:640px){
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 0px;
margin-bottom: 0px;
}
.grid_5 h3, .grid_5 h2, .grid_5 h1, .grid_5 h4, .grid_5 h5, h3.hdg, h3.bars {
margin-bottom: .5em;
}
.progress {
height: 10px;
margin-bottom: 10px;
}
ol.breadcrumb li,.grid_3 p,ul.list-group li,li.list-group-item1 {
font-size: 1em;
}
.breadcrumb {
margin-bottom: 10px;
}
.well {
font-size: 1em;
margin-bottom: 10px;
}
h2.typoh2 {
font-size: 1.5em;
}
.grid_4 {
margin-top: 30px;
}
}
@media (max-width:480px){
.table h1 {
font-size: 26px;
}
.table h2 {
font-size: 23px;
}
.table h3 {
font-size: 20px;
}
.label {
font-size: 53%;
}
.alert,p {
font-size: 1em;
}
.pagination {
margin: 20px 0 0px;
}
}
@media (max-width: 320px){
.grid_4 {
margin-top: 18px;
}
.alert, p,ol.breadcrumb li, .grid_3 p,.well, ul.list-group li, li.list-group-item1,a.list-group-item {
font-size: 13px;
}
.alert {
padding: 10px;
margin-bottom: 10px;
}
ul.pagination li a {
font-size: 1em;
padding: 5px 11px !important;
}
.list-group {
margin-bottom: 10px;
}
.well {
padding: 10px;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
font-size: 0.81em;
}
.table td, .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 13px!important;
}
.codes .row {
margin: 0;
}
}
/*--//Short-codes--*/
/*--contact--*/
.address {
background: url(../images/bg.jpg)no-repeat;
background-size: cover;
padding: 7em 0;
}
.address-grid {
background-color: rgba(232, 128, 16, 0.78);
padding: 4em;
}
.address-info {
background-color: rgba(232, 128, 16, 0.78);
padding: 3em 4em;
}
.address-info.address-mdl {
margin: 2em 0;
}
.contact iframe {
width: 100%;
min-height: 400px;
border: none;
}
.address h4 {
font-size: 3em;
color: #fff;
margin-bottom: 0.8em;
}
.address-info h4 {
margin-bottom: .4em;
}
.address input[type="text"] {
width: 100%;
color: #fff;
background: none;
outline: none;
font-size: 1em;
padding: .8em 1em;
margin-bottom: 2em;
border: solid 1px #fff;
-webkit-appearance: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
font-family: 'Roboto', sans-serif;
}
.address textarea {
resize: none;
width: 100%;
background: none;
color: #fff;
font-size: .9em;
outline: none;
padding: .6em 1em;
border: solid 1px #fff;
min-height: 14.8em;
-webkit-appearance: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
font-family: 'Roboto', sans-serif;
}
.address input[type="submit"] {
border: none;
outline: none;
color: #fff;
padding: .8em 4em;
font-size: 1em;
margin: 1em 0 0 0;
-webkit-appearance: none;
background: #800000;
border: solid 1px #800000;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
font-family: 'Roboto', sans-serif;
}
.address input[type="submit"]:hover{
background: none;
color: #800000;
}
::-webkit-input-placeholder{
color:#fff !important;
}
.address p {
color: #fff;
margin: 0;
font-size: 1.1em;
}
.address p a{
color: #fff;
-webkit-transition:.5s all;
transition:.5s all;
-moz-transition:.5s all;
}
.address p a:hover{
color: #800000;
}
/*--//contact--*/
img.zoom-img{
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-duration: .5s;
-moz-transition-duration: .5s;
-ms-transition-duration: .5s;
-o-transition-duration: .5s;
}
img.zoom-img:hover,.gallery-grids a:hover img.zoom-img{
-webkit-transform: scale(1.2);
transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: 750ms;
-moz-transition-timing-function: ease-in-out;
-moz-transition-duration: 750ms;
-ms-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-ms-transition-duration: 750ms;
-o-transition-duration: 750ms;
overflow: hidden;
}
/*---- responsive-design -----*/
@media(max-width:1440px){
.bnr-text {
margin-top: 5em;
}
.scrollbar {
height: 400px;
}
}
@media(max-width:1366px){
.banner {
background-position:0px -6px;
min-height: 735px;
}
}
@media(max-width:1280px){
.banner {
background-position: 0px 0px;
min-height: 790px;
}
}
@media(max-width:1080px){
.top-nav ul li {
margin: 0 1.5em;
}
.top-nav ul li:nth-child(3) {
margin-right: 30em;
}
.logo h1 a {
font-size: 2.3em;
}
.logo {
left: 38%;
}
.bnr-text p {
width: 61%;
margin: 1em auto;
}
.bnr-text .bnr-title {
font-size: 3.3em;
}
.banner {
background-position: -85px 0px;
min-height: 740px;
}
.welcome, .reservation, .about, .news, .codes, .blog, .single, .gallery, .contact {
padding: 6em 0;
}
h3.title {
margin-bottom: 1em;
}
.menu-info {
padding: 6em 0;
}
.menu-form p {
width: 67%;
margin: 0.2em 0 0 auto;
}
.book-right {
margin-left: 2.8em;
width: 54%;
}
.book-left {
padding: 5em 3em 11.6em;
}
span.burger {
bottom: 18px;
right: 22px;
}
.banner.about-banner {
min-height: 305px;
background-position: 0px 0px;
}
.banner.about-banner .bnr-text {
margin-top: 3em;
}
.about-info h4 {
font-size: 2em;
letter-spacing: 0px;
}
.about-left {
padding-left: 0;
}
.about-right {
padding: 2em;
}
.team {
padding: 5em 0;
}
.team-grids {
padding: 0 .5em;
}
.social-icons.team-icons ul li {
margin-right: 0.3em;
}
.b-wrapper h5 {
margin-top: 2em;
}
.contact iframe {
min-height: 350px;
}
.address-info {
padding: 3em 3em;
}
.address {
padding: 6em 0;
}
.article-links ul li {
padding-left: 3.5em;
}
.welcome-left {
min-height: 347px;
}
}
@media(max-width:1024px){
.logo h1 a {
font-size: 2em;
}
.header {
padding: 3em 0;
}
.top-nav ul li:nth-child(3) {
margin-right: 29em;
}
.banner {
background-position: -60px 0px;
min-height: 685px;
}
.bnr-text p {
width: 67%;
}
.footer {
padding: 5em 0;
}
.comment-grid-top h3, .artical-commentbox h3, .related-posts h3 {
font-size: 3em;
}
}
@media(max-width:991px){
.top-nav ul li {
margin: 0 1em;
}
.top-nav ul li:nth-child(3) {
margin-right: 20.9em;
}
.header {
padding: 2em 0;
}
.logo {
left: 36%;
top: 10%;
}
.bnr-text .bnr-title {
font-size: 3em;
}
.bnr-text p {
width: 84%;
font-size: 1em;
}
.bnr-text a.more {
font-size: 1em;
padding: 0.6em 2em;
}
.banner {
background-position: -28px 0px;
min-height: 636px;
}
.welcome, .reservation, .about, .news, .codes, .blog, .single, .gallery, .contact {
padding: 5em 0;
}
.welcome-left {
float: left;
width: 45%;
min-height: 355px;
}
.welcome-right {
float: right;
width: 55%;
padding-right: 0;
}
.wtext-left {
float: left;
width: 9%;
padding: 0.5em 0 0;
}
.wtext-right {
float: right;
width: 87%;
padding: 0;
}
.welcome-bars label {
left: 53%;
top: -14px;
font-size: 0.9em;
}
.welcome-bars {
margin: 1em 2em;
}
.welcome h4 {
font-size: 1.6em;
}
.menu-info {
padding: 5em 0;
}
.menu-left {
width: 80%;
}
.menu-form p {
width: 72%;
}
.menu-grids.menu-grids-mdl {
margin: 3em 0;
}
.scrollbar {
height: 365px;
}
.book-left {
padding: 4em 2.2em 12em;
float: left;
width: 43%;
}
.book-right {
margin-left: 0;
width: 54%;
float: right;
padding: 3em 2em;
}
.book-right input[type="text"], .book-right input[type="date"], .book-right input[type="time"] {
padding: .4em 1em;
}
.book-right select.form-control {
padding: .4em 1em;
height: 2.8em;
}
.book-info h4 {
font-size: 2.8em;
}
.book-info h5 {
font-size: 1.7em;
}
span.burger {
width: 176px;
min-height: 130px;
bottom: 30px;
}
.footer-grids {
float: left;
width: 33.33%;
}
.footer-grids.footer-address {
padding-left: 0;
}
.footer-grd {
width: 28%;
border: 1px solid #fff;
margin: 0 10px 10px 0;
}
.footer-grids:nth-child(2),.footer-grids:nth-child(3) {
padding-right: 0;
}
.footer h3 {
margin-bottom: 0.6em;
}
.subscribe input[type="submit"] {
width: 24%;
}
.subscribe input[type="text"] {
width: 76%;
}
.footer .social-icons ul li{
margin: 0 0.5em 0 0;
}
.footer ul li {
margin-bottom: 1em;
font-size: 1em;
}
.footer-grids.footer-address ul li:nth-child(2) {
padding: 1em 0;
}
.about-left {
float: left;
width: 50%;
}
.about-right {
float: right;
width: 50%;
}
.about-info h4 {
font-size: 1.6em;
margin-bottom: 0.3em;
}
.team {
padding: 4em 0;
}
.team-grids {
float: left;
width: 50%;
}
.team-grids {
float: left;
width: 50%;
padding: 0 1em 1.5em;
}
.banner.about-banner {
min-height: 233px;
background-position: 0px 0px;
}
.bnr-text .bnr-title {
font-size: 2.8em;
}
.news-grid:nth-child(2) {
margin-top: 2em;
}
.gallery-grids {
width: 25%;
float: left;
padding: 0 .5em;
}
.gallery-grids.gallery-two {
width: 50%;
padding-right: 0;
}
.gallery-grids.gallery-grids-mdl {
margin: 1em 0;
}
.gallery-grids:nth-child(5),.gallery-grids:nth-child(8),.gallery-grids:nth-child(9){
padding: 0 0 0 1em;
}
.b-wrapper h5 {
font-size: 3em;
}
.blog-left {
width: 14%;
}
.blog-left h6 {
font-size: 2.5em;
}
.more a {
font-size: 0.9em;
border-top-width: 3px;
padding: .5em 1em;
}
.article-links ul li span {
font-size: 1em;
}
.article-links ul li i {
margin-right: .5em;
}
.blog-text {
padding: 1.5em 1em;
}
.article-links ul li {
padding-left: 1.5em;
}
.admin-text {
padding: 2em 2em;
margin: 3em 0 0;
}
.comments-top-top {
margin: 2em 0 0;
padding: 1.5em;
width: 100%;
}
.table-form textarea {
min-height: 165px;
}
.table-form input[type="text"], .table-form input[type="email"], .table-form textarea {
padding: .6em 1em;
}
.contact iframe {
min-height: 300px;
}
.address {
padding: 5em 0;
}
.address-left {
float: left;
width: 50%;
padding-left: 0;
}
.address-right {
float: right;
width: 50%;
padding: 0;
}
.address-info h4 {
margin-bottom: .3em;
font-size: 2.5em;
}
.address p {
font-size: 1em;
}
.address-info {
padding: 2.5em;
}
.address-grid {
padding: 2.5em;
}
.address input[type="text"] {
padding: .6em 1em;
margin-bottom: 1.5em;
}
.address-info.address-mdl {
margin: 1.5em 0;
}
.address textarea {
min-height: 14.5em;
}
.footer-copy {
margin-top: 2em;
padding-top: 1.5em;
}
}
@media(max-width:800px){
.logo {
left: 35.5%;
}
a.more.more-right {
margin-right: 1em;
}
.bnr-text p {
margin: 0.5em auto;
}
.banner {
background-position: -18px 0px;
min-height: 610px;
}
.menu-form h5 {
font-size: 1.7em;
padding: 1em;
margin-top: 8px;
}
.menu-grids.menu-grids-mdl {
margin: 2em 0;
}
.scrollbar.scrollbar1 {
margin-right: -2.5em;
}
.menu-form p {
width: 89%;
}
div#ascrail2001 {
left: 10px !important;
}
.scrollbar {
height: 340px;
}
.menu-info {
padding: 4em 0;
}
h3.title {
margin-bottom: 0.7em;
}
.welcome, .reservation, .about, .news, .codes, .blog, .single, .gallery, .contact {
padding: 4em 0;
}
}
@media(max-width:768px){
.top-nav li a {
font-size: 1.8em;
}
.logo h1 a {
font-size: 1.8em;
}
.logo {
left: 37%;
}
.bnr-text .bnr-title {
font-size: 2.5em;
}
.bnr-text p {
width: 77%;
font-size: 0.9em;
}
.bnr-text a.more {
font-size: 0.9em;
padding: 0.5em 2em;
}
.banner {
background-position: -64px 0px;
min-height: 565px;
}
.bnr-text {
margin-top: 4em;
}
.welcome h4 {
font-size: 1.5em;
}
p {
font-size: 0.9em;
}
.welcome-bars label {
left: 55%;
top: -8px;
font-size: 0.8em;
padding: 3px 6px;
}
.welcome-bars {
margin: 0.5em 0;
}
.welcome-text:nth-child(2) {
margin: 1em 0;
}
h3.title {
margin-bottom: 0.8em;
font-size: 3.5em;
}
.menu-form h5 {
font-size: 1.5em;
}
.admin-text {
padding: 1.5em;
margin: 2em 0 0;
}
.admin-text-right span {
font-size: 1em;
}
.comment-grid-top h3, .artical-commentbox h3, .related-posts h3 {
font-size: 2.8em;
margin: 0.8em 0 .3em;
}
.thumbnail {
margin-bottom: 11px;
}
.related-grids h5 {
font-size: 1.4em;
}
.comments-top-top {
margin: 1em 0 0;
}
.top-comment-right ul li {
font-size: 1.1em;
}
.contact iframe {
min-height: 270px;
}
.footer {
padding: 4em 0;
}
}
@media(max-width:700px){
.top-nav {
position: relative;
}
.top-nav span.menu {
display: inline-block;
position: relative;
cursor: pointer;
margin-right: 1em;
text-align: right;
float: right;
}
.top-nav ul{
display:none;
z-index: 999;
position: absolute;
width: 100%;
left: 0;
top: 50px;
}
.span {
display: none;
}
.top-nav ul li {
display: block;
text-align: center;
background: rgba(0, 0, 0, 0.84);
margin: 0;
width: 100%;
border: 1px solid rgb(58, 58, 58);
}
.top-nav ul li{
animation: inherit !important;
animation-delay: inherit !important;
visibility: inherit !important;
}
.top-nav ul li a {
display: block;
padding: .4em 0;
font-size: 1.5em;
margin: 0;
letter-spacing: 2px;
color: #fff;
}
.logo {
left: 0;
top: 28%;
}
.logo h1 a {
font-size: 1.3em;
letter-spacing: 0px;
}
.header {
padding: 2em 0 0;
}
}
@media(max-width:640px){
.banner {
background-position: -19px 0px;
min-height: 495px;
}
.bnr-text .bnr-title {
font-size: 2em;
}
.menu-info {
width: 60%;
}
.menu-form {
background-position:-140px 11px;
}
.menu-form h4 {
font-size: 2em;
}
.menu-form h5 {
margin-top: 6px;
}
.scrollbar {
height: 295px;
}
.book-info h4 {
font-size: 2.5em;
}
.book-info h5 {
font-size: 1.4em;
}
.book-left {
padding: 4em 2em 14em;
}
.welcome-left {
min-height: 305px;
}
.footer h3 {
font-size: 2.6em;
}
.footer ul li {
font-size: 0.9em;
}
.social-icons ul li a {
background-position:-2px -2px;
height: 35px;
width: 35px;
background-size: 132%;
}
.social-icons ul li a.fb {
background-position: -2px -46px;
}
.social-icons ul li a.in {
background-position: 0px -90px;
}
.social-icons ul li a.dott {
background-position: -2px -134px;
}
.banner.about-banner {
min-height: 165px;
}
.about-left {
float: none;
width: 100%;
padding: 0 6em;
}
.about-right {
float: none;
width: 100%;
margin-top: 2em;
}
.team {
padding: 3em 0;
}
h3.title {
margin-bottom: 0.6em;
}
.news-grid a {
font-size: 2em;
}
.b-wrapper h5 {
font-size: 2.5em;
}
.blog-right h4 {
font-size: 1.8em;
}
.blog-left h6 {
font-size: 2em;
}
.more a:hover:before {
height: 95%;
}
.article-links ul li {
font-size: 0.9em;
}
.article-links ul {
padding: 1em 0;
}
.article-links ul li {
padding-left: 1em;
}
.admin-text h5 {
font-size: 1.5em;
}
.admin-text-right p {
font-size: 0.9em;
}
.comment-grid-top h3, .artical-commentbox h3, .related-posts h3 {
font-size: 2.5em;
}
.top-comment-right p {
font-size: 0.9em;
}
.table-form textarea {
min-height: 120px;
}
}
@media(max-width:480px){
.bnr-text .bnr-title {
font-size: 1.8em;
}
.bnr-text p {
width: 83%;
}
.bnr-text a.more {
padding: 0.5em 1em;
border-width: 1px;
}
.banner {
background-position: -75px 0px;
min-height: 443px;
}
.bnr-text {
margin-top: 3em;
}
.bnr-text {
margin-top: 3em;
}
h3.title {
font-size: 3em;
}
.welcome, .reservation, .about, .news, .codes, .blog, .single, .gallery, .contact {
padding: 3em 0;
}
.welcome-left {
float: none;
width: 61%;
min-height: 300px;
}
.welcome-right {
float: none;
width: 100%;
padding: 0;
margin-top: 1.5em;
}
.menu-info {
width: 85%;
padding: 3em 0;
}
.book-left {
padding: 2em;
float: none;
width: 100%;
}
.book-info h5 {
font-size: 1.6em;
}
.book-right {
width: 100%;
float: none;
padding: 2em 2em;
margin-top: 1em;
}
.book-right label {
font-size: 1.8em;
}
.footer {
padding: 3em 0;
}
.footer-grids {
float: none;
width: 100%;
}
.footer-grids.footer-address {
padding: 0 1em;
}
.footer-grids:nth-child(2), .footer-grids:nth-child(3) {
margin-top: 2em;
}
.footer-grd {
width: 21%;
}
.subscribe input[type="submit"] {
width: 14%;
}
.top-nav span.menu {
margin-right: 0;
}
.social-icons.team-icons {
left: 2px;
}
.thumbnail.team-thmnl {
border: 5px solid #fff;
}
.news-grid h5 {
font-size: 1.1em;
}
.banner.about-banner {
min-height: 140px;
}
.banner.about-banner .bnr-text {
margin-top: 2em;
}
.gallery-grids {
width: 50%;
float: left;
}
.gallery-grids.gallery-two {
width: 100%;
padding: 1em .5em;
}
.gallery-grids.gallery-grids-mdl {
margin: 0;
}
.gallery-grids:nth-child(6) {
padding-bottom: 0 !important;
}
.b-wrapper h5 {
margin-top: 3em;
}
.gallery-grids:nth-child(5), .gallery-grids:nth-child(8), .gallery-grids:nth-child(9) {
padding: 0 0.5em;
}
.article-links ul li {
padding-left: 2em;
}
.article-links ul li:last-child {
float: none;
margin-top: 1em;
}
.admin-text-left img {
width: 100%;
}
.thumbnail {
margin-bottom: 6px;
}
.related-grids {
padding: 0 .3em 0 0 !important;
}
.related-grids h5 {
font-size: 1.2em;
}
.top-comment-right {
width: 82%;
}
.address {
padding: 4em 0;
}
.contact iframe {
min-height: 200px;
}
.address-left ,.address-right{
float: none;
width: 100%;
padding: 0;
}
.address h4 {
font-size: 2.2em;
color: #fff;
margin-bottom: 0.5em;
}
.address-grid {
padding: 2em;
}
.address-right {
margin-top: 1em;
}
.address textarea {
min-height: 9em;
}
.address input[type="text"] {
margin-bottom: 1em;
}
.address-info {
padding: 1.5em;
}
}
@media(max-width:414px){
.bnr-text .bnr-title {
font-size: 1.5em;
}
.bnr-text {
margin-top: 2.5em;
}
.banner {
background-position: -22px 0px;
min-height: 408px;
}
.welcome, .reservation, .about, .news, .codes, .blog, .single, .gallery, .contact {
padding: 2em 0;
}
.welcome-left {
width: 75%;
}
.menu-form h3.title {
text-align: right;
margin-right: 1em;
}
span.burger {
width: 140px;
min-height: 105px;
bottom: 10px;
right: 19px;
}
.book-left {
padding: 2em 2em 3em;
}
.form-left,.form-right{
float: none;
width: 100%;
}
.book-right select.form-control {
margin-bottom: 1em;
}
.book-right input[type="text"], .book-right input[type="date"], .book-right input[type="time"] {
margin-bottom: 1em;
}
.banner.about-banner .bnr-text {
margin-top: 2.5em;
}
.header {
padding: 1.5em 0 0;
}
.about-left {
padding: 0;
}
.team {
padding: 2em 0;
}
.team-grids {
padding: 0 0.5em 1em;
}
.b-wrapper h5 {
margin-top: 2.5em;
}
.article-links ul li {
padding-left: 2em;
}
.article-links ul li:nth-child(3) {
padding-left: 0.5em;
margin: 1em 0 0;
}
.article-links ul li:last-child {
margin-top: 1em;
padding-left: 0.5em;
}
.admin-text-right p {
margin: 0 0 0.5em;
}
.blog-left {
width: 19%;
}
.blog-right {
width: 77%;
}
.related-grids {
padding: 0 1em 1em 0 !important;
width: 50%;
}
.top-comment-right ul li {
font-size: 1em;
}
.comments-top-top {
padding: 1em;
}
.table-form input[type="submit"], .table-form textarea, .table-form input[type="text"], .table-form input[type="email"] {
width: 100%;
}
.address input[type="submit"] {
padding: .6em 3em;
}
}
@media(max-width:375px){
.bnr-text p {
width: 100%;
}
.banner {
background-position: -55px 0px;
min-height: 455px;
}
.welcome-left {
width: 70%;
min-height: 250px;
}
.welcome-bars {
margin: 0 0 1.5em;
}
.menu-left {
width: 76%;
}
.scrollbar {
height: 230px;
}
h3.title {
font-size: 2.8em;
}
.footer {
padding: 2em 0;
}
.footer h3 {
font-size: 2.4em;
margin-bottom: 0.5em;
}
.about-right {
padding: 1.5em;
}
.team-grids {
float: none;
width: 90%;
margin: 0 auto;
}
}
@media(max-width:320px){
.bnr-text a.more {
font-size: 0.8em;
}
.bnr-text .bnr-title {
font-size: 1.4em;
}
.banner {
background-position: -51px 0px;
min-height: 412px;
}
.welcome-left {
width: 82%;
}
.welcome-bars {
padding-top: 1.8em;
}
.welcome-bars label {
top: -3px;
}
span.burger {
width: 115px;
min-height: 87px;
bottom: 10px;
right: 14px;
}
.book-right {
padding: 2em 1.5em;
}
.top-nav ul li a {
font-size: 1.3em;
}
.logo h1 a {
font-size: 1.2em;
}
.menu-left {
width: 74%;
}
.book-info h4 {
font-size: 2.3em;
}
h3.title {
margin-bottom: 0.4em;
}
.banner.about-banner {
min-height: 119px;
}
.banner.about-banner .bnr-text {
margin-top: 1.8em;
}
.gallery-grids {
padding: 0 .2em;
}
.b-wrapper h5 {
margin-top: 2.2em;
font-size: 2.2em;
}
.gallery-grids.gallery-two {
padding: 0.5em .2em;
}
.gallery-grids:nth-child(5), .gallery-grids:nth-child(8), .gallery-grids:nth-child(9) {
padding: 0 0.2em;
}
.blog-left h6 {
font-size: 1.5em;
}
.blog-left h5 {
font-size: 1em;
font-weight: 500;
}
.blog-right h4 {
font-size: 1.5em;
}
.blog-left {
padding: 1em .5em;
}
.blog-text {
padding: 1em;
}
.article-links ul li {
padding-left: 0.5em;
}
.admin-text {
margin: 1.5em 0 0;
}
.comment-grid-top h3, .artical-commentbox h3, .related-posts h3 {
margin: 0.6em 0 .3em;
}
.top-comment-right {
width: 84%;
margin-left: 0.5em;
}
.top-comment-right ul li {
font-size: 0.9em;
}
.contact iframe {
min-height: 160px;
}
.address {
padding: 2.5em 0;
}
.address-grid {
padding: 1.5em;
}
}
/*--//responsive-design---*/
/* UItoTop jQuery Plugin 1.2 | Matt Varone | http://www.mattvarone.com/web-design/uitotop-jquery-plugin */
(function($){$.fn.UItoTop=function(options){var defaults={text:'To Top',min:200,inDelay:600,outDelay:400,containerID:'toTop',containerHoverID:'toTopHover',scrollSpeed:1000,easingType:'linear'},settings=$.extend(defaults,options),containerIDhash='#'+settings.containerID,containerHoverIDHash='#'+settings.containerHoverID;$('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');$(containerIDhash).hide().on('click.UItoTop',function(){$('html, body').animate({scrollTop:0},settings.scrollSpeed,settings.easingType);$('#'+settings.containerHoverID,this).stop().animate({'opacity':0},settings.inDelay,settings.easingType);return false;}).prepend('<span id="'+settings.containerHoverID+'"></span>').hover(function(){$(containerHoverIDHash,this).stop().animate({'opacity':1},600,'linear');},function(){$(containerHoverIDHash,this).stop().animate({'opacity':0},700,'linear');});$(window).scroll(function(){var sd=$(window).scrollTop();if(typeof document.body.style.maxHeight==="undefined"){$(containerIDhash).css({'position':'absolute','top':sd+$(window).height()-50});}
if(sd>settings.min)
$(containerIDhash).fadeIn(settings.inDelay);else
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery);
/*
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
*
* Uses the built In easIng capabilities added In jQuery 1.1
* to offer multiple easIng options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend( jQuery.easing,
{
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
* jQuery FlexSlider v2.4.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 and later license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*
*/
/* ====================================================================================================================
* FONT-FACE
* ====================================================================================================================*/
@font-face {
font-family: 'flexslider-icon';
src: url('../fonts/webfont/flexslider-icon.eot');
src: url('../fonts/webfonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../fonts/webfonts/flexslider-icon.woff') format('woff'), url('../fonts/webfonts/flexslider-icon.ttf') format('truetype'), url('../fonts/webfonts/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* ====================================================================================================================
* RESETS
* ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* ====================================================================================================================
* BASE STYLES
* ====================================================================================================================*/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
}
/* ====================================================================================================================
* DEFAULT THEME
* ====================================================================================================================*/
.flexslider {
position: relative;
padding: 1em;
zoom: 1;
overflow: hidden;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.carousel li {
margin-right: 5px;
}
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 40px;
height: 50px;
margin: -20px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-family: 'Glyphicons Halflings';
font-size: 35px;
display: inline-block;
content: '\e257';
color: #fff;
width: 40px;
text-align: center;
}
.flex-direction-nav a.flex-next:before {
content: '\e258';
}
.flex-direction-nav .flex-prev {
left: -50px;
}
.flex-direction-nav .flex-next {
right: -50px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 30px;
background: #E88010;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 30px;
background: #E88010;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 20px;
display: inline-block;
content: '\f004';
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a .flex-play:before {
content: '\f003';
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: 50px;
text-align: center;
display: none;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #1CBB9B;
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: rgba(255, 255, 255, 0.72);
}
.flex-control-paging li a.flex-active {
background: #fff;
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
/* ====================================================================================================================
* RESPONSIVE
* ====================================================================================================================*/
@media screen and (max-width: 1024px) {
.flexslider:hover .flex-direction-nav .flex-prev {
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next {
right: 10px;
}
}
@media screen and (max-width: 480px) {
.flexslider:hover .flex-direction-nav .flex-prev {
left: -3px;
}
.flexslider:hover .flex-direction-nav .flex-next {
right: -3px;
}
}
@media screen and (max-width: 414px) {
.flexslider {
padding: 1em 0 0.5em;
}
.flex-direction-nav a:before {
font-size: 25px;
width: 30px;
}
.flex-direction-nav a {
width: 30px;
height: 37px;
top: 57%;
}
.flexslider:hover .flex-direction-nav .flex-prev {
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next {
right: 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right:0px;
}
}
@media screen and (max-width: 375px) {
.flex-control-nav {
bottom: 20px;
}
}
@media screen and (max-width: 320px) {
.flexslider {
padding: 0.5em;
}
}
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2013 Daniel Eden
*/
.animated {
-webkit-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
-moz-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms- transform: translateY(0);
-o- transform: translateY(0);
-moz- transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-moz- transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
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 {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes rubberBand {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
30% {
-webkit-transform: scaleX(1.25) scaleY(0.75);
-ms-transform: scaleX(1.25) scaleY(0.75);
transform: scaleX(1.25) scaleY(0.75);
}
40% {
-webkit-transform: scaleX(0.75) scaleY(1.25);
-ms-transform: scaleX(0.75) scaleY(1.25);
transform: scaleX(0.75) scaleY(1.25);
}
60% {
-webkit-transform: scaleX(1.15) scaleY(0.85);
-ms-transform: scaleX(1.15) scaleY(0.85);
transform: scaleX(1.15) scaleY(0.85);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
-o-transform: scale(.3);
-moz-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-o-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-ms-animation-name: bounceIn;
-o-animation-name: bounceIn;
-moz-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
}
@keyframes bounceOut {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-ms-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
-o-transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms- transform: translateX(0);
-o- transform: translateX(0);
-moz- transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
-o-transform: translateX(-2000px);
-moz-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
-o- transform: translateX(0);
-moz- transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-ms-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-ms-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
-ms-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
-ms-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) 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 {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@-webkit-keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes slideOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
transform: rotate(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: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
-webkit-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
-ms-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: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
-ms-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
100% {
-webkit-transform: translateY(700px);
-ms-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
-ms-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateY(-2000px);
transform: scale(.1) translateY(-2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateY(60px);
transform: scale(.475) translateY(60px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes zoomInDown {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateY(-2000px);
-ms-transform: scale(.1) translateY(-2000px);
transform: scale(.1) translateY(-2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateY(60px);
-ms-transform: scale(.475) translateY(60px);
transform: scale(.475) translateY(60px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateX(-2000px);
transform: scale(.1) translateX(-2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateX(48px);
transform: scale(.475) translateX(48px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes zoomInLeft {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateX(-2000px);
-ms-transform: scale(.1) translateX(-2000px);
transform: scale(.1) translateX(-2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateX(48px);
-ms-transform: scale(.475) translateX(48px);
transform: scale(.475) translateX(48px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateX(2000px);
transform: scale(.1) translateX(2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateX(-48px);
transform: scale(.475) translateX(-48px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes zoomInRight {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateX(2000px);
-ms-transform: scale(.1) translateX(2000px);
transform: scale(.1) translateX(2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateX(-48px);
-ms-transform: scale(.475) translateX(-48px);
transform: scale(.475) translateX(-48px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateY(2000px);
transform: scale(.1) translateY(2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateY(-60px);
transform: scale(.475) translateY(-60px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes zoomInUp {
0% {
opacity: 0;
-webkit-transform: scale(.1) translateY(2000px);
-ms-transform: scale(.1) translateY(2000px);
transform: scale(.1) translateY(2000px);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
60% {
opacity: 1;
-webkit-transform: scale(.475) translateY(-60px);
-ms-transform: scale(.475) translateY(-60px);
transform: scale(.475) translateY(-60px);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
opacity: 0;
-webkit-transform: scale(.3);
transform: scale(.3);
}
100% {
opacity: 0;
}
}
@keyframes zoomOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
opacity: 0;
-webkit-transform: scale(.3);
-ms-transform: scale(.3);
transform: scale(.3);
}
100% {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateY(-60px);
transform: scale(.475) translateY(-60px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateY(2000px);
transform: scale(.1) translateY(2000px);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateY(-60px);
-ms-transform: scale(.475) translateY(-60px);
transform: scale(.475) translateY(-60px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateY(2000px);
-ms-transform: scale(.1) translateY(2000px);
transform: scale(.1) translateY(2000px);
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateX(42px);
transform: scale(.475) translateX(42px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateX(-2000px);
transform: scale(.1) translateX(-2000px);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateX(42px);
-ms-transform: scale(.475) translateX(42px);
transform: scale(.475) translateX(42px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateX(-2000px);
-ms-transform: scale(.1) translateX(-2000px);
transform: scale(.1) translateX(-2000px);
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateX(-42px);
transform: scale(.475) translateX(-42px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateX(2000px);
transform: scale(.1) translateX(2000px);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateX(-42px);
-ms-transform: scale(.475) translateX(-42px);
transform: scale(.475) translateX(-42px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateX(2000px);
-ms-transform: scale(.1) translateX(2000px);
transform: scale(.1) translateX(2000px);
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateY(60px);
transform: scale(.475) translateY(60px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateY(-2000px);
transform: scale(.1) translateY(-2000px);
-webkit-transform-origin: center top;
transform-origin: center top;
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale(.475) translateY(60px);
-ms-transform: scale(.475) translateY(60px);
transform: scale(.475) translateY(60px);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
100% {
opacity: 0;
-webkit-transform: scale(.1) translateY(-2000px);
-ms-transform: scale(.1) translateY(-2000px);
transform: scale(.1) translateY(-2000px);
-webkit-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
