* {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

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

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

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

#demo-content {
    padding-top: 100px;
}


/*---------------------LOADER------------------*/


/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

#loader-wrapper {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    overflow: hidden;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

h1 {
    color: #1a2285;
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
    margin: 0;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    font-size: 32px;
    margin-bottom: 3px;
}

.entry-header {
    color: aliceblue;
    text-align: left;
    margin: 0 auto 50px auto;
    width: 80%;
    max-width: 978px;
    position: relative;
    z-index: 10001;
}

#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #1a2285;
    z-index: 1000;
    -webkit-transform: translateX(0);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0);
    /* IE 9 */
    transform: translateX(0);
    /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
    left: 0;
}

#loader-wrapper .loader-section.section-right {
    right: 0;
}


/* Loaded */

.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);
    /* IE 9 */
    transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);
    /* IE 9 */
    transform: translateX(100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%);
    /* IE 9 */
    transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */
    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
}


/* JavaScript Turned Off */

.no-js #loader-wrapper {
    display: none;
}

.no-js h1 {
    color: #1a2285;
}

#content {
    margin: 0 auto;
    padding-bottom: 50px;
    width: 80%;
    max-width: 978px;
}

.logo-wrap {
    width: 100%;
    position: relative;
}


/*---------------------INPUT IMAGE---------------------*/

.image_supprimer_input {
    background-image: url("../images/haut-page.png");
    background-repeat: no-repeat;
    width: 80px;
    height: 81px;
}

.image_supprimer_input_2 {
    background-image: url("../images/haut-page-ici.png");
    background-repeat: no-repeat;
    width: 80px;
    height: 81px;
}


/*---------------------NAVIGATION---------------------*/

hr {
    width: 75%;
    height: 0px;
    border: 2px #1a2285 outset;
}


/*
            none   : pas de bordure (par défaut)
            hidden : bordure cachée
            solid  : ligne pleine
            double : ligne double (nécessite une taille de bordure de 3px minimum)
            dashed : en tirets
            dotted : en pointillés
            inset  : effet 3D "enfoncé"
            outset : effet 3D "surélevé"
            ridge  : effet 3D "demi-rond"
            */


/*---------------------NAVIGATION---------------------*/

header {
    position: fixed;
    font-family: open_sanscondensed_light, Sans-Serif;
    background-image: url("../images/fond_nav.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 84px;
    z-index: 90;
    overflow: hidden;
    -webkit-transition: height 200ms ease-out;
    -moz-transition: height 200ms ease-out;
    -o-transition: height 200ms ease-out;
    -ms-transition: height 200ms ease-out;
}

#logo {
    float: left;
    margin: 12px 0 0 10px;
}


/*---------------------INTRODUCTION---------------------*/

#introduction {
    background-color: #1a2285;
    background-position: center;
}

#text_intro_droit img,
#text_intro_gauche img {
    width: 100%;
}


/*---------------------SECTIONS---------------------*/

header nav a,
#show p a,
#about p a {
    color: #1a2285;
    padding: 0 4px;
}

header nav a:hover,
#show p a:hover,
#about p a:hover {
    background-color: #1a2285;
    color: #FFFFFF;
}

.black {
    background-color: #1a2285;
    color: #FFFFFF;
}

.blacki {
    color: #FFFFFF;
}

.white {
    background-color: #FFFFFF;
    color: #000000;
}

h2 {
    font-family: open_sanscondensed_light, Sans-Serif;
    font-size: 2em;
    text-align: center;
    margin: 80px 0 50px 0;
}

p {
    font-family: open_sanslight, Sans-Serif;
    font-size: 1em;
    text-align: center;
    margin-bottom: 25px;
}

header a img,
#works a img {
    border: 0;
}

a {
    text-decoration: none;
}

a.rollover {
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
    display: block;
}

a.rollover:hover {
    background-position: bottom center;
}

li {
    list-style-type: none;
}


/*---------------------SEPARATEURS------------------

#works:before, #contact:before {
    content: "";
    height: 12px;
    width: 100%;
    position: absolute;
    background: linear-gradient(transparent 0%, transparent 0%), linear-gradient(135deg, #000000 33.33%, transparent 33.33%) 0 0%, transparent linear-gradient(45deg, #000000 33.33%, transparent 33.33%) 0 0%;
    background: -moz-linear-gradient(transparent 0%, transparent 0%), -moz-linear-gradient(135deg, #000000 33.33%, transparent 33.33%) 0 0%, transparent -moz-linear-gradient(45deg, #000000 33.33%, transparent 33.33%) 0 0%;
    background: -webkit-linear-gradient(transparent 0%, transparent 0%), -webkit-linear-gradient(135deg, #000000 33.33%, transparent 33.33%) 0 0%, transparent -webkit-linear-gradient(45deg, #000000 33.33%, transparent 33.33%) 0 0%;
    background: -o-linear-gradient(transparent 0%, transparent 0%), -o-linear-gradient(135deg, #000000 33.33%, transparent 33.33%) 0 0%, transparent -o-linear-gradient(45deg, #000000 33.33%, transparent 33.33%) 0 0%;
    background: -ms-linear-gradient(transparent 0%, transparent 0%), -ms-linear-gradient(135deg, #000000 33.33%, transparent 33.33%) 0 0%, transparent -ms-linear-gradient(45deg, #000000 33.33%, transparent 33.33%) 0 0%;
    background-size: 0px 100%, 24px 12px, 24px 12px;
    margin-top: -12px;
}

#show:before, #about:before, footer:before {
    content:"";
    height: 12px;
    width: 100%;
    position: absolute;
    background: linear-gradient(transparent 0%, transparent 0%), linear-gradient(135deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%, transparent linear-gradient(45deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%;
    background: -moz-linear-gradient(transparent 0%, transparent 0%), -moz-linear-gradient(135deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%, transparent -moz-linear-gradient(45deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%;
    background: -webkit-linear-gradient(transparent 0%, transparent 0%), -webkit-linear-gradient(135deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%, transparent -webkit-linear-gradient(45deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%;
    background: -o-linear-gradient(transparent 0%, transparent 0%), -o-linear-gradient(135deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%, transparent -o-linear-gradient(45deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%;
    background: -ms-linear-gradient(transparent 0%, transparent 0%), -ms-linear-gradient(135deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%, transparent -ms-linear-gradient(45deg, #FFFFFF 33.33%, transparent 33.33%) 0 0%;
    background-size: 100 100%, 24px 12px, 24px 12px;
    margin-top: -12px;
}---*/


