body
            {
            background-color: #f6f6f6;
            font-family: 'Source Code Pro', arial, sans-serif;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            }


/*-----------------------------------------------------------------------------------------------*/
/*--------------------------------- HEADER ------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

    header
            {
            width: 230px;
            height : 100%;
            position: fixed;
            background-color: #f6f6f6;
            background-color: rgba(246,246,246,0.8);
            }

    h1
            {
            font-size: 23px;
            margin-left: 57px;
            margin-top: 70px;
            font-weight: 300;
            }

    h2
            {
            font-size: 23px;
            margin-left: 30px;
            font-weight: 200;
            }

    h2 a
            {
            text-decoration: none;
            color: #000;
            }

    h2  a:hover
            {
            text-decoration: none;
            }

    .color
            {
            color:red;
            font-weight: 300;
            }

    nav
            {
            font-size: 14px;
            font-weight: 400;
            margin-left: 30px;
            margin-top: 130px;
            }

    nav a
            {
            text-decoration: none;
            color:#636363;
            }

    nav a:hover
            {
            text-decoration: none;
            color:#000;
            }

    h3
            {
            margin-bottom: 30px;
            letter-spacing: -0.1px;
            }

    header p
            {
            font-size: 14px;
            font-weight: 300;
            margin-bottom: 30px;
            margin-left: 30px;
            margin-top: 130px;
            }

    header p a
            {
            text-decoration: none;
            color:#636363;
            }

/*-----------------------------------------------------------------------------------------------*/
/*--------------------------------- CONTENT -----------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/

    section
            {
            height: 100%;
            /*border-style: solid;
            border-color : blue;
            border-width: 1px;
            overflow-x: auto;*/
            white-space: nowrap;
            }

    .margediv
            {
            height: 5px;
            display: -moz-inline-block;
            display: inline-block;
            width:230px;
            margin-top: 70px;
            }

    .textdiv
            {
            height: 690px;
            width:460px;
            display: -moz-inline-block;
            display: inline-block;
            margin-top: 70px;
            margin-left: 10px;
            vertical-align: top;
            }

    section .textdiv 
            {
            width:460px;
            display: -moz-inline-block;
            display: inline-block;
            margin-top: 70px;
            text-align: justify;
            white-space: normal !important;
            }

    .textdiv p
            {
            font-size: 13px;
            line-height: 20px;
            color:#333333;
            }

    #text-arm
            {
            margin-top: 173px;
            }

    #text-hom
            {
            margin-top: 217px;
            }

    #text-tdf
            {
            margin-top: 262px;
            }

    #text-mer
            {
            margin-top: 307px;
            }

    #text-rou
            {
            margin-top: 351px;
            }

    #text-col
            {
            margin-top: 395px;
            }

    #text-ams
            {
            margin-top: 439px;
            }

    #text-gar
            {
            margin-top: 482px;
            }

    #text-pol
            {
            margin-top: 527px;
            }

    .flechetexte
            {
            color:red;
            font-size: 15px;
            }

    section img
            {
            margin-left: 30px;
            margin-top: 70px;
            font-weight: 400;
            }

    section img:last-child
            {
            margin-right: 30px;
            }

    #blocontact
            {
            height: 690px;
            width:460px;
            margin-top: 70px;
            margin-left: 270px;
            vertical-align: top;
            display: -moz-inline-block;
            display: inline-block;
            border-left-color: #969696;
            border-left-style: dashed;
            border-left-width: 1px;
            }

    form
            {
            margin-top: 172px;
            vertical-align: top;
            }

    label
            {
            float: left;
            vertical-align: top;
            width: 100px;
            text-align: right;
            margin-right: 20px;
            font-size: 13px;
            line-height: 20px;
            color:#636363;
            }

    .flechecontact
            {
            color:red;
            font-size: 10px;
            }

    input, textarea
            {
            vertical-align: top;
            width: 200px;
            font-size: 13px;
            line-height: 20px;
            color:#333333;
            margin-bottom: 10px;
            background-color: #eeeeee;
            border:none;
            }

    textarea
            {
            width: 300px;
            height:120px;
            font-size: 13px;
            line-height: 20px;
            color:#333333;
            margin-bottom: 10px;
            white-space: nowrap;
            resize: none;
            overflow: auto;
            }

    #boutonvalidation
            {
            color:#636363;
            width: 58px;
            background-color: #f6f6f6;
            cursor: pointer;
            }

    .flechecontactsubmit
            {
            color:red;
            font-size: 10px;
            margin-left: 122px;
            }

    #blocontactenvoi
            {
            color:#636363;
            font-size: 13px;
            line-height: 20px;
            margin-left: 60px;
            margin-top: 175px;
            }

    #blocontactenvoi a
            {
            color:#636363;
            text-decoration: none;
            }

    .flecheretour
            {
            color:red;
            font-size: 13px;
            }

    .avertissement-ie
            {
            margin: 0.2em 0;
            background: #ccc;
            color: #000;
            padding: 0.2em 0;
            }


