/**
** Opinions et craintes
*/

.wity-app.wity-app-opinions-craintes {
	padding-top: 50px;
}

.document-icon.pdf.pdf-blue, .document-icon.pdf.pdf-blue:hover {
	color: white;
}

.box {
	padding-top: 15px;
}

.box .graph-title {
	max-width: 700px;
	text-align: center;
}

.box .decorator {
	position: absolute;
	background-repeat: no-repeat;
	display: none;
}

.box .decorator.decorator-top-left,
.box .decorator.decorator-top-right {
	width: 33px;
	height: 69px;
}

.box .decorator.decorator-bottom-left,
.box .decorator.decorator-bottom-right {
	width: 69px;
	height: 33px;
}

.box .decorator.decorator-top-left {
	background-image: url('../img/decorator-top-left.png');
}

.box .decorator.decorator-top-right {
	background-image: url('../img/decorator-top-right.png');
}

.box .decorator.decorator-bottom-left {
	background-image: url('../img/decorator-bottom-left.png');
}

.box .decorator.decorator-bottom-right {
	background-image: url('../img/decorator-bottom-right.png');
}

@media(min-width: 768px) {
	.box {
		padding-top: 70px;
	}

	.box .decorator {
		display: block;
	}

	.box .decorator.decorator-top-left {
		top: 30px;
		left: 30px;
	}

	.box .decorator.decorator-top-right {
		top: 30px;
		right: 30px;
	}

	.box .decorator.decorator-bottom-left {
		bottom: 30px;
		left: 30px;
	}

	.box .decorator.decorator-bottom-right {
		bottom: 30px;
		right: 30px;
	}
}

@media(min-width: 992px) {
	.box {
		padding-top: 140px;
		padding-bottom: 100px;
	}

	.box .decorator.decorator-top-left {
		top: 80px;
		left: 80px;
	}

	.box .decorator.decorator-top-right {
		top: 80px;
		right: 80px;
	}

	.box .decorator.decorator-bottom-left {
		bottom: 80px;
		left: 80px;
	}

	.box .decorator.decorator-bottom-right {
		bottom: 80px;
		right: 80px;
	}
}

.graph {
	position: relative;
	max-width: 1100px;
	min-height: 1100px;
	margin: 30px auto 0 auto;
}

.graph .bubble .lines .line {
	width: 4px;
	height: 0;
	background-repeat: repeat-y;
	position: absolute;
	bottom: 50%;
	left: 50%;
	margin-left: -2px;
	transform-origin: 2px 100%;
	transition: height 800ms;
}

.graph .bubble.opened .lines .line, .graph.large .bubble.hover .lines .line {
	height: 135px;
}

.graph .lines .line.angle-0 { transform: rotate(0deg); }
.graph .lines .line.angle-45 { transform: rotate(48deg); }
.graph .lines .line.angle-90 { transform: rotate(90deg); }
.graph .lines .line.angle-135 { transform: rotate(132deg); }
.graph .lines .line.angle-160 { transform: rotate(167deg); }
.graph .lines .line.angle-180 { transform: rotate(180deg); }
.graph .lines .line.angle-200 { transform: rotate(193deg); }
.graph .lines .line.angle-225 { transform: rotate(228deg); }
.graph .lines .line.angle-270 { transform: rotate(270deg); }
.graph .lines .line.angle-315 { transform: rotate(312deg); }

.graph .bubble.bubble-main .lines .main-line-start-point {
	width: 1px;
	height: 1px;
	position: absolute;
}

.graph .bubble.bubble-main .lines .main-line {
	width: 0;
	height: 4px;
	transform-origin: 2px 100%;
	background-image: url('../img/line-blue.png');
	background-repeat: repeat-x;
	position: absolute;
	transition: width 800ms, opacity 800ms;
	opacity: 1;
}

.graph .bubble.bubble-main .lines .main-line.inactive {
	width: 0 !important;
	opacity: 0;
}

