@font-face {
    font-family: 'source_sans_proregular';
    src: url('SourceSansPro-Regular-webfont.eot');
    src: url('SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('SourceSansPro-Regular-webfont.woff2') format('woff2'), url('SourceSansPro-Regular-webfont.woff') format('woff'), url('SourceSansPro-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_problack';
    src: url('SourceSansPro-Black-webfont.eot');
    src: url('SourceSansPro-Black-webfont.eot?#iefix') format('embedded-opentype'), url('SourceSansPro-Black-webfont.woff2') format('woff2'), url('SourceSansPro-Black-webfont.woff') format('woff'), url('SourceSansPro-Black-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_probold';
    src: url('SourceSansPro-Bold-webfont.eot');
    src: url('SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('SourceSansPro-Bold-webfont.woff2') format('woff2'), url('SourceSansPro-Bold-webfont.woff') format('woff'), url('SourceSansPro-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'source_sans_prolight';
    src: url('SourceSansPro-Light-webfont.eot');
    src: url('SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'), url('SourceSansPro-Light-webfont.woff2') format('woff2'), url('SourceSansPro-Light-webfont.woff') format('woff'), url('SourceSansPro-Light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#bloc_page {
    margin: 0px auto;
    max-width: 1024px;
}

img {
    display: inline-block;
}

p {
    font-family: 'source_sans_proregular', arial, verdana;
    color: #555;
    font-size: 0.8em;
}

h1 {
    font-family: 'source_sans_prolight', arial, verdana;
    /*color: rgb(50, 78, 11);*/
    color: #333;
    font-size: 1.3em;
}

h4 {
    font-family: 'source_sans_prolight', arial, verdana;
    color: #555;
    font-size: 0.8em;
}

h3 {
    font-family: 'source_sans_prolight', arial, verdana;
    color: #555;
    font-size: 0.9em;
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #fff;
    background: url('fondGRIS.gif') left fixed no-repeat;
    background-size: cover;
}

a {
    text-decoration: none;
    color: #111;
    font-size: 1em;
}

.email {
    font-family: 'source_sans_problack', arial, verdana;
} 

a:hover {
    text-decoration: none;
    color: #666;
    background-color: white;
}

#transform {
    width: 25px;
    height: 25px;
    margin-top: 2rem;
    transform: rotate(45deg);
    background: #8DB242;
    position: absolute;
    -webkit-animation: myfirst 5s infinite linear;
    /* Chrome, Safari, Opera */
    /*-webkit-animation-direction: alternate;*/
    /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite linear;
    /*animation-direction: alternate;*/
}

#transform2 {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background: #8DB242;
    position: absolute;
    -webkit-animation: myfirst 3s infinite;
    /* Chrome, Safari, Opera */
    /*-webkit-animation-direction: alternate;*/
    /* Chrome, Safari, Opera */
    animation: myfirst 3s infinite;
    /*animation-direction: alternate;*/
}

.nav1 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: #324e0b;
    position: absolute;
    top:-10px;
    left:80px;
    z-index: 8;
}

.nav2 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: #8DB242;
    position: absolute;
    top:60px;
    left:20px;
    z-index: 9;
}

.nav2:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.nav3 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: #ff8333;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    position: absolute;
    top:-10px;
    left:50px;
    z-index: 8;
}

.nav3:hover {
    opacity: 1;
}

.nav4 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: orange;
    position: absolute;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    top:-10px;
    left:-10px;
    z-index: 7;
}
.nav4:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
    
}

.nav5 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: #ac67ff;
    position: absolute;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    top:60px;
    left:-10px;
    z-index: 6;
}

.nav6 {
    width: 61px;
    height: 61px;
    transform: rotate(45deg);
    background: #6e22d5;
    position: absolute;
    top:130px;
    left:-40px;
    z-index: 1;
}

.nav7a {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    position: absolute;
    top:-10px;
    left:-40px;
    z-index: 4;
}

.nav7b {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    position: absolute;
    top:-10px;
    left:-10px;
    z-index: 4;
}

.nav7c {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    position: absolute;
    top:-10px;
    left:20px;
    z-index: 4;
}

.nav7d {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    position: absolute;
    top:-10px;
    left:50px;
    z-index: 4;
}

.nav7e {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    position: absolute;
    top:-10px;
    left:80px;
    z-index: 4;
}

.nav7f {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, white);
    /*border-color: linear-gradient(#666, transparent);*/
    position: absolute;
    top:-10px;
    left:110px;
    z-index: 4;
}

.nav8a {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, transparent);
    /*border-color: linear-gradient(#666, transparent);*/
    position: absolute;
    top:60px;
    left:-10px;
    z-index: 4;
}

