@charset "utf-8";

.clearfix:after {display:block; visibility:hidden; clear:both; content:'.'; overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
.clearfix {*zoom:1;display:block;}
html {
    overflow-x: hidden;
}

/* 导航 */
#navigation {
    height: 60px;
    text-align: center;
}

#select {
    width: 1400px;
    list-style: none;
    padding: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 60px;
    line-height: 60px;
    margin: auto;
}

#select>li {
    position: relative;
    left: 8px;
    top: 0;
    font-size: 17px;
    padding: 0 48px;
    height: 60px;
    line-height: 50px;
    cursor: pointer;
    display: inline-block;
}

#select>li .nav_ol {
    position: absolute;
    left: 50%;
    top: calc(100% - 0px);
    margin-top: -10px;
    background: #fff;
    z-index: 9;
    transform: translateX(-50%);
    border-radius: 5px;
    opacity: 0;
    padding: 10px 0;
    transition: .6s;
    visibility: hidden;
}



#select>li:hover .nav_ol {
    display: block;
    opacity: 1;
    margin-top: 0;
    visibility: visible;
}

#select>li .nav_ol li a {
    line-height: 36px;
    color: #333;
    padding: 0 30px;
    font-size: 17px;
    white-space: nowrap;
    display: block;
}

#select>li .nav_ol li:hover a {
    font-weight: bold;
    color: #0056b3;
}

#select>li>a {
    color: #FFF;
    font-size: 18px;
    display: block;
    line-height: 60px;
    font-weight: bold;
    transition: .4s;
    position: relative;
}

.header-wrap.on #select>li>a, .header-wrap.fix #select>li>a{
    color: #333;
}

#select>:first-child {
    /* margin-right: 15px; */
}

.selectActive>a {
    display: block;
    font-weight: bold;
    /* color: #0056b3 !important; */
    position: relative;
}


.selectActive>a::before {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100% !important;
    height: 3px;
    background: #fea62a;
    z-index: 99;
}

#select>li:hover>a {
    display: inline-block;
    font-weight: 550;
    color: #0056b3 !important;
    position: relative;
}

#select>li >a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width:0;
    height: 3px;
    background: #fea62a;
    z-index: 99;
    transition: .4s;
}
#select>li:hover>a::before {
    width: 100%;
}
#selectItem {
    position: relative;
    margin-left: -42px;
    z-index: 2;
    margin-top: -20px;
}

#selectItem>li {
    visibility: hidden;
    margin: 0 23px;
    vertical-align: top;
    user-select: none;
    background: white;
    border-radius: 5px;
    padding: 20px;
    display: inline-block;
}

#selectItem>:first-child {
    position: relative;
    left: -5px;
}

#selectItem>li>a {
    color: black;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Regular';
    display: block;
    padding: 10px 0;
    cursor: pointer;
}

#selectItem>li>a:hover {
    color: rgb(13, 84, 150);
    font-weight: bold;
}

#selectItem>li::before {
    content: "";
    position: relative;
    top: -48px;
    box-sizing: border-box;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

#selectItem ul {
    list-style: none;
    padding: 0;
    display: block;
}

#selectItem li ul {
    margin-top: -25px;
}

#selectItem li li {
    line-height: 30px;
    cursor: pointer;
}

#selectItem li li:hover {
    color: rgb(13, 84, 150);
    font-weight: bold;
}

/* 轮播 */
#chart {
    overflow: hidden;
}

.slick {
    overflow: hidden;
}

.slick .slick-son {
    /* height: 810px; */
    overflow: hidden;
}

.slick .slick-son>img {
    transition: all 0.5s ease;
    cursor: pointer;
}

.slick .slick-son>img:hover {
    transform: scale(1.05);
}

.slick .slick-dots {
    position: relative;
    left: calc(50% - 50px);
    display: flex;
    width: 100px;
    line-height: 20px;
    position: relative;
    text-align: center;
    margin-top: -46px;
}

.slick .slick-dot {
    flex: 1;
    cursor: pointer;
    color: white;
    font-size: 30px;
}

.slick .slick-active {
    color: rgb(13, 84, 150);
}

.slick .slick-dot::marker {
    width: 12px;
    height: 12px;
}

#slickText {
    cursor: pointer;
    list-style: none;
    padding: 0;
    color: white;
    font-weight: 400;
    font-family: 'Regular';
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 18px;
    width: 20px;
    text-align: center;
    position: relative;
    margin-top: -512px;
    margin-left: 14.8%;
}