.graph .bubble.bubble-main .lines .main-line .point {
	position: absolute;
	width: 10px;
	height: 10px;
	background: #2468ba;
	border-radius: 50%;
	right: 0;
	top: -3px;
}

.graph .bubble.bubble-main .lines .main-line-start-point.main-line-start-point-treatments,
.graph .bubble.bubble-main .lines .main-line.main-line-treatments {
	bottom: 70%;
	left: 10%;
}

.graph .bubble.bubble-main .lines .main-line-start-point.main-line-start-point-causes,
.graph .bubble.bubble-main .lines .main-line.main-line-causes {
	bottom: 98%;
	left: 57%;
}

.graph .bubble.bubble-main .lines .main-line-start-point.main-line-start-point-evolution,
.graph .bubble.bubble-main .lines .main-line.main-line-evolution {
	bottom: 15%;
	left: 25%;
}

.graph .bubble.bubble-main .lines .main-line-start-point.main-line-start-point-disease,
.graph .bubble.bubble-main .lines .main-line.main-line-disease {
	bottom: 35%;
	left: 90%;
}

.graph .bubble .main-line-point {
	position: absolute;
	width: 1px;
	height: 1px;
	background: none;
}

.graph .bubble {
	border-radius: 50%;
	position: absolute;
	color: white;
	transition: all 800ms;
	opacity: 0;
}

.graph .bubble.active {
	opacity: 1;
}

.graph .bubble .border-dotted {
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 1px dotted black;
	border-radius: 50%;
	z-index: 0;
}

.graph .bubble .content {
	display: flex;
	align-items: center;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	cursor: pointer;
}

.graph .bubble .content .title {
	margin: auto;
}

.graph .bubble .content .dots {
	position: absolute;
	width: 100%;
	height: 30px;
	line-height: 15px;
	bottom: 20px;
	font-size: 0.95em;
	text-align: center;
}

.graph .bubble.bubble-main {
	width: 370px;
	height: 370px;
	margin-top: -185px;
	margin-left: -185px;
	background: #2468ba;
	top: 45%;
	left: 50%;
	z-index: 5;
}

.graph .bubble.bubble-main .circle {
	width: 100%;
	height: 100%;
	position: absolute;
	border: 2px solid #00579e;
	border-radius: 50%;
	margin-left: -6px;
	margin-top: 4px;
}

.graph .bubble.bubble-main .titles {
	margin: auto;
	opacity: 1;
	transition: opacity 800ms;
}

.graph .bubble.bubble-main .btn-back {
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-family: Comfortaa, sans-serif;
	font-size: 1.3em;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -15px;
	display: block;
	background: none;
	border: none;
	opacity: 0;
	transition: opacity 800ms;
	outline: none;
}

.graph .bubble.bubble-secondary {
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-left: -100px;
}

.graph .bubble .separator:after {
	margin-bottom: 0;
}

.graph .bubble h2 {
	font-size: 1.6em;
	text-transform: uppercase;
	max-width: 100%;
}

.graph .bubble h2.first {
	margin-bottom: 50px;
}

.graph .bubble h3 {
	font-size: 1.3em;
	font-weight: bold;
}

.graph .bubble .link {
	text-indent: -9999px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: none;
	border: none;
}

.graph .bubble .items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.graph .bubble .items .item {
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-left: -5px;
	position: absolute;
	text-align: left;
	font-size: 0.9em;
	top: 50%;
	left: 50%;
	transition: top 800ms, left 800ms;
	opacity: 0.3;
}

.graph .bubble.opened .items .item.link {
	opacity: 1;
}

.graph .bubble .items .item:before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: black;
	display: block;
}

.graph .bubble .items .item .text {
	line-height: 1.1;
	white-space: nowrap;
	position: absolute;
	opacity: 0;
	transition: opacity 300ms;
	background: none;
	border: none;
	text-align: inherit;
}

