@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

/* LOUILVIENNE PARAMETRES GLOBAUX  - box-sizing pour les vieux navigateurs - oveflow pour cacher le curseur */

html {
	font-size : 100%;
}
body {
font-family: 'Roboto', sans-serif;
background-image: url("https://www.franaparis.fr/louilvienne/images/Globe-Voie-Lactee-2881461.jpg");
box-sizing: border-box;
height:auto;
overflow-x: hidden;
margin:0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color : #000000;
/* non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size : 14px;
}

h1, h2 {
font-weight:100;
margin: 0;
}
h1 {
color : #ffffff;
font-size: 50px;
text-transform: uppercase;

}
h2 {
font-size: 25px;
text-transform: normal;
}
h3 {
	font-size: 14px;
	margin : 2px;
	font-weight: 400;
}
img {
	display:block;
}

section#fond-louilvienne {
height:100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color : #ffffff;
display : flex;
flex-direction: column;
justify-content :space-between;
align-items: center;
color:#f0F0F0;
text-align:center;
}

/* ******* LOUILVIENNE SECTION PREMIER BLOC ******* */


.main-content-text {
	padding-top : 100px;
}


button#monBouton2 {
padding: 15px 100px;
border: 1px solid mediumblue;
background-color:rgba(255, 255, 255, 0.3);
display: inline-block;
margin-top: 10px ;
border-radius: 25px;
text-decoration: none;
outline-style: none;
color: mediumblue;
font-size: 16px;
}

button#monBouton2:hover {
background: mediumblue;
color: #fff;
}
#globe {
	margin : 100px;
}


/* ******* LOUILVIENNE SECTION FOOTER ******* */
#basdepage {
  	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 0px 20px 0px;
	text-align: center;
	background : black;
	max-width : 100vw;
	border-top: solid 1px mediumblue;
	color: #D10002 ;
}
#paysage { 	
	text-align:center;
 }

/* *********************************** 
MEDIAS QUERIES 
*********************************** */
/* ------------------------------*
LANDSCAPE entre 768 et 960
*-------------------------------*/
@media only screen and (orientation : landscape) and (min-width: 768px) and (max-width: 960px)  { 
	h1 {
		font-size : 28px;
	}
	h2 {
		font-size : 18px;
	}
	h3 {
		font-size: 13px;
	}
  	
  	.main-content-text {
		padding-top : 50px ;
	}
  	button {
  		margin-top: 30px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	
  	#basdepage {padding: 10px 0px 10px 0px;
}
}

@media only screen and (orientation : landscape) and (min-width: 768px) and (max-width: 960px) and (max-height: 414px) { 
	.main-content-text { padding-top: 25px; }
	#basdepage { padding: 8px 5px 0px 5px; }
}
/*------------------------------------*
Phone Portrait and Landscape FONT
*------------------------------------*/
@media only screen and (max-width: 767px) {

	h1 {
		font-size : 30px;
	}
	h2 {
		font-size : 18px;
	}
	h3 {
		font-size: 13px;
	}
}
/* ------------------------------*
PORTRAIT under 767
*--------------------------------*/
@media only screen and (orientation : portrait) and (max-width: 767px) { 
  	
  	.main-content-text {
		padding-top : 40px ;
	}
  	button {
  		margin-top: 30px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	
  	#basdepage { padding: 10px 10px 10px 10px;}
}

/* ------------------------------*
LANDSCAPE under 768
*--------------------------------*/
@media only screen and (orientation : landscape) and (max-width: 767px) {   	
  	.main-content-text {
		padding-top : 20px ;
	}
  	button {
  		margin-top: 20px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	
	#basdepage {
			padding: 8px 5px 10px 5px;
	}
	#NASA {
		font-size: 9px;
	}
}
/* ------------------------------*
LANDSCAPE under 768 iphone 5
*--------------------------------*/
@media only screen and (orientation : landscape) and (max-width: 767px) and (max-height : 568px) {  	
  	.main-content-text {
		padding-top : 10px ;
	}
  	button {
  		margin-top: 20px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	img#daisy { 
		width:160px; 
		margin: 20px 0px 20px 30px;
	}
	#NASA {
		font-size: 9px;
	}
}
/*------------------------------------*
Phone Portrait and Landscape petits
*------------------------------------*/
@media only screen and (max-width:320px) {
	
	h1 {
		font-size : 22px;
	}
	h2 {
		font-size : 12px;
	}
	h3 {
		font-size : 11px;
	}
	section { 
		padding-top : 5px; }
	
	.main-content-text {
		padding-top : 10px;
	}
	button {
		font-size: 12px;
		padding: 8px 18px;
		margin-top : 10px;
	}
	
	#basdepage {
		padding: 5px;
	}
	#NASA {
		font-size: 9px;
	}
}
/