/*================================================*/

/*                    MAIN STYLES                 */

/*================================================*/

html {

  

}

.ani {

	opacity: 0;

}

.apeare {

	opacity: 0;

	animation: apeare;

	-webkit-animation: apeare;

}

.bounce {

	opacity: 0;

	animation: apeare 1s, bounce 1s;

	animation-delay: 2s;

	-webkit-animation: apeare 1s, bounce 1s;

	-webkit-animation-delay: 2s;

}

canvas.ani {

	position: absolute;

	z-index: 8;

	animation-duration: 2s;

	animation-delay: 2.5s;

	animation-fill-mode: forwards;

	-webkit-animation-duration: 2s;

	-webkit-animation-delay: 2.5s;

	-webkit-animation-fill-mode: forwards;

}

.cont {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

  background-color: #fff;

  color: #fff;

  font-family: "Neutra Text";

  font-size: 16px;

  font-weight: 400;

  width: 100%;

  min-width: 320px;

  max-width: 100%;

  min-height: 100%;

}

.nm-main-wrapper {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  -ms-flex-direction: column;

  flex-direction: column;

  width: 100%;

  min-width: 100%;

  max-width: 100%;

  min-height: 100vh;

  margin: 0 auto;

  padding: 0;

	overflow: auto !important;

  height: 100%;

}

.nm-big-wrapper {

  position: relative;

	overflow: hidden;

  max-width: 1200px;

  padding: 0;

  margin: 0 auto;

}

.clear:after {

  content: "";

  display: table;

  clear: both;

}

/*================================================*/

/*                    MAIN 		                  */

/*================================================*/

.nm-grow {

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

  overflow: hidden;

  width: 100%;

  margin: 0 auto;

}

main {

  width: 100%;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

}

.nm-img-overwrap {

  position: relative;

}

.nm-map-wrap {

  position: relative;

  padding: 10% 10% 16% 10%;

}

.nm-map-wrap.pad {

	padding: 120px;

}

.nm-map {

  display: block;

  width: 100%;

	animation-duration: 2s;

	animation-fill-mode: forwards;

	-webkit-animation-duration: 2s;

	-webkit-animation-fill-mode: forwards;

}

.nm-dots {

	position: absolute;

	width: 88.4%;

	top: 13.5%;

	left: 1.3%;

	animation-delay: 1s;

	animation-duration: 2s;

	animation-fill-mode: forwards;

}

.nm-baloon {

  position: absolute;

	z-index: 

  display: -webkit-box;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -webkit-flex-direction: row;

  -ms-flex-direction: row;

  flex-direction: row;

  -webkit-box-pack: justify;

  -webkit-justify-content: space-between;

  -ms-flex-pack: justify;

  justify-content: space-between;

  -webkit-box-align: start;

  -webkit-align-items: flex-start;

  -ms-flex-align: start;

  align-items: flex-start;

  background-color: rgba(12,161,201,0.8);

  width: 400px;

  padding: 10px;

animation-duration: 1.3s;

animation-fill-mode: forwards;

animation-delay: 0.5s;

-webkit-animation-duration: 1.3s;

-webkit-animation-fill-mode: forwards;

-webkit-animation-delay: 0.5s;

}

.nm-baloon.nm-marianne{
  
	animation-delay: 1.9s;

	-webkit-animation-delay: 1.9s;

}

.nm-baloon.nm-johnclarke2{

	animation-delay: 2.0s;

	-webkit-animation-delay: 2.0s;

}

.nm-baloon.nm-angela{

	animation-delay: 2.1s;

	-webkit-animation-delay: 2.1s;

}

.nm-baloon.nm-johnclarke1{

	animation-delay: 2.2s;

	-webkit-animation-delay: 2.2s;

}

.nm-baloon .nm-img-wrap {

  border: 2px solid #ab185e;

  border-radius: 50%;

  width: 110px;

  min-width: 110px;

  max-width: 110px;

  margin-right: 15px;

  z-index: 5;

  position: relative;

}

.nm-baloon .nm-img-wrap img {

  display: block;

  max-width: 100%;

  max-height: 100%;

}

.nm-baloon .nm-text-wrap {

  padding-top: 5px;

  width: 20%;

  -webkit-box-flex: 1;

  -webkit-flex-grow: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

}

.nm-mark {

  position: absolute;

  display: block;

  border: 2px solid #ab185e;

	border-radius: 55%;

	width: 2.4vw;

  max-width: 33px;

  background: #47a8c8;

  z-index: 8;

  animation-fill-mode: forwards;

  animation-delay: 3s;

  -webkit-animation-fill-mode: forwards;

  -webkit-animation-delay: 3s;

}



.nm-mark.nm-marianne-mark {

	animation-delay: 1.9s;

	-webkit-animation-delay: 1.9s;

}

.nm-mark.nm-johnclarke2-mark {

	animation-delay: 2.1s;

	-webkit-animation-delay: 2.1s;

}

.nm-mark.nm-angela-mark {

	animation-delay: 2.2s;

	-webkit-animation-delay: 2.2s;

}

.nm-mark.nm-johnclarke1-mark {

	animation-delay: 2.3s;

	-webkit-animation-delay: 2.3s;

}

.nm-mark:after {

  display: block;

  content: "";

  padding-top: 100%;

}

.nm-left {

  width: 250px;

}

.nm-marianne {
  width: 300px;
  top: 30%;

  right: 0%;

}

.nm-marianne-mark {

  top: 18.7%;

  left: 78.3%;

}

.nm-johnclarke2 {

  top: 31.8%;

  left: 12%;

}

.nm-johnclarke2-mark {

	top: 20.8%;

	left: 21.8%;

}

.nm-angela {

  right: 3%;

  bottom: 15%;

}

.nm-angela-mark {

  top: 63.2%;

  left: 69.8%;

}

.nm-johnclarke1 {

  bottom: 15%;

  right: 35%;

}

.nm-johnclarke1-mark {

  top: 78.2%;

  left: 60.3%;

}

/*================================================*/

/*                    MEDIA		                  */

/*================================================*/

@media (max-width: 840px) {

  .nm-map {

    margin-bottom: 50px;

  }

  .nm-baloon {

    position: static;

    margin-bottom: 20px;

    width: 100%;

  }

}



/*================================================*/

/*                  ANIMATION		                  */

/*================================================*/

@keyframes apeare {

from {opacity: 0}

to {opacity: 1}

}

@keyframes bounce {

from {transform: scale(1)}

50% {transform: scale(2)}

to {transform: scale(1)}

}

@-webkit-keyframes apeare {

0% { opacity: 0 }

100% { opacity: 1 }

}

@-webkit-keyframes bounce {

0% {-webkit-transform: scale(1)}

50% {-webkit-transform: scale(2)}

100% {-webkit-transform: scale(1)}

}