/* ---- reports colors ----- */

:root{
/* grenada */
 --red: #EC4747;
 --dark-red:#C5383E;
 --light-red:#ED7468;

 /* jamaica */
--violet: #723D92;
--light-violet: #d883df;
--dark-violet: #433D69;

/*trinidadandtobago*/
--yellow:#FACE41;
--light-yellow: #FBE083;
--dark-yellow: #E7B208;/*#f9cd3d;*/

/* guyana */
--blue:#348ab9;
--light-blue: #8FBfD9;
--dark-blue: #2874a0;/*#f9cd3d;*/

/* suriname */
--orange:#fb7813;
--light-orange: #FCAE79;
--dark-orange: #da6812;

--dark: #565C52;
--light-grey: #e8e4e1;
--map-grey:#AAADA8;

}
.grenada{
	background: var(--red);
	fill: var(--red);
}
.grenada-light{
	background: var(--light-red);
	fill:var(--light-red);
}
.grenada-dark{
	background: var(--dark-red);
	fill:var(--dark-red);
}
.jamaica{
	background: var(--violet);
	fill:var(--violet);
}
.jamaica-light{
	background: var(--light-violet);
	fill:var(--light-violet);
}
.jamaica-dark{
	background: var(--dark-violet);
	fill:var(--dark-violet);
}
.trinidadandtobago{
	background: var(--yellow);
	fill:var(--yellow);
}
.trinidadandtobago-light{
	background: var(--light-yellow);
	fill:var(--light-yellow);
}
.trinidadandtobago-dark{
	background: var(--dark-yellow);
	fill:var(--dark-yellow);
}
.guyana{
	background: var(--blue);
	fill:var(--blue);
}
.guyana-light{
	background: var(--light-blue);
	fill:var(--light-blue);
}
.guyana-dark{
	background: var(--dark-blue);
	fill:var(--dark-blue);
}
.suriname{
	background: var(--orange);
	fill:var(--orange);
}
.suriname-light{
	background: var(--light-orange);
	fill:var(--light-orange);
}
.suriname-dark{
	background: var(--dark-orange);
	fill:var(--dark-orange);
}
.grey{
	fill: #FFF;
	stroke: #dcdcdc;
	stroke-width: 0.5;
}
body{
	font-family: Merriweather;
	font-size:1rem;
	background-color: var(--light-grey);
	color: var(--dark);
	line-height: 1.56;
	/*margin-bottom: 190px;*/
}
h3 {
	padding-bottom: 30px;
}
/* general layout */
.jumbotron{
	margin:0;
	padding:20px 40px;
	background-color: var(--dark-yellow);
	border-radius: 0;
}
.header-logos{
	padding-bottom: 30px;
}
.intro{
	margin-top:20px;
	line-height: 1.7em;
	font-size: 1.1em;
}
.front p.help{
	font-style: italic;
	padding:10px;
	font-size: .9em;
}
.jumbotron h1{
	color: white;
}
.navbar{
	font-family: 'Montserrat', sans-serif;
}
.nav-link{
	cursor: pointer;
}
.navbar-dark .navbar-nav .nav-link {
    color: #c2b9b0;
}
.navbar-dark .navbar-nav .active>.nav-link {
	color: var(--dark-yellow);
}
.navbar-light .navbar-text {
	font-size:.8em;
	color: var(--dark);
	padding-top: 11px;
}
.navbar-light .navbar-text.npsv{
	padding-left:30px;
}
.bg-dark-1{
	background-color: var(--dark);
}
.container.front{
	padding-top: 40px;
}
.front h3{
	padding-top: 30px;
	text-align: center;
	color: #000;
}
.logo{
	height: 90px;
}
.logo-CAR{
	height: 79px;
	padding-top: 10px;
}
.logo-UNW{
	height:70px;
	padding-top: 10px;
}
/* footer about page */
.page-footer {
	height: 230px;
	background: #FFF;
	width: 100%;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.logo-container{
	height: 80px;      /* equals max image height */
  /*  width: 180px;*/
    white-space: nowrap;   
	text-align: center; 
	margin: 1em 0;
}
.logo-footer{
	margin: auto;
	vertical-align: middle;
	max-height:80px;
	max-width: 180px;
}
.idb{
	height:70px;
}
/* --- end footer about page --- */
.header-down-arrow {
	position: absolute;
	top: 30px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1200;
	pointer-events: none;
	display:none;
}
.arrow{
	margin:auto;
	width: 50px;
	height:80px;
	border-radius: 25px;
	background-color: var(--dark-yellow);
	-webkit-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
}
.header-down-arrow .arrow img {
	animation: updown 1s ease infinite;
	opacity: 0.8;
}

@keyframes updown {
0% {
	transform: translateY(0px);
}
100% {
	transform: translateY(25px);
	}
}

.rotateMessage {
	font-family: 'Montserrat', sans-serif;
	position: fixed;
	bottom: 150px;
	left: 30px;
	right: 30px;
	font-size: 2em;
	text-align: center;
	z-index: 1500;
	display:none;
	background: var(--yellow);
	padding: 50px 15px;
	opacity:.95;
	border-radius: 10px;
	-webkit-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
}
.rotateMessage img{
	height:150px;
}
/* --- about --- */
.about{
	margin-top:30px;
	margin-bottom:40px;
}
.about .main-text{
	padding:10px 60px 0 0 ;
	line-height: 1.8;
}
.sidebar{
	font-family: 'Montserrat', sans-serif;
}
/* countries vis */
.countriesVis{
	background-color: #FFF;
}
.bg-light-1{
	background-color: var(--light-grey);
}
.interaction{
	border-bottom: 2px dotted #E8E4E1;
	padding: 20px 0;
	font-size: .9em;
}
.col.visContainer{
	padding:0;
}
#countryDropdown .selectedCountry{
	text-transform: uppercase;
}
#dropdownViolence{
	margin-top:5px;
	font-family: 'Montserrat', sans-serif;
	background-color: var(--dark-yellow);
	color:#FFF;
}
#dropdownViolence:hover{
	color: #000;
}
.dropdown-menu{
	font-family: 'Montserrat', sans-serif;
	z-index:2000;
}

