@font-face {
  font-family: 'Cabin';
  src: url('../../../../framework/avh/public/styles/fonts/cabin.woff2') format('woff2'), url('../../../../framework/avh/public/styles/fonts/cabin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
html,
body {
  margin: 0px;
  padding: 0px;
  background: #f5f5f5;
  color: #333;
  font-size: 16px;
  font-weight: 300;
  height: 100%;
  font-family: 'Cabin', 'Arial';
}
.container-fluid {
  padding-left: 1%;
  padding-right: 1%;
}
#wrapper {
  min-height: 100%;
  position: relative;
  padding-bottom: 56px;
  box-sizing: border-box;
}
strong {
  font-weight: bold;
}
header,
footer {
  background-color: #222;
  background-image: linear-gradient(to bottom,#3C3C3C 0%,#222 100%);
  color: #fff;
  width: 100%;
}
header a:hover,
footer a:hover {
  color: #fff;
}
.row {
  margin-right: -10px;
  margin-left: -10px;
}
.row > div,
.row article {
  padding-right: 10px;
  padding-left: 10px;
}
header {
  margin-bottom: 20px;
}
header .container-fluid h1 {
  font-size: 20px;
  font-size: 1.5vw;
}
header .container-fluid h1 a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
  background-image: url('img/ninesquarezone.png');
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 140px;
  background-position: left center;
  padding-left: 160px;
}
header .container-fluid h1 a strong {
  display: block;
  font-size: 2.15em;
  margin-bottom: 3px;
}
@media only screen and (max-width: 767px) {
  header .container-fluid h1 a {
    background-image: none;
    padding-left: 20px;
    font-size: 17px;
  }
  header .container-fluid h1 a strong {
    font-size: 29px;
  }
}
header .container-fluid .nav {
  margin-top: 28px;
}
@media only screen and (max-width: 767px) {
  header .container-fluid .nav {
    margin-top: 0;
  }
}
header .container-fluid .nav .fa {
  vertical-align: middle;
}
footer {
  position: absolute;
  bottom: 0px;
  line-height: 46px;
  text-align: left;
}
footer .liens {
  float: right;
}
footer .social {
  display: inline-block;
  background: #fff;
  color: #222;
  color: #333;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  margin-left: 7px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
footer .social i {
  vertical-align: middle;
}
footer .social:hover {
  color: #222;
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  header {
    text-align: center;
  }
  header .container-fluid h1,
  header .container-fluid ul {
    float: none !important;
  }
  header .container-fluid .nav li {
    display: inline-block;
  }
  #wrapper {
    padding-bottom: 92px;
  }
  footer {
    text-align: center;
  }
  footer .liens {
    float: none;
  }
}
.presentation p {
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.5em;
}
.presentation a {
  font-weight: bold;
}
#tags {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 10px;
}
#tags .glyphicon {
  margin-right: 5px;
  vertical-align: middle;
}
#tags .label {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 10px;
}
#tags .label-primary {
  background-color: #ababab;
  background-image: linear-gradient(to bottom,#bdbdbd 0%,#ababab 100%);
}
#tags .label-active {
  background-color: #222;
  background-image: linear-gradient(to bottom,#3C3C3C 0%,#222 100%);
}
.panel-white {
  line-height: 1.4em;
}
.panel-white .panel-heading,
.panel-white .panel-body {
  background: transparent;
  border: none;
}
.panel-white .panel-heading {
  padding: 20px;
}
.panel-white .panel-heading + .panel-body {
  padding-top: 0px;
}
.panel-white .panel-body {
  padding: 20px;
}
.panel-white .panel-body p {
  text-align: justify;
  margin-bottom: 20px;
}
.panel-white .panel-body p:last-child {
  margin-bottom: 0;
}
.panel-white .panel-body p em {
  font-style: italic;
}
.panel-white .panel-body p strong {
  font-weight: bold;
}
.panel-white .panel-footer {
  padding: 10px 20px;
  background-color: #e5e5e5;
  text-align: left;
}
.panel-game .panel-footer .pull-right span:not(*:first-child):before {
  content: ' & ';
}
.panel-game .avertissement {
  color: #a94442;
  font-weight: bold;
}
.panel-game .image img {
  width: 100%;
}
.panel-game .tags .glyphicon,
.panel-game .badges .glyphicon {
  margin-right: 5px;
  vertical-align: middle;
}
.panel-game .tags .label,
.panel-game .badges .label {
  font-size: .9em;
}
.panel-game .tags {
  margin-bottom: 10px;
}
.texte h1,
.texte h2,
.texte p,
.texte code,
.texte ul,
.texte form {
  margin-bottom: 15px;
  line-height: 1.3em;
}
.texte h1 {
  font-size: 26px;
  text-transform: uppercase;
}
.texte h2 {
  font-size: 26px;
  color: #23527c;
  margin-top: 30px;
}
.texte h2:before {
  content: "\f00c";
  font-family: 'FontAwesome';
  color: #23527c;
  margin-right: 5px;
}
.texte h3 {
  font-size: 20px;
  font-weight: bold;
  color: #bd4343;
  margin-bottom: 10px;
}
.texte h3:before {
  content: "\f061";
  content: "\f138";
  font-family: 'FontAwesome';
  color: #bd4343;
  margin-right: 5px;
}
.texte p {
  text-align: justify;
}
.texte ul {
  margin-left: 40px;
  list-style: disc;
}
.texte ul ul {
  list-style: circle;
  margin-left: 20px;
  margin-bottom: 0;
}
.texte a {
  color: #23527c;
  font-weight: bold;
}
.texte a.btn {
  color: #fff;
  font-weight: normal;
}
.texte em {
  font-style: italic;
}
.texte .alert {
  text-align: justify;
  line-height: 1.3em;
}
.texte .code {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #232323;
  color: #a5c261;
  margin-bottom: 15px;
  line-height: 1.3em;
}
.texte .code .comment {
  color: #bc9458;
  font-style: italic;
}
.texte .code .separator {
  color: #A344D4;
}
.texte .code .name {
  color: #448BD4;
}
.texte .code .script {
  color: #6d9cbe;
}
.texte .code .script .function,
.texte .code .script .coord {
  color: #ffc66d;
}
.texte .faq a {
  display: block;
  padding-right: 7px;
  font-size: 1rem;
  font-weight: normal;
  line-height: 2.5em;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  -webkit-border-radius: .25rem;
  -moz-border-radius: .25rem;
  border-radius: .25rem;
  color: #fff;
  margin-bottom: 15px;
  font-size: 1.2rem;
  line-height: 2em;
  background-color: #222;
  background-image: linear-gradient(to bottom,#3C3C3C 0%,#222 100%);
}
.texte .faq a:before {
  content: 'FAQ';
  float: left;
  border-right: 1px solid #9e9e9e;
  padding: 0 7px;
  margin-right: 7px;
}
.texte .faq a:after {
  content: "\f059";
  font-family: 'FontAwesome';
  font-size: 1.3em;
  float: right;
}
.texte .faq a:hover,
.texte .faq a:focus {
  text-decoration: none;
  background: #e4e4e4;
  color: #333;
  border-color: #333;
}
.texte .center {
  text-align: center;
}
.texte .back {
  text-align: center;
}
#home #main {
  font-size: 13px;
  font-size: 1.65vw;
}
@media only screen and (min-width: 1200px) {
  #home #main {
    font-size: 1.1vw;
  }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
  #home #main {
    font-size: 12px;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape) {
  #home #main {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  #home #main {
    font-size: 3.1vw;
  }
}
#home .definition {
  font-size: .8em;
  font-style: italic;
}
#home .panel-game,
#home .flip {
  width: 100%;
  height: 0;
  padding-bottom: 109%;
}
#home .panel-game {
  position: absolute;
  text-align: center;
}
#home .panel-game .label-primary {
  background-color: #222;
  background-image: linear-gradient(to bottom,#3C3C3C 0%,#222 100%);
}
#home .panel-game .panel-body {
  padding: 5%;
  overflow: hidden;
}
#home .panel-game .panel-body p {
  margin-bottom: 5%;
}
#home .panel-game h2 {
  font-weight: bold;
  font-size: 1.4em;
  white-space: nowrap;
}
#home .panel-game h2:after {
  content: '';
  display: block;
  border-bottom: 2px solid #337ab7;
  border-bottom: 2px solid #3c3c3c;
  width: 100%;
  margin: 2.5% auto;
}
#home .panel-game h3 {
  white-space: nowrap;
}
#home .panel-game .image {
  margin: 2.5% 0 4%;
}
#home .panel-game .image img {
  width: 100%;
}
#home .panel-game .description {
  text-align: justify;
  margin-top: 5%;
}
#home .panel-game .description div {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4em;
}
#home .panel-game .stats {
  font-weight: bold;
}
#home .panel-game .tags {
  white-space: nowrap;
}
#home .panel-game .badges {
  margin: 0 -5%;
  white-space: nowrap;
}
#home .panel-game .btn {
  font-size: 1em;
}
#home .panel-game .btn .glyphicon {
  pointer-events: none;
}
#home article {
  position: relative;
  padding: 0 1% 2%;
}
#home article .flip {
  position: relative;
  -webkit-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
}
#home article .flip .card.flipped .face.front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#home article .flip .card.flipped .face.back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#home article .flip .card {
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#home article .flip .card .face {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
#home article .flip .card .face.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#home article .flip .card .face.back {
  width: 100%;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
