/*-------------------------------------------------------------------------------------*/
/*-----------------------------Trame générale-------------------------:)---------------*/
/*-------------------------------------------------------------------------------------*/
body
{
    color: black;
	font-family: "Times New Roman", sans-serif;
    background-image:  url("photos_autres/fond.jpeg");
	background-size: 100%;
    --ma_variable: rgb(230, 230, 230, 0.8); /* (230, 230, 230, 0.8); */
    --margefond: 5%; 
    --ecranmax: 800px;
}

/*------------------*/
#entete_instagram
{
    display: flex;
    background-color: var(--ma_variable);
    justify-content: flex-end;
    margin: 0 var(--margefond) 0 var(--margefond);
    padding: 1% 1% 0% 0%; 
}

.imageinsta
{   
    max-width:50px;
}

/*------------------*/
header
{
    display: flex;
    justify-content: center;
    background-color: var(--ma_variable);
    margin: 0 var(--margefond) 0 var(--margefond);
}

.imagelmdo
{   
    max-width:90%;
    margin: auto;
    display: block;
}
/*------------------*/
nav
{
    text-align: center;
    background-color:  var(--ma_variable);
    margin: 0 var(--margefond) 0 var(--margefond);
    padding: 2% 0% 2% 0%;
}

.souschapitre
{
    color: black;
    font-size:  220%; 
    padding: 0% 1% 0% 1%;
    text-decoration: none;
}

.souschapitre:hover
{
    font-weight: bold;
}

/*------------------*/
.ligne_separation{
    height: 15px;
    border-bottom: 2px black solid;;
    margin: 0% 17% 0% 17%;
}

/*------------------*/
#container_menu_principal
{
    display: flex;
    flex-direction: column;
	font-size: 130%;
    justify-content: center;
    background-color:  var(--ma_variable);
    margin: 0 var(--margefond) 0 var(--margefond);
}


/*------------------*/

footer
{
    font-size:  120%;
    font-style: italic;
    text-align: center;
    tab-size: 4;
    background-color:  var(--ma_variable);
    padding: 1%; 
    margin: 0% 5% 0% 5%;
}

.pied_de_page_telephone{
    display: none;
}

@media only screen and (max-device-width:800px) 
{
    .imageinsta
    {   
        max-width:30px;
    }
    .souschapitre
    {
        font-size:  200%; 
    }

    .pied_de_page_ordinateur{
        display:  none;
    }
    .pied_de_page_telephone{
        display:  block;
        font-size: 80%;
    }
}
#nav_ordinateur{
	display: contents;
}
#nav_telephone{
	display: none;
}
}
@media only screen and (max-device-width:800px){
	#nav_ordinateur{
		display: none;
	}
	#nav_telephone{
		display: contents;
	}
}
/*-------------------------------------------------------------------------------------*/
/*-----------------------------------IMAGE BRASSERIE (2)-------:)----------------------*/
/*-------------------------------------------------------------------------------------*/
#container_image_brasserie
{ 
    display: flex;
    justify-content: center;
    margin:  1% 0 1% 0;
}
#container_image_brasserie_telephone{
		display: none;
}
@media only screen and (max-device-width:800px){
	#container_image_brasserie_telephone
	{ 
		display: flex;
		flex-direction:  column;
		margin:  0 10% 0 10%;
		overflow:  hidden;
		position: center;
		width: 80%;
		max-height: 100%;
	}
	#container_image_brasserie{
		display: none;
	}	
}


.image_brasserie{
    margin: 0% 1% 0% 1%;
}

.image_brasserie_telephone{
	max-width: 100%;
}