#dotLegend{
	position: absolute;
	right: 40px;
	bottom : 20px;
	width: 250px;
}
.dotLegendExpl{
	font-family: 'Montserrat', sans-serif;
	color: var(--dark);
	font-size: 0.8em;
}

.totalPercent{
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
}
.countlabel{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.6em;
}
.countcolor{
	font-family: 'Montserrat', sans-serif;
	font-size: .9em;
}
#surveyThemes{
	border-bottom: 1px solid #ccc;
}
#next, #back{
	z-index: 1000;
	width:50px;
	height:50px;
	border-radius:25px;

}
#next{
	right:0;
	background-color: var(--dark-yellow);
	background-image: url("glyphicons-basic-224-chevron-right-white.svg");
	background-position: center center;
	background-repeat:no-repeat;
	background-size: 40px 40px;
}
#back {
	left:0;
	background-color: var(--dark-yellow);
	background-image: url("glyphicons-basic-223-chevron-left-white.svg");
	background-position: center center;
	background-repeat:no-repeat;
	background-size: 40px 40px;
}
#next:hover,#back:hover{
	background-color: var(--yellow);
}

.legendItem, .sizeLegend, .answerOption, .answerOptionMultiple{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}
#vis1 .answerOption{
	text-anchor: middle;
	font-size: 1rem;
}
#vis1 .answerOptionMultiple{
	text-anchor: middle;
	font-size: .9rem;
}
.label{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

#vis1 .percent { 
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4em;
}
#vis1 .outof{
	font-size: 1.2em;
}
.visTitle{
	font-weight: 500;
	font-size:1.3em;
	line-height: 1.5;
}
.questionTitle{
	font-family: 'Montserrat', sans-serif;
	font-size:.9em;
	width: 300px;
	top:22px;
	left:20px;
	position: absolute;
	z-index: 1000;
}
.visDescription{
	padding-top: 20px;
	border-top: 2px dotted #E8E4E1;
	text-align: left;
}
.reports{
	font-family: 'Montserrat', sans-serif;
	margin-top: 30px;
	margin-bottom: 40px;
	color: #000;
    background-color: #E8E4E1;
    border-color: #E8E4E1;
}
.reports h2{
	font-weight: 500;
	font-size:1.2em;
}
.reports a, .about a {
	color:#000;
	border-bottom: var(--dark-yellow) 2px solid;
	text-decoration:none;
}
.reports a:hover, .about a:hover{
	color:#000;
	border-bottom: var(--yellow) 2px solid;
	text-decoration:none;
}
.hidden{
	visibility: hidden;
}

