:root { /* CSS variables declared in the global scope - Can be overridden in the main CSS */
  --nav-icon-width: 40px; /* values tested successfully in the range [20px,100px] */
  --nav-icon-bar-thickness: 0.4; /* value between 0 and 1 to customize a single icon bar height */
  --nav-icon-colour: #cdcdcd;
}

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: var(--nav-icon-width);
  height: calc(var(--nav-icon-width)*0.75); /* W/H aspect ratio is 4/3 */
  margin: auto;
  position: relative;
  webkit-transform: rotate(0deg);
  moz-transform: rotate(0deg);
  o-transform: rotate(0deg);
  transform: rotate(0deg);
  webkit-transition: .5s ease-in-out;
  moz-transition: .5s ease-in-out;
  o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
/*  background-color: rgb(255,0,0,0.4); /* activate for debug */
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: calc(var(--nav-icon-width)*0.75/5*var(--nav-icon-bar-thickness)); /* An Icon's single bar's height is equal to H/5 where H is icon's height. This quantity is scaled by a factor which modifies the single bar's height */
  width: 100%;
  background: var(--nav-icon-colour);
  border-radius: calc(var(--nav-icon-width)*0.75/5);
  opacity: 1;
  left: 0;
  webkit-transform: rotate(0deg);
  moz-transform: rotate(0deg);
  o-transform: rotate(0deg);
  transform: rotate(0deg);
  webkit-transition: .25s ease-in-out;
  moz-transition: .25s ease-in-out;
  o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
/*  background-color: rgb(255,255,0,0.4); /* activate for debug */
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: calc(var(--nav-icon-width)*0.75/5*var(--nav-icon-bar-thickness)); /* height of one single bar */
  width: 50%;
  background: var(--nav-icon-colour);
  opacity: 1;
  webkit-transform: rotate(0deg);
  moz-transform: rotate(0deg);
  o-transform: rotate(0deg);
  transform: rotate(0deg);
  webkit-transition: .25s ease-in-out;
  moz-transition: .25s ease-in-out;
  o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
/*  background-color: rgb(255,255,0,0.4); /* activate for debug */
}

/* ---------- Icon 1 ---------- */

/* INSTRUCTIONS: paste this code into the html for one icon

<div id="nav-icon1">
  <span></span><span></span><span></span>
</div>

*/

#nav-icon1 span:nth-child(1) {
  top: calc(0*var(--nav-icon-width)*0.75/5); /* distance from top of the top bar */
}

#nav-icon1 span:nth-child(2) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
}

#nav-icon1 span:nth-child(3) {
  top: calc(4*var(--nav-icon-width)*0.75/5); /* distance from top of the bottom bar */
}

#nav-icon1.open span:nth-child(1) {
  top: calc(2*var(--nav-icon-width)*0.75/5);
  webkit-transform: rotate(135deg);
  moz-transform: rotate(135deg);
  o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: calc(-1*var(--nav-icon-width));
}

#nav-icon1.open span:nth-child(3) {
  top: calc(2*var(--nav-icon-width)*0.75/5);
  webkit-transform: rotate(-135deg);
  moz-transform: rotate(-135deg);
  o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/* ---------- Icon 2 ---------- */

/* INSTRUCTIONS: paste this code into the html for one icon

<div id="nav-icon2">
  <span></span><span></span><span></span><span></span><span></span><span></span>
</div>

*/

#nav-icon2 {
}

#nav-icon2 span:nth-child(even) {
  left: 50%;
  border-radius: 0 calc(var(--nav-icon-width)*0.75/5) calc(var(--nav-icon-width)*0.75/5) 0;
}

#nav-icon2 span:nth-child(odd) {
  left: 0;
  border-radius: calc(var(--nav-icon-width)*0.75/5) 0 0 calc(var(--nav-icon-width)*0.75/5);
}

#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  top: calc(0*var(--nav-icon-width)*0.75/5); /* distance from top of the top bar */
}

#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
}

#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  top: calc(4*var(--nav-icon-width)*0.75/5); /* distance from top of the bottom bar */
}

#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  webkit-transform: rotate(45deg);
  moz-transform: rotate(45deg);
  o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  webkit-transform: rotate(-45deg);
  moz-transform: rotate(-45deg);
  o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
  left: calc(var(--nav-icon-width)/12); /* this offset is calculated as 1/12 of the total icon width */
  top: calc(7*var(--nav-icon-width)*0.75/45); /* the measure is calculated as 7/45 of the total icon height */
}

#nav-icon2.open span:nth-child(2) {
  left: calc(50% - var(--nav-icon-width)/12); /* the offset is calculated as 1/12 of the total icon width */
  top: calc(7*var(--nav-icon-width)*0.75/45); /* the measure is calculated as 7/45 of the total icon height */
}

#nav-icon2.open span:nth-child(3) {
  left: -50%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
  left: 100%;
  opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
  left: calc(var(--nav-icon-width)/12); /* this offset is calculated as 1/12 of the total icon width */
  top: calc(29*var(--nav-icon-width)*0.75/45); /* the measure is calculated as 29/45 of the total icon height */
}

#nav-icon2.open span:nth-child(6) {
  left: calc(50% - var(--nav-icon-width)/12); /* the offset is calculated as 1/12 of the total icon width */
  top: calc(29*var(--nav-icon-width)*0.75/45); /* the measure is calculated as 29/45 of the total icon height */
}

/* ---------- Icon 3 ---------- */

/* INSTRUCTIONS: paste this code into the html for one icon

<div id="nav-icon3">
  <span></span><span></span><span></span><span></span>
</div>

*/

#nav-icon3 span:nth-child(1) {
  top: calc(0*var(--nav-icon-width)*0.75/5); /* distance from top of the top bar */
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
}

#nav-icon3 span:nth-child(4) {
  top: calc(4*var(--nav-icon-width)*0.75/5); /* distance from top of the bottom bar */
}

#nav-icon3.open span:nth-child(1) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  webkit-transform: rotate(45deg);
  moz-transform: rotate(45deg);
  o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  webkit-transform: rotate(-45deg);
  moz-transform: rotate(-45deg);
  o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
  width: 0%;
  left: 50%;
}

/* ---------- Icon 4 ---------- */

/* INSTRUCTIONS: paste this code into the html for one icon

<div id="nav-icon4">
  <span></span><span></span><span></span>
</div>

*/

#nav-icon4 {
}

#nav-icon4 span:nth-child(1) {
  top: calc(0*var(--nav-icon-width)*0.75/5); /* distance from top of the top bar */
  webkit-transform-origin: left center;
  moz-transform-origin: left center;
  o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: calc(2*var(--nav-icon-width)*0.75/5); /* distance from top of the central bar */
  webkit-transform-origin: left center;
  moz-transform-origin: left center;
  o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: calc(4*var(--nav-icon-width)*0.75/5); /* distance from top of the bottom bar */
  webkit-transform-origin: left center;
  moz-transform-origin: left center;
  o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  webkit-transform: rotate(45deg);
  moz-transform: rotate(45deg);
  o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: calc(-1*var(--nav-icon-width)*0.75/15); /* this offset is calculated as -1/15 of the total icon height */
  left: calc(4*var(--nav-icon-width)/30); /* this offset is calculated as 8/30 of the total icon width */
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  webkit-transform: rotate(-45deg);
  moz-transform: rotate(-45deg);
  o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: calc(39*var(--nav-icon-width)*0.75/45); /* the measure is calculated as 39/45 of the total icon height */
  left: calc(4*var(--nav-icon-width)/30); /* this offset is calculated as 8/30 of the total icon width */
}