@import url('https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
    font-family: "Satoshi";
    src: url('../assets/Satoshi-Medium.otf') format("opentype");
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@media only screen and (max-width: 768px) {
    .columns { margin-left: 0.25rem; margin-top: 0.25rem; margin-right: 0.25rem;};
    #menu-mobile { visibility: visible;}
    footer {visibility: hidden;}
}

@media only screen and (max-width: 1024px) {
    #logo-menu {height: 40px;};
}

@media only screen and (max-width: 768px) {
    .title { font-size : vw !important };
}

@media screen and (min-width: 1024px) {
    #menu-mobile {
      visibility: hidden;
    }
  }

html {
    background-color: #f7f7f7;
}

p {
    font-family: 'Funnel Display';
    font-weight: 200;
}

a {
    color: #0e0e0e;
}

.description-container {
    position: relative;
}

.description {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

.description.active{
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms ease-in, visibility 0ms ease-in 250ms;
}

button {
    background: none;
    color: #a3a3a3;
    border: none;
    padding: 0;
    font-size: 1em;
    cursor: pointer;
}

button.is-selected {
    color: #0e0e0e;
}

.italic {
    font-style: italic;
}

#main-content-index {
    margin-top: 2.5%;
}

#main-content {
    margin-top: 0.5%;
}

.navbar {
    background-color: #f7f7f7;
    font-family: 'Open Sans';
}

.navbar-item img {
    max-height: 2.5rem;
}

.navbar-menu {
    background-color: #f7f7f7;
    box-shadow: none;
}

.navbar-burger span {
    height: 3px;
}

.underline:after {
    content: '';
    position: absolute;
    width: 0; height: 1px;
    display: block;
    margin-top: 2px;
    right: 5%;
    background: #0e0e0e;
    transition: width .2s ease-in-out;
    -webkit-transition: width .2s ease-in-out;
  }
  
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
    left: 10% !important;
    right: auto !important;
    width: 80% !important;
  }

a:hover {
    background-color: #f7f7f7    !important;
}

#menu a{
    font-family: 'Funnel Display';
    font-size: 15px;
    color: #0e0e0e;
}


#menu-mobile a{
    font-family: 'Funnel Display';
    font-size: 25px;
    color: #0e0e0e;
}

#menu-language a{
    font-family: 'Funnel Display';
    font-size: 15px;
    color: #0e0e0e;
}


.section {
    padding: 1.5rem 1.5rem !important;
    background-color: #f7f7f7;
}

.index-column-padding{
    padding: 5px;
}

.column-padding{
    padding-left: 2%;
    padding-right: 2%;
}

.index-padding{
    padding: 0% 5% 0% 5%;
}

.top-menu {
    padding-left: 3%;
    padding-right: 3%;
}

#infos {
    text-align: right;
}

.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.7s, filter 0.7s ease-in-out;;
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
    filter: brightness(45%)
  }

.title {
    font-family: 'Funnel Display';
    color: #f7f7f7;
    font-weight: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1vw;
}

.img-container .text {
    text-align: center;
    opacity:0;
    transition: all 0.7s ease-out;
}

.img-container:hover .text {
    opacity: 1;
    transition: all 0.7s ease-in;
}

footer {
    padding-top: 5%;
    padding-bottom: 1%;
    background-color: #f7f7f7 !important;
}

footer p {
    text-align: center;
    font-family: 'Open Sans';
    font-size: small;
    color: #363636;
}

footer a {
    font-size: 24px;
}

.reseau {
    transition: all 0.2s ease-in-out;
}

.project-title {
    font-family: 'Funnel Display';
    color: #0e0e0e;
    font-weight: 400;
    font-size: 25px;
}

.details {
    color:#a3a3a3
}


.is-centered-mobile {
    padding-top: 20%;
    padding-bottom: 20%;
}