/*-----------------------*/
/*Cartographie Google map*/
/*-----------------------*/

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
*/ 
 
 #map {
  height: 600px;border: 3px solid #C3C3C3;
}

html {
        font-size: 0.7rem;font-family: Arial, sans-serif;
      }


* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.row {
  display: -webkit-flex;
  display: flex;
}

/* Create three unequal columns that sits next to each other */
.column {
  padding: 0px;
  height: 600px; /* Should be removed. Only for demonstration */
}

/* Left column */
.column.legend {
   -webkit-flex: 1.5;
   -ms-flex: 1.5;
   flex: 1.5;
}

/* Middle column */
.column.carte {
  -webkit-flex: 4.2;
  -ms-flex: 4.2;
  flex: 4.2;
}

/* Right column */
.column.fiche {
   -webkit-flex: 1.5;
   -ms-flex: 1.5;
   flex: 1.5;
}



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 767px) {
  .row {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
.column.legend{font-size:11px;}
.column.fiche{font-size:11px;}
.msg_fich::after {
    content: " ci-dessous";
	}
.column.legend, .column.carte, .column.fiche {border : none;
	}
#vignette_diocese img {width:100px;}

input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;

  border: 1px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 2px solid red;}

.ico_size {vertical-align: middle;
        width: 24px;height: 31px;
      }


}


@media screen and (min-width: 767px) and (max-width: 1023px) {
  .column {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
.column.legend{font-size:11px;}
.column.fiche{font-size:12px;}
.msg_fich::after {
    content: " ci-contre";
	}
.column.legend, .column.carte, .column.fiche {border : none;
	}
#vignette_diocese img {width:120px;}

input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;

  border: 1px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 2px solid red;
}

.ico_size {vertical-align: middle;
        width: 24px;height: 31px;
      }


}




/* Responsive layout - makes the three columns next to each other instead of stack on top of each other  */
@media screen and (min-width: 1024px) {
  .column.legend, .column.carte, .column.fiche{
    -webkit-flex-direction: row;
    flex-direction: row;
  }
.column.legend{font-size:12px;}
.column.fiche{font-size:13px;} 
.msg_fich::after {
    content: " ci-contre";
	}
#vignette_diocese img {width:auto;}

input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;

  border: 1px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 3px solid red;
}

.ico_size {vertical-align: middle;
        width: 28px;height: 36px;
      }


}

h1 {
        font-size: calc(1.5rem + 2vw);
        margin: 0;
      }

h2 {
        font-size: calc(1.5rem + 1vw);
        margin: 0;
      }

h3 {
        font-size: calc(1.0rem + 0.3vw);
        margin: 0;
      }

h4 {
        font-size: calc(1.0rem + 0.1vw);
        margin: 0;
      }

.selector-control {
  font-size: 12px;
  line-height: 20px;
  vertical-align: baseline;
}


#title {
 color: #fff;
 background-color: #c90066;
  //font-size: 15px;
  //font-weight: 500;
 // padding: 5px 5px;  
}

#sub_title{
color: #fff;
background-color: #c90066;
//font-size: 14px;
//font-weight: 500;
//padding: 5px 5px;  
}



.column.legend { width:auto;

        //font-family: Arial, sans-serif;
        background: #f1f1ee;
        padding: 10px;
        margin: 0px;
        border: 3px solid #C3C3C3;
      }
.column.legend h3 {
        margin-top: 0;
      }
/*
.column.legend img {
        vertical-align: middle;
      }
*/

.column.fiche{
	width:auto;
	float: left;
        //font-family: Verdana;	
        background: #f1f1ee;
        padding: 10px;
        margin: 0px;
        border: 3px solid #C3C3C3;
	word-break: break-word;  
      }

.column.fiche img {
  max-width: 100% !important;
  height: auto !important;
      }

		div#conteneur_fiche {
			display: flex;
			width: auto;
			height: 600px;			
			/* Ci-dessous utilisation des propriétés */
			justify-content: center;
			align-items: center;
		}
		div#contenu_fiche {
			color : #FF0000;
			width: auto;
			height: 300px;			
			text-align: center;
		}