<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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hover Pack</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/hover_pack.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/hover_pack.js"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=cyrillic-ext,cyrillic,latin);
/* font-family: 'Open Sans', sans-serif; */
h2{
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
h3{
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size:15px;
}
.container{
width:960px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h2>Fade</h2>
<hr>
<div>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300"/>
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-fade b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Stroke</h2>
<hr>
<div>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Twist</h2>
<hr>
<div>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 1</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 2</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 3</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 5</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-twist b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 6</h2>
<p class="b-from-right b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Flip</h2>
<hr>
<div>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 1</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 2</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 3</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 4</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 5</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flip b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Flow</h2>
<hr>
<div>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 1</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 2</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 3</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 4</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 5</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2>Photo 6</h2>
<p class="b-opacity b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Box</h2>
<hr>
<div>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 1</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 4</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 5</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Stripe</h2>
<hr>
<div>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Apart</h2>
<hr>
<h3>Horisontal</h3>
<hr>
<div>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
<hr>
<h3>Vertical</h3>
<hr>
<div>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-vertical b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Diagonal</h2>
<hr>
<div>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-cw-90 b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-ccw-90 b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-cw-180 b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-ccw-180 b-animate b-delay09">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay03">Photo 4</h2>
<p class="b-from-left b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Opacity</h2>
<hr>
<div>
<a href="#" class="b-link-fade b-animate-go b-opacity-30">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Opacity 30 with fade effect.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go b-opacity-50">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Opacity 50 with stroke effect.</p>
</div>
</a>
<a href="#" class="b-link-flow b-animate-go b-opacity-70">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Opacity 70 with flow effect.</p>
</div>
</a>
<a href="#" class="b-link-box b-animate-go b-opacity-30">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-cw-90 b-animate b-delay03">Photo 4</h2>
<p class="b-ccw-180 b-animate b-delay06">Opacity 30 with box effect.</p>
</div>
</a>
<a href="#" class="b-link-stripe b-animate-go b-opacity-50">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Opacity 50 with stripe effect.</p>
</div>
</a>
<a href="#" class="b-link-diagonal b-animate-go b-opacity-70">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Opacity 70 with diagonal effect.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go b-opacity-30">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Opacity 30 with apart horizontal effect.</p>
</div>
</a>
<a href="#" class="b-link-apart-vertical b-animate-go b-opacity-50">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Opacity 50 with apart vertical effect.</p>
</div>
</a>
<a href="#" class="b-link-apart-horisontal b-animate-go b-opacity-70">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Opacity 70 with apart horizontal effect.</p>
</div>
</a>
</div>
</div>
<div class="container">
<h2>Text Animation</h2>
<hr>
<div>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-left b-animate b-delay06">Photo 1</h2>
<p class="b-from-left b-animate b-delay06">Also you can add different animation for text.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-bottom b-animate b-delay03">Photo 2</h2>
<p class="b-from-bottom b-animate b-delay09">Different delay for header and text.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 3</h2>
<p class="b-from-bottom b-animate b-delay03">Different direction for header and text.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-cw-90 b-animate b-delay03">Photo 4</h2>
<p class="b-ccw-180 b-animate b-delay06">Text rotation</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-scale b-animate b-delay06">Photo 5</h2>
<p class="b-scale b-animate b-delay06">Very simple to use.</p>
</div>
</a>
<a href="#" class="b-link-stroke b-animate-go">
<img src="https://dummyimage.com/300" />
<div class="b-wrapper">
<h2 class="b-from-top b-animate b-delay03">Photo 6</h2>
<p class="b-opacity b-animate b-delay06">Try it!</p>
</div>
</a>
</div>
</div>
<div style="height:100px;"></div>
</body>
</html>
.safari5 *{
-webkit-transform: none !important;
-webkit-transition: none !important;
}
/*-----------------------------------------------------------------------------------*/
/* Fade
/*-----------------------------------------------------------------------------------*/
.b-link-fade{
position: relative;
display: inline-block;
vertical-align: top;
margin-bottom: 5px;
}
.b-link-fade .b-wrapper{z-index:1;}
.b-link-fade .b-top-line{z-index:0}
.b-link-fade .b-wrapper, .b-link-fade .b-top-line{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
visibility:hidden; /* lt-ie9 */
}
.b-link-fade .b-top-line{
background: #74c9be;
}
.b-link-fade .b-wrapper, .b-link-fade .b-top-line{
transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
overflow: hidden;
opacity:0;
}
.b-link-fade:hover .b-wrapper, .b-link-fade:hover .b-top-line{
opacity:1;
visibility:visible; /* lt-ie9 */
}
/*-----------------------------------------------------------------------------------*/
/* Flow
/*-----------------------------------------------------------------------------------*/
.b-link-flow{
position: relative;
display: inline-block;
vertical-align: top;
margin-bottom: 5px;
}
.b-link-flow .b-wrapper{z-index:1;}
.b-link-flow .b-top-line{z-index:0}
.b-link-flow .b-wrapper, .b-link-flow .b-top-line{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
visibility:hidden; /* lt-ie9 */
}
.b-link-flow .b-top-line{
background: #74c9be;
}
.b-link-flow .b-wrapper, .b-link-flow .b-top-line{
transition:all 0.6s ease;
-moz-transition:all 0.6s ease;
-ms-transition:all 0.6s ease;
-o-transition:all 0.6s ease;
-webkit-transition:all 0.6s ease;
transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
-webkit-transform:scale(0);
opacity:0;
}
.b-link-flow:hover .b-wrapper, .b-link-flow:hover .b-top-line{
transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
-webkit-transform:scale(1);
opacity:1;
visibility:visible; /* lt-ie9 */
}
/*-----------------------------------------------------------------------------------*/
/* Stroke
/*-----------------------------------------------------------------------------------*/
.b-link-stroke{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
overflow:hidden;
margin-bottom: 5px;
}
.b-link-stroke .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
}
.b-link-stroke .b-top-line{
position:absolute;
top:-100%;
left:0;
width:50%;
height:100%;
background: #74c9be;
}
.b-link-stroke .b-bottom-line{
position:absolute;
bottom:-100%;
right:0;
width:50%;
height:100%;
background: #74c9be;
}
.b-link-stroke .b-top-line, .b-link-stroke .b-bottom-line{
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
.b-link-stroke:hover .b-top-line{
top:0;
}
.b-link-stroke:hover .b-bottom-line{
bottom:0;
}
/*-----------------------------------------------------------------------------------*/
/* Twist
/*-----------------------------------------------------------------------------------*/
.b-link-twist{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
}
.b-link-twist .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
}
.b-link-twist .b-top-line{
position:absolute;
top:0;
left:1px;
width:50%;
height:100%;
background: #74c9be;
transform: perspective(400px) rotate3d(180,0,0,0deg);
-webkit-transform: perspective(400px) rotate3d(180,0,0,0deg);
-moz-transform: perspective(400px) rotate3d(180,0,0,0deg);
-o-transform: perspective(400px) rotate3d(180,0,0,0deg);
-ms-transform: perspective(400px) rotate3d(180,0,0,0deg);
}
.b-link-twist .b-bottom-line{
position:absolute;
bottom:0;
right:0px;
width:50%;
height:100%;
background: #74c9be;
transform: perspective(400px) rotate3d(180,0,0,0deg);
-webkit-transform: perspective(400px) rotate3d(180,0,0,0deg);
-moz-transform: perspective(400px) rotate3d(180,0,0,0deg);
-o-transform: perspective(400px) rotate3d(180,0,0,0deg);
-ms-transform: perspective(400px) rotate3d(180,0,0,0deg);
}
.b-link-twist .b-top-line{
transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
background-position:left top;
}
.b-link-twist .b-bottom-line{
transition:all 1s 0.1s;
-moz-transition:all 1s 0.1s;
-ms-transition:all 1s 0.1s;
-o-transition:all 1s 0.1s;
-webkit-transition:all 1s 0.1s;
background-position:right top;
}
.b-link-twist:hover .b-top-line{
transform: perspective(400px) rotate3d(180,0,0,180deg);
-webkit-transform: perspective(400px) rotate3d(180,0,0,180deg);
-moz-transform: perspective(400px) rotate3d(180,0,0,180deg);
-o-transform: perspective(400px) rotate3d(180,0,0,180deg);
-ms-transform: perspective(400px) rotate3d(180,0,0,180deg);
}
.b-link-twist:hover .b-bottom-line{
transform: perspective(400px) rotate3d(180,0,0,-180deg);
-webkit-transform: perspective(400px) rotate3d(180,0,0,-180deg);
-moz-transform: perspective(400px) rotate3d(180,0,0,-180deg);
-o-transform: perspective(400px) rotate3d(180,0,0,-180deg);
-ms-transform: perspective(400px) rotate3d(180,0,0,-180deg);
}
.b-link-twist .b-top-line b, .b-link-twist .b-bottom-line b{
transition:all 0.3s 0.2s;
-moz-transition:all 0.3s 0.2s;
-ms-transition:all 0.3s 0.2s;
-o-transition:all 0.3s 0.2s;
-webkit-transition:all 0.3s 0.2s;
position:absolute;
top:0;
left:0;
width:101%;
height:100%;
}
.b-link-twist:hover .b-top-line b, .b-link-twist:hover .b-bottom-line b{
background: #74c9be;
height:100%;
}
/*-----------------------------------------------------------------------------------*/
/* Flip
/*-----------------------------------------------------------------------------------*/
.b-link-flip{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
background: #74c9be;
}
.b-link-flip .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
z-index:1;
visibility:hidden; /* lt-ie9 */
}
/* lt-ie9 */
.b-link-flip:hover .b-wrapper{
visibility:visible;
}
.b-link-flip .b-top-line{
position:absolute;
top:0px;
left:0;
width:100%;
height:50%;
background: #74c9be;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.safari5 .b-link-flip .b-top-line{
height:100%
}
.b-link-flip .b-bottom-line{
position:absolute;
bottom:0px;
right:0;
width:100%;
height:50%;
background: #74c9be;
}
.b-link-flip .b-top-line{
transition:all 1s;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
background-position:left top;
z-index:1;
}
.b-link-flip .b-bottom-line{
background-position:left bottom;
z-index:0;
}
.b-link-flip:hover .b-top-line{
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
-o-transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(400px) rotateX(-180deg) rotateY(0deg) rotateZ(0deg);
}
.b-link-flip .b-top-line b{
transition:all 0.3s 0.2s;
-moz-transition:all 0.3s 0.2s;
-ms-transition:all 0.3s 0.2s;
-o-transition:all 0.3s 0.2s;
-webkit-transition:all 0.3s 0.2s;
}
.b-link-flip .b-top-line b, .b-link-flip .b-bottom-line b{
height:101%;
position:absolute;
top:0;
left:0;
width:100%;
}
.b-link-flip:hover .b-top-line b{
background: #74c9be;
}
.lt-ie10 .b-link-flip:hover .b-bottom-line b{
background: #74c9be;
}
/*-----------------------------------------------------------------------------------*/
/* Box
/*-----------------------------------------------------------------------------------*/
.b-link-box{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
overflow:hidden;
}
.b-link-box .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
}
.b-link-box .b-top-line{
position: absolute;
left: 0;
top: -5%;
right: 0;
bottom: -5%;
transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
border: 30px solid #74c9be;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
visibility:hidden; /* lt-ie9 */
}
.b-link-box .b-bottom-line{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-webkit-transition:all 0.3s linear;
visibility:hidden; /* lt-ie9 */
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
background: #74c9be;
}
.b-link-box:hover .b-top-line{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
visibility:visible; /* lt-ie9 */
}
.b-link-box:hover .b-bottom-line{
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
visibility:visible; /* lt-ie9 */
}
/*-----------------------------------------------------------------------------------*/
/* Strip
/*-----------------------------------------------------------------------------------*/
.b-link-stripe{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
overflow:hidden;
}
.b-link-stripe .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
}
.b-link-stripe .b-line{
position:absolute;
top:0;
bottom:0;
width:20%;
background:#74c9be;
transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-ms-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
opacity:0;
visibility:hidden; /* lt-ie9 */
}
/* lt-ie9 */
.b-link-stripe:hover .b-line{
visibility:visible;
}
.b-link-stripe .b-line1{
left:0;
}
.b-link-stripe .b-line2{
left:20%;
transition-delay:0.1s !important;
-moz-transition-delay:0.1s !important;
-ms-transition-delay:0.1s !important;
-o-transition-delay:0.1s !important;
-webkit-transition-delay:0.1s !important;
}
.b-link-stripe .b-line3{
left:40%;
transition-delay:0.2s !important;
-moz-transition-delay:0.2s !important;
-ms-transition-delay:0.2s !important;
-o-transition-delay:0.2s !important;
-webkit-transition-delay:0.2s !important;
}
.b-link-stripe .b-line4{
left:60%;
transition-delay:0.3s !important;
-moz-transition-delay:0.3s !important;
-ms-transition-delay:0.3s !important;
-o-transition-delay:0.3s !important;
-webkit-transition-delay:0.3s !important;
}
.b-link-stripe .b-line5{
left:80%;
transition-delay:0.4s !important;
-moz-transition-delay:0.4s !important;
-ms-transition-delay:0.4s !important;
-o-transition-delay:0.4s !important;
-webkit-transition-delay:0.4s !important;
}
.b-link-stripe:hover .b-line{
opacity:1;
}
/*-----------------------------------------------------------------------------------*/
/* Apart
/*-----------------------------------------------------------------------------------*/
.b-link-apart-horisontal, .b-link-apart-vertical{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
overflow:hidden;
}
.b-link-apart-horisontal .b-wrapper, .b-link-apart-vertical .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
}
.b-link-apart-horisontal .b-top-line, .b-link-apart-horisontal .b-bottom-line,.b-link-apart-vertical .b-top-line, .b-link-apart-vertical .b-bottom-line {
position:absolute;
transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
}
.b-link-apart-horisontal .b-top-line-up, .b-link-apart-horisontal .b-bottom-line-up,.b-link-apart-vertical .b-top-line-up, .b-link-apart-vertical .b-bottom-line-up {
position:absolute;
transition:all 0.2s 0.2s linear;
-moz-transition:all 0.2s 0.2s linear;
-ms-transition:all 0.2s 0.2s linear;
-o-transition:all 0.2s 0.2s linear;
-webkit-transition:all 0.2s 0.2s linear;
}
/* Horisontal */
.b-link-apart-horisontal .b-top-line, .b-link-apart-horisontal .b-bottom-line{
height: 0.1%;
left:50%;
right:50%;
}
.b-link-apart-horisontal:hover .b-top-line, .b-link-apart-horisontal:hover .b-bottom-line{
left:0;
right:0;
}
.b-link-apart-horisontal .b-top-line-up, .b-link-apart-horisontal .b-bottom-line-up{
left:0;
right:0;
height:0;
}
.b-link-apart-horisontal:hover .b-top-line-up, .b-link-apart-horisontal:hover .b-bottom-line-up{
height: 50%;
}
/* Vertical */
.b-link-apart-vertical .b-top-line, .b-link-apart-vertical .b-bottom-line{
width: 0.1%;
top:50%;
bottom:50%;
}
.b-link-apart-vertical:hover .b-top-line, .b-link-apart-vertical:hover .b-bottom-line{
top:0;
bottom:0;
}
.b-link-apart-vertical .b-top-line-up, .b-link-apart-vertical .b-bottom-line-up{
top:0;
bottom:0;
width:0;
}
.b-link-apart-vertical:hover .b-top-line-up, .b-link-apart-vertical:hover .b-bottom-line-up{
width: 50%;
}
/* Horisontal */
.b-link-apart-horisontal .b-top-line, .b-link-apart-horisontal .b-top-line-up{
top:50%;
background:#74c9be;
}
.b-link-apart-horisontal .b-bottom-line, .b-link-apart-horisontal .b-bottom-line-up{
bottom:50%;
background:#74c9be;
}
/* Vertical */
.b-link-apart-vertical .b-top-line, .b-link-apart-vertical .b-top-line-up{
left:50%;
background:#74c9be;
}
.b-link-apart-vertical .b-bottom-line, .b-link-apart-vertical .b-bottom-line-up{
right:50%;
background:#74c9be;
}
/*-----------------------------------------------------------------------------------*/
/* Diagonal
/*-----------------------------------------------------------------------------------*/
.b-link-diagonal{
position:relative;
display:inline-block;
vertical-align:top;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin-bottom: 5px;
overflow:hidden;
}
.b-link-diagonal .b-wrapper{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
color:#fff;
overflow:hidden;
}
.b-link-diagonal .b-line-group{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
}
.b-link-diagonal .b-line{
position:absolute;
top: -90px;
bottom: -60px;
width:20%;
background:#74c9be;
transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
}
.b-link-diagonal .b-line1{
left: -10%;
width: 30%;
}
.b-link-diagonal .b-line2{
left:20%;
transition-delay:0.1s !important;
-moz-transition-delay:0.1s !important;
-ms-transition-delay:0.1s !important;
-o-transition-delay:0.1s !important;
-webkit-transition-delay:0.1s !important;
}
.b-link-diagonal .b-line3{
left:40%;
transition-delay:0.2s !important;
-moz-transition-delay:0.2s !important;
-ms-transition-delay:0.2s !important;
-o-transition-delay:0.2s !important;
-webkit-transition-delay:0.2s !important;
}
.b-link-diagonal .b-line4{
left:60%;
transition-delay:0.3s !important;
-moz-transition-delay:0.3s !important;
-ms-transition-delay:0.3s !important;
-o-transition-delay:0.3s !important;
-webkit-transition-delay:0.3s !important;
}
.b-link-diagonal .b-line5{
left: 80%;
width: 30%;
transition-delay:0.4s !important;
-moz-transition-delay:0.4s !important;
-ms-transition-delay:0.4s !important;
-o-transition-delay:0.4s !important;
-webkit-transition-delay:0.4s !important;
}
.b-link-diagonal .b-line1, .b-link-diagonal .b-line3, .b-link-diagonal .b-line5{
top: 130%;
}
.b-link-diagonal .b-line2, .b-link-diagonal .b-line4{
bottom: 130%;
}
.b-link-diagonal:hover .b-line1, .b-link-diagonal:hover .b-line3, .b-link-diagonal:hover .b-line5{
top: -90px;
}
.b-link-diagonal:hover .b-line2, .b-link-diagonal:hover .b-line4{
bottom: -60px;
}
/*-----------------------------------------------------------------------------------*/
/* Delay
/*-----------------------------------------------------------------------------------*/
.b-delay03{
transition-delay:0.3s !important;
-moz-transition-delay:0.3s !important;
-ms-transition-delay:0.3s !important;
-o-transition-delay:0.3s !important;
-webkit-transition-delay:0.3s !important;
}
.b-delay06{
transition-delay:0.6s !important;
-moz-transition-delay:0.6s !important;
-ms-transition-delay:0.6s !important;
-o-transition-delay:0.6s !important;
-webkit-transition-delay:0.6s !important;
}
.b-delay09{
transition-delay:0.9s !important;
-moz-transition-delay:0.9s !important;
-ms-transition-delay:0.9s !important;
-o-transition-delay:0.9s !important;
-webkit-transition-delay:0.9s !important;
}
.b-delay12{
transition-delay:1.2s !important;
-moz-transition-delay:1.2s !important;
-ms-transition-delay:1.2s !important;
-o-transition-delay:1.2s !important;
-webkit-transition-delay:1.2s !important;
}
.b-delay15{
transition-delay:1.5s !important;
-moz-transition-delay:1.5s !important;
-ms-transition-delay:1.5s !important;
-o-transition-delay:1.5s !important;
-webkit-transition-delay:1.5s !important;
}
/*-----------------------------------------------------------------------------------*/
/* Animation effects
/*-----------------------------------------------------------------------------------*/
.b-animate-go{
text-decoration:none;
}
.b-animate{
transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
visibility:hidden; /* lt-ie9 */
}
/* lt-ie9 */
.b-animate-go:hover .b-animate{
visibility:visible;
}
.b-from-left{
position:relative;
left:-100%;
}
.b-animate-go:hover .b-from-left{
left:0;
}
.b-from-right{
position:relative;
right:-100%;
}
.b-animate-go:hover .b-from-right{
right:0;
}
.b-from-top{
position:relative;
top:-100%;
}
.b-animate-go:hover .b-from-top{
top:0;
}
.b-from-bottom{
position:relative;
bottom:-100%;
}
.b-animate-go:hover .b-from-bottom{
bottom:0;
}
.b-scale{
position:relative;
transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
-webkit-transform:scale(0);
}
.b-animate-go:hover .b-scale{
transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
-webkit-transform:scale(1);
}
.b-opacity{
opacity:0;
}
.b-animate-go:hover .b-opacity{
opacity:1;
}
.b-animate-go:hover .b-cw-90,.b-animate-go:hover .b-cw-180,.b-animate-go:hover .b-ccw-90,.b-animate-go:hover .b-ccw-180{
transform:rotate(0);
-moz-transform:rotate(0);
-ms-transform:rotate(0);
-o-transform:rotate(0);
-webkit-transform:rotate(0);
}
.b-animate-go .b-cw-90{
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.b-animate-go .b-cw-180{
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
.b-animate-go .b-ccw-90{
transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.b-animate-go .b-ccw-180{
transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-ms-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
}
/*-----------------------------------------------------------------------------------*/
/* Transparency
/*-----------------------------------------------------------------------------------*/
.b-opacity-10:hover .b-top-line,
.b-opacity-10:hover .b-top-line-up,
.b-opacity-10:hover .b-bottom-line,
.b-opacity-10:hover .b-bottom-line-up,
.b-opacity-10:hover .b-line1,
.b-opacity-10:hover .b-line2,
.b-opacity-10:hover .b-line3,
.b-opacity-10:hover .b-line4,
.b-opacity-10:hover .b-line5
{
opacity: .1;
}
.b-opacity-20:hover .b-top-line,
.b-opacity-20:hover .b-top-line-up,
.b-opacity-20:hover .b-bottom-line,
.b-opacity-20:hover .b-bottom-line-up,
.b-opacity-20:hover .b-line1,
.b-opacity-20:hover .b-line2,
.b-opacity-20:hover .b-line3,
.b-opacity-20:hover .b-line4,
.b-opacity-20:hover .b-line5
{
opacity: .2;
}
.b-opacity-30:hover .b-top-line,
.b-opacity-30:hover .b-top-line-up,
.b-opacity-30:hover .b-bottom-line,
.b-opacity-30:hover .b-bottom-line-up,
.b-opacity-30:hover .b-line1,
.b-opacity-30:hover .b-line2,
.b-opacity-30:hover .b-line3,
.b-opacity-30:hover .b-line4,
.b-opacity-30:hover .b-line5
{
opacity: .3;
}
.b-opacity-40:hover .b-top-line,
.b-opacity-40:hover .b-top-line-up,
.b-opacity-40:hover .b-bottom-line,
.b-opacity-40:hover .b-bottom-line-up,
.b-opacity-40:hover .b-line1,
.b-opacity-40:hover .b-line2,
.b-opacity-40:hover .b-line3,
.b-opacity-40:hover .b-line4,
.b-opacity-40:hover .b-line5
{
opacity: .4;
}
.b-opacity-50:hover .b-top-line,
.b-opacity-50:hover .b-top-line-up,
.b-opacity-50:hover .b-bottom-line,
.b-opacity-50:hover .b-bottom-line-up,
.b-opacity-50:hover .b-line1,
.b-opacity-50:hover .b-line2,
.b-opacity-50:hover .b-line3,
.b-opacity-50:hover .b-line4,
.b-opacity-50:hover .b-line5
{
opacity: .5;
}
.b-opacity-60:hover .b-top-line,
.b-opacity-60:hover .b-top-line-up,
.b-opacity-60:hover .b-bottom-line,
.b-opacity-60:hover .b-bottom-line-up,
.b-opacity-60:hover .b-line1,
.b-opacity-60:hover .b-line2,
.b-opacity-60:hover .b-line3,
.b-opacity-60:hover .b-line4,
.b-opacity-60:hover .b-line5
{
opacity: .6;
}
.b-opacity-70:hover .b-top-line,
.b-opacity-70:hover .b-top-line-up,
.b-opacity-70:hover .b-bottom-line,
.b-opacity-70:hover .b-bottom-line-up,
.b-opacity-70:hover .b-line1,
.b-opacity-70:hover .b-line2,
.b-opacity-70:hover .b-line3,
.b-opacity-70:hover .b-line4,
.b-opacity-70:hover .b-line5
{
opacity: .7;
}
.b-opacity-80:hover .b-top-line,
.b-opacity-80:hover .b-top-line-up,
.b-opacity-80:hover .b-bottom-line,
.b-opacity-80:hover .b-bottom-line-up,
.b-opacity-80:hover .b-line1,
.b-opacity-80:hover .b-line2,
.b-opacity-80:hover .b-line3,
.b-opacity-80:hover .b-line4,
.b-opacity-80:hover .b-line5
{
opacity: .8;
}
.b-opacity-90:hover .b-top-line,
.b-opacity-90:hover .b-top-line-up,
.b-opacity-90:hover .b-bottom-line,
.b-opacity-90:hover .b-bottom-line-up,
.b-opacity-90:hover .b-line1,
.b-opacity-90:hover .b-line2,
.b-opacity-90:hover .b-line3,
.b-opacity-90:hover .b-line4,
.b-opacity-90:hover .b-line5
{
opacity: .9;
}
/* Disable transparency for twist and flip */
.b-link-twist.b-opacity-10:hover .b-top-line,
.b-link-twist.b-opacity-10:hover .b-top-line-up,
.b-link-twist.b-opacity-10:hover .b-bottom-line,
.b-link-twist.b-opacity-10:hover .b-bottom-line-up,
.b-link-twist.b-opacity-10:hover .b-line1,
.b-link-twist.b-opacity-10:hover .b-line2,
.b-link-twist.b-opacity-10:hover .b-line3,
.b-link-twist.b-opacity-10:hover .b-line4,
.b-link-twist.b-opacity-10:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-20:hover .b-top-line,
.b-link-twist.b-opacity-20:hover .b-top-line-up,
.b-link-twist.b-opacity-20:hover .b-bottom-line,
.b-link-twist.b-opacity-20:hover .b-bottom-line-up,
.b-link-twist.b-opacity-20:hover .b-line1,
.b-link-twist.b-opacity-20:hover .b-line2,
.b-link-twist.b-opacity-20:hover .b-line3,
.b-link-twist.b-opacity-20:hover .b-line4,
.b-link-twist.b-opacity-20:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-30:hover .b-top-line,
.b-link-twist.b-opacity-30:hover .b-top-line-up,
.b-link-twist.b-opacity-30:hover .b-bottom-line,
.b-link-twist.b-opacity-30:hover .b-bottom-line-up,
.b-link-twist.b-opacity-30:hover .b-line1,
.b-link-twist.b-opacity-30:hover .b-line2,
.b-link-twist.b-opacity-30:hover .b-line3,
.b-link-twist.b-opacity-30:hover .b-line4,
.b-link-twist.b-opacity-30:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-40:hover .b-top-line,
.b-link-twist.b-opacity-40:hover .b-top-line-up,
.b-link-twist.b-opacity-40:hover .b-bottom-line,
.b-link-twist.b-opacity-40:hover .b-bottom-line-up,
.b-link-twist.b-opacity-40:hover .b-line1,
.b-link-twist.b-opacity-40:hover .b-line2,
.b-link-twist.b-opacity-40:hover .b-line3,
.b-link-twist.b-opacity-40:hover .b-line4,
.b-link-twist.b-opacity-40:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-50:hover .b-top-line,
.b-link-twist.b-opacity-50:hover .b-top-line-up,
.b-link-twist.b-opacity-50:hover .b-bottom-line,
.b-link-twist.b-opacity-50:hover .b-bottom-line-up,
.b-link-twist.b-opacity-50:hover .b-line1,
.b-link-twist.b-opacity-50:hover .b-line2,
.b-link-twist.b-opacity-50:hover .b-line3,
.b-link-twist.b-opacity-50:hover .b-line4,
.b-link-twist.b-opacity-50:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-60:hover .b-top-line,
.b-link-twist.b-opacity-60:hover .b-top-line-up,
.b-link-twist.b-opacity-60:hover .b-bottom-line,
.b-link-twist.b-opacity-60:hover .b-bottom-line-up,
.b-link-twist.b-opacity-60:hover .b-line1,
.b-link-twist.b-opacity-60:hover .b-line2,
.b-link-twist.b-opacity-60:hover .b-line3,
.b-link-twist.b-opacity-60:hover .b-line4,
.b-link-twist.b-opacity-60:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-70:hover .b-top-line,
.b-link-twist.b-opacity-70:hover .b-top-line-up,
.b-link-twist.b-opacity-70:hover .b-bottom-line,
.b-link-twist.b-opacity-70:hover .b-bottom-line-up,
.b-link-twist.b-opacity-70:hover .b-line1,
.b-link-twist.b-opacity-70:hover .b-line2,
.b-link-twist.b-opacity-70:hover .b-line3,
.b-link-twist.b-opacity-70:hover .b-line4,
.b-link-twist.b-opacity-70:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-80:hover .b-top-line,
.b-link-twist.b-opacity-80:hover .b-top-line-up,
.b-link-twist.b-opacity-80:hover .b-bottom-line,
.b-link-twist.b-opacity-80:hover .b-bottom-line-up,
.b-link-twist.b-opacity-80:hover .b-line1,
.b-link-twist.b-opacity-80:hover .b-line2,
.b-link-twist.b-opacity-80:hover .b-line3,
.b-link-twist.b-opacity-80:hover .b-line4,
.b-link-twist.b-opacity-80:hover .b-line5
{
opacity: 1;
}
.b-link-twist.b-opacity-90:hover .b-top-line,
.b-link-twist.b-opacity-90:hover .b-top-line-up,
.b-link-twist.b-opacity-90:hover .b-bottom-line,
.b-link-twist.b-opacity-90:hover .b-bottom-line-up,
.b-link-twist.b-opacity-90:hover .b-line1,
.b-link-twist.b-opacity-90:hover .b-line2,
.b-link-twist.b-opacity-90:hover .b-line3,
.b-link-twist.b-opacity-90:hover .b-line4,
.b-link-twist.b-opacity-90:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-10:hover .b-top-line,
.b-link-flip.b-opacity-10:hover .b-top-line-up,
.b-link-flip.b-opacity-10:hover .b-bottom-line,
.b-link-flip.b-opacity-10:hover .b-bottom-line-up,
.b-link-flip.b-opacity-10:hover .b-line1,
.b-link-flip.b-opacity-10:hover .b-line2,
.b-link-flip.b-opacity-10:hover .b-line3,
.b-link-flip.b-opacity-10:hover .b-line4,
.b-link-flip.b-opacity-10:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-20:hover .b-top-line,
.b-link-flip.b-opacity-20:hover .b-top-line-up,
.b-link-flip.b-opacity-20:hover .b-bottom-line,
.b-link-flip.b-opacity-20:hover .b-bottom-line-up,
.b-link-flip.b-opacity-20:hover .b-line1,
.b-link-flip.b-opacity-20:hover .b-line2,
.b-link-flip.b-opacity-20:hover .b-line3,
.b-link-flip.b-opacity-20:hover .b-line4,
.b-link-flip.b-opacity-20:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-30:hover .b-top-line,
.b-link-flip.b-opacity-30:hover .b-top-line-up,
.b-link-flip.b-opacity-30:hover .b-bottom-line,
.b-link-flip.b-opacity-30:hover .b-bottom-line-up,
.b-link-flip.b-opacity-30:hover .b-line1,
.b-link-flip.b-opacity-30:hover .b-line2,
.b-link-flip.b-opacity-30:hover .b-line3,
.b-link-flip.b-opacity-30:hover .b-line4,
.b-link-flip.b-opacity-30:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-40:hover .b-top-line,
.b-link-flip.b-opacity-40:hover .b-top-line-up,
.b-link-flip.b-opacity-40:hover .b-bottom-line,
.b-link-flip.b-opacity-40:hover .b-bottom-line-up,
.b-link-flip.b-opacity-40:hover .b-line1,
.b-link-flip.b-opacity-40:hover .b-line2,
.b-link-flip.b-opacity-40:hover .b-line3,
.b-link-flip.b-opacity-40:hover .b-line4,
.b-link-flip.b-opacity-40:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-50:hover .b-top-line,
.b-link-flip.b-opacity-50:hover .b-top-line-up,
.b-link-flip.b-opacity-50:hover .b-bottom-line,
.b-link-flip.b-opacity-50:hover .b-bottom-line-up,
.b-link-flip.b-opacity-50:hover .b-line1,
.b-link-flip.b-opacity-50:hover .b-line2,
.b-link-flip.b-opacity-50:hover .b-line3,
.b-link-flip.b-opacity-50:hover .b-line4,
.b-link-flip.b-opacity-50:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-60:hover .b-top-line,
.b-link-flip.b-opacity-60:hover .b-top-line-up,
.b-link-flip.b-opacity-60:hover .b-bottom-line,
.b-link-flip.b-opacity-60:hover .b-bottom-line-up,
.b-link-flip.b-opacity-60:hover .b-line1,
.b-link-flip.b-opacity-60:hover .b-line2,
.b-link-flip.b-opacity-60:hover .b-line3,
.b-link-flip.b-opacity-60:hover .b-line4,
.b-link-flip.b-opacity-60:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-70:hover .b-top-line,
.b-link-flip.b-opacity-70:hover .b-top-line-up,
.b-link-flip.b-opacity-70:hover .b-bottom-line,
.b-link-flip.b-opacity-70:hover .b-bottom-line-up,
.b-link-flip.b-opacity-70:hover .b-line1,
.b-link-flip.b-opacity-70:hover .b-line2,
.b-link-flip.b-opacity-70:hover .b-line3,
.b-link-flip.b-opacity-70:hover .b-line4,
.b-link-flip.b-opacity-70:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-80:hover .b-top-line,
.b-link-flip.b-opacity-80:hover .b-top-line-up,
.b-link-flip.b-opacity-80:hover .b-bottom-line,
.b-link-flip.b-opacity-80:hover .b-bottom-line-up,
.b-link-flip.b-opacity-80:hover .b-line1,
.b-link-flip.b-opacity-80:hover .b-line2,
.b-link-flip.b-opacity-80:hover .b-line3,
.b-link-flip.b-opacity-80:hover .b-line4,
.b-link-flip.b-opacity-80:hover .b-line5
{
opacity: 1;
}
.b-link-flip.b-opacity-90:hover .b-top-line,
.b-link-flip.b-opacity-90:hover .b-top-line-up,
.b-link-flip.b-opacity-90:hover .b-bottom-line,
.b-link-flip.b-opacity-90:hover .b-bottom-line-up,
.b-link-flip.b-opacity-90:hover .b-line1,
.b-link-flip.b-opacity-90:hover .b-line2,
.b-link-flip.b-opacity-90:hover .b-line3,
.b-link-flip.b-opacity-90:hover .b-line4,
.b-link-flip.b-opacity-90:hover .b-line5
{
opacity: 1;
}
$(document).ready(function(){
/* Slide */
$('#slide a').each(function(index, element) {
$(this).hoverdir();
});
/* Stroke */
$('.b-link-stroke').prepend('<div class="b-top-line"></div>');
$('.b-link-stroke').prepend('<div class="b-bottom-line"></div>');
/* Twist */
$('.b-link-twist').prepend('<div class="b-top-line"><b></b></div>');
$('.b-link-twist').prepend('<div class="b-bottom-line"><b></b></div>');
$('.b-link-twist img').each(function(index, element) {
$(this).css('visibility','hidden');
$(this).parent().find('.b-top-line, .b-bottom-line').css('background-image','url('+$(this).attr('src')+')');
});
/* Flip */
$('.b-link-flip').prepend('<div class="b-top-line"><b></b></div>');
$('.b-link-flip').prepend('<div class="b-bottom-line"><b></b></div>');
$('.b-link-flip img').each(function(index, element) {
$(this).css('visibility','hidden');
$(this).parent().find('.b-top-line, .b-bottom-line').css('background-image','url('+$(this).attr('src')+')');
});
/* Fade */
$('.b-link-fade').each(function(index, element) {
$(this).append('<div class="b-top-line"></div>')
});
/* Flow */
$('.b-link-flow').each(function(index, element) {
$(this).append('<div class="b-top-line"></div>')
});
/* Box */
$('.b-link-box').prepend('<div class="b-top-line"></div>');
$('.b-link-box').prepend('<div class="b-bottom-line"></div>');
/* Stripe */
$('.b-link-stripe').each(function(index, element) {
$(this).prepend('<div class="b-line b-line1"></div><div class="b-line b-line2"></div><div class="b-line b-line3"></div><div class="b-line b-line4"></div><div class="b-line b-line5"></div>');
});
/* Apart */
$('.b-link-apart-vertical, .b-link-apart-horisontal').each(function(index, element) {
$(this).prepend('<div class="b-top-line"></div><div class="b-bottom-line"></div><div class="b-top-line-up"></div><div class="b-bottom-line-up"></div>');
});
/* diagonal */
$('.b-link-diagonal').each(function(index, element) {
$(this).prepend('<div class="b-line-group"><div class="b-line b-line1"></div><div class="b-line b-line2"></div><div class="b-line b-line3"></div><div class="b-line b-line4"></div><div class="b-line b-line5"></div></div>');
});
setTimeout("calculate_margin();", 100);
});
var count_calc_margin = 0;
function calculate_margin() {
// Vertical alignment
$('.b-animate-go .b-wrapper').each(function(i, v){
var this_h = $(v).outerHeight();
var el_h = 0;
var m_t = 0;
var m_b = 0;
var el_len = $(v).children().length;
$(v).children().each(function(ii, vv){
el_h += $(vv).outerHeight();
if(ii > 0) {
m_t += parseInt($(vv).css('margin-top'));
}
if((ii+1) <= el_len-1) {
m_b += parseInt($(vv).css('margin-bottom'));
}
});
var set_mar = parseInt((this_h/2)-((m_t+m_b+el_h)/2));
if(set_mar > 0) {
$(v).children().first().css('margin-top', set_mar);
} else {
if(count_calc_margin < 5) {
count_calc_margin++;
setTimeout("calculate_margin();", 100);
}
}
});
}
/*! head.core - v1.0.2 */
(function(n,t){"use strict";function r(n){a[a.length]=n}function k(n){var t=new RegExp(" ?\\b"+n+"\\b");c.className=c.className.replace(t,"")}function p(n,t){for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}function tt(){var t,e,f,o;c.className=c.className.replace(/ (w-|eq-|gt-|gte-|lt-|lte-|portrait|no-portrait|landscape|no-landscape)\d+/g,"");t=n.innerWidth||c.clientWidth;e=n.outerWidth||n.screen.width;u.screen.innerWidth=t;u.screen.outerWidth=e;r("w-"+t);p(i.screens,function(n){t>n?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):t<n?(i.screensCss.lt&&r("lt-"+n),i.screensCss.lte&&r("lte-"+n)):t===n&&(i.screensCss.lte&&r("lte-"+n),i.screensCss.eq&&r("e-q"+n),i.screensCss.gte&&r("gte-"+n))});f=n.innerHeight||c.clientHeight;o=n.outerHeight||n.screen.height;u.screen.innerHeight=f;u.screen.outerHeight=o;u.feature("portrait",f>t);u.feature("landscape",f<t)}function it(){n.clearTimeout(b);b=n.setTimeout(tt,50)}var y=n.document,rt=n.navigator,ut=n.location,c=y.documentElement,a=[],i={screens:[240,320,480,640,768,800,1024,1280,1440,1680,1920],screensCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!1},browsers:[{ie:{min:6,max:11}}],browserCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!0},html5:!0,page:"-page",section:"-section",head:"head"},v,u,s,w,o,h,l,d,f,g,nt,e,b;if(n.head_conf)for(v in n.head_conf)n.head_conf[v]!==t&&(i[v]=n.head_conf[v]);u=n[i.head]=function(){u.ready.apply(null,arguments)};u.feature=function(n,t,i){return n?(Object.prototype.toString.call(t)==="[object Function]"&&(t=t.call()),r((t?"":"no-")+n),u[n]=!!t,i||(k("no-"+n),k(n),u.feature()),u):(c.className+=" "+a.join(" "),a=[],u)};u.feature("js",!0);s=rt.userAgent.toLowerCase();w=/mobile|android|kindle|silk|midp|phone|(windows .+arm|touch)/.test(s);u.feature("mobile",w,!0);u.feature("desktop",!w,!0);s=/(chrome|firefox)[ \/]([\w.]+)/.exec(s)||/(iphone|ipad|ipod)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(android)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(webkit|opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(msie) ([\w.]+)/.exec(s)||/(trident).+rv:(\w.)+/.exec(s)||[];o=s[1];h=parseFloat(s[2]);switch(o){case"msie":case"trident":o="ie";h=y.documentMode||h;break;case"firefox":o="ff";break;case"ipod":case"ipad":case"iphone":o="ios";break;case"webkit":o="safari"}for(u.browser={name:o,version:h},u.browser[o]=!0,l=0,d=i.browsers.length;l<d;l++)for(f in i.browsers[l])if(o===f)for(r(f),g=i.browsers[l][f].min,nt=i.browsers[l][f].max,e=g;e<=nt;e++)h>e?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h<e?(i.browserCss.lt&&r("lt-"+f+e),i.browserCss.lte&&r("lte-"+f+e)):h===e&&(i.browserCss.lte&&r("lte-"+f+e),i.browserCss.eq&&r("eq-"+f+e),i.browserCss.gte&&r("gte-"+f+e));else r("no-"+f);r(o);r(o+parseInt(h,10));i.html5&&o==="ie"&&h<9&&p("abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|progress|section|summary|time|video".split("|"),function(n){y.createElement(n)});p(ut.pathname.split("/"),function(n,u){if(this.length>2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
/*! head.css3 - v1.0.0 */
(function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window);
/*! head.load - v1.0.3 */
(function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}}function it(n,i){var r=Object.prototype.toString.call(i).slice(8,-1);return i!==t&&i!==null&&r===n}function s(n){return it("Function",n)}function a(n){return it("Array",n)}function et(n){var i=n.split("/"),t=i[i.length-1],r=t.indexOf("?");return r!==-1?t.substring(0,r):t}function f(n){(n=n||w,n._done)||(n(),n._done=1)}function ot(n,t,r,u){var f=typeof n=="object"?n:{test:n,success:!t?!1:a(t)?t:[t],failure:!r?!1:a(r)?r:[r],callback:u||w},e=!!f.test;return e&&!!f.success?(f.success.push(f.callback),i.load.apply(null,f.success)):e||!f.failure?u():(f.failure.push(f.callback),i.load.apply(null,f.failure)),i}function v(n){var t={},i,r;if(typeof n=="object")for(i in n)!n[i]||(t={name:i,url:n[i]});else t={name:et(n),url:n};return(r=c[t.name],r&&r.url===t.url)?r:(c[t.name]=t,t)}function y(n){n=n||c;for(var t in n)if(n.hasOwnProperty(t)&&n[t].state!==l)return!1;return!0}function st(n){n.state=ft;u(n.onpreload,function(n){n.call()})}function ht(n){n.state===t&&(n.state=nt,n.onpreload=[],rt({url:n.url,type:"cache"},function(){st(n)}))}function ct(){var n=arguments,t=n[n.length-1],r=[].slice.call(n,1),f=r[0];return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(f?(u(r,function(n){s(n)||!n||ht(v(n))}),b(v(n[0]),s(f)?f:function(){i.load.apply(null,r)})):b(v(n[0])),i)}function lt(){var n=arguments,t=n[n.length-1],r={};return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(u(n,function(n){n!==t&&(n=v(n),r[n.name]=n)}),u(n,function(n){n!==t&&(n=v(n),b(n,function(){y(r)&&f(t)}))}),i)}function b(n,t){if(t=t||w,n.state===l){t();return}if(n.state===tt){i.ready(n.name,t);return}if(n.state===nt){n.onpreload.push(function(){b(n,t)});return}n.state=tt;rt(n,function(){n.state=l;t();u(h[n.name],function(n){f(n)});o&&y()&&u(h.ALL,function(n){f(n)})})}function at(n){n=n||"";var t=n.split("?")[0].split(".");return t[t.length-1].toLowerCase()}function rt(t,i){function e(t){t=t||n.event;u.onload=u.onreadystatechange=u.onerror=null;i()}function o(f){f=f||n.event;(f.type==="load"||/loaded|complete/.test(u.readyState)&&(!r.documentMode||r.documentMode<9))&&(n.clearTimeout(t.errorTimeout),n.clearTimeout(t.cssTimeout),u.onload=u.onreadystatechange=u.onerror=null,i())}function s(){if(t.state!==l&&t.cssRetries<=20){for(var i=0,f=r.styleSheets.length;i<f;i++)if(r.styleSheets[i].href===u.href){o({type:"load"});return}t.cssRetries++;t.cssTimeout=n.setTimeout(s,250)}}var u,h,f;i=i||w;h=at(t.url);h==="css"?(u=r.createElement("link"),u.type="text/"+(t.type||"css"),u.rel="stylesheet",u.href=t.url,t.cssRetries=0,t.cssTimeout=n.setTimeout(s,500)):(u=r.createElement("script"),u.type="text/"+(t.type||"javascript"),u.src=t.url);u.onload=u.onreadystatechange=o;u.onerror=e;u.async=!1;u.defer=!1;t.errorTimeout=n.setTimeout(function(){e({type:"timeout"})},7e3);f=r.head||r.getElementsByTagName("head")[0];f.insertBefore(u,f.lastChild)}function vt(){for(var t,u=r.getElementsByTagName("script"),n=0,f=u.length;n<f;n++)if(t=u[n].getAttribute("data-headjs-load"),!!t){i.load(t);return}}function yt(n,t){var v,p,e;return n===r?(o?f(t):d.push(t),i):(s(n)&&(t=n,n="ALL"),a(n))?(v={},u(n,function(n){v[n]=c[n];i.ready(n,function(){y(v)&&f(t)})}),i):typeof n!="string"||!s(t)?i:(p=c[n],p&&p.state===l||n==="ALL"&&y()&&o)?(f(t),i):(e=h[n],e?e.push(t):e=h[n]=[t],i)}function e(){if(!r.body){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(e,50);return}o||(o=!0,vt(),u(d,function(n){f(n)}))}function k(){r.addEventListener?(r.removeEventListener("DOMContentLoaded",k,!1),e()):r.readyState==="complete"&&(r.detachEvent("onreadystatechange",k),e())}var r=n.document,d=[],h={},c={},ut="async"in r.createElement("script")||"MozAppearance"in r.documentElement.style||n.opera,o,g=n.head_conf&&n.head_conf.head||"head",i=n[g]=n[g]||function(){i.ready.apply(null,arguments)},nt=1,ft=2,tt=3,l=4,p;if(r.readyState==="complete")e();else if(r.addEventListener)r.addEventListener("DOMContentLoaded",k,!1),n.addEventListener("load",e,!1);else{r.attachEvent("onreadystatechange",k);n.attachEvent("onload",e);p=!1;try{p=!n.frameElement&&r.documentElement}catch(wt){}p&&p.doScroll&&function pt(){if(!o){try{p.doScroll("left")}catch(t){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(pt,50);return}e()}}()}i.load=i.js=ut?lt:ct;i.test=ot;i.ready=yt;i.ready(r,function(){y()&&u(h.ALL,function(n){f(n)});i.feature&&i.feature("domloaded",!0)})})(window);
/*
//# sourceMappingURL=head.min.js.map
*/
