@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Source+Sans+Pro:400,700&display=swap');

html
{
	scroll-behavior: smooth;
}

body
{
	margin: 0px;
	padding: 0px;
	font-family: 'Josefin Sans', Futura, sans-serif;
	color: #454545;
	background-color: #f5f5f5;
	scroll: smooth;
	
	overflow-x: hidden;
}

.container-fluid
{
	width: 100%;
	offset-x: none;
}

/* esthétique */

p
{
	font-weight: 400;
	font-family: 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h5
{
	font-weight: 700;
}

h3
{
	font-size: 2.5vw;
}

h4
{
	font-size: 1.5vw;
}

h5
{
	font-size: 1vw;
}

.panel
{
	text-decoration: none;
	border: none;
	background-color: none;
}

.panel-default>.panel-heading
{
	background-color: none;
	border: none;
	margin-top: 20px;
	text-decoration: none;
}

.panel-body
{
	background-color: #f5f5f5;
}

a:link
{
	color: #0091D0;
	text-decoration: none;
}

a:visited
{
	color: #0091D0;
	text-decoration: none;
}

a:hover
{
	color: #005A85;
	text-decoration: none;
}

a:active
{
	color:turquoise;
	text-decoration: none;
}

/* style général */

nav
{
	position: fixed;
	color: white;
	width: 100vw;
}

header
{
	padding: 12vh 0vw 0vh 0vw;
	height: 50vh;
	width: 100vw;
	background-color: #01001D;
	color: #a7a9ac;
}

.intro
{
	width: 100vw;
	background-color: #0091D0;
	color: white;
	padding: 0vw 0vw 0vw 0vw;
}

#time
{
	color: #0091D0;
}

footer
{
	background-color: #01001D;
	color: #a7a9ac;
}

/* ========== media queries ========== */

    /* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px)
	{
		/* esthétique */
		
		nav h2
		{
			font-size: 18px;
		}
		
		p
		{
			font-size: 16px;
		}
		
		h3
		{
			font-size: 5vw;
		}
		
		h5
		{
			font-size: 4vw;
		}
		
		/* style general */
		
		.logo
		{
			margin-top: 30vh;
		}
		
		.logo img
		{
			width: 30vh;
		}
		
		header
		{
			height: 37vh;
		}
		
		header h1
		{
			font-size: 70px;
			margin-top: 5vh;
		}
		
		.intro
		{
			height: 16vh;
			font-size: 20px;
			padding: 3vw 3vw 0vw 3vw;
		}
		
		.intro p
		{
			font-size: 18px;
		}
		
		.intro img
		{
			width: 100px;
		}
		
		.outro
		{
			height: 11vh;
			padding: 5vw 10vw 0vw 10vw;
		}
		
		footer
		{
			height: 25vh;
			padding-top: 2vh;
		}

    }

    /* Small Devices, Tablets */
@media only screen and (min-width : 768px)
	{
		/* esthétique */
		
		nav h2
		{
			font-size: 20px;
		}
		
		infos, h4
		{
			margin-left: -4vw;
		}
		
		h5
		{
			font-size: 2vw;
		}
		
		/* style general */
		
		.logo
		{
			margin-top: 25vh;
		}
		
		.logo img
		{
			width: 35vh;
		}
		
		header
		{
			height: 42vh;
		}
		
		header h1
		{
			font-size: 90px;
			margin-top: 5vh;
		}
		
		.callto
		{
			margin-top: 14vh;
		}

		.outro
		{
			height: 10vh;
			padding: 2vw 0vw 0vw 0vw;
		}
		
		footer
		{
			height: 20vh;
			padding-top: 2vh;
		}

    }

    /* Medium Devices, Desktops */
@media only screen and (min-width : 992px)
	{
		/* esthétique */
		
		nav h2
		{
			font-size: 22px;
		}
		
		h5
		{
			font-size: 1.5vw;
		}
		
		/* style general */
		
		.logo
		{
			margin-top: 22vh;
		}
		
		.logo img
		{
			width: 40vh;
		}
		
		header h1
		{
			font-size: 100px;
			margin-top: 5vh;
		}
		
		.callto
		{
			margin-top: 12vh;
		}
		
		.outro
		{
			height: 11vh;
			padding: 1vw 0vw 0vw 0vw;
		}
		
		footer
		{
			height: 12vh;
		}

    }

    /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)
	{	
		/* esthétique */
		
		nav h2
		{
			font-size: 25px;
		}
		
		p
		{
			font-size: 18px;
		}
		
		.contenu h4
		{
			font-size: 2vw;
		}
		
		h3
		{
			font-size: 3vw;
		}
		
		h5
		{
			font-size: 1vw;
		}

		.titre
		{
			color: #00A79D;
			font-size: 50px;
		}
		
		/* style general */
		
		.logo
		{
			margin-top: 15vh;
		}
		
		.logo img
		{
			width: 50vh;
		}
		
		header
		{
			height: 60vh;
			padding-top: 15vh;
		}
		
		.callto
		{
			margin-top: 8vh;
		}
		
		.intro
		{
			height: 16vh;
			padding: 1vh 0vw 0vw 0vw;
		}
		
		.intro p
		{
			font-size: 25px;
		}
		
		.intro img
		{
			width: 120px;
			margin-top: 0px;
		}
		
		.contenu
		{
			margin-top: 5vh;
			margin-bottom: 5vh;
		}
		
		.outro
		{
			height: 12vh;
			padding: 2vh 0 0 0;
		}
		
		footer
		{
			height: 15vh;
		}
    }