@font-face {
    font-family: 'catamaranregular';
    src: url('../fonts/catamaran-regular-webfont.woff2') format('woff2'), url('../fonts/catamaran-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'robotomono';
    src: url('../fonts/robotomono-regular-webfont.woff2') format('woff2'), url('../fonts/robotomono-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aileronsregular';
    src: url('../fonts/ailerons-webfont.woff2') format('woff2'),
        url('../fonts/ailerons-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'moon_2.0bold';
    src: url('../fonts/moon2.0-bold-webfont.woff2') format('woff2'),
        url('../fonts/moon2.0-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'moon_2.0light';
    src: url('../fonts/moon2.0-light-webfont.woff2') format('woff2'),
        url('../fonts/moon2.0-ligjht-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'moon_2.0regular';
    src: url('../fonts/moon2.0-regular-webfont.woff2') format('woff2'),
        url('../fonts/moon2.0-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'iron_forge_expandedexpanded';
    src: url('../fonts/ironforgeexpand-webfont.woff2') format('woff2'),
         url('../fonts/ironforgeexpand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'goverregular';
    src: url('../fonts/gover-webfont.woff2') format('woff2'),
         url('../fonts/gover-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

    @font-face {
    font-family: 'PTRootUIRegular';
    font-style: normal;
    font-weight: normal;
    src: local('PT Root UI Regular'), url('../fonts/PT Root UI_Regular.woff') format('woff');
    }
    

    @font-face {
    font-family: 'PTRootUILight';
    font-style: normal;
    font-weight: normal;
    src: local('PT Root UI Light'), url('../fonts/PT Root UI_Light.woff') format('woff');
    }
    

    @font-face {
    font-family: 'PTRootUIMedium';
    font-style: normal;
    font-weight: normal;
    src: local('PT Root UI Medium'), url('../fonts/PT Root UI_Medium.woff') format('woff');
    }
    

    @font-face {
    font-family: 'PTRootUIBold';
    font-style: normal;
    font-weight: normal;
    src: local('PT Root UI Bold'), url('../fonts/PT Root UI_Bold.woff') format('woff');
    }


@-webkit-keyframes marqueelike {

    0%,
    100% {
        left: 90%;
    }

    99.99% {
        left: -200%;
    }
}

@-webkit-keyframes marqueelike1 {

    0%,
    100% {
        left: 30%;
    }

    99.99% {
        left: -200%;
    }
}

/*
@-moz-keyframes marqueelike {
	0%, 100% {left:0;}
	99.99% {left:-100%;}
 }
@-o-keyframes marqueelike {
	0%, 100% {left:0;}
	99.99% {left:-100%;}
 }
@-ms-keyframes marqueelike {
	0%, 100% {left:0;}
	99.99% {left:-100%;}
 }
@keyframes marqueelike {
	0%, 100% {left:0;}
	99.99% {left:-100%;}    
 }*/

@-webkit-keyframes marqueelike2 {

    0%,
    100% {
        left: 130%;
    }

    99.99% {
        margin-left: -150%;
    }
}


@-webkit-keyframes marqueelike3 {

    0%,
    100% {
        left: 180%;
    }

    99.99% {
        margin-left: -210%;
    }
}


@-webkit-keyframes marqueelike4 {

    0%,
    100% {
        left: 210%;
    }

    99.99% {
        margin-left: -240%;
    }
}


@-webkit-keyframes marqueelike5 {

    0%,
    100% {
        left: 115%;
    }

    99.99% {
        margin-left: -150%;
    }
}



body,
figure,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "PTRootUIRegular", Arial, serif;
    font-weight: 200
}

#jb-about,
#jb-blog,
#jb-contact,
#jb-pricing,
#jb-resume,
#jb-skills,
#jb-started,
#jb-work,
.timeline > li:after {
    clear: both
}

.jb-video,
.work {
    overflow: hidden
}

.circle{
 width: 15px;
    height: 15px;
    border-radius: 20px;
    background: #000000;
    opacity:0.5;
    margin:10px auto;
    border: 1px solid rgba(255, 255, 255, 0.49);
}

#progress{
    width: 0%;
    background: rgb(0, 170, 255);
    z-index: 500000;
    bottom: 0px;
    position: fixed;
    height: 1%;
    border-top:2px solid #464e90;
}

.gototop a:active,
.gototop a:focus,
.gototop a:hover,
a:active,
a:focus,
a:hover {
    text-decoration: none;
    outline: 0
}

@font-face {
    font-family: icomoon;
    src: url(../fonts/icomoon/icomoon.eot?srf3rx);
    src: url(../fonts/icomoon/icomoon.eot?srf3rx#iefix) format("embedded-opentype"), url(../fonts/icomoon/icomoon.woff?srf3rx) format("woff"), url(../fonts/icomoon/icomoon.svg?srf3rx#icomoon) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: special_forcesregular;
    src: url(../fonts/Funkturm.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: veteran_typewriterregular;
    src: url(../fonts/lekton-regular-webfont.woff2) format('woff2'), url(../fonts/lekton-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: FREEFATFONT-Slanted;
    src: url(../fonts/FREEFATFONT-Slanted.woff2) format('woff2'), url(../fonts/FREEFATFONT-Slanted.woff) format('woff');
    font-weight: 400;
    font-style: normal
}


@font-face {
    font-family: zianregular;
    src: url(../fonts/zian_free_promo_2015_con_kerning-webfont.woff2) format('woff2'), url(../fonts/zian_free_promo_2015_con_kerning-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: appleoceanmedium;
    src: url(../fonts/appleocean-webfont.woff2) format('woff2'), url(../fonts/appleocean-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: 'black_drama_demoregular';
    src: url('../fonts/black_drama_demo-webfont.woff2') format('woff2'),
        url('../fonts/black_drama_demo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'hvd_bodedomedium';
    src: url('../fonts/HVD_Bodedo-webfont.eot');
    src: url('../fonts/HVD_Bodedo-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HVD_Bodedo-webfont.woff2') format('woff2'),
        url('../fonts/HVD_Bodedo-webfont.woff') format('woff'),
        url('../fonts/HVD_Bodedo-webfont.ttf') format('truetype'),
        url('../fonts/HVD_Bodedo-webfont.svg#hvd_bodedomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'arlekinoregular';
    src: url('../fonts/arlekino_regular-webfont.woff2') format('woff2'),
        url('../fonts/arlekino_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'jack_laneregular';
    src: url('../fonts/jacklane_2-webfont.woff2') format('woff2'),
        url('../fonts/jacklane_2-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'catamaranlight';
    src: url('../fonts/catamaran-light-webfont.woff2') format('woff2'),
        url('../fonts/catamaran-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'tradesmithround';
    src: url('../fonts/tradesmithround-webfont.woff2') format('woff2'),
         url('../fonts/tradesmithround-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


body {
    font-size: 18px;
    line-height: 1.7;
    color: #333333;
    background: #18A26A;
    /* background: -webkit-linear-gradient(top, #50c1ff 0, #34bcdd 24%, #26a0be 41%, #454c6c 100%) no-repeat*/
}

.bg_sky {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    /*position:fixed;*/
    table-layout: fixed;
    background: rgb(65, 51, 160);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgb(33, 24, 88) 0%, rgba(103, 72, 226, 1) 16%, rgba(73, 151, 229, 1) 32%, rgba(80, 193, 255, 1) 50%, rgba(80, 193, 255, 1) 87%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgb(33, 24, 88) 0%, rgba(103, 72, 226, 1) 16%, rgba(73, 151, 229, 1) 32%, rgba(80, 193, 255, 1) 50%, rgba(80, 193, 255, 1) 87%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgb(33, 24, 88) 0%, rgba(103, 72, 226, 1) 16%, rgba(73, 151, 229, 1) 32%, rgba(80, 193, 255, 1) 50%, rgba(80, 193, 255, 1) 87%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4133a0', endColorstr='#50c1ff', GradientType=0);
    /* IE6-9 */
}

.bg_sky1 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    /* margin: 3em auto;*/
    overflow: hidden;
    position: absolute;
    table-layout: fixed;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(65, 51, 160, 1) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, #18A26A 47%, #04a765 49%, 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(65, 51, 160, 0) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, rgba(24, 114, 22, 1) 47%, #18A26A 49%, #04a765 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(65, 51, 160, 0) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, rgba(24, 114, 22, 1) 47%, #18A26A 49%, #04a765 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004133a0', endColorstr='#187216', GradientType=0);
    /* IE6-9 */
}

.bg_sky3 {
    position: absolute;
    width: 100%;
    height: 100%;
}


#sun_bg {
    width: 200px;
    height: 200px;
    background-color: #F4E0BD;
    border-radius: 100px;
    position: absolute;
    right: 10%;
    top: 3%;
    z-index: 0
   -webkit-box-shadow: 0px 0px 47px 3px rgba(244,224,189,0.34); 
box-shadow: 0px 0px 47px 3px rgba(244,224,189,0.80);
}

.army_arrow {
    opacity: .3;
    width: 100px;
    left: 50%;
    position: absolute;
    margin: 300px auto auto;
    transform: translate(-45%, 0);
    border: 0;
    z-index: 2000
}

.flotte {
    display: block;
    margin: 20px auto auto;
    max-width: 700px;
    max-height: 50px;
    opacity: .7
}

#page {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.offcanvas #page {
    overflow: hidden;
    position: absolute
}

.offcanvas #page:after {
    -webkit-transition: 2s;
    -o-transition: 2s;
    transition: 2s;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 101;
    background: rgba(0, 0, 0, .7);
    content: ""
}

a {
    color: #fff;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

a:active,
a:focus,
a:hover {
    color: #fff
}

p {
    margin-bottom: 30px;
    line-height: 1.5;
}

figure,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #000;
    margin: 0 0 20px
}

::-webkit-selection {
    color: #fff;
    background: #FF9000
}

::-moz-selection {
    color: #fff;
    background: #FF9000
}

::selection {
    color: #fff;
    background: #FF9000
}

#jb-header,
.jb-cover {
    background-color: transparent;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(65, 51, 160, 1) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, rgba(72, 185, 145, 1) 47%, rgba(63, 177, 34, 1) 49%, 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(65, 51, 160, 0) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, rgba(24, 114, 22, 1) 47%, rgba(24, 114, 22, 1) 49%, rgba(24, 114, 22, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(65, 51, 160, 0) 0%, rgba(103, 72, 226, 0) 10%, rgba(73, 151, 229, 0) 27%, rgba(80, 193, 255, 0) 45%, rgba(76, 189, 200, 0) 46%, rgba(24, 114, 22, 1) 47%, rgba(24, 114, 22, 1) 49%, rgba(24, 114, 22, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004133a0', endColorstr='#187216', GradientType=0);
    /* IE6-9 */
}

.vehicules {
    max-width:1200px;
    width: 100%;
    position: relative;
    margin: -40px auto auto;
    z-index: 50
}


@media screen and (max-width:1400px) {
    .vehicules {
         max-width:1200px;        
    }
   
}

@media screen and (max-width:992px) {
    .vehicules {
        max-width: 600px
    }

    .army_arrow {
        margin-top: 180px
    }
}

@media screen and (max-width:768px) {
    .flotte {
        margin-top: 0;
        height: 20px
    }

    .vehicules_reduce {
        max-width: 350px;
        width: 100%;
        position: relative;
        margin: -20px auto auto;
        z-index: 50;
        display: block !important
    }

    .army_arrow {
        margin-top: 5px;
        opacity: .3;
        width: 50px
    }
}

@media screen and (max-width:380px) {
    header .container {
        padding: 0 !important
    }
}

.insert_coin {
    display: block;
    max-width: 120px;
    max-height: 90px;
    opacity: .7;
    right: 50px;
    position: absolute
}

#jb-header .overlay,
.jb-cover .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background:url(../images/bas.png) center repeat-x*/
}

#jb-header .display-t,
.jb-cover .display-t {
    width: 100%;
    display: table
}

#jb-header .display-tc,
.jb-cover .display-tc {
    display: table-cell;
    margin-top: 7%;
    vertical-align: middle
}

#jb-header .display-tc h1,
#jb-header .display-tc h2,
#jb-header .display-tc h3,
.jb-cover .display-tc h1,
.jb-cover .display-tc h2,
.jb-cover .display-tc h3 {
    padding: 0;
    color: #fff
}

#jb-header .display-tc h1 {
    margin-top: -15px;
    margin-bottom: 30px
}

.intro-contact{
    color:#ffffff;
}

#jb-header .display-tc h1 a,
.jb-cover .display-tc h1 a {
    text-decoration: none;
    color: #fff;
    background: -webkit-linear-gradient(top, #a2f1ff 20%, #fff 50%, #fff, #0aa1d8 50%, #d6ffff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    left: 0;
    right: 0
}

#baseline {
    margin-top: -10px;
    text-shadow: 1px 1px 3px rgba(73, 77, 74, .82)
}

#jb-header .display-tc h1 {
    position: relative;
    z-index: 500;
    font-family: goverregular;
    font-size: 80px;
    text-align: center
}

@media screen and (max-width:1400px) {    
    #jb-header .display-tc h1 {
        font-size:70px;
    }
}

h1:after {
    content: 'JErOME BErTHET';
    text-shadow: 0 0 0 #331F4B, 0 1px 0 #331F4B, 0 2px 0 #331F4B, 0 3px 0 #331F4B, 0 4px 0 #331F4B, 0 5px 0 #331F4B, 0 5px 0 #000, 0 6px 5px #331F4B;
    opacity: .7
}

.vehicules {
    margin-top: -30px
}

@media screen and (min-width:768px) {

    #jb-header .display-tc,
    .jb-cover .display-tc {
        height: 400px
    }
}

@media screen and (max-width:650px) {
    .list_info {
        display: block;
        max-width: 250px;
    }

    .info {
        margin: 0;
    }
}

@media screen and (min-width:650px) {
    .list_info {
        display: inline-block;
        /*max-width: 250px;*/
    }
}


@media screen and (max-width:768px) {
    .scan {
        margin-top: 25px;
        max-width: 180px;
        display: inline-block;
    }

    .scan img {
        vertical-align: inherit;
        padding-bottom: 8px;
    }

    #jb-header .display-tc h1,
    #jb-header .display-tc h1:after,
    .jb-cover .display-tc h1,
    .jb-cover .display-tc h1 a {
        font-size: 60px
    }

    #jb-header .display-tc h1 {
        margin-bottom: 30px
    }

    .vehicules {
        margin-top: -20px
    }

    #jb-header .display-tc,
    .jb-cover .display-tc {
        height: 400px
    }
}

@media screen and (max-width:600px) {

    #jb-header .display-tc h1,
    #jb-header .display-tc h1:after,
    .jb-cover .display-tc h1,
    .jb-cover .display-tc h1 a {
        font-size: 50px
    }
}

.block_scan {
    max-width: 300px;
    width: 100%;
    max-height: 300px;
    height: 100%;
}

.scanimg {
    max-width: 300px;
}

.planetecss1 {
    width: 140px;
    height: 140px;
    margin-left: -5%;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    position: absolute;
    margin-top: 15%;
}

.planetecss2 {
    width: 160px;
    height: 160px;
    margin-left: -10px;
    -moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
    padding: 5px;
    background: -moz-linear-gradient(top, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b1226', endColorstr='#000b1226', GradientType=0);
    /* IE6-9 */
}

.planetecss3 {
    width: 240px;
    height: 240px;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    position: absolute;
    margin-top: 30%;
    right: -8%;
}

.planetecss4 {
    width: 250x;
    height: 250px;
    margin-left: -1px;
    margin-top: -1px;
    -moz-border-radius: 150px;
    -webkit-border-radius: 150px;
    border-radius: 150px;
    padding: 20px;
    background: -moz-linear-gradient(top, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(11, 18, 38, 1) 0%, rgba(11, 18, 38, 0.99) 1%, rgba(11, 18, 38, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b1226', endColorstr='#000b1226', GradientType=0);
    /* IE6-9 */
    "

}

@media screen and (max-width:995px) {
    .scanimg {
        max-width: 250px;
    }
}

@media screen and (max-width:768px) {
    .scanimg {
        max-width: 200px;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {

    #jb-header .display-tc h1,
    #jb-header .display-tc h1:after,
    .jb-cover .display-tc h1,
    .jb-cover .display-tc h1 a {
        font-size: 60px
    }
}

#jb-header .display-tc h1 span,
.jb-cover .display-tc h1 span {
    padding: 4px 15px;
    position: relative
}

#jb-about {
    font-family: 'veteran_typewriterregular';
    font-size: 23px;
    /*background-image:url(../images/herbe.png)*/
    background: #04a765
}

#jb-work h2,
#jb-work h3 {
    font-family: zianregular
}

#jb-about h2 {
    font-family: veteran_typewriterregular;
}

#jb-skills {
    /*background-image: url(../images/space.png)*/
    background-color: #070d1f;
    
     background: -moz-linear-gradient(top, #070d1f 1%, #070d36 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #070d1f 1%, #070d36 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #070d1f 1%, #070d36 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e8e', endColorstr='#db1cc1', GradientType=0);
    /* IE6-9 */
    

}

#jb-work h2 {
    font-size: 70px;
    text-shadow: 0 0 .2em #ff15bf;
    margin-top: 90px;
}

#jb-work h3 {
    color: #84699b;
    padding: 10px 0;
    font-weight: lighter;
    font-size: 17px
}

.modal.and.carousel {
    position: fixed
}

.top_paper_board {
    max-width: 350px;
    display: block;
    margin: auto
}

.paper_board_texture {
    border-top: 4px solid #5f4b32;
    border-radius: 15px;
    max-width: 1100px;
    background-color: #463826;
    margin: -40px auto 40px;
    background-image: url(../images/bois.svg);
    padding: 30px 10px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
    text-align: justify;
        box-shadow: -5px 5px 15px 15px rgba(0, 0, 0, 0.1);
}

.plage {
    background-image: url(../images/plage2.gif);
    height: 130px;
    background-repeat: repeat-x
}

.timeline_resume {
    /*background-image: url(../images/timeline.svgz);*/
    background-repeat: no-repeat;
    margin: auto;
    background-size: contain;
    background-size: 70%;
    background-position: right top;
}

#nuages1 {
    background: url(../images/nuages.png) repeat-x #39b7ff;
    height: 134px
}

#nuages2 {
    background: url(../images/nuages3.png) repeat-x #070d1f;
    height: 150px
}

.logo_ah,
.logo_babayaga,
.logo_dronevolt,
.logo_estampille,
.logo_pharmodel,
.logo_stedbis,
.logo_westwing,
.logo_younited {
    /*background-color: #fff*/
}

#fusee_container {
    width: 200px;
    height: 200px;
    margin: auto;
    left: 0;
    right: 0;
    position: absolute
}

#fusee_image {
    width: 200px;
    height: 200px;
    margin-top: -170px;
    z-index: 0
}

#competence_title {
    margin-top: 50px;
    color: #fff;
    opacity: .7;
    font-family: 'moon_2.0light';
    font-size: 60px;
    text-transform: uppercase;
}

.logo_jemsgroup {
    background-image: url(../images/jemsgroup.svgz)
}
.logo_ah {
    background-image: url(../images/ah.svgz)
}

.logo_dronevolt {
    background-image: url(../images/dronevolt.svgz)
}

.logo_pharmodel {
    background-image: url(../images/pharmodel.svgz)
}

.logo_westwing {
    background-image: url(../images/westwing.svgz)
}

.logo_younited {
    background-image: url(../images/younited.svgz)
}

.logo_stedbis {
    background-image: url(../images/sted.svgz)
}

.logo_estampille {
    background-image: url(../images/estampille.svgz)
}

.logo_babayaga {
    background-image: url(../images/babayaga.svgz)
}

.logo_quicksign {
    background-image: url(../images/quicksign.svgz)
}

.work:hover {
    background-image: none;
     
}


#arbres {
    background: url(../images/arbres.svg) top repeat-x #1A2040;
    position: absolute;
    height: 100px
}

.btn_portfolio {
    max-width: 250px;
    max-height: 100px;
    border: 1px solid #db1cc1;
    margin: 30px auto auto;
    color: #db1cc1;
    text-align: center;
    padding:10px;
    border-radius:50px;
}

.btn_portfolio:hover {
    max-width: 250px;
    max-height: 100px;
    border: 1px solid #db1cc1;
    margin: 30px auto auto;
    color: #fff;
    background: #ed1e8e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ed1e8e 1%, #db1cc1 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e8e', endColorstr='#db1cc1', GradientType=0);
    /* IE6-9 */
    text-align: center;
    padding:10px;
    transition: .6s;
}


.btn_portfolio1 {
    margin: auto;
    text-align: center;
    padding: 15px 10px 15px;
    border-width: 2px;
    /*border-style: outset;
    border-color: buttonface;
    border-image: initial;*/
    background: #ed1e8e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ed1e8e 1%, #db1cc1 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e8e', endColorstr='#db1cc1', GradientType=0);
    /* IE6-9 */
    border-radius: 3px;
    color: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    font-family: 'moon_2.0regular', Helvetica, Arial;
    font-size: 20px;
    text-transform: uppercase;

}

.btn_portfolio1:hover {
    background-color: #c50264;
}

.btn_portfolio1:hover {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}


#jb-header .display-tc h2,
.jb-cover .display-tc h2 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 30px
}

#jb-header .display-tc h3,
.jb-cover .display-tc h3 {
    font-size: 14px;
    margin-top: -20px
}

@media screen and (max-width:768px) {

    #jb-header .display-tc h1 span:before,
    .jb-cover .display-tc h1 span:before {
        top: 28px;
        width: 20px;
        height: 3px;
        margin-left: -15px
    }

    #jb-header .display-tc h1 span:after,
    .jb-cover .display-tc h1 span:after {
        top: 28px;
        width: 20px;
        height: 3px;
        margin-right: -15px
    }

    #jb-header .display-tc h3,
    .jb-cover .display-tc h3 {
        font-size: 14px
    }
}

#jb-header .display-tc .profile-thumb,
.jb-cover .display-tc .profile-thumb {
    background-size: cover !important;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 200px;
    width: 200px;
    margin: 0 auto 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}

#jb-header .display-tc .jb-social-icons li a,
.jb-cover .display-tc .jb-social-icons li a {
    color: #fff
}

#jb-header .display-tc .jb-social-icons li a i,
.jb-cover .display-tc .jb-social-icons li a i {
    font-size: 30px
}

#jb-features {
    background: url(../images/nuages2.png)
}

#jb-features h2 {
    color: #2192E8
}

#jb-features .services-padding {
    padding: 7em 0;
    z-index: 3000;
    position: relative
}

#jb-features .feature-left {
    margin-bottom: 40px
}

@media screen and (max-width:992px) {
    #jb-features .feature-left {
        margin-bottom: 30px
    }
}

