/**DETAILS CSS PAGES/*/

.center{text-align:center;}

/********************************/
/********MAIN INDEX DOWNLOAD/********/
/********************************/

#download a:visited, #download a:link{color:#9b6c3b;}
#download .introduction{text-align:center; line-height:2.4rem;}
#download section.install{display:flex; justify-content:space-between; text-align:center; margin-bottom:40px;}
#download section.chipset{display:flex; justify-content:center; text-align:center; }
#download section.install article{width:30%;}
#download section.install article a, #download section.chipset article a, #download .editor a, #download p.wiki a,
#download .testso a{color:#9b6c3b; font-weight:bold; text-decoration:underline;}

#download section.install article p{margin:0; line-height:2.5rem;}
#download section.pack article{padding: 0 10px;}
#download section.pack p:last-child{line-height:2.8rem; margin-bottom:40px;}

#download section.editorgame p:last-child{line-height:1rem; margin-bottom:40px;}

#download section.install figure {margin: 0;}
#download .editor{text-align:center; margin:auto;}
#download .skintest{text-align:center;}
#download .listinterface{display:flex; justify-content:space-around; text-decoration:underline; color:#9b6c3b; font-weight:bold;}
#download .floweryellow{margin-top:40px;}

/*********************************************/
/*****************SCREEN************************/
/***********************************************/

#screen .gallery img{width:400px; height:320px; margin-bottom:15px;}
#screen article{display:flex; flex-wrap:wrap; justify-content:space-between;}
#screen h4{text-align:center; text-decoration:underline;}
#screen a:visited, #download a:link{color:#9b6c3b;}
#screen a{color:#9b6c3b;}

/*
#screens.gallery img{width:400px; height:320px; margin-bottom:15px;}
#screens article{display:flex; flex-wrap:wrap; justify-content:space-between;}
#screens h4{text-align:center; text-decoration:underline;}
#screens a:visited, #download a:link{color:#9b6c3b;}
#screens a{color:#9b6c3b;}
*/

/*********************************************/
/*****************INTERFACES************************/
/***********************************************/

body {background-image: url("../images/crossword.png");}
#interfaces a{color:#9b6c3b;}
#interfaces a:visited, #download a:link{color:#9b6c3b;}
#interfaces{text-align:center; margin:auto; font-family: 'Open Sans', sans-serif;}
#interfaces img{width:100%;}
#interfaces h5{margin-top:10px;}

/*********************************************/
/*****************UNIVERS************************/
/***********************************************/
#univers a{color:#9b6c3b;}
#univers a:visited, #univers a:link{color:#9b6c3b;}
#univers{text-align:center; margin: 45px auto;}
#univers figure img{width:70%;}
#univers .personnage{display:flex; flex-wrap:wrap; justify-content:space-between;}
#univers figure{width:48%; display:inline-block; margin:0;}
#univers p.intro{font-style:italic; width:70%; margin:auto; line-height: 3rem; margin:55px auto;}
#univers nav{float:none; color:#9b6c3b; font-weight:bold; font-size:2rem;}
#univers nav>ul{display:flex; justify-content:space-between; list-style:none; padding:0; margin:0;}
#univers section#world img{width:30%;}
#univers #rp{text-align: left;}
#univers h3{font-size:2rem; margin-top:45px;}
#univers .defrp{text-align:center; width: 80%; margin:auto;}
#univers section{line-height:2.5rem;}
#univers h4{text-indent:45px;}
#univers section a{text-decoration:underline; font-weight:bold; text-align:center; display:block;}
#univers ul{margin-left:125px;}

/*********************************************/
/*****************GUIDE PRATIQUE************************/
/***********************************************/

#guidepratique{line-height:2.5rem; margin:55px auto;}
#guidepratique img{margin:auto; text-align:center; display:block;}
#guidepratique .intro{width:85%; margin:auto;}
#guidepratique a{color:#9b6c3b;}
#guidepratique a:visited, #guidepratique a:link{color:#9b6c3b;}
#guidepratique .block{display: block;}
#guidepratique nav{float:none; color:#9b6c3b; font-weight:bold; font-size:2rem; margin-top:60px;}
#guidepratique nav>ul{display:flex; justify-content:space-between; list-style:none; padding:0;}
#guidepratique section .vMobile{display:none;}

/*********************************************/
/*****************CSS CARDS CARTE************************/
/***********************************************/

