/*

    1. DOCUMENT SETUP
    2. PAGE PRELOADER
    3. WRAPPER
    4. PAGE HEADER
        4.1 CONTAINER
        4.2 LOGO
        4.3 OPEN NAVIGATION BUTTON
    5. NAVIGATION
        5.1 NAVIGATION LIST
        5.2 NAVIGATION CONTAINER
        5.3 BOTTOM CONTAINER
    6. SCROLL DOWN BUTTON
    7. SECTION HEADLINE
    8. PORTFOLIO
        8.1 GRID
        8.2 LAYER
        8.3 LOAD MORE
        8.4 PROJECT DETAILS
        8.5 PORTFOLIO CONTROLS
    9. TEAM
        9.1 LAYER
    10. BLOG
        10.1 GRID
        10.2 LAYER
        10.3 LOAD MORE
        10.4 BLOG DETAILS
        10.5 BLOG CONTROLS
    11. CONTACT
    12. FOOTER
    13. CSS ANIMATIONS
        13.1 JUMP
        13.2 ROTATE



/* --------------------------------------------------------------------- */
/* 1. DOCUMENT SETUP
/* --------------------------------------------------------------------- */

body {
    font-size: 100%;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: #595959;
    height: 100%;
    width: 100%;
    background: #f7f7f7;
    overflow-x: hidden;
    overflow-y: scroll;
}




/* --------------------------------------------------------------------- */
/* 2. PAGE PRELOADER
/* --------------------------------------------------------------------- */

#page-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #f7f7f7;
    overflow: hidden;
}

.pre-loader-content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -25px;
    text-align: center;
}




/* --------------------------------------------------------------------- */
/* 3. WRAPPER
/* --------------------------------------------------------------------- */

#pagewrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 100%;
    padding-top: 80px;
    z-index: 3;
    background: #f7f7f7;
    -moz-box-shadow: 0 0 55px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 0 55px rgba(0,0,0,0.25);
    box-shadow: 0 0 55px rgba(0,0,0,0.25);
}

section {
    position: relative;
    padding: 80px 0;
}

section.white {
    position: relative;
    background: #fff;
}



/* --------------------------------------------------------------------- */
/* 4. PAGE HEADER
/* --------------------------------------------------------------------- */

/* ==== 4.1 CONTAINER ==== */

#page-header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    background: #fff;
    z-index: 9997;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}



/* ==== 4.2 LOGO ==== */

#logo {
    position: absolute;
    top: 0;
    left: 40px;
    height: 100%;
}
#logo img {
    max-height: 80px;
    width: auto;
}



/* ==== 4.3 OPEN NAVIGATION BUTTON ==== */

#open-navi {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 40px;
    height: 100%;
    color: #595959;
    z-index: 9999;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: line-height 0;
    -moz-transition:    line-height 0;
    -o-transition:      line-height 0;
    transition:         line-height 0;
}
#open-navi:hover, #open-navi.active {
    color: #70a8da;
}




/* --------------------------------------------------------------------- */
/* 5. NAVIGATION
/* --------------------------------------------------------------------- */

/* ==== 5.1 NAVIGATION CONTAINER ==== */

#navigation-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background: #ebebeb;
    z-index: 1;
}



/* ==== 5.2 NAVIGATION LIST ==== */

#main-navigation {
    position: absolute;
    top: 15%;
    left: 0;
    width: 100%;
    line-height: 2.1;
    text-align: center;
}

#main-navigation li:after {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    margin: 0 auto;
    background: #d4d4d4;
}

#main-navigation li:first-child:before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    margin: 0 auto;
    background: #d4d4d4;
}

#main-navigation a {
    display: block;
    font-weight: 600;
    font-size: 1.4em;
    padding: 18px 0;
    line-height: 1;
    color: #595959;
}

#main-navigation a:hover, #main-navigation a.active {
    color: #70a8da;
    background: rgba(255,255,255,0.4);
}



/* ==== 5.3 BOTTOM CONTAINER ==== */

#navigation-container .bottom-container {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    color: #595959;
    text-align: center;
}

#navigation-container .social-links {
    margin-bottom: 12px;
}

#navigation-container .social-links a {
    margin-left: 3px;
}

#navigation-container .bottom-text {
    display: block;
    font-size: 0.8em;
}




