/*@font-face {
    font-family: Meiryo;
    src: url(meiryo.ttc);
}

@font-face {
    font-family: Meiryo;
    src: url(meiryob.ttc);
	font-weight:bold;
}*/
:root{
	/*--navColor-start: #b471bd;
	--navColor-end: #49bb9b;
	--navColor-hover: #cfb0b0;*/
	--navColor-start: #622d11;
	--navColor-end: #9f8118;
	--navColor-hover: #bea557;
}

*{
	font-size: 1.05em;
}

.spoiler {
  display: none;
}

.show {
  color: white;
  height: 5px;
  margin-left: calc(50% - 14px);
  //border:1px solid black;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding-left: 7px;
  padding-right: 7px;
  //padding-bottom: 5px;
  cursor: pointer;
  //vertical-align:middle;
}


.error img {
    float:right;
	width:200px;
    margin-right:-17px;
    margin-bottom:-20px;
    vertical-align:middle;
}

.error .text {
    height: 135px;
	width:100%;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

* {
	margin:0;
	padding:0;
} 

html, body{
	height:100%;
	text-align:center;	
}

body{
	background-image: url("../images/bg.png");
	//background-size: 100% auto;
	//background-color: #7dad71;
	//background-repeat: no-repeat;
	//font-family:Meiryo;
	font-family:"Roboto", "Hiragino Kaku Gothic Pro", "Meiryo", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

#wrap {
	min-height: 100%;
}

#banner{
	//width:40%;
	//height:10%;
	height:25%;
	//margin: auto auto;
	margin-top: 20px;
	margin-bottom: 10px;
}

#nav{	
	//background-color:pink;
    background-repeat:no-repeat;
    background-size:auto;
	width:80%;
	//height:6%;
	margin: auto auto;
}

#nav nav, #nav table{
	//background: linear-gradient(to right, blue , yellow, red); /*TEST*/
	//background-color: red; 
	background: linear-gradient(to right, var(--navColor-start) , var(--navColor-end)); /*vert Niantic */
	//background: linear-gradient(to right, #024da2 , #023175); /*bleu Niantic */
	//background-image: url('../images/nav_bg.png');
	//background-size: 277px 64px;
    -webkit-transition: background-color 0.5s ease-in-out;
    -moz-transition: background-color 0.5s ease-in-out;
    -o-transition: background-color 0.5s ease-in-out;
    -khtml-transition: background-color 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
	//opacity:0.5;
}

#nav table{
	width:100%;
	max-height:45px;
	height:35px;
	border-radius:25px;
	padding:0px;
    border-collapse: collapse;
    border-spacing: 0;
}

#nav td {
    text-align:center; 
	width:20%;
    border-left: 3px solid white;
	//border: none;	
	font-size:24px;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
	padding:0px;
}

#nav tr{
	padding:0px;
}

#nav td:hover{
    background-color: var(--navColor-hover);/*rgb(207 176 176); */
    color:#fff;
}

#nav #first_td{
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
	border-left: none;
}

#nav #last_td{
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}

#nav td a {
	color:white;
	text-decoration:none;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
    justify-content: center;
}

#content{
	overflow:auto;
	//padding-bottom: 100px; // FOOTER SIZE !!!
	//background-color:blue;
    background-repeat:no-repeat;
    background-size:auto;
	width:60%;
	padding-top:20px;
	min-height:30%;
	//height:84%;
	margin: auto auto;
	overflow: hidden;
}

#footer{	
	color: white;
	border-top-right-radius: 2em;
    border-top-left-radius: 2em;
	background-color:rgba(0, 0, 0, 0.6);
    background-repeat:no-repeat;
    background-size:auto;
	max-width:80%;
	margin: auto auto;
	position: relative;
	margin-top: -100px; /* negative value of footer height */
	height: 100px;
	clear:both;
}

#footer_content{
	padding-top:5px;
	text-align:center;
	margin: auto auto;
	color:white;
}

#footer_content table {
	color:white;
	margin: auto auto;
	text-align:center;
}

#footer .logo{
	//max-height:40px;
	width:20%;
}

#footer .big_logo{
	//max-height:90px;
	margin-top:-5px;
	width:30%;
}

#footer .big_logo_right{
	max-height:80px;
}

