body {
	color: #fff;
	font-family: "open sans",sans-serif;
	font-size: 18px;
	background-color: #1a1a1a;
	line-height: 1.7;
	margin: 0;
	font-weight: 400;
}



/*--------------TITRE / TEXTE--------------*/


.title{
	font-family: "raleway", sans-serif;
	font-size: 50px;
	font-weight: normal;
	line-height: 1.4;
}

.title__banner{
	font-size: 100px;
	float: left;
	margin: 20px 0;
}

.title__banner--ux{
	color: #d8192f;
	font-weight: 500;
	background-color: #000;
	border-radius: 100%;
	padding: 22px 15px 22px 10px;
}

.subtitle{
	font-size: 35px;
	margin-top: 60px;
}

.subtitle--bloc{
	margin: 20px 0px;
}

.title--small{
	font-size: 25px;
}

.title--persona{
	font-size: 18px;
	margin: 0px;
}

.title--proto{
	color: #1a1a1a;
	font-size: 30px;
}


.title_carre{
	margin-bottom: 10px;
	margin-top: 0px;
}


.quote{
	margin: 20px 0;
}

cite{
	font-style: normal;
	margin-bottom: 100px;
}


.text_persona{
	margin-top: 0px; 
}

.list{
	list-style: none;
	padding: 0;
}

.text_center{
	text-align: center;
}

.text_medium{
	font-weight: 500;
}

.text--bold{
	font-weight: 700;
	color: #fff;
}

.text--big{
	font-size: 25px;
	line-height: 1.4;
	font-weight: 500px;
}

.text--red{
	color: #d8192f;
}

.block{
	display: block;
}

.hide{
	display: none;
}

/*--------------LIENS--------------*/

.link{
	text-decoration: none;
	color: inherit;
	text-decoration: none;
	transition: color 0.20s linear;
    transition: color 0.20s linear;
    transition: color 0.20s linear;
    transition: color 0.20s linear;
}

.link--doc{
	color: #f4b400;
	font-weight: 700;
}

.link--red{
	color: #d8192f;
}

.link--doc:hover, .link--doc:focus, .link--red:hover, .link--red:focus{
	color: #fff;
}

.link--credit:hover, .link--credit:focus{
	color: #d8192f;
}


.btn{
	cursor: pointer;
	background: none;

	border: solid 2px #fff;
	padding: 10px;
	margin-left: 250px;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 5px;
    color: #fff;
}

.btn:hover{
	background-color: #fff;
	color: #d8192f;
	font-weight: 500;
}

.btn--plus{
	background-color: #1a1a1a;
	color: #fff;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	border: none;
	margin-left: 45%
}

.btn--rond{
	font-weight: bold;
	padding: 10px 16px;
	border: solid 2px #fff;
	border-radius: 100%;
	color:  /*#fff*/ #fff;
	
}

.btn--credit{
	margin-left: 33%;
}

.btn--rond:hover, .btn--rond:focus, .btn--credit:hover, .btn--rond:active{
	background-color: #fff;
	color: #1a1a1a; 
}


/*--------------STYLE SECTIONS--------------*/
.header{
	padding-top: 70px;
	margin-bottom: 100px;
	height: 700px;
	background: url(img/banner_pc.png) no-repeat right bottom 20%;
}