#jb-features .feature-left .icon {
    display: table;
    text-align: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background-image: url(../images/bg_icon.png)
}

#jb-features .feature-left .feature-copy,
.info li {
    width: 100%
}

#jb-features .feature-left .icon i {
    font-size: 50px;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
    color: #fff !important
}

#jb-features .feature-left h3 {
    /*font-size:24px;*/
    font-weight: 400;
    color: #2192E8
}

#jb-features .feature-left p {
    font-size: 16px;
    /*color: #2192E8;*/
}

#jb-features .feature-left p:last-child {
    margin-bottom: 0
}

#jb-features .feature-left p a {
    color: #000 !important
}

.ui {
    font-size: 32px;
}

.jb-resume @media screen and (max-width:768px) {

    #jb-about,
    #jb-blog,
    #jb-contact,
    #jb-pricing,
    #jb-resume,
    #jb-skills,
    #jb-started,
    #jb-work {
        padding: 3em 0
    }
}

.jb-bg-dark {
    background: #4A3958
}

.jb-bg-dark .jb-heading h2 {
    color: #fff !important
}

.info {
    margin: 0 0 0 50px;
    padding: 0;
    float: left
}

@media screen and (max-width:768px) {
    .info {
        /*margin-bottom:1em;margin-top:1em*/
        /*margin-top:20px;*/
    }
}