/*.nav8b {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: linear-gradient(#666, red);
    position: absolute;
    top:60px;
    left:20px;
    z-index: 4;
}*/

.nav8c {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 0.5px solid;
    border-color: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    position: absolute;
    top:60px;
    left:50px;
    z-index: 4; 
}

.nav8d {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

    position: absolute;
    top:60px;
    left:140px;
    z-index: 4;
}

.nav8e {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid;
    border-color: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));    
    position: absolute;
    top:60px;
    left:170px;
    z-index: 4;
}

.nav9a {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, green);
    position: absolute;
    top:130px;
    left:20px;
    z-index: 4;
}

.nav9b {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, yellow);
    position: absolute;
    top:130px;
    left:50px;
    z-index: 4;
}

.nav9c {
    width: 60px;
    height: 60px;
    transform: rotate(45deg);
    border: 1px solid linear-gradient(#666, red);
    position: absolute;
    top:130px;
    left:80px;
    z-index: 4;
}

.portrait {
    width: 90px;
    height: 90px;
    transform: rotate(45deg);
    position: absolute;
    top:115px;
    left:160px;
    background: url('portrait-nb-cg.png') center;
    /*background-size: 50%;*/
    z-index: 90;
}
.portrait:hover {
    background: url('portrait-nb-cg-200px.jpg') center no-repeat;
}
.nom {
    display: none;
    font-size: 1.5em;
    color: black;
    transform: rotate(-90deg);
    position: absolute;
    left: 80px;
    top: -40px;
}
div:hover .nom {
    display: block;
}

.logo {
    position: absolute;
    top:52px;
    left:250px;
    z-index: 100;
}

.issuuembed{
    width:80%; 
    height:400px; 
    margin:auto;
}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {
    0% {
        background: #8DB242;
        left: 0px;
        top: 0px;
    }
    25% {
        background: #176a0f;
        left: 100%;
        top: 0px;
    }
    50% {
        background: #176a0f;
        left: 100%;
        top: 100%;
    }
    75% {
        background: orange;
        left: 0px;
        top: 100%;
    }
    100% {
        background: #ff8333;
        left: 50%;
        top: 50%;
    }
}

@keyframes myfirst {
    0% {
        background: #8DB242;
        left: 50%;
        top: 25%;
    }
    25% {
        background: #176a0f;
        left: 90%;
        top: 50%;
    }
    50% {
        background: #176a0f;
        left: 90%;
        top: 90%;
    }
    75% {
        background: orange;
        left: 50%;
        top: 90%;
    }
    100% {
        background: #ff8333;
        left: 10px;
        top: 10px;
    }
}




/*********************** >>>>>>RESPONSIVES<<<<<< */

@media all and (max-width: 1024px) {
    img {
        width: 50%;
        height: auto;
        clear: both;
        transition: 1.5s infinite linear;
    }
    
    h1,
    p,
    a {
        color: #111;
    }
    
    body {
        background-color: rgba(0, 3, 0, 0.7);
        transition: 3.5s infinite linear;
    }

    h1 {
    font-size: 1em;
    }
    
    h4 {
    font-size: 0.6em;
    }

    h3 {
    font-size: 0.7em;
    }

    a {
    font-size: 1.2em;
    }

    #transform, #transform2, .nav1, .nav2, .nav3, .nav4, .nav5, .nav6, 
    .nav7a, .nav7b, .nav7c, .nav7d, .nav7e, .nav7f, .nav8a, .nav8b, .nav8c, 
    .nav8d, .nav8e, .nav9a, .nav9b, .nav9c , .portrait {
    display:none;
    }
    /*@-webkit-keyframes myfirst {
    0% {
        background: #8DB242;
        left: 0px;
        top: 0px;
    }
    25% {
        background: #176a0f;
        left: 200px;
        top: 0px;
    }
    50% {
        background: #176a0f;
        left: 200px;
        top: 200px;
    }
    75% {
        background: orange;
        left: 0px;
        top: 200px;
    }
    100% {
        background: #ff8333;
        left: 0px;
        top: 0px;
    }
}

@keyframes myfirst {
    0% {
        background: #8DB242;
        left: 0px;
        top: 0px;
    }
    25% {
        background: #176a0f;
        left: 600px;
        top: 0px;
    }
    50% {
        background: #176a0f;
        left: 600px;
        top: 600px;
    }
    75% {
        background: orange;
        left: 0px;
        top: 600px;
    }
    100% {
        background: #ff8333;
        left: 0px;
        top: 0px;
    }
}*/
}


/*********************** >>>>>>FIN RESPONSIVES<<<<<< */