/*----------general-rules----------*/


@font-face {
  font-family: comfortaa;
  src: url("../fonts/Comfortaa-Regular.ttf");
}

@font-face {
  font-family: advent;
  src: url("../fonts/AdventPro-SemiBold.ttf");
}

@font-face {
  font-family: open;
  src: url("../fonts/OpenSans-Regular.ttf");
}




body {
	border-top: 10px solid #9E0000;
	background: #D0D0D0;
	
	font-family: 'Open Sans', sans-serif;
	color: #333333 ;
	}
	


p {
	margin: 10px 0;
	line-height: 25px;
	text-align: justify;
	}

a {
	text-decoration: none;
	color: inherit;
	transition: color .5s ease;
	}
	
li {list-style-type: disc;
margin-left: 20px;		
		}	
		
h2 {
text-align: center;
font-size: 3rem;
font-family: advent;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 100px;

}
	
h3 {
font-weight: normal;
font-size: 1.7rem;
color: #296CB2;
line-height: 1.3em;
font-family: advent;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 20px;


}


h4 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 40px;
margin-bottom: 10px;

}
	

.container
{width: 100%;
margin-left: auto;
margin-right: auto;
padding-top: 60px;
padding-bottom: 200px;
position:relative;
border-bottom: solid 10px #9E0000;
border-top: solid 10px #9E0000;
}

.main_wrapper {
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 1200px;

box-shadow: 0 0 20px black;
}

.wrapper {
max-width: 900px;
margin: 0 auto;
position: relative;
}

.left, .right {
width: 45%;
margin: 0 2.5%;
float: left;


}


.gray {
background-color: #404040;
color: white;
background-image: url(../img/background.png);
}

.white {
background-image: url(../img/background_white.png);
background-color: white;
}



.gray h2, .gray h3 {color: white;}
.white h2, .white h3 {color: #9E0000;}


.picture {
width: 100%;
display: block;
background-image: url(../img/graph1.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

.picture img{
opacity: 0.7;
}




/*----------header----------*/

header
{position:relative;
width:auto;
max-width:1200px;
margin: 0 auto;
background-color: white;
padding-bottom: 30px;
padding-top: 70px;

}




header img {
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
display: block;
}

nav 
{width: 100%;
background-color: #9E0000;
color: white;
z-index: 1999;
position: fixed;
top: 0;
box-shadow: 0 0 10px black;
}

nav ul
{list-style:none;
display: block;
width: 900px;
margin-left: auto;
margin-right: auto;
}


nav ul li
{display:block;
float:left;
margin: 0;
}


nav ul li a
{font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
height: 50px;
display: block;
padding:0 20px;
line-height:50px;
transition: all .25s ease;}


nav ul li a:hover
{
background-color: #D53232;
}





/*----------slider----------*/

#slider_content1, #slider_content2, #slider_content3
{
font-family: advent;
width:100%;
position:absolute;
top: 35%;
display:none;
z-index:11;

}

.slider_content_bg {
background-color: rgba(0, 0, 0, 0.6);
height:100%;
width: 100%;
top:0;
left:0;
position: absolute;
z-index: -1;

}

#slider_content1
{display:block;}





#slider_content1 p, #slider_content2 p, #slider_content3 p
{
color:white;
padding-bottom:30px;
padding-top:30px;
font-size: 2.3rem;
line-height: 1.2em;
text-shadow: 0 0 10px black;
text-align: center;
}




#slides img, .picture img {
height: auto;
}


#slider_container {padding: 0;   background-color: #404040;}

.slider_container {width: 100%; max-width: 1200px;margin-left: auto;margin-right: auto;}




/*----------accueil----------*/


.head_home {
display: block;
margin-top: 50px;
margin-bottom: 30px;
}


#home article h3 {
display: block;
text-align: left;
margin-top: 20px;
margin-bottom: 40px;
}

#home article img
{float:left;
margin-right:15px;
width: 90px;
}



/*----------offre----------*/




.slide_container2{
width: 100%;
height: 300px;
position: absolute;
top: 30px;
z-index: 1;
opacity: 0.7;
}


#offre h3{font-size: 2.3rem; margin-bottom: 50px; float: left; display: block; width: 700px;}

.traitment_head {
background-color: rgba(255,255,255,0.8);
display: block;
width: 440px !important;
text-align: center;
border-radius: 50px;
padding-left:90px;
padding-right: 10px;
padding-bottom: 15px;
padding-top: 15px;
margin-top: 35px;
z-index: 90;
}

.arrow_wrapper {
display: block;
width: 100%;
height: 1px;
position: relative;
}



.arrow, .arrow2{ background-image: url(../img/arrow-down.png); height: 50px;
width: 50px;
z-index: 99;
background-repeat: no-repeat;
background-position: center center;
transition: all .25s ease;
border-radius: 100%;
cursor: pointer;
border: solid 10px white;
display: block;
position: absolute;
    bottom: -30px;
    z-index: 2;
    margin-left:-35px;
    left:50%;
background-size: contain;
background-color: #404040;
}



.rotate {
    transform: rotate(-180deg);
    transition: .3s;
}

.rotate2 {
    transform: rotate(-45deg);
    transition: .3s;
}

.arrow a, .arrow_up a, .plus a{
display: block;
width: 100%;
height: 100%;
}

.arrow_up { background-image: url(../img/arrow-up.png); height: 50px;
width: 50px;
z-index: 99;
background-repeat: no-repeat;
background-position: center center;
transition: all .25s ease;
border-radius: 100%;
cursor: pointer;
border: solid 10px white;
display: block;
position: absolute;
top: -30px;
    z-index: 2;
    margin-left:-35px;
    left:50%;
background-size: contain;
background-color: #404040;
}



.plus{ background-image: url(../img/plus.png); height: 50px;
width: 50px;
z-index: 99;
background-repeat: no-repeat;
background-position: center center;
transition: all .25s ease;
border-radius: 100%;
cursor: pointer;
border: solid 10px white;
display: block;
position: absolute;
top: -30px;
z-index: 2;
margin-left:-35px;
left:50%;
background-size: contain;
background-color: #404040;
}

.arrow:hover, .arrow_up:hover, .plus:hover{ 
background-color: #3868AB;
}


.title1 {
	
display: none;
text-align: center;
top: 35px;
width: 100%;
position: absolute;
color: gray;
font-size: 0.8rem;
line-height: 0.8rem;
z-index: 100;
}

.title2 {
display: none;
text-align: center;
bottom: 35px;
color: gray;
width: 100%;
position: absolute;
font-size: 0.8rem;
line-height: 0.8rem;
}

.title3 {
display: none;
text-align: center;
bottom: 30px;
color: gray;
width: 100%;
position: absolute;
font-size: 0.8rem;
line-height: 0.8rem;

}

.offre_wrapper {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
position: relative;
padding-top: 50px;
padding-bottom: 100px;

}

.offre_head {
width: 100%;
margin-bottom: 30px;
z-index: 10;
position: relative;
z-index: 90;
}
.offre_icon{  height: 100px;
width: 100px;
z-index: 99;
background-repeat: no-repeat;
background-position: center center;
transition: all .25s ease;
border-radius: 100%;
border: solid 7px white;
float: left;
background-size: contain;
background-color: #404040;
margin-top: 45px;
margin-right: 50px;
}

#offre_icon1 {
background-image: url(../img/compose.png);

}