.slickTextActive {
    font-weight: bold;
    color: rgb(13, 84, 150);
}

.banner {
        position: relative;
    z-index: 9;
}
.banner .item{}
.banner .item img{
            position: relative;
            left: 50%;
            /* top: 50%; */
            width: 100%;
            height: 100%;
            transform: translate(-50%,0) scale(1.1);
            /* opacity: 0.5; */
            transition: all 2s;
            -webkit-transition: all 5s;
            object-fit: cover;
            }
.banner .slick-slide{
    z-index: 0;
    position: relative;
}
.banner .slick-slide.slick-active{
    z-index: 9;
}
.banner .slick-active .item img{
    transform: translate(-50%, 0) scale(1);
    -webkit-transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

.banner .slick-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.5);
    border-radius: 50px;
    margin: 0 20px;
    cursor: pointer;
    transition: .5s;
}
.banner .slick-next.slick-arrow{right: 0;}
.banner .slick-arrow:hover{background: #000;}
.banner .slick-next.slick-arrow:before{border: 2px solid #fff;border-left: 0;border-bottom: 0;right: 24px;}
.banner .slick-arrow:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-right: 0;
    border-top: 0;
    box-sizing: border-box;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    transition: all .35s ease-in;
}

.banner .slick-dots{margin: 0;color:#fff;width: auto;display: inline-block;position: absolute;bottom: 10px;z-index: 9;width: 100%;text-align: center;}
.banner .slick-dots li{
    width: 11px;
    height: 11px;
    display: inline-block;
    background: #FFF;
    border-radius: 50px;
    margin: 3px;
}
.banner .slick-dots li{}
.banner .slick-dots li.slick-active{
    background: #fe9500;
}

/* 新闻 */
#news {
    padding: 80px 0;
    background: url(../images/bg_news.jpg) left top;
}

#newContext {
}

.slickNews {
    float: left;
    overflow: hidden;
    width: 66%;
    position: relative;
}

.slickNews .slick-list {
    width: 100%;
    height: 100%;
}

.slickNews .slick-list .slick-track {
    height: 100%;
}

.slickNews .slick-slide .slick-son {
    width: 100%;
    height: 100%;
}
.slickNews .slick-slide .slick-son a{
    position: relative;
}
.slickNews .slick-slide .slick-son a:hover img {
    transform: scale(1.05);
}
.slickNews .slick-son img {
    transition: all 0.5s ease;
    cursor: pointer;
    width: 100%;
    height: 588px;
    object-fit: cover;
}
.slickNews .titbox{
    position: absolute;
    background-image: linear-gradient(to top, #1c6eba 10%, rgba(255, 255, 255, 0));
    bottom: 0;
    padding: 30px;
}
.slickNews .titbox p{
    color: #FFF;
    margin-top: 10px;
}
.slickNews .titbox p.slickNewsContext{
    font-size: 22px;
    font-weight: 900;
}

.slickNews .slick-son>img:hover {
    transform: translateY(-20px) scale(1.05);
}



.slickNewsText {
    line-height: 22px;
    font-size: 15px;
    top: -270px;
    float: left;
    overflow: hidden;
    height: 44px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#newsBar {
    width: 34%;
    float: right;
    text-align: right;
    background: #FFF;
}

#newsBarTitle {
    display: block;
    font-size: 28px;
    font-weight: 600;
    font-family: "Source Han Sans CN", "思源宋体", "Microsoft YaHei", "微软雅黑", "SimSun", "宋体", sans-serif;
    text-align: left;
    margin: 30px;
    line-height: 1;
    position: relative;
    z-index: 12;
}
#newsBarTitle::after {content:'';width:100%;height:1px;display: block;background: #DEDEDE;position: absolute;top: 50%;z-index: -1;}
#newsBarTitle span{
    background: #FFF;
    padding: 0 10px 0 0;
    color: #26334d;
    }
#newsBarTitle a{
    float: right;
    font-size: 17px;
    font-weight: normal;
    margin-top: 5px;
    background: #FFF;
    padding: 0 0 0 10px;
    color: #999;
}
#newsBar>p {
    margin-left: 42px;
    margin-right: 40px;
    display: inline-block;
    height: 2px;
    width: 28px;
    border-top: 2px solid #1249A3;
    position: relative;
    top: 18px;
    vertical-align: top;
}

#newsBar>span {
    position: relative;
    top: -6px;
}