.graph .bubble.opened .items .item .text, .graph.large .bubble.hover .items .item .text {
	opacity: 1;
}

.graph .bubble .items .item a {
	color: inherit;
}

.graph .bubble .items .item.angle-200,
.graph .bubble .items .item.angle-225,
.graph .bubble .items .item.angle-270,
.graph .bubble .items .item.angle-315 {
	text-align: right;
}

.graph .bubble.opened .items .item.angle-0, .graph.large .bubble.hover .items .item.angle-0 { top: -20%; left: 50%; }
.graph .bubble .items .item.angle-0 .text { bottom: 15px; }

.graph .bubble.opened .items .item.angle-45, .graph.large .bubble.hover .items .item.angle-45 { top: 5%; left: 100%; }
.graph .bubble .items .item.angle-45 .text { top: -30px; left: 15px; }

.graph .bubble.opened .items .item.angle-90, .graph.large .bubble.hover .items .item.angle-90 { top: 50%; left: 120%; }
.graph .bubble .items .item.angle-90 .text { top: -20px; left: 15px; }

.graph .bubble.opened .items .item.angle-135, .graph.large .bubble.hover .items .item.angle-135 { top: 95%; left: 100%; }
.graph .bubble .items .item.angle-135 .text { top: 15px; left: 0; }

.graph .bubble.opened .items .item.angle-160, .graph.large .bubble.hover .items .item.angle-160 { top: 115%; left: 65%; }
.graph .bubble .items .item.angle-160 .text { top: 15px; }

.graph .bubble.opened .items .item.angle-180, .graph.large .bubble.hover .items .item.angle-180 { top: 120%; left: 50%; }
.graph .bubble .items .item.angle-180 .text { top: 15px; }

.graph .bubble.opened .items .item.angle-200, .graph.large .bubble.hover .items .item.angle-200 { top: 115%; left: 35%; }
.graph .bubble .items .item.angle-200 .text { top: 15px; right: 0; }

.graph .bubble.opened .items .item.angle-225, .graph.large .bubble.hover .items .item.angle-225 { top: 95%; left: 0; }
.graph .bubble .items .item.angle-225 .text { top: 15px; right: 0; }

.graph .bubble.opened .items .item.angle-270, .graph.large .bubble.hover .items .item.angle-270 { top: 50%; left: -20%; }
.graph .bubble .items .item.angle-270 .text { top: -20px; right: 15px; }

.graph .bubble.opened .items .item.angle-315, .graph.large .bubble.hover .items .item.angle-315 { top: 5%; left: 0; }
.graph .bubble .items .item.angle-315 .text { top: -30px; right: 15px; }

.graph .bubble.bubble-treatments {
	top: 20%;
	left: 25%;
}

