@font-face {

    font-family: 'Aller';

    src: url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.eot);

    src: url("/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.eot?#iefix") format("embedded-opentype"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.woff2) format("woff2"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.woff) format("woff"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.ttf) format("truetype"), url("/wp-content/plugins/botnar-map/v1/fonts/3569DD_0_0.svg#3569DD_0_0") format("svg");

    font-weight: 700;

    font-style: normal

}



@font-face {

    font-family: 'Aller';

    src: url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.eot);

    src: url("/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.eot?#iefix") format("embedded-opentype"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.woff2) format("woff2"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.woff) format("woff"), url(/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.ttf) format("truetype"), url("/wp-content/plugins/botnar-map/v1/fonts/3569DD_1_0.svg#3569DD_1_0") format("svg");

    font-weight: 400;

    font-style: normal

}







#header {

  display: none;

} 



body {

  overflow: hidden;

  font-family: 'Aller' !important;

}



.image-wrap img {

  width: 100%;

}



.map-area {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100vh;

  width: 100vw;

}





.map-content {

  position: fixed;

  left: 30px;

  top: 30px;

  right: 30px;

  z-index: 1;

  text-align: center;

  border-image-source: url(../img/frame-blue.svg);

  border-image-slice: 50%;

  border-image-width: 100px;

  border-width: 20px;

  border-style: solid;

}



.map-content .map-about-wrap {

  background-color: #FFFFFF;

  opacity: 0;

  position: fixed; 

  left: 50px;

  top: 175px;

  right: 50px;

  bottom: 50px;

  margin: 0 auto;

  max-width: 900px;

  max-height: 900px;

  transition: all 1s ease-in-out;

  pointer-events: none;

}



.map-content .map-about-wrap.in {

  opacity: 1;

  pointer-events: initial;

}



.map-content .map-about-wrap .sleeve {

  padding: 0px 25px;

  position: absolute;

  left: 75px;

  right: 75px;

  top: 30px;

  bottom: 30px;

  overflow-y: scroll; 

}



.map-content .map-about-wrap .sleeve .go-to-map {

  margin-top: 30px;

  cursor: pointer;

  text-align: center;

  background-color: #2898d9;

  color: #FFFFFF;

  display: inline-block;

  border-radius: 10px;

  padding: 5px 50px 5px 20px;

  font-size: 1.4em;

  line-height: 1.3em;

  background-image: url(../img/arrow-down.svg);

  background-repeat: no-repeat;

  background-size: 25px auto;

  background-position: right 20px top 5px;

}



.map-content .map-about-wrap .sleeve h1 {

  text-align: left;

  color: #2898d9;

  font-size: 1.8em;

  line-height: 1.3em;

  margin-bottom: 30px;

  padding-top: 100px;

  background-image: url(../img/fondation-botnar-logo.png);

  background-size: auto 70px;

  background-position: right top;

  background-repeat: no-repeat;

}



.map-content .map-about-wrap .sleeve .standfirst {

  text-align: left;

  font-weight: bold;

  font-size: 1.1em;

  line-height: 1.4em;

  margin-bottom: 30px;

}



.map-content .map-about-wrap .sleeve strong {

  color: #ea4c7d;

}



.map-content .map-about-wrap .sleeve p {

  text-align: left;

  margin-bottom: 30px;

  line-height: 1.4em;

}



.map-content .map-about-wrap:after {

  top: 100%;

  left: 50%;

  border: solid transparent;

  content: " ";

  height: 0;

  width: 0;

  position: absolute;

  pointer-events: none;

  border-color: rgba(255, 255, 255, 0);

  border-top-color: #FFFFFF;

  border-width: 30px;

  margin-left: -30px;

}







.map-content .map-content-wrap {

  background-color: #FFFFFF;

  position: fixed; 

  left: 50px;

  /*top: 175px;*/

  right: 50px;

  bottom: 50px;

  margin: 0 auto;

  max-width: 900px;

  max-height: 900px;

  padding: 25px 75px;

}



