@font-face {
    font-family: 'ductus';
     src: url('fonts/ductus/DuctusRegular.eot');
    src: url('fonts/ductus/DuctusRegular.eot?#iefix') format ('embedded-opentype');
    src: url('fonts/ductus/DuctusRegular.woff') format('woff');
   src:url('fonts/ductus/DuctusRegular.ttf') format('truetype');
    font-weight:regular;
    font-style:normal; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'ductus'; 
    
}


#navbar {
    overflow: hidden;
    background-color: white;
    /* Black background color */
    position: fixed;
    z-index: 999;
    /* Make it stick/fixed */
    top: 0;
    /* Stay on top */
    width: 100%;
    /* Full width */
    transition: top 0.3s;
    /* Transition effect when sliding down (and up) */
    border-bottom: 1px solid #92579b;
    

}

#navbar a {
    float: left;
    margin-left: 2%;
    color: #92579b;
    text-align: center;
    padding: 1%;
    text-decoration: none;
    font-size: 22px;
    font-family: 'ductus', sans-serif;
    /*Arial, Helvetica, sans-serif;*/

}

#navbar a:hover {

    color: #61ffa1;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;

}

.overlay a {
    padding: 2%;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: black;
}

.overlay .closebtn {
    position: absolute;
    top: 22px;
    right: 45px;
    font-size: 68px;
}


.menu {
    float: right;
    margin-right: 3%;
    margin-top: 0.7%;
    color:#92579b;
    font-size:22px;
    
}


#navbar span:hover {
    color: #61ffa1;
}


.row {
    margin-top: 55%;
    position: relative;
    z-index: 998;

}


.row,
.row > .column {

    padding-top: 3%;
    padding-bottom: 2%;
    }

.column {
    padding-bottom: 1%;
    float: left;
    width: 33.33%;

}

.column a{
    padding-bottom: 1%;
    

}

.column img {
    display: block;
    width: 100%;
    height: auto;
    transition: .2s ease;
   
    /*backface-visibility: hidden;
    border: 2px dashed #92579b;*/

}

.image {
    
margin-bottom: 12%;
}

.column img:hover {
    border: 3px solid #61ffa1;

}


.mytexte {
    top:5%;
    position: fixed;
    overflow: hidden;
    z-index: 997;
    /*background: #e6e600;*/
    background: linear-gradient(#4e1077, white);
    width: 100%;
    padding: 8% 0;
}

.mytexte p {
    margin-left: 3%;
    width: 75%;
    font-size: 24px;
    line-height: 1.6;
    color: #61ffa1;
   
}

.mytexte nav {
  
    margin-bottom: 20rem;
   
}

nav{
    margin-top: 1%;
    margin-left: 3%;
    text-align: left;
}

nav a {
    font-size: 40px;
    color:#61ffa1;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;

}

footer {
    
    text-align: right;
    margin-bottom: 1%;
}

footer ul {
    list-style-type: none;
    margin-top: 5%;
    
}

footer ul li {
    
    display: block;
    padding: 2px 0;
    margin-right: 2%;
}

footer ul li a {
    font-family: 'ductus', sans-serif;
    font-size: 16px;
    color: #92579b;
    text-decoration: none;

}

footer ul li a:hover {
    color: #61ffa1;
}




/*second changement de structure à partir de cette taille d'écran*/

/*second "breakpoint"*/
/*second "breakpoint"*/
/*second "breakpoint"*/

/* Responsive layout -chaque colonne prend 100% de l'espace disponible/destiné aux smartphones */
@media screen and (max-width: 600px) {

#navbar a {
   
    padding: 3%;
    font-size: 18px;
}
    
.menu {
     font-size: 18px;
    margin-top: 2.7%;

}
    

    .column {
        width: 100%;
      
    }
    
      .mytexte p {
  
    width: 87%;
    font-size: 18px;

}

    
    .mytexte {
   
    /*background: #e6e600;*/
    background: linear-gradient(#4e1077, white);
    padding: 18% 0;
}
    
    .row {
    margin-top: 200%;
  

}

    footer ul li {
    
    margin-right: 4%;
}
 


}