#newsUl {
    position: relative;
    text-align: left;
    padding: 0;
    list-style: none;
}

@font-face {
    font-family: 'Microsoft YaHei';
    src: url('../ttf/MicrosoftYaHei.ttf') format('truetype');
}

#newsUl>li> a {min-height: 85px;display: block;}

#newsUl>li> a p:nth-child(2) {
    position: relative;
    line-height: 25px;
    font-weight: 900;
    width: 100%;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 5px;
}


#newsUl>li>a p:nth-child(3) {
    float: right;
    position: relative;
    margin-top: -48px;
    right: -55px;
}

#newsUl>li {
    line-height: 22px;
    width: 100%;
    min-height: 115px;
    padding: 20px 25px;
    cursor: pointer;
    position: relative;
    z-index: 0;
}
#newsUl>li::after{content: '';width:0;left:0;bottom: 0;height: 100%;background: url(../images/newsBarLogo.png) #1c6eba no-repeat;position: absolute;transition: .5s;z-index: -1;}
#newsUl>li:hover::after{width:100%;}
#newsUl>li:hover > *{color:#FFF}
#newsUl>li:hover p{color:#FFF}
#newsUl>li::before{content: '';width: 90%;left: 5%;bottom: 0;height: 1px;background: #e9eaed;position: absolute;}
#newsUl>li:hover::before{display: none;}
#newsUl>li:last-child::before{
    display: none;
}

.newsTime>img {
    vertical-align: top;
    position: relative;
    margin-top: 4px;
    padding-right: 10px;
    display: none;
}

.newsTime {
    font-size: 15px;
    color: #828a99;
}

/* 公告 */
#notice {
    text-align: center;
    padding: 60px 0 70px;
}

.blockTitle {
    width: 100%;
    display: block;
    font-size: 28px;
    text-align: left;
    line-height: 1;
    position: relative;
    z-index: 12;
    margin-bottom: 25px;
}

.blockTitle span{
    display: inline-block;
    vertical-align: middle;
    font-size: 38px;
    color: #26334d;
    }
.blockTitle a{
    float: right;
    font-size: 16px;
    font-weight: normal;
    /* margin-top: 5px; */
}

 .blockTitle span em{
    color: #828a99;
    font-family: sans-serif;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
    margin-top: 1.3%;
    font-size: 20px;
    font-style: normal;
    text-transform: uppercase;
    font-weight: normal;
    }

.blockTitle> a {
    cursor: pointer;
    user-select: none;
    font-size: 17px;
    font-weight: normal;
    float: right;
    right: 0;
    color: #999;
    position: absolute;
    bottom: 12px;
}


#noticeContext {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0;
    display: flex;
}

#noticeContext>:nth-child(-n+3) {
    border-bottom: 1px solid #dedede;
}

#noticeContext>:nth-child(3),
#noticeContext>:nth-child(6) {
    border-right: none;
}

#noticeContext>li {
    /* background-image: none; */
    background-repeat: no-repeat;
    background-size: cover;
    cursor: default;
    border-right: 1px solid #dedede;
    font-size: 12px;
    display: inline-block;
    width: 33.333%;
    min-height: 290px;
    /* box-shadow: 0px 0px 30px #dadada; */
    background: #f9f9f9;
}

.noticeBlockTime {
    color: #989898;
    line-height: 22px;
    font-size: 16px;
    margin-bottom: 15px;
    display: block;
}

.noticeBlockBar {
    position: relative;
    margin-top: -5px;
    width: 22px;
    height: 2px;
    background: #FF7E7E;
}

.noticeContextActive#noticeContext>li.active .noticeBlockTitle {
    margin-top: 63px;
}

.noticeBlockTitle {
    font-size: 18px;
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.noticeBlockText {
    position: relative;
    margin-top: 20px;
}

.noticeBlockText p {
    font-size: 15px;
    line-height: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 105px;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    color: #575757;
}


#noticeContext>li>:last-child {
    position: relative;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

#noticeContext>li>:last-child img {
    position: relative;
    left: 6px;
    top: -2px;
}