/* --------------------------------------------------------------------- */
/* 6. SCROLL DOWN BUTTON
/* --------------------------------------------------------------------- */

.scroll-down-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	z-index: 99;
}

.scroll-down-container .scroll-down {
    display: block;
    width: 40px;
    height: 60px;
    position: absolute;
    left: 50%;
    bottom: 30px;
    margin-left: -20px;
    background: url('../images/layout/scroll-down.png') center no-repeat;
    z-index: 999;
    -webkit-transition: all 5s;
    -moz-transition:    all 5s;
    -o-transition:      all 5s;
    transition:         all 5s;
    -webkit-animation-name: jump;
    -moz-animation-name: jump;
    -o-animation-name: jump;
    -ms-animation-name: jump;
    animation-name: jump;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    -ms-animation-duration: 2s;
    animation-duration: 2s;
}

.scroll-down-container .scroll-down:hover {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    -o-animation-name: none;
    -ms-animation-name: none;
    animation-name: none;
}




/* --------------------------------------------------------------------- */
/* 7. SECTION HEADLINE
/* --------------------------------------------------------------------- */

.section-headline {
    position: relative;
    width: 100%;
    color: #fff;
    line-height: 1.3;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.section-headline.about {
    background-image: url('../images/about/about-section-headline.jpg');
}
.section-headline.contact {
    background-image: url('../images/contact/contact-section-headline.jpg');
}
.section-headline.blog {
    background-image: url('../images/blog/blog-section-headline.jpg');
}
.section-headline.shortcodes {
    background-image: url('../images/shortcodes/shortcodes-section-headline.jpg');
}

.section-headline .row {
    padding-top: 150px;
    padding-bottom: 150px;
}

.section-headline h1 {
    margin: 0;
}

.section-headline h4 {
    font-weight: 500;
    font-size: 0.9em;
    text-transform: uppercase;
}

.section-headline .scroll-down-container {
    position: absolute;
    bottom: 40px;
    left: 38px;
}

.section-headline .scroll-down-container .scroll-down {
    display: block;
    width: 40px;
    height: 60px;
    position: relative;
    left: auto;
    bottom: auto;
    margin-left: 0;
}




/* --------------------------------------------------------------------- */
/* 8. PORTFOLIO
/* --------------------------------------------------------------------- */

/* ==== 8.1 GRID ==== */

#portfolio {
    padding: 0;
}

#portfolio-grid:after {
    display: block;
    content: '';
    clear: both;
}

#portfolio-grid li {
    position: relative;
    float: left;
    width: 33.33333%;
    overflow: hidden;
}

#portfolio-grid li.double {
    width: 66.66666%;
}

#portfolio-grid li img {
    float: left;
    width: 101%;
    margin-right: -0.5%;
    -webkit-transition: all 4s;
    -moz-transition:    all 4s;
    -o-transition:      all 4s;
    transition:         all 4s;
}

#portfolio-grid li:after {
    display: block;
    content: '';
    clear: both;
}

#portfolio-grid li:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}


/* ==== 8.2 LAYER ==== */

#portfolio-grid .layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(112,168,218,0.9);
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 10;
    -webkit-transition: all 0.4s;
    -moz-transition:    all 0.4s;
    -o-transition:      all 0.4s;
    transition:         all 0.4s;
}

#portfolio-grid li:hover .layer {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

#portfolio-grid .layer .plus {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-weight: 300;
    font-size: 1.6em;
    color: #fff;
    background: #595959;
}

#portfolio-grid .layer .text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -45px;
    text-align: center;
    color: #fff;
}


#portfolio-grid .layer .tag {
    font-size: 0.85em;
}

#portfolio-grid .layer h3 {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    -webkit-transition: all 0.8s;
    -moz-transition:    all 0.8s;
    -o-transition:      all 0.8s;
    transition:         all 0.8s;
}

#portfolio-grid .layer h3:after {
    background: #fff;
    height: 2px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}



/* ==== 8.3 LOAD MORE ==== */

#portfolio-load-more {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    background: #70a8da;
}

#portfolio-load-more i {
    margin-right: 5px;
}

#portfolio-load-more:hover {
    background: #7fb4e3;
}

#portfolio-load-more i.rotate {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
}



/* ==== 8.4 PROJECT DETAILS ==== */

#portfolio-details {
    display: none;
    padding-top: 0;
}