/*
@media only screen and (max-device-width:800px) 
{
    #container_image_brasserie{
        overflow:  hidden;
        position: center;
    }

    .image_brasserie{
        animation-duration: 15s;
        animation-name: defile_image_brasserie;
        animation-iteration-count:  infinite;
    }

    @keyframes defile_image_brasserie{
        0%{        transform:  translateX(100%);    }
        33%{        transform:  translateX(100%);    }
        38%{        transform:  translateX(0%);    }
        56%{        transform:  translateX(0%);    }
        66%{        transform:  translateX(-100%);    }
        90%{        transform:  translateX(-100%);    }
        100%{       transform:  translateX(100%);        }
    }
}
*/
/*-------------------------------------------------------------------------------------*/
/*-----------------------------------ESPACE A BULLE (2) -----:)------------------------*/
/*-------------------------------------------------------------------------------------*/
#container_espace_a_bulle
{ 
    display: flex;
    flex-direction:  row;
    justify-content: center;
    margin:  1% 0 1% 0;
}

/*-------------------------------------------------------------------------------------*/
/*-----------------------------------ESPACE A SIMOTIN (3) ----------------------------*/
/*-------------------------------------------------------------------------------------*/

.bloc_a_simotin
{
    background-color: white;
	line-height: 1.2em;
    max-width: 100%;
    padding: 2% 2% 1% 2%;
    border:  2px black solid;
    border-radius:  4px;
    margin:  0 2% 0 5%;
}

.bloc_a_simotin_telephone
{
    background-color: white;
	line-height: 1.2em;
    max-width: 100%;
    padding: 2% 0% 1% 2%;
    border:  2px black solid;
    border-radius:  4px;
    margin: 2% 5% 1% 5%;
	padding: 3%;
}

.image_simotin{
    float: left;
    max-width: 30%;
    max-height: 40%;
    padding: 0 3% 0% 0;
}

/*-------------------------------------------------------------------------------------*/
/*-----------------------------Venez-nous rendre visite !-------------:)---------------*/
/*-------------------------------------------------------------------------------------*/
#container_double_bloc_a_gauche
{
	display: flex;
}
#container_double_bloc_a_droite
{ 
    display: flex;
    flex-direction:  column;
    max-width: 45%;
    margin:  0 2% 0 2%;
}
#container_double_bloc_telephone{ 
	display: none;
}
@media only screen and (max-device-width:800px){
	#container_double_bloc_telephone{ 
		display: flex;
		flex-direction:  column;
		margin:  0 2% 0 2%;
	}
	#container_double_bloc_a_gauche{
		display: none;
	}	
	#container_double_bloc_a_droite{
		display: none;
	}	
}

.bloc_contacternous
{
    background-color: white;
	line-height: 1.3em;
    padding: 2% 5% 2% 3%;
    
    text-align: left;
    margin-bottom: 2%;
    border:  2px black solid;
    border-radius:  4px;
}
.bloc_contacternous_telephone
{
    background-color: white;
	line-height: 130%;
    padding: 2% 5% 2% 3%;
    
    text-align: left;
    margin: 1% 5% 2% 5%;
    border:  2px black solid;
    border-radius:  4px;
}

/*-------------------------------------------------------------------------------------*/
/*----------------------Présentation des bières, incl. carouselle----------------------*/
/*-------------------------------------------------------------------------------------*/
#container_c_r_c_row /*changer le nom*/
{ 
    display: flex;
    background-color: white;
    border:  2px black solid;
    border-radius:  4px;
    margin:  0 0% 0 1%;
}

.bloc_image_deroulante
{
    padding: 5% 0% 5% 3%;
    width: 50%; /*Modifier également la largeur du texte !*/
}

.bloc_image_deroulante_telephone
{
    background-color: white;
	line-height: 130%;
    padding: 2% 2% 2% 2%;
    text-align: left;
    margin: 0% 5% 2% 5%;
    border-left:  2px black solid;
    border-right:  2px black solid;
    border-bottom:  2px black solid;
    border-radius:  0 0 4px 4px;
}

.bloc_image_deroulante_texte_telephone
{
    text-align: left;
    line-height:  110%;
    padding: 2% 2% 2% 2%;
    background-color: white;
    margin: 1% 5% 0% 5%;
    border-left:  2px black solid;
    border-right:  2px black solid;
    border-top:  2px black solid;
    border-radius:  4px 4px 0 0;
}