#noticeContext>li {
    overflow: hidden;
}
#noticeContext>li a{
    height: 100%;
    display: block;
    padding: 40px;
}
#noticeContext>li:hover,#noticeContext>li.active {
   background-image: url(../images/noticeBlockBg.png);
   background-repeat: no-repeat;
   background: #1c6eba;
   box-shadow: none;
}
#noticeContext>li:hover > *,#noticeContext>li.active > * {color:#FFF}
#noticeContext>li:hover .noticeBlockTime,#noticeContext>li.active .noticeBlockTime {
    color: #FFF;
}
#noticeContext>li .noticeBlockTime,#noticeContext>li .noticeBlockTime {
    font-size: 16px;
}
#noticeContext>li.active p{color: #bad6f8;}
#noticeContext>li:hover .noticeBlockTime2,#noticeContext>li.active .noticeBlockTime2 {display: block;}
.noticeLiMask,
.noticeLiMask img {
    position: static;
    width: 120%;
}

.noticeBlockBar2 {
    display: none;
    position: relative;
    margin-left: 190px;
    background: #BD192F;
}

.noticeBlockTime2 {
    cursor: default;
    font-size: 12px;
    color: white;
    float: right;
}

/* 概况 */
#general {
    text-align: center;
    overflow: hidden;
    background-image: url(../images/generalBg.png);
    background-repeat: no-repeat;
    padding: 60px 0;
    height: auto;
    background-color: #f7faff;
}

#generalBanner {
    height: auto;
}

#generalBanner>img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100%;
}

#gereralTitle>:nth-child(1) {
    color: #ffffff;
}

#gereralTitle.blockTitle span {
    color: #ffffff;
}
#gereralTitle.blockTitle span em{
    color: #579cdb;
}
#gereralTitle>:nth-child(3) {
    background: white;
    left: 0px;
    opacity: 0.8;
}

#generalContext {
    position: relative;
    background: white;
}

#generalContext>:nth-child(1) {
    width: 51%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url('../images/generalImg.png');
    position: absolute;
    background-size: cover;
    background-position: center;
}

#generalContext>:nth-child(2) {
}

#generalTxt {
    text-align: right;
    width: 36%;
    float: right;
    margin: 0 90px 50px;
    padding: 70px 0 80px;
    position: relative;
}

#generalTxt>:nth-child(1) {
    display: inline-block;
    font-size: 18px;
    background: #1c6eba;
    color: white;
    width: 216px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
    user-select: none;
}

#generalTxt>:nth-child(1):hover {
    background: rgba(13, 84, 150, 0.8);

}

#generalTxt>:nth-child(2) {
    margin-top: 26px;
    font-family: 'Microsoft YaHei';
    font-size: 22px;
    line-height: 26px;
    font-weight: bold;
}

#generalTxt>:nth-child(3) {
    margin-top: 5px;
    text-align: left;
    width: 100%;
    display: inline-block;
    font-size: 17px;
    line-height: 38px;
    color: #000;
}

#generalTxt a {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    line-height: 1;
    border: 1px solid #CCCCCC;
    text-align: center;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 12px 40px;
    transition: .5s;
}

#generalTxt>:nth-child(4):hover {
    background: #1c6eba;
    border-color: #1c6eba;
    color: #FFF;
}

/* 动态 */
#dynamic {
    background: #F7FAFF;
    margin-top: 0;
    padding: 70px 0;
    background: url(../images/main2_back.png);
}

#dynamicTitle>:nth-child(3) {
    left: 0;
}

#dynamicContext {
    position: relative;
    width: 100%;
    height: 500px;
}

#dynamicContext>div {
    padding: 30px;
    display: inline-block;
    height: 100%;
}

#dynamicContext div div {
    border-right: 1px solid #cccccc;
    width: 130px;
    margin: auto;
    padding: 0 10px;
}

#dynamicContext div div p {
    padding-bottom: 10px;
    width: 100%;
    font-size: 18px;
    padding: 35px 0;
    border-bottom: 1px solid #CCCCCC;
    cursor: pointer;
    text-align: center;
    user-select: none;
    position: relative;
    font-weight: bold;
}

#dynamicContext div div p span {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0px auto 10px;
}

