@font-face {
   font-family: Harding;
   src: url(../font/Harding-Text-Web-Regular-Regular.ttf);
}

@font-face {
   font-family: Harding;
   src: url(../font/Harding-Text-Web-Bold-Regular.ttf);
   font-weight: bold;
}

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

@font-face {
   font-family: Merienda;
   src: url(../font/Merienda-Bold.ttf);
   font-weight: bold;
}

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

.navbar-ai4sdgs{
	background-color: rgba(255,255,255,0);
}

.navbar{
    padding: 0;
}

.navbar-flexbox{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.navbar-light .navbar-nav .nav-link {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  /*color: rgba(0,0,0,.7);*/
  /*border-top: 4px solid red;*/
  /*border-bottom: 4px solid red;*/
}

#nav-1:hover, #nav-1.active{
    color: #e5243b;
    border-top: 4px solid #e5243b;
}
#nav-2:hover, #nav-2.active{
    color: #DDA63A;
    border-top: 4px solid #DDA63A;
}
#nav-3:hover, #nav-3.active{
    color: #4C9F38;
    border-top: 4px solid #4C9F38;
}
#nav-4:hover, #nav-4.active{
    color: #C5192D;
    border-top: 4px solid #C5192D;
}
#nav-5:hover, #nav-5.active{
    color: #26BDE2;
    border-top: 4px solid #26BDE2;
}
#nav-6:hover, #nav-6.active{
    color: #FD6925;
    border-top: 4px solid #FD6925;
}
#nav-7:hover, #nav-7.active{
    color: #19486A;
    border-top: 4px solid #19486A;
}

.nav-link{
    font-size: 1.2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-ai4sdgs a{
    color: #083c77;
}

.navbar-ai4sdgs a:hover{
    color: #657d92;
}

.keep-newline{
	white-space: pre-wrap !important;
}

.ai4sdgs-footer-container{
    color: #002752;
    font-size: 1.1rem;
    padding:2.5rem 8rem 2.5rem;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}

@media screen and (max-width: 500px) {
    .ai4sdgs-footer-container{
        padding:2.5rem 1rem 2.5rem;
    }
    .ai4sdgs-footer-copyright-logo{
        margin-bottom: 1rem;
    }
    .navbar-flexbox{
        justify-content: start;
    }
}

.ai4sdgs-footer-container a{
    color: #002752;
}

.ai4sdgs-footer-container a:hover{
    text-decoration: underline;
}

.ai4sdgs-footer-container .ai4sdgs-footer-copyright-logo{
    margin-right: 2rem;
}