/* style.css */
/* @font-face kit by Fonts2u (https://fonts2u.com) */ @font-face {font-family:"Open Sans Condensed Bold";src:url("OpenSans-CondBold.eot?") format("eot"),url("OpenSans-CondBold.woff") format("woff"),url("OpenSans-CondBold.ttf") format("truetype"),url("OpenSans-CondBold.svg#OpenSans-CondensedBold") format("svg");font-weight:normal;font-style:normal;}
hmtl {
  scroll-behavior: smooth;
}
body, html {
    margin: 0;
    padding: 0;
	background-color: #00303a;
	text-align:center;
	color: #fff;
	font-family: 'Open Sans Condensed', Arial, sans-serif;
	font-size: 19px; 
}

h1,h2,h3,.h1,.h2,.h3{
	font-family:'Open Sans Condensed Bold', Arial; 
	text-transform:uppercase;
	font-weight: 400;
	font-style: normal;
}
 strong{
	font-family:'Open Sans Condensed Bold', Arial; 

	font-weight: 400;
 }
h1{font-size:3rem;}
h2,.h2{font-size:1.8rem; line-height:0.8em;}
h3,.h3{font-size:1.1rem; line-height:1em;}
	a, p{color:#fff;}
	p{max-width:800px; margin:0 auto 20px;}
.courant{font-size:1rem;}
.bleu{color:#00303a;}
.turquoise{color:#009baa;}
.turquoiseclair{color:#84ccd6;}


.header {
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-between;
	padding: 0;
	align-items:center;
	justify-content:center;
	z-index: 999;
}

.logo-container  {

  background: url(images/usine-virtuelle-st-omer-logo.png) center center no-repeat;
  background-size:100%;
  transition: all 0.5s ease;
  max-width: 250px;
}
.shrink .logo-container  {
    max-width: 150px;
}

.logo-container .logo {
	
    max-width: 100%;
    height: auto;
	opacity:1;
	transition: all 0.5s ease;
	
}
.shrink .logo-container .logo {
	opacity:0;
}
.menu-toggle {
  border: none;
  background: none;
  cursor: pointer;
  padding: 10px;
  position:absolute;
 top: 20px;
  right:20px;
  
}
nav#menu.hidden {
    display: none;
}

nav#menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
	max-width: 300px;
  position: absolute;
  right: 40px;
}

nav#menu a {
    color: white;
    text-decoration: none;
    padding: 10px;
    text-align: center;
}
.section {
    margin-top: 0px;  
padding:60px 10px;
}

/****************Partie 1********/

.intro{display:flex;width:100%;margin-bottom: 60px; }
.intro a{font-family:'Open Sans Condensed Bold', Arial;}
.intro1,.intro2{color:#fff;}


/****************Partie Pilliers********/



#partiepilliers{
}
.pilliers{display:flex;
  margin: 0 auto;
flex-wrap:wrap;
  }
.pillier{
position:relative;
width:100%;

  }
.pillier img{width: 100%;}
.pillier .texte{
position: absolute;
  top: 10%;
  left: 0;

  margin: 0 auto;
  width: 100%;
  }
.pillier .texte h2{padding:0 20 px;}

/****************Partie Pro********/

#pro{}

.etapes {max-width:700px; margin:0 auto; display:flex; flex-direction:column;}
.etape1{background:#009baa;}
.etape2{background:#84ccd6;}
.etape3{background:#fff;}
.chiffre{display:block; margin: 0 auto 15px;opacity:0.5;}
/****************Partie Particuliers********/
#particuliers{
background: linear-gradient(90deg, rgba(0,155,170,1) 0%, rgba(71,188,205,1) 20%, rgba(71,188,205,1) 80%, rgba(0,155,170,1) 100%);
background:#47bccd; }

/****************Partie Particuliers********/
#sponsors{padding:60px 10px;}
.contact{margin:80px 0 80px;}
.credits{margin:80px auto 80px;}

@media screen and (min-width:500px){
	.header {
	position: fixed;
    top: 0;
	/*background-image: linear-gradient(to bottom, #00303a, transparent);*/
	}	
.header.shrink {
	height: 260px;
	background-image: linear-gradient(to bottom, #00303a, transparent);
	}
	.logo-container  {
position: fixed;
	top: 20px;}
	.menu-toggle {
	  position:fixed;
	 
	}
	#partie1{padding-top:100px;}
	.pilliers{flex-wrap:no-wrap;}
	.pillier{	
	width:25%;
	  }
	  .intro1,.intro2{width:50%; color:#fff;}
	  .section {
    margin-top: 0px;  
padding:220px 10px;
}
	  #sponsors{padding:240px 10px 100px;}
}
@media screen and (max-width:500px){
	.intro{flex-direction:column; }
}