#dynamicContext div div p:nth-child(1) span {
    background: url(../images/dynamicTeachLogo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dynamicContext div div p.dynamicBarPActive a{
    color: #1c6eba;
}
#dynamicContext div div p:nth-child(1).dynamicBarPActive span {
    background: url(../images/dynamicTeachLogoActive.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dynamicContext div div p:nth-child(2) span {
    background: url(../images/dynamicDataLogo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dynamicContext div div p:nth-child(2).dynamicBarPActive span {
    background: url(../images/dynamicDataLogoActive.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dynamicContext div div p:nth-child(3) span {
    background: url(../images/dynamicNewsLogo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#dynamicContext div div p:nth-child(3).dynamicBarPActive span {
    background: url(../images/dynamicNewsLogoActive.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dynamicBarPActive {
    color: #1c6eba;
}
.dynamicBarPActive:after {content:'';width: 2px;height: 100%;display:block;background: #1c6eba;position: absolute;top: 0;right: -11px;}
#dynamicContext div>p:nth-child(3) {
}

#dynamicContext div>a {
    cursor: pointer;
    display: block;
    background: #1c6eba;
    color: white;
    border-radius: 55px;
    line-height: 38px;
    width: 110px;
    height: 38px;
    font-size: 13px;
    position: absolute;
    bottom: 60px;
    text-align: center;
}


#dynamicContext>:nth-child(1) {
    width: 17%;
    float: left;
    background: #FFF;
    position: absolute;
    padding: 40px 18px;
}

#dynamicContext>:nth-child(1)>p {
    cursor: pointer;
}

#dynamicContext .dynamicImgBox {background: #ffffff;float: right;width: 81%;}

.dynamicImgBox .active {
    display: flex;
    justify-content: space-between;
}

.dynamicImgBox ul {
    display: none;
}

.dynamicImgBox ul {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none;
}

.dynamicImgBox li {
    height: 100%;
    width: 48.5%;
    overflow: hidden;
}
.dynamicImgBox li a{
    display: block;
}
.dynamicImgBox li a ._img{
    display: block;
    overflow: hidden;
}
.dynamicImgBox li a ._img img{}
.dynamicImgBox li a .text{}
.dynamicImgBox li a .text .dynamicTxtTitle{}
.dynamicImgBox li a .text .dynamicTxt{}
.dynamicBarActive {
    animation-name: dynamicBarActive;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

.dynamicTxtTitle {
    margin-top: 18px;
    padding-left: 15px;
    border-left: 5px solid #1c6eba;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}

.dynamicTxt {
    border-top: 1px solid #e1e1e1;
    padding-top: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 24px;
    color: #666;
}

.dynamicTxtTitle,
.dynamicTxt {
    text-align: left;
    cursor: pointer;
    user-select: none;
}

#dynamicContext li img {
    cursor: pointer;
    transition: .4s ease;
    width: 100%;
    height: 320px;
    display: block;
}
#dynamicContext li:hover img {
    transform: scale(1.05);
}
#dynamicContext li a:hover img {
    transform: scale(1.05);
}

/* 党建 */
#partyBuildingAndStudentGroup {
    text-align: center;
    padding: 60px 0;
}

#partyBuildingAndStudentGroupArea {
    width: 74%;
    height: 100%;
    display: inline-block;
}

#partyBuilding {
    height: 100%;
    width: 61%;
    float: left;
}

#studentGroup {
    width: 35.6%;
    height: 100%;
    float: right;
    text-align: right;
}

#partyBuildingTitle {
}

#studentGroupTitle {
}

#partyBuildingTitle>:nth-child(3),
#studentGroupTitle>:nth-child(3) {
}

#partyBuildingContext {
    text-align: left;
}
#partyBuildingContext img{
    width: 30%;
    display: inline-block;
    transition: .4s;
}

#partyBuildingContext a:hover img {
    transform: scale(1.05);
}
#partyBuildingContext>div {
    background: #F2F7FF;
    transition: 1s ease;
    position: relative;
    overflow: hidden;
}

#partyBuildingContext>div:hover {
}

#partyBuildingContext>div>p {
    float: right;
}

#partyBuildingHeadlines {
    float: right;
    width: 62%;
    margin: 25px;
}

#partyBuildingHeadlines>p:first-child {
    color: #CCCCCC;
    user-select: none;
    margin: 0;
}

#partyBuildingHeadlines>p:nth-child(2) {
    user-select: none;
    margin-top: 14px;
    line-height: 30px;
    font-weight: bold;
    height: 60px;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#partyBuildingHeadlines>p:nth-child(3) {
    background: #1c6eba;
    width: 100px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    color: white;
    user-select: none;
    cursor: pointer;
    border-radius: 50px;
    position: absolute;
    bottom: 25px;
    right: 30px;
}

#partyBuildingHeadlines>p:nth-child(3):hover {
    background: #1561a8;
}

#partyBuildingContext ul {
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

#partyBuildingContext ul>li {
    user-select: none;
    cursor: pointer;
    height: 65px;
    line-height: 65px;
    border-bottom: 1px solid #DEDEDE;
    transition: .1s ease;
}