.info li {
    float: left;
    list-style: none;
    padding: 5px 0
}

.info li:first-child {
    padding-top: 0
}

.info li .first-block {
    font-size: 15px;
    width: 25%;
    float: left;
    color: #999
}

.info li .second-block {
    font-size: 25px;
    color: rgba(0, 0, 0, .8);
    font-weight: 700
}

#jb-about .jb-social-icons li a i,
.jb-social-icons li a i {
    font-size: 20px
}

.jb-social-icons {
    margin: 0;
    padding: 0
}

.jb-social-icons li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1
}

.jb-social-icons li a {
    zoom: 1;
    display: inline;
    color: #FF9000;
    padding-left: 10px;
    padding-right: 10px
}

#jb-about .jb-social-icons {
    margin: 0;
    padding: 0
}

#jb-about .jb-social-icons li {
    padding: 0;
    list-style: none;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1
}

#jb-about .jb-social-icons li a {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    color: #fff;
    background: #2F3C4F;
    padding: 10px 10px 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px
}

#jb-about .jb-social-icons li a:hover {
    background: #FF9000
}

.block_about {
    background-color: #fff;
    margin: 0 auto;
    padding: 40px 35px 10px;
    max-width: 950px;
}

.jb-heading.jb-heading-sm {
    margin-bottom: 2em
}

