/*Modification globale*/

*, *::before, *::after{

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

body{ /*Mise en place de la taille du contenu, centrage, couleur de fond et espacement pour le sticky footer*/

    max-width: 1120px;
    margin: auto;
    background-color: #ffeefe;
    padding-bottom: 100px;
}

a, a:active, a:checked{  /*Suppression du soulignement de base*/
    text-decoration: none;
}

a:hover, .current{ /*Mise en couleurs lors du survol et du lien actuel*/
    color: #000;
}

.title{
    font-size: 35px;
}

.right{ /*Alignement du texte sur la droite*/
    text-align: right;
}

.left{ /*Alignement du texte sur la gauche*/
    text-align: left;
}

.yellow_grad{ /*Mise en couleur du texte d'un gradient jaune*/

	background: #DFC100;
	background: linear-gradient(to right, #DFC100 0%, #E7F524 67%, #E3FF2A 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark_yellow{ /*Mise en couleur du texte en jaune foncé*/
    color: #DFC100;
}
.light_yellow{ /*Mise en couleur du texte en jaune clair*/
    color: #E3FF2A
}
.yellow{ /*Mise en couleur du texte en jaune*/
    color: #E7F524;
}

.bg_dark_yellow{ /*Mise en couleur du fond en jaune foncé*/
    background-color: #DFC100;
}
.bg_light_yellow{ /*Mise en couleur du fond en jaune clair*/
    background-color: #E3FF2A
}
.bg_yellow{ /*Mise en couleur du fond en jaune*/
    background-color: #E7F524;
}

/*Comme pour le jaune, mais pour les autres couleurs*/
.green_grad{
	
	background: #00DF00;
	background: linear-gradient(to right, #00DF00 0%, #35F541 41%, #5AFF6B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark_green{
    color: #00DF00;
}
.light_green{
    color: #5AFF6B;
}
.green{
    color: #35F541;
}

.bg_dark_green{
    background-color: #00DF00;
}
.bg_light_green{
    background-color: #5AFF6B;
}
.bg_green{
    background-color: #35F541;
}

.red_grad{

	background: #DF0000;
	background: linear-gradient(to right, #DF0000 0%, #F54141 33%, #FF7171 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark_red{
    color: #DF0000;
}
.light_red{
    color: #FF7171;
}
.red{
    color: #F54141;
}

.bg_dark_red{
    background-color: #DF0000;
}
.bg_light_red{
    background-color: #FF7171;
}
.bg_red{
    background-color: #F54141;
}

.blue_grad{

	background: #0000DF;
	background: linear-gradient(to right, #0000DF 0%, #3737F5 33%, #6A65FF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark_blue{
    color: #0000DF;
}
.light_blue{
    color: #6A65FF;
}
.blue{
    color: #3737F5;
}

.bg_dark_blue{
    background-color: #0000DF;
}
.bg_light_blue{
    background-color: #6A65FF;
}
.bg_blue{
    background-color: #3737F5;
}

.byrg_grad{ /*Mise en couleur arc-en-ciel du texte par rapport au couleur du thème*/

	background: #0000DF;
	background: radial-gradient(circle farthest-corner at top left, #0000DF 15%, #F5DD00 40%, #00FF00 70%, #FF0000 90%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}

/*Header*/

header{

    width: 1120px;
}

.logo{
    width: 250px;
    position: relative;
}

.logo > a > h2{

    position: relative;
    top: 30px;
    font-family: 'Great Vibes', cursive;
    font-size: 55px;
    letter-spacing: 0.03em;
}

.logo > a  > h1{

    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    letter-spacing: -0.05em;
}

nav{

    font-family: 'Oswald', sans-serif;
    position: relative;
    top:-80px;
    left:500px;
    width: 670px;
}

nav ul li {
    display: inline;
    list-style: none;
    font-size: 37px;
    padding-right: 35px;
}

/* Section */

section{
    font-family: 'Oswald', sans-serif;
    text-align: center;
}

/*Petite diaporama de photo*/
/*Source : https://www.hyde-design.co.uk/joomla-bites/80-create-a-css-slideshow-no-javascript-required*/
.fling-minislide {
    width: 1000px;
    height: 667px;
    margin: auto;
    overflow:hidden; 
    position:relative; 
}

/*Positionnement de l'image et lancement de "l'animation" de fondu*/
.fling-minislide img{ 
    position:absolute;
    left: 0;
    animation:fling-minislide 20s infinite; 
    opacity:0; 
    width: 100%; 
    height: auto;
}

/*Key frame permettant le fondu de l'image en fonction du temps de l'animation*/
@keyframes fling-minislide {
    25%{opacity:1;} 40%{opacity:0;}
}

/*Mise en place des delays pour l'affichage des images*/
.fling-minislide img:nth-child(4){
    animation-delay:0s;
}
.fling-minislide img:nth-child(3){
    animation-delay:5s;
}
.fling-minislide img:nth-child(2){
    animation-delay:10s;
}
.fling-minislide img:nth-child(1){
    animation-delay:15s;
}

.slide_separator{
    margin: 10px;
}

.details{
    font-size: 20px;
    text-align: center;
}

.color_details{

    margin:10px;
}

table{
    width: 500px;
    text-align: center;
    border-collapse: collapse;
    margin: 10px auto;
    font-size: 20px;
}

td{
    border: 1px solid;
    height: 40px;
}

.content{

    margin: 15px 0;
    font-size: 25px;
    height: auto;
}

/*Footer*/

footer{
    font-family: "Lato", sans-serif;
    position: fixed; 
    bottom: -5px;
    height: 50px;
    text-align: center;
    width: 1120px;
    font-size: 20px;
    margin:5px auto;
    background-color: #ffeefe;
}

/*Mise en pages colonnes*/

[class^="col"] {
    margin-top: 10px;
    margin-right: 20px;
    float: left;
}

.col_6_12{
    width: 550px;
}

.col_4_12{
    width: 333px;
}

.col_3_12{
    width: 260px;
}

.col_8_12{
    width: 706px;
}

.col_9_12{
    width: 840px;
}

.col_12_12{
    width: 1120px;
}

.last{ /*Suppression du padding et margin pour le dernier élément*/
    padding: 0;
    margin-right: 0;
}