.news, #news_epingle, .accueil{
	width:100%;
	//padding:10px;
	background-color: rgba(245,255,248,.75);
	border-radius: 6px;
	/*border: 10px solid transparent;*/
	margin-bottom:20px;
	//padding-left:10px;
}

.news li, .accueil li, #sommaire li{
	background: url(../images/list.png) no-repeat left 5px;
    background-size: 24px;
    padding-left: 1.7em;
    list-style: none;
}


.news img, #news_epingle img{
	max-width:100%;
	max-height:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
	border-radius:15px;
}

.news iframe, #news_epingle iframe{
	//max-width:100%;
	//max-height:100%;
    //display: block;
    margin-left: 20%;
    width: 65%;
	border-radius:15px;
}

.news .title, #news_epingle .title{
	font-weight:bold;
	//padding-left:30px;
	font-size:24px;
	border-bottom: 1px solid black;
    text-align: justify;
    text-justify: inter-word;
}

.news .title.pinned{
	position:relative;
}

.news .title.pinned.show-pinned:after{
    position: absolute;
    right: 0px;
    top: 0px;
    margin-right: -18px;
    margin-top: -17px;
    font-size: 0.7em;
    content: '📌';
    filter: hue-rotate(227deg) contrast(3);
    opacity: 0.3;
}

.news .contenu, #news_epingle .contenu, .accueil .contenu{
	padding-top:20px;
    text-align: justify;
    text-justify: inter-word;
}

.news .date, #news_epingle .date{
	padding-top: 10px;
	text-align:right;
	color:darkgrey;
	font-size:14px;
}

p {
	margin:-8px;
}

li p {
    margin-left: 0px;
}

.scrollup {
    width: 75px;
    height: 75px;
    position: fixed;
    bottom: 115px;
    left: 80%;
    display: none;
    text-indent: -9999px;
	//background: url('../images/icon_top.png') no-repeat;
	//background-size:75px 75px;
    //background-color: #000;
	z-index:2;
}
.scrollupD:hover{
    //background: url('../images/icon_top_over.gif') no-repeat;
	//background-size:75px 89px;
    width: 75px;
    height: 89px;
}

#content table {
	//background-color: rgba(255, 255, 255, 0.9);
	padding:15px;
	width:100%;
	//border: 2px solid black;
	//border-radius: 15px; /*Désactiver cadre custom*/
    /* Cadre custom
	border-image: url(../images/border.png) 88 round;
	border-image-outset:5px;
	*/	
}

nav {
	background-color: rgba(255, 255, 255, 0.9);
	width:100%;
	//border: 1px solid black;
	border-radius:25px;
}

nav:after{
    content: "";
    display: block;
    clear: both;
}

nav a { 
	text-decoration: none;
	color: white;
    display: block;
}
nav a:hover {
	text-decoration: underline;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0; 
}

nav ul li { 
	margin: 0;
	padding: 0;
	width: 20%;
	text-align:center;
}

/* Top-level menu */

nav > ul > li#left{
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
}

nav > ul > li#right{
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}

nav > ul > li {
    float: left;
    position: relative; 
	color:#000;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}

nav > ul > li > a { 
    padding: 10px 30px;
    border-left: 3px solid white;
    display: block;
	font-size:24px;
}

nav > ul > li:hover {
    background-color: #A4A4A4; 
    color:#fff;  
}

nav > ul > li:first-child {
	margin: 0; 
}

nav > ul > li:first-child a { 
	border: 0; 
}

/* Dropdown Menu */

nav ul li ul { 
    position: absolute;
    width: 101%; 
    margin: 0;
    padding: 0;
    display: none;
    z-index:5;
}


nav ul li ul li { 
    text-align: center;
    width: 100%; 
    color:#000;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -ms-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear;
}


nav ul li ul li:hover { 
    background: #A4A4A4;
    color:#fff;
}

nav ul li ul a { 
	font-size:24px;
	padding: 10px 0; 
}

nav ul li:hover ul {
	display: block;
    background: #ccc;
 }

.hidden{
	display: none;
}

@media
only screen and (orientation:portrait) {
  #content {
    width: 95%; 
  }

  #nav {
    width:95%;
  }

  #banner {
    //width:95%;
  }
}

@media 
all and (max-width: 480px) and (min-width: 50px) {
   #nav td{
    font-size: 3vw;
   
   }
}

@media 
all and (max-width: 720px) and (min-width: 50px) {
   #footer_content table{
    font-size: 2vw;
   }
}