/* -------------------------------- 



Primary style



-------------------------------- */

html * {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



*, *:after, *:before {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}





/* -------------------------------- 



Modules - reusable parts of our design



-------------------------------- */

.cd-container {

  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */

  width: 100%;

  max-width: 1170px;

  margin: 0 auto;

}

.cd-container:after {

  content: "";

  display: table;

  clear: both;

}



.cd-img-replace {

  /* replace text with background images */

  display: inline-block;

  /*overflow: hidden;*/

  /*text-indent: 100%;*/

  white-space: nowrap;

}



/* -------------------------------- 



Main components 



-------------------------------- */





.cd-product {

  text-align: center;

}



.cd-product-wrapper {

  display: inline-block;

  position: relative;

  margin: 0 auto;

  width: 100%;

  /*max-width: 450px;*/

}

.cd-product-wrapper > img {
 display: block;
}

.cd-more-info h2{
  font-family: 'EcoWorldSerif';
}


.cd-single-point {
  position: absolute;
  border-radius: 50%;
	list-style: none;
}

.cd-single-point a{
    text-decoration:none;
}  

.cd-img-replace > span{
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);		/* IE 9 */
  -webkit-transform: rotate(-45deg);	/* Safari and Chrome */
  -o-transform: rotate(-45deg);		/* Opera */
  -moz-transform: rotate(-45deg);		/* Firefox */
  position: relative;
  z-index: 5;
  display: block;
  line-height:20px;
  text-decoration:none;
  /*color:black;*/
  color:white;
}

.cd-single-point > a {
  position: relative;
  z-index: 2;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  /*background: #015169;*/
  background: #85363B;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);		/* IE 9 */
  -webkit-transform: rotate(45deg);	/* Safari and Chrome */
  -o-transform: rotate(45deg);		/* Opera */
  -moz-transform: rotate(45deg);		/* Firefox */
  color:white;
}

.cd-single-point > a::after, .cd-single-point > a:before {

  /* rotating plus icon */

  /*content: '';*/

  position: absolute;

  left: 50%;

  top: 50%;

  bottom: auto;

  right: auto;

  -webkit-transform: translateX(-50%) translateY(-50%);

  -moz-transform: translateX(-50%) translateY(-50%);

  -ms-transform: translateX(-50%) translateY(-50%);

  -o-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  background-color: #ffffff;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

  -webkit-transition-duration: 0.2s;

  -moz-transition-duration: 0.2s;

  transition-duration: 0.2s;

}

.cd-single-point > a::after {

  height: 2px;

  width: 10px;

 	

  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  transform: translateX(-50%) translateY(-50%) rotate(45deg);

  

}

.cd-single-point > a::before {

  height: 10px;

  width: 2px;

  

  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  transform: translateX(-50%) translateY(-50%) rotate(45deg);

}

.cd-single-point::after {

  /* this is used to create the pulse animation */

  content: '';

  position: absolute;

  z-index: 1;

    width: 100%;

    height: 100%;

  top: 0;

  left: 0;

  border-radius: inherit;

  background-color: transparent;

  -webkit-animation: cd-pulse 2s infinite;

  -moz-animation: cd-pulse 2s infinite;

  animation: cd-pulse 2s infinite;

}



.point-1a {

  top: 71%;
  left: 7.3%;

  z-index:4;

}



.point-1b {

  top: 69%;

  left: 20%;

}



.point-1c {

  top: 58%;

  right: 29%;

}



.point-2 {

  top: 77%;

  left: 8%;

  z-index:5;

}

.point-3 {

  top: 70%;

  left: 16%;

}

.point-4 {

  top: 76%;

  left: 18%;

  z-index:6;

}



.point-5 {

  top: 73%;

  left: 26%;

}



.point-6 {

  top: 73%;

  left: 27%;

}



.point-7 {

  top: 73%;

  left: 30%;

}



.point-8 {

  top: 77%;

  left: 31%;

  z-index:4;

}



.point-9 {

  top: 73%;

  left: 40%;

}



.point-10 {

  top: 67%;

  left: 56%;

}



.point-11 {

  top: 68%;

  right: 11%;

  z-index:4;

}



.point-12a {

  top: 9%;
  right: 25%;

}



.point-12b {

  top: 16.5%;
right: 11%;
z-index: 4;

}



.point-13 {

  top: 11%;

  right: 21%;

}



.point-14 {

  top: 61.5%;
right: 11.5%;

}



.point-15 {

  top: 36%;

  right: 26%;

}