#partyBuildingContext ul>li:hover {color: #1c6eba;}
#partyBuildingContext ul>li a{}
#partyBuildingContext ul>li a span:first-child {
    width: 75%;
    display: inline-block;
    height: 65px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 18px;
    font-weight: bold;
}

#partyBuildingContext ul>li a span:last-child {
    height: 65px;
    margin-top: -65px;
    float: right;
    color: #999;
}

/* 学团 */
#studentGroupContext {
    transition: 1s ease all;
    background: #F3F8FF;
    /* height: 600px; */
}

.slickStudy {
}

.slickStudy>div {
    cursor: pointer;
}

#studentGroupContext:hover {
    /* box-shadow: 0 5px 25px #b4cce2; */
}

.slickStudy .slick-dots {
    position: relative;
    display: flex;
    justify-content: center;
    line-height: 12px;
    margin: 20px 0 0 0;
}

.slickStudy .slick-dot {
    cursor: pointer;
    background: #D1E0F0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin: 0 4px;
}

.slickStudy .slick-active {
    background: #1c6eba;
}

.slickStudy .slick-dot::marker {
    width: 12px;
    height: 12px;
}

#studentGroupContext {
    text-align: center;
}
#studentGroupContext img{width:100%;height: 280px;transition: .4s;}
#studentGroupContext a:hover img {
    transform: scale(1.05);
}
#studentGroupContext>ul {
    display: inline-block;
    text-align: left;
    padding: 30px 30px 35px;
    margin: 0;
    list-style: none;
}

#studentGroupContext>ul>li {
    display: none;
}

.studentGroupBarActive {
    display: block !important;
}

.studentGroupTime {
    user-select: none;
    margin-top: -8px;
    color: #BABABA;
}

.studentGroupTime>p {
    margin-left: 0px;
    margin-right: 12px;
    height: 1px;
    width: 44px;
    background: #BABABA;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-top: 0px;
}

.studentGroupTitle {
    user-select: none;
    font-size: 17px;
    font-weight: bold;
    margin-top: 15px;
    line-height: 28px;
    height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.studentGroupContext {
    margin-top: 10px;
    line-height: 28px;
    height: 55px;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 教职 */
#teacher {
    text-align: center;
    background: #FFF;
    padding-bottom: 40px;
    background-repeat: no-repeat;
    padding: 60px 0 40px;
}

#teacherBanner {
}

#teacherTitle span em {
    color: #9b9da3;
}



#teacherContext {
    position: relative;
    background: white;
    margin-top: 40px;
}
#teacherContext a:hover img {
    transform: scale(1.05);
}
#teacherContext .img-fluid {
    /* height: 440px; */
    width: 100%;
    object-fit: cover;
    transition: .4s;
}


