* {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 4a9aac */
html,
body {
  height: 100%;
}

/*body {
  background: #52be7f;
  color: #fff;
}*/

.component {
  position: relative;
  margin-top: 132px;
  margin-bottom: 3em;
  height: 32em;
  /* background: #fff; */
  font-family: "Lato", Arial, sans-serif;
}

.component > h2 {
  position: absolute;
  overflow: hidden;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 300;
  font-style: italic;
  font-size: 12em;
  opacity: 0.1;
  cursor: default;
}

.cn-button {
  position: absolute;
  /* top: 100%; */
  left: 50%;
  z-index: 0;
  margin-top: 6.3em;
  margin-left: -3.75em;
  padding-top: 0em;
  width: 7.5em;
  height: 7.5em;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: #e6e6e6;
  color: #427c84;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
  text-transform: uppercase;

  -webkit-backface-visibility: hidden;
  z-index: 22;
}
.cn-button-animate {
  -webkit-animation: scaleout 2s infinite ease-in-out;
  animation: scaleout 2s infinite ease-in-out;
  cursor: pointer;
}

@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(1);
  }

  60% {
    transform: scale(1);
    -webkit-transform: scale(1.1);
  }

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

@keyframes scaleout {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }

  60% {
    transform: scale(1);
    -webkit-transform: scale(1.1);
  }

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

