Sharing Teknologi – Membuat Awesome Hover Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Awesome Hover Animation HTML CSS Di WordPress.
CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam.
CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.
CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dan efek pengetikan atau typing effect .
HTML (Hypertext markup language) adalah sebuah bahasa markah (markup language) yang paling mendominasi saat ini dalam hal pembuatan sebuah website.
Dengan adanya HTML, maka sebuah website bisa dikreasikan sedemikian rupa menjadi lebih interaktif dan menarik. Karena HTML memadukan berbagai elemen seperti teks, multimedia, dan link, dan juga elemen pendukung lainnya menjadi sebuah kesatuan.
Sebelumnya kami mengucapkan banyak terima kasih kepada para pengunjung teknologi[dot]visitklaten[dot]com yang rela meluangkan waktu untuk mengunjungi ataupun sekedar melihat-lihat web kami yang masih banyak kekurangan ini. Kami menerima segala masukkan dan kritikan agar web dan diri kami menjadi lebih baik lagi..
Di kesempatan kali ini, kami akan berbagi tutorial Membuat Awesome Hover Animation Menggunakan HTML CSS.
NB: kami menggunakan tambahan CSS dari bootstrap.
Membuat Awesome Hover Animation
Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.
Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.
HTML
<div class="awesomehover position-relative pb-3 my-1">
<div class="content clearfix">
<div class="section-container">
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Awesome Image Hover Effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="btn01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn03">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn04">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn05">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn06">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn07">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn08">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn09">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn10">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn11">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn12">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn13">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn14">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn15">
<img src="https://images.unsplash.com/photo-1497864768494-78100d1ddf01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn17">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn18">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn19">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn20">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn21">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn22">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn25">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="btn26">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-4-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
</div>
</div>
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Awesome Image Overlay Effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="ovrly01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyT"></div>
<div class="ovrlyB"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyL"></div>
<div class="ovrlyR"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly03">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyT"></div>
<div class="ovrlyB"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly04">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyT"></div>
<div class="ovrlyB"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly05">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyT"></div>
<div class="ovrlyB"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly06">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyL"></div>
<div class="ovrlyR"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly07">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly08">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly09">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly10">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly11">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly12">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly13">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly14">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly15">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly16">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly17">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly18">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly19">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly20">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly21">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly22">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly23">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly24">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly25">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrlyT"></div>
<div class="ovrlyB"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly26">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly27">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly28">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly29">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly30">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="ovrly31">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-1-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
</div>
</div>
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Hover Details Text Effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="dtl01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl03">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl04">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl05">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl06">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl07">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl08">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl09">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl10">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl11">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl12">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl13">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl14">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl15">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl16">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl17">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl18">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl19">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl20">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl21">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl22">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl23">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl24">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl25">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl26">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl27">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl28">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl29">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl30">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl31">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="dtl32">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-8-HTML-CSS.webp" alt="">
<div class="dtl">
<h3>Visit Klaten</h3>
<p>Peta Pariwisata dan Media Iklan di Klaten</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Hover Captions Effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="cptn01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn03">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn04">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn07">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn08">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn09">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn10">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn11">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="ovrly">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn12">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="ovrly">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn13">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="ovrly">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn14">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="ovrly">
<div class="cptn">
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn15">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn16">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn17">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="cptn18">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-7-HTML-CSS.webp" alt="">
<div class="cptn">
<div>
<h3>Visit Klaten</h3>
<p>By Visit Klaten.</p>
</div>
<a href="#" class="fa fa-long-arrow-right"></a>
</div>
</div>
</div>
</div>
</div>
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Images Zoom Effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="image01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="image02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="">
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="image03">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="image04">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="image05">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="" class="imgB">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="" class="imgT">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="image06">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="" class="imgB">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-6-HTML-CSS.webp" alt="" class="imgT">
<div class="ovrly"></div>
<div class="buttons">
<a href="#" class="fa fa-link"></a>
<a href="#" class="fa fa-search"></a>
</div>
</div>
</div>
</div>
</div>
<div class="section clearfix">
<div class="sec-header ">
<h5 class="h3style font-weight-bold textfrost-gradient mt-5 ">Social Buttons effects</h5>
</div>
<div class="items-container row">
<div class="item col-sm-6 col-xs-12">
<div class="sBtn01">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="">
<div class="list-container">
<ul class="btn-list">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-plus"></a>
</li>
<li>
<a href="#" class="fa fa-linkedin"></a>
</li>
<li>
<a href="#" class="fa fa-dribbble"></a>
</li>
<li>
<a href="#" class="fa fa-pinterest-p"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="sBtn02">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="">
<div class="list-container">
<ul class="btn-list">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-plus"></a>
</li>
<li>
<a href="#" class="fa fa-linkedin"></a>
</li>
<li>
<a href="#" class="fa fa-dribbble"></a>
</li>
<li>
<a href="#" class="fa fa-pinterest-p"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="sBtn05">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="">
<div class="list-container">
<ul class="btn-list">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-plus"></a>
</li>
<li>
<a href="#" class="fa fa-linkedin"></a>
</li>
<li>
<a href="#" class="fa fa-dribbble"></a>
</li>
<li>
<a href="#" class="fa fa-pinterest-p"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="item col-sm-6 col-xs-12">
<div class="sBtn06">
<img src="https://teknologi.visitklaten.com/wp-content/uploads/2022/10/Membuat-Circle-Hover-Effect-5-HTML-CSS.webp" alt="">
<div class="list-container">
<ul class="btn-list">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-plus"></a>
</li>
<li>
<a href="#" class="fa fa-linkedin"></a>
</li>
<li>
<a href="#" class="fa fa-dribbble"></a>
</li>
<li>
<a href="#" class="fa fa-pinterest-p"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Style CSS
.awesomehover .btn01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn01 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .btn01 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: -100%;
width: 100%;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.awesomehover .btn01 .buttons {
position: absolute;
top: -100%;
left: 50%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn01 .buttons .fa {
margin: 0 1px;
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
}
.awesomehover .btn01:hover .buttons {
top: 50%;
}
.awesomehover .btn01:hover .ovrly {
top: 0;
}
.awesomehover .btn02 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn02 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .btn02 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: -100%;
top: 0;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.awesomehover .btn02 .buttons {
position: absolute;
top: 50%;
left: -100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn02 .buttons .fa {
margin: 0 1px;
background: rgba(256, 256, 256, 0.9);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
}
.awesomehover .btn02:hover .buttons {
left: 50%;
}
.awesomehover .btn02:hover .ovrly {
left: 0;
}
.awesomehover .btn03 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn03 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .btn03 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 100%;
width: 100%;
position: absolute;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.awesomehover .btn03 .buttons {
position: absolute;
bottom: -100%;
left: 50%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
-o-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
}
.awesomehover .btn03 .buttons .fa {
margin: 0 1px;
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
}
.awesomehover .btn03:hover .buttons {
bottom: 50%;
}
.awesomehover .btn03:hover .ovrly {
top: 0;
}
.awesomehover .btn04 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn04 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .btn04 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 100%;
top: 0;
width: 100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.awesomehover .btn04 .buttons {
position: absolute;
top: 50%;
right: -100%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.awesomehover .btn04 .buttons .fa {
margin: 0 1px;
background: rgba(256, 256, 256, 0.9);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
}
.awesomehover .btn04:hover .buttons {
right: 50%;
}
.awesomehover .btn04:hover .ovrly {
left: 0;
}
.awesomehover .btn05 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn05 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn05 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn05 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn05 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s, color 0.1s 0.3s;
-moz-transition: all 0.3s, color 0.1s 0.3s;
-o-transition: all 0.3s, color 0.1s 0.3s;
transition: all 0.3s, color 0.1s 0.3s;
color: transparent;
}
.awesomehover .btn05 .buttons .fa-link {
left: -10px;
}
.awesomehover .btn05 .buttons .fa-search {
left: 10px;
}
.awesomehover .btn05:hover .buttons .fa {
opacity: 1;
left: 0;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn05:hover .ovrly {
opacity: 1;
}
.awesomehover .btn06 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn06 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn06 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn06 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn06 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s, color 0.1s 0.3s;
-moz-transition: all 0.3s, color 0.1s 0.3s;
-o-transition: all 0.3s, color 0.1s 0.3s;
transition: all 0.3s, color 0.1s 0.3s;
color: transparent;
}
.awesomehover .btn06 .buttons .fa-link {
left: 22px;
}
.awesomehover .btn06 .buttons .fa-search {
left: -22px;
}
.awesomehover .btn06:hover .buttons .fa {
opacity: 1;
left: 0;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn06:hover .ovrly {
opacity: 1;
}
.awesomehover .btn07 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn07 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn07 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn07 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn07 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
position: relative;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
color: transparent;
}
.awesomehover .btn07:hover .buttons .fa {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn07:hover .ovrly {
opacity: 1;
}
.awesomehover .btn08 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn08 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn08 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn08 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn08 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
position: relative;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
color: transparent;
}
.awesomehover .btn08:hover .buttons .fa {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn08:hover .ovrly {
opacity: 1;
}
.awesomehover .btn09 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn09 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn09 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn09 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn09 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn09 .buttons .fa-link {
-webkit-transform-origin: 165% 50%;
-moz-transform-origin: 165% 50%;
-ms-transform-origin: 165% 50%;
-o-transform-origin: 165% 50%;
transform-origin: 165% 50%;
-webkit-transform: rotateZ(0deg) scale(0);
-moz-transform: rotateZ(0deg) scale(0);
-ms-transform: rotateZ(0deg) scale(0);
-o-transform: rotateZ(0deg) scale(0);
transform: rotateZ(0deg) scale(0);
}
.awesomehover .btn09 .buttons .fa-search {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.awesomehover .btn09:hover .buttons .fa-link {
-webkit-transform: rotateZ(360deg) scale(1);
-moz-transform: rotateZ(360deg) scale(1);
-ms-transform: rotateZ(360deg) scale(1);
-o-transform: rotateZ(360deg) scale(1);
transform: rotateZ(360deg) scale(1);
}
.awesomehover .btn09:hover .buttons .fa-search {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .btn09:hover .ovrly {
opacity: 1;
}
.awesomehover .btn10 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn10 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn10 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn10 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn10 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn10 .buttons .fa-link {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
.awesomehover .btn10 .buttons .fa-search {
-webkit-transform-origin: -65% 50%;
-moz-transform-origin: -65% 50%;
-ms-transform-origin: -65% 50%;
-o-transform-origin: -65% 50%;
transform-origin: -65% 50%;
-webkit-transform: rotateZ(0deg) scale(0);
-moz-transform: rotateZ(0deg) scale(0);
-ms-transform: rotateZ(0deg) scale(0);
-o-transform: rotateZ(0deg) scale(0);
transform: rotateZ(0deg) scale(0);
}
.awesomehover .btn10:hover .buttons .fa-link {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .btn10:hover .buttons .fa-search {
-webkit-transform: rotateZ(360deg) scale(1);
-moz-transform: rotateZ(360deg) scale(1);
-ms-transform: rotateZ(360deg) scale(1);
-o-transform: rotateZ(360deg) scale(1);
transform: rotateZ(360deg) scale(1);
}
.awesomehover .btn10:hover .ovrly {
opacity: 1;
}
.awesomehover .btn11 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn11 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn11 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn11 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn11 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(360deg) scale(0);
-moz-transform: rotateZ(360deg) scale(0);
-ms-transform: rotateZ(360deg) scale(0);
-o-transform: rotateZ(360deg) scale(0);
transform: rotateZ(360deg) scale(0);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn11 .buttons .fa-link {
-webkit-transform-origin: 105% 50%;
-moz-transform-origin: 105% 50%;
-ms-transform-origin: 105% 50%;
-o-transform-origin: 105% 50%;
transform-origin: 105% 50%;
}
.awesomehover .btn11 .buttons .fa-search {
-webkit-transform-origin: -5% 50%;
-moz-transform-origin: -5% 50%;
-ms-transform-origin: -5% 50%;
-o-transform-origin: -5% 50%;
transform-origin: -5% 50%;
}
.awesomehover .btn11:hover .buttons .fa {
-webkit-transform: rotateZ(0deg) scale(1);
-moz-transform: rotateZ(0deg) scale(1);
-ms-transform: rotateZ(0deg) scale(1);
-o-transform: rotateZ(0deg) scale(1);
transform: rotateZ(0deg) scale(1);
}
.awesomehover .btn11:hover .ovrly {
opacity: 1;
}
.awesomehover .btn12 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn12 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn12 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn12 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn12 .buttons .fa {
background-color: transparent;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: transparent;
}
.awesomehover .btn12:hover .buttons .fa {
color: rgba(50, 50, 50, 0.9);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 0 5px 25px #fff inset;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 0 5px 25px #fff inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 0 5px 25px #fff inset;
}
.awesomehover .btn12:hover .ovrly {
opacity: 1;
}
.awesomehover .btn13 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn13 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn13 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn13 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn13 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn13 .buttons .fa-link {
-webkit-transform-origin: -190% 50%;
-moz-transform-origin: -190% 50%;
-ms-transform-origin: -190% 50%;
-o-transform-origin: -190% 50%;
transform-origin: -190% 50%;
}
.awesomehover .btn13 .buttons .fa-search {
-webkit-transform-origin: 300% 50%;
-moz-transform-origin: 300% 50%;
-ms-transform-origin: 300% 50%;
-o-transform-origin: 300% 50%;
transform-origin: 300% 50%;
}
.awesomehover .btn13:hover .buttons .fa {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .btn13:hover .ovrly {
opacity: 1;
}
.awesomehover .btn14 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn14 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn14 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn14 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn14 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn14 .buttons .fa-link {
-webkit-transform-origin: 50% -110%;
-moz-transform-origin: 50% -110%;
-ms-transform-origin: 50% -110%;
-o-transform-origin: 50% -110%;
transform-origin: 50% -110%;
}
.awesomehover .btn14 .buttons .fa-search {
-webkit-transform-origin: 50% 210%;
-moz-transform-origin: 50% 210%;
-ms-transform-origin: 50% 210%;
-o-transform-origin: 50% 210%;
transform-origin: 50% 210%;
}
.awesomehover .btn14:hover .buttons .fa {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .btn14:hover .ovrly {
opacity: 1;
}
.awesomehover .btn15 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn15 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn15 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn15 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn15 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn15 .buttons .fa-link {
left: -215%;
}
.awesomehover .btn15 .buttons .fa-search {
right: -215%;
}
.awesomehover .btn15:hover .buttons .fa-link {
left: 0;
}
.awesomehover .btn15:hover .buttons .fa-search {
right: 0;
}
.awesomehover .btn15:hover .ovrly {
opacity: 1;
}
.awesomehover .btn16 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn16 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn16 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn16 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn16 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn16 .buttons .fa-link {
top: -360%;
}
.awesomehover .btn16 .buttons .fa-search {
bottom: -360%;
}
.awesomehover .btn16:hover .buttons .fa-link {
top: 0;
}
.awesomehover .btn16:hover .buttons .fa-search {
bottom: 0;
}
.awesomehover .btn16:hover .ovrly {
opacity: 1;
}
.awesomehover .btn17 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn17 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn17 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn17 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn17 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
position: relative;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn17:hover .buttons .fa {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .btn17:hover .ovrly {
opacity: 1;
}
.awesomehover .btn18 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn18 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn18 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn18 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn18 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
-webkit-transform: rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-ms-transform: rotateZ(-360deg);
-o-transform: rotateZ(-360deg);
transform: rotateZ(-360deg);
position: relative;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn18:hover .buttons .fa {
opacity: 1;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .btn18:hover .ovrly {
opacity: 1;
}
.awesomehover .btn19 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn19 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn19 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn19 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn19 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn19:hover .buttons .fa {
opacity: 1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.awesomehover .btn19:hover .ovrly {
opacity: 1;
}
.awesomehover .btn20 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn20 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn20 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn20 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn20 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn20:hover .buttons .fa {
opacity: 1;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.awesomehover .btn20:hover .ovrly {
opacity: 1;
}
.awesomehover .btn21 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn21 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn21 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn21 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn21 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
position: relative;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn21:hover .buttons .fa {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.awesomehover .btn21:hover .ovrly {
opacity: 1;
}
.awesomehover .btn22 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn22 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn22 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn22 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn22 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
position: relative;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn22:hover .buttons .fa {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.awesomehover .btn22:hover .ovrly {
opacity: 1;
}
.awesomehover .btn23 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn23 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn23 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn23 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn23 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkt-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
top: -360%;
-webkit-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-moz-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-o-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn23 .buttons .fa-search {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .btn23:hover .buttons .fa {
top: 0;
}
.awesomehover .btn23:hover .ovrly {
opacity: 1;
}
.awesomehover .btn24 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn24 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn24 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn24 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn24 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkt-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
position: relative;
bottom: -360%;
-webkit-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-moz-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-o-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn24 .buttons .fa-search {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .btn24:hover .buttons .fa {
bottom: 0;
}
.awesomehover .btn24:hover .ovrly {
opacity: 1;
}
.awesomehover .btn25 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn25 img {
width: 100%;
position: relative;
top: 0;
left: 0;
}
.awesomehover .btn25 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn25 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn25 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkt-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
position: relative;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
-o-transition: -o-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
color: rgba(50, 50, 50, 0.9);
}
.awesomehover .btn25 .buttons .fa-search {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .btn25:hover .buttons .fa {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .btn25:hover .ovrly {
opacity: 1;
}
.awesomehover .btn26 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .btn26 img {
margin: 0;
padding: 0;
position: relative;
top: 0;
width: 100%;
left: 0;
}
.awesomehover .btn26 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .btn26 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .btn26 .buttons .fa {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: inline-block;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
margin: 0 1px;
color: rgba(50, 50, 50, 0.9);
-webkit-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-moz-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
-o-transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
transition: all 0.3s cubic-bezier(0, 1.135, 0.73, 1.405);
}
.awesomehover .btn26 .buttons .fa-search {
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .btn26:hover .buttons .fa {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.awesomehover .btn26:hover .ovrly {
opacity: 1;
}
.awesomehover .ovrly01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly01 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly01 .ovrlyT {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 0;
position: absolute;
top: -100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly01 .ovrlyB {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 0;
position: absolute;
top: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly01 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly01 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly01:hover .ovrlyT {
top: 0;
}
.awesomehover .ovrly01:hover .ovrlyB {
top: 0;
}
.awesomehover .ovrly01:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly02 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly02 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly02 .ovrlyL {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: -100%;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly02 .ovrlyR {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 100%;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly02 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly02 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly02:hover .ovrlyL {
left: 0;
}
.awesomehover .ovrly02:hover .ovrlyR {
left: 0;
}
.awesomehover .ovrly02:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly03 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly03 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly03 .ovrlyT {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: -100%;
position: absolute;
top: -100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly03 .ovrlyB {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 100%;
position: absolute;
top: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly03 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly03 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly03:hover .ovrlyT {
left: 0;
top: 0;
}
.awesomehover .ovrly03:hover .ovrlyB {
left: 0;
top: 0;
}
.awesomehover .ovrly03:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly04 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly04 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly04 .ovrlyT {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 100%;
position: absolute;
top: -100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly04 .ovrlyB {
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: -100%;
position: absolute;
top: 100%;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly04 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly04 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly04:hover .ovrlyT {
left: 0;
top: 0;
}
.awesomehover .ovrly04:hover .ovrlyB {
left: 0;
top: 0;
}
.awesomehover .ovrly04:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly05 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly05 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly05 .ovrlyT {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 50%;
left: 0;
top: -50%;
position: absolute;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly05 .ovrlyB {
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 50%;
left: 0;
position: absolute;
top: 100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly05 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly05 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly05:hover .ovrlyT {
left: 0;
top: 0;
}
.awesomehover .ovrly05:hover .ovrlyB {
left: 0;
top: 50%;
}
.awesomehover .ovrly05:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly06 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly06 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly06 .ovrlyL {
background: rgba(0, 0, 0, 0.5);
width: 50%;
height: 100%;
left: -50%;
top: 0;
position: absolute;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly06 .ovrlyR {
background: rgba(0, 0, 0, 0.5);
width: 50%;
height: 100%;
left: 100%;
position: absolute;
top: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly06 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly06 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly06:hover .ovrlyL {
left: 0;
top: 0;
}
.awesomehover .ovrly06:hover .ovrlyR {
left: 50%;
top: 0;
}
.awesomehover .ovrly06:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly07 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly07 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly07 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: -195%;
position: absolute;
width: 170%;
top: 0;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly07 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly07 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly07:hover .ovrly {
left: -35%;
}
.awesomehover .ovrly07:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly08 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly08 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly08 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 125%;
width: 170%;
top: 0;
position: absolute;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly08 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly08 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly08:hover .ovrly {
left: -35%;
}
.awesomehover .ovrly08:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly09 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly09 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly09 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 125%;
width: 170%;
position: absolute;
top: 0;
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly09 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly09 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly09:hover .ovrly {
left: -35%;
}
.awesomehover .ovrly09:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly10 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly10 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly10 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: -195%;
width: 170%;
top: 0;
position: absolute;
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly10 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly10 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly10:hover .ovrly {
left: -35%;
}
.awesomehover .ovrly10:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly11 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly11 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly11 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
left: 0;
top: -100%;
-webkit-transition: all 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-moz-transition: all 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-o-transition: all 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
transition: all 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
}
.awesomehover .ovrly11 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly11 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly11:hover .ovrly {
top: 0;
}
.awesomehover .ovrly11:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly12 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly12 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly12 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
width: 100%;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-o-transition: -o-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
transition: transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
}
.awesomehover .ovrly12 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly12 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly12:hover .ovrly {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .ovrly12:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly13 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly13 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly13 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
width: 100%;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-o-transition: -o-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
transition: transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
}
.awesomehover .ovrly13 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly13 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly13:hover .ovrly {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.awesomehover .ovrly13:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly14 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly14 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly14 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
width: 100%;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-moz-transition: -moz-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
-o-transition: -o-transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
transition: transform 0.3s cubic-bezier(0.815, 1.650, 0.400, 0.680);
}
.awesomehover .ovrly14 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly14 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly14:hover .ovrly {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
}
.awesomehover .ovrly14:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly15 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly15 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly15 .ovrly {
position: absolute;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
height: 100%;
width: 100%;
left: 0;
top: -100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly15 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly15 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly15:hover .ovrly {
top: 0;
}
.awesomehover .ovrly15:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly16 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly16 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly16 .ovrly {
position: absolute;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
height: 100%;
left: 100%;
top: 0;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly16 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly16 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly16:hover .ovrly {
left: 0;
}
.awesomehover .ovrly16:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly17 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly17 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly17 .ovrly {
position: absolute;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
height: 100%;
width: 100%;
left: 0;
top: 100%;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.awesomehover .ovrly17 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly17 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly17:hover .ovrly {
top: 0;
}
.awesomehover .ovrly17:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly18 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly18 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly18 .ovrly {
position: absolute;
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: -o-linear-gradient(left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
height: 100%;
left: -100%;
top: 0;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly18 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly18 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly18:hover .ovrly {
left: 0;
}
.awesomehover .ovrly18:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly19 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly19 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly19 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transform: perspective(400px) rotateX(-90deg);
-moz-transform: perspective(400px) rotateX(-90deg);
-ms-transform: perspective(400px) rotateX(-90deg);
-o-transform: perspective(400px) rotateX(-90deg);
transform: perspective(400px) rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly19 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly19 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly19:hover .ovrly {
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
-o-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.awesomehover .ovrly19:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly20 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly20 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly20 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transform: perspective(400px) rotateY(-90deg);
-moz-transform: perspective(400px) rotateY(-90deg);
-ms-transform: perspective(400px) rotateY(-90deg);
-o-transform: perspective(400px) rotateY(-90deg);
transform: perspective(400px) rotateY(-90deg);
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly20 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly20 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly20:hover .ovrly {
opacity: 1;
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
}
.awesomehover .ovrly20:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly21 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly21 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly21 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transform: perspective(400px) rotateX(90deg);
-moz-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
-o-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly21 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly21 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly21:hover .ovrly {
opacity: 1;
-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
-o-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.awesomehover .ovrly21:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly22 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly22 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly22 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transform: perspective(400px) rotateY(90deg);
-moz-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
-o-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly22 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly22 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly22:hover .ovrly {
opacity: 1;
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
}
.awesomehover .ovrly22:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly23 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly23 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly23 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
width: 100%;
opacity: 0;
-webkit-transform: scale(0.5) rotateZ(180deg);
-moz-transform: scale(0.5) rotateZ(180deg);
-ms-transform: scale(0.5) rotateZ(180deg);
-o-transform: scale(0.5) rotateZ(180deg);
transform: scale(0.5) rotateZ(180deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly23 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly23 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly23:hover .ovrly {
opacity: 1;
-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
}
.awesomehover .ovrly23:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly24 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly24 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly24 .ovrly {
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly24 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly24 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly24:hover .ovrly {
-webkit-box-shadow: 0 0 10px 100px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0 0 10px 100px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 0 10px 100px rgba(0, 0, 0, 0.5) inset;
}
.awesomehover .ovrly24:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly25 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly25 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly25 .ovrlyT {
position: absolute;
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 0;
top: 0;
width: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly25 .ovrlyB {
position: absolute;
background: rgba(0, 0, 0, 0.25);
height: 100%;
left: 0;
top: 0;
width: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s 0.2s;
-moz-transition: all 0.3s 0.2s;
-o-transition: all 0.3s 0.2s;
transition: all 0.3s 0.2s;
}
.awesomehover .ovrly25 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly25 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly25:hover .ovrlyT {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .ovrly25:hover .ovrlyB {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .ovrly25:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly26 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly26 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly26 .ovrly {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
position: absolute;
width: 100%;
left: -50%;
top: -50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.awesomehover .ovrly26 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly26 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly26:hover .ovrly {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}
.awesomehover .ovrly26:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly27 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly27 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly27 .ovrly {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
position: absolute;
width: 100%;
left: 50%;
top: -50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.awesomehover .ovrly27 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly27 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly27:hover .ovrly {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}
.awesomehover .ovrly27:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly28 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly28 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly28 .ovrly {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
position: absolute;
width: 100%;
left: 50%;
top: 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.awesomehover .ovrly28 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly28 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly28:hover .ovrly {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}
.awesomehover .ovrly28:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly29 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly29 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly29 .ovrly {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
position: absolute;
width: 100%;
left: -50%;
top: 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.awesomehover .ovrly29 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly29 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly29:hover .ovrly {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}
.awesomehover .ovrly29:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly30 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly30 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly30 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
left: 0;
top: 0;
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
transform: rotateZ(180deg);
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly30 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly30 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly30:hover .ovrly {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .ovrly30:hover .buttons .fa {
opacity: 1;
}
.awesomehover .ovrly31 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .ovrly31 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .ovrly31 .ovrly {
position: absolute;
background: rgba(0, 0, 0, 0.5);
height: 100%;
width: 100%;
left: 0;
top: 0;
-webkit-transform: rotateZ(-180deg);
-moz-transform: rotateZ(-180deg);
-ms-transform: rotateZ(-180deg);
-o-transform: rotateZ(-180deg);
transform: rotateZ(-180deg);
-webkit-transform-origin: center bottom;
-moz-transform-origin: center bottom;
-ms-transform-origin: center bottom;
-o-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .ovrly31 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .ovrly31 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.2s 0.3s;
-moz-transition: all 0.2s 0.3s;
-o-transition: all 0.2s 0.3s;
transition: all 0.2s 0.3s;
opacity: 0;
}
.awesomehover .ovrly31:hover .ovrly {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.awesomehover .ovrly31:hover .buttons .fa {
opacity: 1;
}
.awesomehover .dtl01 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl01 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl01 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 0;
padding: 0 15px 0 15px;
left: -70%;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.awesomehover .dtl01 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl01 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl01 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl01 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl01:hover img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.awesomehover .dtl01:hover .dtl {
left: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl02 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl02 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl02 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: -70%;
padding: 0 15px 0 15px;
left: 0;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.awesomehover .dtl02 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl02 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl02 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl02 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl02:hover img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.awesomehover .dtl02:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl03 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl03 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl03 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 0;
padding: 0 15px 0 15px;
left: 70%;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.awesomehover .dtl03 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl03 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl03 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl03 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl03:hover img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.awesomehover .dtl03:hover .dtl {
left: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl04 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl04 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl04 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 70%;
padding: 0 15px 0 15px;
left: 0;
opacity: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
}
.awesomehover .dtl04 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl04 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl04 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl04 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl04:hover img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.awesomehover .dtl04:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl05 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl05 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl05 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 0;
padding: 0 15px 0 15px;
left: -100%;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl05 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl05 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl05 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl05 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl05:hover img {
left: 100%;
}
.awesomehover .dtl05:hover .dtl {
left: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl06 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl06 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl06 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: -100%;
padding: 0 15px 0 15px;
left: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl06 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl06 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl06 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl06 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl06:hover img {
top: 100%;
}
.awesomehover .dtl06:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl07 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl07 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl07 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 0;
padding: 0 15px 0 15px;
left: 100%;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl07 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl07 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl07 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl07 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl07:hover img {
left: -100%;
}
.awesomehover .dtl07:hover .dtl {
left: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl08 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl08 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl08 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 100%;
padding: 0 15px 0 15px;
left: 0;
z-index: 1;
overflow: auto;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl08 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl08 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl08 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl08 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl08:hover img {
top: -100%;
}
.awesomehover .dtl08:hover .dtl {
top: 0;
opacity: 1;
visibility: visible;
}
.awesomehover .dtl09 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl09 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl09 .dtl {
position: absolute;
background: #333;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s 0.15s;
-moz-transition: all 0.3s 0.15s;
-o-transition: all 0.3s 0.15s;
transition: all 0.3s 0.15s;
-webkit-transform: scale(0) rotateZ(180deg);
-moz-transform: scale(0) rotateZ(180deg);
-ms-transform: scale(0) rotateZ(180deg);
-o-transform: scale(0) rotateZ(180deg);
transform: scale(0) rotateZ(180deg);
}
.awesomehover .dtl09 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl09 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl09 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl09 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl09:hover img {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.awesomehover .dtl09:hover .dtl {
visibility: visible;
-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
}
.awesomehover .dtl10 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl10 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl10 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: -100%;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(0.7) rotateZ(180deg);
-moz-transform: scale(0.7) rotateZ(180deg);
-ms-transform: scale(0.7) rotateZ(180deg);
-o-transform: scale(0.7) rotateZ(180deg);
transform: scale(0.7) rotateZ(180deg);
}
.awesomehover .dtl10 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl10 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl10 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl10 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl10:hover img {
left: 100%;
-webkit-transform: scale(0.7) rotateZ(180deg);
-moz-transform: scale(0.7) rotateZ(180deg);
-ms-transform: scale(0.7) rotateZ(180deg);
-o-transform: scale(0.7) rotateZ(180deg);
transform: scale(0.7) rotateZ(180deg);
}
.awesomehover .dtl10:hover .dtl {
visibility: visible;
left: 0;
-webkit-transform: scale(1) rotateZ(0deg);
-moz-transform: scale(1) rotateZ(0deg);
-ms-transform: scale(1) rotateZ(0deg);
-o-transform: scale(1) rotateZ(0deg);
transform: scale(1) rotateZ(0deg);
}
.awesomehover .dtl11 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl11 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl11 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl11 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl11 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl11 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl11 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl11:hover img {
opacity: 0;
}
.awesomehover .dtl11:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl12 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl12 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl12 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl12 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl12 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl12 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl12 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl12:hover img {
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
.awesomehover .dtl12:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl13 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl13 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .dtl13 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl13 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl13 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl13 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl13 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl13:hover .dtl {
visibility: visible;
opacity: 1;
left: 25px;
top: 25px;
}
.awesomehover .dtl14 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl14 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .dtl14 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl14 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl14 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl14 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl14 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl14:hover .dtl {
visibility: visible;
opacity: 1;
left: -25px;
top: 25px;
}
.awesomehover .dtl15 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl15 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .dtl15 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl15 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl15 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl15 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl15 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl15:hover .dtl {
visibility: visible;
opacity: 1;
left: -25px;
top: -25px;
}
.awesomehover .dtl16 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl16 img {
position: relative;
width: 100%;
top: 0;
left: 0;
}
.awesomehover .dtl16 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl16 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl16 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl16 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl16 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl16:hover .dtl {
visibility: visible;
opacity: 1;
left: 25px;
top: -25px;
}
.awesomehover .dtl17 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl17 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl17 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: -100%;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl17 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl17 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl17 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl17 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl17:hover .dtl {
visibility: visible;
opacity: 1;
left: 0;
}
.awesomehover .dtl17:hover img {
opacity: 0;
}
.awesomehover .dtl18 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl18 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl18 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: -100%;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl18 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl18 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl18 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl18 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl18:hover .dtl {
visibility: visible;
opacity: 1;
top: 0;
}
.awesomehover .dtl18:hover img {
opacity: 0;
}
.awesomehover .dtl19 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl19 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl19 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 100%;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl19 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl19 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl19 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl19 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl19:hover .dtl {
visibility: visible;
opacity: 1;
left: 0;
}
.awesomehover .dtl19:hover img {
opacity: 0;
}
.awesomehover .dtl20 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl20 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl20 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 100%;
left: 0;
opacity: 0;
padding: 0 15px;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl20 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl20 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl20 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl20 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl20:hover .dtl {
visibility: visible;
opacity: 1;
top: 0;
}
.awesomehover .dtl20:hover img {
opacity: 0;
}
.awesomehover .dtl21 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl21 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl21 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
padding: 0 15px;
-webkit-transform: perspective(600px) rotateY(90deg);
-moz-transform: perspective(600px) rotateY(90deg);
-ms-transform: perspective(600px) rotateY(90deg);
-o-transform: perspective(600px) rotateY(90deg);
transform: perspective(600px) rotateY(90deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl21 .dtl h3,
.awesomehover .dtl21 .dtl p,
.awesomehover .dtl21 .dtl a {
left: 50px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s 0.3s;
-moz-transition: all 0.3s 0.3s;
-o-transition: all 0.3s 0.3s;
transition: all 0.3s 0.3s;
}
.awesomehover .dtl21 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl21 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl21 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl21 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl21:hover .dtl h3,
.awesomehover .dtl21:hover .dtl p,
.awesomehover .dtl21:hover .dtl a {
left: 0;
opacity: 1;
}
.awesomehover .dtl21:hover .dtl {
visibility: visible;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
-ms-transform: perspective(600px) rotateY(0deg);
-o-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
}
.awesomehover .dtl22 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl22 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl22 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
padding: 0 15px;
-webkit-transform: perspective(600px) rotateX(-90deg);
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
transform: perspective(600px) rotateX(-90deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl22 .dtl h3,
.awesomehover .dtl22 .dtl p,
.awesomehover .dtl22 .dtl a {
top: 50px;
opacity: 0;
position: relative;
-webkit-transition: all 0.3s 0.3s;
-moz-transition: all 0.3s 0.3s;
-o-transition: all 0.3s 0.3s;
transition: all 0.3s 0.3s;
}
.awesomehover .dtl22 .dtl h3 {
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl22 .dtl p {
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl22 .dtl a {
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl22 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl22:hover .dtl h3,
.awesomehover .dtl22:hover .dtl p,
.awesomehover .dtl22:hover .dtl a {
top: 0;
opacity: 1;
}
.awesomehover .dtl22:hover .dtl {
visibility: visible;
-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform: perspective(600px) rotateX(0deg);
-ms-transform: perspective(600px) rotateX(0deg);
-o-transform: perspective(600px) rotateX(0deg);
transform: perspective(600px) rotateX(0deg);
}
.awesomehover .dtl23 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl23 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl23 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl23 .dtl h3,
.awesomehover .dtl23 .dtl p,
.awesomehover .dtl23 .dtl a {
opacity: 0;
position: relative;
-webkit-transition: all 0.3s 0.3s;
-moz-transition: all 0.3s 0.3s;
-o-transition: all 0.3s 0.3s;
transition: all 0.3s 0.3s;
}
.awesomehover .dtl23 .dtl h3 {
left: -100px;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl23 .dtl p {
left: 100px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl23 .dtl a {
left: 100px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl23 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl23:hover .dtl h3,
.awesomehover .dtl23:hover .dtl p,
.awesomehover .dtl23:hover .dtl a {
left: 0;
opacity: 1;
}
.awesomehover .dtl23:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl24 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl24 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl24 .dtl {
background: #333;
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl24 .dtl h3,
.awesomehover .dtl24 .dtl p,
.awesomehover .dtl24 .dtl a {
opacity: 0;
position: relative;
-webkit-transition: all 0.3s 0.3s;
-moz-transition: all 0.3s 0.3s;
-o-transition: all 0.3s 0.3s;
transition: all 0.3s 0.3s;
}
.awesomehover .dtl24 .dtl h3 {
top: -100px;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl24 .dtl p {
top: 100px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #9d9c9c;
text-indent: 10px;
}
.awesomehover .dtl24 .dtl a {
top: 100px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl24 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl24:hover .dtl h3,
.awesomehover .dtl24:hover .dtl p,
.awesomehover .dtl24:hover .dtl a {
top: 0;
opacity: 1;
}
.awesomehover .dtl24:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl25 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl25 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl25 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl25 .dtl h3,
.awesomehover .dtl25 .dtl p,
.awesomehover .dtl25 .dtl a {
position: relative;
top: -100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl25 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.awesomehover .dtl25 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
text-indent: 10px;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .dtl25 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl25 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl25:hover .dtl h3,
.awesomehover .dtl25:hover .dtl p,
.awesomehover .dtl25:hover .dtl a {
top: 0;
}
.awesomehover .dtl25:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl26 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl26 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl26 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl26 .dtl h3,
.awesomehover .dtl26 .dtl p,
.awesomehover .dtl26 .dtl a {
position: relative;
top: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl26 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl26 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
text-indent: 10px;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.awesomehover .dtl26 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
text-decoration: none;
}
.awesomehover .dtl26 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl26:hover .dtl h3,
.awesomehover .dtl26:hover .dtl p,
.awesomehover .dtl26:hover .dtl a {
top: 0;
}
.awesomehover .dtl26:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl27 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl27 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl27 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl27 .dtl h3,
.awesomehover .dtl27 .dtl p,
.awesomehover .dtl27 .dtl a {
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl27 .dtl h3 {
padding: 10px 15px;
width: 100%;
left: -100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl27 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
top: 30px;
text-indent: 10px;
}
.awesomehover .dtl27 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
top: 30px;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl27 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl27:hover .dtl h3 {
left: 0;
}
.awesomehover .dtl27:hover .dtl p,
.awesomehover .dtl27:hover .dtl a {
top: 0;
}
.awesomehover .dtl27:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl28 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl28 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl28 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl28 .dtl h3,
.awesomehover .dtl28 .dtl p,
.awesomehover .dtl28 .dtl a {
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl28 .dtl h3 {
padding: 10px 15px;
width: 100%;
left: -100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl28 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
left: 100%;
text-indent: 10px;
}
.awesomehover .dtl28 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
left: 100%;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl28 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl28:hover .dtl p,
.awesomehover .dtl28:hover .dtl a,
.awesomehover .dtl28:hover .dtl h3 {
left: 0;
}
.awesomehover .dtl28:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl29 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl29 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl29 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl29 .dtl h3,
.awesomehover .dtl29 .dtl p,
.awesomehover .dtl29 .dtl a {
position: relative;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl29 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl29 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
text-indent: 10px;
}
.awesomehover .dtl29 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl29 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl29:hover .dtl p,
.awesomehover .dtl29:hover .dtl a,
.awesomehover .dtl29:hover .dtl h3 {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .dtl29:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl30 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl30 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl30 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl30 .dtl h3,
.awesomehover .dtl30 .dtl p,
.awesomehover .dtl30 .dtl a {
position: relative;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl30 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl30 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
text-indent: 10px;
}
.awesomehover .dtl30 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl30 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl30:hover .dtl p,
.awesomehover .dtl30:hover .dtl a,
.awesomehover .dtl30:hover .dtl h3 {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .dtl30:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl31 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl31 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl31 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl31 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl31 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
text-indent: 10px;
}
.awesomehover .dtl31 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl31 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl31:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.awesomehover .dtl31:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .dtl32 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .dtl32 img {
position: relative;
width: 100%;
top: 0;
left: 0;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl32 .dtl {
background: rgba(51, 51, 51, 0.5);
width: 100%;
position: absolute;
height: 100%;
top: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .dtl32 .dtl h3 {
padding: 10px 15px;
width: 100%;
background: #333;
color: #fff;
font-size: 16px;
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.awesomehover .dtl32 .dtl p {
padding: 0 15px;
font-size: 14px;
margin-bottom: 10px;
line-height: 1.2;
color: #fff;
text-indent: 10px;
}
.awesomehover .dtl32 .dtl a {
margin-right: 15px;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
color: #333;
float: right;
font-size: 13px;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.awesomehover .dtl32 .dtl a:hover {
background: #e6e6e6;
border: 1px solid #adadad;
}
.awesomehover .dtl32:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .dtl32:hover .dtl {
visibility: visible;
opacity: 1;
}
.awesomehover .cptn01 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn01 img {
width: 100%;
top: 0;
left: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn01 .cptn {
background: #333;
width: 100%;
height: 30%;
top: -30%;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn01 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn01 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn01 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn01 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn01 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn01:hover img {
top: 30%;
}
.awesomehover .cptn01:hover .cptn {
top: 0;
}
.awesomehover .cptn02 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn02 img {
width: 100%;
right: 0;
top: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn02 .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
right: -40%;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn02 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn02 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn02 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn02 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn02:hover img {
right: 40%;
}
.awesomehover .cptn02:hover .cptn {
right: 0;
}
.awesomehover .cptn03 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn03 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn03 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: -30%;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn03 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn03 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn03 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn03 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn03 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn03:hover img {
bottom: 30%;
}
.awesomehover .cptn03:hover .cptn {
bottom: 0;
}
.awesomehover .cptn04 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn04 img {
width: 100%;
left: 0;
top: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn04 .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
left: -40%;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn04 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn04 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn04 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn04 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn04:hover img {
left: 40%;
}
.awesomehover .cptn04:hover .cptn {
left: 0;
}
.awesomehover .cptn05 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn05 img {
width: 100%;
left: 0;
top: 0;
z-index: 1;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn05 .cptn {
background: #333;
width: 100%;
height: 30%;
top: 0;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn05 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn05 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn05 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn05 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn05 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn05:hover img {
top: 30%;
}
.awesomehover .cptn06 {
width: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn06 img {
width: 100%;
left: 0;
bottom: 0;
z-index: 1;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn06 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 0;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn06 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn06 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn06 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn06 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn06 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn06:hover img {
bottom: 30%;
}
.awesomehover .cptn07 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn07 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn07 .cptn {
background: #333;
width: 100%;
height: 30%;
top: 0;
position: absolute;
left: 0;
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
-webkit-transform: perspective(600px) rotateX(-90deg);
-moz-transform: perspective(600px) rotateX(-90deg);
-ms-transform: perspective(600px) rotateX(-90deg);
-o-transform: perspective(600px) rotateX(-90deg);
transform: perspective(600px) rotateX(-90deg);
overflow: auto;
padding: 0 15px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn07 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn07 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn07 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn07 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn07 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn07:hover .cptn {
opacity: 1;
-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform: perspective(600px) rotateX(0deg);
-ms-transform: perspective(600px) rotateX(0deg);
-o-transform: perspective(600px) rotateX(0deg);
transform: perspective(600px) rotateX(0deg);
}
.awesomehover .cptn08 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn08 img {
width: 100%;
left: 0;
top: 0;
position: relative;
}
.awesomehover .cptn08 .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
-webkit-transform: perspective(600px) rotateY(-90deg);
-moz-transform: perspective(600px) rotateY(-90deg);
-ms-transform: perspective(600px) rotateY(-90deg);
-o-transform: perspective(600px) rotateY(-90deg);
transform: perspective(600px) rotateY(-90deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
right: 0;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn08 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn08 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn08 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn08 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn08:hover .cptn {
opacity: 1;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
-ms-transform: perspective(600px) rotateY(0deg);
-o-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
}
.awesomehover .cptn09 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn09 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn09 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 0;
position: absolute;
left: 0;
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: perspective(600px) rotateX(90deg);
-moz-transform: perspective(600px) rotateX(90deg);
-ms-transform: perspective(600px) rotateX(90deg);
-o-transform: perspective(600px) rotateX(90deg);
transform: perspective(600px) rotateX(90deg);
overflow: auto;
padding: 0 15px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn09 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn09 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn09 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn09 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn09 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn09:hover .cptn {
opacity: 1;
-webkit-transform: perspective(600px) rotateX(0deg);
-moz-transform: perspective(600px) rotateX(0deg);
-ms-transform: perspective(600px) rotateX(0deg);
-o-transform: perspective(600px) rotateX(0deg);
transform: perspective(600px) rotateX(0deg);
}
.awesomehover .cptn10 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn10 img {
width: 100%;
left: 0;
top: 0;
position: relative;
}
.awesomehover .cptn10 .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
opacity: 0;
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
-webkit-transform: perspective(600px) rotateY(90deg);
-moz-transform: perspective(600px) rotateY(90deg);
-ms-transform: perspective(600px) rotateY(90deg);
-o-transform: perspective(600px) rotateY(90deg);
transform: perspective(600px) rotateY(90deg);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
left: 0;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn10 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn10 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn10 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn10 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn10:hover .cptn {
opacity: 1;
-webkit-transform: perspective(600px) rotateY(0deg);
-moz-transform: perspective(600px) rotateY(0deg);
-ms-transform: perspective(600px) rotateY(0deg);
-o-transform: perspective(600px) rotateY(0deg);
transform: perspective(600px) rotateY(0deg);
}
.awesomehover .cptn11 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn11 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn11 .ovrly {
width: 100%;
height: 100%;
top: -100%;
left: 0;
position: absolute;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn11 .ovrly .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 10px;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
}
.awesomehover .cptn11 .ovrly .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn11 .ovrly .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn11 .ovrly .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn11 .ovrly .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn11 .ovrly .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn11:hover .ovrly {
top: 0;
}
.awesomehover .cptn12 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn12 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn12 .ovrly {
width: 100%;
height: 100%;
top: 0;
left: 100%;
position: absolute;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn12 .ovrly .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
position: absolute;
left: 10px;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn12 .ovrly .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn12 .ovrly .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn12 .ovrly .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn12 .ovrly .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn12:hover .ovrly {
left: 0;
}
.awesomehover .cptn13 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn13 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn13 .ovrly {
width: 100%;
height: 100%;
top: 100%;
left: 0;
position: absolute;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn13 .ovrly .cptn {
background: #333;
width: 100%;
height: 30%;
top: 10px;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
}
.awesomehover .cptn13 .ovrly .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn13 .ovrly .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn13 .ovrly .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn13 .ovrly .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn13 .ovrly .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn13:hover .ovrly {
top: 0;
}
.awesomehover .cptn14 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn14 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn14 .ovrly {
width: 100%;
height: 100%;
top: 0;
left: -100%;
position: absolute;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn14 .ovrly .cptn {
background: #333;
width: 40%;
height: 100%;
top: 0;
position: absolute;
right: 10px;
overflow: auto;
padding: 0 10px;
}
.awesomehover .cptn14 .ovrly .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
height: 30px;
position: relative;
top: 30%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 30px;
margin: auto;
text-align: center;
text-decoration: none;
width: 30px;
opacity: 0.3;
}
.awesomehover .cptn14 .ovrly .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn14 .ovrly .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn14 .ovrly .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn14:hover .ovrly {
left: 0;
}
.awesomehover .cptn15 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn15 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn15 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 10px;
;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn15 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn15 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn15 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn15 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn15 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn15:hover .cptn {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.awesomehover .cptn16 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn16 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn16 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 10px;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn16 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn16 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn16 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn16 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn16 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn16:hover .cptn {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.awesomehover .cptn17 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn17 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn17 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: 10px;
position: absolute;
left: -50%;
overflow: auto;
padding: 0 15px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn17 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn17 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn17 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn17 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn17 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn17:hover .cptn {
left: 0;
opacity: 1;
}
.awesomehover .cptn18 {
width: 100%;
position: relative;
overflow: hidden;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .cptn18 img {
width: 100%;
left: 0;
bottom: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn18 .cptn {
background: #333;
width: 100%;
height: 30%;
bottom: -30%;
position: absolute;
left: 0;
overflow: auto;
padding: 0 15px;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .cptn18 .cptn div {
float: left;
height: 100%;
}
.awesomehover .cptn18 .cptn .fa {
-wibkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #fff;
-wibkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: #fff;
display: block;
float: right;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 30px;
margin-top: 10px;
opacity: 0.3;
}
.awesomehover .cptn18 .cptn .fa:hover {
opacity: 1;
}
.awesomehover .cptn18 .cptn h3 {
color: #fff;
margin-top: 10px;
margin-bottom: 0;
font-size: 16px;
font-weight: normal;
}
.awesomehover .cptn18 .cptn p {
color: #6a6a6a;
font-size: 14px;
}
.awesomehover .cptn18:hover .cptn {
bottom: 10px;
opacity: 1;
}
.awesomehover .image01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image01 img {
width: 100%;
top: 0;
position: relative;
left: 0;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
}
.awesomehover .image01 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .image01 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image01 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image01:hover img {
-webkit-filter: blur(2px);
filter: blur(2px);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .image01:hover .ovrly {
opacity: 1;
}
.awesomehover .image01:hover .buttons .fa {
opacity: 1;
}
.awesomehover .image02 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image02 img {
width: 100%;
top: 0;
position: relative;
left: 0;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
}
.awesomehover .image02 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image02 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image02:hover img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.awesomehover .image02:hover .ovrly {
opacity: 1;
}
.awesomehover .image02:hover .buttons .fa {
opacity: 1;
}
.awesomehover .image03 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image03 img {
width: 100%;
top: 0;
position: relative;
left: 0;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
}
.awesomehover .image03 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .image03 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image03 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image03:hover img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.awesomehover .image03:hover .ovrly {
opacity: 1;
}
.awesomehover .image03:hover .buttons .fa {
opacity: 1;
}
.awesomehover .image04 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image04 img {
width: 100%;
top: 0;
position: relative;
left: 0;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
transition: transform 0.3s;
}
.awesomehover .image04 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .image04 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image04 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image04:hover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .image04:hover .ovrly {
opacity: 1;
}
.awesomehover .image04:hover .buttons .fa {
opacity: 1;
}
.awesomehover .image05 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image05 .imgB {
width: 100%;
top: 0;
left: 0;
position: relative;
opacity: 1;
}
.awesomehover .image05 .imgT {
width: 100%;
top: 0;
left: 0;
position: absolute;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.5;
}
.awesomehover .image05 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .image05 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image05 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image05:hover .imgT {
opacity: 0;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
}
.awesomehover .image05:hover .ovrly {
opacity: 1;
}
.awesomehover .image05:hover .buttons .fa {
opacity: 1;
}
.awesomehover .image06 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .image06 .imgB {
width: 100%;
top: 0;
left: 0;
position: relative;
opacity: 1;
}
.awesomehover .image06 .imgT {
width: 100%;
top: 0;
left: 0;
position: absolute;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-ms-transform: scale(5);
-o-transform: scale(5);
transform: scale(5);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image06 .ovrly {
background: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
top: 0;
position: absolute;
width: 100%;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .image06 .buttons {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.awesomehover .image06 .buttons .fa {
background: rgb(256, 256, 256);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: rgba(50, 50, 50, 0.9);
display: inline-block;
margin: 0 1px;
line-height: 40px;
font-size: 16px;
text-align: center;
text-decoration: none;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
}
.awesomehover .image06:hover .imgT {
opacity: 0.5;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.awesomehover .image06:hover .ovrly {
opacity: 1;
}
.awesomehover .image06:hover .buttons .fa {
opacity: 1;
}
.awesomehover .sBtn01 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .sBtn01 img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn01 .list-container {
width: 35px;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: perspective(400px) rotateY(90deg);
-moz-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
-o-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
}
.awesomehover .sBtn01 .list-container .btn-list {
padding: 0;
margin: 0;
background: #fff;
list-style-type: none;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.awesomehover .sBtn01 .list-container .btn-list li .fa {
background: #fff;
color: #a1a1a1;
display: block;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa:hover {
color: #fff;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-facebook:hover {
background: #3b5998;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-twitter:hover {
background: #55acee;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-plus:hover {
background: #dd4b39;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-linkedin:hover {
background: #0976b4;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-dribbble:hover {
background: #ea4c89;
}
.awesomehover .sBtn01 .list-container .btn-list li .fa-pinterest-p:hover {
background: #cc2127;
}
.awesomehover .sBtn01:hover .list-container {
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
}
.awesomehover .sBtn01:hover img {
left: 10px;
}
.awesomehover .sBtn02 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .sBtn02 img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn02 .list-container {
width: 35px;
height: 100%;
position: absolute;
top: 0;
right: 0;
overflow: auto;
background: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: perspective(400px) rotateY(-90deg);
-moz-transform: perspective(400px) rotateY(-90deg);
-ms-transform: perspective(400px) rotateY(-90deg);
-o-transform: perspective(400px) rotateY(-90deg);
transform: perspective(400px) rotateY(-90deg);
-webkit-transform-origin: right;
-moz-transform-origin: right;
-ms-transform-origin: right;
-o-transform-origin: right;
transform-origin: right;
}
.awesomehover .sBtn02 .list-container .btn-list {
padding: 0;
margin: 0;
background: #fff;
list-style-type: none;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.awesomehover .sBtn02 .list-container .btn-list li .fa {
background: #fff;
color: #a1a1a1;
display: block;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: none;
width: 100%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa:hover {
color: #fff;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-facebook:hover {
background: #3b5998;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-twitter:hover {
background: #55acee;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-plus:hover {
background: #dd4b39;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-linkedin:hover {
background: #0976b4;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-dribbble:hover {
background: #ea4c89;
}
.awesomehover .sBtn02 .list-container .btn-list li .fa-pinterest-p:hover {
background: #cc2127;
}
.awesomehover .sBtn02:hover .list-container {
-webkit-transform: perspective(400px) rotateY(0deg);
-moz-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
}
.awesomehover .sBtn02:hover img {
left: -10px;
}
.awesomehover .sBtn05 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .sBtn05 img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn05 .list-container {
width: 100%;
height: 40px;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: perspective(400px) rotateX(-90deg);
-moz-transform: perspective(400px) rotateX(-90deg);
-ms-transform: perspective(400px) rotateX(-90deg);
-o-transform: perspective(400px) rotateX(-90deg);
transform: perspective(400px) rotateX(-90deg);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
.awesomehover .sBtn05 .list-container .btn-list {
padding: 0;
margin: 0;
background: #fff;
list-style-type: none;
position: relative;
display: block;
text-align: center;
}
.awesomehover .sBtn05 .list-container .btn-list li {
display: inline-block;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa {
background: #fff;
color: #a1a1a1;
display: inline-block;
height: 100%;
line-height: 40px;
text-align: center;
text-decoration: none;
width: 35px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa:hover {
color: #fff;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-facebook:hover {
background: #3b5998;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-twitter:hover {
background: #55acee;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-plus:hover {
background: #dd4b39;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-linkedin:hover {
background: #0976b4;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-dribbble:hover {
background: #ea4c89;
}
.awesomehover .sBtn05 .list-container .btn-list li .fa-pinterest-p:hover {
background: #cc2127;
}
.awesomehover .sBtn05:hover .list-container {
-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
-o-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.awesomehover .sBtn05:hover img {
top: 10px;
}
.awesomehover .sBtn06 {
width: 100%;
overflow: hidden;
position: relative;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.awesomehover .sBtn06 img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn06 .list-container {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
left: 0;
overflow: auto;
background: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: perspective(400px) rotateX(90deg);
-moz-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
-o-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
}
.awesomehover .sBtn06 .list-container .btn-list {
padding: 0;
margin: 0;
background: #fff;
list-style-type: none;
position: relative;
display: block;
text-align: center;
}
.awesomehover .sBtn06 .list-container .btn-list li {
display: inline-block;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa {
background: #fff;
color: #a1a1a1;
display: inline-block;
height: 100%;
line-height: 40px;
text-align: center;
text-decoration: none;
width: 35px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa:hover {
color: #fff;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-facebook:hover {
background: #3b5998;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-twitter:hover {
background: #55acee;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-plus:hover {
background: #dd4b39;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-linkedin:hover {
background: #0976b4;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-dribbble:hover {
background: #ea4c89;
}
.awesomehover .sBtn06 .list-container .btn-list li .fa-pinterest-p:hover {
background: #cc2127;
}
.awesomehover .sBtn06:hover .list-container {
-webkit-transform: perspective(400px) rotateX(0deg);
-moz-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
-o-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
}
.awesomehover .sBtn06:hover img {
top: -10px;
}
.awesomehover #loadOvrlay {
background-color: #e8e8e8;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2000;
}
.awesomehover .items-container {
padding: 0;
}
.awesomehover .item {
padding-top: 15px;
padding-bottom: 15px;
}
.awesomehover .code-link {
background-color: #f5f5f5;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
color: #6a8d9d;
display: block;
font-family: "'Raleway', sans-serif";
font-size: 13px;
font-weight: bold;
margin: 10px 0;
padding: 3px 0;
text-align: center;
text-decoration: none;
width: 70px;
}
.awesomehover .code-link:hover {
text-decoration: none;
background-color: #f8f8f8;
border: 1px solid #c6c6c6;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
color: #6a8d9d;
}
.awesomehover .code-link:active {
outline: 0 none;
text-decoration: none;
}
JavaScript
$(document).ready(function() {
$(window).load(function() {
$('#loadOverlay').fadeOut('slow');
})
})
Hasil
Tampilannya kurang lebih bisa dilihat dibawah ini.
Awesome Image Hover Effects
Awesome Image Overlay Effects
Hover Details Text Effects
Hover Captions Effects
Images Zoom Effects
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar