Warna Tags Teknologi.Visitklaten.Com - Sharing Teknologi

Membuat Fun Color Change Animation CSS

adminteknologi — Tue, 02 May 2023 13:02:59 +0000

Sharing Teknologi – Membuat Fun Color Change Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Fun Color Change 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 Fun Color Change Animation Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Fun Color Change 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

Style CSS

.colorchange .frame {
  background-color: rgb(215, 236, 255);
  display: grid;
  place-items: center;
}

.colorchange section {
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.colorchange .slider {
  overflow: hidden;
  background-color: white;
  margin: 0 30px;
  height: 300px;
  width: 50px;
  border-radius: 30px;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
    inset -5px -5px 10px rgba(0, 0, 255, 0.1),
    inset 5px 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.colorchange .slider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  border-radius: 30px;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.1), -15px -15px 30px rgba(),
    inset -5px -5px 10px rgba(0, 0, 0, 0.2),
    inset 5px 5px 5px rgba(0, 0, 0, 0.1);
}

.colorchange .slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
    inset 5px 5px 5px rgba(0, 0, 0, 0.1);
  animation: animate 2.5s ease-in-out infinite;
  animation-delay: calc(-0.5s * var(--i));
}

@keyframes animate {
  0% {
    transform: translateY(250px);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(250px);
    filter: hue-rotate(180deg);
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

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.

The post Membuat Fun Color Change Animation CSS appeared first on Sharing Teknologi.

Membuat Skill Bar Animation HTML CSS

adminteknologi — Mon, 24 Apr 2023 14:55:36 +0000

Sharing Teknologi – Membuat Skill Bar Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Skill Bar Animation HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Skill Bar Animation Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Skill Bar 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


      
        
          
            
              HTML
            
            
            
              
                CSS
              
              
              
                
                  BOOTSTRAP
                
                
                
                  
                    JAVASCRIPT
                  
                  
                    
                  
                  
                    
                      C PROGRAMMING

Style CSS

.skillbar {
  background: #25b79f;
  min-height: 600px;
}
.skillbar .skills {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.skillbar .skills-bar {
  padding: 25px 30px;
}

.skillbar .skills-bar .bar {
  margin: 25px 0;
}

.skillbar .skills-bar .bar .info span {
  font-size: 1rem;
  font-weight: 500;
}

.skillbar .skills-bar .bar .info {
  margin-bottom: 8px;
  color: #07374a;
}

.skillbar .skills-bar .bar .progress-line {
  position: relative;
  height: 10px;
  width: 550px;
  background: #f0f0f0;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.skillbar .bar .progress-line span {
  position: absolute;
  background: #25b79f;
  height: 100%;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  text-transfrom = uppercase;
  animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.skillbar .progress-line .html {
  width: 80%;
}
.skillbar .progress-line .css {
  width: 70%;
}
.skillbar .progress-line .bootstrap {
  width: 82%;
}
.skillbar .progress-line .javascript {
  width: 62%;
}
.skillbar .progress-line .c {
  width: 90%;
}

.skillbar .bar .progress-line span::before {
  position: absolute;
  content: "";
  height: 0;
  right: 0;
  top: -14px;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-style: #f0f0f0;
  border-top-color: #07374a;
}

.skillbar .bar .progress-line span::after {
  position: absolute;
  right: 0;
  top: -28px;
  color: #f0f0f0;
  font-size: 12px;
  font-weight: 700;
  background: #07374a;
  padding: 1px 8px;
  border-radius: 3px;
}


.skillbar .progress-line .html::after {
  content: "80%";
}
.skillbar .progress-line .css::after {
  content: "70%";
}
.skillbar .progress-line .bootstrap::after {
  content: "82%";
}
.skillbar .progress-line .javascript::after {
  content: "62%";
}
.skillbar .progress-line .c::after {
  content: "90%";
}

/* ////........Media Query........//// */

@media (max-width: 700px) {
    .skillbar .skills{
        width: 80%;
    }

    .skillbar .skills-bar .bar .progress-line{
        width: 100%;
    }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

HTML

CSS

BOOTSTRAP

JAVASCRIPT

C PROGRAMMING

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.

The post Membuat Skill Bar Animation HTML CSS appeared first on Sharing Teknologi.

Membuat Cradle Newton Animation HTML CSS

adminteknologi — Sun, 16 Apr 2023 15:44:05 +0000

Sharing Teknologi – Membuat Cradle Newton Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Cradle Newton Animation HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Cradle Newton Animation Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Cradle Newton 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

Style CSS

.cradlenewton {
	background: #191919
}

.cradlenewton .container{
	border: 1px solid white;
	width: 700px;
	height: 600px;
	border-radius: 100% 100% 0 0;
	margin: auto;
}

.cradlenewton .upperpart{
	width: 250px;
	height: 400px;
	border-top: 6px solid white;
	margin: auto;
	margin-top: 30%;
}


.cradlenewton .line{
	width: 3px;
	height: 200px;
	background: #fff;
	margin: auto;
}
.cradlenewton .ball{
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 100%;
}

.cradlenewton .first,
.cradlenewton .second,
.cradlenewton .third,
.cradlenewton .fourth,
.cradlenewton .fifth{
	width: 50px;
	height: 250px;
	float: left;
}

.cradlenewton .first{
	-webkit-animation: move 3s linear infinite;
}

.cradlenewton .fifth{
	-webkit-animation: moveback 3s linear infinite;
}

@-webkit-keyframes move {
  0% {
    transform: rotate(45deg);
  	transform-origin: top;
  }
	25% {
		transform: rotate(0deg);
  	transform-origin: top;
  }
	50% {
		transform: rotate(0deg);
  	transform-origin: top;
  }
  75% {
    transform: rotate(0deg);
  	transform-origin: top;
  }
	100% {
    transform: rotate(45deg);
  	transform-origin: top;
  }
}

@-webkit-keyframes moveback {
  0% {
    transform: rotate(0deg);
  	transform-origin: top;
  }
	25% {
		transform: rotate(0deg);
  	transform-origin: top;
  }
	50% {
		transform: rotate(-45deg);
  	transform-origin: top;
  }
	75% {
		transform: rotate(0deg);
  	transform-origin: top;
  }
  100% {
    transform: rotate(0deg);
  	transform-origin: top;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Lihat Full Screen

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.

The post Membuat Cradle Newton Animation HTML CSS appeared first on Sharing Teknologi.

Membuat Awesome Hover Animation CSS

adminteknologi — Sat, 01 Apr 2023 13:54:33 +0000

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.

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.

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



    
        
            
                
                    Awesome Image Hover Effects
                

                

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                    
                         
                        
                            
                            
                            
                                
                                
                            
                        
                    

                


            

            
                
                    Awesome Image Overlay Effects
                
                

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                

            

            
                
                    Hover Details Text Effects
                
                

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                Peta Pariwisata dan Media Iklan di Klaten
                                Read More
                            
                        

                    

                

            

            
                
                    Hover Captions Effects
                
                

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                By Visit Klaten.
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                By Visit Klaten.
                                
                            
                        

                    
                    
                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                By Visit Klaten.
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                Visit Klaten
                                By Visit Klaten.
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    
                                        Visit Klaten
                                        By Visit Klaten.
                                    
                                    
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                    
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    
                                        Visit Klaten
                                        By Visit Klaten.
                                    
                                    
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                    
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                    Visit Klaten
                                    By Visit Klaten.
                                
                                
                            
                        

                    

                

            

            
                
                    Images Zoom Effects
                
                

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                    

                         
                        
                            
                            
                            
                            
                                
                                
                            
                        

                    

                

            

            
                
                    Social Buttons effects

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

Images Zoom Effects

Social Buttons 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.

The post Membuat Awesome Hover Animation CSS appeared first on Sharing Teknologi.

Membuat Animasi Teks Berkedip HTML CSS

adminteknologi — Tue, 21 Mar 2023 13:25:56 +0000

Sharing Teknologi – Membuat Animasi Teks Berkedip atau Blinks HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Teks Berkedip HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Teks Berkedip Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Teks Berkedip

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML


 Hai, Saya Visit Klaten

Style CSS

@keyframes blinkcolor {
    30%{
        color: #df4a48;
    }
    70%{
        color: #284454;
    }
    100%{
        color: #389c15;
    }
}

@keyframes moveleft {
    0%{
        transform: translate(0px);
    }
    50%{
        transform: translate(20px);
    }
    100%{
        transform: translate(0px);
    }
}
@keyframes moveright {
    0%{
        transform: translate(0px);
    }
    50%{
        transform: translate(-20px);
    }
    100%{
        transform: translate(0px);
    }
}

.blinkteks .we-install {
    text-align: center;
    font-size: 25px;
}
.blinkteks .we-install a {
    color: #df4a48;
    border-bottom: 1px solid;
    padding: 5px;
	  text-decoration: none;
    position: relative;
    animation-name: blinkcolor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.blinkteks .we-install a:hover {
    animation-play-state: paused;
}
.blinkteks .we-install a:before {
    content: "\f178";
    font-family: fontawesome;
    position: absolute;
    left: -15%;
    animation-name: moveleft;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.blinkteks .we-install a:after {
    content: "\f177";
    font-family: fontawesome;
    position: absolute;
    right: -15%;
    animation-name: moveright;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Hai, Saya Visit Klaten

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.

The post Membuat Animasi Teks Berkedip HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi Sponsor Slider HTML CSS

adminteknologi — Sat, 18 Mar 2023 15:54:18 +0000

Sharing Teknologi – Membuat Animasi Sponsor Slider HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Sponsor Slider HTML CSS Di WordPress.

CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.

CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.

CSS sangat membantu meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau ketukan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.

Dengan HTML, sebuah halaman web dapat dibuat sedemikian rupa sehingga menjadi lebih interaktif dan menarik. Karena HTML menggabungkan berbagai elemen seperti teks, multimedia, link, dan elemen pendukung lainnya menjadi satu kesatuan.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Slider Sponsor Animate Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Sponsor Slider

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.sponsorslider .marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.sponsorslider .marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.sponsorslider .marquee__content {
  animation: scroll 20s linear infinite;
}
.sponsorslider .marquee:hover .marquee__content {
  animation-play-state: paused;
}

.sponsorslider img {
  height: 150px;
  object-fit:cover:
  width:100%
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Lihat Full Screen

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.

The post Membuat Animasi Sponsor Slider HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi Isometric Social Icon CSS

adminteknologi — Tue, 14 Mar 2023 15:46:53 +0000

Sharing Teknologi – Membuat Animasi Isometric Social Icon HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Isometric Social Icon HTML CSS Di WordPress.

CSS adalah singkatan dari Cascading Style Sheets, yang mana ada 3 versi: CSS1, CSS2 dan CSS3. CSS adalah aturan untuk mengelola banyak elemen pada halaman web agar lebih terstruktur dan konsisten.

CSS3 adalah versi terbaru dari CSS yang dapat melakukan banyak hal yang berkaitan dengan desain web. CSS3 memiliki kemampuan untuk membuat animasi warna menjadi animasi 3D pada halaman web.

CSS sangat membantu untuk meningkatkan tampilan dan nuansa halaman web seperti memberikan warna, bayangan kotak, padding, margin, perataan, posisi, dan efek pengetikan atau pengetikan. HTML (HyperText Markup Language) merupakan bahasa markup yang saat ini paling dominan dalam hal pembuatan website.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Ikon Sosial Isometrik Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Isometric Social Icon

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.isometricicon {
	min-height: 400px;
	background: rgb(128, 174, 233);
	background: radial-gradient(
		circle,
		rgba(128, 174, 233, 1) 0%,
		rgba(82, 146, 229, 1) 100%,
		rgba(0, 212, 255, 1) 100%
	);
	display: flex;
	justify-content: center;
	align-items: center;
}

.isometricicon .container {
	height: 50vh;
	width: 50vw;
	/* 	box-shadow: 0 0 15px rgba(128, 174, 233, 1),
		10px 10px 10px rgba(82, 146, 229, 0.5); */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	position: relative;
	perspective: 1000px;
	transition: 0.5s;
}

.isometricicon .twitter {
	background: #d2d6eb;
	width: 7vw;
	height: 7vw;

	font-size: 4vw;
	display: grid;
	place-items: center;

	position: relative;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: skewY(10deg);
	z-index: 9;
	box-shadow: 20px 30px 30px 0 #084fb6;

	animation: 1s animate linear infinite;
}

.isometricicon .twitter::before {
	content: "";
	position: absolute;
	background: #ece9eb;
	transition: 0.5s;

	top: -5px;
	left: 0px;
	width: 100%;
	height: 5px;
	transform-origin: bottom;
	transform: skewX(-45deg);
	border-radius: 10px 0px 0 0;
}

.isometricicon .twitter::after {
	content: "";
	position: absolute;
	background: #b5bbd9;
	transition: 0.5s;

	right: -5px;
	top: -5px;
	width: 5px;
	height: 100%;
	transform-origin: right;
	transform: skewY(-45deg);
	border-radius: 0 0 10px 0;
}

.isometricicon .clip:hover .twitter {
	transform: skewY(10deg) translateY(-40px);
	box-shadow: 10px 5px 20px 0 #084fb6;
	animation: none;
}

.isometricicon .front {
	backface-visibility: hidden;
}

.isometricicon .boxShadow {
	width: 7vw;
	height: 3vw;
	background: #d2d6eb;
	position: relative;
	top: -1px;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: skewY(10deg);
	z-index: 9;
	clip-path: polygon(0 0, 50% 100%, 100% 0);

	box-shadow: 10px 30px 30px 0 #084fb6;
	animation: 1s animate linear infinite;
}

.isometricicon .clip:hover .boxShadow {
	transform: skewY(10deg) translateY(-40px);
	box-shadow: none;
	animation: none;
}

.isometricicon .shadow {
	background: #1887e7;
	width: 12vw;
	height: 12vw;
	border-radius: 50%;
	margin-top: -50px;

	position: relative;
	transform-style: preserve-3d;
	transition: 0.5s;
	transform: rotatex(60deg);
	box-shadow: -2px 5px 1px 1px #2f94fb, 0 3px 0 1px #0263e3;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

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.

The post Membuat Animasi Isometric Social Icon CSS appeared first on Sharing Teknologi.

Membuat Animasi Triple Cube HTML CSS

adminteknologi — Thu, 09 Mar 2023 15:21:08 +0000

Sharing Teknologi – Membuat Animasi Triple Cube HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Triple Cube HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Triple Cube Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Triple Cube

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.triplecube {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000d0d;
  width: 100%;
  min-height: 900px;
}

.triplecube .cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animateD 8s linear infinite;
}

@keyframes animateD {
  0% {
    transform: rotateX(-15deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-15deg) rotateY(-360deg);
  }
}

.triplecube .cube div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.triplecube .cube div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 2px solid #7dff99;
  transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}

.triplecube .topD {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: transparent;
  border: 2px solid #7dff99;
  transform: rotateX(90deg) translateZ(150px);
}

.triplecube .topD::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: transparent;
  border: 2px solid #7dff99;
  transform: translateZ(-400px);
  filter: blur(30px);
  box-shadow: 0 0 120px rgba(125, 255, 153, 0.2),
    0 0 200px rgba(125, 255, 153, 0.4), 0 0 300px rgba(125, 255, 153, 0.6),
    0 0 4000px rgba(125, 255, 153, 0.8), 0 0 500px rgba(125, 255, 153, 1);
}

.triplecube .cube2 {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: animateD2 5s ease-out infinite alternate;
}

@keyframes animateD2 {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(180deg) rotateY(-360deg);
  }
}

.triplecube .cube2 div {
  position: absolute;
  top: 35px;
  left: 0;
  width: 65%;
  height: 65%;
  transform-style: preserve-3d;
}

.triplecube .cube2 div span {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 65%;
  height: 65%;
  background: transparent;
  border: 2px solid #7dff99;
  transform: rotateY(calc(90deg * var(--i))) translateZ(62px);
}

.triplecube .cube3{
  position: absolute;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg);
  animation: animateD3 1s ease-in-out infinite alternate;
}

@keyframes animateD3 {
  0% {
    transform: rotateX(-90deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(90deg) rotateY(45deg);
  }
}

.triplecube .cube3 div {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 15%;
  height: 15%;
  transform-style: preserve-3d;
  
}

.triplecube .cube3 div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #7dff99;
  transform: rotateY(calc(90deg * var(--i))) translateZ(14px);
  box-shadow: 0px 0px 7px #7dff99;
}

.triplecube .top3 {
  position: absolute;
  top: 0;
  left: 0;
  background: #7dff99;
  transform: rotateX(90deg) translateZ(14px);
  box-shadow: 0px 0px 10px #7dff99;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Lihat Full Screen

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.

The post Membuat Animasi Triple Cube HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi Text Circle HTML CSS

adminteknologi — Sun, 05 Mar 2023 14:38:47 +0000

Sharing Teknologi – Membuat Animasi Text Circle HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Text Circle HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Text Circle Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Text Circle

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML


	
		
		
			
				teknologi.visitklaten.com - sharing -

Style CSS

.textcircle {
	background: #012;
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.textcircle .circle {
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 100vmax;
	display: flex;
	align-items: center;
	justify-content: center;
}

.textcircle .logo {
	position: absolute;
	width: 140px;
	height: 140px;
	background: url("https://teknologi.visitklaten.com/wp-content/uploads/2020/09/favicon-tekno.png");
	background-size: cover;
	border-radius: 100vmax;
	background-position: center;
}

.textcircle .text {
	position: absolute;
	width: 100%;
	height: 100%;
	font-family: consolas;
	color: #fff;
	text-shadow: 0 0 10px #0ff;
	font-size: 17px;
	animation: textRotation 8s linear infinite;
}

@keyframes textRotation {
	to {
		transform: rotate(360deg);
	}
}

.textcircle .text span {
	position: absolute;
	left: 50%;
	font-size: 1.2em;
	transform-origin: 0 100px;
}

JavaScript

const text = document.querySelector(".textcircle .text");
text.innerHTML = text.innerText
	.split("")
	.map(
		(char, i) => `${char}`
	)
	.join("");

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

teknologi.visitklaten.com - sharing -

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.

The post Membuat Animasi Text Circle HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi Hologram Bumi HTML CSS

adminteknologi — Thu, 02 Mar 2023 14:47:08 +0000

Sharing Teknologi – Membuat Animasi Hologram Bumi HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Hologram Bumi HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Hologram Bumi Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Hologram Bumi

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.hologrambumi {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
	background: rgb(2, 0, 34);
}

.hologrambumi #earth {
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: transparent url("https://teknologi.visitklaten.com/wp-content/uploads/2022/10/bumi.webp");
	background-size: cover;
	box-shadow: inset 0px -20px 50px 10px #00ffff80,
        0px 0px 30px 6px #00ffff70;
	transform-style: preserve-3d;
	transform: rotate(20deg);
	animation: rotate 15s linear infinite;
}

@keyframes rotate {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 530px 0;
	}
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

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.

The post Membuat Animasi Hologram Bumi HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi Ethereum HTML CSS

adminteknologi — Sat, 25 Feb 2023 13:48:07 +0000

Sharing Teknologi – Membuat Animasi Ethereum HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi Ethereum HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi Ethereum Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi Ethereum

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.ethereumanimasi {
  min-height: 700px;
  margin: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(to bottom right, #000000, #00222a);
  background-repeat: no-repeat;
}

.ethereumanimasi .frame {
  position: relative;
  display: flex;
  justify-content: center;
  
   animation: move-frame 2s linear infinite alternate;
}

.ethereumanimasi .poligon1 {
  width: 296px;
  height: 420px;
  position: relative;
  background-repeat: no-repeat;
  
  clip-path: polygon(60% 0, 60% 50%, 40% 53%, 0 60%);
  background: linear-gradient(-30.9deg, #000000 48.73%, #84daff 79.31%);
  
  animation: move-left 3200ms ease-in-out infinite alternate;
}

.ethereumanimasi .poligon2 {
  left: 59px;
  width: 296px;
  height: 420px;
  position: absolute;
  
  transform: scale(-1, 1);
  background-repeat: no-repeat;  
  background: linear-gradient(-18.9deg, #000000 45.73%, #1d3d4b 75.31%);
  clip-path: polygon(60% 0, 60% 50%, 40% 53%, 0 60%);
  -webkit-transform: scale(-1, 1);
 
  animation: move-right 3200ms ease-in-out infinite alternate;
}

.ethereumanimasi .poligon3 {
  left: 0;
  top: 50%;
  width: 355px;
  height: 280px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(20deg, #1d3d4b 55.7%, #000000 88.3%);
  
  
  clip-path: polygon(50% 0, 50% 0, 50% 50%, 0 14%);
  -webkit-transform: scale(-1, -1);
  transform: scale(1, 1);
  justify-content: center;
  display: flex;
  
  animation: move-left2 3s ease-in-out infinite alternate;
}

.ethereumanimasi .poligon4 {
  top: 50%;
  left: 4px;
  width: 345px;
  height: 280px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(20deg, #1d3d4b 55.7%, #000000 88.3%);
  
  clip-path: polygon(50% 0, 50% 0, 50% 50%, 0 14%);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, 1);
  justify-content: center;
  display: flex;
  
  animation: move-right2 3s ease-in-out infinite alternate;
}

.ethereumanimasi .poligon5 {
  left: 5px;
  top: 75%;
  width: 345px;
  height: 200px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(-195.7deg, #9ce1ff 20.7%, #020b0f 55%);
  
  
  clip-path: polygon(50% 25%, 50% 0, 50% 60%, 0 0);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, 1) translateZ(30px);
}

.ethereumanimasi .poligon6 {
  top: 75%;
  left: 6px;
  width: 345px;
  height: 200px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(-195.7deg, #9ce1ff 20.7%, #020b0f 55%);
  
  
  clip-path: polygon(50% 25%, 50% 0, 50% 60%, 0 0);
  -webkit-transform: scale(-1, -1);
  transform: scale(1, 1) translateZ(30px);
}

.ethereumanimasi .poligon7 {
  top: 80%;
  left: 5px;
  width: 345px;
  height: 250px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(to right, #1D3D4B 30.2%, #000000 60%);
  
  
  clip-path: polygon(50% 25%, 48% 25%, 50% 60%, 0 0);
  -webkit-transform: scale(-1, -1);
  transform: scale(1, 1) rotate(5deg);
}

.ethereumanimasi .poligon8 {
  left: 15px;
  top: 80%;
  width: 345px;
  height: 250px;
  position: absolute;
  
  background-repeat: no-repeat;
  background: linear-gradient(to left, #1D3D4B 30.2%, #000000 90%);
  
  
  clip-path: polygon(55% 25%, 52% 23%, 55% 60%, 0 0);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, 1) rotate(5deg);
}

@keyframes move-frame {
  0% {
    transform: translateY(20px)
  }
}

@keyframes move-left {
  0%, 30% {
    top: 100vh;
    left: -100vw
  }
  
  60%, 100% {
    top: 0;
    left: 0
  }
}

@keyframes move-left2 {
  0%, 30% {
    top: -200px;
    left: -100vw
  }
  
  60%, 100% {
    top: 210px;
    left: 0
  }
}

@keyframes move-right {
  0%, 30% {
    top: 100vh;
    left: 120vw
  }
  
  60%, 100% {
    top: 0;
    left: 59px
  }
}

@keyframes move-right2 {
  0%, 30% {
    top: -200px;
    left: 120vw
  }
  
  60%, 100% {
    top: 210px;
    left: 4px
  }
}

.ethereumanimasi .circle {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: #22ee33;
  filter: blur(170px);
  animation: turn-the-light-on 3200ms ease-in-out infinite alternate;
}

@keyframes turn-the-light-on {
  0% {
    background: transparent;
  }
  50%{
    background: #22ee3340;
  }
  100% {
    background: #22ee33;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

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.

The post Membuat Animasi Ethereum HTML CSS appeared first on Sharing Teknologi.

Membuat Animasi DNA HTML CSS

adminteknologi — Wed, 22 Feb 2023 01:25:11 +0000

Sharing Teknologi – Membuat Animasi DNA HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Animasi DNA HTML CSS Di WordPress.

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.

Di kesempatan kali ini, kami akan berbagi tutorial Membuat Animasi DNA Menggunakan HTML CSS.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Animasi DNA

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan.

HTML

Style CSS

.dnaanimasi {
	background: #000d0d;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 500px;
}

.dnaanimasi .material {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
	transform: rotateZ(-20deg);
}

@keyframes rotate {
	0% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(360deg);
	}
}

.dnaanimasi .dna {/*line*/
	position: relative;
	width: 1px;
	height: 100px;
	border: 1px dotted #e7e7e7;
	box-shadow: 0 0 15px #e7e7e7;
	background: transparent;
	margin: 0px 10px;
	animation: rotate 3s linear infinite;
}
.dnaanimasi .dna::before {/*top dot*/
	content: '';
	position: absolute;
	top: -2px;
	left: -5px;
	width: 10px;
	height: 10px;
	background: #1cffb3;
	border-radius: 50%;
	box-shadow: 0 0 15px #1cffb3;
}
.dnaanimasi .dna::after {/*bottom dot*/
	content: '';
	position: absolute;
	bottom: -2px;
	left: -5px;
	width: 10px;
	height: 10px;
	background: #0ff;
	border-radius: 50%;
	box-shadow: 0 0 12px #0ff;
}

.dnaanimasi .dna:nth-child(1) {
  animation-delay: -0.15s;
}
.dnaanimasi .dna:nth-child(2) {
  animation-delay: -0.3s;
}
.dnaanimasi .dna:nth-child(3) {
  animation-delay: -0.45s;
}
.dnaanimasi .dna:nth-child(4) {
  animation-delay: -0.6s;
}
.dnaanimasi .dna:nth-child(5) {
  animation-delay: -0.75s;
}
.dnaanimasi .dna:nth-child(6) {
  animation-delay: -0.9s;
}
.dnaanimasi .dna:nth-child(7) {
  animation-delay: -1.05s;
}
.dnaanimasi .dna:nth-child(8) {
  animation-delay: -1.2s;
}
.dnaanimasi .dna:nth-child(9) {
  animation-delay: -1.35s;
}
.dnaanimasi .dna:nth-child(10) {
  animation-delay: -1.5s;
}
.dnaanimasi .dna:nth-child(11) {
  animation-delay: -1.65s;
}
.dnaanimasi .dna:nth-child(12) {
  animation-delay: -1.8s;
}
.dnaanimasi .dna:nth-child(13) {
  animation-delay: -1.95s;
}
.dnaanimasi .dna:nth-child(14) {
  animation-delay: -2.1s;
}
.dnaanimasi .dna:nth-child(15) {
  animation-delay: -2.25s;
}
.dnaanimasi .dna:nth-child(16) {
  animation-delay: -2.3s;
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

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.

The post Membuat Animasi DNA HTML CSS appeared first on Sharing Teknologi.