.point-16 {

  top: 40.5%;
right: 26%;

}



.point-17 {

  top: 46%;

  right: 25%;

}



.point-18 {

  top: 54%;

  right: 30%;

  z-index:4;

}



.point-19 {

  top: 49%;

  right: 28%;

}



.point-20 {

  top: 54%;

  right: 31.5%;

  z-index:4;

}



.point-21 {

  top: 58%;

  right: 25%;

  z-index:5;

}



.point-22 {

  top: 61%;

  right: 23%;

  z-index:6;

}



.cd-single-point.is-open > a {

 /* background-color: #015169;*/
 background-color: #85363B;
  

}

.cd-single-point.is-open > a::after, .cd-single-point.is-open > a::before {

  -webkit-transform: translateX(-50%) translateY(-50%) rotate(175deg);

  -moz-transform: translateX(-50%) translateY(-50%) rotate(175deg);

  -ms-transform: translateX(-50%) translateY(-50%) rotate(175deg);

  -o-transform: translateX(-50%) translateY(-50%) rotate(175deg);

  transform: translateX(-50%) translateY(-50%) rotate(175deg);

}

.cd-single-point.is-open::after {

  /* remove pulse effect */

  display: none;

}

.cd-single-point.is-open .cd-more-info {

  visibility: visible;

  opacity: 1;

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

  -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

}

.cd-single-point.visited > a {

  /*background-color: #015169;*/
  background-color:#85363B;

}

.cd-single-point.visited::after {

  /* pulse effect no more active on visited elements */

  display: none;

}

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

  .cd-single-point.is-open .cd-more-info.cd-left {

    right: 140%;

  }

  .cd-single-point.is-open .cd-more-info.cd-right {

    left: 140%;

  }

  .cd-single-point.is-open .cd-more-info.cd-top {

    bottom: 140%;

  }

  .cd-single-point.is-open .cd-more-info.cd-bottom {

    top: 140%;

  }

}



@-webkit-keyframes cd-pulse {

  0% {

    -webkit-transform: scale(1);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  50% {

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  100% {

    -webkit-transform: scale(1.6);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0);

  }

}

@-moz-keyframes cd-pulse {

  0% {

    -moz-transform: scale(1);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  50% {

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  100% {

    -moz-transform: scale(1.6);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0);

  }

}

@keyframes cd-pulse {

  0% {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

    -o-transform: scale(1);

    transform: scale(1);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  50% {

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0.8);

  }

  100% {

    -webkit-transform: scale(1.6);

    -moz-transform: scale(1.6);

    -ms-transform: scale(1.6);

    -o-transform: scale(1.6);

    transform: scale(1.6);

    box-shadow: inset 0 0 1px 1px rgba(1, 81, 105, 0);

  }

}

.cd-single-point .cd-more-info {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 3;

  width: 100%;

  /*height: 100%;*/

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  text-align: left;

  line-height: 1.5;

  background-color: rgba(255, 255, 255, 0.95);

  padding: 2em 1em 1em;

  visibility: hidden;

  opacity: 0;

  -webkit-transform: scale(0.8);

  -moz-transform: scale(0.8);

  -ms-transform: scale(0.8);

  -o-transform: scale(0.8);

  transform: scale(0.8);

  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;

}

.cd-single-point .cd-more-info::before {

  /* triangle next to the interest point description - hidden on mobile */

  content: '';

  position: absolute;

  height: 0;

  width: 0;

  display: none;

  border: 8px solid transparent;

}

.cd-single-point .cd-more-info h2 {

	margin-top:0;

  font-size: 22px;

  font-size: 1.375rem;

  margin-bottom: .6em;

}

.cd-single-point .cd-more-info p {

  color: #758eb1;

}

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

  .cd-single-point .cd-more-info {

    position: absolute;

    min-width: 220px;

    min-height: 50px;

    padding: 1em;

    overflow-y: visible;

    line-height: 1.4;

    border-radius: 0.25em;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

  }

  .cd-single-point .cd-more-info::before {

    display: block;

  }

  .cd-single-point .cd-more-info.cd-left, .cd-single-point .cd-more-info.cd-right {

    top: 50%;

    bottom: auto;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

  }

  .cd-single-point .cd-more-info.cd-left::before, .cd-single-point .cd-more-info.cd-right::before {

    top: 50%;

    bottom: auto;

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    transform: translateY(-50%);

  }

  .cd-single-point .cd-more-info.cd-left {

    right: 160%;

    left: auto;

  }

  .cd-single-point .cd-more-info.cd-left::before {

    border-left-color: rgba(255, 255, 255, 0.95);

    left: 100%;

  }

  .cd-single-point .cd-more-info.cd-right {

    left: 160%;

  }

  .cd-single-point .cd-more-info.cd-right::before {

    border-right-color: rgba(255, 255, 255, 0.95);

    right: 100%;

  }

  .cd-single-point .cd-more-info.cd-top, .cd-single-point .cd-more-info.cd-bottom {

    left: 50%;

    right: auto;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

  }

  .cd-single-point .cd-more-info.cd-top::before, .cd-single-point .cd-more-info.cd-bottom::before {

    left: 50%;

    right: auto;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

  }

  .cd-single-point .cd-more-info.cd-top {

    bottom: 160%;

    top: auto;

  }

  .cd-single-point .cd-more-info.cd-top::before {

    border-top-color: rgba(255, 255, 255, 0.95);

    top: 100%;

  }

  .cd-single-point .cd-more-info.cd-bottom {

    top: 160%;

  }

  .cd-single-point .cd-more-info.cd-bottom::before {

    border-bottom-color: rgba(255, 255, 255, 0.95);

    bottom: 100%;

  }

  .cd-single-point .cd-more-info h2 {

    font-size: 20px;

	text-align:center;

    margin-bottom: 0;

  }

  .cd-single-point .cd-more-info p {

    font-size: 14px;

    font-size: 0.875rem;

  }

}



/* close the interest point description - only on mobile */

.cd-close-info {

  position: fixed;

  top: 0;

  right: 0;

  height: 44px;

  width: 44px;

}

.cd-close-info::after, .cd-close-info:before {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  bottom: auto;

  right: auto;

  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);

  transform: translateX(-50%) translateY(-50%) rotate(45deg);

  background-color: #015169;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

  -webkit-transition-duration: 0.2s;

  -moz-transition-duration: 0.2s;

  transition-duration: 0.2s;

}

