html,
 body {
     height: calc(100vh - 50px);
 }
 
 body {
     background-color: #faf7f7;
 }
 
 .top-nav {
     background-color: #a8a07d;
     color: #000;
     position: absolute;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     z-index: 1000;
 }
 
 .top-nav a {
     color: #111;
     text-decoration: none;
 }
 
 .top-nav a:hover {
     color: #c0c0c0;
     text-decoration: none;
 }
 
 nav.nav-index {
     background-color: #2f4b56;
     color: #ffffff;
 }
 
 nav.nav-graph {
     background-color: #504F4C;
     color: #9F7303;
 }
 
 .btn-warning {
     color: #fff;
     background-color: #ffc107;
     border-color: #ffc107
 }
 
 .btn-warning:hover {
     color: #212529;
     background-color: #e0a800;
     border-color: #d39e00
 }
 
 .btn-warning.focus,
 .btn-warning:focus {
     box-shadow: 0 0 0 .2rem rgba(222, 170, 12, .5)
 }
 
 .foot {
     position: absolute;
     bottom: 15px;
     text-align: center !important;
     color: white;
 }
 
 .location,
 .formation {
     background-color: #12315F;
     border-radius: 15px;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     -ms-border-radius: 15px;
     -o-border-radius: 15px;
     padding: 45px 15px;
     cursor: pointer;
 }
 
 .formation {
     background-color: #5F1229 !important;
 }
 
 .location .round-left,
 .formation .round-left {
     background-color: #FCB500;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     height: 40px;
     width: 40px;
     margin-right: 20px;
 }
 
 @media (max-width: 770px) {
     .foot {
         position: relative;
         margin-top: 15px;
         bottom: 15px;
         text-align: center !important;
         color: white;
     }
 }