html {font-family: 'Roboto', sans-serif; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; height:100%;}
body {margin:0; padding:0px; font-family: 'Roboto', sans-serif; font-size:16px; color:#454242; height:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display:block}
audio, canvas, progress, video {display:inline-block; vertical-align:baseline}
audio:not([controls]) {display:none; height:0}
[hidden], template {display:none}
a {background-color:transparent; color:#084063;}
a:active, a:hover {outline:0; color:#000;}
abbr[title] {border-bottom:1px dotted}
b, strong {font-weight:700}
dfn {font-style:italic}
mark {background:#ff0; color:#000}
small {font-size:80%}
sub, sup {font-size:75%; line-height:0; position:relative; vertical-align:baseline}
sup {top:-.5em}
sub {bottom:-.25em}
img {border:0}
svg:not(:root) {overflow:hidden}
figure {margin:1em 40px}
hr {box-sizing:content-box; height:0}
pre {overflow:auto}
code, kbd, pre, samp { font-family:monospace, monospace; font-size:1em}
button, input, optgroup, select, textarea { color:inherit; font:inherit; margin:0}
button {overflow:visible}
button, select { text-transform:none}
button {color: #fff;}
button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance:button; cursor:pointer}
button[disabled], html input[disabled] { cursor:default}
button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}
input { line-height:normal}
input[type=checkbox], input[type=radio] { box-sizing:border-box; padding:0}
input[type=checkbox] {width: 1.5rem; zoom: 1.5; margin-top: .75rem;}
input[type=radio] {width: 1.5rem;}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {height:auto}
input[type=search] { -webkit-appearance:textfield; box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {-webkit-appearance:none}
fieldset {border:1px solid silver; margin:16px 2px; padding:.35em .625em .75em}
legend {border:0; padding:0}
textarea {overflow:auto}
optgroup {font-weight:700}
table {border-collapse:collapse; border-spacing:0}
td, th {padding:0}
p, ul, h1, h2, h3, h4, h5 {margin:0px; padding:0px; list-style-type:none; font-weight:normal;}
p { margin: 0 0 0.7rem; }
.pad-right {padding-right:0px;}
.pad-left {padding-left:0px;}
.img-responsive {max-width:100% !important;}
.img-center{margin:0 auto; display:block;}
.mtp0{margin-top:0px;}
.mtp5{margin-top:5px;}
.mtp10{margin-top:10px;}
.mtp15{margin-top:15px;}
.mtp20{margin-top:20px;}
.mtp25{margin-top:25px;}
.mtp30{margin-top:30px;}
.mtp35{margin-top:35px;}
.mtp40{margin-top:40px;}
.mtp45{margin-top:45px;}
.mtp50{margin-top:50px;}
.mbt0{margin-bottom:0px;}
.mbt5{margin-bottom:5px;}
.mbt10{margin-bottom:10px;}
.mbt15{margin-bottom:15px;}
.mbt20{margin-bottom:20px;}
.mbt25{margin-bottom:25px;}
.mbt30{margin-bottom:30px;}
.mbt35{margin-bottom:35px;}
.mbt40{margin-bottom:40px;}
.mbt45{margin-bottom:45px;}
.mbt50{margin-bottom:50px;}
@font-face {
font-family: 'robotocondensed-bold';
src: url('../css/fonts/robotocondensed-bold.eot');
src: url('../css/fonts/robotocondensed-bold.eot?#iefix') format('embedded-opentype'), url('../css/fonts/robotocondensed-bold.woff') format('woff'), url('../css/fonts/robotocondensed-bold.ttf') format('truetype'), url('../css/fonts/robotocondensed-bold.svg#arial') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotocondensed-light';
src: url('../css/fonts/robotocondensed-light.eot');
src: url('../css/fonts/robotocondensed-light.eot?#iefix') format('embedded-opentype'), url('../css/fonts/robotocondensed-light.woff') format('woff'), url('../css/fonts/robotocondensed-light.ttf') format('truetype'), url('../css/fonts/robotocondensed-light.svg#arial') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotocondensed-regular';
src: url('../css/fonts/robotocondensed-regular.eot');
src: url('../css/fonts/robotocondensed-regular.eot?#iefix') format('embedded-opentype'), url('../css/fonts/robotocondensed-regular.woff') format('woff'), url('../css/fonts/robotocondensed-regular.ttf') format('truetype'), url('../css/fonts/robotocondensed-regular.svg#arial') format('svg');
font-weight: normal;
font-style: normal;
}
.robot-con{font-family: 'robotocondensed-regular';}
.yaone{font-family: 'Yanone Kaffeesatz', sans-serif;}
#wrapper { width:100%; float:left; overflow:hidden;}
h1{width:100%; float:left; font-family: 'Yanone Kaffeesatz', sans-serif !important; text-align:center; font-size:40px !important; padding:50px 0 0 0; color:#fff !important;}
h2{width:100%; float:left; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size:34px; color:#00b9f2 !important; padding:40px 0 0 0;}
h3{width:auto; float:left; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:34px; border-bottom:2px solid #1e9dd1;}
/*h4{width:100%; float:left; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size:28px !important; color:#000 !important;}
*/
.hvr-sweep-to-bottom { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background:#0091cc; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active { color: white;}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1);}
/*=== Header ===*/
header{width:100%; float:left; background:#f0f2f2; padding:15px 0 12px;}
.logo p{width:auto; float:left; margin-top:5px; margin-bottom: 0;}
.menu{width:auto; float:left; margin-left:50px;}
.menu ul{margin:0px; padding:0px; list-style-type:none;}
.menu ul li{float:left; margin:0 15px; font-size:16px; font-family: 'robotocondensed-regular'; color: #454242; font-weight: 900; }
.cl-effect-17 a { color: #454242; text-shadow: none; padding: 10px 0; position: relative; display: inline-block;}
.cl-effect-17 a::before { color: #454242; content: attr(data-hover); position: absolute; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none;}
.cl-effect-17 a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #0091cc; opacity: 0; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); transform: translateY(5px); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; pointer-events: none; color:#0091cc;}
.cl-effect-17 a:hover::before, .cl-effect-17 a:focus::before { opacity: 0; -webkit-transform: translateY(-0px); -moz-transform: translateY(-0px); transform: translateY(-0px); color:#0091cc;}
.cl-effect-17 a:hover::after, .cl-effect-17 a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); color:#0091cc;}
.title-area{padding-right:35px;}
.header-call-to-action{width:auto; float:left; margin-right:35px; margin-top:0px;}
.header-call-to-action a, a.view-portfolio { border:1px solid #0091cc; color:#0091cc; text-decoration:none; padding:11px 20px; height:47px; font-family: 'robotocondensed-regular'; font-size:16px; font-style:italic; }
.header-call-to-action a:hover{color:#fff; }
.header-call-to-action p {margin-bottom: 0; margin-top: 0;}
/*.searchbox{position:relative; min-width:50px; width:0%; height:52px; float:left; overflow:hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; margin-right:35px;}*/
.searchbox{ position: relative; width: auto; height: 52px; float: left; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; margin-right: 35px; }
.searchbox a{width:50px; height:47px; display:block; font-size:22px; text-align:center; float:left; padding:0; border:1px solid #7d7b7b; color:#7d7b7b!important; line-height:42px; }
.searchbox a:hover{color:#fff !important; border:1px solid #1e9dd1;}
.searchbox p {margin-top: 0;}
.searchbox input { background: #fefefe; border: 1px solid #7d7b7b; color: #7d7b7b; font-family: 'robotocondensed-regular'; font-size: 16px; font-style: normal; margin: 0; padding: 2px 5px; width: 200px; }
.searchbox input:focus { background: #fefefe; }
.searchbox button { background: none; color: #7d7b7b; padding: 0; position: absolute; right: 10px; top: 8px; }
.header-contact { font-family: 'robotocondensed-regular'; font-size: 16px; font-weight: bolder; margin: 0 15px; }
.header-contact.cl-effect-17 a::after, .header-contact.cl-effect-17 a::after { height: 0; }
/*.header-contact {width:auto; float:right; color:#7d7b7b; font-family: 'robotocondensed-regular'; line-height:normal; margin: 0 15px 0 0; }*/
/*.header-contact a{color:#7d7b7b; }*/
.header-right{width:auto; float:right;}
/*=== Header End ===*/
/*=== Banner ===*/
#banner{width:100%; float:left; background:url(../images/banner-bg.jpg) no-repeat left top; background-size:cover; position:relative; /*padding-bottom:20px;*/}
.banner-image{float:left; margin:30px 0;}
.banner-text{float:left; margin:50px 0 0 -70px; padding: 0 10px;}
.banner-title h1{width:100%; float:left; color:#fff; font-family: 'Yanone Kaffeesatz', sans-serif; font-size:48px; text-align: left; margin-bottom: .25rem; padding-top: 18px;}
.banner-title p{font-family: 'Roboto', sans-serif; color: #454242; font-size: 1rem;}
.banner-sublink{width:auto; float:left; clear:both;}
.banner-sublink a{border:2px solid #fff; color:#fff; text-decoration:none; padding:8px 15px; font-family: 'robotocondensed-regular'; font-size:22px; }
.banner-sublink a:hover{color:#0091cc;}
.banner-sublink .hvr-sweep-to-bottom:before{ background:#fff; }
.banner-bullet{width:100px; margin:0 auto 0px;}
.banner-bullet a{width:18px; height:18px; border:2px solid #fff; float:left; margin:0 5px; border-radius:50%; background:none;}
.banner-bullet a:hover{background:#fff;}
.bulacti{background:#fff !important;}
/*=== Banner End ===*/
/*=== Tab Section ===*/
#tabs{width:100%; float:left; background:#3f3c3c; color:#969696; /*padding-bottom:20px;*/ text-align:center;}
.tab-top{width:100%; background:#262223;}
.icon-nav {display:block; overflow:hidden; width:100%; padding-top:30px; padding-right:0.9375rem; padding-bottom:50px; padding-left:0.9375rem}
.icon-nav .icon-nav-item {padding-left:0.9375rem; padding-right:0.9375rem; width:16.5%; float:left; position:relative; max-height:193px}
.icon-nav .icon-nav-item p {text-align:center; margin:0; line-height:normal;}
.top-nav-first { padding-left:0.9375rem; padding-right:0.9375rem; width:41.66667%; float:left; padding-top:210px; padding-bottom:150px}
.icon-nav-item {-webkit-transition:color 400ms, fill 400ms; transition:color 400ms, fill 400ms; cursor:pointer; line-height:normal;}
.icon-nav-item:hover, .icon-nav-item.flex-active {color:#00b9f2}
.tab-icon1{background:url(../images/icon1.png) no-repeat center top; padding-top:112px;}
.tab-icon2{background:url(../images/icon2.png) no-repeat center top; padding-top:112px;}
.tab-icon3{background:url(../images/icon3.png) no-repeat center top; padding-top:112px;}
.tab-icon4{background:url(../images/icon4.png) no-repeat center top; padding-top:112px;}
.tab-icon5{background:url(../images/icon5.png) no-repeat center top; padding-top:112px;}
.tab-icon6{background:url(../images/icon6.png) no-repeat center top; padding-top:112px;}
.slide-item p{text-align:center; color:#f0f2f2; padding:25px 0 35px; width:100%; float:left;}
.ctas{width:150px; margin:0 auto; clear:both;}
.ctas a{border:2px solid #fff; color:#fff; text-align:center; text-decoration:none; padding:14px 15px 12px; width:100%; font-family: 'robotocondensed-bold'; float:left;}
.ctas a:hover{border:2px solid #fff; color:#3f3c3c; }
.ctas .hvr-sweep-to-bottom:before{ background:#fff; }
.tab-icon1.flex-active, .tab-icon1:hover{background:url(../images/icon1h.png) no-repeat center top; padding-top:112px;}
.tab-icon2.flex-active, .tab-icon2:hover{background:url(../images/icon2h.png) no-repeat center top; padding-top:112px;}
.tab-icon3.flex-active, .tab-icon3:hover{background:url(../images/icon3h.png) no-repeat center top; padding-top:112px;}
.tab-icon4.flex-active, .tab-icon4:hover{background:url(../images/icon4h.png) no-repeat center top; padding-top:112px;}
.tab-icon5.flex-active, .tab-icon5:hover{background:url(../images/icon5h.png) no-repeat center top; padding-top:112px;}
.tab-icon6.flex-active, .tab-icon6:hover{background:url(../images/icon6h.png) no-repeat center top; padding-top:112px;}
.icon-slides {height: 200px;}
/*=== Tab Section End ===*/
/*=== Gallery ===*/
#gallery{width:100%; float:left; padding:10px 0;}
#gallery h1{color:#222222 !important;}
.my-gallery{width:100%; float:left; margin-top:15px;}
.img1{width:30%; float:left; max-height:320px; overflow:hidden; position:relative; padding:5px; text-align:center;}
.img1 img, .img2 img{ /*width:auto; height:auto; max-width:inherit;*/ float:left; vertical-align:top;}
.img2{width:40%; float:left; overflow:hidden; max-height:320px; position:relative; padding:5px; text-align:center;}
.img-wrp{margin:5px 5px; float:left;}
.image-overlay-img{background:url(../images/overlay.png) repeat left top; position:absolute; height:100%; width:100%; text-align:center; float:left; left:5px; padding-top:22%; }
#effect-2 .overlay img{ margin:20% auto 0!important; display:block !important; float:none !important; }
.overlay { }
#effect-2 .overlay { top: 0; left: 0; right: 0; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); width:100%; height:100%; margin:5px;}
/*=== Gallery End ===*/
/*=== 3box ===*/
#gray-part{background:#f0f2f2; padding-bottom:60px; width:100%; float:left;}
.news-box{width:95%; float:left; margin:25px 5% 0 0;}
.news-box a{font-weight:600; color:#454242;}
.news-box a:hover{color:#0091cc;}
.sublink{width:auto; float:left; clear:both; margin-top:15px;}
.sublink a{border:2px solid #0091cc; color:#0091cc; text-decoration:none; padding:4px 12px; font-family: 'robotocondensed-regular'; font-size:22px; }
.sublink a span{font-size:18px; text-transform:uppercase; padding:0 15px;}
.sublink a:hover{color:#fff; }
.videos{width:100%; float:left; margin-top:25px;}
/*=== 3box End ===*/
/*=== News ===*/
.news-box a.readmore { color: #2ba6cb; font-weight: normal; }
.news-box a.readmore:hover { color: #454242; }
.pagination {clear:both; padding-bottom: 1rem;}
/*=== News End ===*/
/*=== Middle Bottom ===*/
#middle-bottom{width:100%; float:left; padding:50px 0;}
.testimonial-slider{width:100%; float:left; margin-top:25px;}
.bx-wrapper { position: relative; margin: 0 auto 30px; padding: 0; *zoom: 1; -ms-touch-action: pan-y; touch-action: pan-y;}
.bx-wrapper img { max-width: 100%; display: block;}
.bxslider { margin: 0; padding: 0;}
ul.bxslider { list-style: none;}
.bx-viewport { -webkit-transform: translatez(0);}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {position: absolute; top: -80px; width: 100%;}
.bx-wrapper .bx-loading { min-height: 50px; background: url(../images/bx-loader.gif) center center no-repeat #ffffff; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 2000;}
.bx-wrapper .bx-pager { text-align:right; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px;}
.bx-wrapper .bx-pager.bx-default-pager a { background: #fff; text-indent: -9999px; display: block; width: 17px; height: 17px; margin: 0 3px; outline: 0; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; border:2px solid #0091cc;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus { background: #0091cc; border:2px solid #0091cc;}
.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline;}
.bx-wrapper .bx-pager-item { font-size: 0; line-height: 0;}
.bx-wrapper .bx-prev {display:none;}
.bx-wrapper .bx-next {display:none;}
.bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; outline: 0; width: 32px; height: 32px; text-indent: -9999px; z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled { display: none;}
.bx-wrapper .bx-controls-auto { text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; margin: 0 3px;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px;}
.bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666; background: rgba(80, 80, 80, 0.75); width: 100%;}
.bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px;}
.t-slide{width:100%; float:left;}
.t-slide img{margin-right:25px; float:left; vertical-align:text-bottom;}
.google-review{width:100%; float:left; margin-top:25px;}
.google-review-left{width:70%; float:left;}
.google-review-img{width:18%; float:left;}
.google-review-img img{border-radius:50%;}
.google-review-name{width:78%; float:right; font-weight:500; line-height:normal;}
.google-review-name span{font-weight:400; color:#7d7b7a;}
.google-review-right{width:29%; float:right; text-align:right; color:#f15a24; margin-top:10px;}
.google-review p{margin-top:10px;}
.google-review p a{color:#0091cc;}
.google-review p a:hover{color:#000;}
/*=== Middle Bottom End ===*/
/*=== Signup Form ===*/
.ctct-custom-form {min-width: 150px !important; background: #f0f2f2 !important;}
.ctct-custom-form p {font-family: 'Roboto', sans-serif !important; color: #454242 !important;}
/*=== Signup Form ===*/
/*=== Google Map ===*/
.google-maps-wrapper {margin-top: 2rem;}
.google-maps-wrapper iframe {pointer-events: none;}
/*=== Google Map ===*/
/*=== Sidebar ===*/
.right h3{width:auto; float:left; font-family: 'Roboto', sans-serif !important; font-size: 1.2rem !important; font-weight: 600; border-bottom: none;}
.right img {padding-top: 80px; width: 100%;}
/*=== Sidebar ===*/
/*=== Contact From ===*/
#contactform h3 { width: auto; /*float: left;*/ font-family: 'Roboto', sans-serif !important; font-size: 1.2rem !important; font-weight: 600; border-bottom: none; }
/*.right img {padding-top: 80px; width: 100%;}*/
/*=== Contact Form ===*/
/*=== Search ===*/
.search {margin-top: 1.5rem;}
button.warning.postfix {background-color: #2ba6cb; border-color: #2285a2; }
button.warning.postfix:hover {background-color:#2285a2;}
.tooltip-inner {display:none; width: 0;}
/*=== Search===*/
/*=== Blue Row ===*/
#blue-row{width:100%; float:left; background:#0091cc; padding:35px 0 35px; text-align:center;}
#blue-row a, #blue-row button { color:#fff; padding:20px 35px; font-family: 'robotocondensed-regular'; font-size:22px; font-style:italic; border:2px solid #fff; width:auto;}
#blue-row a:hover, #blue-row button:hover, #blue-row a:focus, #blue-row button:focus { background: inherit; color: #0091cc; }
#blue-row .hvr-sweep-to-bottom::before { background: #fff; }
#blue-row a br{display:none;}
/*=== /Blue Row ===*/
/*=== Footer ===*/
footer{width:100%; float:left; background:url(../images/footer-bg.jpg) repeat left top; padding:60px 0 60px; font-family: 'robotocondensed-regular';}
.footer-copyright {margin-top: 3rem;}
.footer-copyright p, .footer-privacy p, .footer-copyright a {color: #fff;}
.footer-logo{width:auto; display: inline-flex; float: left; }
.footer-logo p:first-of-type {margin: 0 auto;}
.footer-logo p {margin-top: 1rem;}
.footer-logo p a{color:#fff; margin-left:24px; padding-bottom:6px;}
.footer-logo p a:hover{ color:#00b9f2; border-bottom:2px solid #00b9f2; padding-bottom:4px;}
.footer-nav{width:auto; float:left; margin:15px 0 auto; display: inline-flex;}
.footer-nav a{ color:#fff; float:left; margin-left:2rem; padding-bottom:6px;}
.footer-nav a:hover{ color:#00b9f2; border-bottom:2px solid #00b9f2; padding-bottom:4px;}
.footer-privacy {margin-top: 3rem;}
.footer-privacy{width:auto; float:right; text-align:right; margin-top:3rem; color:#fff;}
.footer-privacy a{color:#fff;}
.footer-privacy a:hover{color:#00b9f2;}
.footer-social{width:auto; float:right; padding-top: .75rem;}
.footer-social a{width:38px; height:38px; float:left; margin-left:10px; border:2px solid #fff; text-align:center; color:#fff; line-height:35px; font-size:18px; }
.footer-social li:first-of-type a {margin-left: 0;}
.footer-social ul {display: inline-flex;}
.facebook:hover{border:2px solid #547bbc; color:#547bbc;}
.twitter:hover{border:2px solid #2ba8e0; color:#2ba8e0;}
.gplus:hover{border:2px solid #d3492d; color:#d3492d;}
.youtube:hover{border:2px solid #ec252a; color:#ec252a;}
.linkedin:hover{border:2px solid #0077b5; color: #0077b5;}
/*=== /Footer===*/
.tab-bar{display:none; background:none!important; }
.scrollup {text-decoration:none; width: 40px; height: 40px; background: rgba(0, 0, 0, 0.6); color:#fff; text-align:center; font-size:14px; line-height:37px; position: fixed; bottom: 50px; right: 20px; display: none;}
.scrollup:hover{background:#00b9f2; color:#fff;}
.scrollup:active, .scrollup:focus{color:#fff !important;}
#inner-banner{width:100%; float:left; background:url(../images/banner-bg.jpg) no-repeat left top; background-size:cover; position:relative; padding:10px 0 30px;}
#inner-banner h1{font-size:40px;}
.location{width:100%; float:left; font-size:18px; text-align:center; padding-bottom:20px;}
.header-pagi{width:290px; margin:0 auto;}
.header-prev{width:42px; height:42px; float:left; border:2px solid #0072a4; color:#0072a4; text-align:center; line-height:36px; font-weight:normal; font-size:20px;}
.header-prev:hover, .header-all:hover, .header-all:hover{ color:#fff;}
.header-all{width:174px; height:42px; margin:0 10px; float:left; text-align:center; border:2px solid #0072a4; color:#0072a4; line-height:40px; text-transform:uppercase; font-weight:400; }
.header-pagi .hvr-sweep-to-bottom:before {background:#0072a4;}
#middle{width:100%; float:left; padding:0px 0 50px;}
.porfolio-image{width:100%; float:left; margin-top:20px;}
.porfolio-image img{max-width:100%; display:block; margin:0 auto;}
.portfolio-bullet{width:100%; float:left; }
.portfolio-bullet li{width:100%; float:left; margin:5px 0 0;}
.mid-prev{width:42px; height:42px; float:left; border:2px solid #969696; color:#969696; background:none; text-align:center; line-height:36px; font-weight:normal; font-size:20px;}
.mid-prev:hover, .header-all:hover, .mid-all:hover{ color:#fff;}
.mid-all{width:174px; height:42px; margin:0 10px; float:left; text-align:center; background:none; border:2px solid #969696; color:#969696; line-height:40px; text-transform:uppercase; font-weight:400; }
.mid-pagi{width:290px; margin:0 auto;}
.mid-pagi .hvr-sweep-to-bottom:before {background:#969696;}
.item-page {padding-left: 10rem; padding-right: 10rem;}
/* === Mobile Menu ===*/
.pushy{position:fixed;width:270px;height:100%;top:0;z-index:9999;background:#333333;font-weight:700;-webkit-box-shadow:inset -10px 0 6px -9px rgba(0,0,0,0.7);box-shadow:inset -10px 0 6px -9px rgba(0,0,0,0.7);overflow:auto;-webkit-transform:translate3d(-270px,0,0);transform:translate3d(-270px,0,0); display:none;}
.pushy li > a{display:block;color:#fff;padding:12px 15px;border-bottom:1px solid rgba(0,0,0,0.2);text-decoration:none;font-size:18px; font-family: 'robotocondensed-regular';}
.pushy li > a:hover{background:#0086bb;color:#fff}
.pushy,.pushy-container{-webkit-transition:-webkit-transform .2s cubic-bezier(0.16,0.68,0.43,0.99);-o-transition:-o-transform .2s cubic-bezier(0.16,0.68,0.43,0.99);transition:transform .2s cubic-bezier(0.16,0.68,0.43,0.99);-webkit-backface-visibility:hidden;-webkit-perspective:1000}
.pushy-static{-webkit-transition:-webkit-transform 0;-o-transition:-o-transform 0;transition:transform 0}
.pushy-site-overlay{display:none}
.pushy-active .pushy{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.pushy-active .pushy-site-overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:rgba(0,0,0,0.7)}
.pushy-active .pushy-container{-webkit-transform:translate3d(270px,0,0);transform:translate3d(270px,0,0)}
.pushy > .pushy-main-submenu{position:absolute;top:0;bottom:0;left:0;right:0}
.pushy > .pushy-main-submenu li.pushy-open > .pushy-submenu{left:0}
.pushy > .pushy-main-submenu li.pushy-open > .pushy-close-submenu{display:block;position:absolute;top:0;bottom:0;right:0;width:10%;cursor:pointer}
.pushy-menu-btn{display:none}
.pushy > .pushy-main-submenu .pushy-submenu{position:absolute;z-index:2;top:0;bottom:0;left:-100%;width:90%;margin:0;-webkit-box-shadow:10px 0 30px -10px rgba(0,0,0,0.7);box-shadow:10px 0 30px -10px rgba(0,0,0,0.7);background:#554731;-webkit-transition:left .25s ease-in-out;-o-transition:left .25s ease-in-out;transition:left .25s ease-in-out}
.pushy > .pushy-main-submenu .pushy-submenu .pushy-submenu{background:lighter(#333332,5%)}
.pushy > .pushy-main-submenu .pushy-close-level{display:none}
.small-social a{width:auto; float:left; border-bottom:none !important; padding-left:15px !important; padding-right:0px !important;}
.small-social a:hover{background:none !important;}
/* === Mobile Menu End ===*/
/* Hannush customs */
.grecaptcha-badge { margin: 0 0 1rem; }
.label { padding: 0.25rem 0.5rem 0.25rem 1.5rem; }
.request-form label { color: #fff; font-family: inherit; font-size: inherit; font-style: italic; text-align: left; }
.request-form textarea { color: #333; font-style: normal; }
.request-form p.quote-lead { color: #fff; border: 0; font-size: 1rem; line-height: 1.4;
margin: 0.625rem 0; /* 10/16 */ text-align: left; }
::placeholder { color: #9f9f9f; font-style: italic; }
::-webkit-input-placeholder { color: #9f9f9f; font-style: italic; }
::-moz-placeholder { color: #9f9f9f; font-style: italic; }
:-ms-input-placeholder { color: #9f9f9f; font-style: italic; }
header:first-of-type { float: none; }
h2.gallery-heading { color: #222 !important; float: left; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 40px !important; padding: 50px 0 0 0 !important; text-align: center; width: 100%; }
.copyarea {margin: 0; max-width: 100%;}
.copyarea h1 { color: #454242 !important; display: none; }
.copyarea h1, .copyarea h2, .copyarea h3 { float: none; margin-bottom: .75rem; }
.copyarea h2 { width:100%; /*float:left;*/ /*font-family: 'robotocondensed-bold', sans-serif !important;*/ font-size:32px !important; color:#454242 !important; padding:20px 0 0 0 !important; line-height: 1.2; }
.copyarea h3 { width:100%; /*float:left;*/ /*font-family: 'robotocondensed-bold', sans-serif !important;*/ font-size:29px !important; color:#0086BB !important; /*padding:40px 0 0 0 !important;*/ margin-bottom: 5px; border-bottom: none; }
.copyarea p {line-height: 1.6; color: #444444;}
.copyarea .card-text h3 { line-height: 1.2; }
.copyarea .card-text h3 a { font-family: 'Yanone Kaffeesatz', sans-serif; line-height: 0px;}
#middle .page-header h2[itemprop="name"] { display: none; }
[itemprop="articleBody"] { padding-top: 30px; }
.alert-box { margin-top: 1rem; }
.alert-box * {color: inherit !important; }
.alert-box h4 { color: inherit; }
.well { background: #f7f7f7; padding: 0.3125rem 0; }
.request-module { display: none; }
.header-pagi a.disabled { border-color: #5d8aa3; color: #5d8aa3; }
.header-pagi a.disabled:active::before, .header-pagi a.disabled:focus::before, .header-pagi a.disabled:hover::before { background: #5d8aa3; }
.header-pagi a.disabled:active, .header-pagi a.disabled:focus, .header-pagi a.disabled:hover { color: #fff; }
.mid-pagi a.disabled { border-color: #c7c7c9; color: #c7c7c9; }
.mid-pagi a.disabled:active::before, .mid-pagi a.disabled:focus::before, .mid-pagi a.disabled:hover::before { background: #c7c7c9; }
.mid-pagi a.disabled:active, .mid-pagi a.disabled:focus, .mid-pagi a.disabled:hover { color: #fff; }
.copyarea ol, .copyarea ul { list-style: inherit; list-style-position: inside; margin: 1rem auto; width: 98%; }
.copyarea li { padding-bottom: 0.3125rem; padding-left: 0.9375rem; text-indent: -0.9375rem; }
.pagination li { padding-bottom: 0; padding-left: 0; text-indent: 0; }
label > input[type="checkbox"] { margin: 0.375rem 0 0.4375rem; vertical-align: middle; }
.button { background: inherit; border: 1px solid #0091cc; color: #0091cc; font-family: 'robotocondensed-regular'; font-weight: bold; text-transform: uppercase; }
.button:hover { background: #0091cc; color: #fff; }
.button.white { background-color: #0091cc; color: #fff; }
.button.white:hover { background-color: #fff; color: #0091cc; }
.portfolio-bullet, .portfolio-bullet li { float: none; }
a.photoblock { background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 14rem; width: 100%; }
.card-row .card-wrapper {
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px 10px 30px 10px;
}
.card-row .card-wrapper .card-image {
width: 100%;
height: 325px;
background-size: cover;
background-position: center top;
}
.card-row .card-wrapper .card-image a {
height: 325px;
width: 100%;
display: block;
}
.card-row .card-wrapper .card-category {
background-color: #101010;
position: relative;
z-index: 10;
margin-top: 0;
transform: translateY(-32px);
}
.card-row .card-wrapper .card-category a {
color: #fff;
}
.card-row .card-wrapper .card-category p {
padding: 5px 15px;
margin: 0;
font-family: "Roboto";
color: #fff;
}
.card-row .card-wrapper .card-text {
width: 90%;
background-color: #fff;
position: relative;
z-index: 5;
margin-top: -50px;
padding-bottom: 10px;
transition: box-shadow 1s;
}
.card-row .card-wrapper .card-text h3 {
padding: 35px 10px 10px 10px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-align: center;
}
.card-row .card-wrapper .card-text h3 a {
color: #084063;
}
.card-row .card-wrapper .card-text p {
padding: 0 25px;
font-family: "Roboto";
text-align: center;
}
.card-row .card-wrapper .card-text .card-bottom {
/*display: flex;
justify-content: space-between;*/
text-align: center;
padding: 0 0 10px;
}
.card-row .card-wrapper .card-text .card-bottom .author {
/*padding: 0 0 0 20px;*/
margin: 0;
}
.card-row .card-wrapper .card-text .card-bottom .date {
/*padding: 0 20px 0 0;*/
margin: 0 0 10px;
color: #808080;
}
.author-img { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 40px; display: block; font-size: 0; height: 80px; margin: 0 auto; width: 80px; }
.author img { border-radius: 40px; display: block; }
.blog-header { background-position: center; background-size: cover; display: flex; flex-direction: column; height: 700px; justify-content: flex-end; position: relative; width: 100%; }
.blog-header .post-info { align-items: center; display: flex; flex-direction: column; padding: 0 0 50px 0; }
.blog-header .post-info h1 { color: #fff; font-family: 'Roboto Condensed'; font-size: 60px; line-height: 1.1; position: relative; text-align: center; z-index: 5; }
.blog-header .post-info a, .blog-header .post-info p { color: #fff; position: relative; z-index: 5; }
.blog-header .post-info a:hover { color: #00b9f2; }
.blog-header .post-category { background-color: #101010; margin-top: 0; position: relative; z-index: 10; }
.blog-header .post-category a { color: #fff; }
.blog-header .post-category p { color: #fff; font-family: 'Roboto'; margin: 0; padding: 5px 15px; }
.blog-header:before { background: linear-gradient(transparent, #000); content: ''; display: block; height: 700px; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; }
@media only screen and (max-width: 1024px) {
.blog-header, .blog-header:before { height: 450px; }
.blog-header .post-info h1 { font-size: 45px; }
}
.port-info a, .port-info p { margin: 0; }
.port-info a { color: #2199e8; }
.port-info a:focus, .port-info a:hover { color: #1585cf; }
.port-row { margin-bottom: 20px; margin-top: 20px; }
.port-row .columns { margin-bottom: 25px; }
.port-window { background-size: 20%; height: 350px; overflow: hidden; transition: box-shadow .5s; width: 100%; }
.port-window:hover { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); }
.port-imac { padding: 15px;}
.port-info { background-color: rgba(0, 0, 0, 0.8); height: 350px; text-align: center; width: 100%; }
.port-info h2 { color: white; font-size:24px !important; margin: 0; padding-top: 30px !important; }
#middle .port-info h2 { padding-top: 2vw !important; font-size:2.7vw !important;}
.port-info a h2, .port-info a h2:focus, .port-info a h2:hover { color: inherit !important; }
@media only screen and (max-width: 1200px) {
.port-info h2 { font-size: 2vw !important; padding-top: 2.45vw !important; }
#middle .port-info h2 { padding-top: 1vw !important; }
}
@media only screen and (max-width: 1023px) {
.port-row .columns:nth-child(3), .port-row .columns:nth-child(4) { margin-top: 20px; }
.port-info h2 { font-size: 4vw !important; padding-top: 5vw !important; }
.port-info p { font-size: 3vw !important; }
#middle .port-info h2 { font-size: 4.2vw !important; padding-top: 1.8vw !important; }
}
/* End Hannush customs */
@media (min-width:1024px) {
.overlay { position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;
transition: all 0.5s; margin:5px; text-align:center; float:left; width:100%;}
#effect-2 .img.hover .overlay { height: 100%;}
.overlay { position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); width:100%; height:100%;}
#effect-2 .overlay { top: 0; left: 0; right: 0; width: 100%; height: 0; float:left; text-align:center; margin:5px 0 0 5px;}
.footer-logo p a{color:#fff; margin-left:24px; padding-bottom:6px;}
}
@media (max-width:1200px) {
.row {margin: .5rem; max-width: 95%}
.footer-nav a {margin-left: 1.5rem}
.menu{margin-left:10px;}
.menu ul li{margin:0 7px;}
.header-call-to-action{width:auto; float:left; margin-left:15px; margin-right:15px;}
.searchbox{margin-right:15px;}
.top-bar .title-area{padding:0px;}
.top-bar-section ul li{margin:0 8px;}
.header-contact{margin-right:15px; margin-top: 3px;}
/*.header-contact a {font-size: 12px;}*/
.header-right {margin-right: -30px;}
.searchbox-input{width:200px !important;}
.my-wrp{margin:0 15px;}
.small-search, .contacts, .cta{display:none;}
/*.banner-image{width:40%;}
.banner-text{width:55%; float:right; margin-top:20px;}
.banner-image img{margin-left:15px;}*/
}
@media (max-width:1023px) {
.item-page {padding: 0;}
.menu .cl-effect-17, .header-contact {display:none;}
.testimonial{width:100%; clear:both;}
.footer-nav {margin-left: 0;}
.footer-nav a{ margin:10px 15px 0 0;}
.footer-logo {display:none;}
.img1{width:50%; float:left; max-height:320px; overflow:hidden; position:relative; padding:5px; text-align:center;}
.img1 img, .img2 img{ width:auto; height:auto; max-width:inherit; float:left; vertical-align:top;}
.img2{width:50%; float:left; overflow:hidden; max-height:320px; position:relative; padding:5px; text-align:center;}
/*.banner-image{width:45%;}*/
.banner-text{/*width:55%; float:right; */margin:0;}
.header-contact{margin-right:80px;}
.right-small{border:none;}
.tab-icon1, .tab-icon2, .tab-icon3, .tab-icon4, .tab-icon5, .tab-icon6, .tab-icon1.flex-active, .tab-icon1:hover, .tab-icon2.flex-active, .tab-icon2:hover, .tab-icon3.flex-active, .tab-icon3:hover, .tab-icon4.flex-active, .tab-icon4:hover, .tab-icon5.flex-active, .tab-icon5:hover, .tab-icon6.flex-active, .tab-icon6:hover{background-size:50%; padding-top:85px;}
.overlay, #effect-2 .overlay{overflow:visible;}
.pushy-menu-btn{display:inherit;color:#fff;font-size:28px;float:right;margin:7px 20px;right:0;cursor:pointer;box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5); border-radius:2px; border:1px solid #05668e; background: #0091cc; /* Old browsers */ background: -moz-linear-gradient(top, #0091cc 0%, #00709e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0091cc), color-stop(100%,#00709e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #0091cc 0%,#00709e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #0091cc 0%,#00709e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #0091cc 0%,#00709e 100%); /* IE10+ */ background: linear-gradient(to bottom, #0091cc 0%,#00709e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0091cc', endColorstr='#00709e',GradientType=0 ); /* IE6-9 */padding:2px 12px;position:absolute; z-index:100;}
.pushy{display:inherit;}
.searchbox {margin-right: 80px;}
.searchbox input { padding: 4px 5px; }
}
@media (max-width:767px) {
#tabs{padding-bottom:0;}
.slide-item p br{display:none;}
.footer-copyright, .footer-privacy, .footer-social {width:100%; text-align: center; color:#fff; margin-top:1rem;}
.footer-nav {width: 100%;}
.footer-nav li {margin: 0 auto;}
.footer-nav a {margin: 0 auto;}
footer{padding:30px 0 30px;}
/*.searchbox-wrp, .hvr-sweep-to-bottom {display:none;}
*/.sm-hide{display:none;}
.small-search{width: calc(100% - 40px); float:left; position:relative !important; margin:15px 15px 0;}
.small-search-btn{position:absolute ; right:-20px; top:-10px; border:0px; background:none; color:#000;}
.small-search-btn:hover, .small-search-btn:active, .small-search-btn:focus{background:none !important;}
.tab-icon1, .tab-icon2, .tab-icon3, .tab-icon4, .tab-icon5, .tab-icon6, .tab-icon1.flex-active, .tab-icon1:hover, .tab-icon2.flex-active, .tab-icon2:hover, .tab-icon3.flex-active, .tab-icon3:hover, .tab-icon4.flex-active, .tab-icon4:hover, .tab-icon5.flex-active, .tab-icon5:hover, .tab-icon6.flex-active, .tab-icon6:hover{background-size:auto 50px; padding-top:55px; padding-bottom:15px;}
.icon-nav .icon-nav-item p{font-size:11px; white-space: normal;}
.icon-nav{padding-bottom:0px;}
.header-call-to-action{width:100%; margin-right:0px !important; transform: translateX(-80px);}
.header-call-to-action a{width:100%;}
.small-search, .contacts, .cta{display:inherit;}
/*.searchbox{display:none;}*/
.contacts{color:#fff !important; padding-left:15px; clear:both; width: calc(100% - 15px);}
.contacts a{color:#fff; float:none;}
.banner-image{width:100%; display:none;}
.banner-image img{max-width:100%;}
.banner-text{background:url(../images/inner-banner.png) no-repeat center top; background-size:cover; width:100%; padding:95px 15px 95px; color:#1a1a1a;}
.title-margin{margin-top:10px;}
h1{padding-top:20px !important;}
.portfolio-right h2{padding:20px 0 0; width:100%; text-align:center;}
.portfolio-right {text-align:center;}
.portfolio-right .sublink{float:none; margin:0 auto;}
header{padding:10px 0;}
}
@media (max-width:639px) {
.img1, .img2{width:100%; float:left; max-height:none; overflow:hidden; position:relative; padding:10px 0 0; text-align:center;}
.img1 img, .img2 img{ width:100%; height:auto; max-width:inherit; float:left; vertical-align:top;}
#effect-2 .overlay img{width:auto; margin-top:25px !important;}
.overlay {margin:10px 0 0px;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{top:-40px;}
.t-slide{margin-top:20px;}
#blue-row a{padding:10px 35px; margin:0 15px;}
#blue-row a br{display:inherit;}
.banner-image{width:100%; margin-bottom:0px;}
.icon-nav{padding-top:0px;}
.icon-nav .icon-nav-item {width:33%; margin-bottom:0px; margin-top:25px }
.header-call-to-action{float:right; margin-right:80px;}
.banner-title{font-size:30px;}
.banner-sublink a{padding:3px 10px; }
.semi-clear{clear:both;}
#effect-2 .overlay { margin:10px 0 5px;}
.right img {padding-top: 1rem;}
}
@media (max-width:593px) {
.searchbox{display:none;}
}
@media (max-width:535px) {
.header-call-to-action {
display: none;
}
}
@media (max-width:480px) {
.banner-text{padding:55px 15px 55px;}
.footer-nav li:first-of-type {display: none;}
}
@media (max-width:400px) {
.banner-text{padding:0px 15px 0px;}
}
.animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.hinge{-webkit-animation-duration:.5s;animation-duration:.5s}
@-webkit-keyframes bounce {
0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}
}
@keyframes bounce {
0%,20%,50%,80%,100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}
}
.bounce{-webkit-animation-name:bounce;animation-name:bounce}
@-webkit-keyframes flash {
0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
@keyframes flash {
0%,50%,100%{opacity:1}
25%,75%{opacity:0}
}
.flash{-webkit-animation-name:flash;animation-name:flash}
@-webkit-keyframes pulse {
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes pulse {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes shake {
0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}
}
@keyframes shake {
0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}
}
.shake{-webkit-animation-name:shake;animation-name:shake}
@-webkit-keyframes swing {
20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes swing {
20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}
}
.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
@-webkit-keyframes tada {
0%{-webkit-transform:scale(1);transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
}
@keyframes tada {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}
@-webkit-keyframes wobble {
0%{-webkit-transform:translateX(0%);transform:translateX(0%)}
15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}
30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}
45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}
60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}
75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}
100%{-webkit-transform:translateX(0%);transform:translateX(0%)}
}
@keyframes wobble {
0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}
15%{-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}
30%{-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}
45%{-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}
60%{-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}
75%{-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}
100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}
}
.wobble{-webkit-animation-name:wobble;animation-name:wobble}
@-webkit-keyframes bounceIn {
0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}
70%{-webkit-transform:scale(.9);transform:scale(.9)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bounceIn {
0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}
50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}
70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}
100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes bounceInDown {
0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes bounceInDown {
0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft {
0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes bounceInLeft {
0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
@-webkit-keyframes bounceInRight {
0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px);transform:translateX(10px)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes bounceInRight {
0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
@-webkit-keyframes bounceInUp {
0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px);transform:translateY(10px)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes bounceInUp {
0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}
@-webkit-keyframes bounceOut {
0%{-webkit-transform:scale(1);transform:scale(1)}
25%{-webkit-transform:scale(.95);transform:scale(.95)}
50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}
}
@keyframes bounceOut {
0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}
50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}
100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}
}
.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}
@-webkit-keyframes bounceOutDown {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
}
@keyframes bounceOutDown {
0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
}
.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}
@-webkit-keyframes bounceOutLeft {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}
100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
}
@keyframes bounceOutLeft {
0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}
@-webkit-keyframes bounceOutRight {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}
100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
}
@keyframes bounceOutRight {
0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
}
.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}
@-webkit-keyframes bounceOutUp {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
}
@keyframes bounceOutUp {
0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
}
.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}
@-webkit-keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInDown {
0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDown {
0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInDownBig {
0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDownBig {
0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeft {
0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes fadeInLeft {
0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeftBig {
0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes fadeInLeftBig {
0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRight {
0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes fadeInRight {
0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInRightBig {
0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes fadeInRightBig {
0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes fadeInUp {
0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUp {
0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUpBig {
0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUpBig {
0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}
@-webkit-keyframes fadeOutDown {
0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}
}
@keyframes fadeOutDown {
0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}
}
.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}
@-webkit-keyframes fadeOutDownBig {
0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
}
@keyframes fadeOutDownBig {
0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
}
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}
@-webkit-keyframes fadeOutLeft {
0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}
}
@keyframes fadeOutLeft {
0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}
@-webkit-keyframes fadeOutLeftBig {
0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
}
@keyframes fadeOutLeftBig {
0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
}
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}
@-webkit-keyframes fadeOutRight {
0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}
}
@keyframes fadeOutRight {
0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
@-webkit-keyframes fadeOutRightBig {
0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
}
@keyframes fadeOutRightBig {
0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
}
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}
@-webkit-keyframes fadeOutUp {
0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}
}
@keyframes fadeOutUp {
0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}
}
.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}
@-webkit-keyframes fadeOutUpBig {
0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
}
@keyframes fadeOutUpBig {
0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
}
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}
@-webkit-keyframes flip {
0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip {
0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}
@-webkit-keyframes flipInX {
0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}
70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
}
@keyframes flipInX {
0%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}
70%{-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}
100%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
}
.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}
@-webkit-keyframes flipInY {
0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}
}
@keyframes flipInY {
0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}
70%{-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}
100%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}
}
.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}
@-webkit-keyframes flipOutX {
0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
}
@keyframes flipOutX {
0%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}
}
.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}
@-webkit-keyframes flipOutY {
0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
}
@keyframes flipOutY {
0%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}
100%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}
}
.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}
@-webkit-keyframes lightSpeedIn {
0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}
80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}
100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
}
@keyframes lightSpeedIn {
0%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
60%{-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}
80%{-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}
100%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
@-webkit-keyframes lightSpeedOut {
0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
}
@keyframes lightSpeedOut {
0%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}
100%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}
}
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
@-webkit-keyframes rotateIn {
0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}
100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
}
@keyframes rotateIn {
0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}
100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}
@-webkit-keyframes rotateInDownLeft {
0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
}
@keyframes rotateInDownLeft {
0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}
@-webkit-keyframes rotateInDownRight {
0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
}
@keyframes rotateInDownRight {
0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}
@-webkit-keyframes rotateInUpLeft {
0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
}
@keyframes rotateInUpLeft {
0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
@-webkit-keyframes rotateInUpRight {
0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
}
@keyframes rotateInUpRight {
0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
@-webkit-keyframes rotateOut {
0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}
}
@keyframes rotateOut {
0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0}
}
.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}
@-webkit-keyframes rotateOutDownLeft {
0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
}
@keyframes rotateOutDownLeft {
0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
}
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}
@-webkit-keyframes rotateOutDownRight {
0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
}
@keyframes rotateOutDownRight {
0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
}
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}
@-webkit-keyframes rotateOutUpLeft {
0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
}
@keyframes rotateOutUpLeft {
0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}
}
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}
@-webkit-keyframes rotateOutUpRight {
0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
}
@keyframes rotateOutUpRight {
0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}
100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}
}
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}
@-webkit-keyframes slideInDown {
0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInDown {
0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}
.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}
@-webkit-keyframes slideInLeft {
0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInLeft {
0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}
@-webkit-keyframes slideInRight {
0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInRight {
0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
}
.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}
@-webkit-keyframes slideOutLeft {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}
}
@keyframes slideOutLeft {
0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}
}
.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}
@-webkit-keyframes slideOutRight {
0%{-webkit-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}
}
@keyframes slideOutRight {
0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}
}
.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}
@-webkit-keyframes slideOutUp {
0%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
}
@keyframes slideOutUp {
0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
}
.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
@-webkit-keyframes hinge {
0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}
}
@keyframes hinge {
0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
80%{-webkit-transform:rotate(60deg) translateY(0);-ms-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}
100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}
}
.hinge{-webkit-animation-name:hinge;animation-name:hinge}
@-webkit-keyframes rollIn {
0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}
100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}
}
@keyframes rollIn {
0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}
100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}
}
.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}
@-webkit-keyframes rollOut {
0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}
100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}
}
@keyframes rollOut {
0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}
100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);-ms-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}
}
.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}