@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

/***Master***/
.btn-my-primary
{
	background-color: #0dbfd9;
  	border-radius: 20px;
  	padding: 1px 18px;
}

body
{
	font-size:14px;
}

h1,h2,h3,h4
{
	text-transform: uppercase;
	font-weight:300;
	color:#fff;
}

h1
{
	font-size:4em;
}

h2
{
	margin-bottom:40px;
	font-size:2.15em;
}
p,li,h1,h2,h3,h4,a
{
	font-family: 'Lato', sans-serif;
	color:#fff;
}

p,a
{
	font-size:16px;
}

a
{
	text-decoration: underline;
}

svg
{
	width: 100%;
}


.chapeau
{
	font-size:19px;
	margin:40px 0;
}

.fat
{
	font-weight:900;
}
.my-picto p
{
	padding: 0 30px;
}

.my-picto h3
{
	color:#000;
	text-transform: uppercase;
	font-size:1em;
	font-weight: 700;
}

#main
{
	position: relative;
	overflow: hidden;
}

.absolute
{
	position: absolute !important;
}

/****Bouton ******/
.btn-primary
{
	background-color:#1f2222;
	border: 1px solid #1f2222;
	color:#fff;
	margin: 25px 0;
}

.btn-primary:hover
{
	background-color:#fff;
	border: 1px solid #fff;
	color:#1f2222;
}

.btn
{
	text-decoration: none !important;
}

/*****Navbar****/
.navbar-fixed-top
{
	/*padding-bottom:30px;*/
	transition: all 0.3s;
	z-index: 900;
}

.navbar-fixed-top .navbar-brand, .navbar-fixed-top .nav
{
	padding: 0;
	margin-top: 0
}

.navbar-fixed-top .navbar-brand
{
	margin-top: -5px;
}
.navbar-scroll
{
	background-color:rgba(0,0,0,0.8);
	transition: all 0.3s;
}

.navbar-scroll .main-nav
{
	margin-top:10px;
}
.main-nav
{
	margin-top:40px;
}
.navbar-header a,.nav a
{
	text-transform: uppercase;
	font-family: 'Lato', sans-serif;
	font-weight:900;
	color:#fff;
	font-size:0.8em;
	text-decoration: none;
}

.nav li a:hover
{
	background-color:transparent;
	color:#0dbfd9;
}

.navbar-brand .btn-my-primary
{
	margin-top: 15px;
  	margin-left: 18px;
}


.navbar-brand
{
	text-transform: uppercase;
}

.nav
{
	margin-top:15px;
}

.nav>li>a:focus
{
	background-color:transparent;
}