/*-----------------------------------------------------------------------------------------------*/
/*--------------------------------- RESPONSIVE --------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------*/
/*----------------Responsive 1366px --------------------------*/


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

    header
            {
            width: 210px;
            }
            
    section img
            {
            margin-left: 5px;
            margin-top: 20px;
            height: 490px;
            }

    h1
            {
            margin-left: 20px;
            margin-top: 20px;
            }

    h2
            {
            margin-left: 20px;
            }

    nav
            {
            margin-left: 20px;
            margin-top: 55px;
            }

    h3
            {
            margin-bottom: 15px;
            }

    header p
            {
            margin-left: 20px;
            margin-top: 130px;
            }

    .margediv
            {
            height: 5px;
            display: inline-block;
            width:215px;
            }

    .textdiv
            {
            height: 490px;
            margin-top: 20px;
            margin-left: 5px;
            margin-right: 5px;
            background-image: none !important;
            }

    section .textdiv 
            {
            margin-top: 20px;
            width: 490px;
            }

    .textdiv p
            {
            font-size: 12px;
            line-height: 20px;
            color:#333333;
            
            }

    #text-arm
            {
            margin-top: 100px;
            }

    #text-hom
            {
            margin-top: 129px;
            }

    #text-tdf
            {
            margin-top: 158px;
            }

    #text-mer
            {
            margin-top: 187px;
            }

    #text-rou
            {
            margin-top: 216px;
            }

    #text-col
            {
            margin-top: 246px;
            }

    #text-ams
            {
            margin-top: 274px;
            }

    #text-gar
            {
            margin-top: 303px;
            }

    #text-pol
            {
            margin-top: 331px;
            }

    #blocontact
            {
            height: 490px;
            width:460px;
            margin-top: 20px;
            }

    form
            {
            margin-top: 106px;
            vertical-align: top;
            }

  
            }




/*------------------------------------------------------------*/
/*----------------Responsive Mobile --------------------------*/

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

    header
            {
            width: 190px;
            position: absolute;
            }
            
    section
            {
            height: 300px;
            white-space: nowrap;
            }
            
    section img
            {
            margin-left: 5px;
            margin-top: 5px;
            height: 295px;
            display: inline;
            }

    section img:last-child
            {
            margin-right: 15px;
            }

    h1
            {
            margin-left: 27px;
            margin-top: 10px;
            font-size: 16px;
            font-weight: 400;
            }

    h2
            {
            margin-left: 10px;
            font-size: 16px;
            font-weight: 400;
            }

    nav
            {
            margin-left: 10px;
            margin-top: 22px;
            }

    h3
            {
            margin-bottom: 10px;
            font-size: 14px;
            }

    header p
            {
            margin-left: 10px;
            margin-top: 20px;
            font-size: 12px;
            margin-bottom: 0px;
            }

    .margediv
            {
            height: 5px;
            display: inline-block;
            width:190px;
            }

    section .textdiv
            {
            display: none;
            }

    #blocontact
            {
            height: 310px;
            width:280px;
            margin-left: 195px;
            margin-top: 5px;
            }

    form
            {
            margin-top: 5px;
            vertical-align: top;
            }

    label
            {
            width: 75px;
            margin-right: 10px;
            }

    .flechecontact
            {
            color:red;
            font-size: 10px;
            }

    input, textarea
            {
            width: 185px;
            font-size: 14px;
            line-height: 20px;
            }

    textarea
            {
            width: 185px;
            height:175px;
            font-size: 14px;
            }

    .flechecontactsubmit
            {
            margin-left: 85px;
            }

    #blocontactenvoi
            {
            color:#636363;
            font-size: 11px;
            line-height: 20px;
            margin-left: 5px;
            margin-top: 75px;
            }

            }