p
{
    color: blue;
}


/* Nouvelles règles si la fenêtre fait au plus 1024px de large */

@media screen and (max-width: 4096px)
{
	body { color: #303030; text-align:center; font:13px/20px   Poppins, Lato, Verdana, Arial, Helvetica,sans-serif; margin: 0px auto 0px; padding: 0px;}
	#banner
	{
		background: url("./banners/cyclos.jpg") no-repeat center; 
		height:130px; 
		/*line-height:40px; */
		text-align: center;
	}
	#banner p {
		/*color: #FFF215 !important;*/
		color: #00a0e0 !important;
		font-size: 30px;
		font-weight: bold;
		padding:20px 0px 0px 0px;
		margin-top: 0px;
	}
    p
    {
        color: red; 
        //background-color: black;
        font-size: 1.2em;
    }
	#ag_cyclo_wide_screen {
		display:block;
	}
	#ag_cyclo_webapp {
		display:none;
	}
}
@media screen and (max-width: 1024px)
{
	body { color: #303030; text-align:center; font:13px/20px   Poppins, Lato, Verdana, Arial, Helvetica,sans-serif; margin: 0px auto 0px; padding: 0px;}
	#banner
	{
		background: url("./banners/cyclos_720_2.jpg") no-repeat center; 
		height:88px; 
		line-height:20px; 
	}
	#banner p {
		/*color: #FFF215 !important;*/
		color: #00a0e0 !important;
		font-size: 20px;
		font-weight: bold;
		margin: 0px;
		padding:10px 0px 10px;
	}
	#ag_cyclo_wide_screen {
		display:none;
	}
	#ag_cyclo_webapp {
		display:block;
	}
	#menu
	{
		margin-top: 0px;
	}
	#logo
	{
		margin-top: 0px;
	}
    p
    {
        color: black; 
        font-size: 1em;
    }
	h4
	{
		font-weight:700;
		margin: 10px 0px 0px 0px;
		font-size: 16px;
	}
	.ag_cyclo_sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	.ag_cyclo_meteo {
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.ag_cyclo_meteo .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.ag_cyclo_meteo a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: black;
		display: block;
		//transition: 0.3s;
	}

	.attach {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.attach .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.attach a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: black;
		display: block;
		//transition: 0.3s;
	}

	.depart {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.depart .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.depart a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		//transition: 0.3s;
	}

	.comment {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		right: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.comment .closebtn {
		position: absolute;
		top: 0;
		left: 5px;
		font-size: 30px;
	}

	.comment a {
		padding: 0px 8px 8px 0px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		//transition: 0.3s;
	}

	.ag_cyclo_sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		//transition: 0.3s;
	}

	.ag_cyclo_sidenav a:hover {
		color: #f1f1f1;
	}

	.ag_cyclo_sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}
  .ag_cyclo_sidenav {padding-top: 15px;}
  .ag_cyclo_sidenav a {font-size: 18px;}

}

@media screen and (max-width: 480px)
{
	body { color: #303030; text-align:center; font:13px/20px   Poppins, Lato, Verdana, Arial, Helvetica,sans-serif; margin: 0px auto 0px; padding: 0px;}
	#banner
	{
		background: url("./banners/cyclos_480_2.jpg") no-repeat center; 
		height:50px; 
		line-height:20px; 
	}
	#banner p {
		/*color: #FFF215 !important;*/
		color: #00a0e0 !important;
		font-size: 18px;
		font-weight: bold;
		margin: 0px;
		padding:5px 0px 0px 0px;
	}
	#ag_cyclo_wide_screen {
		display:none;
	}
	#ag_cyclo_webapp {
		display:block;
	}
	#menu
	{
		margin-top: 0px;
	}
	#logo
	{
		margin-top: 0px;
	}
    p
    {
        color: black; 
        font-size: 1em;
    }
	h4
	{
		font-weight:700;
		margin: 10px 0px 0px 0px;
		font-size: 16px;
	}
	.ag_cyclo_sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	.ag_cyclo_meteo {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.ag_cyclo_meteo .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.ag_cyclo_meteo a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: black;
		display: block;
		//transition: 0.3s;
	}

	.attach {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.attach .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.attach a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: black;
		display: block;
		//transition: 0.3s;
	}

	.depart {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		left: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.depart .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}

	.depart a {
		padding: 0px 0px 8px 8px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		//transition: 0.3s;
	}

	.comment {
		/*height: 160px;*/
		height: auto;
		width: 0;
		position: absolute;
		z-index: 1;
		top: 250;
		right: 0;
		background-color: #fafafa;
		border: 0px solid black;
		overflow-x: hidden;
		overflow-y: hidden;
		transition: 0.1s;
		padding-top: 5pxpx;
	}

	.comment .closebtn {
		position: absolute;
		top: 0;
		left: 5px;
		font-size: 30px;
	}

	.comment a {
		padding: 0px 8px 8px 0px;
		text-decoration: none;
		font-size: 25px;
		color: #ffffff;
		display: block;
		//transition: 0.3s;
	}

	.ag_cyclo_sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		//transition: 0.3s;
	}

	.ag_cyclo_sidenav a:hover {
		color: #f1f1f1;
	}

	.ag_cyclo_sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 30px;
	}
  .ag_cyclo_sidenav {padding-top: 15px;}
  .ag_cyclo_sidenav a {font-size: 18px;}

}
a.open:after {
	left: 0;
	content: '\f142';
	border: none;
	background: none;
	font: normal 25px/1 'dashicons';
	speak: none;
	display: inline;
	padding: 0;
	text-indent: 0;
	text-align: center;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none !important;
}

a.closed:after {
	left: 0;
	content: '\f140';
	border: none;
	background: none;
	font: normal 25px/1 'dashicons';
	speak: none;
	display: inline;
	padding: 0;
	text-indent: 0;
	text-align: center;
	position: relative;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-decoration: none !important;
}