.graph .bubble.bubble-treatments .content { background: #e14f5f; }
.graph .bubble.bubble-treatments .items .item:before { background-color: #e14f5f; }
.graph .bubble.bubble-treatments .separator:after { border-color: #e14f5f; }
.graph .bubble.bubble-treatments .items { color: #e14f5f; }
.graph .bubble.bubble-treatments .border-dotted { border-color: #e14f5f; }
.graph .bubble.bubble-treatments .lines .line { background-image: url('../img/line-orange.png'); }
.graph .bubble.bubble-treatments .main-line-point { top: 110%; left: 65%; }

.graph .bubble.bubble-causes {
	top: 18%;
	left: 80%;
}

.graph .bubble.bubble-causes .content { background: #2fb4b2; }
.graph .bubble.bubble-causes .items .item:before { background-color: #2fb4b2; }
.graph .bubble.bubble-causes .separator:after { border-color: #2fb4b2; }
.graph .bubble.bubble-causes .items { color: #2fb4b2; }
.graph .bubble.bubble-causes .border-dotted { border-color: #2fb4b2; }
.graph .bubble.bubble-causes .lines .line { background-image: url('../img/line-teal.png'); }
.graph .bubble.bubble-causes .main-line-point { top: 65%; left: -5%; }

.graph .bubble.bubble-evolution {
	top: 75%;
	left: 25%;
}

.graph .bubble.bubble-evolution .content { background: #00907c; }
.graph .bubble.bubble-evolution .items .item:before { background-color: #00907c; }
.graph .bubble.bubble-evolution .separator:after { border-color: #00907c; }
.graph .bubble.bubble-evolution .items { color: #00907c; }
.graph .bubble.bubble-evolution .border-dotted { border-color: #00907c; }
.graph .bubble.bubble-evolution .lines .line { background-image: url('../img/line-green.png'); }
.graph .bubble.bubble-evolution .main-line-point { top: 10%; left: 90%; }

.graph .bubble.bubble-disease {
	top: 78%;
	left: 80%;
}

.graph .bubble.bubble-disease .content { background: #d91d50; }
.graph .bubble.bubble-disease .items .item:before { background-color: #d91d50; }
.graph .bubble.bubble-disease .separator:after { border-color: #d91d50; }
.graph .bubble.bubble-disease .items { color: #d91d50; }
.graph .bubble.bubble-disease .border-dotted { border-color: #d91d50; }
.graph .bubble.bubble-disease .lines .line { background-image: url('../img/line-red.png'); }
.graph .bubble.bubble-disease .main-line-point { top: -3%; left: 25%; }

@media(max-width: 992px) {
	.box .graph-title {
		font-size: 1.2em;
	}

	.graph {
		min-height: 700px;
	}

	.graph .bubble.bubble-main {
		width: 250px;
		height: 250px;
		margin-top: -125px;
		margin-left: -125px;
		top: 45%;
	}

	.graph .bubble.bubble-main h2 {
		font-size: 1.2em;
	}

	.graph .bubble.bubble-secondary {
		width: 100px;
		height: 100px;
		margin-top: -50px;
		margin-left: -50px;
	}

	.graph .bubble.bubble-secondary h3 {
		font-size: 0.8em;
	}

	.graph .bubble .content .dots {
		display: none;
	}

	.graph .bubble.bubble-treatments {
		top: 12%;
		left: 25%;
	}

	.graph .bubble.bubble-causes {
		top: 10%;
		left: 80%;
	}

	.graph.presenting .bubble.bubble-treatments.opened,
	.graph.presenting .bubble.bubble-causes.opened {
		top: 20%;
		left: 50%;
	}

	.graph .bubble.bubble-evolution {
		top: 75%;
		left: 25%;
	}

	.graph .bubble.bubble-disease {
		top: 78%;
		left: 80%;
	}

	.graph.presenting .bubble.bubble-evolution.opened,
	.graph.presenting .bubble.bubble-disease.opened {
		top: 60%;
		left: 50%;
	}

	.graph.presenting .bubble-main {
		width: 150px;
		height: 150px;
		margin-top: -75px;
		margin-left: -75px;
	}

	.graph.presenting .bubble-main .titles {
		opacity: 0;
	}

	.graph.presenting .bubble-main .btn-back {
		opacity: 1;
	}

	.graph.presenting .bubble {
		left: 50%;
	}

	.graph.presenting.presenting-top .bubble-main,
	.graph.presenting.presenting-top .bubble {
		top: 55%;
	}

	.graph.presenting.presenting-bottom .bubble-main,
	.graph.presenting.presenting-bottom .bubble {
		top: 25%;
	}

	.graph .bubble.opened .lines .line {
		height: 70px;
	}

	.graph .bubble .items .item {
		font-size: 0.75em;
	}

	.graph .bubble .items .item .text {
		width: 80px;
		white-space: normal;
	}

	.graph .bubble.opened .items .item.angle-180 { top: 140%; }
	.graph .bubble.opened .lines .line.angle-180 { height: 85px; }

}