.jb-heading h2 {
    font-size: 60px;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #052238;
}

.title_about {
    font-family: 'catamaranregular';
}

.title_features {
    font-family: 'aileronsregular';
}

.title_feautres2 {
    font-family: 'catamaranregular';
}

.jb-heading p {
    font-size: 18px;
    line-height: 1.5;
    color: #828282
}

.jb-heading span {
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 2px
}

.timeline2 {
    background-image: url(../images/baleine.svgz);
    background-repeat: no-repeat;
}

.timeline {
    list-style: none;
    padding: 20px 0;
    position: relative;
    z-index: 2;
}

.timeline:before {
    top: 20px;
    bottom: 0;
    position: absolute;
    content: " ";
    background-color: #e6e6e6;
    left: 50%;
    margin-left: 0
}

@media screen and (max-width:480px) {
    .timeline:before {
        margin-left: -64px
    }
}

@media screen and (max-width:650px) {
    .info {
        margin: 0;
    }
}

@media screen and (max-width:768px) {
    .timeline:before {
        margin-left: -64px
    }

    .timeline .timeline-heading {
        margin-bottom: 30px
    }

    .insert_coin {
        display: none
    }

    #jb-header h1 {
        margin-bottom: 50px;
        margin-top: -60px;
        position: absolute;
        top: 1%
    }

    #jb-header h3 {
        color: #2f3281
    }

    #jb-header .vehicules {
        margin-top: 10px
    }

    .second-block {
        display: block
    }

    .desc,
    .first-block,
    .timeline-badge {
        display: none !important
    }

    .jb-about {
        text-align: center
    }

    .block_about {
        background-color: #fff;
        margin: 0 10px;
        padding: 10px
    }

    .timeline-panel,
    .timeline > li.timeline-inverted > .timeline-panel,
    ul.timeline > li > .timeline-panel {
        float: none !important
    }

    #planetes {
        max-height: 150px !important
    }

    #nuages1 {
        height: 100px !important
    }
}