.cd-close-info::after {

  height: 2px;

  width: 16px;

}

.cd-close-info::before {

  height: 16px;

  width: 2px;

}

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

  .cd-close-info {

    display: none;

  }

}









/*****************************/

/* Falling Icon, from http://vintageproductions.eu/grid/interactivity/ */ 

/*****************************/



.tabs-style-iconfall {

	overflow: visible;

}



.tabs-style-iconfall nav a {

	display: inline-block;

	overflow: visible;

	padding: 1em 0 2em;

	color: #74777b;

	line-height: 1;

	-webkit-transition: color 0.3s cubic-bezier(0.7,0,0.3,1); 

	transition: color 0.3s cubic-bezier(0.7,0,0.3,1);

}



.tabs-style-iconfall nav a:hover,

.tabs-style-iconfall nav a:focus,

.tabs-style-iconfall nav li.tab-current a {

	color: #008db3;

}



.tabs-style-iconfall nav a span {

	font-weight: 700;

}



.tabs-style-iconfall nav li::before {

	position: absolute;

	bottom: 1em;

	left: 50%;

	margin-left: -20px;

	width: 40px;

	height: 2px;

	background: #008db3;

	content: '';

	opacity: 0;

	-webkit-transition: -webkit-transform 0.2s ease-in;

	transition: transform 0.2s ease-in;

	-webkit-transform: scale3d(0,1,1);

	transform: scale3d(0,1,1);

}



.tabs-style-iconfall nav li.tab-current::before {

	opacity: 1;

	-webkit-transform: scale3d(1,1,1);

	transform: scale3d(1,1,1);

}



.tabs-style-iconfall .icon::before {

	display: block;

	margin: 0 0 0.35em;

	opacity: 0;

	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;

	transition: transform 0.2s, opacity 0.2s;

	-webkit-transform: translate3d(0,-100px,0);

	transform: translate3d(0,-100px,0);

	pointer-events: none;

}



.tabs-style-iconfall nav li.tab-current .icon::before {

	opacity: 1;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}



@media screen and (max-width: 58em) {

	.tabs-style-iconfall nav li .icon::before {

		opacity: 1;

		-webkit-transform: translate3d(0,0,0);

		transform: translate3d(0,0,0);

	}

}









.tabs {

	position: relative;

	/*overflow: hidden;*/

	margin: 0 auto;

	width: 100%;

	font-weight: 300;

	font-size: 1.25em;

}



/* Nav */

.tabs nav {

	text-align: center;

}



