body{
padding: 0;
margin: 0;
}
body, html {
overflow-x: hidden !important;
}
/Corrigir escrollamento no Mobile/
@media (max-width: 786px){
body, html,  {
overflow-x: hidden!important;
}
}
#banner-home {
background-image: url(https://ibramar.org/tocantins/wp-content/themes/ibramar/images/banner_principal.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
margin-top: 10px;
margin-bottom: 40px;
min-height: 400px;
width: 100vw;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}
@media (min-width: 768px){ 
#header-menu{
background-image:url(https://ibramar.org/tocantins/wp-content/themes/ibramar/images/header_logos.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: 82%;
margin: 0px;
padding: 0px;
}
#header-menu{
background-color: #ffffff;
margin: 0px;
padding: 0px;
}
}
#banner-title-1 {
background-color: #FF6625;
font-family: sans-serif;
opacity: 0.8;
padding: 10px;
padding-right: 50px;
padding-left: 50px;  text-align: left;
text-transform: uppercase;
color:#ffffff;
font-size: 30px;
position: relative;
top: 0px;
}
#banner-title-2 {
background-color: #007474;
font-family: sans-serif;
opacity: 0.8;
padding: 10px;
padding-right: 50px;
padding-left: 50px;  text-align: left;
text-transform: uppercase;
color:#ffffff;
font-size: 30px;
position: relative;
top: 22px;
}
@media (min-width: 768px){
#spam-banner{
padding-left: 0px;
padding-right: 0px;
}
#spam-banner {
padding-right: 100px;
padding-left: 100px;
}
}
* {
font-family: 'Lato' sans-serif;
}
a {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
.link {
color:#333 !important;
}
.comments a {
color:#007474 !important;
}
.right-center {
text-align:right;
}
.left-center {
text-align:left;
}
.green {
color:#007474;
} .header-ribbon {
background: #007474;
height:20px;
width: 100%;
}
.flag-us {
right:5px;
position: absolute;
z-index: 10;
}
.flag-br {
right:55px;
position: absolute;
z-index: 10;
}
.nav-ibramar { 
background: #FFFFFF !important;
text-transform: uppercase;
font-size:1.2em;
}
.nav-ibramar li a { 
color:#007474 !important;
margin:10px 15px;
padding: 0;
}
.nav-ibramar li a:hover,  .nav-ibramar li a:focus { 
background:#FFFFFF;
border-bottom:2px solid #00ac9e;
padding:0;
padding-bottom: 8px !important;
}
.nav-active {
border-bottom:2px solid #00ac9e;
padding:0;
padding-bottom: 8px !important;
}
.navbar {
margin-top:75px;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background:none !important;
}  .effect a {
text-decoration: none !important;
color: #fff;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
margin-right: 20px;
font-size: 25px;
overflow: hidden;
position: relative;
}
.effect a i {
position: relative;
z-index: 3;
}
.effect a.fb {
background-color: #3b5998;
}
.effect a.tw {
background-color: #00aced;
}
.effect a.g-plus {
background-color: #dd4b39;
}
.effect a.dribbble {
background-color: #ea4c89;
}
.effect a.pinterest {
background-color: #cb2027;
}
.effect a.insta {
background-color: #bc2a8d;
}
.effect a.in {
background-color: #007bb6;
}
.effect a.vimeo {
background-color: #1ab7ea;
} .effect.egeon a {
transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
}
.effect.egeon a i {
transition: transform 0.2s linear 0s;
}
.effect.egeon a:hover {
transform: rotate(-90deg);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.effect.egeon a:hover i {
transform: rotate(90deg);
}
.buttons{
display: flex;
} @media (min-width: 768px){ 
#footer-patrocinio{
background-color: #00afa0;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
min-height: 100px;
max-height: 100px;
display: flex;
padding-right: 0px;
padding-left: 0px;
padding-top: 10px;
}
#footer-patrocinio{
background-image: url(https://ibramar.org/tocantins/wp-content/themes/ibramar/images/fundo_rodape.png);
background-color: #00afa0;
background-position: right;
background-repeat: no-repeat;
background-size: contain;
min-height: 100px;
max-height: 100px;
display: flex;
padding-right: 0px;
padding-left: 0px;
padding-top: 10px;
}
}
.footer {
background: #00AD9F url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/rodape.png); min-height:400px;
background-repeat: no-repeat;
background-position: top center;
background-size: top;
color:#FFFFFF;
}
.footer-content {
padding-top: 230px ;
}
.footer-title {
text-transform: uppercase;
color:#e5c72c;
font-size:1.2em;
padding:0
}
.ul-footer {
list-style: none;
padding:0;
margin:0;
}
.ul-footer li a {
color:#ffffff !important;
}
.hack-footer {
margin-top:26px;
padding:0;
} .page-bg {
background: #007474;
background-repeat: no-repeat;
background-position: center center;
border-style: solid; border-width: 23px 0px; -moz-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; -webkit-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; -o-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 fill repeat;
height: 80px;
}
.highlights {
background: #0e6c85 url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/highlight_bg.png);
background-repeat: no-repeat;
background-position: center center;
border-style: solid; border-width: 23px 0px; -moz-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; -webkit-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; -o-border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 repeat; border-image: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/border.png) 21 21 21 20 fill repeat;
height: 306px;
}
.page-title {
color:white;
font-size:1.6em;
text-transform: uppercase;
} .news, .social, .projects, .events, .multimedia {
margin-bottom:20px;
}
.news-box, .project-box, .events-box, .multimedia-box, .social-box{
margin:10px 0;
border:1px solid #c6c9cc;
min-height: 100px;
}
.section-title {
color:#007474;
overflow: hidden !important;
font-size:1.5em;
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/hr.png) no-repeat;
background-origin: content-box, padding-box;
background-position:center right;
width: 100%;
}
.title {
background:white;
padding-right: 15px;
}
.separator {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/hr_box.png);
background-repeat: no-repeat;
background-position: center center;
height: 12px;
} .news-image {
border-bottom:1px solid #c6c9cc;
height: 203px;
overflow:hidden;
}
.news-title {
padding:15px;
border-bottom:1px solid #c6c9cc;
}
.news-title-tag {
color:#00ac9e;
text-transform: uppercase;
font-size: 0.9em;
}
.news-title-tag a {
color:#00ac9e !important;
}
.news-title-tag:hover {
color:#00ac9e !important;
}
.news-info {
padding:12px;
}
.image-box {
margin:10px 0;
}
.border-right {
border-right: 1px solid #c6c9cc;
}
.learn-more-box {
padding:10px;
}
.title-box {
font-size: 1.1em;
border-bottom:1px solid #c6c9cc;
padding-bottom: 10px;
} .social-title {
margin:10px;
font-size: 1.1em;
color:#007474;
}
.social-title:before {
content: ".:";
}
.social-content {
margin:10px;
}
.facebook-box {
width: 100%;
height: 260px;
padding: 20px;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin:10px 0px 10px 0px; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 768px) {
.hack-footer {margin-top:0px !important;padding:0;}
} .img-responsive {
width: 100% !important;
} .missao {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/missao.png);
height:58px;
background-repeat: no-repeat;
background-position: center center;
}
.missao-txt {
font-size:1.2em; text-align:justify; padding:20px;
}
.balanco {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/balanco.png);
height:58px;
background-repeat: no-repeat;
background-position: center center;
}
.documentos {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/documentos.png);
height:58px;
background-repeat: no-repeat;
background-position: center center;
}
.colaboradores {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/colaboradores.png);
height:58px;
background-repeat: no-repeat;
background-position: center center;
}
.ul-ibramar {
list-style: none;
}
.objetivo {
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/objetivo.png);
height:58px;
background-repeat: no-repeat;
background-position: center center;
}
.ul-objetivo {
list-style:none; margin:0; padding:20px;
}
.post-data {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #FFFFFF;
border:1px solid #ededed;
}
.post-mes {
width: 100%;
text-align: center;
font-size: 16px;
color:#FFFFFF;
height:28px;
padding-top:4px;
background: #DE5F51;
text-transform: uppercase;
}
.post-dia {
width: 100%;
text-align: center;
font-size: 40px;
color:#333;
}
.more-link {
color:#fff;background-color:#f0ad4e;border-color:#eea236;
display:block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;
width:190px;
margin-top:30px;
float:right;
}
.more-link:hover {
color:#fff;background-color:#ec971f;border-color:#d58512;
}
.post::after {
content: "\00a0";
border-bottom:1px solid #ededed;
display: block;
width: 100%;
margin-bottom:30px;
}
#comment {
width: 100%;
}
#submit {
color:#fff;background-color:#f0ad4e;border-color:#eea236;
display:block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;
}
.tagcloud a {
color:#007474 !important;
font-size:12px !important;
display:block;
text-transform: uppercase;
}
.tagcloud a::before {
content:"\00bb";
padding-left: 30px;
font-size:16px;
padding-right: 5px;
}
.archive-list ul {
list-style: none;
}
.archive-list ul li a {
text-transform: uppercase;
color:#007474 !important;
font-size:12px;
}
.archive-list ul li a::before {
content:"\00bb";
padding-left: 30px;
font-size:16px;
padding-right: 5px;
}
.page-link a {
color:#fff;background-color:#f0ad4e;border-color:#eea236;
display:block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;
}
.page-link a:hover {
color:#fff;background-color:#ec971f;border-color:#d58512;
}
.contact-title {
text-transform: uppercase;
color:#00ac9e;
font-size:1.2em;
} @media screen and (max-width: 992px) { .news-box {
min-height:250px;
}
.news-image {
min-height:120px;
}
.title-box {
font-size: 1.2em;
}
.social-box {overflow:hidden;}
}
.nav-ibramar li a {
margin:10px 10px;
}
@media screen and (max-width: 768px) { .logo {
height:50%;
width: 50%;
}
.missao-txt {
padding:0px;
}
.ul-objetivo{ padding:0px;
}
.social-box {overflow:auto;}
.news-box {
min-height:250px;
}
.news-image {
min-height:120px;
}
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;   
}
.side-collapse {
top:0;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:visible;
transition:width .4s;
background:#007474;
}
.side-collapse.in {
width:0;
overflow:hidden;
}
.navbar {
margin-bottom: 0;
min-height: 0;
margin-top:0 !important;
}
.nav-ibramar {
float:left !important;
background: #007474 !important;
}
.nav-ibramar li { 
border-bottom:1px solid white;
}
.nav-ibramar li a { 
color:#FFFFFF !important;
margin:0;
padding: 10px 15px;
width: 100%;
}
.nav-ibramar li a:hover { 
background: #007474 !important;
border:0;
padding: 10px 15px; 
}
.navbar-nav {
margin:0;
}
.facebook-box {
width:100%;
margin:10px 5px;
}
.footer {
}
}
.img-circle {
border:1px solid #c6c9cc;
}
.navbar-toggle {
z-index:9999;
background:#007474;
position: absolute !important;
top:0;
left:10px;
}
.icon-bar {
background: #00ac9e;
}
.navbar {
margin-top:75px;
}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
background:none !important;
}
.dropdown-menu li a:hover {
border:0 !important;
}
.partner-box {
margin:20px 0;
border:1px solid #c6c9cc;
}
.partner-info {
border-top:1px solid #c6c9cc;
padding:12px;
}
.img-events {
width: 150px; 
height: 150px;  
overflow: hidden;
}
.wp-post-image {
min-height: 100px !important;
}
.partner-box img {
width: 200px !important;
height: 200px !important;
}
.image-box > a > img {
width: 150px;
height: 150px;
}
.wp-block-archives-list li a, .wp-block-categories-list li a {
text-transform: uppercase;
color: #007474 !important;
font-size: 12px;
}
.wp-block-archives-list, .wp-block-categories-list {
list-style: none;
}
.wp-block-archives-list li a:before, .wp-block-categories-list li a:before {
content: "\00bb";
padding-left: 30px;
font-size: 16px;
padding-right: 5px;
}.buttonArea{
float: left;
left: 50%;
position: relative;            
top: 100%;
margin-top: -32px;	
}                     
.buttonCon{  
float: left;
left: -50%;
position: relative;        
}
.buttonCon .theButton {
display: block;
color: #B22222;
width: 20px;
height: 22px;
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/slideshow/circlebutton.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}
.buttonArea a.active {
background-position: 0 -22px;
}             
.arrowButton{    
cursor: pointer;  
}            
.arrowButton .prevArrow{
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/slideshow/prev.png) no-repeat; 
width: 40px;
height: 80px;      
position: absolute;
top: 80px;	 
left: 12px;        
} 
.arrowButton .nextArrow{                 
background: url(//ibramar.org/tocantins/wp-content/themes/ibramar/images/slideshow/next.png) no-repeat;
width: 40px;
height: 80px;
position: absolute;
top: 80px;
right: 12px;	          
}   
.animate0{
-webkit-animation-duration: .6s;
-webkit-animation-delay: 0s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: 0s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: 0s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: 0s;
animation-timing-function: ease;
animation-fill-mode: both;	          
}         
.animate1{
-webkit-animation-duration: .6s;
-webkit-animation-delay: .2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: .2s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: .2s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: .2s;
animation-timing-function: ease;
animation-fill-mode: both;	          
} 
.animate2{
-webkit-animation-duration: .6s;
-webkit-animation-delay: .4s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: .4s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: .4s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: .4s;
animation-timing-function: ease;
animation-fill-mode: both;	          
} 
.animate3{
-webkit-animation-duration: .6s;
-webkit-animation-delay: .6s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: .6s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;	          
}   
.animate4{
-webkit-animation-duration: .6s;
-webkit-animation-delay: .8s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: .8s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: .8s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: .8s;
animation-timing-function: ease;
animation-fill-mode: both;	          
}  
.animate5{
-webkit-animation-duration: .6s;
-webkit-animation-delay: 1s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-duration: .6s;
-moz-animation-delay: 1s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
-ms-animation-duration: .6s;
-ms-animation-delay: 1s;
-ms-animation-timing-function: ease;
-ms-animation-fill-mode: both;
animation-duration: .6s;
animation-delay: 1s;
animation-timing-function: ease;
animation-fill-mode: both;	          
}*{
margin: 0;
padding: 0;
}
body{
padding:0;
margin:0; 
background: #FFFFFF;
} 
#banner{   
position: absolute;   
}     
.oneByOne1{
margin: 0;
width: 100%;
height: 270px;   
position: relative;
overflow: hidden;
}   
#banner .oneByOne_item{
position: absolute;
width: 1170px;
height: 270px;  
overflow: hidden;  
}         
#banner .oneByOne_item span{
font-family: "Lucida Grande", "Lucida Sans Unicode", helvetica, verdana, arial, sans-serif;
}                                                                                              
#banner .oneByOne_item a{
text-decoration: none;
color: #B22222;
}
#banner .oneByOne_item span.slide2Txt1{ 
position: relative;
float: left;
margin: 30px 12px 0 60px;
color: #007474;	
font-size: 24px;  
background: #FFFFFF;
padding: 8px;             
}
#banner .oneByOne_item span.slide2Txt2{ 
position: relative;
clear: left;
float: left;
width:400px;
margin: 6px 12px 0 60px;
color: #666666;	
font-size: 14px;  
background: #FFFFFF;
padding: 8px;             
}   
#banner .oneByOne_item span.slide2Txt3{ 
position: relative;
clear: left;
float: left;
margin: 6px 12px 0 60px;
color: #FFFFFF;
text-transform: uppercase;
font-size: 12px;  
background: #e5c72c;
padding: 8px;             
}     
span.slide2Txt3 a{
color:#FFF !important;
}
#banner img.wp1_1{
position: absolute;
top: 255px;
left: 512px;
}
#banner img.wp1_2{
position: absolute;
top: 190px;
left: 360px;
}              
#banner img.wp1_3{
position: absolute;
top: 64px;
left: 80px;
}   
#banner .oneByOne_item span.txt1{
clear: left;
position: relative;
float: left;
margin: 120px 12px 0 540px;    
background: #B22222;     
padding: 8px;
color: #FFFFFF;
font-size: 40px;
} 
#banner .oneByOne_item  span.txt1 a{
color: #FFFFFF;
}         
#banner .oneByOne_item span.txt2{
clear: left;
position: relative;
float: left;
margin: 12px 12px 0 540px;
color: #FFFFFF;  
background: #A0522D;
padding: 8px;
font-size: 22px;
}                   
#banner img.wp1{
position: absolute;
top: 192px;
left: 500px;
}
#banner img.wp2{
position: absolute;
top: 128px;
left: 570px;
}              
#banner img.wp3{
position: absolute;
left: 698px;
}   
#banner .oneByOne_item span.wp1{
clear: left;
position: relative;
float: left;
margin: 60px 12px 0 60px;    
background: #20B2AA;     
padding: 8px;
color: #FFFFFF;
font-size: 40px;
} 
#banner .oneByOne_item span.wp2{
clear: left;
position: relative;
float: left;
margin: 12px 12px 0 60px; 
color: #FFFFFF;  
background: #5F9EA0;
padding: 8px;
font-size: 16px;
}                  
#banner .oneByOne_item img.bigImage{ 
position: absolute;
top: 0; 
left: 0;
}
#banner .oneByOne_item span.slide5Txt1{ 
position: relative;
float: left;
margin: 150px 12px 0 600px;
color: #9ACD32;	
font-size: 24px;  
background: #FFFFFF;
padding: 8px;             
}
#banner .oneByOne_item span.slide5Txt2{ 
position: relative;
clear: left;
float: left;
margin: 12px 12px 0 600px;
color: #666666;	
font-size: 12px;  
background: #FFFFFF;
padding: 8px;             
}.animated {
-webkit-animation: 1s ease;
-moz-animation: 1s ease;
-ms-animation: 1s ease;
animation: 1s ease;
}
.animated.hinge {
-webkit-animation: 2s ease;
-moz-animation: 2s ease;
-ms-animation: 2s ease;
animation: 2s ease;
}
@-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;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}	
25%, 75% {opacity: 0;}
}
.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-ms-animation-name: flash;
animation-name: flash;
}
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-ms-keyframes shake {
0%, 100% {-ms-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-ms-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
@-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
40% {-ms-transform: translateY(-30px);}
60% {-ms-transform: translateY(-15px);}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-ms-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes tada {
0% {-webkit-transform: scale(1);}	
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
100% {-webkit-transform: scale(1) rotate(0);}
}
@-moz-keyframes tada {
0% {-moz-transform: scale(1);}	
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
100% {-moz-transform: scale(1) rotate(0);}
}
@-ms-keyframes tada {
0% {-ms-transform: scale(1);}	
10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);}
100% {-ms-transform: scale(1) rotate(0);}
}
@keyframes tada {
0% {transform: scale(1);}	
10%, 20% {transform: scale(0.9) rotate(-3deg);}
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
100% {transform: scale(1) rotate(0);}
}
.tada {
-webkit-animation-name: tada;
-moz-animation-name: tada;
-ms-animation-name: tada;
animation-name: tada;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }	
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }	
80% { -webkit-transform: rotate(-5deg); }	
100% { -webkit-transform: rotate(0deg); }
}
@-moz-keyframes swing {
20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center; }
20% { -moz-transform: rotate(15deg); }	
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }	
80% { -moz-transform: rotate(-5deg); }	
100% { -moz-transform: rotate(0deg); }
}
@-ms-keyframes swing {
20%, 40%, 60%, 80%, 100% { -ms-transform-origin: top center; }
20% { -ms-transform: rotate(15deg); }	
40% { -ms-transform: rotate(-10deg); }
60% { -ms-transform: rotate(5deg); }	
80% { -ms-transform: rotate(-5deg); }	
100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
20%, 40%, 60%, 80%, 100% { transform-origin: top center; }
20% { transform: rotate(15deg); }	
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }	
80% { transform: rotate(-5deg); }	
100% { transform: rotate(0deg); }
}
.swing {
-webkit-animation-name: swing;
-moz-animation-name: swing;
-ms-animation-name: swing;
animation-name: swing;
} @-webkit-keyframes wobble {
0% { -webkit-transform: translateX(0%); }
15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
30% { -webkit-transform: translateX(20%) rotate(3deg); }
45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
60% { -webkit-transform: translateX(10%) rotate(2deg); }
75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes wobble {
0% { -moz-transform: translateX(0%); }
15% { -moz-transform: translateX(-25%) rotate(-5deg); }
30% { -moz-transform: translateX(20%) rotate(3deg); }
45% { -moz-transform: translateX(-15%) rotate(-3deg); }
60% { -moz-transform: translateX(10%) rotate(2deg); }
75% { -moz-transform: translateX(-5%) rotate(-1deg); }
100% { -moz-transform: translateX(0%); }
}
@-ms-keyframes wobble {
0% { -ms-transform: translateX(0%); }
15% { -ms-transform: translateX(-25%) rotate(-5deg); }
30% { -ms-transform: translateX(20%) rotate(3deg); }
45% { -ms-transform: translateX(-15%) rotate(-3deg); }
60% { -ms-transform: translateX(10%) rotate(2deg); }
75% { -ms-transform: translateX(-5%) rotate(-1deg); }
100% { -ms-transform: translateX(0%); }
}
@keyframes wobble {
0% { transform: translateX(0%); }
15% { transform: translateX(-25%) rotate(-5deg); }
30% { transform: translateX(20%) rotate(3deg); }
45% { transform: translateX(-15%) rotate(-3deg); }
60% { transform: translateX(10%) rotate(2deg); }
75% { transform: translateX(-5%) rotate(-1deg); }
100% { transform: translateX(0%); }
}
.wobble {
-webkit-animation-name: wobble;
-moz-animation-name: wobble;
-ms-animation-name: wobble;
animation-name: wobble;
} @-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }	
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -moz-transform: scale(1); }	
50% { -moz-transform: scale(1.1); }
100% { -moz-transform: scale(1); }
}
@-ms-keyframes pulse {
0% { -ms-transform: scale(1); }	
50% { -ms-transform: scale(1.1); }
100% { -ms-transform: scale(1); }
}
@keyframes pulse {
0% { transform: scale(1); }	
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.pulse {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-ms-animation-name: pulse;
animation-name: pulse;
}
@-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;}
}
@keyframes fadeIn {
0% {opacity: 0;}	
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInUp {
0% {
opacity: 0;
-ms-transform: translateY(20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInDown {
0% {
opacity: 0;
-ms-transform: translateY(-20px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-ms-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-20px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-ms-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInRight {
0% {
opacity: 0;
-ms-transform: translateX(20px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-ms-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUpBig {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInUpBig {
0% {
opacity: 0;
-ms-transform: translateY(2000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
transform: translateY(2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
-moz-animation-name: fadeInUpBig;
-ms-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDownBig {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-ms-keyframes fadeInDownBig {
0% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
100% {
opacity: 1;
-ms-transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
transform: translateY(-2000px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
-moz-animation-name: fadeInDownBig;
-ms-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeftBig {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInLeftBig {
0% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
transform: translateX(-2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
-moz-animation-name: fadeInLeftBig;
-ms-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-ms-keyframes fadeInRightBig {
0% {
opacity: 0;
-ms-transform: translateX(2000px);
}
100% {
opacity: 1;
-ms-transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-ms-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-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;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-ms-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-ms-keyframes fadeOutUp {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-ms-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-ms-keyframes fadeOutDown {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-ms-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-ms-keyframes fadeOutLeft {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-ms-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-ms-keyframes fadeOutRight {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-ms-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes fadeOutUpBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-ms-keyframes fadeOutUpBig {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
-moz-animation-name: fadeOutUpBig;
-ms-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes fadeOutDownBig {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-ms-keyframes fadeOutDownBig {
0% {
opacity: 1;
-ms-transform: translateY(0);
}
100% {
opacity: 0;
-ms-transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
-moz-animation-name: fadeOutDownBig;
-ms-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-ms-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
-moz-animation-name: fadeOutLeftBig;
-ms-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes fadeOutRightBig {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-ms-keyframes fadeOutRightBig {
0% {
opacity: 1;
-ms-transform: translateX(0);
}
100% {
opacity: 0;
-ms-transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
-moz-animation-name: fadeOutRightBig;
-ms-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-moz-keyframes bounceIn {
0% {
opacity: 0;
-moz-transform: scale(.3);
}
50% {
opacity: 1;
-moz-transform: scale(1.05);
}
70% {
-moz-transform: scale(.9);
}
100% {
-moz-transform: scale(1);
}
}
@-ms-keyframes bounceIn {
0% {
opacity: 0;
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-ms-transform: scale(1.05);
}
70% {
-ms-transform: scale(.9);
}
100% {
-ms-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-ms-keyframes bounceInUp {
0% {
opacity: 0;
-ms-transform: translateY(2000px);
}
60% {
opacity: 1;
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px);
}
100% {
-ms-transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
@-ms-keyframes bounceInDown {
0% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
60% {
opacity: 1;
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px);
}
100% {
-ms-transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(30px);
}
80% {
-moz-transform: translateX(-10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-ms-keyframes bounceInLeft {
0% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
60% {
opacity: 1;
-ms-transform: translateX(30px);
}
80% {
-ms-transform: translateX(-10px);
}
100% {
-ms-transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
-moz-animation-name: bounceInLeft;
-ms-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
@-moz-keyframes bounceInRight {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
60% {
opacity: 1;
-moz-transform: translateX(-30px);
}
80% {
-moz-transform: translateX(10px);
}
100% {
-moz-transform: translateX(0);
}
}
@-ms-keyframes bounceInRight {
0% {
opacity: 0;
-ms-transform: translateX(2000px);
}
60% {
opacity: 1;
-ms-transform: translateX(-30px);
}
80% {
-ms-transform: translateX(10px);
}
100% {
-ms-transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
-moz-animation-name: bounceInRight;
-ms-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(.3);
}	
}
@-moz-keyframes bounceOut {
0% {
-moz-transform: scale(1);
}
25% {
-moz-transform: scale(.95);
}
50% {
opacity: 1;
-moz-transform: scale(1.1);
}
100% {
opacity: 0;
-moz-transform: scale(.3);
}	
}
@-ms-keyframes bounceOut {
0% {
-ms-transform: scale(1);
}
25% {
-ms-transform: scale(.95);
}
50% {
opacity: 1;
-ms-transform: scale(1.1);
}
100% {
opacity: 0;
-ms-transform: scale(.3);
}	
}
@keyframes bounceOut {
0% {
transform: scale(1);
}
25% {
transform: scale(.95);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 0;
transform: scale(.3);
}	
}
.bounceOut {
-webkit-animation-name: bounceOut;
-moz-animation-name: bounceOut;
-ms-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
}
@-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
@-ms-keyframes bounceOutUp {
0% {
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(20px);
}
100% {
opacity: 0;
-ms-transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(20px);
}
100% {
opacity: 0;
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
-moz-animation-name: bounceOutUp;
-ms-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
}
@-moz-keyframes bounceOutDown {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
opacity: 0;
-moz-transform: translateY(2000px);
}
}
@-ms-keyframes bounceOutDown {
0% {
-ms-transform: translateY(0);
}
20% {
opacity: 1;
-ms-transform: translateY(-20px);
}
100% {
opacity: 0;
-ms-transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
transform: translateY(0);
}
20% {
opacity: 1;
transform: translateY(-20px);
}
100% {
opacity: 0;
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
-moz-animation-name: bounceOutDown;
-ms-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
}
}
@-moz-keyframes bounceOutLeft {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(20px);
}
100% {
opacity: 0;
-moz-transform: translateX(-2000px);
}
}
@-ms-keyframes bounceOutLeft {
0% {
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(20px);
}
100% {
opacity: 0;
-ms-transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(20px);
}
100% {
opacity: 0;
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
-moz-animation-name: bounceOutLeft;
-ms-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
}
@-moz-keyframes bounceOutRight {
0% {
-moz-transform: translateX(0);
}
20% {
opacity: 1;
-moz-transform: translateX(-20px);
}
100% {
opacity: 0;
-moz-transform: translateX(2000px);
}
}
@-ms-keyframes bounceOutRight {
0% {
-ms-transform: translateX(0);
}
20% {
opacity: 1;
-ms-transform: translateX(-20px);
}
100% {
opacity: 0;
-ms-transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
transform: translateX(0);
}
20% {
opacity: 1;
transform: translateX(-20px);
}
100% {
opacity: 0;
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
-moz-animation-name: bounceOutRight;
-ms-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateIn {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity: 0;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateIn {
0% {
-ms-transform-origin: center center;
-ms-transform: rotate(-200deg);
opacity: 0;
}
100% {
-ms-transform-origin: center center;
-ms-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0;
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
-moz-animation-name: rotateIn;
-ms-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInUpLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
-moz-animation-name: rotateInUpLeft;
-ms-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInDownLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
-moz-animation-name: rotateInDownLeft;
-ms-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInUpRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
-ms-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
}
@-moz-keyframes rotateInDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
}
@-ms-keyframes rotateInDownRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
-moz-animation-name: rotateInDownRight;
-ms-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(200deg);
opacity: 0;
}
}
@-moz-keyframes rotateOut {
0% {
-moz-transform-origin: center center;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: center center;
-moz-transform: rotate(200deg);
opacity: 0;
}
}
@-ms-keyframes rotateOut {
0% {
-ms-transform-origin: center center;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: center center;
-ms-transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
transform-origin: center center;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: center center;
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
-moz-animation-name: rotateOut;
-ms-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutUpLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
-transform-origin: left bottom;
-transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
-moz-animation-name: rotateOutUpLeft;
-ms-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownLeft {
0% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutDownLeft {
0% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: left bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: left bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
-moz-animation-name: rotateOutDownLeft;
-ms-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutUpRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutUpRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
-moz-animation-name: rotateOutUpRight;
-ms-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity: 0;
}
}
@-moz-keyframes rotateOutDownRight {
0% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(0);
opacity: 1;
}
100% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity: 0;
}
}
@-ms-keyframes rotateOutDownRight {
0% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(0);
opacity: 1;
}
100% {
-ms-transform-origin: right bottom;
-ms-transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
-ms-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes hinge {
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }	
100% { -webkit-transform: translateY(700px); opacity: 0; }
}
@-moz-keyframes hinge {
0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }	
100% { -moz-transform: translateY(700px); opacity: 0; }
}
@-ms-keyframes hinge {
0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }	
20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }	
40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }	
80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }	
100% { -ms-transform: translateY(700px); opacity: 0; }
}
@keyframes hinge {
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }	
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }	
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }	
100% { transform: translateY(700px); opacity: 0; }
}
.hinge {
-webkit-animation-name: hinge;
-moz-animation-name: hinge;
-ms-animation-name: hinge;
animation-name: hinge;
} @-webkit-keyframes rollIn {
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@-moz-keyframes rollIn {
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
}
@-ms-keyframes rollIn {
0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn {
-webkit-animation-name: rollIn;
-moz-animation-name: rollIn;
-ms-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
}
}
@-moz-keyframes rollOut {
0% {
opacity: 1;
-moz-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-moz-transform: translateX(100%) rotate(120deg);
}
}
@-ms-keyframes rollOut {
0% {
opacity: 1;
-ms-transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-ms-transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
-moz-animation-name: rollOut;
-ms-animation-name: rollOut;
animation-name: rollOut;
}