.timeline .timeline-heading > div h3 {
    border-top: 2px #fff solid;
    display: inline-block;
    padding: 5px 12px 8px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 400;
    background: url(../images/tablette.png) #e6e6e6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 20px;
    color: #186DA0;
    opacity: 0.8;
}

.list_info {
    padding: 0 0 0 20px
}

@media screen and (max-width:768px) {
    .list_info {
        padding: 10px 0 0 20px
    }

    .timeline .timeline-heading > div h3 {
        margin-bottom: 0;
        margin-top: 25px
    }
}

.timeline > li {
    margin-bottom: 20px;
    position: relative
}

@media screen and (max-width:768px) {
    .timeline > li {
        margin-bottom: 1em
    }
}

.timeline > li:after,
.timeline > li:before {
    content: " ";
    display: table
}

.timeline > li > .timeline-panel {
    width: 45%;
    float: left;
    margin-bottom: 0;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px
}

@media screen and (max-width:768px) {
    .timeline > li > .timeline-panel {
        width: 85% !important;
        margin: 20px auto 20px !important;
    }
}

@media screen and (max-width:480px) {
    .timeline > li > .timeline-panel {
        width: 75% !important
    }

    .timeline > li > .timeline-panel:before {
        top: 30px
    }

    .timeline > li > .timeline-panel:after {
        top: 31px
    }
}

.formation {
    text-align: center;
    margin: 100px auto 10px;
    display: block;
    max-width: 800px;
}

.timeline > li > .timeline-badge {
    color: #fff;
    width: 100px;
    height: 100px;
    line-height: 50px;
    font-size: 1.6em;
    text-align: center;
    position: absolute;
    font-weight: 800;
    left: 47.5%;
    margin-left: -21px;
    z-index: 100;
    display: table;
    background: url(../images/rose.svg)
}

.btn,
.company {
    font-weight: 400
}

@media screen and (max-width:992px) {
    .timeline > li > .timeline-badge {
        display: none;
    }

    .formation,
    .timeline > li > .timeline-panel {
        margin: 20px 0
    }
}

.timeline > li > .timeline-badge i {
    display: table-cell;
    vertical-align: middle;
    height: 44px;
    font-size: 18px
}

.chart span strong,
.company {
    display: block
}

.timeline > li.timeline-unverted {
    text-align: right
}

@media screen and (max-width:768px) {
    .timeline > li > .timeline-badge {
        margin-left: -10px !important
    }

    .timeline > li.timeline-unverted {
        text-align: left
    }
}

.chart,
.gototop a {
    text-align: center
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto
}

.timeline-title {
    font-weight: 400;
    margin-top: 0;
    color: #fff;
    font-family: 'catamaranregular';
    font-size: 40px;
}

.company {
    margin-bottom: 20px;
    font-size: 16px;
    color: #fff;
    Opacity: .8
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0
}

.timeline-body > p + p {
    margin-top: 5px
}

.timeline-body {
    color: #052238
}

.timeline-body p {
    font-family: 'catamaranlight';
    font-size: 22px;
}


.btn_envoi:hover {
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.btn_envoi {
    border: none;
    border-radius: 50px;
    color: #fff;
    padding: 10px 10px 10px;

    background: #ed1e8e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ed1e8e 1%, #db1cc1 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ed1e8e 1%, #db1cc1 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e8e', endColorstr='#db1cc1', GradientType=0);
    /* IE6-9 */
    border-radius: 3px;
    color: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    /*font-family: 'moon_2.0regular', Helvetica, Arial;*/
    font-size: 20px;
    text-transform: uppercase;
}

@media (max-width:992px) {
    ul.timeline:before {
        left: 90px
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 200px);
        width: -moz-calc(100% - 200px);
        width: -webkit-calc(100% - 200px);
        float: NONE !important;
        text-align: center;
        display: block;
        margin: 20px auto;
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px
    }

    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto
    }
}

