/* CORE */

@font-face {
    font-family: Helvetica;
    src: url(../fonts/Helvetica.ttf);
}

@font-face {
    font-family: HelveticaBoldO;
    src: url(../fonts/HelveticaBoldOblique.otf);
}

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

body {
     background: #c7c7c7;
     color: #fff;
}

header, section, footer, aside, nav, main, article, figure {
    display: block;
}

#page {
    position: relative !important;
    max-width: 1200px !important;
    overflow: hidden !important;
    margin: 0 auto;
    background: rgba(38, 38, 38, 0.9);
    color: #fff;
}

h1, h2, h3, h4, h5, h6, .w3-slim, .w3-wide {
    font-family: Helvetica, sans-serif;
}

h1 {
    color: #fff !important;
}

.well {
    color: #000 !important;
    background: #f5f5f5 !important;
    width: 80% !important;
    -webkit-box-shadow:4px 4px 4px #000 !important;
    -moz-box-shadow:4px 4px 4px #000 !important;
    box-shadow:4px 4px 4px #000 !important;
    margin: 0 auto;
}

.well h1 {
    color: #000 !important;
}

.well .glyphicon {
    font-size: 18px;
    vertical-align: bottom;
    margin: 0 5px;
    color: #EF7D02 !important;
}

.thumbnail {
    -webkit-box-shadow:4px 4px 4px #000 !important;
    -moz-box-shadow:4px 4px 4px #000 !important;
    box-shadow:4px 4px 4px #000 !important;
}

.ephone:hover {
    cursor: pointer;
}

.error404 h2 {
    color: #fff !important;
}
p strong {
    letter-spacing: 1px;
}


a {
    color: #EF7D02 !important;
    text-decoration: none;
}

.btn-warning {
    color: #000 !important;
    font-weight: 600 !important;
}

.btn-warning:hover {
    color: #fff !important;
    background-color: #ec971f;
    border-color: #d58512;
}

.btn.focus, .btn:focus, .btn:hover {
    color: #333 !important;
    text-decoration: none;
}

.card-inverse {
    margin-bottom: 10px;
}

.card-inverse h3 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1) !important;
}

.card-inverse h3.convoc {
    margin-top: 13.5% !important;
}

/* HEADER */

header {
      background: #6d6d6d url('https://www.ustg-pance-poligne.fr/img/Fotolia_107446290_M.png.pagespeed.ce.5MgPV9zqFD.png') top left no-repeat;
      background-size: cover;
      height: 522px;
      padding-top: 0;
     }

.joueurl {
    width: 134px;
    height: 222px;
    position: absolute;
    top: 230px;
    left: 14%;
}

.joueurr {
    width: 343px;
    height: 222px;
    position: absolute;
    top: 240px;
    right: 7%;
}
.logo {
    padding-top: 80px;
}

/* NAVBAR */

  /* Remove the navbar's default margin-bottom and rounded borders */
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
      margin-bottom: 0px !important;
      padding: 0 !important;
    }
    
    .navbar-brand {
      display: none !important;
    }

    .carousel-inner>.item>a>img, .carousel-inner>.item>img {
      width: 100% !important;
    }

    .navbar-inverse .navbar-nav>li>a {
      color: #fff !important;
      font-size: 16px !important;
    }

    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
      color: #000 !important;
      background-color: #ef7d01 !important;
      font-weight: 600;
    }

    .navbar-inverse .navbar-nav>li:active {
      color: #000 !important;
      background-color: #ef7d01 !important;
      font-weight: 600;
    }

    .navbar-inverse .navbar-nav>li:hover {
      color: #000 !important;
      background-color: #ef7d01 !important;
    }

    .navbar-inverse {
      background-color: #000 !important;
      border-color: #585554 !important;
    }

    .navbar-nav {
      float:none !important;
      margin:0 auto !important;
      display: block !important;
      text-align: center !important;
    }

    .navbar-nav > li {
      display: inline-block !important;
      float:none !important;
    }
    ul.nav li.dropdown:hover ul.dropdown-menu {
      display: block;
    }
    .dropdown-menu>li>a {
      color: #333 !important;
    }
    .dropdown-menu>li>a:hover {
      color: #EF7D02 !important;
    }

    .dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
      color: #000 !important;
      text-decoration: none;
      background-color: #F0AD4E !important;
      outline: 0;
    }

    ul.nav hr {
      margin-top: 6px;
      margin-bottom: 6px;
      border: 0;
      border-top: 1px solid #eee;
    }

/* CAROUSEL SLIDESHOW */

    .carousel-control {
      width: 5% !important;
    }

    .carousel-caption h3 {
      color: #EF7D01 !important;
      font-weight: 600 !important;
      text-shadow: 1px 1px #000 !important;
      background: #6D6D6D !important;
      padding: 5px !important;
      font-size: 28px !important;
    }
    .carousel-caption p {
      color: #fff !important;
      text-shadow: 1px 1px #000 !important;
      font-size: 18px !important;
    }

    /* d-block img-fluid */
    .img-fluid {
      width: 100% !important;
      height: 100% !important;
      margin: 0 auto;
    }