.portfolio-carousel {
    margin-bottom: 80px;
    background: #ebebeb;
}

.portfolio-carousel .item {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#portfolio-details .video-container {
    margin-bottom: 80px;
}

#portfolio-details h2 {
    margin-bottom: 0;
}

#portfolio-details .tag {
    font-size: 0.8em;
}


.detail-carousel {
    margin: 80px 0;
    background: #ebebeb;
}

.detail-carousel .item {
    overflow: hidden;
}

.detail-carousel .item img {
    float: left;
    -webkit-transition: all 0.3s;
    -moz-transition:    all 0.3s;
    -o-transition:      all 0.3s;
    transition:         all 0.3s;
}

.detail-carousel .item:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}


.detail-carousel .owl-controls, .portfolio-carousel .owl-controls {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -25px;
}

.detail-carousel .owl-controls .owl-page, .portfolio-carousel .owl-controls .owl-page {
    display: block;
    width: 25px;
    margin-bottom: 10px;
    text-align: center;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}

.detail-carousel .owl-controls .owl-page span, .portfolio-carousel .owl-controls .owl-page span {
    margin: 0 auto;
}

.detail-carousel .owl-controls .owl-page.active span, .portfolio-carousel .owl-controls .owl-page.active span {
    border-color: #fff;
}



/* ==== 8.5 PORTFOLIO CONTROLS ==== */

#portfolio-controls {
    position: fixed;
    top: 50%;
    left: 0;
    margin-top: -45px;
    z-index: 99;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.1);
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

#portfolio-controls:after {
    display: block;
    content: '';
    clear: both;
}

#portfolio-controls a {
    display: block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background: #fff;
    color: #595959;
}
#portfolio-controls a:hover {
    color: #70a8da;
}




/* --------------------------------------------------------------------- */
/* 9. TEAM
/* --------------------------------------------------------------------- */

.team:after {
    display: block;
    content: '';
    clear: both;
}

.team .team-member {
    position: relative;
    width: 33.3333333%;
    overflow: hidden;
    float: left;
}

.team .team-member:after {
    display: block;
    content: '';
    clear: both;
}

.team .team-member img {
    width: 101%;
    margin: 0 -0.5%;
    float: left;
    -webkit-transition: all 4s;
    -moz-transition:    all 4s;
    -o-transition:      all 4s;
    transition:         all 4s;
}

.team .team-member:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    transform: scale(1.2);
}

.team .circle-icon {
    background: none;
    border: 1px solid #fff;
}

.team .circle-icon:hover {
    background: #fff;
    color: #70a8da;
}



/* ==== 9.1 LAYER ==== */

.team .team-member .layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(112,168,218,0.9);
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-transition: all 0.3s;
    -moz-transition:    all 0.3s;
    -o-transition:      all 0.3s;
    transition:         all 0.3s;
}

.team .team-member:hover .layer {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.team .team-member .layer .text {
    position: absolute;
    bottom: 15%;
    left: 40px;
    padding: 40px 40px 0 0;
    color: #fff;
}

.team .team-member .layer .social-links {
    padding-bottom: 40px;
}

.team .team-member .layer h3 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.25;
}

.team .team-member .layer h3:after {
    background: #fff;
    background: #fff;
    height: 2px;
}

.team .team-member .layer .tag {
    font-size: 0.85em;
}




/* --------------------------------------------------------------------- */
/* 10. BLOG
/* --------------------------------------------------------------------- */

/* ==== 10.1 GRID ==== */

#blog {
    padding: 0;
}

#blog-grid {
    padding-top: 2px;
}

#blog-grid li {
    position: relative;
    background: #fff;
}

#blog-grid li .image-container {
    position: relative;
    overflow: hidden;
}

#blog-grid li img {
    float: left;
    width: 101%;
    margin-right: -0.5%;
    -webkit-transition: all 4s;
    -moz-transition:    all 4s;
    -o-transition:      all 4s;
    transition:         all 4s;
}

#blog-grid li:after {
    display: block;
    content: '';
    clear: both;
}

#blog-grid .content {
    padding: 30px 40px 40px 40px;
}

#blog-grid .tags {
    margin-bottom: 5px;
    font-size: 0.85em;
    text-transform: uppercase;
}

#blog-grid .tag {
    margin-right: 10px;
}

#blog-grid .tag i {
    margin-right: 2px;
}

