/*gradient hr*/
/*
http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
*/
/* USAGE
<div class="row">
  <div class="row-height">
    <div class="col-xs-2 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
    <div class="col-xs-4 col-lg-5 col-xs-height col-xs-middle">
      <div class="inside"></div>
    </div>
  </div>
</div>
*/
/* columns of same height styles */
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
/* visual styles */
/*
[class*="col-"] {
  border: 1px solid #80aa00;
  background: #d6ec94;
}
*/
/*  -------------------------------------------------------- */
body {
  padding-top: 50px;
  background-color: #ebece4;
  color: #383832;
}
.navbar-inverse {
  width: 100vw;
  z-index: 1;
}
#name {
  padding-top: 50px;
}
.center {
  text-align: center;
}
.indent {
  padding-left: 50px;
}
.item-index {
  position: relative;
  top: 30px;
}
.row {
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div {
  flex-grow: 1;
  margin: 32px;
}
.logo {
  width: auto;
  height: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.gitlab {
  position: relative;
  top: -8px;
  height: 45px;
}
#thm {
  position: relative;
  top: -16px;
}
.big-logo {
  width: auto;
  height: 80px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.square-logo {
  width: auto;
  height: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
}
#comptes {
  padding-top: 40px;
}
#news {
  position: relative;
  top: 60px;
  text-align: center;
}
#links {
  padding-top: 70px;
  padding-left: 10%;
}
#musique {
  padding-top: 70px;
  padding-left: 10%;
}
#logo_rbb {
  width: 100px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#autres {
  padding-top: 70px;
  padding-left: 7%;
}
#autres ul {
  list-style: none;
  width: 92%;
  padding: 0;
}
#stackoverflow {
  position: relative;
  top: -12px;
}
@media screen and (max-width: 540px) {
  .logo {
    position: relative;
    height: 24px;
    top: 8px;
    height: 5.83vw;
    top: 1.94vw;
  }
  #stackoverflow img {
    width: 152px;
    width: 36.89vw;
    height: auto;
  }
  .col-xs-12 {
    margin-bottom: 20px;
  }
}
#flags-block {
  position: fixed;
  right: 72px;
  top: 1px;
  z-index: 100;
}
#flags-block .btn {
  background-color: rgba(20, 20, 20, 0.9);
  border: none;
}
#flags-block .btn:hover,
#flags-block .btn:active,
#flags-block .btn:focus,
#flags-block .dropdown-menu,
#flags-block .btn-flag {
  background-color: rgba(20, 20, 20, 0.9);
}
#flags-block .btn-flag:hover {
  background-color: #282828;
}
@media screen and (min-width: 768px) {
  #flags-block {
    right: 0.33%;
    top: 0.33vw;
  }
}
.img-responsive {
  margin: auto;
}
#flags-block .dropdown img {
  width: 30px;
}
#flags-block {
  top: 8px;
}
#listApps {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 8px;
}
.app div {
  font-size: 16px;
}
@media screen and (max-width: 540px) {
  h2 {
    font-size: 22px;
  }
  h3 {
    font-size: 20px;
  }
  #stackoverflow img {
    padding-left: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .container {
    width: 1190px;
  }
}