@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700;900&display=swap');

html, body {
height: 100%;
margin: 0;
}

body {
background: #fbfbfb;
}

.he-wrapper{
    max-width: 900px;
    margin: auto;
    padding: 2em;
    font-family: 'Source Sans Pro', sans-serif;
}

.he-map{
background-color: lightgray;
height: 35em;
margin: 2em 0;
}

.he-wrapper a,
.he-wrapper a:link,
.he-wrapper a:visited{
color: #002F6C;
}

.single-project-wrapper {
border-bottom: 1px solid #002F6C;
padding: 2em 0;
}

.he-wrapper h2 {
color: #002F6C;
}


.wrap {
    /* margin: 0 auto; */
    width: 50em;
}

.project-description, .project-dates, .project-implementorname, .project-subawardees {
margin-bottom: 1em;
}

.project-description {
color: #666;
line-height: 1.4em;
margin-bottom: 1em;
display: block;
}

.project-implementorname, .project-subawardees {
display:block;
}

.project-dates {
display: inline-block;
padding: .5em;
background: #eee;
}

/* skip link */
.skip-link {
left:-999px;
position:absolute;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:-999;
}

.skip-link:focus, .skip-link:active {
background-color:#eee;
position:relative;
bottom: -10px;
left: auto;
top: auto;
height: auto;
overflow:auto;
padding:5px;
border:1px solid #888;
text-align:center;
z-index:999;
}


/* overrides for jquery UI */
.current-country,
.ui-accordion .ui-accordion-header,
.ui-accordion .project-description,
.project-dates,
.project-implementorname,
.project-subawardees,
.project-link {
    font-family: 'Source Sans Pro', sans-serif;
}

.ui-accordion .ui-accordion-header{
    margin-top: .5em;
}

.ui-state-hover {
border:none;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {

border: none;
background: #A7C6ED;
font-weight: inherit;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: none;
/* background: #eee; */
}
.ui-accordion-content{
    font-size: 14px;
}
.ui-widget {
    font-family: 'Source Sans Pro', sans-serif;   
}    

/* end overrides for jquery UI */



.timeline-wrapper{
    text-align: right;
}

.key {
    width: 63%;
    margin-right: -63%;
    margin-top: -642px;
}



/**/
.a-orientation,
.a-training,
.a-rotation,
.a-assignment,
.a-language-training,
.a-promotion,
.qcr,
.rm,
.erm,
.idp,
.d360,
.ape,
.aar,
.pif {
    cursor: pointer;
}

.qcr.active,
.rm.active,
.erm.active,
.idp.active,
.d360.active,
.ape.active,
.aar.active,
.pif.active{
filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5));
}


/* orientation */

@keyframes col {
0%,71% {fill:none}
72% {fill:black}
75%,100% {fill:none}
}

.a-orientation rect, .a-orientation polygon{
fill:#A7C6ED
}

.a-orientation:hover rect, .a-orientation:hover polygon, 
.a-orientation.active rect, .a-orientation.active polygon{
fill: #E7EDF4; 

transition-property: fill;
transition-duration: .5s;
}

.a-orientation:hover {
fill: #203468;
}

.a-rotation{
cursor: pointer;
}

.a-rotation rect, .a-rotation polygon{
fill: #629fd8;
}


.a-rotation:hover rect, .a-rotation:hover polygon,
.a-rotation.active rect, .a-rotation.active polygon 
{
fill: #D0E2F7;
transition-duration: .5s;
}
.a-rotation:hover {
fill: #203468;
}

.a-language-training rect, .a-language-training polygon{
transition-duration: .5s;
fill: #A7C6ED;
}

.a-language-training:hover rect, .a-language-training:hover polygon,
.a-language-training.active rect, .a-language-training.active polygon {
transition-duration: .5s;
fill: #E7EDF4;
}

.a-language-training:hover tspan,
.a-language-training.active tspan{
fill: #203468;
transition-duration: .5s;
}


.a-training:hover rect,
.a-training.active rect {
fill: #D0E2F7;
transition-duration: .5s;
}
.a-training {
fill: #203468;
}
.a-training:hover text,
.a-training.active text{
fill: black;
}

 /* correct position */
.a-assignment {
    transform: translate(-136px, 0px);
}

.a-assignment:hover rect, .a-assignment:hover polygon,
.a-assignment.active rect, .a-assignment.active polygon
{
transition-duration: .5s;
fill: #D0E2F7;
}
.a-assignment.active line,
.a-assignment.active circle{
filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5));
transition-duration: .5s;
}

.a-assignment:hover {
fill: #203468;
transition-duration: .5s;
}
.a-assignment:hover tspan,
.a-assignment.active tspan{
fill: #203468;
font-weight: 400;
filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5));
}


.a-promotion:hover rect, .a-promotion:hover polygon,
.a-promotion.active rect, .a-promotion.active polygon
{
transition-duration: .5s;
fill: #D0E2F7;
}
.a-promotion.active line,
.a-promotion.active circle{
filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .5));
transition-duration: .5s;
}