#blog-grid h3 {
    font-size: 1.4em;
    margin-bottom: 0;
}

#blog-grid h3.underline:after {
    margin: 0 0 20px 0;
}

#blog-grid .content p:last-child {
    margin: 0;
}



/* ==== 10.2 LAYER ==== */

#blog-grid .layer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(112,168,218,0.9);
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 10;
    -webkit-transition: all 0.4s;
    -moz-transition:    all 0.4s;
    -o-transition:      all 0.4s;
    transition:         all 0.4s;
}

#blog-grid li:hover .layer {
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

#blog-grid .layer .plus {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-weight: 300;
    font-size: 1.6em;
    color: #fff;
    background: #595959;
    z-index: 15;
}

#blog-grid .layer .button-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -30px;
    text-align: center;
}

#blog-grid .layer .button {
    color: #fff;
    border-color: #fff;
}

#blog-grid .layer .button:hover {
    background: none;
}



/* ==== 10.3 LOAD MORE ==== */

#blog-load-more {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;
    background: #70a8da;
}

#blog-load-more i {
    margin-right: 5px;
}

#blog-load-more:hover {
    background: #7fb4e3;
}

#blog-load-more i.rotate {
    -webkit-animation-name: rotate;
    -moz-animation-name: rotate;
    -o-animation-name: rotate;
    -ms-animation-name: rotate;
    animation-name: rotate;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
}



/* ==== 10.4 BLOG DETAILS ==== */

#blog-details {
    display: none;
    padding-top: 0;
}

.blog-carousel {
    margin-bottom: 80px;
    background: #ebebeb;
}

.blog-carousel .item {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#blog-details .video-container {
    margin-bottom: 80px;
}

#blog-details h2 {
    margin-bottom: 10px;
    line-height: 1.3;
}

#blog-details .tag {
    display: block;
    margin-bottom: 2px;
    font-size: 0.8em;
}

#blog-details .tag i {
    margin-right: 3px;
}

.blog-carousel .owl-controls {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -25px;
}

.blog-carousel .owl-controls .owl-page {
    display: block;
    width: 25px;
    margin-bottom: 10px;
    text-align: center;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
}

.blog-carousel .owl-controls .owl-page span {
    margin: 0 auto;
}

.blog-carousel .owl-controls .owl-page.active span {
    border-color: #fff;
}



/* ==== 10.5 BLOG CONTROLS ==== */

#blog-controls {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 99;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.1);
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

#blog-controls:after {
    display: block;
    content: '';
    clear: both;
}

#blog-controls a {
    display: block;
    width: 45px;
    height: 45px;
    line-height: 48px;
    text-align: center;
    background: #fff;
    color: #595959;
}
#blog-controls a:hover {
    color: #70a8da;
}




/* --------------------------------------------------------------------- */
/* 11. CONTACT
/* --------------------------------------------------------------------- */

.contact-row {
    margin-bottom: 7px;
}

.contact-row:after {
    display: block;
    content: '';
    clear: both;
}

.contact-row .icon-container, .contact-row .info {
    float: left;
}

.contact-row .info {
    padding: 6px 0 0 10px;
    font-weight: 600;
    font-size: 0.9em;
}

.contact-form span {
    display: block;
    margin-bottom: 3px;
    font-size: 0.8em;
}




/* --------------------------------------------------------------------- */
/* 12. FOOTER
/* --------------------------------------------------------------------- */

#page-footer {
    position: relative;
    width: 100%;
    background: #ebebeb;
    z-index: 1;
}

.footer-content {
    padding: 60px 0;
    text-align: center;
}

.footer-content .button {
    margin-left: 10px;
}

.footer-content .text {
    font-size: 0.9em;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
}





/* --------------------------------------------------------------------- */
/* 13. CSS ANIMATIONS
/* --------------------------------------------------------------------- */

/* ==== 13.1 JUMP ==== */

@-moz-keyframes jump {
    0% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    70% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    70% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

}

@-o-keyframes jump {
    0% {
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    70% {
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@-ms-keyframes jump {
    0% {
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    20% {
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50% {
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    70% {
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(0);
    }
    70% {
        transform: translateY(-30px);
    }
}


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



/* ==== 13.2 ROTATE ==== */

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

}

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

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

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

.italique {
	font-style: italic !important;
	color: #000 !important;
}