@import url(https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

html,
body {
  height: 100%;
}

/*body {
  background: #f0606000;
  color: #f0606000;
}*/

.csstransforms .cn-wrapper {
  font-size: 1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
/*  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;*/
}

.csstransforms .opened-nav {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cn-overlay {
  width: 100%;
  height: 100%;
  background-color: #000000d6;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 2;
}

.cn-overlay.on-overlay {
  visibility: visible;
  opacity: 10;
}

.cn-button {
  border: none;
  background: none;
  color: #fff;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #213e7b;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  border-radius: none;
  cursor: pointer;
  z-index: 11;

}

.cn-button:hover,
.cn-button:active,
.cn-button:focus {
  color: #f9f9ff;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
/*  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;*/
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -6.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
/*  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;*/
}
.csstransforms .cn-wrapper li a img{
  max-height: 30px;
  min-height: 10px;
  min-width: 10px;
  max-width: 30px; 
}

.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(-4deg) skew(50deg);
  -ms-transform: rotate(-4deg) skew(50deg);
  -moz-transform: rotate(-4deg) skew(50deg);
  transform: rotate(-4deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(50deg);
  -ms-transform: rotate(30deg) skew(50deg);
  -moz-transform: rotate(30deg) skew(50deg);
  transform: rotate(30deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(3) {
  -webkit-transform: rotate(58deg) skew(50deg);
  -ms-transform: rotate(58deg) skew(50deg);
  -moz-transform: rotate(58deg) skew(50deg);
  transform: rotate(58deg) skew(50deg)
}

.csstransforms .cn-wrapper li:nth-child(4) {
  -webkit-transform: rotate(87deg) skew(50deg);
  -ms-transform: rotate(87deg) skew(50deg);
  -moz-transform: rotate(87deg) skew(50deg);
  transform: rotate(87deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(5) {
  -webkit-transform: rotate(118deg) skew(50deg);
  -ms-transform: rotate(118deg) skew(50deg);
  -moz-transform: rotate(118deg) skew(50deg);
  transform: rotate(118deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(6) {
  -webkit-transform: rotate(148deg) skew(50deg);
  -ms-transform: rotate(148deg) skew(50deg);
  -moz-transform: rotate(148deg) skew(50deg);
  transform: rotate(148deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #567dcd;

/*  background-color: rgba(0, 0, 0, 0.5);*/
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #567dcd;
 /* background-color: rgba(0, 0, 0, 0.5);*/
}

/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #567dcd;
 /* background-color: rgba(0, 0, 0, 0.5);*/
}


/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
/*  background-color: #213e7b;*/
  background-color: #213e7b;
}
.csstransforms .cn-wrapper li:not(.active) a:focus
{
    position:fixed;
}
 

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

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

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  font-size: 1.3em;
  border-right: 1px solid #ddd;
}

.no-csstransforms .cn-wrapper li a:last-child {
  border: none;
}

.no-csstransforms .cn-wrapper li a:hover,

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

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}
  
.no-csstransforms .cn-wrapper {
  font-size: 1em;
  height: 5em;
  width: 25.15em;
  bottom: 0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left: 50%;
  border: 1px solid #ddd;
}

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

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

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}

@media screen and (max-width:320px) {
  .no-csstransforms .cn-wrapper {
    width: 15.15px;
    margin-left: -7.5em;
  }

  .no-csstransforms .cn-wrapper li {
    height: 3em;
    width: 3em;
  }
}

/*############### pulse animation ##################*/

/*html,body{background-color:#2b2a2a;}*/

/*.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
}*/

.cn-button {
  /* position: relative;
  width: 100px;
  height: 100px;*/
  border: none;
  box-shadow: 0 0 0 0 #ffc107;
  border-radius: 50%;
  background-color: #213e7b;
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  font-size: 20px;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: p  se 2.25s infinite cubic-bezier(0.4, 0, 1, 1);
  }
.cn-button:hover 
{
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}


/*############### pulse wrapper ##################*/

/*html,body{background-color:#2b2a2a;}*/

/*.container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0;
}*/

.cn-wrapper {

 /* position: relative;
  width: 100px;
  height: 100px;*/
  border: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  border-radius: 50%;
  background-color: #213e7b;
  background-size:cover;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 2.25s infinite cubic-bezier(0.4, 0, 1, 1);
}
.cn-button:focus 
{
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}