.bloc_image_deroulante_texte
{
    text-align: left;
    line-height:  1.1em;
    
    padding: 2% 3% 1% 3%;
	width: 50%; /*100 - largeur image*/
}

.deroulementimages{
    display:  flex;
    animation-duration: 15s;
    animation-name: defile_etiquettes;
    animation-iteration-count:  infinite;
}

.imageetiquette
{   
    max-width:100%;
}

#caroussel{
    overflow:  hidden;
    position: center;
}

@keyframes defile_etiquettes{
    0%{        transform:  translateX(0);    }		/* 0 % pour 4 images */
    17%{        transform:  translateX(-0%);   	}	/* 15 % pour 4 images */
    33%{        transform:  translateX(-100%);    } /* 25 % pour 4 images */
    50%{        transform:  translateX(-100%);    } /* 40 % pour 4 images */
    66%{        transform:  translateX(-200%);    } /* 50 % pour 4 images */
    100%{        transform:  translateX(-200%);    } /* 65 % pour 4 images */
    /*100%{        transform:  translateX(-300%);    }  75 % pour 4 images */
    /*90%{        transform:  translateX(-300%);    } 90 % pour 4 images
    100%{       transform:  translateX(0);        }  100 % pour 4 images */
}


@media only screen and (max-device-width:800px){
    #container_c_r_c_row {
	   display: none;
       flex-direction:  column;
       background-color: yellow;
    }
    .bloc_image_deroulante
    {

        width: 94%;
        justify-content: center;
    }
}
/*-------------------------------------------------------------------------------------*/
/*------------------------------------CONTACT------------------------------------------*/
/*-------------------------------------------------------------------------------------*/
#container_c_row
{ 
    display: flex;
    flex-direction:  row;
    justify-content: center;
}

#contact_colonne_gauche
{
	display: flex;
	flex-direction:  column; 
	margin: 0% 2% 0% 4%;
	width: 100%;
}

#contact_colonne_droite{
	display: flex;
	flex-direction:  column; 
	width: 100%;
	margin: 0% 4% 0% 4%;
	padding: auto;
}
#contact_colonne_telephone{
		display: none;
}

@media only screen and (max-device-width:800px){
	#contact_colonne_telephone
	{	
		display: flex;
		flex-direction:  column; 
		margin: 0% 4% 0% 4%;
		padding: 2% 4% 2% 4%;
		width: 85%;
	}
	#contact_colonne_droite{
		display: none;
	}
	#contact_colonne_gauche{
		display: none;
	}	
}