#game .panel-game .panel-body {
  padding: 20px;
}
#game .panel-game .panel-body > *:last-child {
  margin-bottom: 0;
}
#game .panel-game p.stats {
  font-weight: bold;
  margin-bottom: 20px;
}
#game .panel-game ul.stats {
  list-style: disc;
  margin: 20px 40px;
}
#game .panel-game h2 {
  font-weight: bold;
  font-size: 1.5em;
  margin-bottom: 10px;
}
#game .panel-game h3 {
  font-size: 1.1em;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #3c3c3c;
}
#game .panel-game p.auteur a {
  font-weight: bold;
}
#game .comments h3 {
  font-size: 25px;
  line-height: 34px;
  margin-bottom: 20px;
}
#game .comments quote {
  font-style: italic;
}
#game .boutons .btn-group {
  margin-bottom: 10px;
}
#game .image {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  margin-bottom: 10px;
}
#game .image .carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#game .image .carousel li {
  height: 100%;
}
#game .image .carousel img {
  height: 100%;
}
#achievement h1,
#achievement h2,
#achievement p,
#achievement code,
#achievement ul {
  margin-bottom: 15px;
  line-height: 1.3em;
}
#achievement h1 {
  font-size: 26px;
  text-transform: uppercase;
}
#achievement h2 {
  font-size: 26px;
  color: #23527c;
  margin-top: 20px;
}
#achievement h1 + h2 {
  margin-top: 0;
}
#achievement article {
  margin-bottom: 15px;
}
#account .texte {
  max-width: 500px;
}
#faq .container {
  max-width: 800px;
}
#faq .texte img {
  background-color: #ccc;
}
#main .panel-popup {
  max-width: 800px;
  font-size: inherit;
}
#main .panel-popup .panel-heading {
  font-size: 26px;
  text-transform: uppercase;
  padding: 0 0 15px 0;
  line-height: 1.3em;
  color: #333;
  background: #f5f5f5;
}
#main .panel-popup .panel-body {
  padding: 20px;
}
.flag {
  display: inline-block;
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  background-size: 100%;
  border-radius: 10px;
  border: 2px solid #999;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  vertical-align: middle;
}
.flag:hover {
  border: 2px solid #fff;
  filter: none;
  -webkit-filter: none;
}
.flag-fr {
  background-image: url('img/flags/1x1/fr.svg');
}
.flag-en {
  background-image: url('img/flags/1x1/uk.svg');
}