.slickTeacher{display: flex;flex-wrap: wrap;margin: -10px;}
.slickTeacher .slick-son{width: calc(33.33% - 20px);margin: 10px;padding: 1.8rem 1.5rem;background: #f6fbff;}
.slickTeacher .slick-son:hover{background: #1c6eba;background-size: cover;}
.slickTeacher .slick-son a{box-sizing: border-box;display: flex;align-items: center;}
.slickTeacher .slick-son > *{transition:.3s}
.slickTeacher .slick-son:hover > *{color: #FFF !important; }
.slickTeacher .slick-son:hover > a *{color: #FFF !important; }
.slickTeacher .slick-son a .s-date{font-family: Georgia;font-size: 15px;color: #1488c6;text-align: center;font-weight: bold;}
.slickTeacher .slick-son a .s-date em{display: block;font-size: 26px;margin-bottom: 3px;}
.slickTeacher .slick-son a .s-tit{font-size: 17px;line-height: 1.6;font-weight: bold;margin-left: 15px;overflow: hidden;text-overflow: ellipsis;white-space: normal;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: left;}


.teacher_right{
    float: right;
    width: 50%;
    height: 100%;
    position: absolute;
    text-align: center;
    right: 0;
}

.teacherContext {height: 100%;padding: 60px;box-sizing: border-box;background: #2377c7;}
.teacherContext_inner {
    display: none;
    float: right;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    color: #FFF;
}

.teacherContext_inner a {
    display: inline-block;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    line-height: 1;
    border: 1px solid #4596e3;
    text-align: center;
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 40px;
    color: #FFF;
}
.teacherContext_inner a img{
    display: none;
}
.teacherContext_inner a:hover {
    background: #e6b33f;
    border: none;
    color: #FFF;
    border: 1px solid #e6b33f;
}

.teacherContext_inner.teacherContextTxtActive {
    display: inline-block !important;
}

.teacherContextTitle {
    margin: 0 auto;
    font-size: 19px;
    font-weight: bold;
    line-height: 30px;
    overflow: hidden;
    text-align: left;
}

.teacherContextTxt {
    margin: 0 auto;
    margin-top: 15px;
    font-size: 16px;
    line-height: 32px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    width: 100%;
}

.teacherContextTxt>span {
    margin-top: 28px;
    display: inline-block;
}

.teacherContext> a {
    cursor: pointer;
    user-select: none;
    color: #CCCCCC;
    line-height: 1;
    padding: 15px 35px;
    display: inline-block;
    border: 1px solid #D6D6D6;
    text-align: left;
    transition: 0.1s ease;
    position: absolute;
    bottom: 100px;
    left: 40%;
}

.teacherContext>a img {
    position: relative;
    display: inline-block;
    vertical-align: 2px;
    margin-left: 10px;
}

.teacherContext>p:last-child:hover {
    transform: scale(0.98);
    background: rgba(250, 247, 247, 0.8);
}

#teacherWindowPageBox {
    vertical-align: top;
    background: #1962a5;
    width: 100%;
    height: 52px;
    line-height: 52px;
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
}
#teacherWindowPageBox .slick-arrow{height: 100%;position: absolute;top: 0;left: 0;cursor: pointer;}
#teacherWindowPageBox .slick-arrow.slick-next{right: 0;left: auto;}
#teacherWindowPageBox .slick-arrow img{}
#teacherWindowPageBox #teacherWindowPage{}
#teacherWindowPageBox #teacherWindowPage ul{display: flex;align-items: center;margin: 0;padding: 0;justify-content: center;}
#teacherWindowPageBox #teacherWindowPage ul li{width: 52px;height: 100%;font-size: 21px;font-family: cursive;color: #FFF;cursor: pointer;position: relative;}
#teacherWindowPageBox #teacherWindowPage ul li.slick-active{background: #f0a233;}
#teacherWindowPageBox #teacherWindowPage ul li.slick-active::after{
    background: #f0a233e6;
    content: "";
    position: absolute;
    top: -13px;
    left: 34%;
    width: 14px;
    height: 14px;
    transform-origin: left bottom;
    transform: rotate(45deg);
    }
#teacherWindowPageBox>img:nth-child(1) {
    cursor: pointer;
    float: left;
}

#teacherWindowPageBox>img:last-child {
    cursor: pointer;
    float: right;
}

#teacherWindowPage {
    text-align: center;
    display: inline-block;
    width: 80%;
}

#teacherWindowPage>li {
    color: white;
    font-weight: bold;
    font-size: 18px;
    width: 56px;
    cursor: pointer;
    display: inline-block;
    height: 52px;
    margin: 0 4px;
    position: relative;
    left: -22px;
}

.teacherWindowPageActive {
    background: rgb(13, 84, 150);
}

.teacherWindowPageActive::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 6px;
    top: -6px;
    box-sizing: border-box;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgb(13, 84, 150);
}

/* 人才 */
#talentAndExchange {
    text-align: center;
    padding: 60px 0 70px;
    background:url(../images/mcon4_bg.jpg);
}

#teacherTxtBg {
    z-index: -1;
    position: relative;
    width: 100%;
    height: 362px;
    background: #F7FAFF;
    display: none;
}

#talentAndExchangeArea {
    width: 74%;
    height: 100%;
    display: inline-block;
}

#talent {
    height: 100%;
    width: 62%;
    float: left;
}

#talent .img-fluid {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

#exchange {
    width: 34%;
    height: 100%;
    float: right;
    text-align: right;
}

#talentTitle {
}

#exchangeTitle {
    display: block;
}

#talentTitle>:nth-child(3),
#exchangeTitle>:nth-child(3) {
}

.slickTalent {
    cursor: pointer;
}
.slickTalent img{width:100%;height: 557px;transition: .4s;}
.slickTalent a:hover img {
    transform: scale(1.05);
}
#slickTalentTxt {
    text-align: left;
    user-select: none;
    list-style: none;
    padding: 0;
    background: #FFF;
    padding: 10px 40px 26px;
}

#slickTalentTxt>li {
    display: none;
}

.slickTalentTxtActive {
    display: block !important;
}