.chart span {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
    margin-top: -20px;
    width: 100%;
    margin-left: 5px
}

.chart {
    position: relative;
    display: inline-block;
    width: 110px;
    height: 110px;
    margin-top: 50px;
    margin-bottom: 50px;
    color: #fff;
    font-size: 15px
}

.chart canvas {
    position: absolute;
    top: 0;
    left: 0
}

.work {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 300px;
    width: 100%;
    display: table;
    max-width: 350px;
margin: auto;
}

#planetes {
    max-height: 300px
}

@media screen and (max-width:480px) {
    .work {
        height: 270px
    }
}

.work .desc {
    display: table-cell;
    vertical-align: middle;
    height: 270px;
    /*background: #fff;*/
    opacity: 0;
    -webkit-transition: .1s;
    -o-transition: .1s;
    transition: .1s
}

.work .desc h3 {
    font-size: 20px;
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
}

.work .desc span {
    display: block;
    color: #999;
    font-size: 14px;
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
}

.btn-outline,
.jb-blog .blog-text {
    -webkit-transition: .3s;
    -o-transition: .3s
}

@media screen and (max-width:768px) {
    .work .desc {
        opacity: 1;
        background: rgba(255, 255, 255, .6)
    }

    .work .desc h3,
    .work .desc span {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .jb-blog {
        width: 100%
    }
}

.work:hover .desc {
    opacity: 1
}

.work:hover .desc h3,
.work:hover .desc span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

#jb-started {
    border-bottom: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    float: left;
    width: 100%
}

#jb-started .jb-heading {
    margin-bottom: 0
}

#jb-started .jb-heading h2 {
    color: #fff;
    margin-bottom: 20px !important
}

#jb-started .jb-heading p {
    color: rgba(255, 255, 255, .8)
}

#jb-started .btn {
    height: 54px;
    border: none !important;
    background: #fff;
    color: #FF9000;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 400;
    padding-left: 50px;
    padding-right: 50px
}

.jb-blog {
    width: 100%;
    float: left;
    margin-bottom: 40px
}

.jb-blog .blog-bg {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 300px
}

@media screen and (max-width:768px) {
    .jb-blog .blog-bg {
        height: 400px
    }
}

@media screen and (max-width:480px) {
    .jb-blog .blog-bg {
        height: 270px
    }
}

.jb-blog .blog-text {
    margin-bottom: 30px;
    position: relative;
    width: 100%;
    padding: 30px;
    float: left;
    background: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .06);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .06);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .06);
    transition: .3s
}

.jb-video .overlay,
.gototop {
    -webkit-transition: .5s;
    -o-transition: .5s
}

@media screen and (max-width:768px) {
    .jb-blog .blog-text {
        padding: 10px
    }
}

.jb-blog .blog-text span {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 18px !important;
    color: rgba(0, 0, 0, .3)
}

.jb-blog .blog-text .stuff li:last-child a,
.jb-blog .blog-text h3 a {
    color: #000
}

.jb-blog .blog-text .stuff {
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(0, 0, 0, .05)
}

.jb-blog .blog-text .stuff li {
    list-style: none;
    display: inline-block;
    margin-left: 10px
}

@media screen and (max-width:768px) {
    .jb-blog .blog-text .stuff li {
        font-size: 14px
    }
}

.jb-blog .blog-text .stuff li:first-child {
    margin-left: 0
}

.jb-blog .blog-text .stuff li:last-child {
    float: right
}

.jb-blog .blog-text .stuff li:last-child i {
    padding-right: 0;
    padding-left: 10px
}

.jb-blog .blog-text .stuff li i {
    font-size: 14px;
    padding-right: 5px
}

.jb-blog .blog-text h3 {
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1.5
}

#jb-consult #email,
#jb-consult #nom,
#jb-consult #objet {
    border-radius: 50px;
}

#jb-consult {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    width: 100%;
    float: left;
    background-color: #040717;
    z-index: 1000;
    position: relative;
}

#jb-consult .choose,
#jb-consult .video {
    display: inline-block
}

@media screen and (max-width:768px) {

    #jb-consult .choose,
    #jb-consult .video {
        width: 100% !important
    }
}

#jb-consult .video {
    width: 50%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap
}

#jb-consult .choose {
    width: 50%;
    padding: 4em
}

@media screen and (max-width:768px) {
    #jb-consult .video {
        display: none
    }

    #jb-consult .choose {
        width: 100%;
        padding: 4em 1em
    }
}

@media screen and (max-width:992px) {
    .jb-video {
        height: 450px
    }
}

.jb-video .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .1);
    transition: .5s
}

#forest {
    background: url(../images/mountains.svgz) repeat-x #4A3958;
}

@media screen and (max-width: 768px) {
    .forest {
        max-height: 25px !important;
    }
}

#jb-footer {
    padding: 0 0 40px;
    float: left;
    text-align: center;
    width: 100%;
    /*background-color: #11162c;*/
}

#jb-footer p:last-child {
    margin-bottom: 0;
    margin-top: 20px;
}

.contact-info {
    margin-bottom: 4em;
    padding: 0
}

.contact-info li {
    list-style: none;
    margin: 0 0 20px;
    position: relative;
    padding-left: 40px;
    color: #000
}

.contact-info li i {
    position: absolute;
    top: .3em;
    left: 0;
    font-size: 22px;
    color: rgba(0, 0, 0, .3)
}

.contact-info li a {
    color: #000
}

#contact_title {
    color: #fff;
    opacity: .8;
    font-family: 'moon_2.0light';
    margin-top: 20px;
    font-size: 50px;
}


.form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px
}

.form-control:active,
.form-control:focus {
    border: 2px solid rgba(0, 0, 0, .8)
}

input[type=text] {
    height: 50px
}

.form-group {
    margin-bottom: 30px
}

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

@media screen and (max-width:768px) {
    #map {
        height: 200px
    }
}

.gototop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 5000;
    opacity: 0;
    visibility: hidden;
    transition: .5s
}