.contact_texte
{
    background-color: white;
    padding: 3%;
    border:  2px black solid;
    height: 100%;
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_texte_telephone
{
    background-color: white;
    padding: 3%;
    border:  2px black solid;
    height: 100%;
	
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_donnees
{
    background-color: white;
    padding: 3%;
    border:  2px black solid;
    max-height: 45%;
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_donnees_telephone
{
    background-color: white;
    padding: 3%;
    border:  2px black solid;
    max-height: 45%;
	
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_image
{
    background-color: white;
    max-width: 100%;
    padding: 1%;
    border:  2px black solid;
    border-radius:  4px;
    margin: 0% 0% 5% 0%;
}

.contact_image_telephone
{
    background-color: white;
    max-width: 100%;
	padding: 2% 1% 0% 1%;
    border:  2px black solid;
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_brasseurs
{
    background-color: white;
	font-family: "Ink Free";
    max-width: 100%;
    padding: 3%;
    border:  2px black solid;
    border-radius:  4px;
    margin: 1% 0% 1% 0%;
}

.contact_brasseurs_telephone
{
    background-color: white;
	font-family: "Ink Free";
    max-width: 100%;
	
    padding: 3%;
    border:  2px black solid;
    border-radius:  4px;
    margin: 1% 0% 2% 0%;
}

.image_100
{   
    max-width:100%;
}

@media only screen and (max-device-width:800px){
    #container_c_row{
        flex-direction: column;
    }
    #contact_double_ligne{
        width: 100%;
        margin: auto;
    }

    .contact_texte
    {  
        margin: 5% 0 0% 0%;
    }

    .contact_donnees
    {  
        margin: 5% 0 0% 0%;
    }

    .contact_image
    {  
        margin: 5% 0 0% 0;
        width: 97%;
        max-width: 100%;
    }
}
/*-------------------------------------------------------------------------------------*/
/*-----------------------------------Nos Bières----------------------------------------*/
/*-------------------------------------------------------------------------------------*/
#container_deux_bieres_sur_la_meme_ligne
{ 
    display: flex;
    flex-direction:  row;
    justify-content: center;
    margin: 1% 0% 1% 0;
}



.bloc_presentation_photo_biere
{
    background-color: white;
    width: 15%;
	margin-left: 2%;
	padding-top: 2%;
    border-left:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_texte_biere
{
    
    background-color: white;
	margin-right: 2%;
    width: 35%;
	padding: 3% 3% 3% 0%;
    border-right:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_photo_biere_droite
{
    background-color: white;
    width: 15%;
	margin-left: 2%;
	padding-top: 2%;
    border-left:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_photo_biere_gauche
{
    background-color: white;
    width: 15%;
	margin-left: 4%;
	padding-top: 2%;
    border-left:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_texte_biere_gauche
{
    
    background-color: white;
	margin-right: 2%;
    width: 35%;
	padding: 3% 3% 3% 0%;
    border-right:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_texte_biere_droite
{
    
    background-color: white;
	margin-right: 4%;
    width: 35%;
	padding: 3% 3% 3% 0%;
    border-right:  2px black solid;
    border-top:  2px black solid;
    border-bottom:  2px black solid;
}

.imagebouteille
{   
    margin: auto;
    display: block;
    max-width: 100%;
}

.imagebouteille_telephone
{   
    margin: auto;
    display: block;
    max-width: 55%;
}

.bloc_presentation_photo_biere_bas
{
    background-color: white;
    max-width: 90%;
	margin: 0% 5% 0% 5%;
    border-left:  2px black solid;
    border-right:  2px black solid;
    border-bottom:  2px black solid;
}

.bloc_presentation_texte_biere_haut
{
    
    background-color: white;
    max-width: 100%;
	margin: 0% 5% 0% 5%;
	padding: 5% 5% 5% 5%;
    border-right:  2px black solid;
    border-left:  2px black solid;
    border-top:  2px black solid;
}

#containeur_une_biere_sur_la_meme_ligne{
	display: none;
}
@media only screen and (max-device-width:800px){
    #container_deux_bieres_sur_la_meme_ligne{
        display: none;
    }
	#containeur_une_biere_sur_la_meme_ligne{
		display: flex;
		flex-direction:  column;
		justify-content: center;
		margin: 2% 0% 2% 0%;
	}
    .bloc_presentation_photo_biere
    {
        max-width: 100%;
		height: 100%;
        margin-top: 5%;
    }
    .bloc_presentation_texte_biere
    {
        max-width: 100%;
		height: 100%;
        margin-top: 5%;
    }
    .bloc_presentation_photo_biere_gauche
    {
        max-width: 100%;
        margin-top: 5%;
    }
    .bloc_presentation_texte_biere_gauche
    {
        max-width: 100%;
        margin-top: 5%;
    }
    .bloc_presentation_photo_biere_droite
    {
        max-width: 100%;
        margin-top: 5%;
    }
    .bloc_presentation_texte_biere_droite
    {
        max-width: 100%;
        margin-top: 5%;
    }
}

/*-------------------------------------------------------------------------------------*/
/*-----------------------------------General----------------------------------------*/
/*-------------------------------------------------------------------------------------*/

strong
{
    font-weight: bold;
    font-size: 100%;
}

em
{
    font-style: italic;
}