.slickTalentTxtTitle {
    color: #1c6eba;
    font-size: 19px;
    font-weight: bolder;
    margin-top: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.slickTalentTxtP {
    text-indent: 6px;
    font-size: 15px;
    line-height: 24px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 52px;
}

.talentFooter {
    position: relative;
    top: 17px;
}

.talentTime {
    color: #999999;
}

.talentTime>span {
    font-weight: bolder;
    font-size: 20px;
}

.talentPage {
    color: #999999;
    cursor: pointer;
    float: right;
}

.talentPage>span {
    color: #005FC9;
    font-weight: bold;
    font-size: 18px;
}

#exchangeContext {overflow: hidden;}
#exchangeContext>a{display:block;height: 100%;}
#exchangeContext a:hover img {
    transform: scale(1.05);
}
#exchangeContext img {
    height: 240px;
    width: 100%;
    object-fit: cover;
    transition: .4s;
}

#talent>p,
#exchangeContext>p {
    cursor: pointer;
    user-select: none;
    color: #7C7C7C;
    padding-right: 20px;
    float: right;
    position: relative;
    margin-top: -50px;
    background-image: url('../images/cooperateArrow.png');
    background-repeat: no-repeat;
    background-position: right center;
}

#exchangeContext>p {
    margin-top: 0;
    color: rgb(13, 84, 150);
}

#exchangeUl {
    list-style: none;
    padding: 0px 40px 40px 40px;
    margin: 0;
    text-align: left;
    background: #FFF;
}

#exchangeUl>li {
    user-select: none;
    padding: 20px 0;
    border-bottom: 1px solid #DEDEDE;
}

#exchangeUl>li a{
    display: flex;
}

#exchangeUl li p {
    cursor: pointer;
    margin-left: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
}

#exchangeUl li .date {
    vertical-align: top;
    display: inline-block;
    width: 60px;
    text-align: right;
}
#exchangeUl li .date em {
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    color: #1c6eba;
    display: block;
    font-style: inherit;
}

@charset "UTF-8";


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-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;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-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 rubberBand {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-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;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-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% {
    opacity: 1;
    -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% {
    opacity: 1;
    -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(-360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -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-out;
    animation-timing-function: ease-out;
  }

  40% {
    -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-out;
    animation-timing-function: ease-out;
  }

  50% {
    -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-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0deg) 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 slideInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  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);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes slideOutDown {
  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);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-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);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  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);
    -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;
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-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;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-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;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-2000px);
    transform: scale(.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-2000px);
    -ms-transform: scale(.1) translateY(-2000px);
    transform: scale(.1) translateY(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    -ms-transform: scale(.475) translateY(60px);
    transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-2000px);
    transform: scale(.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(48px);
    transform: scale(.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-2000px);
    -ms-transform: scale(.1) translateX(-2000px);
    transform: scale(.1) translateX(-2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(48px);
    -ms-transform: scale(.475) translateX(48px);
    transform: scale(.475) translateX(48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(2000px);
    transform: scale(.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-48px);
    transform: scale(.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(2000px);
    -ms-transform: scale(.1) translateX(2000px);
    transform: scale(.1) translateX(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-48px);
    -ms-transform: scale(.475) translateX(-48px);
    transform: scale(.475) translateX(-48px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    -ms-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -ms-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(-60px);
    -ms-transform: scale(.475) translateY(-60px);
    transform: scale(.475) translateY(-60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(2000px);
    -ms-transform: scale(.1) translateY(2000px);
    transform: scale(.1) translateY(2000px);
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(42px);
    transform: scale(.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-2000px);
    transform: scale(.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(42px);
    -ms-transform: scale(.475) translateX(42px);
    transform: scale(.475) translateX(42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(-2000px);
    -ms-transform: scale(.1) translateX(-2000px);
    transform: scale(.1) translateX(-2000px);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-42px);
    transform: scale(.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(2000px);
    transform: scale(.1) translateX(2000px);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateX(-42px);
    -ms-transform: scale(.475) translateX(-42px);
    transform: scale(.475) translateX(-42px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateX(2000px);
    -ms-transform: scale(.1) translateX(2000px);
    transform: scale(.1) translateX(2000px);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-2000px);
    transform: scale(.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale(.475) translateY(60px);
    -ms-transform: scale(.475) translateY(60px);
    transform: scale(.475) translateY(60px);
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translateY(-2000px);
    -ms-transform: scale(.1) translateY(-2000px);
    transform: scale(.1) translateY(-2000px);
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}