/* Import fonts */
 
 @import url('https://fonts.googleapis.com/css?family=Bebas+Neue:100,200,300,400,500,600,700');
 @import url('https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700');
 /*Body*/
 
 body {
     font-family: 'Bebas Neue', sans-serif;
 }
 
 p {
     font-family: 'Open Sans', sans-serif;
 }
 
 h1 {
     text-align: center;
 }
 /*
 Header
 */
 
 .main-header {
     background-color: #031c3d;
     /*margin-bottom: 2rem;*/
 }
 
 .main-header .navbar {
     background-color: #031c3d;
     /*padding: 0px 40px 0px 40px;*/
     height: 100px;
 }
 
 .main-header .navbar .navbar-brand {
     color: #7ed957;
     text-align: center;
     font-size: 15px;
     letter-spacing: 2px;
 }
 
 .main-header .navbar .collapse .nav-tabs .nav-item {
     list-style-type: none;
     background-color: #fff;
     border-bottom: 5px solid white;
     border-radius: 5px 5px 0px 0px;
     padding-bottom: 10px;
     bottom: 0;
     margin-top: 48px;
     width: 140px;
 }
 
 .main-header .navbar .collapse .navbar-nav .nav-item {
     list-style-type: none;
     background-color: #fff;
     border-bottom: 5px solid white;
     border-radius: 5px 5px 0px 0px;
     padding-bottom: 14px;
     bottom: 0;
     margin-top: 48px;
     width: 140px;
     font-size: 20px;
     text-align: center;
     letter-spacing: 3px;
     color: #031c3d;
 }
 
 @media(max-width: 770px) {
     .main-header .navbar .collapse .navbar-nav .nav-item {
         border-radius: 5px 5px 5px 5px;
         margin-top: 1px;
         padding-bottom: 0px;
         border: 1px solid #031c3d;
     }
 }
 
 .main-header .navbar .collapse .nav-tabs .nav-item .active {
     color: #7ed957;
 }
 
 .main-header .navbar .collapse .navbar-nav .active {
     color: #7ed957;
 }
 
 .main-header .navbar .collapse .navbar-nav a:hover,
 .main-header .navbar .collapse .navbar-nav a:focus {
     font-size: 20px;
     text-align: center;
     color: #7ed957;
 }
 
 .main-header .navbar .collapse ul li a {
     font-size: 20px;
     letter-spacing: 3px;
     text-align: center;
     color: #031c3d;
 }
 
 .main-header .navbar .collapse ul li a:hover,
 .main-header .navbar .collapse ul li a:focus {
     font-size: 20px;
     text-align: center;
     color: #7ed957;
 }
 /* text Boxes*/
 
 .jumbotron {
     margin: 160px 10px 40px 10px;
     background-color: #031c3d;
     color: white;
 }
 
 .jumbotron p {
     font-family: 'Open Sans', sans-serif;
 }
 
 .jumbotron h1 {
     font-family: 'Bebas Neue';
 }
 
 .text-dir h4 {
     font-family: 'Open Sans', sans-serif;
     color: #031c3d;
 }
 /* Categories Card boxes */
 
 .residues-cards {
     margin: 160px 10px 40px 10px;
 }
 
 .residues-cards .card {
     background-color: #031c3d;
     color: white;
 }
 
 .card-deck {
     margin-top: 160px;
 }
 
 .card-deck .card {
     background-color: #031c3d;
     color: white;
     justify-content: center;
     align-items: center;
 }
 
 .img-fluid {
     opacity: 1;
     display: block;
     width: 100%;
     height: auto;
     transition: .5s ease;
     backface-visibility: hidden;
 }
 
 .middle {
     transition: .5s ease;
     opacity: 0.1;
     position: absolute;
     top: 66%;
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     text-align: center;
 }
 
 .middle a {
     color: white;
     font-size: 25px;
 }
 
 .middle a:hover {
     color: #031c3d;
 }
 
 .nav-item {
     background-color: #7ed957;
 }
 
 .container .card-deck .card .card-body .jumbotron {
     margin: 0;
     background-color: #031c3d;
     color: white;
 }
 
 .card-body h3 {
     font-size: 30px;
     letter-spacing: 3px;
     justify-content: center;
     align-items: center;
 }
 
 .category:hover .img-fluid {
     opacity: 0.3;
 }
 
 .category:hover .middle {
     opacity: 1;
     border-bottom-color: #7ed957;
 }
 
 .content-center {
     max-width: 800px;
     margin-right: 220px;
     margin-top: 100px;
     text-align: center;
 }
 
 .logo-brand {
     min-width: 160px;
     max-width: 180px;
     margin-left: 0;
 }
 
 .btn {
     background-color: #7ed957;
     color: #031c3d;
 }
 
 .margin-top {
     margin-top: 111px;
 }
 /*
 FOOTER
 */
 
 footer {
     color: #031c3d;
     text-align: center;
     background-color: white;
     font-family: 'Open Sans';
     font-size: 15px;
 }
 
 footer a {
     color: gray;
     font-style: italic;
 }
 
 footer a:hover {
     color: #7ed957;
 }
 /*
 Back to top button
 */
 
 #back-to-top-button {
     display: inline-block;
     background-color: #031c3d;
     width: 50px;
     height: 50px;
     text-align: center;
     border-radius: 4px;
     position: fixed;
     bottom: 30px;
     right: 30px;
     transition: background-color .3s, opacity .5s, visibility .5s;
     opacity: 0;
     visibility: hidden;
     z-index: 1000;
 }
 
 #back-to-top-button::after {
     content: "\f077";
     font-family: FontAwesome;
     font-weight: normal;
     font-style: normal;
     font-size: 2em;
     line-height: 50px;
     color: #fff;
 }
 
 #back-to-top-button:hover {
     cursor: pointer;
     background-color: #7ed957;
     text-decoration: none;
 }
 
 #back-to-top-button:active {
     background-color: #7ed957;
 }
 
 #back-to-top-button.show {
     opacity: 1;
     visibility: visible;
 }