#offre_icon2 {
background-image: url(../img/piechart.png);
border: solid 7px #333333;
box-shadow: 1px 1px 5px gray;
margin-right: -80px !important;
margin-top: 35px !important;
z-index: 99;
position: relative;
}

#offre_icon3 {
background-image: url(../img/trends.png);

}

#offre_icon4 {
background-image: url(../img/magnifyingglass.png);
border: solid 7px #333333;
margin-left: 50px;
margin-right: 0;

}


#offre article{
position: relative;
margin: 0;
background-image: url(../img/background.png);
background-repeat: repeat;
}

.h4_icon {
display: block;
float: left;
}

#part3 h4 {
display: block;
float: left;
width: 270px;
margin-left: 20px;
height: 50px;
}





#part1, #part3 {
background-color: #4A4A4A;

}
#part2 {
color: #333333 ;
background-image: url(../img/background_white.png) !important;
background-color: white;

}

#part2 ul {
display: block;
width: 300px;
float: left;
margin-left: 50px;
}

#part2 h3, #part4 h3 {
color: #333333 ;
}

#part2 h3 {
color: #333333 ;
text-shadow: 1px 1px 5px gray;
}

#part4 h3 {
color: #333333 ;
padding-bottom: 0;
padding-top: 0;
line-height: 7rem;

}

#part4 .offre_wrapper {
padding-bottom: 0;
padding-top: 0;
min-height: 180px;
}

#part4 {
margin-top: 200px !important; 
color: #333333 ;
background-image: url(../img/background_white.png) !important;
background-color: white;


}

.open_data_text {
display: block;
margin-bottom: 100px;
padding-bottom: 100px;
position: relative;
}



/*----------reference----------*/

.client_logos {

width: 500px;
margin-left: auto;
margin-right: auto;
}

.client_logos img {
display: block;
height: auto;
width: auto;
}

.client_logos2 {

width: 400px;
margin-left: auto;
margin-right: auto;
}

.client_logos2 div {

display: block;
margin-left: auto;
margin-right: auto;
}

.contact_form, .contact_info{
float: left;
display: block;
width: 45%;
}

.contact_form {
margin-top: -50px;
}
/*----------footer----------*/

footer
{
border-top: solid 10px #9E0000;
margin-top: 400px;	
position:relative;
clear:both;
width:auto;
height:350px;
padding-top: 50px;
background:#333333;}

footer .wrapper
{
margin: 0 auto;
width:auto;
}



#copyright
{background: #1D1D1D;
height:70px;
position:absolute;
bottom:0;
left:0;
width:100%;}

#copyright .wrapper
{font-family: 'Open Sans', sans-serif;
padding-top:25px;
color: #5e5e5e;
font-size:14px;
position:relative;}


#copyright .wrapper .social
{position:absolute;
right:0;
top:25px;}

#copyright .wrapper .social a
{transition: opacity .25s ease;
opacity: 0.3;
margin-left: 12px;
display:block;
float:left;}

#copyright .wrapper .social a:hover
{opacity: 0.7;}

#copyright .wrapper a
{color: #ABABAB;}

#copyright .wrapper a:hover
{color: #fff;}










/*----------misc----------*/

.clear
{clear:both;}

.hidden
{display: none;}

.fixed_to_top {
position: fixed;
top: 0;
box-shadow: 0 0 10px #404040;

}

.invisible {opacity: 0;}

.pointer {cursor: pointer;}