/* 2018 Marie-Lou Lacombe */

/* =============================================================================================================================== */
/* ======================================================== 1875px and up ======================================================== */
/* =============================================================================================================================== */
@media only screen and (min-width: 1875px) {
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 3.5em;}
h2 { font-size: 2.2em;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {font-size: 5em; padding-top: 95px; padding-left: 125px; }
/* ================================================  7- TEXT ================================================ */
#text { padding-top: 5em; padding-left: 125px; padding-right: 0px; }
h1 { padding-top: 6em;}
h2 { margin-left: 70px;}
p.contact { margin-top: 95px; line-height: 45px; font-size: 22px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { bottom: 20px; left: 9%; }
.social { font-size: 20px; padding: 0; }
#social-icon li { width: 45px; height: 45px; line-height: 45px !important; }
}

/* ======================================================================================================================== */
/* ======================================================== 1875px ======================================================== */
/* ======================================================================================================================== */
@media only screen and (max-width: 1875px) {
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 3.2em;}
h2 { font-size: 2em;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {font-size: 4em; padding-top: 90px; padding-left: 105px; }
/* ================================================  7- TEXT ================================================ */
#text { padding-top: 5em; padding-left: 105px; padding-right: 0px; }
h1 { padding-top: 6em;}
h2 { margin-left: 65px;}
p.contact { margin-top: 85px; line-height: 40px; font-size: 20px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { bottom: 20px; left: 8%; }
.social { font-size: 20px; padding: 0; }
#social-icon li { width: 45px; height: 45px; line-height: 45px !important; }
}

/* ======================================================================================================================== */
/* ======================================================== 1650px ======================================================== */
/* ======================================================================================================================== */
@media only screen and (max-width: 1650px) {
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 2.8em;}
h2 { font-size: 1.8em;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {font-size: 3.5em; padding-top: 30px; padding-left: 75px; }
/* ================================================  6- BACKGROUND ================================================ */
.logoAL { width: 60%; }
.logoAL::after { margin-right: 25%; }
/* ================================================  7- TEXT ================================================ */
#text { padding-top: 5em; padding-left: 75px; padding-right: 75px; }
h1 { padding-top: 3em;}
h2 { margin-left: 60px;}
p.contact { margin-top: 75px; line-height: 35px; font-size: 18px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { bottom: 20px; left: 9%; }
.social { font-size: 14px; padding: 0; }
#social-icon li { width: 35px; height: 35px; line-height: 35px !important; margin-left: 5px; margin-bottom: 25px;	}
}

/* ======================================================================================================================== */
/* ======================================================== 1200px ======================================================== */
/* ======================================================================================================================== */
@media only screen and (max-width: 1200px) {
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 2.8em;}
h2 { font-size: 1.8em;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {font-size: 3.5em; padding-top: 30px; padding-left: 75px; }
/* ================================================  6- BACKGROUND ================================================ */
.logoAL { width: 60%; }
.logoAL::after { margin-right: 30%; }
/* ================================================  7- TEXT ================================================ */
#text { padding-top: 5em; padding-left: 75px; padding-right: 75px; }
h1 { padding-top: 3em;}
h2 { margin-left: 60px;}
p.contact { margin-top: 75px; line-height: 35px; font-size: 18px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { bottom: 20px; left: 6%; }
.social { font-size: 14px; padding: 0; }
}

/* ======================================================================================================================== */
/* ======================================================== 1050px ======================================================== */
/* ======================================================================================================================== */
@media only screen and (max-width: 1050px) {
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 2.4em;}
h2 { font-size: 1.4em;}
p { font-size: 10px;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {font-size: 3.5em; padding-top: 30px; padding-left: 65px; }
/* ================================================  6- BACKGROUND ================================================ */
.logoAL { width: 60%; }
.logoAL::after { margin-right: 35%; }
/* ================================================  7- TEXT ================================================ */
#text { padding-top: 5em; padding-left: 65px; padding-right: 75px; }
h1 { padding-top: 3.5em;}
h2 { margin-left: 60px;}
p.contact { margin-top: 75px; line-height: 35px; font-size: 16px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { bottom: 20px; left: 6%; }
.social { font-size: 14px; padding: 0; }
#social-icon li { width: 35px; height: 35px; line-height: 35px !important; margin-left: 5px; margin-bottom: 25px;	}	
}

/* ======================================================================================================================= */
/* ======================================================== 950px ======================================================== */
/* ======================================================================================================================= */
@media only screen and (max-width: 950px) {
	body { position: relative; height: 100%; min-height: 100%;}
	html {  min-height: 650px !important;}
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 2.1em;}
h2 { font-size: 1.1em;}
/* ================================================ 5- HEADER ================================================ */
#header a.logo {display: none;}
/* ================================================  6- BACKGROUND ================================================ */ 
.logoAL { position: relative;}
.logoAL::after { position: fixed; justify-content: center; top: 200px; right: 0; margin-right: -500px; width: 10000px; height: 10000px; 
  -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; }	
/* ================================================  7- TEXT ================================================ */
#text { display: flex; 	justify-content: center;b-ms-align-items: center; align-items: flex-start;	
	max-width: 100%; min-height: 72%; padding-top: 2em; padding-left: 0; padding-right: 0;  background-color: white;}
h1 { padding-top: 1em;}
h2 { margin-left: 60px;}
p.contact { margin-top: 75px; line-height: 35px; font-size: 16px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { background-color: white; width: 100%; bottom: 50px; left: 0;  }
.social { font-size: 14px; padding: 0; }
#social-icon li { width: 35px; height: 35px; line-height: 35px !important; margin-left: 5px; margin-bottom: 25px; }
/* ================================================  9- FOOTER ================================================ */
#footer {background-color: white;}
}

/* ======================================================================================================================= */
/* ======================================================== 600px ======================================================== */
/* ======================================================================================================================= */
@media only screen and (max-width: 600px) {
	html {  min-height: 600px !important;}
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 1.8em;}
h2 { font-size: 1em;}
/* ================================================  7- TEXT ================================================ */
h2 { margin-left: 0; text-align: center;}
p.contact { margin-top: 65px; line-height: 25px; font-size: 14px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { background-color: white; width: 100%; bottom: 50px; left: 0;  }
.social { font-size: 12px; padding: 0; }
#social-icon li { width: 30px; height: 30px; line-height: 30px !important; margin-left: 5px; margin-bottom: 15px; }
}

/* ======================================================================================================================= */
/* ======================================================== 430px ======================================================== */
/* ======================================================================================================================= */
@media only screen and (max-width: 430px) {
	html {  min-height: 550px !important;}
/* ================================================ 3- TYPO ================================================ */
h1 {	 font-size: 1.4em;}
h2 { font-size: 0.8em;}
.visible-small {display: block !important;}
/* ================================================  7- TEXT ================================================ */
h2 { margin-left: 0; text-align: center;}
p.contact { margin-top: 50px; line-height: 20px; font-size: 12px;}
/* ================================================  8- SOCIAL ================================================ */
#social-icon { background-color: white; width: 100%; bottom: 50px; left: 0;  }
.social { font-size: 10px; padding: 0; }
#social-icon li { width: 25px; height: 25px; line-height: 25px !important; margin-left: 5px; margin-bottom: 15px; }
}