/* Kleuren:
	Geel: FFA600
	Groen: 1CB728
	Blauw (licht): 00a9e0 rgba(0,169,224,0.5)
	Blauw (donker): 001f41 rgba(0,31,65,0.5)
	
	Magenta: ea008a
	Cyaan: 00b0ec
	Paars: 99278c
	Rood: eb0f49
	Oranje: f69233
	Zwart: 231f20
	Grijs: 959ca1
*/
.dl-horizontal dt {
	white-space: normal;
	text-overflow: inherit;
}
#pages .pageContent {
	background-color: #c0e3f6;
}
.text-small {font-size:80%;}
.indexListNavs .indexListNav.active {
	color:#00a9e0;
}

/* kleuren */
h1, h2, h3 {color:#427690;}
.text-wit h1,.text-wit h2,.text-wit h3 {color:#fff;} 
.text-zwart h1,.text-zwart h2,.text-zwart h3 {color:#000;} 
.text-large {font-size: 26pt;}

.text-white {color:#fff;}
.text-geel {color:#ffc839;}
.text-groen {color:#c2cc39;}
.text-blauw {color:#427690;}
.text-magenta {color:#ea008a;}
.text-cyaan {color:#00b0ec;}
.text-paars {color:#99278c;}
.text-rood {color:#c62b15;}
.text-oranje {color:#f69233;}
.text-zwart {color:#231f20 !important;}
.text-grijs {color:#959ca1;}
.text-wit {color:#fff;}


.bg-geel {background-color:#ffc839;}
.bg-groen {background-color:#bfcf0c;}
.bg-blauw {background-color:#00a9e0;}
.bg-donkerblauw {background-color:#001f41;}
.bg-magenta {background-color:#ea008a;}
.bg-cyaan {background-color:#00b0ec;}
.bg-paars {background-color:#99278c;}
.bg-rood {background-color:#c62b15;}
.bg-oranje {background-color:#f68827;}
.bg-zwart {background-color:#231f20;}
.bg-grijs {background-color:#959ca1;}
.bg-wit{background-color:#fff;}
.bg-lichtoranje {background-color: #ffdcbd;}
.bg-lichtgroen {background-color: #e7ebb2;}
.bg-lichtblauw2 {background-color: #c0e3f6;}
.bg-lichtgeel {background-color: #ffedc7;}
.bg-lichtrood {background-color: #f1c0ac;}

.bg-geel-t {background-color:rgba(255, 196, 36,0.8);}
.bg-groen-t {background-color:rgba(123, 193, 66, 0.8);}
.bg-blauw-t {background-color:rgba(0,169,224,0.8)}
.bg-magenta-t {background-color:rgba(234, 0, 138, 0.8);}
.bg-cyaan-t {background-color:rgba(0,176,236,0.8);}
.bg-paars-t {background-color:rgba(153,39,139,0.8);}
.bg-rood-t {background-color:rgba(235,15,73,0.8);}
.bg-oranje-t {background-color:rgba(246,146,51,0.8);}
.bg-zwart-t {background-color:rgba(35,31,32,0.8);}
.bg-grijs-t {background-color:rgba(149,156,161,0.8);}
.bg-wit-t {background-color:rgba(255,255,255,0.8);}
.bg-donkerblauw-t {background-color:rgba(0,31,65,0.8);}


.bg-geel-l {background-color:rgba(255, 200, 57,0.4);}
.bg-groen-l {background-color:rgba(123, 193, 66, 0.4);}
.bg-blauw-l {background-color:rgba(0,169,224,0.5);}
.bg-magenta-l {background-color:rgba(234, 0, 138, 0.2);}
.bg-cyaan-l {background-color:rgba(0,176,236,0.2);}
.bg-paars-l {background-color:rgba(153,39,139,0.2);}
.bg-rood-l {background-color:rgba(235,15,73,0.2);}
.bg-oranje-l {background-color:rgba(246,146,51,0.2);}
.bg-zwart-l {background-color:rgba(35,31,32,0.2);}
.bg-grijs-l {background-color:rgba(149,156,161,0.2);}
.bg-wit-l {background-color:rgba(255,255,255,0.2);}
.bg-lichtblauw {background-color:#c1d0de;}
.bg-blauw2 {background-color:#00a9e0;}
.bg-donkerblauw-l {background-color:rgba(0,31,65,0.5);}




/* driehoek */
.driehoekWrap {
	position: relative;
	display:inline-block;
	padding-right:90px;
	margin:20px;
}



.driehoek {
	height:150px;
	width:0px;
	background: #1CB728;
	position: relative;
	z-index: 2;
}
.driehoek:after, .driehoek:before {
	-webkit-transform:rotate(360deg);
	border-style: inset;
	position: absolute;
	top:0;
	right:-90px;
	content:"";
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 150px 0 0px 90px;
	border-color: transparent transparent transparent #007bff;
}
.driehoek:before {
	right:auto;
	left:-90px;
	
	border-width: 150px 90px 0px 0;
	border-color: transparent #007bff transparent transparent;
	
}
.driehoek.nr1 {background: #1CB728;margin-left:270px;}
.driehoek.nr1:before {border-color: transparent #1CB728 transparent transparent;}
.driehoek.nr1:after {border-color: transparent transparent transparent #1CB728;}

.driehoek.nr2 {background: #f69233;width:180px;margin-left:180px;}
.driehoek.nr2:before {border-color: transparent #f69233 transparent transparent;}
.driehoek.nr2:after {border-color: transparent transparent transparent #f69233;}

.driehoek.nr3 {background: #0057AD;width:360px;margin-left:90px;}
.driehoek.nr3:before {border-color: transparent #0057AD transparent transparent;}
.driehoek.nr3:after {border-color: transparent transparent transparent #0057AD;}

.driehoek.nr3:hover {background: #01488E;}
.driehoek.nr3:hover:before {border-color: transparent #01488E transparent transparent;}
.driehoek.nr3:hover:after {border-color: transparent transparent transparent #01488E;}

.driehoek.nr2:hover {background: #DA7516;}
.driehoek.nr2:hover:before {border-color: transparent #DA7516 transparent transparent;}
.driehoek.nr2:hover:after {border-color: transparent transparent transparent #DA7516;}

.driehoek.nr1:hover {background: #0DA218;}
.driehoek.nr1:hover:before {border-color: transparent #0DA218 transparent transparent;}
.driehoek.nr1:hover:after {border-color: transparent transparent transparent #0DA218;}





.driehoek .title {
	position: absolute;
	width:300px;
	text-align: center;
	top:50%;
	left:50%;
	line-height: 20px;
	margin-top:-10px;
	margin-left:-150px;
	z-index: 2;
	color:#fff;
}

.driehoek .doorstroom {
	position: absolute;
	top:-18px;
	text-align: center;
	width: 100%;
	font-size: 9pt;
	color:#fff;
}
.doorstroom span {
	position: relative;
}
.doorstroom .doorstroom-arrow {
	position: absolute;
	left:50%;
	top:0;
	line-height: 36px;
	font-size: 20pt;
	text-align: center;
	width:20px;
	margin-left:-60px;
	color:#fff;
}
.doorstroom .doorstroom-arrow.arrow-rechts {
	margin-left: 50px;
}

.balk {
	position: absolute;
	z-index: 0;
	left:20px;
	top:0;
	bottom:0;
	width:20px;
	background: #0057AD;
}
.balk.balk-rechts {
	left:auto;
	right:20px;
	background: #1CB728;
}

.balk-arrow {
	position: absolute;
	z-index: 2;
	left:20px;
	width:20px;
	text-align: center;
	bottom:100px;
	font-size: 20pt;
	color:#fff;
}
.balk-arrow.arrow-lt {
	top:100px;
	bottom:auto;
}
.balk-arrow.arrow-rt {
	top:100px;
	bottom:auto;
	left:auto;
	right:20px;
}
.balk-arrow.arrow-rb {
	bottom:100px;
	top:auto;
	left:auto;
	right:20px;
}
.balk-arrow.arrow-left, .balk-arrow.arrow-right {
	top:18px;
	left:190px;
	height: 20px;
	line-height: 20px;
}
.balk-arrow.arrow-right {
	left:auto;
	right:190px;
	
}


.balk-sidetext {
	position: absolute;
	line-height: 50px;
	top:70px;
	left:60px;
	color:#0057AD;
	font-size: 9pt;
	
}


.blok {
	position: absolute;
	width:160px;
	top:0;
	left:0;
	padding:10px;
	font-size: 9pt;
	background: #0057AD;
	color:#fff;
	z-index: 1;
	text-align:center; 
}
.blok.blok-rechts {
	left:auto;
	right:0;
	background: #1CB728;
}
.blok:after {
	width:271px;
	height:20px;
	position: absolute;
	top:20px;
	left:0;
	background:#0057AD;
	z-index: -1;
	content:"";
}
.blok.blok-rechts:after {
	left:auto;
	right:0;
	background:#1CB728;
}

.foot {
	position: absolute;
	bottom:-50px;
	text-align: center;
	width:100px;
	font-size: 9pt;
}
.foot .fa {
	font-size: 20pt;
}
.foot.foot-center {
	left:50%;
	margin-left:-50px;
}
.foot.foot-right {
	right:0;
}


/* driehoek animated */
@keyframes stuiter {
	0%   {padding-bottom: 0px;}
	10%  {padding-bottom: 10px;}
	20%  {padding-bottom: 0px;padding-top:6px;}
	25%  {padding-bottom: 2px;padding-top:0;}
	30%  {padding-bottom: 0px;}
	100% {padding-bottom: 0px;}
}

.animated .doorstroom-arrow {
	animation: stuiter 4s infinite;
}

.driehoekWrap .balk {
	opacity:0;
}
.driehoekWrap.animated .balk {
	-webkit-transition: all 1.5s; /* For Safari 3.1 to 6.0 */
    transition: all 1.5s;
    opacity:1;
    -webkit-transition-delay: 1.6s; /* Safari */
    transition-delay: 1.6s;
}
.driehoekWrap .blok {
	opacity: 0;
}
.driehoekWrap.animated .blok {
	-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
    opacity:1;
    -webkit-transition-delay: 1.4s; /* Safari */
    transition-delay: 1.4s;
}
.driehoekWrap .balk-sidetext {
	opacity:0;
}
.driehoekWrap.animated .balk-sidetext {
	-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
    opacity:1;
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 2s;
}


.driehoek.nr3, .driehoek.nr2, .driehoek.nr1 {
	opacity: 0;
}
.driehoekWrap.animated .driehoek {
	-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
    transition: opacity 1s;
}
.driehoekWrap.animated .driehoek.nr3 {
	opacity: 1;
	
	
    -webkit-transition-delay: 0.4s; /* Safari */
    transition-delay: 0.4s;
}
.driehoekWrap.animated .driehoek.nr2 {
	opacity: 1;
	
    -webkit-transition-delay: 0.8s; /* Safari */
    transition-delay: 0.8s;
}
.driehoekWrap.animated .driehoek.nr1 {
	opacity: 1;
	
    -webkit-transition-delay: 1.2s; /* Safari */
    transition-delay: 1.2s;
}

.driehoekWrap .foot {
	opacity:0;
}
.driehoekWrap.animated .foot {
	-webkit-transition: all 1s; /* For Safari 3.1 to 6.0 */
    transition: all 1s;
    opacity:1;
    -webkit-transition-delay: 1s; /* Safari */
    transition-delay: 1s;
}

/* ------- */


/* quote */
blockquote p {
	
	font-size: 25pt;
	line-height: 1.3;
	font-weight: 300;
}
.dl-horizontal dt {
	text-align: left;
}

/* btn */
.btn, .btn.text-zwart {
	border:1px solid rgba(0,0,0,0.9);
	background-color:rgba(255,255,255, 0.1);
	color:#000;
}
.text-wit .btn {
	border:1px solid rgba(0255,255,255,0.9);
	background-color:rgba(0,0,0, 0.1);
	color:#fff;
}
.btn.text-zwart {
	border:1px solid rgba(0,0,0,0.9);
	background-color:rgba(255,255,255, 0.1);
	color:#000;
}
.btn-close {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	width:50px;
	line-height: 50px;
	color:#eb0f49;
	border:1px solid #eb0f49;
	display: inline-block;
	font-size: 20pt;
	text-align: center;
	cursor: pointer;
	float: right;
	margin-bottom: 20px;
}


.indexBottom {
	position: absolute;
	bottom:10px;
	left:10px;
	right:10px;
}
.indexBlockWrap {
	width:25%;
	float: left;
}
.indexBlock {
	margin:10px;
	padding:20px;
	
	color:#fff;
	min-height:250px;
	cursor: pointer;
}
@media only screen and (max-width: 900px) {
	.indexBlockWrap {
		width:50%;
		float: left;
	}
	.indexBlock {
		min-height: 10px;
	}
	.indexBlock .desc {
		display: none;
	}
}
@media only screen and (max-width: 680px) {
	#cover .teaser .teaserData {
		position: static;
		padding:10px;
	}
	
	
	.indexBottom {
		position: static;
	}
	
	.indexBlockWrap {
		width:100%;
		float: none;
	}
	
	
	
	.prioritering.active .prioriteringInfo {
		min-width: 320px !important;
		max-width: 320px;
		box-sizing: border-box;
		max-height: 300px;
		overflow: auto;
	}
	
	
	
	/* quotes */
	blockquote p {
		font-size: 16pt;
	}
	
	
	
	
	
	.bbox-cell-content {
		min-height: 100%;
		width: 100%;
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
		
		
		
	
	/* driehoek */
	.driehoekWrap {
		padding-right:45px;
		margin:10px;
	}
	
	.driehoek {
		height:75px;
	}
	.driehoek:after, .driehoek:before {
		right:-45px;
		border-width: 75px 0 0px 45px;
	}
	.driehoek:before {
		left:-45px;
		
		border-width: 75px 45px 0px 0;
		
	}
	.driehoek.nr1 {margin-left:135px;}
	.driehoek.nr2 {width:90px;margin-left:90px;}
	
	.driehoek.nr3 {width:180px;margin-left:45px;}
	
	
	
	.driehoek .title {
		width:150px;
		line-height: 10px;
		margin-top:-5px;
		margin-left:-75px;
	}
	
	.driehoek .doorstroom {
		top:-9px;
	}
	.doorstroom .doorstroom-arrow {
		line-height: 18px;
		font-size: 10pt;
		width:10px;
		margin-left:-30px;
	}
	.doorstroom .doorstroom-arrow.arrow-rechts {
		margin-left: 25px;
	}
	
	.balk {
		left:10px;
		width:10px;
	}
	.balk.balk-rechts {
		right:10px;
	}
	
	.balk-arrow {
		left:10px;
		width:10px;
		bottom:50px;
		font-size: 10pt;
	}
	.balk-arrow.arrow-lt {
		top:50px;
	}
	.balk-arrow.arrow-rt {
		top:50px;
		right:10px;
	}
	.balk-arrow.arrow-rb {
		bottom:50px;
		right:10px;
	}
	.balk-arrow.arrow-left, .balk-arrow.arrow-right {
		top:9px;
		left:95px;
		height: 10px;
		line-height: 10px;
	}
	.balk-arrow.arrow-right {
		right:95px;
		
	}
	
	
	.balk-sidetext {
		line-height: 25px;
		top:35px;
		left:30px;
		font-size: 9pt;
	}
	
	
	.blok {
		width:80px;
		padding:5px;
		font-size: 9pt;
	}
	
	.blok:after {
		width:135px;
		height:10px;
		top:10px;
	}
	
	.foot {
		bottom:-25px;
		width:50px;
	}
	.foot .fa {
		font-size: 15pt;
	}
	.foot.foot-center {
		margin-left:-25px;
	}

	
	
	
	
	
	
	
}





/* doc */
body, html {
    color: #000;
    font-family: "PT Sans",Arial,Helvetica,"Helvetica Neue",sans-serif;
    line-height: 1.3;
}

/* standaard font size */
body, html, .btn {
	font-size: 16px;
}

h1 .fa {
	/* font-size: 50pt; */
}


h2 {
	padding: 0 0 20px 0;
	margin: 0;
	font-family: "PT Sans",Arial,Helvetica,"Helvetica Neue",sans-serif;
	line-height: 1.3;
	font-size: 34pt;
	font-weight: 700;
}

h3 {
	padding: 10px 0 10px 0;
	margin: 0;
	font-size: 25pt;
	line-height: 1.3;
	font-weight: 700;
}
h4 {
	padding: 0px 0 10px 0;
	margin: 0;
	font-size: 16pt;
	line-height: 1.2;
	font-weight: 700;
}

/* BOOTSTRAP OVERWRITE */
.btn-info {
	background-color: #0057AD;
	border-color:#fff;
}
.btn-success {
	background-color: #1CB728;
	border-color:#fff;
}









.color-square {
	width:11px;
	height: 11px;
	display: inline-block;
	margin-right: 8px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

.fa.arial {font-family: arial;}






/* PAGES */

/* page 1 */
#pages .page.count1 .pageContent .relative .youtubeVideo, #pages .page.count1 .pageContent .relative .videoImg {
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height: 100%;
	padding-top: 0px;
	padding-bottom:0px;
	
}
ul.blocked {margin:0;padding:0;}
ul.blocked li {
	list-style: none;
	padding:3px 0px;
	margin:0;
	border-bottom:1px solid #eaeaea;
}
ul.blocked li:hover {
	background:#eaeaea;
}

/* page 2 */
.min-height-100 {
	min-height: 130px;
	margin-bottom:15px;
}

.iconRound {background:#f68827;color:#fff;}


/* page 5 */

.clickNote {
	position: absolute;
	top:0;
	right: 0;
	z-index: 10;
}
.clickNoteInner {

	padding: 10px 20px;
	background: #5a9044;
	color:#fff;
}

#pages .page.count5 .pageContent {
	background: #fff;
}

.figWrap {
	height: 100%;
	background: #fff;
}

.fig {
	position: relative;
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
	padding-top: 70%;
	
}
.prioritering {
	position: absolute;
	bottom:0;
	right:0;
	background: #00a9e0;
	line-height: 40px;
	padding:0 20px;
	color:#fff;
	cursor: pointer;
	z-index: 5;
	
}
.prioritering .prioriteringInfo {
	display: none;
	line-height: 1.3;
}
.prioritering.active .prioriteringInfo {
	position: absolute;
	bottom:40px;
	right:0;
	background: #00a9e0;
	padding:20px;
	color:#fff;
	display: block;
	min-width: 550px;
}
.prioritering.active .prioriteringInfo table td {
	border-bottom:1px solid rgba(255,255,255,0.3);
}


.figSidebar {
	position: fixed;
	left:0;
	top:0;
	
	max-height: 100%;
	width:350px;
	z-index: 5;
	
	background: #00a9e0;
	color:#fff;
	display: none;
	
		-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
    transition: all 0.3s;
}



#pages .page.count5.active .pageContent .figSidebar {
	display: block;
}


.figSidebar.active {

}


.sidebarScrollIndicator {
	position: absolute;
	width:100%;
	bottom:0;
	left:0;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%);
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#c7000000',GradientType=0 );

	
	text-align: center;
	line-height: 60px;
	padding-top:30px;
	color:#fff;
}


.figSidebar .sidebarHeader {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding:0 40px 0 20px;
    line-height: 40px;
    background: rgba(255,255,255,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    position: absolute;
    color:#fff;
    width:100%;
    z-index: 1;
    font-weight: bold;
    font-size: 14pt;
}

.figSidebar .sidebarHeader .closeSide, .figSidebar .sidebarHeader .open {
	border-left:1px solid rgba(255,255,255,0.5);
	line-height: 40px;
	width:40px;
	text-align: center;
	position: absolute;
	top:0;
	right: 0;
	color: #fff;
	
	display: none;
	cursor: pointer;
}
.figSidebar.active .sidebarHeader .closeSide  {
	display: block;
}
.figSidebar .sidebarHeader .open .fa-arrow-up {
	display: none;
}
.figSidebar.open .sidebarHeader .open .fa-arrow-up {
	display: inline-block;
}
.figSidebar.open .sidebarHeader .open .fa-arrow-down {
	display: none;
}


.figSidebar .sidebarContent {
	/* padding: 40px 10px 130px; */
	/* max-height: 100%; */
	box-sizing: border-box;
	overflow: auto;
	
	
	position: absolute;
	top:40px;
	bottom:0px;
	left:0;
	width: 100%;
	
}





.figSidebar .sidebarContentInner {
	padding: 40px 10px 60px;
}





.figSidebar .info {
	display: none;
}
.figSidebar .info.active {
	display: block;
}


/*
.fig {
	width:900px;
	
	position: relative;
	left:50%;
	margin-left:-450px;
	
}
.figInner {
	width:100%;
	padding-top:80%;
	background: rgba(255,255,255,0.5);
	position: relative;
}
*/


@media only screen and (max-width: 680px) {
	body, html, .btn {
		font-size: 14px;
	}
	h2 {
		font-size: 25pt;
	}
	h4 {
		font-weight: 400;
		font-size: 11pt;
	}
	
	
	
	.padding.bg-groen {
		padding:10px;
	} 
	.min-height-100 {
		min-height: 70px;
	}
	
	
	
}


.bullet {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border:2px solid #000;
	
	position: absolute;
	top:10%;
	left:10%;
	
	width: 40px;
	height: 40px;
	
	
	margin-left:-20px;
	margin-top: -20px;
	
	box-sizing: border-box;
	
	cursor: pointer;
}
.bullet:before {
	width:24px;
	height: 24px;
	margin: 6px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	background: #000;
	content: "";
	position: absolute;
	-webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
    transition: all 0.3s;
}
.bulletInner {
	position: relative;
	width:100%;
	height: 100%;
}


.bullet.size-s {
	width:26px;
	height:26px;
	border:2px solid #000;
	
	margin-left:-13px;
	margin-top: -13px;
}
.bullet.size-s:before {
	width:16px;
	height: 16px;
	margin: 3px;
}
.bullet.size-l {
	width:50px;
	height:50px;
	border:5px solid #000;
	
	margin-left:-25px;
	margin-top: -25px;
}
.bullet.size-l:before {
	width:36px;
	height: 36px;
	margin: 2px;
}

.bullet .label {
	position: absolute;
	left:40px;
	top:50%;
	line-height: 26px;
	margin-top: -13px;
	color:#000;
}

.bullet .img {
	
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	
	width:400%;
	height:400%;
	
	background: #ccc center center no-repeat;
	background-size: cover;
	
	position: absolute;
	
	top:-400%;
	left:-400%;
	
}
.bullet .txt {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	
	width:400%;
	height:400%;
	display: table;
	
	background: #ccc;
	
	position: absolute;
	z-index: 4;
	
	top:-200%;
	left:-400%;
	
	color:#fff;
	text-align: center;
	
	box-sizing: border-box;
	padding:15px;
	
	
	
}
.bullet .txt > span {
	display: table-cell;
  vertical-align: middle;
}

.bullet .img, .bullet .txt {
	opacity: 0;
	pointer-events: none;
}
.bullet.active .img, .bullet.active .txt {
	opacity: 1;
	pointer-events: auto;
	
	animation: bounce 1.3s ease;
}
@keyframes bounce {
	0%   {transform: scale(1);opacity: 0;}
	10%  {transform: scale(1.2);}
	26%  {transform: scale(0.9);}
	46%  {transform: scale(1.1);opacity: 1;}
	67%  {transform: scale(0.97);}
	100% {transform: scale(1);}
}




/* 1 */
.bullet.nr-1 .img {
	top:-400%;
	left:-200%;
}
.bullet.nr-1 .txt.nr-1 {
	left:-500%;
	background-color: #55b496;
}
.bullet.nr-1 .txt.nr-2 {
	top:100%;
	left:-300%;
	background-color: #7fc3ac;
}

/* 2 */
.bullet.nr-2 .label {
	left:20px;
	top:-10px;
}
.bullet.nr-2 .img {
	width:800%;
	height: 800%;
	
	top:-950%;
	left:-250%;
}
.bullet.nr-2 .txt.nr-1 {
	width:1000%;
	height: 1000%;
	
	top:-800%;
	left:350%;
	background-color: #4a6ba3;
}
.bullet.nr-2 .txt.nr-2 {
	width:600%;
	height: 600%;
	
	top:-800%;
	left:1200%;
	background-color: #618bbe;
}

/* 6 */
.bullet.nr-6 .label {
	left:auto;
	right:40px;
	top:0;
}
.bullet.nr-6 .img {
	top:-300%;
	left:-400%;
}
.bullet.nr-6 .txt.nr-1 {
	top:-200%;
	left:-700%;
	background-color: #ee7f34;
}
.bullet.nr-6 .txt.nr-2 {
	top:0%;
	left:-400%;
	background-color: #f39b66;
}

/* 8 */
.bullet.nr-8 .img {
	top:-200%;
	left:-400%;
}
.bullet.nr-8 .txt.nr-1 {
	top:-100%;
	left:-700%;
	background-color: #3f6f35;
}
.bullet.nr-8 .txt.nr-2 {
	top:100%;
	left:-400%;
	background-color: #609c58;
}
/* 9 */
.bullet.nr-9 .img {
	top:-100%;
	left:150%;
}
.bullet.nr-9 .txt.nr-1 {
	top:-150%;
	left:500%;
	background-color: #e74846;
}
.bullet.nr-9 .txt.nr-2 {
	width:200%;
	height:200%;
	
	top:150%;
	left:700%;
	background-color: #ec716b;
}
/* 10 */
.bullet.nr-10 .img {
	top:-100%;
	left:150%;
}
.bullet.nr-10 .txt.nr-1 {
	top:-150%;
	left:500%;
	background-color: #6fa92d;
}
.bullet.nr-10 .txt.nr-2 {
	width:300%;
	height:300%;
	
	top:150%;
	left:300%;
	background-color: #93c153;
}

/* 11 */
.bullet.nr-11 .img {
	top:-200%;
	left:-400%;
}
.bullet.nr-11 .txt.nr-1 {
	top:-150%;
	width:450%;
	height:450%;
	left:100%;
	background-color: #676767;
}
.bullet.nr-11 .txt.nr-2 {
	width:300%;
	height:300%;
	
	top:100%;
	left:-100%;
	background-color: #999998;
}
/* 12 */
.bullet.nr-12 .img {
	top:-100%;
	left:100%;
}
.bullet.nr-12 .txt.nr-1 {
	top:-300%;
	left:250%;
	background-color: #5a933b;
}
.bullet.nr-12 .txt.nr-2 {
	width:250%;
	height:250%;
	
	top:150%;
	left:300%;
	background-color: #81af43;
}

@media only screen and (max-width: 1190px) {
	.bullet.nr-2 .txt.nr-2 {
		top:100%;
		left:700%;
	}
	
	.bullet.nr-8 .txt.nr-1 {
	    top: -500%;
	    left: -300%;
    }
    .bullet.nr-8 .txt.nr-2 {
	    left:-300%;
    }
}



@media only screen and (max-width: 900px) {
	
	.bullet {
		width:26px;
		height:26px;
		border:2px solid #000;
		
		margin-left:-13px;
		margin-top: -13px;
	}
	.bullet:before {
		width:16px;
		height: 16px;
		margin: 3px;
	}
	
	
	
	.bullet.size-s {
		width:20px;
		height:20px;
		border:2px solid #000;
		
		margin-left:-10px;
		margin-top: -10px;
	}
	.bullet.size-s:before {
		width:12px;
		height: 12px;
		margin: 2px;
	}
	.bullet.size-l {
		width:40px;
		height:40px;
		border:4px solid #000;
		
		margin-left:-20px;
		margin-top: -20px;
	}
	.bullet.size-l:before {
		width:28px;
		height: 28px;
		margin: 2px;
	}

	
	.bullet .txt {
		padding:10px;
		font-size: 80%;
		line-height: 1.1;
	}
	
	.bullet .label {
    	left: 32px;
    }
	.bullet.nr-6 .label {
		right:21px;
	}
	
	
	
}
@media only screen and (max-width: 680px) {
	h3 {
		font-size: 16pt;
		line-height: 1;
	}
}
@media only screen and (max-width: 640px) {
	
	.bullet {
		width:20px;
		height:20px;
		border:2px solid #000;
		
		margin-left:-10px;
		margin-top: -10px;
	}
	.bullet:before {
		width:12px;
		height: 12px;
		margin: 2px;
	}
	
	
	
	.bullet.size-s {
		width:16px;
		height:16px;
		border:1px solid #000;
		
		margin-left:-8px;
		margin-top: -8px;
	}
	.bullet.size-s:before {
		width:12px;
		height: 12px;
		margin: 1px;
	}
	.bullet.size-l {
		width:34px;
		height:34px;
		border:3px solid #000;
		
		margin-left:-17px;
		margin-top: -17px;
	}
	.bullet.size-l:before {
		width:24px;
		height: 24px;
		margin: 2px;
	}

	
	.bullet .txt {
		padding:5px;
		font-size: 80%;
	}
	
	.bullet.nr-2 .txt.nr-1 {
	    left: 250%;
    }
	
	.bullet.nr-12 .txt.nr-1 {
    	left: 50%;
    	top:-400%;
	}
	.bullet.nr-12 .txt.nr-2 {
		left:100%;
	}
	
	.bullet.nr-9 .txt.nr-1 {
	    top: -400%;
	    left: 200%;
    }
	.bullet.nr-9 .txt.nr-2 {
    	left:400%;
    }
    
    .bullet.nr-11 .txt.nr-1 {
	    left: 0%;
    }
	.bullet.nr-11 .txt.nr-2 {
    	left:-240%;
    }
    
    
    
}



@media only screen and (min-width: 1100px) {
	.figSidebar {
		bottom:0px;
	}
}


@media only screen and (max-width: 1100px) {
	.figSidebar {
		bottom:80px;
	}
}


@media only screen and (min-width: 1024px) {
	.figHolder {
		margin-left:350px;
	}
	

}
@media only screen and (max-width: 1023px) {
	
	.figHolder {
		padding-top:10%;
		background-color: #addaef;
	}
	
	.figSidebar.active .sidebarHeader .closeSide  {
		display: none;
	}
	
	.figSidebar .sidebarHeader .open {
		display: block;
	}
	.figSidebar {
		height: 40px;
		max-height: 40px;
	}
	.figSidebar .sidebarContent {
		display: none;
	}
	
	
	.figSidebar.open .sidebarHeader .open {
		display: block;
	}
	.figSidebar.open .sidebarHeader .closeSide  {
		display: none;
	}
	.figSidebar.active.open .sidebarHeader .open {
		display: none;
	}
	.figSidebar.active.open .sidebarHeader .closeSide  {
		display: block;
	}
	
	
	
	
	
	
	.figSidebar.open {
		/*
height: 100%;
		max-height: 100%;
		min-height: 100%;
*/
		bottom:80px;
		height: auto;
		max-height: none;
	}
	
	
	
	
	.figSidebar.open .sidebarContent {
		display: block;
	}
	
	
}
@media only screen and (max-width: 680px) {
	.figHolder {
		padding-top:25%;
	}
	.figSidebar {
		width:100%;
	}
	.figSidebar.open {
		/*
height: 100%;
		max-height: 100%;
		min-height: 100%;
*/
		bottom:62px;
	}
}




.bullet:hover:before, .bullet.active:before {
	margin:0;
	width:100%;
	height: 100%;
}




.bullet.color-green {
	border-color:#416e36;
}
.bullet.color-green:before {
	background-color:#416e36;
}
.bullet.color-green-l {
	border-color:#5a9044;
}
.bullet.color-green-l:before {
	background-color:#5a9044;
}


.bullet.color-grey {
	border-color:#676767;
}
.bullet.color-grey:before {
	background-color:#676767;
}


.bullet.color-red {
	border-color:#e74844;
}
.bullet.color-red:before {
	background-color:#e74844;
}


.bullet.color-blue {
	border-color:#4a6ba5;
}
.bullet.color-blue:before {
	background-color:#4a6ba5;
}





/* DNA */
.dnaWrap {
	padding:100px 0 150px;
	margin: 0 auto;
}
.dna {
	position: relative;
}


.dnaCenter:before {
	content:"";
	width:80px;
	height: 80px;
	position: absolute;
	left:10px;
	bottom:5px;
	border-left:6px solid #001f41;
	border-bottom:6px solid #001f41;
	
	-ms-transform: rotate(-45deg); /* IE 9 */
    -ms-transform-origin: 0% 100%; /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 0% 100%; /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    transform-origin: 0% 100%;
}
.dnaCenter {
	width:20px;
	height: 20px;
	position: absolute;
	left:50%;
	top:50%;
	margin-top:-10px;
	margin-left:-10px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	box-sizing: border-box;
	background: #001f41;
}
.dnaCenter:after {
	content:"";
	width:6px;
	height: 80px;
	position: absolute;
	left:7px;
	top:10px;
	background: #001f41;
}
.dnaBol {
	width:100px;
	height: 100px;
	line-height: 90px;
	text-align: center;
	color:#fff;
	font-size: 12px;
	position: absolute;
	left:50%;
	margin-left:-105px;
	margin-top:-100px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	box-sizing: border-box;
	background: #00a9e0;
	border:5px solid #001f41;
}
.dnaBol.nr-2 {
	margin-left:5px;
}
.dnaBol.nr-3 {
	margin-left:-50px;
	margin-top:20px;
}