.map-content .map-content-wrap:after {

  top: 100%;

  left: 50%;

  border: solid transparent;

  content: " ";

  height: 0;

  width: 0;

  position: absolute;

  pointer-events: none;

  border-color: rgba(255, 255, 255, 0);

  border-top-color: #FFFFFF;

  border-width: 30px;

  margin-left: -30px;

}







.map-content .map-filters ul {

  margin: 0;

  padding: 0;

  background-color: #ea4c7d;

  padding: 15px 10px 10px 10px;

}



.map-content .map-filters ul li {

  list-style-type: none;

  margin: 0;

  padding: 10px 10px;

  margin: 0 10px;

  display: inline-block;

  color: #FFFFFF; 

  position: relative;

  transition: all 1s ease-in-out;

  cursor: pointer;

}



.map-content .map-filters ul li.hide {

  display: none !important;

}









.map-content .map-filters ul li span {

  display: inline-block;

  transition: all 1s ease-in-out;

  font-weight: 400;

}



.map-content .map-filters ul li:hover span,

.map-content .map-filters ul li.selected span {



}



.map-content .map-filters ul li:after {

  content: '';

  position: absolute;

  left: 0;

  height: 5px;

  right: 0;

  bottom: 0;

  background-image: url(../img/line.svg);

  background-size: 100% 5px;

  background-position: center bottom;

  background-repeat: no-repeat;

  opacity: 0;

  transform: scaleX(0);

  transition: all 0.5s ease-in-out;

}



.map-content .map-filters ul li.selected:after,

.map-content .map-filters ul li:hover:after {

  opacity: 1;

  transform: scaleX(1);

}



.map-content .map-filters ul li.switcher {

  padding-top: 0;

  padding-bottom: 0;

  position: relative;

  top: 5px;

}



.map-content .map-filters ul li.switcher:after {

  content: none;

}



.map-content .map-filters ul li .switcher-wrap {

  white-space: nowrap;

  border-radius: 10px;

  overflow: hidden;

}



.map-content .map-filters ul li .switcher-wrap .switcher-item {

  display: inline-block;

  font-weight: 200;

  padding: 5px 10px;

  background-color: #FFFFFF;

  color: #ea4c7d;

}



.map-content .map-filters ul li .switcher-wrap .switcher-item.active {

  color: #FFFFFF;

  background-color: #2898d9;

}





.map-content .map-content-wrap {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: column;

  flex-direction: column;

  opacity: 0;

  pointer-events: none;

  transform: scale(0.1);

  transform-origin: center bottom;

  transition: all 1s ease-in-out;

}



.map-content .map-content-wrap.in {

  pointer-events: initial;   

  opacity: 1;

  transform: scale(1);

}



.map-content .project-item {

  position: absolute;

  left: 30px;

  right: 30px;

  top: 30px;

  bottom: 30px;

  max-width: 900px;

  color: #333333;

  text-align: left;

  margin: 0 auto;

  overflow-y: auto;

  padding-right: 30px;

  transform: translateY(50px);

  transition: all 1s ease-in-out;

}