/*--- LES DEUX COLONNES  ----------------*/

#responsive {
    max-width: auto;
    /*-- à modifier en fonction de la largeur désirée --*/
    margin: 0;
    width: 100%;
}

.demi-colonne,
.colonne {
    float: left;
    position: relative;
    padding: 2.65rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.pnig:after {
    content: "";
    display: table;
    clear: both;
}


/**---------------- Media query ----------------**/

@media only screen and (min-width: 48em) {
    .demi-colonne {
        width: 50%;
    }
}


/*---------------------SHOW---------------------*/

.mask_element {
    display: none;
}

h3 {
    font-family: open_sanscondensed_light, Sans-Serif;
    font-size: 1.625em;
    color: #1a2285;
    text-align: center;
    margin: 80px 0 40px 0;
}

h4 {
    font-family: open_sanslight, Sans-Serif;
    font-size: 1em;
    text-align: center;
    margin-bottom: 45px;
}

h6 {
    font-family: open_sanslight, Sans-Serif;
    color: #ff0000;
    font-weight: bold;
    text-align: center;
}

#show .gal_show {
    margin: 50px 0 40px;
}

#show .gal_show img {
    max-width: 100%
}

#show .close_show {
    background-image: url("../images/close_show.png");
    margin: 0 auto 70px;
}

#show .close_ici {
    background-image: url("../images/close_ici.png");
    margin: 0 auto 70px;
}


/*---------------------WORKS---------------------*/

#gal_mini {
    width: 100%;
    margin-bottom: 56px;
    padding-bottom: 24px
}

#gal_mini .effect {
    height: 155px;
    width: 155px;
    float: left;
    position: relative;
    overflow: hidden;
    border: 4px ridge #c66700;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#gal_mini .effect img {
    position: absolute;
    left: 0;
    max-width: 100%;
    opacity: 0.5;
}

#gal_mini .effect:hover img {
    opacity: 1;
}

#gal_mini .effect span {
    font-family: open_sanslight, Sans-Serif;
    text-align: center;
    font-size: 0.9em;
}

#gal_mini .effect .caption {
    background-color: rgba(0, 0, 0, 0.6);
    width: 230px;
    height: 116px;
    position: absolute;
    display: block;
    z-index: 90;
    left: 0;
    border-top: 1px solid #ffffff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    color: #fff;
    line-height: 25px;
}


/*---------------------ABOUT---------------------*/

#about ul {
    width: 90%;
    margin: 50px auto 80px;
}

#about ul li img {
    max-width: 100%;
}

#about li {
    width: 100px;
    float: left;
    font-family: open_sanslight, Sans-Serif;
    font-size: 1em;
    text-align: center;
    margin-top: 2%
}


/*---------------------CONTACT---------------------*/

#contact p a {
    color: #FFFFFF;
    padding: 0 4px;
}

#contact p a:hover {
    background-color: #FFFFFF;
    color: #000000;
}

#formulaire {
    margin: 50px 0 80px;
    text-align: left;
}

#msg_php {
    margin-top: -10px;
}

input,
textarea,
button {
    padding: 1%;
    font-family: open_sanslight;
    font-size: 1em;
    color: #000000;
    border: 4px double #FFFFFF;
    background-color: #d9d0a4;
}

textarea {
    resize: none;
}

button {
    cursor: pointer;
    width: 50%;
}

button:hover {
    border: 4px double #1a2285;
    ;
    background-color: #FFFFFF;
    color: #000000;
}

@media screen and (max-height: 575px) {
    #rc-imageselect,
    .g-recaptcha {
        transform: scale(0.77);
        transform-origin: 0;
        transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform: scale(0.77);
        transform: scale(0.77);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}


/*---------------------FOOTER---------------------*/


/*#link {
    background-image: url("../images/footer_link-2.png");
}

#facebook {
    background-image: url("../images/footer_facebook-2.png");
}

#instagram {
    background-image: url("../images/footer_instagram.png");
}

#twitter {
    background-image: url("../images/footer_twitter.png");
}

#google {
    background-image: url("../images/footer_google.png");
}*/