.displayNone{
	display: none;
}

/* ----- tooltips ------ */

/* arrow bottom */
.arrow_box_bottom {
	position: absolute;
	background: #000000;
	color:#ccc;
	padding: 10px;
	border: 0;
    -webkit-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	z-index: 1200;
	width: 250px;
	height:auto;
    display:none;
	pointer-events: none;
}
.arrow_box_bottom:after, .arrow_box_bottom:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_bottom:after {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 10px;
	margin-left: -10px;
}

.arrow_box_bottom:before {
	border-color: rgba(219, 219, 219, 0);
	border-top-color: #DBDBDB;
	border-width: 11px;
	margin-left: -11px;
}
.arrow_box_bottom .smallTitle{
	font-size: .9em;
}
.arrow_box_bottom .highlight{
	color: #FFF;
}
/* --- map styles ---*/

.border{
	fill: var(--map-grey);
	stroke: var(--light-grey);
}

/* --- scrollama --- */

body.frontpage {
	min-height: 1280px;
}

#scrolly {
	position: relative;
	/*background-color: #f3f3f3;*/
	padding: 0 1rem;
	border-bottom: 1px solid #FFF;
}

article {
	position: relative;
	padding: 0 0 70px 0;
	max-width: 45rem;
	margin: 0 auto;
	pointer-events: none;
}

figure {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	width: 100%;
	margin: 0;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/*background-color: #8a8a8a;*/
	z-index: 0;
}

figure #scrollVis {
	text-align: center;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
figure #scrollVis .countryLabel text.label{
	font-size:0.8em;
}
figure .legendItem{
	font-size:.8em;
}
figure .label{
	font-size: .8rem;
}
.step {
	margin: 0 auto 2.8rem auto;	
	/*color: #fff;*/
}

.step:last-child {
	margin-bottom: 0;
}

.step.is-active p {
	opacity:1;
	transition:opacity .5s;
	background-color: #FFF;
	-webkit-box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	color: var(--dark);
}

.step p {
	text-align: center;
	padding: 1rem;
	font-size: 1.1em;
	background-color: #ffffff;
	opacity:0;
}

.frontpage .percent {
	font-family: 'Montserrat', sans-serif;
	text-anchor: middle;
	font-size:.7rem;
}
.frontpage .indCircle .percent{
	font-size:.7rem;
}