.map-content .project-item .sleeve {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: row;

  flex-direction: row;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.map-content .map-content-wrap.in .project-item {

  transform: translateY(0);

}





.map-content .project-item .info-wrap {

  width: 400px;

}



.map-content .project-item .image-wrap img {

  border-image-source: url(../img/frame-blue.svg);

  border-image-slice: 50%;

  border-image-width: 50px;

  border-width: 20px;

  border-style: solid;

}





.map-content .project-item .context-map {

  width: 100%;

  height: 200px;

  margin: 40px 20px 20px 20px;

  /*

  border-image-source: url(../img/frame-blue.svg);

  border-image-slice: 50%;

  border-image-width: 50px;

  border-width: 20px;

  border-style: solid;

  */

  

}



.map-content .project-item .info-wrap .meta-container {

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: row;

  flex-direction: row;

}



.map-content .project-item .meta-wrap {

  padding-bottom: 20px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: row;

  flex-direction: row;

  -webkit-flex-wrap: wrap;

   flex-wrap: wrap;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.map-content .project-item .meta-wrap > div {

  width: calc( 50% - 10px );

}



.map-content .project-item .content-wrap {

  width: calc( 100% - 475px );

}



.map-content .project-item .content-wrap .slug {

  color: #2898d9;

  font-weight: 200;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  font-size: 0.8em;

  line-height: 1.2em;

}



.map-content .project-item .content-wrap h2 {

  color: #ea4c7d;

  font-size: 2.4em;

  line-height: 1.2em;

  margin-bottom: 20px;

  font-weight: 600;

}



.map-content .project-item .meta-wrap .for-women-by-women,

.map-content .project-item .meta-wrap .technology,

.map-content .project-item .meta-wrap .impact-area,

.map-content .project-item .meta-wrap .organisation {

  margin-bottom: 7px;

  font-size: 0.85em;

  line-height: 1.4em;

}









.map-content .project-item .meta-wrap .for-women-by-women .label,

.map-content .project-item .meta-wrap .technology .label,

.map-content .project-item .meta-wrap .impact-area .label,

.map-content .project-item .meta-wrap .organisation .label {

  display: inline-block;

  padding-right: 10px;

  margin-bottom: 10px;

  font-size: 0.9em;

  line-height: 1.2em;

  min-width: 150px;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-direction: row;

  flex-direction: row;

  -webkit-justify-content: space-between;

  justify-content: space-between;

}



.map-content .project-item .meta-wrap .for-women-by-women .label .text,

.map-content .project-item .meta-wrap .technology .label .text,

.map-content .project-item .meta-wrap .impact-area .label .text,

.map-content .project-item .meta-wrap .organisation .label .text {

  display: inline-block;

  flex-grow: 1;

}



.map-content .project-item .meta-wrap .for-women-by-women .label .text span,

.map-content .project-item .meta-wrap .technology .label .text span,

.map-content .project-item .meta-wrap .impact-area .label .text span,

.map-content .project-item .meta-wrap .organisation .label .text span {

  display: block;

  color: #666666;

}



.map-content .project-item .meta-wrap .for-women-by-women .label .content,

.map-content .project-item .meta-wrap .technology .label .content,

.map-content .project-item .meta-wrap .impact-area .label .content,

.map-content .project-item .meta-wrap .organisation .label .content {

  font-size: 1.2em;

  line-height: 1.4em;

  margin-top: 2px;

}



.map-content .project-item .meta-wrap .for-women-by-women .label span.fa,

.map-content .project-item .meta-wrap .technology .label span.fa,

.map-content .project-item .meta-wrap .impact-area .label span.fa,

.map-content .project-item .meta-wrap .organisation .label span.fa {

  vertical-align: top;

  top: 5px;

  display: inline-block; 

  position: relative;

  margin-right: 10px;

  font-size: 0.9em;

  line-height: 1.2em;

  min-width: 30px;

  text-align: center;

  color: #FFFFFF;

}







.map-content .project-item .meta-wrap .for-women-by-women .label span.fa:after,

.map-content .project-item .meta-wrap .technology .label span.fa:after,

.map-content .project-item .meta-wrap .impact-area .label span.fa:after,

.map-content .project-item .meta-wrap .organisation .label span.fa:after {

  content: ''; 

  position: absolute; 

  width: 21px;

  height: 21px;

  left: 4px;

  top: -5px; 

  background-color: #ea4c7d;

  color: #FFFFFF;

  border-radius: 50%;

  z-index: -1;

}









.map-content .project-item .content-wrap .impact {

  background-color: #52B047;

  padding: 15px;

  color: #FFFFFF;

}



.map-content .project-item .content-wrap .impact .label span {  

  display: inline-block;    

  position: relative;

}



.map-content .project-item .content-wrap .impact .label span:after {

  content: '';

  position: absolute;

  width: 30px;

  margin-left: 20px;

  top: 0;

  bottom: 0;

  background-image: url('../img/arrow-down.svg');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center center;

}



.map-content .project-item .content-wrap .impact p,

.map-content .project-item .content-wrap .description p {

  font-size: 0.85em;

  line-height: 1.4em;

  margin-bottom: 20px;

}



.map-content .project-item .content-wrap .impact .label {

  display: block;

  font-size: 1.8em;

  line-height: 1.4em;

  margin-bottom: 5px;

}





.map-content .project-item .meta-wrap .flag-tick {

  display: inline-block;

  text-indent: -9999px;

  position: relative;

}



.map-content .project-item .meta-wrap .flag-tick:after {

  content: '';

  position: absolute;

  display: block;  

  background-image: url(../img/tick.svg);

  background-repeat: no-repeat;

  background-size: contain;

  width: 20px;

  height: 15px;

  left: 0;

  bottom: 0;

}



.map-content .about-close,

.map-content .project-close {

  position: absolute;

  z-index: 10;

  width: 20px;

  height: 20px;

  top: 30px;

  right: 30px;

  background-image: url(../img/cross.svg);

  background-repeat: no-repeat;

  background-size: contain;

  opacity: 0.5;

  cursor: pointer;

  transition: all 0.5s ease-in-out;

}



.map-content .about-close:hover,

.map-content .project-close:hover {

  opacity: 1;

}



.map-content .project-nav {

  position: absolute;

  width: 30px;

  height: 30px;

  background-repeat: no-repeat;

  background-size: contain;

  top: 50%;

  transform: translateY(-50%);

  opacity: 0.5;

  cursor: pointer;

  transition: all 0.5s ease-in-out;

}



.map-content .project-nav:hover {

  opacity: 1;

}



.map-content .project-nav.prev {

  background-image: url(../img/arrow-left.svg);

  left: 20px;

  background-position: left center; 

}



.map-content .project-nav.next {

  background-image: url(../img/arrow-right.svg);

  right: 20px;

  background-position: right center; 

}



@media screen and ( min-width: 501px ) {

  .desktop-only {

  }



  .mobile-only {

    display: none;

  }

}



@media screen and ( max-width: 500px ) {





  .nav-toggle {

    width: 40px;

    height: 40px;

    position: absolute;

    left: 15px;

    top: 15px;

    background-image: url(../img/menu.svg);

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center center;

    cursor: pointer;

    z-index: 999;

  }



  .desktop-only {

    display: none;  

  }



  .mobile-only {

  }





  .map-content {

    left: 0px;

    right: 0px;

    top: 0px;

    border: none;

  }



  

  .map-content .map-filters {

    display: none;

  }



  body.with-nav .map-content .map-filters {

    display: block;

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

    right: 0;

    z-index: 998;

  }



  body.with-nav .map-content .map-filters ul {

    text-align: center;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    overflow-y: auto;

  }



  body.with-nav .map-content .map-filters li {

    display: block;

  }



  body.with-nav .map-content .map-filters li:first-child {

    display: inline-block;

    margin-bottom: 30px;

  }



  body.with-nav .map-content .map-filters ul li .switcher-wrap .switcher-item {

    padding-top: 10px;

  }



  .map-content .map-content-wrap .sleeve,

  .map-content .map-about-wrap .sleeve {

    left: 15px;

    right: 15px;

  }



  .map-content .map-content-wrap,

  .map-content .map-about-wrap {

    left: 15px;

    right: 15px;

    top: 55px;

  }



  .map-content .about-close,

  .map-content .project-close {

    top: 10px;

    right: 10px;

  }



  .map-content .project-item {

    display: block;

    right: 0;

  }



  .map-content .project-item .image-wrap img {

    border: none;

  }



  .map-content .project-item .context-map {

    margin-left: 0;

    margin-right: 0;

  }



  .map-content .project-item .info-wrap {

    width: 100%;

  }

  

  .map-content .project-item .content-wrap {

    width: 100%;

  }

}