*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body { 
	background: #111;
	margin: 0px auto;
	width: 1024px;
	font-family: 'Trebuchet MS', sans-serif;
	color: white;
}
/*style liens*/ 
a:link {color: #dff948;text-decoration: none;}
a:visited {color: #dff948;text-decoration: none;}
a:hover {color: #ffa500;text-decoration: none;}
a:active {color: #dff948;text-decoration: none;}

/*début menu*/ 
#checkbox-demo, .toggle {
	display: none;
}
.menu {
	padding: 0;
	margin: 0 0 14px 0;
	height: 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	list-style-type: none;
}
.menu li a {
	text-decoration: none;
	align-self: center;
	border-radius: 8px;
	font-size: 1em;
	padding: 2px 4px;
	transition: background .2s linear;
}
.CoulMenuInv {
	background: #555;
	font-weight: bold;
	border-radius: 8px;
	font-size: 1em;
	padding: 4px 4px;
}
.CoulMenu {
	font-size: 1em;
	padding: 4px 4px;
}
.AffMenuBlog {
	line-height: 25px;
	text-align: center;
	padding: 10px 0 0 0;
	text-decoration: none;
}
.demo {
	background-color: #888;
	border-radius: 0 0 10px 10px;
}
.demo li a {
	color:#FFF;
	font-weight: bold;
}
.demo li a:hover {
	background: #555;
	font-weight: bold;
}
/*fin menu*/ 
#banniere {
	background-image: url(../images/banniere.jpg);
	height: 130px;
	background-size: 100% 100%;
	position: relative;
}
#fleche {
	text-shadow: 2px 2px 4px black;
	color: white;
	padding: 2px;
}
/*titre banniere*/
h1 {
	background-color: rgba(24,24,24,0.3);
	color: #F5F5DC;
	margin: 0;
	padding: 0 0 7px 0;
	font-size:2em;
	text-align: center;
	font-style: italic;
	text-shadow: 2px 2px 4px black;
}
/*titre des cases*/
h2 {
	background-color: #666;
	color: #F5F5DC;
	font-size: 0.7em;
	text-align: center;
	text-transform: uppercase;
	padding: 2px;
	margin: 0;
	border-radius: 10px 10px 0 0;
}
h3 {
	background-color: #666;
	color: #F5F5DC;
	font-size: 0.7em;
	text-align: center;
	text-transform: uppercase;
	padding: 2px;
	margin: 0;
}
bas_h2 {
	background-color: #666;
	padding: 2px;
	margin: 0;
	border-radius: 0 0 10px 10px;
}
h4 {
	background-color: #666;
	color: #F5F5DC;
	font-size: 1em;
	text-align: center;
	text-transform: uppercase;
	padding: 2px;
	margin: 0;
	border-radius: 10px;
	font-style: italic;
}
/*données principales*/
.Rouge {
    color: #fa1d2d;
	font-weight: bold;
}
.Bleu {
    color: #3399ff;
	font-weight: bold;
}
.BleuFroid {
    color: #388ab0;
	font-weight: bold;
}
.Jaune {
    color: #ffff00;
	font-weight: bold;
}
.Orange {
    color: #ffa500;
	font-weight: bold;
}
.Violet {
    color: #f81ec1;
	font-weight: bold;
}
.Cyan {
    color: #00E5E5;
}
.Blanc {
    color:#ffffff;
	font-weight: normal;
}
.Noir {
    color:#000;
	font-weight: normal;
}
.Gris {
    color:#AFAFAF;
	text-transform:uppercase;
	font-size: 0.8em;
}

.GrisInfo {
    color:#AFAFAF;
	font-size: 0.9em;
	padding: 5px 0 10px 10px;
}

.Vert {
    color:#00CC00;
}
.VertInv {
	background-color: #00CC00; 
	color: black;
	font-size: 1em;
	border-radius: 5px;
}
.BlancInv {
	background-color: white; 
	color: black;
	font-size: 0.9em;
	font-weight: bold;
	border-radius: 5px;
}
.BlancTitre {
    color:#white;
	text-transform:uppercase;
	font-size: 0.9em;
}
.BleuInv {
	background-color: #3399ff; 
	color: white; 
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.BleuFroidInv {
	background-color: #388ab0; 
	color: white; 
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.RougeInv {
	background-color: #fa1d2d;
	color: white; 
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.OrangeInv {
	background-color:#ffa500; 
	color:black;
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.VioletInv {
	background-color: #f81ec1; 
	color:white;
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.CyanInv {
	background-color:#00E5E5; 
	color:black;
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.JauneInv {
    background-color:#FF0; 
	color:black;
	font-size: 1em;
	font-weight: bold;
	border-radius: 5px;
}
.GrisInv {
    background-color:#AFAFAF; 
	color:black;
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 5px;
}
.NoirInv {
    background-color:#000; 
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 5px;
}
.GrisClimato {
	color:black;
	font-size: 0.7em;
	font-weight:bold;
}
.BleuFort {
	background-color: #006ab3; 
	color: white; 
	font-size: 1em;
	font-weight:bold;
	border-radius: 5px;
}
.BleuModere {
	background-color: #009ee0; 
	color: white; 
	font-size: 1em;
	font-weight:bold;
	border-radius: 5px;
}
.BleuFaible {
	background-color: #5ec5ed; 
	color: white; 
	font-size: 1em;
	font-weight:bold;
	border-radius: 5px;
}
.BlancExp {
	vertical-align: text-top;
	font-size: 0.6em;
}
.VertFWIInv {
	background-color: green; 
	color: white;
	font-size: 1.4em;
	border-radius: 5px;
}
.AffFWI {
	padding: 12px;
}
.TailleAlerte {
	padding: 8px;
	font-size: 0.8em;
}
.ciel {
	padding: 8px 0 2px 0;
}
.container {
	margin: 0px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.AffGrand {
	font-size: 2em;
	text-shadow: 1px 1px 2px black;
	color: white;
	padding: 8px 0 2px 0;
	text-align: center;
}
.AffGrandTemp {
	font-size: 2em;
	text-shadow: 1px 1px 2px black;
	color: white;
	text-align: center;
}
.AffGrandTxt {
	font-size: 1.5em;
	text-shadow: 1px 1px 2px black;
	color: white;
	padding: 5px;
}
.AffGrandDirVent {
	font-size: 1.4em;
	text-shadow: 1px 1px 2px black;
	color: white;
	padding: 2px;
}
#AffGrandPluie{
	font-size: 0.6em;
}
#AffGrandSoleil{
	font-size: 0.7em;
}
#AffGrandAir{
	font-size: 1.5em;
	text-shadow: 1px 1px 2px black;
	color: white;
	padding: 20px 0 2px 0;
}
.AffText1h {
	margin: 2px 0 0 0;
	border-radius: 0;
	font-size: 0.78em;
}
.AffMoyen {
	text-shadow: 1px 1px 2px black;
	color: white;
	font-size: 1.4em;
	padding: 10px;
}
.AffPetit {
	color: white;
	font-size: 0.8em;
	padding: 4px 0 10px 0;
	line-height: 17px;
	text-align: center;
}
.AffVigilance2 {
	font-size: 0.8em;
	text-align: center;
	padding: 4px;
	margin: 2px 0 0 0;
	border-radius: 0;
	background-color: #28D762; 
	color: black;
	font-weight: bold;
}
.AffWorldExt {
	font-size: 0.8em;
	text-align: center;
	margin: 4px 0 2px 0;
}
.AffEntete {
	font-size: 0.8em;
	text-align: center;
	padding: 4px;
	margin: 2px 0 0 0;
	border-radius: 0;
}
.AffEntete2 {
	font-size: 0.8em;
	text-align: center;
	margin: 4px 0 2px 0;
}
.AffEntete3 {
	font-size: 0.8em;
	text-align: center;
	padding: 6px;
	margin: 2px 0 0 0;
	border-radius: 0;
}
.TitreEntete {
	font-size: 0.9em;
	text-align: center;
	padding: 8px;
}
.connect {
	font-size: 1em;
	text-align: center;
	padding: 10px;
}
.NeigeEntete {
	font-size: 0.8em;
	text-align: center;
	margin: 8px;
}
.sondesol {
	margin: 12px 0 0 0;
	font-size: 0.8em;
	line-height: 16px;
}
.AffPollen {
	font-size: 0.9em;
	padding: 8px;
	line-height: 20px;
	text-align: center;
}
.total {
	width: 100%;
	text-align: center;
	border-radius: 10px;
	background-color: #333;
}
.grand {
	width: 48%;
	text-align: center;
	border-radius: 10px;
	background-color: #333;
}
.deuxtier {
	background-color: #333;
	width: 74%;
	text-align: center;
	border-radius: 10px;
}
.moyen1 {
	background-color: #333;
	width: 24%;
	text-align: center;
	border-radius: 10px;
}
.moyen2 {
	background-color: #333;
	width: 23%;
	text-align: center;
	border-radius: 10px;
}
.Moyen100 {
	background-color: #333;
	width: 100%;
	text-align: center;
	border-radius: 10px;
}
.moyen23 {
	background-color: #111;
	width: 23%;
}
.moyen24 {
	background-color: #111;
	width: 24%;
}
.grand50 {
	background-color: #111;
	width: 48%;
}
.petit5 {
	background-color: #111;
	width: 5%;
}
.petit12 {
	background-color: #111;
	text-align: center;
	width: 12%;
}
.h_40 {
	margin-bottom: 15px;
	height: 45px;
}
.h_65 {
	margin-bottom: 15px;
	height: 65px;
}
.h_70 {
	margin-bottom: 15px;
	height: 70px;
}
.h_100 {
	margin-bottom: 15px;
	height: 95px;
}
.h_120 {
	border-radius: 10px;
	background-color: #333;
	text-align: center;
	margin-bottom: 15px;
	height: 113px;
}
.h_130 {
	margin-bottom: 15px;
	height: 135px;
}
.h_50duo {
	border-radius: 10px;
	background-color: #333;
	text-align: center;
	margin-bottom: 15px;
	height: 70px;
}
.h_160duo {
	border-radius: 10px;
	background-color: #333;
	text-align: center;
	margin-bottom: 15px;
	height: 132px;
}
.h_100duo {
	border-radius: 10px;
	background-color: #333;
	text-align: center;
	margin-bottom: 15px;
	height: 91px;
}
.h_250duo {
	border-radius: 10px;
	background-color: #333;
	text-align: center;
	margin-bottom: 15px;
	height: 280px;
}
.h_150 {
	margin-bottom: 15px;
	height: 145px;
}
.h_160 {
	margin-bottom: 15px;
	height: 155px;
}
.h_180 {
	margin-bottom: 15px;
	height: 150px;
}
.h_200 {
	margin-bottom: 15px;
	height: 185px;
}
.h_240 {
	margin-bottom: 15px;
	height: 240px;
}
.h_280 {
	margin-bottom: 15px;
	height: 385px;
}
.h_500 {
	margin-bottom: 15px;
	height: 530px;
}
.h_infini {
	margin-bottom: 15px;
}
#flexWebcam {
	margin-bottom: 15px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.webcam {
	border-radius: 10px;
}

.radar {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.button {
	border-radius: 8px;
}
.ictemps {
	margin: 4px 0 0 0;
}
#chartcontainer {
	border-radius: 8px;
}
.baspage {
	background-color: #333;
	border-radius: 10px 10px 0 0;
	color:#AFAFAF;
	font-size: 0.8em;
	text-align: center;
	padding: 5px;
}
.LienRecord{
    background-color: #F5F5DC; 
	color: black;
	font-size: 1em;
	border-radius: 5px;
	animation: LienRecord 4s 5;
}
.LienRecordBleu{
    background-color: #3399ff; 
	color: white;
	font-weight: bold;
	font-size: 1em;
	border-radius: 5px;
	animation: LienRecord 4s 5;
}
.LienRecordRouge{
    background-color: #fa1d2d; 
	color: white;
	font-weight: bold;
	font-size: 1em;
	border-radius: 5px;
	animation: LienRecord 4s 5;
}
.LienRecordJaune{
    background-color: #FF0; 
	color: black;
	font-weight: bold;
	font-size: 1em;
	border-radius: 5px;
	animation: LienRecord 4s 5;
}
.LienRecordClimato{
	animation: LienRecord 3s infinite;
}	
@keyframes LienRecord{
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}
.oragevalid{
	background-color:#303030; 
	color:white;
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 5px;
	animation: LienRecord 3s infinite;
}
.previ {
	color: black;
	background-color: #87CEEB;
	text-align: center;
	font-size: 0.8em;
}
.fwi {
	background-color: #777;
	border-radius: 10px;
	color:#000;
	text-align: center;
	padding: 5px;
}
[data-tip]{
  position: relative;
}
[data-tip]:hover:before{
  content: attr(data-tip);
  position: absolute;
  padding: 0 5px;
  height: 14px;
  line-height: 14px;
  background-color: rgba(255, 255, 255, 1);
  left: -10px;
  top: -24px;
  font-size: 14px;
  border-radius: 3px;
  white-space: nowrap;
  color: #000;
  font-size: 11px;
}
[data-tip]:hover:after {
  content: "";
  position: absolute;
  border-top: 8px solid rgba(255, 255, 255, 1);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 0;
  top: -10px;
}

/*déroulant vticker*/
#ticker_temp > ul, #ticker_pluie > ul, #ticker_pression > ul, #ticker_vent > ul, #ticker_vent2 > ul, #ticker_soleil > ul {
	width: 100%;
	margin: 0 auto;
}
#ticker_temp, #ticker_pluie, #ticker_pression, #ticker_vent, #ticker_vent2, #ticker_soleil {
	visibility: hidden;
}
li
{
	list-style-type: none;
}
/*climatologie*/
.tableau {
   font-size:0.9em;
   font-weight: bold;
   margin: 0px auto;
   width: 100%;
}
.tabcell {
	padding: 4px;
	height: 40px;
}
.tabcell:hover {
  border-radius: 10px;
}
.tabtransp:hover {
  opacity: 0.7;
}
.tableautd {
    background-color: #777;
	text-align: center;
 }
.tableautd2 {
	background-color: #999;
    text-align: center;
}
.tableautr {
    background-color: #444;
	text-align: center;
}
.tabPetit {
	font-size: 0.8em;
}
.tabPadding {
	padding: 4px;
}
.tableauTitre {
	font-size: 1em;
	margin: 0 2px 0 2px;
	padding: 2px;
	background-color: #666;
	color: #F5F5DC;
	text-align: center;
	text-transform: uppercase;
	border-radius: 10px 10px 0 0;
}
.tableauTotal {
    background-color: #ccc;
	color: black;
	text-align: center;
}
.tableauBas {
	background-color: #555;
	border-radius: 0 0 10px 10px;
	text-align: center;
}
.tableauHaut {
	background-color: #555;
	border-radius: 10px 10px 0 0;
}
.tabprev {
	font-size: 0.7em;
	padding: 6px 0;
	margin: 0px auto;
	width: 96%;
}
.tabBouton {
	padding: 2px 5px;
	text-transform: uppercase;
	border-radius: 5px;
	font-size: 0.7em;
}
.afftxtblog {
	margin: 10px;
	text-align: left;
	font-size: 0.9em;
	color: #CCC;
}


/* start of desktop styles */

@media screen and (max-width: 991px) {
     /* start of large tablet styles */

}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */

}

@media screen and (max-width: 479px) {
     /* start of phone styles */
	body { 
		width: 100%;
	}
	h1 {
		font-size:1.5em;
	}	
	#banniere {
	height: 120px;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	}
	.ciel {
	padding: 8px 0 2px 0;
	}
	#flexWebcam {
	display: flex;
	flex-direction: column-reverse;
	}
	.webcam {
	width: 100%;
	height: auto;
	}
	.radar {
	width: 100%;
	height: auto;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	}
	
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.moyen1, .moyen2, .grand, .deuxtier {
		background-color: #333;
		width: 100%;
		text-align: center;
	}
	.moyen23, .moyen24, .grand50 {
		background-color: #111;
		width: 100%;
		text-align: center;
	}
	#bienvord {order: 1;}
	#alertord {order: 2;}
	#inford {order: 3;}
	#tempord {order: 4;}
	#ressentiord {order: 5;}
	#djuord {order: 6;}
	#pressionord {order: 7;}
	#pluieord {order: 8;}
	#pluie1hord {order: 9;}
	#humiditeord {order: 10;}
	#roseeord {order: 11;}
	#ventinstantord {order: 12;}
	#ventmaxord {order: 13;}
	#ventmoyenord {order: 14;}
	#ventmoisanord {order: 15;}
	#solord {order: 19;}
	#soleilord {order: 17;}
	#radiationord {order: 18;}
	#uvord {order: 16;}
	#airord {order: 20;}
	#mfranceord {order: 21;}
	#ephemerideord {order: 22;}
	
	
	.toggle {
		clear: both;
		display: block;
		text-align: center;
		font-size: 14px;
		line-height: 40px;
		cursor: pointer;
		width: 100%;
		height: 40px;
		font-size: 18px;
		color: #595959;
		background: #dbdbdb;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		transition: all .1s linear;
		margin: 0 0 14px 0;
	}
	.toggle:hover {
		background: #fff;
	  }
	#checkbox-demo:checked + label .demo li {
		opacity: 1;
		visibility: visible;
		transition: all .7s linear;
	}

	#checkbox-demo:checked + label .demo {
		height: 100%;
	}
	.menu {
		border-radius: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 0px;
		transition: height .3s linear;
		margin: 0;
	}
	.menu li {
		border-radius: 0;
		display: flex;
		/* magic */
		align-self: center;
		width: 100%;
		opacity: 0;
		visibility: hidden;
	}
	.menu li a {
		border-radius: 0;
		padding: 0;
		width: 100%;
		text-align: center;
		align-self: center;
		align-content: center;
	}
	.menu li a:hover {
		padding: 4px;
		font-weight: bold;
	}
}