/* --- Banner annimation --- */

.slider {
	overflow: hidden;
	width: 100%;
}

.slider figure {
	position: relative;
	width: 600%;                /* 600% -> 6 slides */
	margin: 0;
	left: 0;
	animation: 30s slidy infinite;
}

.slide {
	position: relative;
	padding-top: 1.3%;
	padding-bottom: 1.3%;
	
	width: 16.666%;             /* 100 / 6 slides */
	float: left;
	text-align: center;
	
	color: white;
	font-size: 4vw;	
	font-weight: bolder;
	text-decoration: none;
}


#slide0 {
	background-image: url("../images/banner/deeplearning.png");
	background-size: cover;
}

#slide1 {
	background-image: url("../images/banner/python.png");
	background-size: cover;
}

#slide2 {
	background-image: url("../images/banner/java.png");
	background-size: cover;
}

#slide3 {
	background-image: url("../images/banner/csharp.png");
	background-size: cover;
}

#slide4 {
	background-image: url("../images/banner/devweb.png");
	background-size: cover;	
}

#slide5 {
	background-image: url("../images/banner/cpp.png");
	background-size: cover;
}


.slide div {
	padding-left: 35%;
}

.slide:hover {
	color: white;
	text-decoration: none;
}

@keyframes slidy {
    /* Phase "aller" (progression de slide0 à slide5) */
    0%    { left: 0%; }
    7.7%  { left: 0%; }
    9.7%  { left: -100%; }
    17.4% { left: -100%; }
    19.4% { left: -200%; }
    27.1% { left: -200%; }
    29.1% { left: -300%; }
    36.8% { left: -300%; }
    38.8% { left: -400%; }
    46.5% { left: -400%; }
    48.5% { left: -500%; }
    56.2% { left: -500%; }
    
    /* Phase "retour" (de slide5 vers slide0) */
    58.2% { left: -400%; }
    65.9% { left: -400%; }
    67.9% { left: -300%; }
    75.6% { left: -300%; }
    77.6% { left: -200%; }
    85.3% { left: -200%; }
    87.3% { left: -100%; }
    95.0% { left: -100%; }
    97.0% { left: 0%; }
    100%  { left: 0%; }
}
  

/*   Pour 5 slides 
@keyframes slidy {
	0%   { left: 0%; }
	10%  { left: 0%; }
	12%  { left: -100%; }
	22%  { left: -100%; }
	24%  { left: -200%; }
	34%  { left: -200%; }
	36%  { left: -300%; }
	46%  { left: -300%; }
	48%  { left: -400%; }
	58%  { left: -400%; }
 	60%  { left: -300%; }
 	70%  { left: -300%; }
 	72%  { left: -200%; }
 	82%  { left: -200%; }
 	84%  { left: -100%; }
 	94%  { left: -100%; }
 	96%  { left: 0%; }
 	100% { left: 0%; }
}
*/

h1 {
    padding: 50px 0px 20px 7.8%;
}

article {
    width: 100%;
    padding: 0px 10%;
    text-align: center;
    background: #e0e0e0;
}

.pathwayMenu {
    text-align: center;
    background-image: url("../images/photos/man-1-opacity.jpg");
    background-position: right top;
    background-repeat: no-repeat;
}

    /* Masque combiné pour faire disparaître progressivement l'image à gauche et en bas */
    /*
    -webkit-mask-image: 
         linear-gradient(to right, transparent 0%, black 40%),
         linear-gradient(to top, transparent 0%, black 40%);
    -webkit-mask-composite: multiply;
            mask-image: 
         linear-gradient(to right, transparent 0%, black 40%),
         linear-gradient(to top, transparent 0%, black 40%);
            mask-composite: intersect;
    */

.pathwayMenu .pathway {
    display: inline-block;
    width: 40%;
    aspect-ratio: 1903/350;

    border: 1px solid black;
    background-size: cover;
    margin: 2% 2%;
    padding-left: 12%;

    color: white;
    font-weight: bold;
    text-decoration: none;
    align-items: center;
}

.pathwayMenu .pathway .content {
    position: relative;
    width: 100%;
    -top: 50%;
    transform: translateY(70%);
    font-size: 2vw;
}

@media screen and (max-width: 1100px) {
    .pathwayMenu .pathway {
        width: 80%;
        padding-left: 20%;
    }

    .pathwayMenu .pathway .content {
        font-size: 3.9vw;
    }
    
}