.gototop.active {
    opacity: 0.6;
    visibility: visible
}

.js-gotop {
    width: 50px;
    height: 50px;
    display: table;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%
}

.gototop a i {
    height: 50px;
    display: table-cell;
    vertical-align: middle
}

.btn {
    margin-right: 4px;
    margin-bottom: 4px;
    font-family: "robotomono ", Arial, serif;
    font-size: 16px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    border-radius: 30px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding: 8px 20px
}

.btn.btn-md {
    padding: 8px 20px !important
}

.btn.btn-lg {
    padding: 18px 36px !important
}

.btn:active,
.btn:focus,
.btn:hover {
    box-shadow: none !important;
    outline: 0 !important
}

.btn-outline:active,
.btn-outline:focus,
.btn-outline:hover,
.form-control {
    box-shadow: none
}

.btn-primary {
    background: #FF9000;
    color: #fff;
    border: 2px solid #FF9000
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
    background: #ff9b1a !important;
    border-color: #ff9b1a !important
}

.btn-primary.btn-outline {
    background: 0 0;
    color: #FF9000;
    border: 2px solid #FF9000
}

.btn-primary.btn-outline:active,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:hover {
    background: #FF9000;
    color: #fff
}

.btn-success {
    background: #5cb85c;
    color: #fff;
    border: 2px solid #5cb85c
}

.btn-success:active,
.btn-success:focus,
.btn-success:hover {
    background: #4cae4c !important;
    border-color: #4cae4c !important
}

.btn-success.btn-outline {
    background: 0 0;
    color: #5cb85c;
    border: 2px solid #5cb85c
}

.btn-success.btn-outline:active,
.btn-success.btn-outline:focus,
.btn-success.btn-outline:hover {
    background: #5cb85c;
    color: #fff
}

.btn-info {
    background: #5bc0de;
    color: #fff;
    border: 2px solid #5bc0de
}

.btn-info:active,
.btn-info:focus,
.btn-info:hover {
    background: #46b8da !important;
    border-color: #46b8da !important
}

.btn-info.btn-outline {
    background: 0 0;
    color: #5bc0de;
    border: 2px solid #5bc0de
}

.btn-info.btn-outline:active,
.btn-info.btn-outline:focus,
.btn-info.btn-outline:hover {
    background: #5bc0de;
    color: #fff
}

.btn-warning {
    background: #f0ad4e;
    color: #fff;
    border: 2px solid #f0ad4e
}

.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover {
    background: #eea236 !important;
    border-color: #eea236 !important
}

.btn-warning.btn-outline {
    background: 0 0;
    color: #f0ad4e;
    border: 2px solid #f0ad4e
}

.btn-warning.btn-outline:active,
.btn-warning.btn-outline:focus,
.btn-warning.btn-outline:hover {
    background: #f0ad4e;
    color: #fff
}

.btn-danger {
    background: #d9534f;
    color: #fff;
    border: 2px solid #d9534f
}

.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover {
    background: #d43f3a !important;
    border-color: #d43f3a !important
}

.btn-danger.btn-outline {
    background: 0 0;
    color: #d9534f;
    border: 2px solid #d9534f
}

.btn-danger.btn-outline:active,
.btn-danger.btn-outline:focus,
.btn-danger.btn-outline:hover {
    background: #d9534f;
    color: #fff
}

.btn-outline {
    background: 0 0;
    border: 2px solid gray;
    font-size: 16px;
    transition: .3s
}

.btn.with-arrow {
    position: relative;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.btn.with-arrow i {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -8px;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

.btn.with-arrow:hover {
    padding-right: 50px
}

.btn.with-arrow:hover i {
    color: #fff;
    right: 18px;
    visibility: visible;
    opacity: 1
}

#message {
    border-radius: 30px;
}

.form-control {
    background: 0 0;
    height: 54px;
    font-size: 18px;
    font-weight: 300;
    background-color: rgba(250, 250, 250, 1);
    color: #1A2040
}

.form-control:active,
.form-control:focus {
    outline: 0;
    box-shadow: none;
    border-color: #FF9000
}

.row-pb-md {
    padding-bottom: 4em !important
}

.row-pb-sm {
    padding-bottom: 2em !important
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important
}

.col-padding {
    padding: 20px !important;
    margin: 0 !important
}

.jb-loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../images/loader.gif) center no-repeat #fff
}

.js .animate-box {
    opacity: 0
}

.timeline .timeline-heading > div .title_timeline {
    font-size: 13px;
}

/**/

/*Header*/

.nuage1 {
    width: 10%;
    height: auto;
    position: absolute;
    margin-top: 2%;
    left: -150%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike;
    -moz-animation: linear marqueelike 80s;
    -o-animation: linear marqueelike 80s;
    -ms-animation: linear marqueelike 80s;
    animation: linear marqueelike 80s;
}

.nuage2 {
    width: 10%;
    height: auto;
    position: absolute;
    margin-top: 5%;
    left: -150%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike1;
    -moz-animation: linear marqueelike1 70s;
    -o-animation: linear marqueelike1 70s;
    -ms-animation: linear marqueelike1 70s;
    animation: linear marqueelike1 70s;
}

.nuage3 {
    width: 10%;
    height: auto;
    position: absolute;
    margin-top: 2%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike2 infinite;
    -moz-animation: linear marqueelike2 70s infinite;
    -o-animation: linear marqueelike2 70s infinite;
    -ms-animation: linear marqueelike2 70s infinite;
    animation: linear marqueelike2 70s infinite;

}

.nuage4 {
    width: 10%;
    height: auto;
    position: absolute;
    /*left:120%;*/
    margin-top: 7%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike3 infinite;
    -moz-animation: linear marqueelike3 60s infinite;
    -o-animation: linear marqueelike3 60s infinite;
    -ms-animation: linear marqueelike3 60s infinite;
    animation: linear marqueelike3 60s infinite;
}

.nuage5 {
    width: 10%;
    height: auto;
    position: absolute;
    margin-top: 3%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike4 infinite;
    -moz-animation: linear marqueelike4 60s infinite;
    -o-animation: linear marqueelike4 60s infinite;
    -ms-animation: linear marqueelike4 60s infinite;
    animation: linear marqueelike4 60s infinite;

}

