*{
/*
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative
*/
}
.menu-open{
    transform: scale(1) !important;
}
#menu {
    outline: none;
    position: fixed;
    left: 0;
    right: 0;
/*    bottom: 40%;*/
    top: -75px;
    padding-top: 60px;
    width: 120px;
    height: 120px;
    margin: auto;
    max-width: 100%;
    z-index: 110;   /* Whatever needed to force to front (1 might do) */
    text-align: center;
    background: none;
    background-color: #e7711b;
    border-radius: 50%;
    border: solid #d8761b;;
    font-size: 25px;
/*    color: seagreen;*/
    
}
#menu-container * {
    padding: 0;
}
#menu-container {
    background-color: #777777;
    width: 400px;
    height: 400px;
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    margin: auto;
    top: -200px;
/*    top: -100px;*/
    border-radius: 50%;
    overflow: hidden;
    transform: scale(0.1);
    transition: all .3s ease;
}
#menu-container::after{
    content: "";
    width: 5px;
    height: 5px;
    background-color: crimson;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
#menu-container li {
    position: absolute;
    overflow: hidden;
    font-size: 1.5em;
    width: 230px;
    height: 230px;
    transform-origin: 100% 100%;
    margin-top: -30px;
    margin-left: -30px;
    transition:  background 1.5s ease, transform .8s ease;
}
#menu-container li:nth-child(odd) a{
/*    background: -webkit-linear-gradient(120deg, #ff7b00 0%,#666666 35%,#dd7718 70%);*/
    background: -webkit-linear-gradient(90deg, #666666 0%,#ff7b00 50%,#666666 100%);
/*    background: -webkit-linear-gradient(90deg, #777777 0%,#dd7718 50%,#777777 100%);*/
    background-color: #777777;
}
#menu-container li:nth-child(even) a{
    background: -webkit-linear-gradient(90deg, #666666 0%,#ff7b00 50%,#666666 100%);
/*        background: -webkit-linear-gradient(90deg, #777777 0%,#dd7718 50%,#777777 100%);*/
    background-color: #666666;
}
#menu-container li:not(.active) a:hover{
    background-position: 0px 140px;
    background-color: rgba(233, 116, 0, 0.98);
    color: #666666;
}
#menu-container li:not(.active) a:hover span{
    color: #666666;
}
#menu-container li a {
    transition: background-color .3s ease, transform .8s ease;
/*    background-color: grey;*/
    padding-top: 1.8em;
    position: absolute;
    width: 400px;
    height: 400px;
    top: 30px;
    left: 30px;
    text-align: center;
    border-radius: 50%;
    transform:  skew(-54deg) rotate(-72deg);
    transition:  background 1.5s ease;
}

#menu-container li:first-child {
  transform: rotate(324deg) skew(54deg);
/*  transform: rotate(0deg) skew(54deg);*/
}
#menu-container li:nth-child(2) {
  transform: rotate(288deg) skew(54deg);
/*  transform: rotate(36deg) skew(54deg);*/
}
#menu-container li:nth-child(3) {
  transform: rotate(252deg) skew(54deg);
/*  transform: rotate(72deg) skew(54deg);*/
}
#menu-container li:nth-child(4) {
  transform: rotate(216deg) skew(54deg);
/*  transform: rotate(108deg) skew(54deg);*/
}
#menu-container li:nth-child(5) {
  transform: rotate(180deg) skew(54deg);
/*  transform: rotate(144deg) skew(54deg);*/
}
#menu-container span{
    color: #e97400;
    transform: rotate(180deg);
}

.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;
  transform: scale(0.1);
  transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the navigation up */
.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-button {
  outline: none;
  border:none;
  background:none;
  color: white;
  text-align: Center;
  font-size: 2.0em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #111;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11
}
/*
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
  background-color: #222;
}
*/
.cn-overlay {
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
  transition: all .3s ease;
  z-index:2;
  pointer-events:none;
}

/* Class added to the overlay via JavaScript to show it when navigation is open */
.cn-overlay.on-overlay{
  pointer-events:auto;
  opacity:1;
}
.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  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: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  transform: skew(-50deg) rotate(-70deg) scale(1);
  transition: opacity 0.3s, color 0.3s;
}

.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}
/*
*/
.csstransforms .cn-wrapper li:first-child {
  transform: rotate(-10deg) skew(50deg);
}

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

.csstransforms .cn-wrapper li:nth-child(3) {
  transform: rotate(70deg) skew(50deg)
}

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

.csstransforms .cn-wrapper li:nth-child(5) {
  transform: rotate(150deg) skew(50deg);
}
.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}
/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}

/* 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: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus {
  position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
}
@media only screen and (max-device-width : 730px) {
/*
    #menu {
        position:fixed;
        top:0;
        left:0;
    }
*/
    #menu-container{
        width: 300px;
        height: 300px;
        top: -150px;
    }
     #menu-container li {
        width: 180px;
        height: 180px;
    }
    #menu-container li a {
        top: 0px;
        left: 0px;
    }
    
}
/*
.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;
}

.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;
}
*/
/*
@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;
  }
}*/

.container {
    overflow: hidden;
}