#hidden-me
{
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.hidden-brand
{
	overflow: hidden;
	width: 50px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}


/*****Bouton Cree compte****/

@keyframes bounce{
     0% {transform: translateY(0);}
     10% {transform: translateY(-5px);}
     20% {transform: translateY(0px);}
     30% {transform: translateY(-5px);}
     40% {transform: translateY(0px);}
     100% {transform: translateY(0px);}
}

#cree-compte
{
	position: fixed;
	bottom:-73px;
	right:50%;
	margin-right: -285px;
	transform: translateY(45%);
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.appear
{
	transform: translateY(0%) !important;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#cree-compte p
{
  color: #000;
  position: absolute;
  right: 50%;
  margin-right: -75px;
  line-height: 27px;
  top: 41px;
  font-size: 1.5em;
  font-weight: 300;
  text-transform: uppercase;
}

#cree-compte p .fat
{
	font-size:1.5em;

}

#cree-compte i
{
  position: absolute;
  top: 6px;
  right: 50%;
  margin-right: -8.5px;
  font-size: 1.5em;
  color: #000;
  opacity:1;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  animation: bounce 3s ease infinite alternate;
  -webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
   animation-timing-function: ease-in-out;
}

.appear i
{
	opacity:0 !important;
	 -webkit-transition: all 0.3s;
	  -o-transition: all 0.3s;
	  transition: all 0.3s;

}

#cree-compte svg
{
	width:570px;
}

/***Section 1***/

#section1
{
	background:url('../images/section1.jpg') center center no-repeat fixed;
	background-size:cover;
	z-index: 0;
}

#section1 .container
{
	position: relative;
}
#content-section1
{
	/*position: absolute;*/
}
#section1 .row p
{
	margin-top: 20px;
	margin-bottom: 10px;
}
#picto1, #picto2, #picto3
{
	height:173px;
	width:85%;
	margin:auto;
}

@media (max-width: 1200px)
{
	#picto1, #picto2, #picto3
	{
		width: 40%;
	}

}

#picto4, #picto5, #picto6, #picto7, #picto8, #picto9
{
	width:40%;
	margin: auto;
}

#picto4
{
	height: 180px;
}

#picto8
{
	height:180px;
}

/***Section 2***/
#section2
{
	background-image:radial-gradient(#0ec1da, #0393b6);
	z-index: 10;
}

.content-section
{
	padding:230px 0;
}

.color-section
{
	padding: 190px 0;
}

@media (max-width: 1200px)
{
	.content-section
	{
	  padding: 100px 0;
	}
}


/***Section 3***/
#section3
{
	background:url('../images/section3.jpg') center center no-repeat fixed;
	background-size:cover;
	z-index: 20;
}

#section3 p, #section3 h1,#section3 h2
{
	color:#1f2222;
}

#picto-section3
{
	position: relative;
	height: 370px;
}

#picto-section3 p
{
	position: absolute;
	top:50%;
	margin-top: -87.5px;
	/*right:50%;*/
	margin-right: -180px;
	font-size:3em;
	width: 100%;
	font-size:2em;
}

#picto-section3 p .fat
{
	text-transform: uppercase;
}

/***Section 4***/
#section4
{
	background-color:#ffd900;
	z-index: 30;
}

#section4 p, #section4 h1,#section4 h2, #section4 h3, #section4 h4
{
	color:#1f2222;
}

#section4 h2
{
	margin:20px 0;
}

/*** En savoir + section 4****/

#section-4-1, #section-4-2, #section-2-1, #document
{
	position: fixed;
	height:100%;
	top:0;
	bottom: 0;
	right:0;
	left: 0;
	background-color:#fff;
	z-index: 9999;
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
	overflow-y: auto;
}

#section-4-1 .content, #section-4-2 .content , #section-2-1 .content, #document .content
{
	position: relative;
	top:50%;
	-webkit-transform: translateY(-50%);
	transform:translateY(-50%);
}

@media(max-width:400px)
{
	#section-4-1 .content, #section-4-2 .content , #section-2-1 .content
	{
		top:0;
		-webkit-transform: translateY(0%);
		transform:translateY(0%);
		margin:100px 0;
	}
}

#section-4-1, #section-4-2
{
	background-color:#ffd900;
}


#section-4-1 p, #section-4-2 p
{
	padding:0 10%;
	text-align: justify;
}

#section-4-1, #section-2-1
{
	-webkit-transform:translateX(-100%);
	transform: translateX(-100%);
}

#section-4-2, #document
{
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

#section-4-1 .row, #section-4-2 .row
{
	margin-top: 50px;
}

#section-2-1
{
	background-color: #fff;
}

#document
{
	background-image:radial-gradient(#0ec1da, #0393b6);
}

#section-2-1 h2,
{
	color:#0ec1da;
}


#section-2-1 p,  #section-2-1 li, #document p
{
	color:#848484;
}

#section-2-1 ul
{
	padding:0;
}

#section-2-1 li strong
{
	color:#848484;
}

#section-2-1 li
{
	list-style: none;
	line-height:25px;
}

#section-2-1 li::after
{
	content:'';
	display: block;
	width:100%;
	height:1px;
	background-color:#ebeff0;
	margin-top:5px;
}

#section-2-1 .photo-carte
{
	height: 100%;
	background-size: cover;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

@media(max-width:400px)
{
	#section-2-1 .photo-carte
	{
		display: none;
	}
}

#section-2-1 .photo-carte img
{
	width:100%;
}
.open-section-4
{
	transform: translateX(0%) !important;
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}

#section-4-1 a, #section-4-2 a, #section-2-1 a, #document .fa-times-circle
{
	position: absolute;
	top: 30px;
	right: 30px;
	font-size:3em;
	color:#1f2222;
	z-index: 99999;
}

/***Section 5***/
#section5
{
	background:url('../images/section5.jpg') center center no-repeat fixed;
	background-size:cover;
	z-index: 40;
}

#document h1
{
	color:#fff;
	text-align: center;
	margin-bottom:50px;
}

#document a
{
	color:#1f2222;
	text-decoration: none;
}

#document .panel
{
	padding:30px 0;
	margin:10px 0;
}

#document .fa-file-pdf-o
{
		width: 50px;
    height: 50px;
    line-height: 50px;
    background-color:#0ec1da;
		color:#fff;
    border-radius: 50%;
    text-align: center;
    margin: 0 20px;
    font-size: 1.5em;
}


/*****Couleur au hover des pictos de la charte*******/

#num1 path,#num2 path,#num3 path,#num4 path,#num5 path,#num6 path,#num7 path,#num8 path,#num9 path,#num10 path
{
	transition: all 0.3s;
}

#num1:hover #hecta1 path
{
	fill:#d3254a;
	transition: all 0.3s;
}

#num1:hover #texte1 path
{
	fill:#FFF;
	transition: all 0.3s;
}

#num2:hover #hecta2 path,#num3:hover #hecta3 path,#num4:hover #hecta4_1_ path,#num5:hover #hecta5 path
{
	fill:#0ec1da;
	transition: all 0.3s;
}

#num2:hover #texte2_1_ path,#num3:hover #texte3 path,#num4:hover #texte4 path,#num5:hover #texte5 path
{
	fill:#FFF;
	transition: all 0.3s;
}

#num6:hover #hecta6 path,#num7:hover #hecta7 path,#num8:hover #hecta8 path
{
	fill:#ffd900;
	transition: all 0.3s;
}

#num9:hover #hecta9 path,#num10:hover #hecta10 path
{
	fill:#1f2222;
	transition: all 0.3s;
}

#num10:hover #texte10 path,#num9:hover #texte9 path
{
	fill:#FFF;
	transition: all 0.3s;
}



/***Footer**/
footer
{
	padding:20px 0;
	background-color:#1f2222;
	color:#fff;
}
footer a
{
	color:#fff;
}

@media screen and (max-width: 1540px)
{
	h1
	{
	  font-size:3em;
	}

	h2
	{
		font-size:1.8em;
	}

	.chapeau
	{
		font-size:14px;
		margin:20px 0;
	}
}

#charte-picto
{
	height:409px;
	position: relative
}

#charte-picto g
{
	cursor: pointer;
}

/*****Tooltip de la charte****/
.my-tooltip
{
	position: absolute;
	opacity:0;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	border-radius: 5px;
	padding: 20px;
	color: #fff;
	display: none;
}

#tooltip1
{
    background-color: #d3254a;
    bottom: 100%;
}

#tooltip2,#tooltip3,#tooltip4,#tooltip5
{
	background-color:#0ec1da;
	bottom:85%;
}

#tooltip6,#tooltip7,#tooltip8
{
	background-color:#ffd900;
	color:#000;
	bottom: 65%;
}

#tooltip9,#tooltip10
{
	background-color:#1f2222;
	bottom: 45%;
}


.show-tooltip
{
	display: block;
	opacity:1;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}


/*****Form cree compte client *****/

#all-form
{
	position: relative;
}
#my-form
{
	position: fixed;
	top:0;
	bottom: 0;
	right:0;
	left: 0;
	background-color:#fff;
	z-index: 9999;
	transform: translateY(100%);
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
	overflow-y: scroll;
	padding: 30px 0;
}

#my-form h1, #my-form td label
{
	color:#1f2222;
}
#my-form .row h1
{
	display:none;
}
#my-form h1
{
	font-size:3em;
	text-align: center;
}

#my-form textarea, input[type='text'], input[type='password'], select
{
	margin-bottom: 0px;
    padding: 8px 10px;
    border: 1px solid #e5e5e5;
    font-size: 13px;
    color: #1e1e1e;
    border-radius: 5px;
    margin: 5px 0;
    width: 250px !important;
}

#ctl00_mainContent_ctl00_ctl00_CollaborateurForm_txtPostalCode
{
	width: 70px!important;
}
#ctl00_mainContent_ctl00_ctl00_CollaborateurForm_txtCity
{
	width: 130px !important;
}

#ctl00_mainContent_ctl00_ctl00_CollaborateurForm_btnSave
{
	background-color:#0ec1da;
	color:#fff;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

#ctl00_mainContent_ctl00_ctl00_CollaborateurForm_btnSave:hover
{
	background-color:#0ba6bb;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}

#my-form .cadre
{
	margin-top: 30px;
}

#my-form .fa-times-circle
{
	position: absolute;
	top: 30px;
	right: 30px;
	font-size:3em;
	color:#1f2222;
}

#my-form .inputError
{
	color:#D3254A;
}

/*** Custom the form *****/

@media (min-width: 1200px)
{
	#my-form .container
	{
	  width: 850px;
	}
}


#my-form tbody tr:nth-child(12),#my-form tbody tr:nth-child(13)
{
	display: none;
}
.open-form
{
	transform: translateY(0%) !important;
	-webkit-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
}

/**Changer breakpoint du menu **/
@media (max-width: 1200px)
{
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

    .navbar-toggle .icon-bar
    {
    	background-color:#fff;
    }

   /* .navbar-toggle
    {
    	margin-top:25px;
    }*/

    .navbar-collapse-non-scroll
    {
    	background-color:rgba(0,0,0,0.8);
    }


    /*** Custom thing *****/
    #picto-section3 p
    {
		margin-right: -150px;
    }
}

@media (max-width: 991px)
{
	#picto-section3 p
    {
		margin-right: -360px;
    }
}

@media (max-width: 405px)
{
	.navbar-brand
	{
		padding-left: 20px !important;
	}
	h1
	{
		font-size:2em;
	}
}