body
{
    background: url(../image/picloup.jpg) fixed;
    background-size:cover;
   /* background-color:rgb(26,15,8); */
}

img{
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 10;
}


h1
{
    font-size:200%;
}
#gauche 
{
    float:left;
    position:fixed;
    width:20%;
    margin-top:15%;
}
#gauche a
{
    width:75%;
    text-align: left;
}

/* DIV RESPONSIVE SMARTPHONE*/
.gaucheResp
{
    display:none;
}
.droiteResp
{
   
    border:solid 1px;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    border-radius: 10px;
    padding-right:1%;
    box-shadow: 3px 3px 5px 3px;
    
    display:none;
}
button.close
{
	color:white;
	background-color:black;
}
/*--------------------------*/
#droite 
{
    position:fixed;
    margin-left:80%;
    float:right;
    border:solid 1px;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    border-radius: 10px;
    padding-right:1%;
    margin-top:15%;
    box-shadow: 3px 3px 5px 3px;
}
#droite a 
{
    padding-top:0.5%;
    color:white;
}
#droite li:hover
{
    color:yellow;
}
.coor :hover
{
    color:yellow;
    padding-top:1%;
    padding-bottom: 1%;
}
ul
{
    list-style: none;
}
.centre
{
    text-align: left;
    width:50%;
    display:inline-block;
    border:solid 1px black;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    margin-left:20%;
    padding-left:5%;
    padding-right:5%;
    padding-top:3%;
    padding-bottom: 3%;
    margin-top:10%;
    border-radius: 6px;
}

#bandeau 
{
    z-index: 20;
    top:0px;
    left:0px;
    width:100%;
    display:block;
    position:fixed;
    color:white;
    height:10%;
    background:url(../image/wood.jpg);
    text-align:center;
    
}
.form 
{
    float:left;
}
input 
{
    display:block;
    margin-left:2%;
}
.problem 
{
    background-color:yellow;
    color:#FF4500;
    font-weight: bold;
}
legend 
{
    text-align: left;
    font-weight:bold;
}
.right 
{
    float:right;
}
#com
{
    color:rgb(232,194,155);
    font-size:120%;
    
}
.centrecom
{
    text-align: left;
    width:50%;
    display:inline-block;
    border:solid 1px black;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    margin-left:20%;
    padding-left:5%;
    padding-right:5%;
    padding-top:3%;
    padding-bottom: 3%;
    margin-top:10%;
    border-radius: 6px;
    display:none; /*javascript*/
}
.photos 
{
    text-align:center;
    width:50%;
    display:inline-block;
    border:solid 1px rgb(232,194,155);
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    margin-left:20%;
    padding-left:2%;
    padding-top:1%;
    padding-bottom: 1%;
    margin-top:4%;
    border-radius: 6px;
    font-size:120%;
}
.glyphicon
{
    position: static;
}
.photos a 
{
   text-decoration: none;
   color:rgb(232,194,155);
}

.photos a:hover
{
    color:yellow;
}

.space 
{
   margin-top:9%; 
   width:50%;
   display:inline-block;
}
#titre
{
    border-radius: 6px;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    width: 20%;
    margin-left:40%;
    box-shadow: 3px 3px 5px 3px;
    height:50%;
    font-size:0.7vw;
}
textarea
{
    resize: none;
}
.comment
{
    font-size: 120%;
    
    /* INDEX */
}
#image1
{
    background:url(../image/r1.JPG);
    background-position-y: 70%;
    width:90%;
    height:30%;
    display:block;
    color:white;
    font-family: Segoe Print,verdana,serif;
}
.r2
{
    display:inline-block;
    margin-top:3%;
    width:48%;
    height:30%;
    background:url(../image/r2.JPG);
}
#rightpic
{
    font-family: impact,verdana,sans-serif;
    font-size:120%;
}
#italic
{
    font-style: italic;
    font-family: none;
    font-size:100%;
}
li:hover
{
    color:yellow;
}
#list li 
{
    padding:1%;
    font-size:110%;
}
#list
{
    display:block;
}
#test
{
    text-align:center;
    font-style:italic;
    font-weight:bold;
    font-size:150%;
    display:block;
}
#marcheur
{
    height:34%;
    width:51%;
    display:inline;
    /*margin-left:30%;*/
    margin-top:5%;
    float:left;
  
}
#r3
{
    display:inline-block;
    width:51%;
    height:40%;
    margin-top:3%;
    /*margin-bottom:30.5%;*/
     float:left;
}
#r4
{
    display:inline-block;
    margin-top:3%;
    width:44%;
    height:64.5%;
    float:right;
}
#logo 
{
    width: -webkit-fill-available;
    display: block;
    margin-top:6%;
    border-radius: 15px;
}
#blason-ville {
    width: -webkit-fill-available;
    border-radius: 15px;
    @media (max-width: 640px){
        display: none;
    }
}


