/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24 mars 2014, 10:30:34
    Author     : jeremy.b
*/

#main_content_transparent_home b {
	color:#DB4B4B;
}

#content_externalisation{
	width: 58%;
	margin:0 auto;
	margin-top:1%;
}

#img_exter{
	width: 60px;
	float: left;
	margin-top: 4px;
	margin-right: 10px;
}

#titre_colonne{
	background:#054570;
	color:white;
	font-size:18px;
	text-align:center;
	padding: 11px;
	width: 212px;
	margin-left: -5px;
	margin-top: 1px;	
}

#sous_titre_colonne{
	color:#054570;
	padding: 11px;
	width: 183px;
	margin-left: -5px;
	margin-top: 1px;
	padding-left: 18px;
	font-weight:bold;
}


#txt_colonne{
	color:#054570;

}

.etapes{
  width: 236px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  padding: 5px;
	
}

#offre_ext{
	width: 26%;
	float: left;
	vertical-align: top;
	margin-right: 6%;
}

#forces_ext{
	width: 26%;
	display: inline-block;
	margin-right: 6%;
}

#enjeux_ext{
	width: 33%;
	display: inline-block;
	vertical-align:top;
}

#etapes_ext{
	border-top: 1px solid rgb(238, 238, 238);
	padding-top: 26px;
	margin-top: 44px;
	border-bottom: 1px solid rgb(238, 238, 238);
	padding-bottom: 25px;
}

#etapes_ext ul#etapes{
	padding: 0px;
}

#etapes_ext ul#etapes li{
	background: #eee;
	padding-left: 19px;
	height: 145px;
	list-style: none;
	display: inline-block;
	width: 15.5%;
	margin-right: 17px;
	vertical-align: top;
	padding-right: 10px;
	color: #484848;
}

#etapes_ext ul#etapes li h3 {
    font-size: 18px;
    border-bottom: 2px solid #DB4B4B;
    width: 37px;
    padding: 7px;
    color: #DB4B4B;
    font-weight: bold;
}

#enjeux_ext ul#enjeux li{
	padding: 5px;
	color:#484848;
	list-style:none;
	margin-left: -3px;
}

#avantages_ext  {
    background: #484848;
    padding-top: 15px;
    padding-bottom: 20px;
}

#avantages_ext::before {
    top: 0%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: relative;
    border-top-color: #fff;
    border-width: 20px;
}

#avantages_ext h2 {
	text-align:center;
	color:white;
}

#avantages_ext ul {
    width: 58%;
    margin: 0 auto;
}

#avantages_ext ul li{
	list-style: none;
	padding: 3px;
	margin-left: -28px;
    color: white;
    list-style: none;
    width: 33%;
    display: inline-flex;
    vertical-align: top;
    margin-bottom: 32px;
    margin-right: 22px;

}

#avantages_ext ul li img {
    padding-right: 12px;
    height: 18px;
    margin-top: 2px;
}

/************** Media queries ********************/
@media screen and (max-width : 740px) {
	#main_content_transparent_home {
	width: 100%;
	}
	
	#content_externalisation, #avantages_ext {
    width: 100%;
	}
	
	#offre_ext, #forces_ext, #enjeux_ext {
    width: 100%;
	}

	#avantages_ext ul {
    width: 100%;
	}
	
	#etapes_ext ul#etapes li{
	width:100%;
	height: 91px;
	margin-bottom:2%;
	}
	
	#avantages_ext::before {
	display:none;
	}
	
	#avantages_ext ul {
    width: 87%;
	}
	
	#avantages_ext ul li {
    width: 100%;
	}
}

@media only screen and (min-width : 741px) and (max-width : 940px) {
	#main_content_transparent_home {
	width: 100%;
	}
	
	#content_externalisation, #avantages_ext {
    width: 100%;
	}
	
	#offre_ext, #forces_ext, #enjeux_ext {
    width: 100%;
	}

	#avantages_ext ul {
    width: 100%;
	}
	
	#etapes_ext ul#etapes li{
	width:100%;
	height: 91px;
	margin-bottom:2%;
	}
	
	#avantages_ext::before {
	display:none;
	}
	
	#avantages_ext ul {
    width: 87%;
	}
}

@media only screen and (min-width : 941px) and (max-width : 1360px) {
	#content_externalisation, #avantages_ext {
    width: 100%;
	}
	
	#avantages_ext ul {
    width: 93%;
	}
	
	#etapes_ext ul#etapes li {
    width: 14.5%;
	}
}

@media only screen and (min-width : 1361px) and (max-width : 1770px) {
	#content_externalisation {
    width: 70%;
	}
	
	#avantages_ext ul {
    width: 70%;
	}
	
	#etapes_ext ul#etapes li {
    width: 14.5%;
	}
}

@media only screen and (min-width : 1771px) and (max-width : 1850px) {
	#etapes_ext ul#etapes li {
    width: 14.5%;
	}
}