.tabs nav ul {

	position: relative;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: -moz-flex;

	display: -ms-flex;

	display: flex;

	margin: 0 auto;

	padding: 0;

	max-width: 1200px;

	list-style: none;

	-ms-box-orient: horizontal;

	-ms-box-pack: center;

	-webkit-flex-flow: row wrap;

	-moz-flex-flow: row wrap;

	-ms-flex-flow: row wrap;

	flex-flow: row wrap;

	-webkit-justify-content: center;

	-moz-justify-content: center;

	-ms-justify-content: center;

	justify-content: center;

}



.tabs nav ul li {

	position: relative;

	z-index: 1;

	display: block;

	margin: 0;

	text-align: center;

	-webkit-flex: 1;

	-moz-flex: 1;

	-ms-flex: 1;

	flex: 1;

}



.tabs nav a {

	position: relative;

	display: block;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

	/*line-height: 2.5;*/

}



.tabs nav a span {

	vertical-align: middle;

	text-decoration:none;

}



.tabs nav a:hover, .tabs nav a:active, .tabs nav a:focus{

	text-decoration:none;

}



.tabs nav li.tab-current a {

  /*color: #008db3;*/
  color:#74777b;

}



.tabs nav a:focus {

	outline: none;

}



/* Icons */

.icon::before {

	z-index: 10;

	display: inline-block;

	margin: 0 0.4em 0 0;

	vertical-align: middle;

	text-transform: none;

	font-weight: normal;

	font-variant: normal;

	font-size: 1.3em;

	font-family: 'stroke7pixeden';

	line-height: 1;

	speak: none;

	-webkit-backface-visibility: hidden;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}

.icon-upload::before {

	content: "\e68a";

}

.icon-tools::before {

	content: "\e60a";

}

.icon-plane::before {

	content: "\e625";

}

.icon-joy::before {

	content: "\e6a4";

}

.icon-plug::before {

	content: "\e69a";

}

.icon-home::before {

	content: "\e648";

}

.icon-gift::before {

	content: "\e652";

}

.icon-display::before {

	content: "\e65e";

}

.icon-date::before {

	content: "\e660";

}

.icon-config::before {

	content: "\e666";

}

.icon-coffee::before {

	content: "\e669";

}

.icon-camera::before {

	content: "\e66f";

}

.icon-box::before {

	content: "\e674";

}



/* Content */

.content-wrap {

	position: relative;

}



.content-wrap section {

	display: none;

	margin: 0 auto;

	padding: 1em;

	max-width: 1200px;

	text-align: center;

}



.content-wrap section.content-current {

	display: block;

}



.content-wrap section p {

	margin: 0;

	padding: 0.75em 0;

	color: rgba(40,44,42,0.05);

	font-weight: 900;

	font-size: 4em;

	line-height: 1;

}



/* Fallback */

.no-js .content-wrap section {

	display: block;

	padding-bottom: 2em;

	border-bottom: 1px solid rgba(255,255,255,0.6);

}



.no-flexbox nav ul {

	display: block;

}



.no-flexbox nav ul li {

	min-width: 15%;

	display: inline-block;

}



@media screen and (max-width: 58em) {

	.tabs nav a.icon span {

		display: none;

	}

	.tabs nav a:before {

		margin-right: 0;

	}

}



.cd-product-wrapper ul{

	padding-left:27px;	

}



.opacity-animation{

  -webkit-animation: opacity 1s forwards;

  -moz-animation:    opacity 1s forwards;

  -o-animation:      opacity 1s forwards;

  animation:         opacity 1s forwards;

}





.content-current .cd-product-wrapper ul li{

  -webkit-animation: opacity 1s forwards;

  -moz-animation:    opacity 1s forwards;

  -o-animation:      opacity 1s forwards;

  animation:         opacity 1s forwards;

}



@-webkit-keyframes opacity {

  0%   { opacity: 0; }

  100% { opacity: 1; }

}

@-moz-keyframes opacity {

  0%   { opacity: 0; }

  100% { opacity: 1; }

}

@-o-keyframes opacity {

  0%   { opacity: 0; }

  100% { opacity: 1; }

}

@keyframes opacity {

  0%   { opacity: 0; }

  100% { opacity: 1; }

}











/* Popup Hover */

.popup{

  background:#fafafa;

  border:1px solid #005067;

  padding:10px;

  position:absolute;

  display:none;

  width:250px;

  font-size:12px;

}



.gear{

	display:none;

}