.a-promotion:hover {
fill: #203468;
transition-duration: .5s;
}

.a-promotion:hover tspan,
.a-promotion.active tspan{
fill: #651D32;
font-weight: 400;
}


.rm:hover rect,
.erm:hover rect,
.idp:hover polyline,
.idp.active polyline,
.erm.active rect,
.erm.active polyline
{
transition-duration: .5s;
fill:#D0E2F7; 
}

.rm:hover rect,
.rm.active rect{
fill:#D0E2F7; 
}


.qcr:hover rect,
.qcr:hover polyline,
.d360:hover polyline,
.qcr.active rect,
.qcr.active polyline,
.d360.active polyline
{
fill: #BFEBD3;
fill-opacity: 1;
}

/* .ape:hover rect,
.aar:hover rect,
.pif:hover rect,
.ape.active rect,
.aar.active rect,
.pif.active rect
{
 fill: #E6E7E8;
} */


.layerselect {
    filter: opacity(.6);
    transition: opacity 0.3s linear 2s
}
#Layer_4.layerselect {
    filter: opacity(1);
}
.active-layer {
    filter: opacity(1);
    transition: opacity 0.3s linear 2s
}

.what, .who, .when, .related {
    margin-bottom: 1em;
}

.panel{
    width: 600px; 
    margin: 1em auto;
}

.carousel-cell {
    width: 100%; /* full width */
    height: 500px; /* height of carousel */
    filter: opacity(.5);
}
.height2 {height: 800px;}

.carousel-cell.is-selected {
    filter: opacity(1);
}
.tip{
    /* text-align: right; */
    margin:1em;
    padding:.5em;
    cursor: pointer;
    color: #203468;
    position: relative;
    top: -45px;
    background: #ffffffd6;
    display: inline;
}
  
.tip:hover, tip:hover::before{
    background: white;
}
.tip::before{
    content: url(info.svg);
    width: 21px;
    height: 21px;
    display: inline-block;
    top: 6px;
    position: relative;
    opacity: .4;
}

.tip span{
    /* background: #f1f1f1; */
    padding:.5em;
}
.tiptext{
    display:none;
    background: #f7f5f2;
    padding: 1em;
    margin: 1px;
}
/* Fix for relative positioned tips */
.tiptext ~ p {
    margin-top: -1em;
}
.activetip{
    opacity: 1;
    max-width: 38em;
    margin: 0 auto;
    display: block;
}
  
.center{
    text-align: center;
}
.panel img{
    max-width: 100%;
}


.logo img{
    height: 50px;
}

hr{
    border: solid rgb(207, 207, 207) 4px;
    margin: 2em 0;
}


/* header */

.title, .subtitle {
color: #1568b2;
font-weight: 600;
font-size: 1.5em;
}
.logo {
float: right;
}
.header {
margin-bottom: 1em;
}
.description {
max-width: 541px;
margin-top: 1em;
color:#333;
}

.header a{
    text-decoration: none;
}
.header a:hover{
    opacity: .7;
}

/* Inline #0 | http://localhost:8888/toolkit/index.php */

.he-wrapper {
    background: white;
  }
  
  /* Inline #4 | http://localhost:8888/toolkit/index.php */
  
  

.main-journey{
    display:inline-block;
}
.main-journey img{
    max-width: 100%;
}
.main-timeline{
    display:inline-block;
    padding-right: 2em;
}
.main-timeline img{
    max-width: 100%;
}

.main-journey h2, .main-timeline h2{
    text-align: center;
}

.main-wrapper{
    display: flex;
    align-items: flex-start;
}

.main-journey-wrapper, .main-timeline-wrapper{
    display: block;
    text-decoration: none;
}

.main-journey-wrapper p, .main-timeline-wrapper p{
    color: black;
}

.main-timeline, .inner-main-journey, .inner-main-faqs{
    padding: 1em;
}
.main-timeline:hover, .inner-main-journey:hover, .inner-main-faqs:hover{
    background: rgb(235, 235, 235);
}

.carousel0, .carousel1, .carousel2, .carousel3, .carousel4 {
    margin-bottom: 6em;
}

/* Flickity*/

/* no circle */
.flickity-button, .flickity-button:hover {
background: transparent;
}
/* big previous & next buttons */
.flickity-prev-next-button {
width: 100px;
height: 100px;
}
/* icon color
.flickity-button-icon {
fill: rgb(253, 231, 231);
} */
/* hide disabled button */
.flickity-button:disabled {
display: none;
}

.flickity-button{
    color: #1468b1;
} 

.back {
margin: 3em 0;
}
.back a{
text-decoration: none;
/* background: #A7C6ED; */
padding:1em 0;
font-weight: 400;
}

.back a:link{
    color:#1568b2;    
}

.invisible{
    opacity: 0;
}