.nuage6 {
    width: 10%;
    height: auto;
    position: absolute;
    /*left:105%;*/
    margin-top: 10%;
    display: block;
    text-align: left;
    -webkit-animation: linear marqueelike5 infinite;
    -moz-animation: linear marqueelike5 50s infinite;
    -o-animation: linear marqueelike5 50s infinite;
    -ms-animation: linear marqueelike5 50s infinite;
    animation: linear marqueelike5 50s infinite;
}

.bg-header-army {
    position: absolute;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center;
    background-image: url('../images/bas.svgz');
    background-repeat: no-repeat;
}

/* About*/

.padding_paperboard {
    padding: 10px;
}

/* Resume */

.jb-bg-color {
    background: #39b7ff;
}

.timeline-title, .company{
    
    color:#052238;
    
}
.container_boat_island {
    position: absolute;
    width: 100%;
}

.island {
    position: absolute;
    right: 5%;
    width: 250px;
    z-index: 1;
}

.boat {
    position: absolute;
    right: 20%;
    width: 300px;
}

@media screen and (max-width:1000px) {
    .boat {
        width: 150px;
    }

    .island {
        position: absolute;
        right: 5%;
        width: 150px;
    }
}

@media screen and (max-width:640px) {
    .title_about {
        font-size
    }
}

@media screen and (max-width:1280px) {
    .img_martien {
        display:none;
    }

}

@media screen and (max-width:1700px) {
    .img_martien {
        width:400px;
    }

}


@media screen and (min-width:1700px) {
    .img_martien {
        width:600px;
    }

}


.container_title_timeline {
    margin-top: 40px;
}

/*skills*/

.container_bg_skills {
    position: absolute;
    width: 100%;
}

.bg_planet1 {
    position: absolute;
    right: -5%;
    width: 150px;
}

.bg_planet2 {
    position: absolute;
    left: 5%;
    width: 250px;
}

.bg_etoile3 {
    position: absolute;
    right: 20%;
    width: 170px;
}

planetes_size {
    width: 100%;
    height: 100%;
}

/* Work*/

.container_work {
    padding-bottom: 60px;
    position: relative;
    z-index: 5000;
}

.container_btn_portfolio {
    text-align: center;
    margin-top: 30px;
}

.container_mountains {
    max-height: 350px;
    position: relative;
    z-index: 0;
}

.img_mountain {
    width: 100%;
    height: 100%;
    z-index: 0;
}

.forest {
    max-height: 100px;
    z-index: 100;
    position: relative;
}

.img_forest {
    width: 100%;
    height: 100%;
    z-index: 100;
    position: relative
}

.section_jb_consult {
    background-color: #090c19;
    text-align: center;
}

/*Footer*/

#contact span {
    color: #ffffff;
}

.jb_footer {
    background-color: #040717;
    font-weight: 200;
    text-align: center;
}

.send-mail {
    text-align: center;
}


.img_martien{
    position : absolute;
   /* width: 450px;*/
    right:4%;
    bottom:0px;
    z-index:1000;
}

.luciole{
    position:absolute;
    
 width: 5px;
    height: 5px;
    border-radius: 20px;
    background: #ffd93b;
    opacity:0.5;
    margin:10px auto;
    -webkit-box-shadow: 0px 0px 47px 3px rgba(244,224,189,0.34); 
box-shadow: 0px 0px 47px 3px rgba(244,224,189,0.80);
}


.image-clignote  {
     top: 90%;
    left: 4%;
   animation-duration: 8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote2  {
    top: 5%;
    left: 70%;
   animation-duration: 9s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote3  {
    top: 2%;
    left: 2%;
   animation-duration: 6s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote4  {
    top: 82%;
    left: 95%;
   animation-duration: 7s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote5  {
    top: 10%;
    left: 10%;
   animation-duration: 8s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote6  {
    top: 50%;
    left: 30%;
   animation-duration: 10s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote7  {
    top: 85%;
    left: 25%;
   animation-duration: 3s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.image-clignote8  {
    top: 60%;
    left: 40%;
   animation-duration: 5s;
   animation-name: clignoter;
   animation-iteration-count: infinite;
   transition: none;
}

.footer{
    color:#24fc4e;
    font-weight: 200;
    font-family: "PTRootUIRegular", Arial, serif;
}

@keyframes clignoter {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

@media screen and (max-width:995px) {
    .bg_planet2 {
        margin-top: 100%;
    }

    .bg_planet1 {
        max-width: 100px;
    }

    .bg_etoile3 {
        max-width: 70px;
    }
}

@media screen and (max-width:450px) {
    #jb-about {
        font-size: 23px;
    }
    .island {
        display: none;
    }
    .timeline-title{
        font-size:25px;
    }
    .planetecss4{
        display:none;
    }
     .planetecss3{
        display:none;
    }
    #competence_title{
        font-size:40px;
    }
    .title-mission{
        font-size:50px;
    }
}


/*btn*/
/*
 #ed1e8e 1%, #db1cc1 */
 

.wrapper {
    padding: 1.5rem 0;
filter: url('#goo');
margin: auto;
    margin-top: auto;

text-align:center;
margin-top: 30px;

}

.button {
    display: inline-block;
    text-align: center;
    background: #ed1e8e;
    /* Old browsers */
    background: -moz-linear-gradient(left, #ed1e8e 1%, #db1cc1 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ed1e8e 1%, #db1cc1 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ed1e8e 1%, #db1cc1 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1e8e', endColorstr='#db1cc1', GradientType=0);
    /* IE6-9 */
    color: #ffffff;    
    padding: 1.18em 1.32em 1.03em;
    line-height: 1;
    border-radius: 1em;
    position: relative;
    min-width: 8.23em;
    text-decoration: none;
    /*font-family: zianregular, Arial, serif;*/
    font-size: 22px;
    /*letter-spacing: 3px;*/
    text-shadow: 0px 0px 1px white;
}

.button:before,
.button:after {
    width: 4.4em;
    height: 2.95em;
    position: absolute;
    content: "";
    display: inline-block;
    background: #ed1e8e;
    border-radius: 50%;
    transition: transform 1s ease;
    transform: scale(0);
    z-index: -1;
}

.button:before {
    top: -25%;
    left: 20%;
}

.button:after {
    bottom: -25%;
    right: 20%;
}

.button:hover:before,
.button:hover:after {
    transform: none;
}