#scrollVisTitle{
	position:absolute;
	color:#FFF;
	bottom: 10px;
	z-index:100;
	padding:5px;
	font-size:1.2em;
	visibility:hidden;
	width: 100%;
}
#scrollVisTitle .title {
	padding:15px 20px;
	/*text-align:left;*/
	background:var(--dark-yellow);
}
#scrollVisTitle .legend, .mobstepTitle .legend{
	padding:15px 20px;
	font-size: .8em;
	background:var(--dark-yellow);
}
.frontVisTitle{
	color: #FFF; /*var(--dark-yellow);*/
	padding:10px;
	font-size:1.2em;
	width: 100%;
	/*margin: 0 auto;*/
}
.frontVisTitle .title{
	padding:15px 20px;
	text-align:center;
	/*background: #FFF;*/
	background:var(--dark-yellow);
}
.front{
	background-color: #DCD9D6;
}
.front p{
	text-align: center;
	font-size:1.1em;
}
.front h4{
	text-align: center;
	margin-top:60px;
	color: #000;
}
hr{
	border-top: #FFF 1px solid;
}
.chartLegend{
	text-anchor: middle;
	font-family: 'Montserrat', sans-serif;
}
/* front mobile */
#mobilemap{
	padding:-15px;
}
/*
.container-fluid.mobile{
	padding:0;
}*/
.mobstep{
	border-top: 1px solid #FFF;
}
.mobstep .mobstepTitle{
	color:#FFF;
	margin-top:25px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size:1.2em;
	background:var(--dark-yellow);
	text-align: center;
}
.mobstep .mobdesc {
	margin:40px 10px;
	opacity:1;
	transition:opacity .5s;
	background-color: #FFF;
	-webkit-box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	box-shadow: 0px 10px 17px -2px rgba(0,0,0,0.75);
	color: var(--dark);
	text-align: center;
	padding: 1rem;
	font-size: 1.1em;
	background-color: #ffffff;
}
#mobilemap .mobdesc{
	padding:20px 20px 30px;
	text-align: center;
}
.frontpage .mobstep .indCircle .percent{
	font-size: .8em;
}
/* risk factors styles */
.dotsChart{
	position: relative;
	margin-top:60px;
}
.dotsChart .countryLabel{
	position: absolute;
	font-family: 'Montserrat', sans-serif;
	cursor: pointer;
	height:75px;
	line-height: 1.2;
	text-align: center;
	font-size: .8em;
	background: url("glyphicons-basic-827-arrow-thin-down.svg") no-repeat bottom center;
	background-size: 30px 20px;
}
.dotsChart .countryLabel .label{
	transform: rotate(-90deg) translate(-40px,0px);
	white-space: nowrap;
}
.dotsChart .countryLabel.active{
	background-image: url("glyphicons-basic-827-arrow-thin-down_2.svg");
}
.dotsChart .countryLabel:hover{
	height:75px;
}
.riskRows text{
	font-family: 'Montserrat', sans-serif;
	font-size: .8em;
	text-anchor: start;
	fill: var(--dark);
}
/* footer all pages */
.page-footer-all{
	font-family: 'Montserrat', sans-serif;
	font-size:.9em;
	background: var(--dark);
	padding: 20px 0;
	border:0;
}
.page-footer-all a.nav-link{
    color: #c2b9b0;
}
.page-footer-all a.nav-link:hover{
    color: #f5f5f5;
}

/* end footer */

.navbar-dark .navbar-toggler-icon {
	background-image: url("hamburger.svg");
}
.navbar-light .navbar-toggler-icon {
	background-image: url("hamburger-dark.svg");
}
@media (max-width: 992px) {
	.container {
	  width: 100%;
	  max-width: none;
	}
  }
@media (min-width: 922px){
	.frontpage .percent {
		font-size:.8rem;
	}
}
@media (min-width: 768px){
	.dotsChart .countryLabel{
		font-size: 1em;
	}
	.dotsChart .countryLabel .label{
		white-space: normal;
	}
	#scrollVisTitle .title{
		text-align:right;
	}
	.page-footer{
		height: 120px;
	}
}
@media (min-width: 576px){
	.logo{
		height: 100px;
	}
	.logo-CAR{
		height: 89px;
		padding-top: 10px;
	}
	.logo-UNW{
		height:80px;
		padding-top: 10px;
	}
	.header-down-arrow {
		display: block;
	}
	.dotsChart .countryLabel .label{
		transform: rotate(0deg);
	}
}
@media (min-height: 640px){
	#scrollVisTitle{
		bottom: 30px;
		padding:10px;
		font-size:1.4em;
	}
	#scrollVisTitle .title{
		padding:5px 10px;
	}
	#scrollVisTitle .legend{
		padding:5px 10px;
	}
}
@media only screen and (max-device-width: 480px) 
                   and (orientation: portrait) {

	.rotateMessage{
		display: block;
	}
}