.csstransforms .cn-wrapper {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 0;
  margin-top: 0em;
  margin-left: -15em;
  width: 30em;
  height: 30em;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  /* -webkit-transition: all .3s ease 0.3s;
    -moz-transition: all .3s ease 0.3s;
    transition: all .3s ease 0.3s;
    -webkit-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -moz-transform: scale(0.1);
    transform: scale(0.1); */
  pointer-events: none;
  overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after {
  /* content: "."; */
  /* display: block; */
  /* font-size: 2em; */
  /* width: 6.2em; */
  /* height: 6.2em; */
  /* position: absolute; */
  /* left: 50%; */
  /* margin-left: -3.1em; */
  /* top: 50%; */
  /* margin-top: -3.1em; */
  /* border-radius: 50%; */
  /* z-index: 10; */
  /* color: transparent; */
}

.csstransforms .opened-nav {
  border-radius: 50%;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /* -webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1); */
  pointer-events: auto;
  z-index: 2;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin-top: 0;
  margin-left: -10em;
  width: 10em;
  height: 10em;
  font-size: 1.5em;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform: rotate(76deg) skew(45deg);
  -moz-transform: rotate(76deg) skew(45deg);
  -ms-transform: rotate(76deg) skew(45deg);
  transform: rotate(76deg) skew(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  /* pointer-events: none; */
  cursor: pointer;
  opacity: 0;
}

.csstransforms .cn-wrapper li a {
  position: absolute;
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  background: #429a67;
  background: -webkit-radial-gradient(transparent 34%, #429a67 35%);
  background: -moz-radial-gradient(transparent 34%, #429a67 35%);
  background: radial-gradient(transparent 34%, #429a67 35%);
  color: #000;
  text-align: center;
  text-decoration: none;
  font-size: 1.3em;
  line-height: 2;
  -webkit-transform: skew(-45deg) rotate(-68deg) scale(1);
  -moz-transform: skew(-45deg) rotate(-68deg) scale(1);
  -ms-transform: skew(-45deg) rotate(-68deg) scale(1);
  transform: skew(-45deg) rotate(-68deg) scale(1);
  /* -webkit-backface-visibility: hidden;
	backface-visibility: hidden; */
  pointer-events: auto;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.csstransforms .cn-wrapper li a span {
  position: relative;
  top: 2.3em;
  width: 70px;
  left: 42%;
  line-height: 1.3em;
  display: block;
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
}
.csstransforms .cn-wrapper li:nth-child(2) a span{
  top: 1.5em;
  width: 70px;
  left: 44%;
}
.csstransforms .cn-wrapper li:nth-child(3) a span{
  top: 2em;
  width: 78px;
  left: 42%;
}
.csstransforms .cn-wrapper li:nth-child(4) a span{
  top: 1em;
  width: 81px;
  left: 41%;
}
.csstransforms .cn-wrapper li:nth-child(5) a span{
  top: 2.3em;
  width: 78px;
  left: 42%;
}
.csstransforms .cn-wrapper li:nth-child(6) a span{
  top: 2em;
  width: 78px;
  left: 41%;
}
.csstransforms .cn-wrapper li:nth-child(7) a span{
  top: 2em;
  width: 78px;
  left: 41%;
}
.csstransforms .cn-wrapper li:nth-child(8) a span{
  top: 2.3em;
  width: 78px;
  left: 42%;
}

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
  background: -webkit-radial-gradient(transparent 34%, #449e6a 35%);
  background: -moz-radial-gradient(transparent 34%, #449e6a 35%);
  background: radial-gradient(transparent 34%, #449e6a 35%);
}

.csstransforms .cn-wrapper li a:focus {
  position: fixed;
  /* fix the displacement bug in webkit browsers when using tab key */
}

.csstransforms .opened-nav li {
  /* border-right: 2px solid #fff; */
}

.csstransforms .opened-nav li:first-child {
  -webkit-transform: rotate(76deg) skew(45deg);
  -moz-transform: rotate(76deg) skew(45deg);
  -ms-transform: rotate(76deg) skew(45deg);
  transform: rotate(76deg) skew(45deg);
}

/* .csstransforms .opened-nav li::before{
	bottom: -11px;
	width: 0;
	height: 0;
	left: 48px;
	content: "";
	position: absolute;
	border-right: 2px solid #fff;
} */
.csstransforms .opened-nav li .tri-right {
  bottom: -12px;
  width: 0;
  height: 0;
  left: 1.5em;
  content: "";
  position: absolute;
  border-right: 43px solid #3500ff;
  border-top: 22px solid transparent;
  /* transform: rotate(32deg); */
  border-bottom: 10px solid transparent;
}

.csstransforms .opened-nav li:first-child a {
  background: #007378;
  background: -webkit-radial-gradient(transparent 34%, #007378 35%);
  background: -moz-radial-gradient(transparent 34%, #007378 35%);
  background: radial-gradient(transparent 34%, #007378 35%);
}

.csstransforms .cn-wrapper li:first-child a span {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.csstransforms .opened-nav li:nth-child(2) {
  -webkit-transform: rotate(123deg) skew(45deg);
  -moz-transform: rotate(123deg) skew(45deg);
  -ms-transform: rotate(123deg) skew(45deg);
  transform: rotate(121deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(2) a {
  background: #00585c;
  background: -webkit-radial-gradient(transparent 34%, #00585c 35%);
  background: -moz-radial-gradient(transparent 34%, #00585c 35%);
  background: radial-gradient(transparent 34%, #00585c 35%);
}

.csstransforms .cn-wrapper li:nth-child(2) a span {
  -webkit-transform: rotate(-54deg);
  -moz-transform: rotate(-54deg);
  -ms-transform: rotate(-54deg);
  transform: rotate(-54deg);
}

.csstransforms .opened-nav li:nth-child(3) {
  -webkit-transform: rotate(170deg) skew(45deg);
  -moz-transform: rotate(170deg) skew(45deg);
  -ms-transform: rotate(170deg) skew(45deg);
  transform: rotate(166deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(3) a {
  background: #eef4f4;
  background: -webkit-radial-gradient(transparent 34%, #eef4f4 35%);
  background: -moz-radial-gradient(transparent 34%, #eef4f4 35%);
  background: radial-gradient(transparent 34%, #eef4f4 35%);
}

.csstransforms .cn-wrapper li:nth-child(3) a span {
  -webkit-transform: rotate(-99deg);
  -moz-transform: rotate(-99deg);
  -ms-transform: rotate(-99deg);
  transform: rotate(-99deg);
}

.csstransforms .opened-nav li:nth-child(4) {
  -webkit-transform: rotate(217deg) skew(45deg);
  -moz-transform: rotate(217deg) skew(45deg);
  -ms-transform: rotate(217deg) skew(45deg);
  transform: rotate(211deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(4) a {
  background: #cde0e1;
  background: -webkit-radial-gradient(transparent 34%, #cde0e1 35%);
  background: -moz-radial-gradient(transparent 34%, #cde0e1 35%);
  background: radial-gradient(transparent 34%, #cde0e1 35%);
}

.csstransforms .cn-wrapper li:nth-child(4) a span {
  -webkit-transform: rotate(-144deg);
  -moz-transform: rotate(-144deg);
  -ms-transform: rotate(-144deg);
  transform: rotate(-144deg);
}

.csstransforms .opened-nav li:nth-child(5) {
  -webkit-transform: rotate(264deg) skew(45deg);
  -moz-transform: rotate(264deg) skew(645deg);
  -ms-transform: rotate(264deg) skew(45deg);
  transform: rotate(256deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(5) a {
  background: #a9cacc;
  background: -webkit-radial-gradient(transparent 34%, #a9cacc 35%);
  background: -moz-radial-gradient(transparent 34%, #a9cacc 35%);
  background: radial-gradient(transparent 34%, #a9cacc 35%);
}

.csstransforms .cn-wrapper li:nth-child(5) a span {
  -webkit-transform: rotate(-189deg);
  -moz-transform: rotate(-189deg);
  -ms-transform: rotate(-189deg);
  transform: rotate(-189deg);
}

.csstransforms .opened-nav li:nth-child(6) {
  -webkit-transform: rotate(311deg) skew(45deg);
  -moz-transform: rotate(311deg) skew(45deg);
  -ms-transform: rotate(311deg) skew(45deg);
  transform: rotate(301deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(6) a {
  background: #87b5b7;
  background: -webkit-radial-gradient(transparent 34%, #87b5b7 35%);
  background: -moz-radial-gradient(transparent 34%, #87b5b7 35%);
  background: radial-gradient(transparent 34%, #87b5b7 35%);
}

.csstransforms .cn-wrapper li:nth-child(6) a span {
  -webkit-transform: rotate(-234deg);
  -moz-transform: rotate(-234deg);
  -ms-transform: rotate(-234deg);
  transform: rotate(-234deg);
}

.csstransforms .opened-nav li:nth-child(7) {
  -webkit-transform: rotate(358deg) skew(45deg);
  -moz-transform: rotate(358deg) skew(45deg);
  -ms-transform: rotate(358deg) skew(45deg);
  transform: rotate(346deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(7) a {
  background: #609fa4;
  background: -webkit-radial-gradient(transparent 34%, #609fa4 35%);
  background: -moz-radial-gradient(transparent 34%, #609fa4 35%);
  background: radial-gradient(transparent 34%, #609fa4 35%);
}

.csstransforms .cn-wrapper li:nth-child(7) a span {
  -webkit-transform: rotate(-278deg);
  -moz-transform: rotate(-278deg);
  -ms-transform: rotate(-278deg);
  transform: rotate(-278deg);
}

.csstransforms .opened-nav li:nth-child(8) {
  -webkit-transform: rotate(405deg) skew(45deg);
  -moz-transform: rotate(405deg) skew(45deg);
  -ms-transform: rotate(405deg) skew(45deg);
  transform: rotate(391deg) skew(45deg);
}

.csstransforms .opened-nav li:nth-child(8) a {
  background: #2b898e;
  background: -webkit-radial-gradient(transparent 34%, #2b898e 35%);
  background: -moz-radial-gradient(transparent 34%, #2b898e 35%);
  background: radial-gradient(transparent 34%, #2b898e 35%);
  -webkit-transform: skew(-45deg) rotate(-68deg) scale(1);
  -moz-transform: skew(-45deg) rotate(-68deg) scale(1);
  -ms-transform: skew(-45deg) rotate(-68deg) scale(1);
  transform: skew(-45deg) rotate(-68deg) scale(1);
}

.csstransforms .cn-wrapper li:nth-child(8) a span {
  -webkit-transform: rotate(-324deg);
  -moz-transform: rotate(-324deg);
  -ms-transform: rotate(-324deg);
  transform: rotate(-324deg);
}

/* .csstransforms .cn-arrow.opened-nav li {
	border-right: 2px solid #fff;
} */

.csstransforms .cn-arrow.opened-nav li:first-child .tri-right {
  border-right: 43px solid #2b898e;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(2) .tri-right {
  border-right: 43px solid #007378;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(3) .tri-right {
  border-right: 43px solid #00585c;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(4) .tri-right {
  border-right: 43px solid #eef4f4;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(5) .tri-right {
  border-right: 43px solid #cde0e1;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(6) .tri-right {
  border-right: 43px solid #a9cacc;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(7) .tri-right {
  border-right: 43px solid #87b5b7;
}

.csstransforms .cn-arrow.opened-nav li:nth-child(8) .tri-right {
  border-right: 43px solid #609fa4;
}

.no-csstransforms .cn-wrapper {
  overflow: hidden;
  margin: 10em auto;
  padding: 0.5em;
  text-align: center;
}

.no-csstransforms .cn-wrapper ul {
  display: inline-block;
}

.no-csstransforms .cn-wrapper li {
  float: left;
  width: 5em;
  height: 5em;
  background-color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
  background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6f325c;
  color: #fff;
}

.no-csstransforms .cn-button {
  display: none;
}

.cn-text {
  position: absolute;
  width: 30em;
  height: 30em;
  left: 50%;
  margin-left: -15em;
  color: #000;
}
.bright-line {
  opacity: 0;
}
.base-line {
  opacity: 0;
}

.cn-text li {
  position: absolute;
  width: 18em;
  opacity: 0;
  /* width: 0; */
  -webkit-transition: all 0.3s ease 0.3s;
  -moz-transition: all 0.3s ease 0.3s;
  transition: all 0.3s ease 0.3s;
}

.cn-text .slopingside {
  height: 1px;
  width: 3em;
  background-color: #b5b5b5;
  transform: rotate(125deg);
  -o-transform: rotate(125deg);
  -moz-transform: rotate(125deg);
  -webkit-transform: rotate(125deg);

  -webkit-transition: all 0.3s ease 0.3s;
  -moz-transition: all 0.3s ease 0.3s;
  transition: all 0.3s ease 0.3s;
  /* opacity: 0; */
}

.cn-text .linear {
  /* border-bottom: 1px solid #000; */
  margin-left: 2.8em;
  margin-top: -3.7em;
  height: 4.7em;
  opacity: 0;
  width:17em;
  top: -14px;
}

.cn-text li:nth-child(2) .linear{
  margin-top: -5.4em;
}

.cn-text .linear:after {
  /* content: '';
	position: absolute;
	display: block;
	bottom: 0;
	left: -2.7em;
	width: 18em;
	height: 1px; */
  /* border-bottom: 1px solid #b5b5b5;
	margin-left: 2.8em;
	margin-top: -5.4em;
	-webkit-transition: all .3s ease 0.3s;
	-moz-transition: all .3s ease 0.3s;
	transition: all .3s ease 0.3s; */
}

.cn-text .linear h4 {
  color: #000;
  font-size: 1.3em;
  padding-left: 3px;
}

.cn-text .linear p {
  font-size: 1em;
  color: #666;
  padding: 5px 3px;
  line-height: 1.8em;
}

.cn-text li:first-child {
  left: 18em;
  top: -0.8em;
}

.cn-text li:first-child .slopingside {
  transform: rotate(151deg);
  -o-transform: rotate(151deg);
  -moz-transform: rotate(151deg);
  -webkit-transform: rotate(151deg);
}

.cn-text li:nth-child(2) {
  left: 28em;
  top: 5.8em;
}

.cn-text li:nth-child(2) .slopingside {
  transform: rotate(151deg);
  -o-transform: rotate(151deg);
  -moz-transform: rotate(151deg);
  -webkit-transform: rotate(151deg);
}

.cn-text li:nth-child(3) {
  left: 30em;
  top: 16.8em;
}

.cn-text li:nth-child(3) .slopingside {
  transform: rotate(151deg);
  -o-transform: rotate(151deg);
  -moz-transform: rotate(151deg);
  -webkit-transform: rotate(151deg);
}

.cn-text li:nth-child(4) {
  left: 24.5em;
  top: 27.6em;
}

.cn-text li:nth-child(4) .linear {
  margin-top: -4.7em;
  margin-left: 6.4em;
}

.cn-text li:nth-child(4) .slopingside {
  transform: rotate(199deg);
  -o-transform: rotate(199deg);
  -moz-transform: rotate(199deg);
  -webkit-transform: rotate(199deg);
}

.cn-text li:nth-child(5) {
  left: -11em;
  top: 33.6em;
}

.cn-text li:nth-child(5) .linear {
  margin-top: -3em;
  margin-left: 2em;
}

.cn-text li:nth-child(5) .slopingside {
  transform: rotate(340deg);
  -o-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  margin-left: 17.8em;
  -webkit-transform: rotate(340deg);
}

.cn-text li:nth-child(6) {
  left: -18em;
  top: 24.6em;
}

.cn-text li:nth-child(6) .linear {
  margin-top: -3em;
  margin-left: 0em;
}

.cn-text li:nth-child(6) .slopingside {
  transform: rotate(340deg);
  -o-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  margin-left: 17.8em;
  -webkit-transform: rotate(340deg);
}

.cn-text li:nth-child(7) {
  left: -20em;
  top: 12.6em;
}

.cn-text li:nth-child(7) .linear {
  margin-top: -3.7em;
  margin-left: -1em;
}

.cn-text li:nth-child(7) .slopingside {
  transform: rotate(199deg);
  -o-transform: rotate(199deg);
  -moz-transform: rotate(199deg);
  margin-left: 17.8em;
  -webkit-transform: rotate(388deg);
}

.cn-text li:nth-child(8) {
  left: -14em;
  top: 2em;
}

.cn-text li:nth-child(8) .linear {
  margin-top: -3.7em;
  margin-left: -1em;
}

.cn-text li:nth-child(8) .slopingside {
  transform: rotate(199deg);
  -o-transform: rotate(199deg);
  -moz-transform: rotate(199deg);
  margin-left: 17.8em;
  -webkit-transform: rotate(388deg);
}

.cn-text li.showli .linear::after {
  width: 18em;
}

.cn-text li.showli .slopingside {
  width: 3em;
  opacity: 1;
}

.cn-text li.showli .linear {
  /* width: 3em; */
  opacity: 1;
}

.cn-arrow li {
  backface-visibility: hidden;
  pointer-events: auto;
}

.csstransforms .opened-nav li.cn-hasSelected a {
  background: #ff764a;
  background: -webkit-radial-gradient(transparent 34%, #ff764a 35%);
  background: -moz-radial-gradient(transparent 34%, #ff764a 35%);
  background: radial-gradient(transparent 34%, #ff764a 35%);

  /* -webkit-transform: skew(-46deg);
	-moz-transform: skew(-46deg) ;
	-ms-transform: skew(-46deg);
	transform: skew(-46deg); */
}

.csstransforms .opened-nav li.cn-arrow-hasSelected span {
    border-right: 43px solid #ff764a!important;

  /* -webkit-transform: skew(-46deg);
	-moz-transform: skew(-46deg) ;
	-ms-transform: skew(-46deg);
	transform: skew(-46deg); */
}
.cn-text svg{
  width:fit-content;
}
@media only screen and (max-width: 992px) {
  .component {
    position: relative;
    margin-top: 83px;
    margin-bottom: 3em;
    height: 30em;
  }
  .cn-text {
    display: none;
  }
}

@media only screen and (max-width: 620px) {
  .no-csstransforms li {
    width: 4em;
    height: 4em;
    line-height: 4em;
  }
}

@media only screen and (max-width: 500px) {
  .no-ccstransforms .cn-wrapper {
    padding: 0.5em;
  }

  .no-csstransforms .cn-wrapper li {
    width: 4em;
    height: 4em;
    font-size: 0.9em;
    line-height: 4em;
  }
}

@media only screen and (max-width: 480px) {
  .csstransforms .cn-wrapper {
    font-size: 0.68em;
  }

  .cn-button {
    font-size: 1em;
  }
}

@media only screen and (max-width: 420px) {
  .no-csstransforms .cn-wrapper li {
    width: 100%;
    height: 3em;
    line-height: 3em;
  }
}