.arrow{
	display: block;
    margin: auto;
    padding-top: 35px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.mindmap{
	height: 1000px;
	position: relative;
}

.mindmap--style{
	font-size: 20px;
	border: solid 2px #fff;
	border-radius: 20px;
	padding: 10px;
	text-align: center;
	width: 130px;
}

.mindmap__style--long{
	width: 180px;
}


.google{
	font-family: "raleway", sans-serif;
	text-align: center;
	position: absolute;
	top: 55%;
	left: 8%;
}

.google--img{
	position: absolute;
	top: 25%;
	left: 12%;
}

.persona{
	background-color: #d8192f;
	width: 440px;
	padding: 170px 20px 20px 20px;
	margin-top: 150px;
	margin-bottom: 150px;
	position: relative;
}

li{
	padding: 2px;
}

.survol--text{
	cursor:pointer;}

.show--img{
	position: absolute;
	height: 333px;
	width: 333px;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
}

	.show--img:hover{
		opacity: 1;      
	}

.presentation{
	background-color: #d8192f;
	width: 700px;
	padding: 50px;
}


.name{
	background-color: #000;
	padding: 10px 0px 10px 10px;
	width: 225px;
	font-family: "raleway", sans-serif;
	margin-bottom: 80px;
}


.footer{
	background-color: #000;
	color: #fff;
	padding: 10px 50px;
	margin-top: 80px;
}

/*--------------IMAGES--------------*/

.img--worckshop{
	background: url(img/workshop.jpg) no-repeat left; 
}

.img--sondage{
	background: url(img/sondage.png) no-repeat right; 
}

.img--ai{
	background: url(img/ai.png) no-repeat left; 
}

.img--mindmap{
	background: url(img/mindmap.png) no-repeat left bottom;
}

.img--choix{
	background: url(img/choix.jpg) no-repeat right; 
}

.img--img_gslide{
	background: url(img/img_gslide.png) no-repeat left; 
}

.img--img_gsheet{
	background: url(img/img_gsheet.png) no-repeat left; 
}

.img--proto{
	background: url(img/proto.jpg) no-repeat right; 
}

.img--proto_papier{
	background: url(img/proto_papier.jpg) no-repeat left; 
}

.img--usertesting{
	background: url(img/usertesting.jpg) no-repeat right; 
}

.img--persona{
	position: absolute;
	top: -150px;
	left: 28%;
}

.info{
	background: url(img/info.png) no-repeat bottom 48% right 5% #000;
}


/*--------------LAYOUT--------------*/


.container{
	width: 1000px;
	margin: 0 auto;
}

.col{
	width: 600px;
}

.col--small{
	width: 550px;
}

.col--right{
	float: right;
}

.col--left{
	float: left;
}

.col--center{
	margin: 0 auto;
}

.col__bloc{
	position: absolute;
  	top: 50%;
  	right: 4%;
 	transform: translate(-50%, -50%);
}

.col__bloc--right{
	position: absolute;
  	top: 48%;
  	left: 65%;
  	transform: translate(-50%, -50%);
}

/*position texte mindmap*/
.col__mindmap{
	position: absolute;
	top: 31%;
}

.col__mindmap--fonct{
	left: 25%;
	margin-top: 0px;
}

.col__mindmap--sous_fonct{
	left: 55%;
}

.col--number{
	margin-bottom: 50px;
	float: left;
	margin-right: 30px;
}

.col--persona{
	float: left;
	margin-right: 40px;

}

	.col--persona:last-child{
			margin-right: 0;
		}

.col__carre{
	position: absolute;
	width: 300px;
  	top: 20%;
  	left: 5%;
 	font-size: 16px;
}

.col--name{
	float: left;
	margin-right: 20px;
}

	.col--name:nth-of-type(4n){
		margin-right: 0px;
	}

.clear{
	clear: both;
}

/*blocs de couleur*/

.bloc{
	height: 400px;
	background-color: #1a1a1a;
	position: relative;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bloc--large{
	height: 650px;
	margin-top: 50px;
}

.bloc--red{
	background-color: #d8192f;
}

.bloc--carre{
	
	height: 333px;
	width: 333px;
	background-color: rgb(26, 26, 26);
	margin-right: 0;
	float: left;
	position: relative;
	margin-bottom: 50px;
}


/*--------------BACKGROUND--------------*/
.bg__red{
	background-color: #d8192f;
	padding-bottom: 150px;
}

.bg__red--header{
	background: url(img/banner.png) repeat-x #d8192f;
}

.bg__red--section{
	padding-top: 150px;
}

.bg--black{
	background-color: #000;
}

.bg--invision{
	background: url(img/invision.png) repeat-x #0d0d0d;
	margin: 0;
	padding: 75px 0px;
}

/*--------------MARGIN SECTION--------------*/

.margin__bottom--50{
	margin-bottom: 50px;
}

.margin__bottom--150{
	margin-bottom: 150px;
}

.margin__top--100{
	margin-top: 100px;
}

.margin__top--150{
	margin-top: 150px;
}

.no-margin{
	margin-top: 0px;
}


.nbr--center{
	margin-left: 35%;
}

.mindmap--margin{
	margin-bottom: 30px;
}

.mindmap--space{
	margin-bottom: 130px;
}


/*COMMENTAIRES SUR IMAGES*/

.note--support{
	position: relative;
}

.note{
	position: absolute;
	color: #d8192f;
	font-size: 16px;
	font-weight: 700;
	width: 170px;
}

.note--1{
	top: 67%;
	left: -2%;
	width: 120px;
}

.note--2{
	top: 75%;
	left: 37%;
}

.note--3{
	width: 190px;
	top: 65%;
	left: 82%;
}

.note--4{
	width: 300px;
	top: 94%;
	left: 10%;
}


.concurrence{
	position: relative;
}

.allocine{
	position: absolute;
	color: #fff;
}


.allocine__nb1{
	width: 250px;
	top: 63%;
	left: 26%;
}

.allocine__nb1--arrow2{
	width: 200px;
	top: 74%;
	left: 1%;

}

.allocine__nb2{
	width: 200px;
	top: 64%;
	left: 2%;
}

.allocine__nb3{
	width: 270px;
	top: 66%;
	left: 71%;
}

.allocine__nb3--arrow2{
	width: 200px;
	top: 87%;
	left: 63%;
}

.allocine__nb4{
	width: 250px;
	top: 78%;
	left: 1%;
}