/* ol
{
    list-style-type:disc;
} */

#erreur 
{
    background-color:#FF4500;
    color:yellow;
    font-weight:bold;
}
.centreAccueil
{

    text-align: left;
    width:50%;
    display:inline-block;
    border:solid 1px black;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    margin-left:20%;
    padding-left:5%;
    padding-right:5%;
    padding-top:3%;
    padding-bottom: 3%;
    margin-top:10%;
    border-radius: 6px;
   /*display:none;*/
}


.defilement
{
    font-weight: bold;
    padding-bottom: 1%;
    cursor:pointer;
    text-align: center;
    width:10%;
    display:inline-block;
    border:solid 1px black;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
    margin-left:56%;
    margin-top:10%;
}
.defilementA
{
    display:block;
    background-color:rgb(43,21,7);
    color:rgb(232,194,155);
}
.fin
{
    margin-top:110%;
    display:block;
    font-style: italic;
}
#commentaireForm
{
    display: none;
}
 #gauche #commentaire
{
    height:110px;;
}

button, input, optgroup, select, textarea 
{
    margin: 0;
    font: inherit;
    color: black;
    
}
button:focus , input:focus , optgroup:focus , select:focus , textarea:focus 
{
    margin: 0;
    font: inherit;
    color: black;
    background-color:#C8CA7E;
   
}
legend
{
    color: #C7A113;
}

.modal
{
    color:rgb(232,194,155);
    background:none;
    box-shadow: none;
}
.modal-body
{
    text-align: left;
}
.modal-content
{
    background-color:rgb(43,21,7);
}
.modal .modal-footer
{
    background:none;
}
.buttonModal
{
    background-color:#9A7522;
}
.buttonModal:hover
{
    background-color:#E0AC36;
}

@media (max-width: 640px), handheld and (orientation:portrait)
{
     #gauche
    {
        display:none;
    }
    .gaucheResp
    {
        position:absolute;
        display:inline;
    }
    #bandeau
    {
        display:none;
    }
    .centre
    {
        margin-left: 0px;
        width:64%;
    }
    .centrecom
    {
       margin-left: 0px;
       width:64%;
    }
    .centreAccueil
    {
        margin-left: 0px;
        width:64%;
    }
    #droite
    {
        float:none;
        display:inline-block;
        margin-left:64%;
        margin-top:10%;
    }
    body
    {
        background:none;
        background-color:rgb(43,21,7);
    }
}

.img-responsive
{
	display:inline-block;
}



@media (max-width: 500px), handheld and (orientation:portrait)
{
    body
    {
        background:none;
        background-color:rgb(43,21,7);
    }
    #gauche
    {
        display:none;
    }
    .gaucheResp
    {
        display:inline;
    }
    .centre
    {
        margin-left: 0px;
        width:100%;
    }
    .centrecom
    {
       margin-left: 0px;
       width:100%;
    }
    .centreAccueil
    {
        margin-left: 0px;
        width:100%;
    }
    #droite
    {
        display:none;
    }
    .droiteResp
    {
        display:block;
    }
    #bandeau
    {
        display:none;
    }
}