/* ACCORDION JQUERY UI */

#accordion {
    margin-bottom: 20px;
}
.ui-icon-circle-arrow-s {
    background-position: -130px -190px !important;
}
.ui-icon-circle-arrow-e {
    background-position: -113px -191px !important;
}

/* GRID */

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {
      min-height: 450px;
      background: url(https://www.ustg-pance-poligne.fr/img/xplayerpage.png.pagespeed.ic.ykoHGMRi55.png) center top no-repeat;
      background-size: contain;
    }

    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #262626;
      height: 100%;
      border-left: #999 1px solid;
    }

    section div.container .img-responsive {
      display:inline-block;
      max-width: 100% !important;
      height: auto !important;
    }

/* HOME PAGE CONTENT */

  .main-slogan {
      color: #EF7D01 !important;
      text-shadow: 1px 1px #000 !important;
  }

  .page-slogan {
      color: #fff;
      font-size: 24px;
      margin-top: 15px;
      margin-bottom: 15px;
  }

  #homecontent {
   background: #000;
   color: #fff;
   padding-bottom: 15px;
  }

  #homedymnamic {
   padding: 20px;
   background: rgba(38, 38, 38, 0.9);
   color: #fff;
  }

/* OTHERS PAGES */

.container {
   color: #fff;
   margin-top: 20px;
   margin-bottom: 20px;
}

#rensjur {
 margin: 0 auto;
 background: #000 !important;
 border: #999 solid 1px !important;
}
#rensjur td {
 padding: 5px;
}

.panel-heading h3 {
 margin-top: 0;
 margin-bottom: 0;
 font-size: 20px;
}

/* FOOTER */

    /* Set black background color, white text and some padding */
    footer {
      background-color: #ef7d02;
      color: white;
      padding: 15px;
    }
    footer a {
      color: #000 !important;
      font-weight: 600;
    }

/* RESPONSIVE */

    @media screen and (max-width: 1024px) {
      .well {
          width: 90% !important;
      }
      .card-inverse h3.convoc {
          margin-top: 11.5% !important;
          margin-bottom: 0 !important;
      }    
    }

    @media screen and (max-width: 768px) {
      header {
          height: 290px;
      }
      header .logo img {
          height: 200px !important;
      }
      .joueurl {
          width: 90px !important;
          top: 75px !important;
          left: 9% !important;
      }
      .joueurr {
          width: 250px !important;
          top: 75px !important;
          right: 4% !important;
      }
      #menutop .navbar-collapse {
          padding-right: 0px !important;
          padding-left: 0px !important;
      }
      #menutop .container-fluid {
          padding-right: 0px !important;
          padding-left: 0px !important;
      }
      .nav>li>a {
          padding: 15px 10px !important;
      }
      .carousel {
          display: none !important;
      }
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      #menutop .navbar-collapse {
          padding-right: 15px !important;
          padding-left: 15px !important;
      }
      #menutop .container-fluid {
          padding-right: 15px !important;
          padding-left: 15px !important;
      }
      .navbar-nav > li {
          display: block !important;
          float: none !important;
          text-align: left;
          margin-left: -15px !important;
          margin-right: -15px !important;
      }
      .navbar-nav .open .dropdown-menu {
        background-color: #000 !important;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #EF7D01 !important;
      }
      .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
        color: #fff !important;
      }
      .nav>li>a {
          padding: 10px 15px !important;
      }
      .sidenav {
        height: auto;
        padding: 15px;
        border-left: none !important;
      }
      .row.content {
        height: auto;
      }
      .card-inverse h3.convoc {
        margin-top: 14.5% !important;
        margin-bottom: 5% !important;
      }
      footer .row .col-sm-4 {
        text-align: center;
      }
    }
    @media screen and (max-width: 667px) {
      header {
          height: 270px;
      }
      header .logo img {
          height: 180px !important;
      }
      .joueurl {
          width: 80px !important;
          top: 75px !important;
          left: 5% !important;
      }
      .joueurr {
          width: 230px !important;
          top: 77px !important;
          right: 3% !important;
      }
    }
    @media screen and (max-width: 568px) {
      header {
          height: 230px;
      }
      header .logo img {
          height: 150px !important;
      }
      .joueurl {
          width: 80px !important;
          top: 55px !important;
          left: 8% !important;
      }
      .joueurr {
          width: 210px !important;
          top: 70px !important;
          right: 3% !important;
      }
    }
    @media screen and (max-width: 414px) {
      .h1, h1 {
          font-size: 25px !important;
      }
      .page-slogan {
          font-size: 18px !important;
      }
      header {
          height: 270px !important;
      }
      header .logo img {
          height: 180px !important;
      }
      .joueurl {
          display: none !important;
      }
      .joueurr {
          display: none !important;
      }
      .carousel-caption h3 {
          font-size: 20px !important;
      }
      .carousel-caption p {
          font-size: 16px !important;
      }
    }
    @media screen and (max-width: 375px) {
      .h1, h1 {
          font-size: 20px !important;
      }
      .page-slogan {
          font-size: 16px !important;
      }
      #myCarousel {
          display: none !important;
      }
    }