/* -------------------------------- 01.Custom Icons 02.Primary Styles 03.Header Section 04.Slider Section 05.One Page Sections a.Corporate Section b.Team Section c.Vehicles Section d.Services Section e.Projects Section f.Quote Section (CTA) g.Refecences Section h.Blog Section i.Contact Section 06.Footer Section 07.Blog Styles -------------------------------- */ @import url("https://fonts.googleapis.com/css?family=Oswald:300,400,700|Raleway:100,200,300,400,500,600,700,800,900|Ubuntu:300,400,500,700&subset=latin-ext"); @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-ms-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-ms-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -ms-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -ms-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -ms-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -ms-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -ms-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); -ms-transform: skewX(0.390625deg) skewY(0.390625deg); -o-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -ms-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -o-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-moz-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -ms-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -ms-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -ms-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -ms-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -ms-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); -ms-transform: skewX(0.390625deg) skewY(0.390625deg); -o-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -ms-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -o-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-ms-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -ms-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -ms-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -ms-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -ms-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -ms-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); -ms-transform: skewX(0.390625deg) skewY(0.390625deg); -o-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -ms-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -o-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-o-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -ms-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -ms-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -ms-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -ms-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -ms-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); -ms-transform: skewX(0.390625deg) skewY(0.390625deg); -o-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -ms-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -o-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -ms-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -ms-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -ms-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -ms-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -ms-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); -moz-transform: skewX(0.390625deg) skewY(0.390625deg); -ms-transform: skewX(0.390625deg) skewY(0.390625deg); -o-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -moz-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -ms-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); -o-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-ms-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-moz-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-ms-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-o-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-ms-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-ms-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-ms-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-ms-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-ms-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-ms-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-ms-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-ms-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-ms-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-ms-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-ms-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-ms-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-ms-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-ms-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-ms-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-ms-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-ms-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-ms-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -ms-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -ms-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } @-ms-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -ms-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -ms-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -ms-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -ms-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } @-webkit-keyframes flipInX { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { 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); } } @-moz-keyframes flipInX { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { 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); } } @-ms-keyframes flipInX { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { 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); } } @-o-keyframes flipInX { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { 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); } } @keyframes flipInX { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { 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); } } @-webkit-keyframes flipInY { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { 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); } } @-moz-keyframes flipInY { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { 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); } } @-ms-keyframes flipInY { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { 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); } } @-o-keyframes flipInY { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { 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); } } @keyframes flipInY { 0% { 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); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { 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); } } @-webkit-keyframes flipOutX { 0% { 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); } 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); } } @-moz-keyframes flipOutX { 0% { 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); } 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); } } @-ms-keyframes flipOutX { 0% { 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); } 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); } } @-o-keyframes flipOutX { 0% { 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); } 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); } } @keyframes flipOutX { 0% { 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); } 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-keyframes flipOutY { 0% { 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); } 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); } } @-moz-keyframes flipOutY { 0% { 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); } 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); } } @-ms-keyframes flipOutY { 0% { 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); } 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); } } @-o-keyframes flipOutY { 0% { 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); } 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); } } @keyframes flipOutY { 0% { 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); } 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-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-moz-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-ms-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-o-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-moz-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-ms-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-o-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-webkit-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-moz-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-ms-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-o-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-ms-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-ms-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-ms-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-ms-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-moz-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-ms-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-o-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-ms-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-ms-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-ms-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-ms-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-ms-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-ms-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-ms-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-ms-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes hinge { 0% { animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-moz-keyframes hinge { 0% { animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-ms-keyframes hinge { 0% { animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-o-keyframes hinge { 0% { animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @keyframes hinge { 0% { animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-ms-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-ms-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-ms-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-moz-keyframes zoomInDown { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-ms-keyframes zoomInDown { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-o-keyframes zoomInDown { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @keyframes zoomInDown { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-webkit-keyframes zoomInLeft { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-moz-keyframes zoomInLeft { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-ms-keyframes zoomInLeft { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-o-keyframes zoomInLeft { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @keyframes zoomInLeft { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-webkit-keyframes zoomInRight { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-moz-keyframes zoomInRight { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-ms-keyframes zoomInRight { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-o-keyframes zoomInRight { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @keyframes zoomInRight { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-webkit-keyframes zoomInUp { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-moz-keyframes zoomInUp { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-ms-keyframes zoomInUp { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-o-keyframes zoomInUp { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @keyframes zoomInUp { 0% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-ms-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes zoomOutDown { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-moz-keyframes zoomOutDown { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-ms-keyframes zoomOutDown { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-o-keyframes zoomOutDown { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -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-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-ms-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-ms-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-moz-keyframes zoomOutUp { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-ms-keyframes zoomOutUp { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-o-keyframes zoomOutUp { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutUp { 40% { animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } /* -------------------------------- 01.Custom Icons -------------------------------- */ [class^="ico-"] { display: inline-block; vertical-align: middle; } .ico-buldozer { background: url(../images/icons/buldozer.png) 50% no-repeat; width: 72px; height: 38px; } .ico-car { background: url(../images/icons/car.png) 50% no-repeat; width: 60px; height: 28px; } .ico-concrete-truck { background: url(../images/icons/concrete-truck.png) 50% no-repeat; width: 71px; height: 48px; } .ico-excavator { background: url(../images/icons/excavator.png) 50% no-repeat; width: 71px; height: 30px; } .ico-roller-machine { background: url(../images/icons/roller-machine.png) 50% no-repeat; width: 71px; height: 36px; } .ico-tower-crane { background: url(../images/icons/tower-crane.png) 50% no-repeat; width: 65px; height: 71px; } /* -------------------------------- 02.Primary Styles -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 62.5%; height: 100%; } .wrapper-content { overflow: hidden; } body { position: relative; font-size: 1.6rem; font-family: "Ubuntu", sans-serif; background-color: white; color: #333333; line-height: 24px; height: 100%; padding: 0px !important; } body.admin-bar header { top: 32px !important; } @media screen and (max-width: 767px) { body.admin-bar header { top: 46px; } } body.page-template-consta-builder main { padding: 0px; } body.page-template-kc-builder header { background: #1f2528; border-bottom: 1px solid #1f2528; min-height: 100px; } @media only screen and (max-width: 480px) { body.page-template-kc-builder header { min-height: 80px; } } body.page-template-kc-builder header .logo, body.page-template-kc-builder header .logo-mobile { opacity: 0; visibility: hidden; } body.page-template-kc-builder header .logo-white { opacity: 1; visibility: visible; } @media only screen and (max-width: 480px) { body.page-template-kc-builder header .logo-white { display: none; } } body.page-template-kc-builder header .lang-trigger { top: 35px; color: white; } @media only screen and (max-width: 480px) { body.page-template-kc-builder header .lang-trigger { top: 25px; } } body.page-template-kc-builder header .nav-trigger { top: 25px; } @media only screen and (max-width: 480px) { body.page-template-kc-builder header .nav-trigger { top: 15px; } } body.page-template-kc-builder header .nav-trigger span { background: white; } body.page-template-kc-builder header .nav-trigger span::before, body.page-template-kc-builder header .nav-trigger span::after { background: white; } body.page-template-kc-builder.nav-open header .nav-trigger { top: 40px; } body.page-template-kc-builder.nav-open header .nav-trigger span { background: transparent; } body.page-template-kc-builder main { min-height: 400px; margin-top: 120px; } a { font-family: "Ubuntu", sans-serif; font-weight: 400; color: #1f2528; text-decoration: none !important; margin: 0px; padding: 0px; outline: none; } h1, h2, h3, h4, h5, h6 { font-family: "Ubuntu", sans-serif; font-weight: 400; margin: 0px; padding: 0px; } h1 { font-size: 3.6rem; } h2 { font-size: 3.2rem; } h3 { font-size: 2.8rem; } h4 { font-size: 2.4rem; } h5 { font-size: 2rem; } h6 { font-size: 1.6rem; } p { font-family: "Ubuntu", sans-serif; font-size: 1.4rem; line-height: 24px; color: #333333; margin: 0px; padding: 0px; } p.no-comments { margin-bottom: 15px; } ul { margin: 0px; padding: 0px; list-style-type: none; } input:focus, textarea:focus { outline: none !important; } .searchform { margin-top: 30px; } .searchform input { width: 100%; padding: 5px 15px; } form .form-group .form-control { border-color: black; box-shadow: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; font-size: 1.2rem; } form .form-group .form-control::-webkit-input-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } form .form-group .form-control::-moz-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } form .form-group .form-control:-moz-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } form .form-group .form-control:-ms-input-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } form .form-group .form-control:focus::-webkit-input-placeholder { color: transparent; } form .form-group .form-control:focus::-moz-placeholder { color: transparent; } form .form-group .form-control:focus:-moz-placeholder { color: transparent; } form .form-group .form-control:focus:-ms-input-placeholder { color: transparent; } form .form-group textarea { height: 100px; } blockquote { border-left-color: #ffb400; margin: 15px 0 15px 25px; } blockquote p { color: #1f2528; font-style: italic; margin-bottom: 5px !important; } blockquote em { font-size: 1.4rem; line-height: 24px; font-weight: 700; } table { margin: 15px 0; } table th { min-width: 100px; } table tr { line-height: 24px; } table td { padding: 0 20px 0 0; } table a { text-decoration: none; } img.alignleft, figure.alignleft { float: left; margin: 0 15px 15px 0; } img.alignleft.size-thumbnail, figure.alignleft.size-thumbnail { float: none; } img.alignright, figure.alignright { float: right; margin: 0 0 15px 15px; } img.aligncenter, figure.aligncenter { float: none; display: block; margin: 0 auto; } .wp-caption, .wp-caption-text, .sticky, .gallery-caption, .bypostauthor { display: inherit; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; } .text-white { color: white !important; } .text-white a { color: white !important; } .search-message { position: relative; display: block; padding: 20px; background: #1f2528; color: white; } .search-message:after { position: absolute; font-family: 'FontAwesome'; content: '\f071'; color: white; font-size: 2rem; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 15px; } .wpcf7-validation-errors { color: white; } .setuplangmenu { color: white; } .setuplangmenu:hover { color: white; } /* -------------------------------- Animations -------------------------------- */ .animated { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -ms-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -ms-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -ms-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -ms-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -ms-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -ms-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -ms-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -ms-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; -ms-animation-iteration-count: 1; -o-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } /* -------------------------------- Section Title -------------------------------- */ .section-title { text-align: center; } .section-title .vertical-line { position: relative; display: block; width: 1px; height: 50px; background: #1f2528; opacity: .2 !important; margin: 0px auto; } .section-title .vertical-line.bottom:after { position: absolute; top: 50px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); content: ''; display: block; width: 20px; height: 1px; background: #1f2528; opacity: .4 !important; } .section-title h3 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.5px; color: #1f2528; text-transform: uppercase; margin-bottom: 20px; line-height: 20px; } .section-title h3:before { display: block; font-family: 'FontAwesome'; content: '\f107'; font-size: 2.6rem; color: #1f2528; opacity: .2; margin-bottom: 10px; } /* -------------------------------- Modal Fullscreen -------------------------------- */ .modal-fullscreen { background: #1f2528; } .modal-fullscreen .modal-dialog { margin: 0px auto; width: 100%; } @media only screen and (min-width: 768px) { .modal-fullscreen .modal-dialog { width: 750px; } } @media only screen and (min-width: 992px) { .modal-fullscreen .modal-dialog { width: 970px; } } @media only screen and (min-width: 1200px) { .modal-fullscreen .modal-dialog { width: 1170px; } } .modal-fullscreen .modal-dialog .modal-content { background: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; padding: 60px 0 80px 0; } .modal-fullscreen .modal-dialog .modal-content .modal-header { border-bottom: 0px; padding: 0 15px 15px 15px; } @media only screen and (min-width: 1200px) { .modal-fullscreen .modal-dialog .modal-content .modal-header { padding: 0 0 15px 0; } } .modal-fullscreen .modal-dialog .modal-content .modal-header .modal-logo { width: 100px; display: block; margin: 30px auto; } .modal-fullscreen .modal-dialog .modal-content .modal-header .modal-title { color: white; font-size: 2.8rem; font-weight: 300; letter-spacing: -0.5px; } .modal-fullscreen .modal-dialog .modal-content .modal-header hr { float: left; width: 80px; height: 5px; margin: 10px 0; border-top: 0px; background: #ffb400; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } .modal-fullscreen .modal-dialog .modal-content .modal-body { padding: 0 15px; } @media only screen and (min-width: 1200px) { .modal-fullscreen .modal-dialog .modal-content .modal-body { padding: 0px; } } .modal-fullscreen .modal-dialog .modal-content .modal-footer { margin-top: 30px; padding: 30px 15px; } @media only screen and (max-width: 768px) { .modal-fullscreen .modal-dialog .modal-content .modal-footer { padding: 30px; } } @media only screen and (min-width: 1200px) { .modal-fullscreen .modal-dialog .modal-content .modal-footer { padding: 30px 0px 0px 0px; } } .modal-fullscreen .modal-dialog .modal-content .modal-footer .btn-prev, .modal-fullscreen .modal-dialog .modal-content .modal-footer .btn-next { width: 200px; height: 50px; line-height: 40px; text-align: center; color: white; font-size: 1.6rem; font-weight: 700; border: 2px solid white; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; background: transparent; vertical-align: middle; outline: none; } @media only screen and (max-width: 480px) { .modal-fullscreen .modal-dialog .modal-content .modal-footer .btn-prev, .modal-fullscreen .modal-dialog .modal-content .modal-footer .btn-next { position: relative; display: block; left: 50%; margin-left: -100px; margin-bottom: 15px; } } .modal-fullscreen .modal-dialog .modal-content .modal-footer .btn-prev { float: left; } .modal-fullscreen .modal-dialog.service-modal .modal-content .modal-body figure { position: relative; float: left; width: 400px; height: 225px; margin: 0 15px 5px 0; border: 5px solid white; overflow: hidden; } @media only screen and (max-width: 480px) { .modal-fullscreen .modal-dialog.service-modal .modal-content .modal-body figure { width: 100%; margin: 0 15px 25px 0; } } .modal-fullscreen .modal-dialog.service-modal .modal-content .modal-body figure img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .modal-fullscreen .modal-dialog.service-modal .modal-content .modal-body .text-content p { font-size: 1.4rem; color: white; line-height: 24px; margin-bottom: 10px; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-header .location { text-align: right; font-size: 1.8rem; color: #ffb400; } @media only screen and (max-width: 768px) { .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .col-md-8 { margin-bottom: 30px; } } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-inner { overflow: hidden; border: 3px solid white; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-control { text-shadow: none; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-control.right, .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-control.left { width: 5%; position: absolute; background-image: none; background: rgba(255, 255, 255, 0.2); top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 2.8rem; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-control.right:hover, .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .carousel .carousel-control.left:hover { background: rgba(255, 255, 255, 0.4); } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .project-features ul li { margin-bottom: 25px; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .project-features ul li:last-child { margin-bottom: 0px; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .project-features ul li h2 { font-size: 1.8rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #ffb400; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .project-features ul li h2 i { margin-right: 5px; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-body .project-features ul li p { font-size: 1.4rem; color: white; font-weight: 300; } .modal-fullscreen .modal-dialog.project-modal .modal-content .modal-footer { border-top: 0px; } .modal-fullscreen .close { float: none; position: absolute; top: 30px; right: 30px; color: white; opacity: 1; z-index: 100; } .modal-backdrop.modal-backdrop-fullscreen { background: #1f2528; } .modal-backdrop.modal-backdrop-fullscreen.in { opacity: .97; filter: alpha(opacity=97); } /* -------------------------------- Other Classes -------------------------------- */ .hidden { visibility: hidden; width: 0px !important; height: 0px !important; margin: 0px !important; padding: 0px !important; } .normal-btn, .submit-btn, .wpcf7-submit, main .comment-section .comment-respond .form-submit .submit { display: block; width: 156px; height: 40px; color: white; font-size: 1.4rem; text-transform: uppercase; font-weight: 300; background: #ffb400; text-align: center; line-height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; outline: none; } .normal-btn:hover, .submit-btn:hover, .wpcf7-submit:hover, main .comment-section .comment-respond .form-submit .submit:hover { background: #1f2528; color: white; } .submit-btn, .wpcf7-submit { line-height: 30px; margin-top: 15px; border: 0px; } .submit-btn:hover, .wpcf7-submit:hover { background: #626669; } .back-to-top { position: fixed; display: block; width: 60px; height: 60px; background: #ffc333; bottom: 45px; right: 30px; opacity: 0; z-index: 100; visibility: hidden; -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-transition: opacity 0.5s, visibility 0.5s; -moz-transition: opacity 0.5s, visibility 0.5s; transition: opacity 0.5s, visibility 0.5s; } .back-to-top i { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 2.4rem; color: white; } @media only screen and (max-width: 480px) { .back-to-top i { font-size: 2rem; } } .back-to-top.is-visible { opacity: 1; visibility: visible; } .back-to-top.fade-out { opacity: .8; } .back-to-top:hover { opacity: 1; } /* -------------------------------- 03.Header Section -------------------------------- */ header { position: fixed; top: 0px; left: 0px; width: 100%; min-height: 120px; z-index: 100; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.4); } @media only screen and (max-width: 480px) { header { background: transparent; border: 0px; } } header .logo-mobile { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: none; } @media only screen and (max-width: 768px) { header .logo-mobile { display: block; } } @media only screen and (max-width: 480px) { header .logo-mobile { margin-top: 40px; } } header .logo { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 1; visibility: visible; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; color: white; } @media only screen and (max-width: 480px) { header .logo { margin-top: 40px; } } @media only screen and (max-width: 768px) { header .logo { display: none; } } @media (min-height: 400px) and (max-height: 500px) { header .logo img { width: 60px; margin-top: -40px; } } header .logo-white { width: 92px; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0; visibility: hidden; color: white; text-align: center; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } header .logo-white img { max-width: 100%; } header.scrolling, header.consta-slider-off { background: #1f2528; border-bottom: 1px solid #1f2528; min-height: 100px; } @media only screen and (max-width: 480px) { header.scrolling, header.consta-slider-off { min-height: 80px; } } header.scrolling .logo, header.scrolling .logo-mobile, header.consta-slider-off .logo, header.consta-slider-off .logo-mobile { opacity: 0; visibility: hidden; } header.scrolling .logo-white, header.consta-slider-off .logo-white { opacity: 1; visibility: visible; } @media only screen and (max-width: 480px) { header.scrolling .logo-white, header.consta-slider-off .logo-white { display: none; } } header.scrolling .lang-trigger, header.consta-slider-off .lang-trigger { top: 35px; color: white; } @media only screen and (max-width: 480px) { header.scrolling .lang-trigger, header.consta-slider-off .lang-trigger { top: 25px; } } header.scrolling .nav-trigger, header.consta-slider-off .nav-trigger { top: 25px; } @media only screen and (max-width: 480px) { header.scrolling .nav-trigger, header.consta-slider-off .nav-trigger { top: 15px; } } header.scrolling .nav-trigger span, header.consta-slider-off .nav-trigger span { background: white; } header.scrolling .nav-trigger span::before, header.scrolling .nav-trigger span::after, header.consta-slider-off .nav-trigger span::before, header.consta-slider-off .nav-trigger span::after { background: white; } header.is-hidden { -webkit-transform: translateY(-150%); -moz-transform: translateY(-150%); -ms-transform: translateY(-150%); -o-transform: translateY(-150%); transform: translateY(-150%); } .nav-open header.scrolling .nav-trigger, .nav-open header.consta-slider-off .nav-trigger { top: 40px; } .nav-open header.scrolling .nav-trigger span, .nav-open header.consta-slider-off .nav-trigger span { background: transparent; } .lang-trigger { position: absolute; display: block; top: 50px; left: 30px; font-family: "Raleway", sans-serif; text-transform: uppercase; font-size: 1.4rem; font-weight: 700; border: 0px; background: transparent; color: white; outline: none; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; /* this is the right arrow */ } @media only screen and (max-width: 480px) { .lang-trigger { top: 25px; } } .lang-trigger:after { font-family: 'FontAwesome'; content: '\f107'; position: absolute; top: 0px; right: -10px; font-size: 1.6rem; margin-left: 5px; } @media only screen and (max-width: 768px) { .lang-trigger:after { right: auto; left: 140px; } } .langs { position: absolute; width: 232px; padding: 30px 0; top: 100px; left: 30px; background: #1f2528 url(../images/other/lang-world.png) top left no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0; visibility: hidden; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); z-index: 120; } @media only screen and (max-width: 480px) { .langs { top: 75px; } } .langs:before { position: absolute; content: ''; top: -10px; left: 50%; margin-left: -10px; width: 20px; height: 20px; background: #1f2528; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .langs li { line-height: 28px; text-align: center; } .langs li a { font-family: "Raleway", sans-serif; font-size: 1.6rem; font-weight: 700; color: white; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } .langs li a:hover { color: #ffb400; } .lang-open .langs { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .lang-open .overlay-lang { opacity: .6; visibility: visible; } .consta-overlay, .overlay-lang { position: fixed; top: 0; left: 0; z-index: 105; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; cursor: pointer; -webkit-transition: opacity 0.5s, visibility 0.5s; -moz-transition: opacity 0.5s, visibility 0.5s; transition: opacity 0.5s, visibility 0.5s; } .nav-container { position: fixed; top: 0; right: 0; height: 100%; width: 90%; max-width: 400px; background: #1f2528; overflow: auto; z-index: 110; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); -moz-transition: -moz-transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); transition: transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); } @media (max-width: 600px) { .nav-container { max-width: 320px; } } .nav-container .nav-container-top { padding: 130px 0 80px 0; } @media only screen and (max-width: 480px) { .nav-container .nav-container-top { padding-top: 90px; } } .nav-container .nav-container-top .menu li { margin-bottom: 20px; } .nav-container .nav-container-top .menu li:last-child { margin-bottom: 0px; } .nav-container .nav-container-top .menu li a { display: block; color: white; padding-left: 30px; font-size: 1.6rem; font-weight: 300; opacity: .5; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .nav-container .nav-container-top .menu li a.active { opacity: 1; } .nav-container .nav-container-top .menu li:hover a { padding-left: 40px; } .nav-container .nav-container-top .menu li:hover a, .nav-container .nav-container-top .menu li.active a { opacity: 1; } .nav-container .nav-container-top .menu li.menu-item-has-children > a { /* this is the right arrow */ } .nav-container .nav-container-top .menu li.menu-item-has-children > a::after { font-family: 'FontAwesome'; content: '\f105'; display: inline-block; font-size: 1.6rem; margin-left: 10px; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu { padding-left: 15px; display: none; margin-top: 10px; } .nav-container .nav-container-top .menu li.menu-item-has-children ul li { margin-bottom: 10px; } .nav-container .nav-container-top .menu li.menu-item-has-children ul li a { color: #ffb400; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; transition: opacity 0.35s; opacity: 1; } .nav-container .nav-container-top .menu li.menu-item-has-children ul li:hover a { opacity: .7; } .nav-container .nav-container-bottom { position: absolute; right: 0px; bottom: 0px; width: 100%; background: rgba(255, 255, 255, 0.03); padding: 30px 0; } @media only screen and (max-width: 480px) { .nav-container .nav-container-bottom { padding: 20px 0; } } @media (min-height: 400px) and (max-height: 500px) { .nav-container .nav-container-bottom { display: none; } } .nav-container .nav-container-bottom .company-profile li { margin-bottom: 20px; } @media only screen and (max-width: 480px) { .nav-container .nav-container-bottom .company-profile li { margin-bottom: 10px; } } .nav-container .nav-container-bottom .company-profile li:last-child { margin-bottom: 0px; } .nav-container .nav-container-bottom .company-profile li a { display: block; color: #ffb400; padding-left: 30px; font-size: 1.4rem; font-weight: 300; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } @media only screen and (max-width: 480px) { .nav-container .nav-container-bottom .company-profile li a { font-size: 1.2rem; } } .nav-container .nav-container-bottom .company-profile li a i { margin-right: 5px; } .nav-trigger { position: absolute; width: 44px; height: 44px; top: 40px; right: 30px; overflow: hidden; color: transparent; white-space: nowrap; text-indent: 100%; z-index: 115; outline: none !important; -webkit-transition: background, 0.5s; -moz-transition: background, 0.5s; transition: background, 0.5s; } @media only screen and (max-width: 480px) { .nav-trigger { top: 15px; } } .nav-trigger:hover span { width: 32px; } .nav-trigger:hover span::before, .nav-trigger:hover span::after { width: 32px; } .nav-trigger span { position: absolute; height: 4px; width: 18px; top: 0px; right: 0px; background: white; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .nav-trigger span:before, .nav-trigger span:after { -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background: white; } .nav-trigger span::before { position: absolute; height: 4px; width: 32px; content: " "; top: 0px; right: 0px; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .nav-trigger span::after { position: absolute; height: 4px; width: 26px; content: " "; top: 0px; right: 0px; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .nav-trigger span::before { -webkit-transform: translateY(-8px); -moz-transform: translateY(-8px); -ms-transform: translateY(-8px); -o-transform: translateY(-8px); transform: translateY(-8px); } .nav-trigger span::after { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -ms-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); } .nav-open .consta-overlay { opacity: .6; visibility: visible; } .nav-open .nav-container { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .nav-open .nav-trigger span { width: 32px; background: transparent; } .nav-open .nav-trigger span:before, .nav-open .nav-trigger span:after { width: 32px; background: white; } .nav-open .nav-trigger span:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-open .nav-trigger span:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* -------------------------------- 04.Slider Section -------------------------------- */ .section-slider { height: 100vh; overflow: hidden; } .section-slider #owl-consta .owl-nav .owl-prev, .section-slider #owl-consta .owl-nav .owl-next { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background: rgba(255, 255, 255, 0.7); width: 50px; height: 50px; -webkit-transition: all, 0.35s; -moz-transition: all, 0.35s; transition: all, 0.35s; } .section-slider #owl-consta .owl-nav .owl-prev:before, .section-slider #owl-consta .owl-nav .owl-next:before { position: absolute; font-family: 'FontAwesome'; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 2.4rem; } .section-slider #owl-consta .owl-nav .owl-prev:hover, .section-slider #owl-consta .owl-nav .owl-next:hover { background: #ffb400; color: white; } .section-slider #owl-consta .owl-nav .owl-prev { left: 10px; } .section-slider #owl-consta .owl-nav .owl-prev:before { content: '\f104'; } .section-slider #owl-consta .owl-nav .owl-next { right: 10px; } .section-slider #owl-consta .owl-nav .owl-next:before { content: '\f105'; } .section-slider #owl-consta .item { display: block; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; } .section-slider #owl-consta .item:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(33, 41, 44, 0.3); } .section-slider #owl-consta .item.style-two .container { position: relative; height: 100%; } .section-slider #owl-consta .item.style-two .container .caption { position: relative; left: 35px; -webkit-transform: translateX(0px) translateY(-50%); -moz-transform: translateX(0px) translateY(-50%); -ms-transform: translateX(0px) translateY(-50%); -o-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); height: 409px; padding-left: 40px; } @media (max-width: 767px) { .section-slider #owl-consta .item.style-two .container .caption { left: 0px; padding-left: 0px; } } @media (max-width: 600px) { .section-slider #owl-consta .item.style-two .container .caption { background: none !important; } } .section-slider #owl-consta .item.style-two .container .caption .frame { border: 0px; } @media only screen and (min-width: 768px) { .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h1, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h2, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h3, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h4, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h5, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h6, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text p, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text span { text-align: left; color: white; } @media (max-width: 767px) { .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h1, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h2, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h3, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h4, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h5, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h6, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text p, .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text span { text-align: center; } } .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h1 { font-size: 7rem; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item.style-two .container .caption .frame .caption-text h1 { font-size: 4rem; } } @media only screen and (min-width: 992px) { .section-slider #owl-consta .item.style-two .container .caption .frame .buttons { margin-left: -100px; } } .section-slider #owl-consta .item.style-three .container { position: relative; height: 100%; } .section-slider #owl-consta .item.style-three .container .caption { position: relative; left: 40px; padding-left: 40px; -webkit-transform: translateX(0px) translateY(-50%); -moz-transform: translateX(0px) translateY(-50%); -ms-transform: translateX(0px) translateY(-50%); -o-transform: translateX(0px) translateY(-50%); transform: translateX(0px) translateY(-50%); height: 409px; } @media (max-width: 767px) { .section-slider #owl-consta .item.style-three .container .caption { padding-left: 0px; left: 0px; } } @media only screen and (min-width: 1200px) { .section-slider #owl-consta .item.style-three .container .caption { left: -40px; } } @media (max-width: 600px) { .section-slider #owl-consta .item.style-three .container .caption { background: none !important; } } .section-slider #owl-consta .item.style-three .container .caption .frame { border: 0px; } @media only screen and (min-width: 768px) { .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h1, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h2, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h3, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h4, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h5, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h6 { text-align: left; } @media (max-width: 767px) { .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h1, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h2, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h3, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h4, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h5, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h6 { text-align: center; } } .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h1 { font-size: 7rem; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text h1 { font-size: 4rem; } } .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text p, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text span { text-align: right; color: white; } @media (max-width: 767px) { .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text p, .section-slider #owl-consta .item.style-three .container .caption .frame .caption-text span { text-align: center; } } @media only screen and (min-width: 992px) { .section-slider #owl-consta .item.style-three .container .caption .frame .buttons { margin-left: -100px; } } .section-slider #owl-consta .item .caption { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 90%; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item .caption { margin-top: 50px; } } @media (max-width: 767px) { .section-slider #owl-consta .item .caption { width: 100%; } } @media only screen and (min-width: 992px) { .section-slider #owl-consta .item .caption { width: auto; } } .section-slider #owl-consta .item .caption .frame { height: 285px; color: white; text-align: center; padding-top: 20px; } @media only screen and (min-width: 992px) { .section-slider #owl-consta .item .caption .frame { width: 760px; } } @media only screen and (min-width: 768px) { .section-slider #owl-consta .item .caption .frame { border: 10px solid #ffb400; } } .section-slider #owl-consta .item .caption .frame .caption-text h1, .section-slider #owl-consta .item .caption .frame .caption-text h2, .section-slider #owl-consta .item .caption .frame .caption-text h3, .section-slider #owl-consta .item .caption .frame .caption-text h4, .section-slider #owl-consta .item .caption .frame .caption-text h5, .section-slider #owl-consta .item .caption .frame .caption-text h6, .section-slider #owl-consta .item .caption .frame .caption-text p, .section-slider #owl-consta .item .caption .frame .caption-text span { letter-spacing: -0.5px; } .section-slider #owl-consta .item .caption .frame .caption-text h2, .section-slider #owl-consta .item .caption .frame .caption-text h3, .section-slider #owl-consta .item .caption .frame .caption-text h4, .section-slider #owl-consta .item .caption .frame .caption-text h5, .section-slider #owl-consta .item .caption .frame .caption-text h6 { font-size: 4.8rem; font-weight: 300; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item .caption .frame .caption-text h2, .section-slider #owl-consta .item .caption .frame .caption-text h3, .section-slider #owl-consta .item .caption .frame .caption-text h4, .section-slider #owl-consta .item .caption .frame .caption-text h5, .section-slider #owl-consta .item .caption .frame .caption-text h6 { font-size: 3.2rem; } } .section-slider #owl-consta .item .caption .frame .caption-text h1 { font-size: 7.2rem; font-weight: 700; -webkit-animation-delay: 0.75s; -moz-animation-delay: 0.75s; animation-delay: 0.75s; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item .caption .frame .caption-text h1 { font-size: 4rem; } } .section-slider #owl-consta .item .caption .frame .caption-text p, .section-slider #owl-consta .item .caption .frame .caption-text span { display: block; font-size: 3rem; font-weight: 300; color: white; -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item .caption .frame .caption-text p, .section-slider #owl-consta .item .caption .frame .caption-text span { font-size: 1.8rem; } } @media (max-width: 767px) { .section-slider #owl-consta .item .caption .frame .buttons { margin-top: 30px; } } @media only screen and (min-width: 768px) { .section-slider #owl-consta .item .caption .frame .buttons { position: absolute; width: 100%; bottom: -25px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } } .section-slider #owl-consta .item .caption .frame .buttons .caption-button { position: relative; display: inline-block; width: 243px; height: 55px; cursor: pointer; vertical-align: middle; text-align: center; font-size: 1.8rem; font-weight: 700; -webkit-border-radius: 27.5px; -moz-border-radius: 27.5px; -ms-border-radius: 27.5px; border-radius: 27.5px; line-height: 55px; margin-right: 15px; overflow: hidden; } @media only screen and (max-width: 480px) { .section-slider #owl-consta .item .caption .frame .buttons .caption-button { position: relative; display: block; width: 180px; height: 40px; line-height: 40px; margin-bottom: 10px; left: 50%; margin-left: -90px; font-size: 1.6rem; } } .section-slider #owl-consta .item .caption .frame .buttons .caption-button span { z-index: 20; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button:last-child { margin-right: 0px; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button:after { position: absolute; content: " "; width: 60px; height: 175px; left: -100px; opacity: .15; top: -60px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); z-index: 1; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button:hover:after { left: 120%; -webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); } .section-slider #owl-consta .item .caption .frame .buttons .caption-button.dark { background: #1f2528; color: white; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button.dark:after { background: white; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button.white { background: white; color: #1f2528; } .section-slider #owl-consta .item .caption .frame .buttons .caption-button.white:after { background: #1f2528; opacity: .05; } .section-slider #owl-consta, .section-slider .owl-stage-outer, .section-slider .owl-stage, .section-slider .owl-item { height: 100%; } .section-slider .owl-dots { position: absolute; bottom: 30px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .section-slider .owl-dots .owl-dot { position: relative; display: inline-block; width: 10px; height: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 1px solid white; margin-right: 5px; } .section-slider .owl-dots .owl-dot span { position: absolute; display: block; width: 5px; height: 5px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section-slider .owl-dots .owl-dot:last-child { margin-right: 0px; } .section-slider .owl-dots .owl-dot.active span { background: white; } /* -------------------------------- 05.One Page Sections -------------------------------- */ /* -------------------------------- 05-a.Corporate Secion -------------------------------- */ .section-corporate { position: relative; padding: 80px 0 0 0; } .section-corporate .about-line { position: absolute; width: 1px; height: 90px; top: -15px; background: #1f2528; opacity: .4; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; } .section-corporate .about-text h2 { color: #1f2528; font-size: 3rem; font-weight: 300; } .section-corporate .about-text h2 strong { color: #ffb400; } .section-corporate .about-text .line { display: block; width: 80px; height: 5px; background: #ffb400; margin: 20px 0; } .section-corporate .about-text .line.gray { background: #1f2528; opacity: .1; } .section-corporate .about-text p { color: #7b7b7b; font-size: 1.8rem; font-weight: 300; line-height: 34px; letter-spacing: -0.25px; } .section-corporate .about-text p.small-text { font-size: 1.3rem; line-height: 24px; color: black; } .section-corporate .fact-circles { padding: 40px 0; position: relative; } .section-corporate .fact-circles:before { position: absolute; content: ''; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 1px; height: 450px; background: rgba(0, 0, 0, 0.2); z-index: 5; } @media only screen and (max-width: 768px) { .section-corporate .fact-circles:before { margin-top: -30px; height: 500px; } } .section-corporate .fact-circles .circle { position: relative; display: block; width: 126px; height: 126px; margin: 0px auto; margin-bottom: 45px; border: 1px solid rgba(0, 0, 0, 0.2); background: white; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; z-index: 10; } .section-corporate .fact-circles .circle:last-child { margin-bottom: 0px; } .section-corporate .fact-circles .circle .circle-content { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-corporate .fact-circles .circle .circle-content span { display: block; font-size: 1.4rem; color: #1f2528; text-align: center; font-weight: 300; text-transform: uppercase; line-height: 24px; white-space: nowrap; } .section-corporate .fact-circles .circle .circle-content span.number { font-size: 3.6rem; font-weight: 700; color: #ffb400; letter-spacing: -1px; line-height: 36px; } .section-corporate .photo-frames { position: relative; } @media (min-width: 600px) { .section-corporate .photo-frames { height: 582px; } } @media (min-width: 600px) { .section-corporate .photo-frames .frame { position: absolute; border: 10px solid #e9eaec; } } @media only screen and (max-width: 480px) { .section-corporate .photo-frames .frame { margin-bottom: 30px; } } @media only screen and (max-width: 480px) { .section-corporate .photo-frames .frame img { display: block; margin: 0px auto; max-width: 100%; } } .section-corporate .photo-frames .frame.top-left { top: 0px; left: 0px; } @media only screen and (max-width: 480px) { .section-corporate .photo-frames .frame.top-left { margin-top: 30px; } } .section-corporate .photo-frames .frame.middle { display: none; width: 196px; height: 320px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: .5; z-index: 10; border: 5px solid #e9eaec; } @media (min-width: 600px) { .section-corporate .photo-frames .frame.middle { display: block; } } .section-corporate .photo-frames .frame.bottom-right { bottom: 0px; right: 0px; } /* -------------------------------- 05-b.Team Secion -------------------------------- */ .section-team { padding: 30px 0; } .section-team .container { margin-top: 30px; margin-bottom: 30px; } .section-team #owl-team .item { position: relative; padding-top: 20px; } .section-team #owl-team .item img { width: auto; } .section-team #owl-team .owl-controls .owl-nav .owl-prev, .section-team #owl-team .owl-controls .owl-nav .owl-next { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); top: 40%; width: 50px; min-height: 30px; } .section-team #owl-team .owl-controls .owl-nav .owl-prev:before, .section-team #owl-team .owl-controls .owl-nav .owl-next:before { position: absolute; font-family: 'FontAwesome'; color: #1f2528; font-size: 3rem; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-team #owl-team .owl-controls .owl-nav .owl-prev { left: -15px; } .section-team #owl-team .owl-controls .owl-nav .owl-prev:before { content: '\f104'; } @media only screen and (min-width: 1200px) { .section-team #owl-team .owl-controls .owl-nav .owl-prev { left: 0px; } } .section-team #owl-team .owl-controls .owl-nav .owl-next { right: -15px; } @media only screen and (min-width: 1200px) { .section-team #owl-team .owl-controls .owl-nav .owl-next { right: 0px; } } .section-team #owl-team .owl-controls .owl-nav .owl-next:before { content: '\f105'; } .section-team .team-member { position: relative; display: block; margin: 0px auto; width: 162px; min-height: 162px; } .section-team .team-member .arc { position: absolute; top: -15px; left: -15px; width: 192px; height: 192px; border-radius: 50%; border: 15px solid; } .section-team .team-member .arc.arc_start { border-color: transparent #f2f2f2 #f2f2f2 #f2f2f2; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: -webkit-transform 0.9s; -moz-transition: -moz-transform 0.9s; transition: transform 0.9s; } .section-team .team-member .arc.arc_end { border-color: #f2f2f2 #f2f2f2 #f2f2f2 transparent; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); -webkit-transition: -webkit-transform 0.9s; -moz-transition: -moz-transform 0.9s; transition: transform 0.9s; } .section-team .team-member:hover { cursor: pointer; } .section-team .team-member:hover .arc.arc_start { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .section-team .team-member:hover .arc.arc_end { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .section-team .team-member figure { position: relative; display: block; margin: 0px auto; width: 162px; height: 162px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; border: 1px solid #cfcfcf; z-index: 2; background: transparent; margin-bottom: 15px; } .section-team .team-member figure img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 1; } .section-team .team-member .member-name, .section-team .team-member .member-title, .section-team .team-member .social-accounts { display: block; text-align: center; } .section-team .team-member .member-name { font-size: 1.8rem; color: #1f2528; text-transform: uppercase; } .section-team .team-member .member-name span { font-weight: 700; } .section-team .team-member .member-title { font-size: 1.4rem; } .section-team .team-member .social-accounts { margin-top: 15px; } .section-team .team-member .social-accounts ul li { position: relative; display: inline-block; margin-right: 5px; width: 24px; height: 24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffb400; } .section-team .team-member .social-accounts ul li:last-child { margin-right: 0px; } .section-team .team-member .social-accounts ul li a { position: absolute; font-size: 1.3rem; color: white; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* -------------------------------- 05-c.Vehicles Secion -------------------------------- */ .section-vehicles { margin-bottom: 100px; } @media (min-width: 992px) and (max-width: 1200px) { .section-vehicles { margin-bottom: 30px; } } .section-vehicles .section-title { position: relative; z-index: 2; } .section-vehicles .vehicle-wrapper { position: relative; min-height: 393px; margin-top: -30px; padding: 70px 0; } @media only screen and (min-width: 992px) { .section-vehicles .vehicle-wrapper { padding: 70px; } } .section-vehicles .vehicle-wrapper:before { position: absolute; content: ''; width: 100%; height: 100%; background: #ffb400; top: 0px; left: 0px; } @media only screen and (min-width: 992px) { .section-vehicles .vehicle-wrapper:before { width: 60%; } } .section-vehicles .vehicle-wrapper .icon { position: relative; height: 130px; } @media only screen and (max-width: 768px) { .section-vehicles .vehicle-wrapper .icon { background: rgba(255, 255, 255, 0.1); } } .section-vehicles .vehicle-wrapper .icon .vehicle-name { position: relative; width: 80%; height: 80%; text-align: center; background: #e6a200; color: white; top: 10%; left: 10%; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } .section-vehicles .vehicle-wrapper .icon .vehicle-name span { width: 100%; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-vehicles .vehicle-wrapper .icon .vehicle-name .numberofvehicles { position: absolute; width: 25px; height: 25px; background: #1f2528; right: 0px; top: 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .section-vehicles .vehicle-wrapper .icon .vehicle-name .numberofvehicles em { position: absolute; font-size: 1.4rem; font-weight: 700; font-style: normal; color: #ffb400; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-vehicles .vehicle-wrapper .icon [class^="ico-"] { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-vehicles .vehicle-wrapper .icon i { position: relative; } .section-vehicles .vehicle-wrapper .icon i .numberofvehicles { position: absolute; width: 25px; height: 25px; background: #1f2528; margin-top: -12.5px; right: -10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .section-vehicles .vehicle-wrapper .icon i .numberofvehicles em { position: absolute; font-size: 1.4rem; font-weight: 700; font-style: normal; color: #ffb400; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-vehicles .vehicle-wrapper .icon:hover i .numberofvehicles { -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); } .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:before, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:after, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:before, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:after { position: absolute; content: ''; width: 84px; height: 1px; background: #d99900; display: none; } @media only screen and (min-width: 992px) { .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:before, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:after, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:before, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:after { display: block; } } .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:before, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:before { bottom: 0px; right: -42px; } .section-vehicles .vehicle-wrapper .col-md-4:nth-child(1) .icon:after, .section-vehicles .vehicle-wrapper .col-md-4:nth-child(2) .icon:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); bottom: 0px; right: -42px; } @media only screen and (max-width: 768px) { .section-vehicles .vehicle-wrapper .col-md-4:last-child { margin-bottom: 30px; } } .section-vehicles .backgroundclip { position: relative; float: right; width: 320px; height: 180px; background: white url(../images/vehicles/image-mask.jpg) no-repeat; } @media only screen and (max-width: 480px) { .section-vehicles .backgroundclip { width: 100%; } } @media only screen and (max-width: 768px) { .section-vehicles .backgroundclip { float: none; display: block; margin: 0px auto; } } @media (min-width: 992px) and (max-width: 1200px) { .section-vehicles .backgroundclip { margin-right: 30px; } } .section-vehicles .backgroundclip .white-frame { position: absolute; width: 300px; height: 160px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: white; } @media only screen and (max-width: 480px) { .section-vehicles .backgroundclip .white-frame { width: 94%; } } .section-vehicles .backgroundclip h1 { position: absolute; width: 100%; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-family: "Oswald", sans-serif; font-size: 4.2rem; font-weight: 700; letter-spacing: -2px; text-align: right; padding: 0 15px; background: url(../images/vehicles/image-mask.jpg) no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index: 5; } .section-vehicles .white-frame h1 { color: #1f2528; } .section-vehicles .buldozer { position: absolute; right: 0px; top: 150px; z-index: 10; } @media only screen and (max-width: 480px) { .section-vehicles .buldozer { width: 350px; left: -30px; right: auto; } } .section-vehicles .buldozer img { max-width: 100%; } @media (min-width: 992px) and (max-width: 1200px) { .section-vehicles .buldozer { right: 30px; top: 130px; } } /* -------------------------------- 05-d.Services Secion -------------------------------- */ @media only screen and (max-width: 768px) { .section-services { margin-top: 80px; } } @media (min-width: 600px) and (max-width: 991px) { .section-services { margin-top: 200px; } } .section-services .services-wrapper { position: relative; margin: 60px 0; background: rgba(0, 0, 0, 0.05); } @media only screen and (min-width: 992px) { .section-services .services-wrapper { margin: 60px 0 120px 0; } } .section-services .services-wrapper .service { position: relative; text-align: center; min-height: 510px; padding: 40px 0; } .section-services .services-wrapper .service h1 { font-size: 2.4rem; font-weight: 300; margin-bottom: 40px; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } .section-services .services-wrapper .service figure { position: relative; height: 230px; overflow: hidden; margin-bottom: 40px; } .section-services .services-wrapper .service figure img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-services .services-wrapper .service p { font-size: 1.4rem; color: #1f2528; font-weight: 300; padding: 0 30px; margin-bottom: 30px; } .section-services .services-wrapper .service .more { display: block; margin: 0px auto; width: 100px; height: 100px; line-height: 95px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffb400; color: white; text-align: center; overflow: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border: 0px; outline: none; } @media only screen and (min-width: 992px) { .section-services .services-wrapper .service .more { position: absolute; bottom: -50px; left: 50%; margin-left: -50px; } } .section-services .services-wrapper .service .more:after { position: relative; font-family: "Ionicons"; content: '\f30f'; color: white; left: 3px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-services .services-wrapper .service .more:before { content: ''; position: absolute; top: 1px; left: 0px; width: 100%; height: 100%; background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-services .services-wrapper .service .more:hover:before { top: auto; bottom: 1px; } .section-services .services-wrapper .service .more:hover:after { left: 7px; } .section-services .services-wrapper .service.center:before { position: absolute; content: ''; background: #ffb400; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 100%; height: 110%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } @media only screen and (max-width: 768px) { .section-services .services-wrapper .service.center:before { height: 100%; } } .section-services .services-wrapper .service.center h1, .section-services .services-wrapper .service.center p { position: relative; color: white !important; z-index: 5; } .section-services .services-wrapper .service.center .more { background: #1f2528; bottom: -80px; } .section-services .services-wrapper .service.center .more:before { border: 2px solid rgba(255, 255, 255, 0.16); } .section-services .services-wrapper [class^="col-"] { padding: 0px; } .section-services .services-wrapper.classic { padding: 30px 0 60px 0; } .section-services .services-wrapper.classic [class^="col-"] { padding-right: 15px; padding-left: 15px; } .section-services .services-wrapper.classic .service .more { -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; width: 120px; height: 45px; line-height: 40px; } .section-services .services-wrapper.classic .service .more:before { display: none; } @media only screen and (min-width: 992px) { .section-services .services-wrapper.classic .service .more { bottom: 0px; left: 50%; margin-left: -60px; } } /* -------------------------------- 05-e.Projects Secion -------------------------------- */ .section-projects { margin-bottom: 160px; } .section-projects .project-filter { width: 100%; display: inline-block; text-align: center; margin: 20px 0 40px 0; } .section-projects .project-filter ul li { display: inline-block; } .section-projects .project-filter ul li:after { content: '/'; margin-left: 5px; font-weight: 700; } .section-projects .project-filter ul li:last-child:after { content: ''; } .section-projects .project-filter ul li:first-child button { color: #1f2528; } .section-projects .project-filter ul li button { font-size: 1.8rem; font-weight: 700; color: #ffb400; border: 0px; background: transparent; outline: none; } .section-projects .projects { position: relative; } .section-projects .projects #isotope { opacity: 0; -webkit-transition: opacity 0.33s; -moz-transition: opacity 0.33s; transition: opacity 0.33s; } .section-projects .projects #isotope.projects-loaded { opacity: 1; } @media only screen and (max-width: 768px) { .section-projects .projects .col-md-3 { width: 100%; } } .section-projects .projects .project-box { background: rgba(0, 0, 0, 0.02); padding: 13px 13px 20px 13px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.07); margin-bottom: 15px; } .section-projects .projects .project-box figure { overflow: hidden; margin-bottom: 20px; } .section-projects .projects .project-box figure a { display: block; outline: none; } @media only screen and (min-width: 992px) { .section-projects .projects .project-box figure a: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); } } .section-projects .projects .project-box figure img { max-width: 100%; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .section-projects .projects .project-box h3 { color: #1f2528; font-size: 1.8rem; letter-spacing: -1px; margin-bottom: 10px; } .section-projects .projects .project-box p { font-size: 1.4rem; color: #ffb400; letter-spacing: -1px; } .section-projects .projects .load-more { display: block; position: absolute; bottom: -100px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 100px; height: 100px; line-height: 95px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffb400; color: white; text-align: center; overflow: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border: 0px; outline: none; } .section-projects .projects .load-more:before { content: ''; position: absolute; top: 1px; left: 0px; width: 100%; height: 100%; background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-projects .projects .load-more:hover:before { top: auto; bottom: 1px; } /* -------------------------------- 05-f.Quote Secion -------------------------------- */ .section-getaquote { position: relative; height: auto; margin: 240px 0 60px 0; } @media only screen and (min-width: 992px) { .section-getaquote { height: 182px; } } @media only screen and (min-width: 992px) { .section-getaquote .wrapper, .section-getaquote .container, .section-getaquote [class^="col-"] { height: 100%; } } @media only screen and (max-width: 768px) { .section-getaquote .col-md-10 { min-height: 150px; padding-top: 40px; padding-bottom: 40px; } } @media only screen and (max-width: 768px) { .section-getaquote .wrapper { background: #ffb400; } } .section-getaquote .wrapper .worker { position: relative; height: 100%; display: none; } .section-getaquote .wrapper .worker img { position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 0px; } @media only screen and (min-width: 992px) { .section-getaquote .wrapper .worker { display: block; } } .section-getaquote .wrapper .col-md-10 { position: relative; background: #ffb400; } .section-getaquote .wrapper .col-md-10:before { position: absolute; content: ''; background: #ffb400; top: 0px; left: -90px; width: 180px; height: 182px; -webkit-transform: skewX(-44deg); -moz-transform: skewX(-44deg); -ms-transform: skewX(-44deg); -o-transform: skewX(-44deg); transform: skewX(-44deg); display: none; } @media only screen and (min-width: 992px) { .section-getaquote .wrapper .col-md-10:before { display: block; } } .section-getaquote .wrapper .quote-text h1 { font-size: 3.6rem; font-weight: 300; color: white; letter-spacing: -0.5px; margin-bottom: 10px; } @media only screen and (min-width: 992px) { .section-getaquote .wrapper .quote-text h1 { margin-top: 55px; } } .section-getaquote .wrapper .quote-text p { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.5px; color: white; } @media only screen and (max-width: 768px) { .section-getaquote .wrapper .quote-text { text-align: center; } } .section-getaquote .wrapper .quote-btn { position: relative; height: 100%; } .section-getaquote .wrapper .quote-btn a { display: block; margin: 20px auto; width: 200px; height: 50px; line-height: 40px; text-align: center; font-weight: 700; color: white; border: 3px solid white; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; border-radius: 25px; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; } @media only screen and (min-width: 992px) { .section-getaquote .wrapper .quote-btn a { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: -30px; margin: 0px; } } .section-getaquote .wrapper .quote-btn a:hover { background: rgba(255, 255, 255, 0.2); } .section-getaquote .dark-bg { position: absolute; width: 100%; height: 123px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background: #1f2528; display: none; } @media only screen and (min-width: 992px) { .section-getaquote .dark-bg { display: block; } } .section-getaquote .dark-bg:after { position: absolute; content: ''; width: 50%; height: 182px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0px; background: #ffb400; } /* -------------------------------- 05-g.References Secion -------------------------------- */ .section-references { margin: 30px 0; } .section-references .references .reference { position: relative; height: 180px; } .section-references .references .reference img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .section-references .references .col-md-3:nth-child(1) .reference:before, .section-references .references .col-md-3:nth-child(1) .reference:after, .section-references .references .col-md-3:nth-child(2) .reference:before, .section-references .references .col-md-3:nth-child(2) .reference:after, .section-references .references .col-md-3:nth-child(3) .reference:before, .section-references .references .col-md-3:nth-child(3) .reference:after { position: absolute; content: ''; width: 200px; height: 1px; background: #1f2528; opacity: .1; display: none; } @media only screen and (min-width: 992px) { .section-references .references .col-md-3:nth-child(1) .reference:before, .section-references .references .col-md-3:nth-child(1) .reference:after, .section-references .references .col-md-3:nth-child(2) .reference:before, .section-references .references .col-md-3:nth-child(2) .reference:after, .section-references .references .col-md-3:nth-child(3) .reference:before, .section-references .references .col-md-3:nth-child(3) .reference:after { display: block; } } .section-references .references .col-md-3:nth-child(1) .reference:before, .section-references .references .col-md-3:nth-child(2) .reference:before, .section-references .references .col-md-3:nth-child(3) .reference:before { bottom: 0px; right: -115px; } .section-references .references .col-md-3:nth-child(1) .reference:after, .section-references .references .col-md-3:nth-child(2) .reference:after, .section-references .references .col-md-3:nth-child(3) .reference:after { width: 150px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); bottom: 0px; right: -90px; } /* -------------------------------- 05-h.Blog Secion -------------------------------- */ .section-blog .home-blog-posts { position: relative; margin: 30px 0; } @media only screen and (max-width: 768px) { .section-blog .home-blog-posts { padding-top: 30px; } } @media only screen and (min-width: 992px) { .section-blog .home-blog-posts .col-md-8 { padding-right: 30px; } } @media only screen and (min-width: 992px) { .section-blog .home-blog-posts .col-md-4 { padding-left: 30px; } } .section-blog .home-blog-posts:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0px; right: 0px; background: #f2f2f2; } @media only screen and (min-width: 992px) { .section-blog .home-blog-posts:before { width: 30%; } } .section-blog .home-blog-posts .small-posts { position: relative; } .section-blog .home-blog-posts .small-posts:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0px; left: 0px; background: #f2f2f2; } .section-blog .home-blog-posts .small-posts .normal-btn, .section-blog .home-blog-posts .small-posts .submit-btn, .section-blog .home-blog-posts .small-posts .wpcf7-submit, .section-blog .home-blog-posts .small-posts main .comment-section .comment-respond .form-submit .submit, main .comment-section .comment-respond .form-submit .section-blog .home-blog-posts .small-posts .submit { position: relative; margin: 0px auto; margin-bottom: 30px; z-index: 5; } .section-blog .home-blog-posts .post { position: relative; z-index: 5; } .section-blog .home-blog-posts .post .title { margin-bottom: 30px; } .section-blog .home-blog-posts .post .title h1 { font-size: 2.4rem; font-weight: 700; color: #1f2528; } .section-blog .home-blog-posts .post figure { height: 430px; overflow: hidden; } .section-blog .home-blog-posts .post figure img { max-width: 100%; height: auto !important; } @media (max-width: 767px) { .section-blog .home-blog-posts .post figure { height: auto; } } .section-blog .home-blog-posts .post .row.first { margin-top: 30px; margin-bottom: 30px; font-size: 1.4rem; font-weight: 400; color: #1f2528; } .section-blog .home-blog-posts .post .row.first .author { color: #ffb400; } .section-blog .home-blog-posts .post .row.first .date { text-align: right; } .section-blog .home-blog-posts .post .row.second .nof-comments { display: block; text-align: right; font-size: 1.4rem; font-weight: 700; color: #1f2528; padding-top: 5px; } .section-blog .home-blog-posts .post .excerpt { margin-bottom: 30px; } .section-blog .home-blog-posts .post .excerpt p { font-size: 1.4rem; color: #1f2528; line-height: 24px; margin: 15px 0; } .section-blog .home-blog-posts .post.small { margin: 30px 0; padding: 10px; background: white; } .section-blog .home-blog-posts .post.small figure { position: relative; height: auto; margin-bottom: 30px; } .section-blog .home-blog-posts .post.small figure a { display: block; } .section-blog .home-blog-posts .post.small figure a:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-blog .home-blog-posts .post.small figure a:after { position: absolute; font-family: "Ionicons"; content: '\f21f'; color: white; font-size: 2.4rem; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 0; visibility: hidden; } .section-blog .home-blog-posts .post.small figure a:hover:before, .section-blog .home-blog-posts .post.small figure a:hover:after { opacity: 1; visibility: visible; } .section-blog .home-blog-posts .post.small .wrapper { padding: 0 15px; } .section-blog .home-blog-posts .post.small .title { margin-bottom: 15px; } .section-blog .home-blog-posts .post.small .title h1 { font-size: 1.6rem; line-height: 20px; } .section-blog .home-blog-posts .post.small .row.first { margin-top: 15px; margin-bottom: 15px; font-size: 1.2rem; } .section-blog .home-blog-posts .post.small .excerpt p { font-size: 1.2rem; line-height: 18px; } /* -------------------------------- 05-i.Contact Secion -------------------------------- */ .section-contact .section-title { margin-bottom: 30px; } @media only screen and (min-width: 992px) { .section-contact .section-title { margin: -100px 0 30px 0; } } .section-contact .google-map { float: left; width: 100%; height: 482px; } @media only screen and (min-width: 992px) { .section-contact .google-map { width: 50%; } } .section-contact .google-map .map { height: 100%; } .section-contact .contact-form { position: relative; float: left; background: #1f2528; padding: 80px 40px 70px 40px; width: 100%; min-height: 482px; } @media only screen and (min-width: 992px) { .section-contact .contact-form { width: 50%; } } @media only screen and (min-width: 1200px) { .section-contact .contact-form { padding: 80px 80px 70px 0; } } .section-contact .contact-form .no-form-message { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: white; } .section-contact .contact-form .success, .section-contact .contact-form .error { font-size: 1.2rem; color: white; display: none; } .section-contact .contact-form form, .section-contact .contact-form .wpcf7-form { width: 100%; float: right; } @media only screen and (min-width: 1200px) { .section-contact .contact-form form, .section-contact .contact-form .wpcf7-form { width: 500px; } } .section-contact .contact-form form .wpcf7-response-output, .section-contact .contact-form .wpcf7-form .wpcf7-response-output { margin-top: 50px !important; font-size: 1.4rem !important; } .section-contact .contact-form .form-group .form-control { height: 45px; } .section-contact .contact-form .form-group .form-control, .section-contact .contact-form .form-group textarea { border: 0px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 10px 0px; } .section-contact .contact-form .form-group .form-control::-webkit-input-placeholder, .section-contact .contact-form .form-group textarea::-webkit-input-placeholder { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-contact .contact-form .form-group .form-control::-moz-placeholder, .section-contact .contact-form .form-group textarea::-moz-placeholder { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-contact .contact-form .form-group .form-control:-moz-placeholder, .section-contact .contact-form .form-group textarea:-moz-placeholder { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-contact .contact-form .form-group .form-control:-ms-input-placeholder, .section-contact .contact-form .form-group textarea:-ms-input-placeholder { font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .section-contact .contact-form .form-group .form-control:focus::-webkit-input-placeholder, .section-contact .contact-form .form-group textarea:focus::-webkit-input-placeholder { color: transparent; } .section-contact .contact-form .form-group .form-control:focus::-moz-placeholder, .section-contact .contact-form .form-group textarea:focus::-moz-placeholder { color: transparent; } .section-contact .contact-form .form-group .form-control:focus:-moz-placeholder, .section-contact .contact-form .form-group textarea:focus:-moz-placeholder { color: transparent; } .section-contact .contact-form .form-group .form-control:focus:-ms-input-placeholder, .section-contact .contact-form .form-group textarea:focus:-ms-input-placeholder { color: transparent; } .section-contact .contact-form .form-group textarea { width: 100%; height: 130px; font-size: 1.4rem; } @media only screen and (min-width: 992px) { .section-contact .contact-form .form-group .submit-btn, .section-contact .contact-form .form-group .wpcf7-submit { float: right; } } /* -------------------------------- 06 Footer Secion -------------------------------- */ footer { position: relative; float: left; width: 100%; min-height: 193px; margin-top: 70px; background: #1f2528; } @media only screen and (min-width: 992px) { footer { margin-top: 140px; } } footer .top-section { min-height: 135px; background: #ffc333; height: auto; padding: 30px 0; margin-top: -30px; } @media only screen and (min-width: 992px) { footer .top-section { padding: 0px; margin-top: -80px; -webkit-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3); } } footer .top-section [class^="col-"] { position: relative; } footer .top-section [class^="col-"]:nth-child(1), footer .top-section [class^="col-"]:nth-child(2) { height: 135px; } @media only screen and (max-width: 768px) { footer .top-section [class^="col-"]:nth-child(1), footer .top-section [class^="col-"]:nth-child(2) { height: auto; } } @media only screen and (min-width: 992px) { footer .top-section [class^="col-"] { height: 100%; } } footer .top-section .widget { padding: 15px 0; } footer .top-section .widget .widget-title { font-size: 1.8rem; text-transform: uppercase; font-weight: 600; } footer .top-section .social { text-align: center; } @media only screen and (min-width: 992px) { footer .top-section .social { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 30px; } } footer .top-section .social ul li { display: inline-block; margin-left: 40px; } footer .top-section .social ul li:first-child { margin-left: 0px; } footer .top-section .social ul li a { color: white; font-size: 2.4rem; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } footer .top-section .social ul li a:hover { color: #e6a200; } @media only screen and (min-width: 992px) { footer .top-section .footer-logo { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } } footer .top-section .footer-logo img { display: block; margin: 30px auto; } footer .top-section .consta-subscribe-widget { height: 135px; } @media only screen and (max-width: 768px) { footer .top-section .consta-subscribe-widget { height: auto; } } footer .top-section .mailchimp { display: block; margin: 0px auto; width: 300px; } @media only screen and (min-width: 992px) { footer .top-section .mailchimp { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 30px; } } @media only screen and (max-width: 480px) { footer .top-section .mailchimp { width: 100%; } } footer .top-section .mailchimp .subscription-success, footer .top-section .mailchimp .subscription-error { display: none; font-size: 1.2rem; font-weight: 300; color: #1f2528; } footer .top-section .mailchimp .form-group { position: relative; margin: 0px; } footer .top-section .mailchimp .form-group input { width: 100%; border: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: white; font-size: 1.2rem; padding: 0 35px 5px 0; line-height: 20px; } footer .top-section .mailchimp .form-group input::-webkit-input-placeholder { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } footer .top-section .mailchimp .form-group input::-moz-placeholder { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } footer .top-section .mailchimp .form-group input:-moz-placeholder { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } footer .top-section .mailchimp .form-group input:-ms-input-placeholder { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); font-weight: 300; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } footer .top-section .mailchimp .form-group input:focus::-webkit-input-placeholder { color: transparent; } footer .top-section .mailchimp .form-group input:focus::-moz-placeholder { color: transparent; } footer .top-section .mailchimp .form-group input:focus:-moz-placeholder { color: transparent; } footer .top-section .mailchimp .form-group input:focus:-ms-input-placeholder { color: transparent; } footer .top-section .mailchimp .form-group button { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0px; border: 0px; background: transparent; color: white; outline: none; } footer .top-section .mailchimp .form-group button i { font-size: 2rem; } footer .bottom-section { margin: 30px 0; } @media only screen and (min-width: 992px) { footer .bottom-section { margin-top: 60px; } } footer .bottom-section .copyright, footer .bottom-section .address { font-size: 1.2rem; } footer .bottom-section .address { color: white; text-align: right; } @media (max-width: 600px) { footer .bottom-section .address { text-align: center; } } footer .bottom-section .copyright { color: white; } @media (max-width: 600px) { footer .bottom-section .copyright { text-align: center; margin-bottom: 5px; } } /* -------------------------------- 07.Blog Styles -------------------------------- */ .blog.admin-bar .nav-container, .error404.admin-bar .nav-container, .page-template-default.admin-bar .nav-container, .archive.admin-bar .nav-container, .search.admin-bar .nav-container, .tag.admin-bar .nav-container { top: 32px !important; } @media screen and (max-width: 767px) { .blog.admin-bar .nav-container, .error404.admin-bar .nav-container, .page-template-default.admin-bar .nav-container, .archive.admin-bar .nav-container, .search.admin-bar .nav-container, .tag.admin-bar .nav-container { top: 46px; } } .blog header, .error404 header, .page-template-default header, .archive header, .search header, .tag header { background: transparent; border: 0px; } .blog header.scrolling, .blog header.dark-header, .blog header.consta-slider-off, .error404 header.scrolling, .error404 header.dark-header, .error404 header.consta-slider-off, .page-template-default header.scrolling, .page-template-default header.dark-header, .page-template-default header.consta-slider-off, .archive header.scrolling, .archive header.dark-header, .archive header.consta-slider-off, .search header.scrolling, .search header.dark-header, .search header.consta-slider-off, .tag header.scrolling, .tag header.dark-header, .tag header.consta-slider-off { background: #1f2528; border-bottom: 1px solid #1f2528; min-height: 100px; } @media only screen and (max-width: 480px) { .blog header.scrolling, .blog header.dark-header, .blog header.consta-slider-off, .error404 header.scrolling, .error404 header.dark-header, .error404 header.consta-slider-off, .page-template-default header.scrolling, .page-template-default header.dark-header, .page-template-default header.consta-slider-off, .archive header.scrolling, .archive header.dark-header, .archive header.consta-slider-off, .search header.scrolling, .search header.dark-header, .search header.consta-slider-off, .tag header.scrolling, .tag header.dark-header, .tag header.consta-slider-off { min-height: 80px; } } .blog header.scrolling .logo, .blog header.scrolling .logo-mobile, .blog header.dark-header .logo, .blog header.dark-header .logo-mobile, .blog header.consta-slider-off .logo, .blog header.consta-slider-off .logo-mobile, .error404 header.scrolling .logo, .error404 header.scrolling .logo-mobile, .error404 header.dark-header .logo, .error404 header.dark-header .logo-mobile, .error404 header.consta-slider-off .logo, .error404 header.consta-slider-off .logo-mobile, .page-template-default header.scrolling .logo, .page-template-default header.scrolling .logo-mobile, .page-template-default header.dark-header .logo, .page-template-default header.dark-header .logo-mobile, .page-template-default header.consta-slider-off .logo, .page-template-default header.consta-slider-off .logo-mobile, .archive header.scrolling .logo, .archive header.scrolling .logo-mobile, .archive header.dark-header .logo, .archive header.dark-header .logo-mobile, .archive header.consta-slider-off .logo, .archive header.consta-slider-off .logo-mobile, .search header.scrolling .logo, .search header.scrolling .logo-mobile, .search header.dark-header .logo, .search header.dark-header .logo-mobile, .search header.consta-slider-off .logo, .search header.consta-slider-off .logo-mobile, .tag header.scrolling .logo, .tag header.scrolling .logo-mobile, .tag header.dark-header .logo, .tag header.dark-header .logo-mobile, .tag header.consta-slider-off .logo, .tag header.consta-slider-off .logo-mobile { opacity: 0; visibility: hidden; } .blog header.scrolling .logo-white, .blog header.dark-header .logo-white, .blog header.consta-slider-off .logo-white, .error404 header.scrolling .logo-white, .error404 header.dark-header .logo-white, .error404 header.consta-slider-off .logo-white, .page-template-default header.scrolling .logo-white, .page-template-default header.dark-header .logo-white, .page-template-default header.consta-slider-off .logo-white, .archive header.scrolling .logo-white, .archive header.dark-header .logo-white, .archive header.consta-slider-off .logo-white, .search header.scrolling .logo-white, .search header.dark-header .logo-white, .search header.consta-slider-off .logo-white, .tag header.scrolling .logo-white, .tag header.dark-header .logo-white, .tag header.consta-slider-off .logo-white { opacity: 1; visibility: visible; } @media only screen and (max-width: 480px) { .blog header.scrolling .logo-white, .blog header.dark-header .logo-white, .blog header.consta-slider-off .logo-white, .error404 header.scrolling .logo-white, .error404 header.dark-header .logo-white, .error404 header.consta-slider-off .logo-white, .page-template-default header.scrolling .logo-white, .page-template-default header.dark-header .logo-white, .page-template-default header.consta-slider-off .logo-white, .archive header.scrolling .logo-white, .archive header.dark-header .logo-white, .archive header.consta-slider-off .logo-white, .search header.scrolling .logo-white, .search header.dark-header .logo-white, .search header.consta-slider-off .logo-white, .tag header.scrolling .logo-white, .tag header.dark-header .logo-white, .tag header.consta-slider-off .logo-white { display: none; } } .blog header.scrolling .lang-trigger, .blog header.dark-header .lang-trigger, .blog header.consta-slider-off .lang-trigger, .error404 header.scrolling .lang-trigger, .error404 header.dark-header .lang-trigger, .error404 header.consta-slider-off .lang-trigger, .page-template-default header.scrolling .lang-trigger, .page-template-default header.dark-header .lang-trigger, .page-template-default header.consta-slider-off .lang-trigger, .archive header.scrolling .lang-trigger, .archive header.dark-header .lang-trigger, .archive header.consta-slider-off .lang-trigger, .search header.scrolling .lang-trigger, .search header.dark-header .lang-trigger, .search header.consta-slider-off .lang-trigger, .tag header.scrolling .lang-trigger, .tag header.dark-header .lang-trigger, .tag header.consta-slider-off .lang-trigger { top: 35px; color: white; } @media only screen and (max-width: 480px) { .blog header.scrolling .lang-trigger, .blog header.dark-header .lang-trigger, .blog header.consta-slider-off .lang-trigger, .error404 header.scrolling .lang-trigger, .error404 header.dark-header .lang-trigger, .error404 header.consta-slider-off .lang-trigger, .page-template-default header.scrolling .lang-trigger, .page-template-default header.dark-header .lang-trigger, .page-template-default header.consta-slider-off .lang-trigger, .archive header.scrolling .lang-trigger, .archive header.dark-header .lang-trigger, .archive header.consta-slider-off .lang-trigger, .search header.scrolling .lang-trigger, .search header.dark-header .lang-trigger, .search header.consta-slider-off .lang-trigger, .tag header.scrolling .lang-trigger, .tag header.dark-header .lang-trigger, .tag header.consta-slider-off .lang-trigger { top: 25px; } } .blog header.scrolling .nav-trigger, .blog header.dark-header .nav-trigger, .blog header.consta-slider-off .nav-trigger, .error404 header.scrolling .nav-trigger, .error404 header.dark-header .nav-trigger, .error404 header.consta-slider-off .nav-trigger, .page-template-default header.scrolling .nav-trigger, .page-template-default header.dark-header .nav-trigger, .page-template-default header.consta-slider-off .nav-trigger, .archive header.scrolling .nav-trigger, .archive header.dark-header .nav-trigger, .archive header.consta-slider-off .nav-trigger, .search header.scrolling .nav-trigger, .search header.dark-header .nav-trigger, .search header.consta-slider-off .nav-trigger, .tag header.scrolling .nav-trigger, .tag header.dark-header .nav-trigger, .tag header.consta-slider-off .nav-trigger { top: 25px; } @media only screen and (max-width: 480px) { .blog header.scrolling .nav-trigger, .blog header.dark-header .nav-trigger, .blog header.consta-slider-off .nav-trigger, .error404 header.scrolling .nav-trigger, .error404 header.dark-header .nav-trigger, .error404 header.consta-slider-off .nav-trigger, .page-template-default header.scrolling .nav-trigger, .page-template-default header.dark-header .nav-trigger, .page-template-default header.consta-slider-off .nav-trigger, .archive header.scrolling .nav-trigger, .archive header.dark-header .nav-trigger, .archive header.consta-slider-off .nav-trigger, .search header.scrolling .nav-trigger, .search header.dark-header .nav-trigger, .search header.consta-slider-off .nav-trigger, .tag header.scrolling .nav-trigger, .tag header.dark-header .nav-trigger, .tag header.consta-slider-off .nav-trigger { top: 15px; } } .blog header.scrolling .nav-trigger span, .blog header.dark-header .nav-trigger span, .blog header.consta-slider-off .nav-trigger span, .error404 header.scrolling .nav-trigger span, .error404 header.dark-header .nav-trigger span, .error404 header.consta-slider-off .nav-trigger span, .page-template-default header.scrolling .nav-trigger span, .page-template-default header.dark-header .nav-trigger span, .page-template-default header.consta-slider-off .nav-trigger span, .archive header.scrolling .nav-trigger span, .archive header.dark-header .nav-trigger span, .archive header.consta-slider-off .nav-trigger span, .search header.scrolling .nav-trigger span, .search header.dark-header .nav-trigger span, .search header.consta-slider-off .nav-trigger span, .tag header.scrolling .nav-trigger span, .tag header.dark-header .nav-trigger span, .tag header.consta-slider-off .nav-trigger span { background: white; } .blog header.scrolling .nav-trigger span::before, .blog header.scrolling .nav-trigger span::after, .blog header.dark-header .nav-trigger span::before, .blog header.dark-header .nav-trigger span::after, .blog header.consta-slider-off .nav-trigger span::before, .blog header.consta-slider-off .nav-trigger span::after, .error404 header.scrolling .nav-trigger span::before, .error404 header.scrolling .nav-trigger span::after, .error404 header.dark-header .nav-trigger span::before, .error404 header.dark-header .nav-trigger span::after, .error404 header.consta-slider-off .nav-trigger span::before, .error404 header.consta-slider-off .nav-trigger span::after, .page-template-default header.scrolling .nav-trigger span::before, .page-template-default header.scrolling .nav-trigger span::after, .page-template-default header.dark-header .nav-trigger span::before, .page-template-default header.dark-header .nav-trigger span::after, .page-template-default header.consta-slider-off .nav-trigger span::before, .page-template-default header.consta-slider-off .nav-trigger span::after, .archive header.scrolling .nav-trigger span::before, .archive header.scrolling .nav-trigger span::after, .archive header.dark-header .nav-trigger span::before, .archive header.dark-header .nav-trigger span::after, .archive header.consta-slider-off .nav-trigger span::before, .archive header.consta-slider-off .nav-trigger span::after, .search header.scrolling .nav-trigger span::before, .search header.scrolling .nav-trigger span::after, .search header.dark-header .nav-trigger span::before, .search header.dark-header .nav-trigger span::after, .search header.consta-slider-off .nav-trigger span::before, .search header.consta-slider-off .nav-trigger span::after, .tag header.scrolling .nav-trigger span::before, .tag header.scrolling .nav-trigger span::after, .tag header.dark-header .nav-trigger span::before, .tag header.dark-header .nav-trigger span::after, .tag header.consta-slider-off .nav-trigger span::before, .tag header.consta-slider-off .nav-trigger span::after { background: white; } .blog header.is-hidden, .error404 header.is-hidden, .page-template-default header.is-hidden, .archive header.is-hidden, .search header.is-hidden, .tag header.is-hidden { -webkit-transform: translateY(-150%); -moz-transform: translateY(-150%); -ms-transform: translateY(-150%); -o-transform: translateY(-150%); transform: translateY(-150%); } .blog .nav-container, .error404 .nav-container, .page-template-default .nav-container, .archive .nav-container, .search .nav-container, .tag .nav-container { position: fixed; top: 0; right: 0; width: 100%; height: 100%; max-width: 100%; background: #1f2528; overflow: auto; z-index: 110; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); -moz-transition: -moz-transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); transition: transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1); } .blog .nav-container .nav-container-top, .error404 .nav-container .nav-container-top, .page-template-default .nav-container .nav-container-top, .archive .nav-container .nav-container-top, .search .nav-container .nav-container-top, .tag .nav-container .nav-container-top { width: 100%; padding: 0px; } .blog .nav-container .nav-container-top .menu, .error404 .nav-container .nav-container-top .menu, .page-template-default .nav-container .nav-container-top .menu, .archive .nav-container .nav-container-top .menu, .search .nav-container .nav-container-top .menu, .tag .nav-container .nav-container-top .menu { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .blog .nav-container .nav-container-top .menu li, .error404 .nav-container .nav-container-top .menu li, .page-template-default .nav-container .nav-container-top .menu li, .archive .nav-container .nav-container-top .menu li, .search .nav-container .nav-container-top .menu li, .tag .nav-container .nav-container-top .menu li { text-align: center; } .blog .nav-container .nav-container-top .menu li a, .error404 .nav-container .nav-container-top .menu li a, .page-template-default .nav-container .nav-container-top .menu li a, .archive .nav-container .nav-container-top .menu li a, .search .nav-container .nav-container-top .menu li a, .tag .nav-container .nav-container-top .menu li a { display: block; color: white; padding: 5px 10px; font-size: 2rem; font-weight: 300; opacity: .5; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .blog .nav-container .nav-container-top .menu li:hover > a, .blog .nav-container .nav-container-top .menu li.active > a, .error404 .nav-container .nav-container-top .menu li:hover > a, .error404 .nav-container .nav-container-top .menu li.active > a, .page-template-default .nav-container .nav-container-top .menu li:hover > a, .page-template-default .nav-container .nav-container-top .menu li.active > a, .archive .nav-container .nav-container-top .menu li:hover > a, .archive .nav-container .nav-container-top .menu li.active > a, .search .nav-container .nav-container-top .menu li:hover > a, .search .nav-container .nav-container-top .menu li.active > a, .tag .nav-container .nav-container-top .menu li:hover > a, .tag .nav-container .nav-container-top .menu li.active > a { opacity: 1; background: white; color: #1f2528; } .blog .nav-container .nav-container-top .menu li.menu-item-has-children > a, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children > a, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children > a, .archive .nav-container .nav-container-top .menu li.menu-item-has-children > a, .search .nav-container .nav-container-top .menu li.menu-item-has-children > a, .tag .nav-container .nav-container-top .menu li.menu-item-has-children > a { /* this is the right arrow */ } .blog .nav-container .nav-container-top .menu li.menu-item-has-children > a::after, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children > a::after, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children > a::after, .archive .nav-container .nav-container-top .menu li.menu-item-has-children > a::after, .search .nav-container .nav-container-top .menu li.menu-item-has-children > a::after, .tag .nav-container .nav-container-top .menu li.menu-item-has-children > a::after { font-family: 'FontAwesome'; content: '\f105'; display: inline-block; font-size: 1.6rem; margin-left: 10px; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .blog .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after, .archive .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after, .search .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after, .tag .nav-container .nav-container-top .menu li.menu-item-has-children > a.submenu-open::after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .blog .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu, .archive .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu, .search .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu, .tag .nav-container .nav-container-top .menu li.menu-item-has-children ul.sub-menu { display: none; margin-top: 10px; padding: 0px; } .blog .nav-container .nav-container-top .menu li.menu-item-has-children ul li, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children ul li, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children ul li, .archive .nav-container .nav-container-top .menu li.menu-item-has-children ul li, .search .nav-container .nav-container-top .menu li.menu-item-has-children ul li, .tag .nav-container .nav-container-top .menu li.menu-item-has-children ul li { margin-bottom: 10px; } .blog .nav-container .nav-container-top .menu li.menu-item-has-children ul li a, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children ul li a, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children ul li a, .archive .nav-container .nav-container-top .menu li.menu-item-has-children ul li a, .search .nav-container .nav-container-top .menu li.menu-item-has-children ul li a, .tag .nav-container .nav-container-top .menu li.menu-item-has-children ul li a { color: #ffb400; background: transparent; } .blog .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover, .error404 .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover, .page-template-default .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover, .archive .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover, .search .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover, .tag .nav-container .nav-container-top .menu li.menu-item-has-children ul li a:hover { background: transparent; color: #ffb400; } .blog .nav-container .nav-container-bottom, .error404 .nav-container .nav-container-bottom, .page-template-default .nav-container .nav-container-bottom, .archive .nav-container .nav-container-bottom, .search .nav-container .nav-container-bottom, .tag .nav-container .nav-container-bottom { display: none; } .blog.nav-open .nav-container, .error404.nav-open .nav-container, .page-template-default.nav-open .nav-container, .archive.nav-open .nav-container, .search.nav-open .nav-container, .tag.nav-open .nav-container { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .blog.nav-open header.scrolling .nav-trigger, .blog.nav-open header.dark-header .nav-trigger, .blog.nav-open header.consta-slider-off .nav-trigger, .error404.nav-open header.scrolling .nav-trigger, .error404.nav-open header.dark-header .nav-trigger, .error404.nav-open header.consta-slider-off .nav-trigger, .page-template-default.nav-open header.scrolling .nav-trigger, .page-template-default.nav-open header.dark-header .nav-trigger, .page-template-default.nav-open header.consta-slider-off .nav-trigger, .archive.nav-open header.scrolling .nav-trigger, .archive.nav-open header.dark-header .nav-trigger, .archive.nav-open header.consta-slider-off .nav-trigger, .search.nav-open header.scrolling .nav-trigger, .search.nav-open header.dark-header .nav-trigger, .search.nav-open header.consta-slider-off .nav-trigger, .tag.nav-open header.scrolling .nav-trigger, .tag.nav-open header.dark-header .nav-trigger, .tag.nav-open header.consta-slider-off .nav-trigger { top: 40px; } .blog.nav-open header.scrolling .nav-trigger span, .blog.nav-open header.dark-header .nav-trigger span, .blog.nav-open header.consta-slider-off .nav-trigger span, .error404.nav-open header.scrolling .nav-trigger span, .error404.nav-open header.dark-header .nav-trigger span, .error404.nav-open header.consta-slider-off .nav-trigger span, .page-template-default.nav-open header.scrolling .nav-trigger span, .page-template-default.nav-open header.dark-header .nav-trigger span, .page-template-default.nav-open header.consta-slider-off .nav-trigger span, .archive.nav-open header.scrolling .nav-trigger span, .archive.nav-open header.dark-header .nav-trigger span, .archive.nav-open header.consta-slider-off .nav-trigger span, .search.nav-open header.scrolling .nav-trigger span, .search.nav-open header.dark-header .nav-trigger span, .search.nav-open header.consta-slider-off .nav-trigger span, .tag.nav-open header.scrolling .nav-trigger span, .tag.nav-open header.dark-header .nav-trigger span, .tag.nav-open header.consta-slider-off .nav-trigger span { background: transparent; } .blog .single-post .content h1, .blog .single-post .content h2, .blog .single-post .content h3, .blog .single-post .content h4, .blog .single-post .content h5, .blog .single-post .content h6, .blog .single-post .content p, .error404 .single-post .content h1, .error404 .single-post .content h2, .error404 .single-post .content h3, .error404 .single-post .content h4, .error404 .single-post .content h5, .error404 .single-post .content h6, .error404 .single-post .content p, .page-template-default .single-post .content h1, .page-template-default .single-post .content h2, .page-template-default .single-post .content h3, .page-template-default .single-post .content h4, .page-template-default .single-post .content h5, .page-template-default .single-post .content h6, .page-template-default .single-post .content p, .archive .single-post .content h1, .archive .single-post .content h2, .archive .single-post .content h3, .archive .single-post .content h4, .archive .single-post .content h5, .archive .single-post .content h6, .archive .single-post .content p, .search .single-post .content h1, .search .single-post .content h2, .search .single-post .content h3, .search .single-post .content h4, .search .single-post .content h5, .search .single-post .content h6, .search .single-post .content p, .tag .single-post .content h1, .tag .single-post .content h2, .tag .single-post .content h3, .tag .single-post .content h4, .tag .single-post .content h5, .tag .single-post .content h6, .tag .single-post .content p { margin-bottom: 10px; } .blog .single-post .content h1, .blog .single-post .content h2, .blog .single-post .content h3, .error404 .single-post .content h1, .error404 .single-post .content h2, .error404 .single-post .content h3, .page-template-default .single-post .content h1, .page-template-default .single-post .content h2, .page-template-default .single-post .content h3, .archive .single-post .content h1, .archive .single-post .content h2, .archive .single-post .content h3, .search .single-post .content h1, .search .single-post .content h2, .search .single-post .content h3, .tag .single-post .content h1, .tag .single-post .content h2, .tag .single-post .content h3 { font-weight: 700; margin-top: 30px; } .blog .single-post .content figure:not(.alignleft):not(.alignright), .blog .single-post .content img:not(.alignleft):not(.alignright), .error404 .single-post .content figure:not(.alignleft):not(.alignright), .error404 .single-post .content img:not(.alignleft):not(.alignright), .page-template-default .single-post .content figure:not(.alignleft):not(.alignright), .page-template-default .single-post .content img:not(.alignleft):not(.alignright), .archive .single-post .content figure:not(.alignleft):not(.alignright), .archive .single-post .content img:not(.alignleft):not(.alignright), .search .single-post .content figure:not(.alignleft):not(.alignright), .search .single-post .content img:not(.alignleft):not(.alignright), .tag .single-post .content figure:not(.alignleft):not(.alignright), .tag .single-post .content img:not(.alignleft):not(.alignright) { max-width: 100%; height: auto !important; margin: 15px 0; } .blog .single-post .content figure:not(.gallery-item) figcaption, .error404 .single-post .content figure:not(.gallery-item) figcaption, .page-template-default .single-post .content figure:not(.gallery-item) figcaption, .archive .single-post .content figure:not(.gallery-item) figcaption, .search .single-post .content figure:not(.gallery-item) figcaption, .tag .single-post .content figure:not(.gallery-item) figcaption { text-align: center; } .blog .single-post .content p, .error404 .single-post .content p, .page-template-default .single-post .content p, .archive .single-post .content p, .search .single-post .content p, .tag .single-post .content p { font-size: 1.6rem; margin: 15px 0; } .blog .single-post .content p a, .error404 .single-post .content p a, .page-template-default .single-post .content p a, .archive .single-post .content p a, .search .single-post .content p a, .tag .single-post .content p a { color: #848789; text-decoration: underline !important; } .blog .single-post .content ul, .error404 .single-post .content ul, .page-template-default .single-post .content ul, .archive .single-post .content ul, .search .single-post .content ul, .tag .single-post .content ul { padding-left: 30px; } .blog .single-post .content ul li, .error404 .single-post .content ul li, .page-template-default .single-post .content ul li, .archive .single-post .content ul li, .search .single-post .content ul li, .tag .single-post .content ul li { font-size: 1.6rem; list-style-type: circle; font-size: 1.4rem; } .blog .single-post .content .post-password-form input[type="submit"], .error404 .single-post .content .post-password-form input[type="submit"], .page-template-default .single-post .content .post-password-form input[type="submit"], .archive .single-post .content .post-password-form input[type="submit"], .search .single-post .content .post-password-form input[type="submit"], .tag .single-post .content .post-password-form input[type="submit"] { border: 0px; background: black; color: white; } .blog .single-post .content .embed-container, .error404 .single-post .content .embed-container, .page-template-default .single-post .content .embed-container, .archive .single-post .content .embed-container, .search .single-post .content .embed-container, .tag .single-post .content .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .blog .single-post .content .embed-container iframe, .blog .single-post .content .embed-container object, .blog .single-post .content .embed-container embed, .error404 .single-post .content .embed-container iframe, .error404 .single-post .content .embed-container object, .error404 .single-post .content .embed-container embed, .page-template-default .single-post .content .embed-container iframe, .page-template-default .single-post .content .embed-container object, .page-template-default .single-post .content .embed-container embed, .archive .single-post .content .embed-container iframe, .archive .single-post .content .embed-container object, .archive .single-post .content .embed-container embed, .search .single-post .content .embed-container iframe, .search .single-post .content .embed-container object, .search .single-post .content .embed-container embed, .tag .single-post .content .embed-container iframe, .tag .single-post .content .embed-container object, .tag .single-post .content .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .blog aside, .error404 aside, .page-template-default aside, .archive aside, .search aside, .tag aside { margin-top: 60px; } @media only screen and (min-width: 992px) { .blog aside, .error404 aside, .page-template-default aside, .archive aside, .search aside, .tag aside { margin-top: 0px; } } .blog footer, .error404 footer, .page-template-default footer, .archive footer, .search footer, .tag footer { margin-top: 70px; } .section-hero { position: relative; min-height: 400px; background-attachment: fixed; } @media only screen and (max-width: 480px) { .section-hero { min-height: 350px; } } .section-hero:before { position: absolute; content: ''; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } .section-hero .hero-text { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); margin-top: 100px; } @media only screen and (max-width: 768px) { .section-hero .hero-text { width: 100%; margin-top: 70px; } } .section-hero .hero-text .hero-title { font-size: 4.8rem; text-transform: uppercase; color: white; font-weight: 700; letter-spacing: -1px; text-align: center; } @media only screen and (max-width: 480px) { .section-hero .hero-text .hero-title { font-size: 3.6rem; } } .section-hero .hero-text .breadcrumb { background: transparent; text-align: center; } .section-hero .hero-text .breadcrumb span a, .section-hero .hero-text .breadcrumb span.sep { color: #d2d3d4; } .section-hero .hero-text .breadcrumb span.current { color: #ffb400; } main { padding: 60px 0; } main.onepage { padding: 0px; } main.hide-page-hero, main.consta-slider-off { margin-top: 120px; } main .post { margin: 60px 0; } main .post:first-child { margin-top: 0px; } main .post:last-child { margin-bottom: 0px; } @media only screen and (min-width: 992px) { main .post .post-meta { float: right; text-align: right; } } main .post .post-meta div { margin-bottom: 5px; } @media only screen and (max-width: 768px) { main .post .post-meta div { display: inline-block; margin-right: 10px; } main .post .post-meta div:last-child { margin-right: 0px; } } main .post .post-meta .date .date-number { display: inline-block; font-size: 10rem; color: #333333; font-weight: 700; letter-spacing: -7px; line-height: 72px; } @media only screen and (min-width: 992px) { main .post .post-meta .date .date-number { display: block; margin-bottom: 5px; margin-right: -8px; } } main .post .post-meta .date .date-text { font-size: 2.4rem; font-weight: 700; color: #ffb400; } main .post .post-meta .post-author a, main .post .post-meta .post-author a:hover { color: #333333; } main .post .post-meta .categories a { color: #ffb400; } main .post .post-meta .comments-number { color: #333333; } main .post .post-meta .tags { color: #1f2528; font-weight: 600; } main .post.sticky .post-title a:after { display: inline-block; font-family: 'FontAwesome'; content: '\f249'; color: black; margin-left: 15px; font-size: 2.8rem; } main .post .post-title, main .post .post-title a { font-size: 3.6rem; line-height: 40px; font-weight: 700; color: #333333; letter-spacing: -1px; margin-bottom: 40px; } @media only screen and (max-width: 768px) { main .post .post-title, main .post .post-title a { margin-top: 15px; } } main .post .post-content { margin-bottom: 40px; } main .post .post-content img { max-width: 100%; height: auto; } main .post .post-content .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } main .post .post-content .embed-container iframe, main .post .post-content .embed-container object, main .post .post-content .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } main .post .post-content #owl-gallery .item img { display: block; width: 100%; height: auto !important; } main .post .post-content #owl-gallery .owl-controls { position: absolute; width: 100%; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-prev, main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-next { position: absolute; background: rgba(255, 255, 255, 0.7); width: 40px; height: 30px; -webkit-transition: all, 0.35s; -moz-transition: all, 0.35s; transition: all, 0.35s; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-prev:before, main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-next:before { position: absolute; font-family: 'FontAwesome'; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 2rem; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-prev:hover, main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-next:hover { background: #ffb400; color: white; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-prev { left: 10px; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-prev:before { content: '\f104'; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-next { right: 10px; } main .post .post-content #owl-gallery .owl-controls .owl-nav .owl-next:before { content: '\f105'; } main .post .excerpt p { font-size: 1.4rem; line-height: 24px; color: #333333; margin-bottom: 30px; } main .post .read-more { display: block; background: #ffb400; width: 156px; height: 40px; text-align: center; color: white; line-height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; } main .post .read-more:hover { background: #1f2528; } main .comment-section { margin-top: 60px; } main .comment-section .comment-section-title { font-weight: 300; letter-spacing: -1px; } main .comment-section .comment-section-title span { color: #ffb400; } main .comment-section .comments-list { margin-bottom: 60px; } @media only screen and (max-width: 768px) { main .comment-section .comments-list { padding-left: 30px; } } main .comment-section .comments-list .pingback .avatar { display: none; } main .comment-section .comments-list .comment, main .comment-section .comments-list .pingback { position: relative; border: 2px solid rgba(33, 39, 42, 0.05); margin: 30px 0; padding: 30px 30px 30px 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; } main .comment-section .comments-list .comment.depth-2, main .comment-section .comments-list .comment.depth-3, main .comment-section .comments-list .comment.depth-4, main .comment-section .comments-list .comment.depth-5, main .comment-section .comments-list .pingback.depth-2, main .comment-section .comments-list .pingback.depth-3, main .comment-section .comments-list .pingback.depth-4, main .comment-section .comments-list .pingback.depth-5 { width: 90%; margin-left: 10%; } @media only screen and (max-width: 480px) { main .comment-section .comments-list .comment.depth-2, main .comment-section .comments-list .comment.depth-3, main .comment-section .comments-list .comment.depth-4, main .comment-section .comments-list .comment.depth-5, main .comment-section .comments-list .pingback.depth-2, main .comment-section .comments-list .pingback.depth-3, main .comment-section .comments-list .pingback.depth-4, main .comment-section .comments-list .pingback.depth-5 { padding: 50px 15px 15px 20px; margin-left: 0px; margin: 40px 0; } } @media only screen and (max-width: 480px) { main .comment-section .comments-list .comment.depth-2 .avatar, main .comment-section .comments-list .comment.depth-3 .avatar, main .comment-section .comments-list .comment.depth-4 .avatar, main .comment-section .comments-list .comment.depth-5 .avatar, main .comment-section .comments-list .pingback.depth-2 .avatar, main .comment-section .comments-list .pingback.depth-3 .avatar, main .comment-section .comments-list .pingback.depth-4 .avatar, main .comment-section .comments-list .pingback.depth-5 .avatar { left: 50%; margin-left: -30px; top: -30px; } main .comment-section .comments-list .comment.depth-2 .avatar img, main .comment-section .comments-list .comment.depth-3 .avatar img, main .comment-section .comments-list .comment.depth-4 .avatar img, main .comment-section .comments-list .comment.depth-5 .avatar img, main .comment-section .comments-list .pingback.depth-2 .avatar img, main .comment-section .comments-list .pingback.depth-3 .avatar img, main .comment-section .comments-list .pingback.depth-4 .avatar img, main .comment-section .comments-list .pingback.depth-5 .avatar img { top: 0px; left: 50%; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } main .comment-section .comments-list .comment .avatar, main .comment-section .comments-list .pingback .avatar { position: absolute; top: 10px; left: -30px; width: 60px; height: 60px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; border: 2px solid rgba(33, 39, 42, 0.05); background: white; } main .comment-section .comments-list .comment .avatar img, main .comment-section .comments-list .pingback .avatar img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } main .comment-section .comments-list .comment .comment-reply-link, main .comment-section .comments-list .pingback .comment-reply-link { position: absolute; right: 20px; top: 20px; } main .comment-section .comments-list .comment .comment-reply-link:before, main .comment-section .comments-list .pingback .comment-reply-link:before { font-family: 'Ionicons'; content: '\f265'; color: #cccccc; font-size: 2.4rem; } main .comment-section .comments-list .comment .author, main .comment-section .comments-list .pingback .author { font-size: 1.4rem; font-weight: 700; font-style: italic; text-transform: uppercase; } main .comment-section .comments-list .comment .date, main .comment-section .comments-list .pingback .date { font-size: 1.2rem; font-weight: 700; font-style: italic; color: #999999; } main .comment-section .comments-list .comment .comment-body, main .comment-section .comments-list .pingback .comment-body { padding-left: 20px; margin-top: 15px; } @media only screen and (max-width: 480px) { main .comment-section .comments-list .comment .comment-body, main .comment-section .comments-list .pingback .comment-body { padding-left: 0px; } } main .comment-section .comments-list .comment .comment-body em, main .comment-section .comments-list .pingback .comment-body em { color: #ffb400; } main .comment-section .comments-list .comment .comment-body h1, main .comment-section .comments-list .comment .comment-body h2, main .comment-section .comments-list .comment .comment-body h3, main .comment-section .comments-list .comment .comment-body h4, main .comment-section .comments-list .comment .comment-body h5, main .comment-section .comments-list .comment .comment-body h6, main .comment-section .comments-list .comment .comment-body p, main .comment-section .comments-list .pingback .comment-body h1, main .comment-section .comments-list .pingback .comment-body h2, main .comment-section .comments-list .pingback .comment-body h3, main .comment-section .comments-list .pingback .comment-body h4, main .comment-section .comments-list .pingback .comment-body h5, main .comment-section .comments-list .pingback .comment-body h6, main .comment-section .comments-list .pingback .comment-body p { margin: 5px 0; } main .comment-section .comment-respond { margin: 50px 0 100px 0; } main .comment-section .comment-respond .comment-reply-title { font-weight: 300; margin-bottom: 30px; } main .comment-section .comment-respond #cancel-comment-reply-link { color: #848789; } main .comment-section .comment-respond input, main .comment-section .comment-respond textarea { width: 100%; border: 0px; padding: 0 30px 5px 0; color: #999999; font-size: 1.4rem; font-weight: 300; border-bottom: 1px solid #b3b3b3; } main .comment-section .comment-respond input::-webkit-input-placeholder, main .comment-section .comment-respond textarea::-webkit-input-placeholder { font-size: 1.4rem; color: #b3b3b3; line-height: 21px; font-weight: 300; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main .comment-section .comment-respond input::-moz-placeholder, main .comment-section .comment-respond textarea::-moz-placeholder { font-size: 1.4rem; color: #b3b3b3; line-height: 21px; font-weight: 300; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main .comment-section .comment-respond input:-moz-placeholder, main .comment-section .comment-respond textarea:-moz-placeholder { font-size: 1.4rem; color: #b3b3b3; line-height: 21px; font-weight: 300; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main .comment-section .comment-respond input:-ms-input-placeholder, main .comment-section .comment-respond textarea:-ms-input-placeholder { font-size: 1.4rem; color: #b3b3b3; line-height: 21px; font-weight: 300; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main .comment-section .comment-respond input:focus::-webkit-input-placeholder, main .comment-section .comment-respond textarea:focus::-webkit-input-placeholder { color: transparent; } main .comment-section .comment-respond input:focus::-moz-placeholder, main .comment-section .comment-respond textarea:focus::-moz-placeholder { color: transparent; } main .comment-section .comment-respond input:focus:-moz-placeholder, main .comment-section .comment-respond textarea:focus:-moz-placeholder { color: transparent; } main .comment-section .comment-respond input:focus:-ms-input-placeholder, main .comment-section .comment-respond textarea:focus:-ms-input-placeholder { color: transparent; } main .comment-section .comment-respond textarea { height: 120px; margin-top: 30px; } main .comment-section .comment-respond .form-submit .submit { margin: 0px auto; line-height: 30px; margin-top: 15px; border: 0px; padding: 0px; } main .comment-section .comment-respond .form-submit .submit:hover { background: #626669; } @media only screen and (min-width: 768px) { main .comment-section .comment-respond .form-submit .submit { float: right; } } @media only screen and (min-width: 768px) { main .post-navigation .nav-previous, main .post-navigation .nav-next { display: inline-block; } } main .post-navigation .nav-previous a, main .post-navigation .nav-next a { display: block; padding: 10px 20px; border: 1px solid #1f2528; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; background: #1f2528; color: white; } main .post-navigation .nav-previous a:hover, main .post-navigation .nav-next a:hover { background: #1f2528; color: white; } @media (max-width: 600px) { main .post-navigation .nav-previous a, main .post-navigation .nav-next a { width: 100%; text-align: center; } } @media only screen and (min-width: 768px) { main .post-navigation .nav-next { float: right; } } main .post-navigation .nav-next a:before { display: block; content: 'sonraki yazı>'; color: #ffb400; } @media only screen and (min-width: 768px) { main .post-navigation .nav-next a:before { text-align: right; } } main .post-navigation .nav-previous a:before { display: block; content: '< önceki yazı'; color: #ffb400; } @media (max-width: 600px) { main .post-navigation .nav-previous a { margin-bottom: 15px; } } main .pager li:first-child { float: left; } main .pager li:last-child { float: right; } main .pager li a { -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; padding: 5px 18px; } main .pager li a:hover { background: #1f2528; color: white; } main .pager li.newer { float: left; } main .pager:before, main .pager:after { content: ""; display: table; clear: both; } main aside { margin-top: 60px; } @media only screen and (min-width: 992px) { main aside { margin-top: 0px; } } main aside > hr:nth-of-type(1) { display: none; } main aside .widget { margin: 40px 0; } main aside .widget:first-child { margin-top: 0px; } main aside .widget.widget_text label, main aside .widget.widget_categories label, main aside .widget.widget_archive label { margin-bottom: 10px; } main aside .widget.widget_text select, main aside .widget.widget_categories select, main aside .widget.widget_archive select { width: 100%; } main aside .widget.widget_categories ul li, main aside .widget.widget_archive ul li, main aside .widget.widget_pages ul li, main aside .widget.widget_nav_menu ul li { font-size: 1.5rem; position: relative; line-height: 24px; } main aside .widget.widget_categories ul li a, main aside .widget.widget_archive ul li a, main aside .widget.widget_pages ul li a, main aside .widget.widget_nav_menu ul li a { font-size: 1.5rem; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } main aside .widget.widget_categories ul li a:hover, main aside .widget.widget_archive ul li a:hover, main aside .widget.widget_pages ul li a:hover, main aside .widget.widget_nav_menu ul li a:hover { color: #848789; } main aside .widget.widget_categories ul li.page_item_has_children, main aside .widget.widget_categories ul li.menu-item-has-children, main aside .widget.widget_archive ul li.page_item_has_children, main aside .widget.widget_archive ul li.menu-item-has-children, main aside .widget.widget_pages ul li.page_item_has_children, main aside .widget.widget_pages ul li.menu-item-has-children, main aside .widget.widget_nav_menu ul li.page_item_has_children, main aside .widget.widget_nav_menu ul li.menu-item-has-children { padding-left: 15px; } main aside .widget.widget_categories ul li.cat-item .children, main aside .widget.widget_archive ul li.cat-item .children, main aside .widget.widget_pages ul li.cat-item .children, main aside .widget.widget_nav_menu ul li.cat-item .children { padding-left: 15px; } main aside .widget.widget_rss ul li { margin-bottom: 10px; } main aside .widget.widget_rss ul li:last-child { margin-bottom: 0px; } main aside .widget.widget_rss ul li .rsswidget { color: black; font-weight: 600; } main aside .widget.widget_rss ul li .rss-date { color: #848789; } main aside .widget.widget_rss ul li .rss-date:before { content: ' - '; margin-left: 3px; } main aside .widget.widget_rss ul li cite { color: #ffb400; } main aside .widget .widget-title { font-size: 1.6rem; color: #333333; text-transform: uppercase; letter-spacing: -1px; font-weight: 700; margin-bottom: 20px; } main aside .widget.widget_text img { max-width: 100%; height: auto !important; margin: 10px 0; } main aside .widget.widget_calendar .calendar_wrap { width: 100%; } main aside .widget.widget_calendar .calendar_wrap #wp-calendar { width: 100%; } main aside .widget.widget_calendar .calendar_wrap table { margin: 15px 0; } main aside .widget.widget_calendar .calendar_wrap table th { min-width: auto; } main aside .widget.widget_calendar .calendar_wrap table tr { line-height: 24px; } main aside .widget.widget_calendar .calendar_wrap table td { padding: 0px; } main aside .widget.widget_calendar .calendar_wrap table a { text-decoration: none; } main aside .widget.widget_search { border-bottom: 0px; } main aside .widget.widget_search .search-input { position: relative; border: 0px; border-bottom: 1px solid rgba(51, 51, 51, 0.1); } main aside .widget.widget_search .search-input input { width: 100%; border: 0px; padding: 0 30px 5px 0; color: #999999; font-size: 1.4rem; font-weight: 300; } main aside .widget.widget_search .search-input input::-webkit-input-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main aside .widget.widget_search .search-input input::-moz-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main aside .widget.widget_search .search-input input:-moz-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main aside .widget.widget_search .search-input input:-ms-input-placeholder { font-size: 1.2rem; color: silver; line-height: 21px; letter-spacing: 0.5px; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } main aside .widget.widget_search .search-input input:focus::-webkit-input-placeholder { color: transparent; } main aside .widget.widget_search .search-input input:focus::-moz-placeholder { color: transparent; } main aside .widget.widget_search .search-input input:focus:-moz-placeholder { color: transparent; } main aside .widget.widget_search .search-input input:focus:-ms-input-placeholder { color: transparent; } main aside .widget.widget_search .search-button { position: absolute; border: 0px; top: 0px; right: 0px; background: transparent; color: #333333; } main aside .widget.widget_categories .screen-reader-text, main aside .widget.widget_archive .screen-reader-text, main aside .widget.widget_recent_entries .screen-reader-text, main aside .widget.widget_recent_comments .screen-reader-text, main aside .widget.widget_meta .screen-reader-text { font-size: 1.6rem; } main aside .widget.widget_categories ul li, main aside .widget.widget_archive ul li, main aside .widget.widget_recent_entries ul li, main aside .widget.widget_recent_comments ul li, main aside .widget.widget_meta ul li { margin-bottom: 10px; color: #ffb400; } main aside .widget.widget_categories ul li:last-child, main aside .widget.widget_archive ul li:last-child, main aside .widget.widget_recent_entries ul li:last-child, main aside .widget.widget_recent_comments ul li:last-child, main aside .widget.widget_meta ul li:last-child { margin-bottom: 0px; } main aside .widget.widget_categories ul li a, main aside .widget.widget_archive ul li a, main aside .widget.widget_recent_entries ul li a, main aside .widget.widget_recent_comments ul li a, main aside .widget.widget_meta ul li a { color: #333333; font-size: 1.6rem; } main aside .widget.widget_recent_comments .comment-author-link:after { content: '-'; margin-left: 3px; } main aside .widget.consta_popularposts_widget #owl-popular figure { position: relative; height: 300px; overflow: hidden; } @media only screen and (min-width: 992px) { main aside .widget.consta_popularposts_widget #owl-popular figure { height: 180px; } } @media only screen and (max-width: 480px) { main aside .widget.consta_popularposts_widget #owl-popular figure { height: 200px; } } main aside .widget.consta_popularposts_widget #owl-popular figure img { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); max-width: 100%; height: auto !important; } main aside .widget.consta_popularposts_widget #owl-popular figure figcaption { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 80%; height: 70%; background: rgba(0, 0, 0, 0.5); color: white; } main aside .widget.consta_popularposts_widget #owl-popular figure figcaption p, main aside .widget.consta_popularposts_widget #owl-popular figure figcaption a { position: relative; width: 100%; padding: 20px; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); font-size: 1.4rem; font-weight: 300; text-align: center; color: white; } main aside .widget.consta_popularposts_widget #owl-popular figure figcaption .post-type { position: absolute; bottom: 10px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); color: #ffb400; } main aside .widget.consta_popularposts_widget #owl-popular .owl-controls .owl-dots { position: absolute; bottom: -30px; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } main aside .widget.consta_popularposts_widget #owl-popular .owl-controls .owl-dots .owl-dot { display: inline-block; margin-left: 5px; } main aside .widget.consta_popularposts_widget #owl-popular .owl-controls .owl-dots .owl-dot:first-child { margin-left: 0px; } main aside .widget.consta_popularposts_widget #owl-popular .owl-controls .owl-dots .owl-dot span { display: block; width: 10px; height: 10px; background: #1f2528; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } main aside .widget.consta_popularposts_widget #owl-popular .owl-controls .owl-dots .owl-dot.active span { background: #ffb400; } main aside .widget.widget_tag_cloud a { display: inline-block; padding: 5px 14px; text-align: center; margin: 0 2px 5px 0; font-size: 1.2rem !important; border: 1px solid #ffb400; color: #333333; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; -webkit-transition: background 0.4s, color 0.4s; -moz-transition: background 0.4s, color 0.4s; transition: background 0.4s, color 0.4s; } main aside .widget.widget_tag_cloud a:hover { background: #ffb400; color: white; } main aside .widget.widget_tag_cloud a:last-child { margin-right: 0px; } main aside .widget.consta_social_widget ul li { display: inline-block; margin-left: 7px; } main aside .widget.consta_social_widget ul li a { color: #ffb400; font-size: 1.8rem; -webkit-transition: color 0.4s; -moz-transition: color 0.4s; transition: color 0.4s; } main aside .widget.consta_social_widget ul li a:hover { color: #1f2528; } main aside .widget.consta_social_widget ul li:first-child { margin-left: 0px; } .page-template-default .page-content .page-title { margin-bottom: 20px; } .page-template-default .page-content h1, .page-template-default .page-content h2, .page-template-default .page-content h3, .page-template-default .page-content h4, .page-template-default .page-content h5, .page-template-default .page-content h6 { margin: 10px 0; } .page-template-default .page-content p { font-size: 1.6rem; margin: 15px 0; } .page-template-default .page-content ul li, .page-template-default .page-content ol li { font-size: 1.5rem; line-height: 30px; } .page-template-default .page-content ul li a, .page-template-default .page-content ol li a { color: #848789; } .page-template-default .page-content figure:not(.alignleft):not(.alignright), .page-template-default .page-content img:not(.alignleft):not(.alignright) { max-width: 100%; height: auto !important; margin: 15px 0; } .page-template-default .page-content figure figcaption { text-align: center; }