#cartes div .front{transform-style: preserve-3d; height: 100%;}
#cartes .front span{position: absolute;bottom: 10px;right: 10px;}	
#cartes #grid-containter{margin:auto;width:1000px;margin-bottom: 40px;}
#cartes .card-grid { width: 150px;height: 150px;margin: 20px;display: inline-block;}
#cartes h3{padding-top:45px;}

/*********************************************/
/*****************CSS CARDS CHASSE************************/
/***********************************************/

#chasses .medaille{width:55px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; vertical-align:middle;}

.chasses {
  max-width: 365px;
  padding: 25px 20px 35px 20px;
  overflow: hidden;
}
.chasses .main {
  float: left;
  width: 100%;
  position: relative;
}
.chasses .main div {
  border-radius: 5px 5px 0 0;
  float: left;
  width: 100%;
}
.chasses .main div .content {
  float: left;
  width: 100%;
  padding: 16px 8px 25px 18px;
  position: relative;
  text-align: center;
  height:200px;
  background-color: #c3a380;
}
@media (min-width: 414px) {
  .chasses .main div .content {
    text-align: left;
  }
}
.chasses .main div .content img {
  display: inline-block;
  width: 140px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
@media (min-width: 414px) {
  .chasses .main div .content img {
    float: left;
    width: 96px;
    margin-right: 6%;
  }
}
.chasses .main div .content aside {
  float: left;
  width: 100%;
  color: #ffffff;
}
@media (min-width: 414px) {
  .chasses .main div .content aside {
    width: 59%;
  }
}
.chasses .main div .content aside h1 {
  font-weight: 100;
  font-size: 22px;
  margin-bottom: 10px;
}
.chasses .main div .content aside p {
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 160%;
}
.chasses .main .title {
  float: left;
  width: 100%;
  background-color: #9b6c3b;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: all 0.55s;
  -moz-transition: all 0.55s;
  -o-transition: all 0.55s;
  transition: all 0.55s;
}
.chasses .main .title.active {
  max-height: 100px;
  -webkit-transition: all 1.3s;
  -moz-transition: all 1.3s;
  -o-transition: all 1.3s;
  transition: all 1.3s;
  border-radius:0;
}
.chasses .main .title.active p {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  transition-delay: 0.2s;
}
.chasses .main .title p {
  padding: 0 30px;
  color: #ffffff;
  font-size: 16px;
  display: inline-block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.chasses .main button {
  position: absolute;
  bottom: 0;
  right: 50%;
  background-color: #333333;
  color: white;
  border: 0;
  width: 150px;
  height: 48px;
  text-align: center;
  border-radius: 30px;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: -24px;
  margin-right: -75px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  transition-delay: 0.1s;
  outline: none;
  overflow: hidden;
  z-index: 10;
  font-family: inherit;
}
.chasses .main button span {
  opacity: 1;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
  transition-delay: 0.4s;
  display: block;
  width: 140px;
  float: left;
  padding: 15px 0px;
}
.chasses .main button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.chasses .main button svg path {
  fill: white;
}
.chasses .main button.active {
  margin-right: 0;
  right: 20px;
  width: 45px;
  height: 45px;
  margin-bottom: -32.5px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 65px;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.chasses .main button.active span {
  opacity: 0;
  transition-delay: 0s;
  width: 200px;
}
.chasses .main button.active svg {
  opacity: 1;
  transition-delay: 0.5s;
}
.chasses nav {
  float: left;
  width: 100%;
  overflow: hidden;
  max-height: 0px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.chasses nav.active {
  max-height: 600px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.chasses nav.active div.nav {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
.chasses nav.active div.nav{
  transition-delay: 0.5s;
}
.chasses nav div.nav {
  float: left;
  z-index:-1;
  width: 100%;
  padding: 18px 20px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
  position: relative;
  border: 2px #9b6c3b solid;
  border-top: none;
  background:white;
}

@media (max-width: 640px) {
	.chasses .main div .content img {width: 96px;}
	.chasses .main div .content aside p{display:none;}
}

@media (min-width: 414px) {
  .chasses nav div.nav {
    padding: 18px 30px;
  }
}

.grid-chasse{
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;}
	
.toDo{
	display: inline-block;
    width: 59%;
}

.score{
	display: inline-block;
    width: 29%;
	text-align:center;
}

.statut{
		display: inline-block;
    width: 9%;	
}
	
.nav{
	display: flex;
    align-items: center;
}

#guideskin{line-height:3.8rem;}


@media (max-width: 745px) {
	.grid-chasse {
		justify-content: center;
	}	
}