:root {
    --y-translate-factor: -10vh;
    --ending-opacity: 0.8;
}
/* The iframe container */
#iframe_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 51%;
    z-index: -10;
}

#mast_head {
	/*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAD0lEQVQImWNgwALOYIgAAA5/AM3Fd8mTAAAAAElFTkSuQmCC);*/
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAEklEQVQImWNgQAeSe2b/xxAEAC5TAnBwt1eiAAAAAElFTkSuQmCC);
	background-color: rgba(26, 188, 156,0.5) !important;
	border: 0px;
}
.masthead img, .masthead h1, .masthead div, .masthead p {
	z-index: 10;
}
.masthead h1 {
    animation: h1_animation 3s ease 2s forwards;    
}
.masthead .divider-custom {
    animation: divider_animation 3s ease 2s forwards;    
}
.masthead .masthead-subheading {
    animation: subheading_animation 3s ease 2s forwards;    
}
.effect_id {
    animation: effect_id_animation 3s ease 2s forwards;
}
/* Smartphones */
@media all and (orientation: portrait) {
    /* The iframe */
    #background_video {
		position: absolute;
		width: 100vmin;
		height: calc(100vmin * 9 / 16);
		z-index: -10;
		top: 20%;
    }

    #background_video {
		animation: background_video_animation 3s ease 2s forwards;
    }
    /* Vidéo */
    @keyframes background_video_animation {
		to {
			z-index: 5;
			opacity: 0.5;
		}
    }
    /* Guillaume Roux */
    @keyframes h1_animation {
		to {
			transform: translateY(-80vh) translateX(-40vw) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Diviseur */
    @keyframes divider_animation {
		to {
			transform: translateY(var(--y-translate-factor)) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Photo */ 
    @keyframes effect_id_animation {
		to {
			transform: translateY(25vh) scale(0.5);
			opacity: var(--ending-opacity);
		}
    }
    /* Description */
    @keyframes subheading_animation {
		to {
			transform: translateY(-10vh);
		}
    }
}
/* ipad */
@media all and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
    /* The iframe */
    #background_video {
		position: absolute;
		width: 100vmin;
		height: calc(100vmin * 9 / 16);
		z-index: -10;
		top: 20%;
    }

    #background_video {
		animation: background_video_animation 3s ease 2s forwards;
    }
    /* Vidéo */
    @keyframes background_video_animation {
		to {
			z-index: 5;
			opacity: 0.5;
		}
    }
    /* Guillaume Roux */
    @keyframes h1_animation {
		to {
			transform: translateY(-80vh) translateX(-40vw) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Diviseur */
    @keyframes divider_animation {
		to {
			transform: translateY(7vh) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Photo */ 
    @keyframes effect_id_animation {
		to {
			transform: translateX(35vw) translateY(-15vh) scale(0.5);
			opacity: var(--ending-opacity);
		}
    }
    /* Description */
    @keyframes subheading_animation {
		to {
			transform: translateY(7vh);
		}
    }
}
/* Desktop */
@media all and (orientation: landscape) {
    /* The iframe */
    #background_video {
		position: absolute;
		height: calc(90vmin - 7em);
		width: calc((90vmin - 7em) * 16 / 9);
		z-index: -10;
		top: 7em;
    }
    /* Guillaume Roux */
    @keyframes h1_animation {
		to {
			transform: translateY(-80vh) translateX(-40vw) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Photo */ 
    @keyframes effect_id_animation {
		to {
			transform:scale(0.5) translateX(70vw);
			opacity: var(--ending-opacity);
		}
    }
    /* Diviseur */
    @keyframes divider_animation {
		to {
			transform: translateY(var(--y-translate-factor)) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Description */
    @keyframes subheading_animation {
		to {
			transform: translateY(-6vh) scale(1.5);
			font-wieght: bold;
		}
    }
}
/* Desktop */
@media all and (orientation: landscape) and (min-width: 1920px) {
    /* The iframe */
    #background_video {
		position: absolute;
		height: calc(80vmin - 7em);
		width: calc((80vmin - 7em) * 16 / 9);
		z-index: -10;
		top: 7em;
    }
    /* Guillaume Roux */
    @keyframes h1_animation {
		to {
			transform: translateY(-80vh) translateX(-40vw) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Photo */ 
    @keyframes effect_id_animation {
		to {
			transform:scale(0.5) translateX(70vw);
			opacity: var(--ending-opacity);
		}
    }
    /* Diviseur */
    @keyframes divider_animation {
		to {
			transform: translateY(var(--y-translate-factor)) scale(0);
			opacity: var(--ending-opacity);
		}
    }
    /* Description */
    @keyframes subheading_animation {
		to {
			transform: translateY(-6vh) scale(1.5);
			font-wieght: bold;
		}
    }
}