html {
  background:url(../img/Tile%20for%20Website.png) repeat;
}


.top-bar {
  background: #222;
  height: 9%;
  padding: 0 0.25em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.nav {
  background:#222;
  bottom: -6em;
  left: -10%;
  height: 10.5em;
  padding: 0 2.75em;
  position: fixed;
  -webkit-transform: rotate(10deg) translate3d(-5em, 10em, 0em);
  -ms-transform: rotate(10deg) translate3d(-5em, 10em, 0em);
  transform: rotate(10deg) translate3d(-5em, 10em,em);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 120%;
  z-index: 10;
  
}
.nav.open {
  -webkit-transform: rotate(10deg) translate3d(0, 0, 0);
  -ms-transform: rotate(10deg) translate3d(0, 0, 0);
  transform: rotate(10deg) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.nav__item {
  background: #fff;
  border: 0.3em solid #222;
  border-radius: 50%;
  color: #222;
  display: inline-block;
  height: 3em;
  margin: 0 0.2em;
  position: relative;
  top: -1.5em;
  text-decoration: none;
  text-align: center;
  -webkit-transform: rotate(-10deg) translate3d(-5em, 10em, 0em);
  -ms-transform: rotate(-10deg) translate3d(-5em, 10em, 0em);
  transform: rotate(-10deg) translate3d(-5em, 10em, 0em);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  width: 3em;

}
.open .nav__item:nth-child(1) {
  -webkit-transform: rotate(-10deg) translate3d(0, 0, 0);
  -ms-transform: rotate(-10deg) translate3d(0, 0, 0);
  transform: rotate(-10deg) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.open .nav__item:nth-child(2) {
  -webkit-transform: rotate(-10deg) translate3d(0, 0, 0);
  -ms-transform: rotate(-10deg) translate3d(0, 0, 0);
  transform: rotate(-10deg) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.open .nav__item:nth-child(3) {
  -webkit-transform: rotate(-10deg) translate3d(0, 0, 0);
  -ms-transform: rotate(-10deg) translate3d(0, 0, 0);
  transform: rotate(-10deg) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.open .nav__item:nth-child(4) {
  -webkit-transform: rotate(-10deg) translate3d(0, 0, 0);
  -ms-transform: rotate(-10deg) translate3d(0, 0, 0);
  transform: rotate(-10deg) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/*.open .nav__item:nth-child(5) {
  -webkit-transform: rotate(-10deg) translate3D(0, 0, 0);
  -ms-transform: rotate(-10deg) translate3D(0, 0, 0);
  transform: rotate(-10deg) translate3D(0, 0, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}*/
.nav__item:before {
  font-size: 1.5em;
  line-height: 1.75;
}

.top-bar__icon {
  cursor: pointer;
  display: inline-block;
  font-size: 6px;
  height: 6em;
  margin: 2%;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: 0.2s ease-in-out;
  -webkit-backface-visibility: hidden;
   -webkit-transform-style: preserve-3d;
  transition: 0.2s ease-in-out;
  width: 6em;
  -webkit-tap-highlight-color: transparent;
}
.top-bar__icon span {
  background: #fff;
  border-radius: 2em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 0.8em;
  position: absolute;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  width: 50%;
  -webkit-transform-style: preserve-3d;
}
.top-bar__icon span:nth-child(1) {
  border-radius: 2em 0 0 2em;
  left: 0;
  top: 1em;
}
.top-bar__icon span:nth-child(2) {
  border-radius: 0 2em 2em 0;
  top: 1em;
  right: 0;
}
.top-bar__icon span:nth-child(3) {
  left: 0;
  top: 2.6em;
  width: 100%;
}
.top-bar__icon span:nth-child(4) {
  border-radius: 2em 0 0 2em;
  left: 0;
  top: 4.2em;
}
.top-bar__icon span:nth-child(5) {
  border-radius: 0 2em 2em 0;
  right: 0;
  top: 4.2em;
}
.top-bar__icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg) translate(0.8em);
  -ms-transform: rotate(45deg) translate(0.8em);
  transform: rotate(45deg) translate(0.8em);
  -webkit-transform-style: preserve-3d;
}
.top-bar__icon.open span:nth-child(2) {
  -webkit-transform: rotate(-45deg) translate(-0.9em);
  -ms-transform: rotate(-45deg) translate(-0.9em);
  transform: rotate(-45deg) translate(-0.9em);
  -webkit-transform-style: preserve-3d;
}
.top-bar__icon.open span:nth-child(3) {
  opacity: 0;
}
.top-bar__icon.open span:nth-child(4) {
  -webkit-transform: rotate(-45deg) translate(0.8em);
  -ms-transform: rotate(-45deg) translate(0.8em);
  transform: rotate(-45deg) translate(0.8em);
  -webkit-transform-style: preserve-3d;
}
.top-bar__icon.open span:nth-child(5) {
  -webkit-transform: rotate(45deg) translate(-0.9em);
  -ms-transform: rotate(45deg) translate(-0.9em);
  transform: rotate(45deg) translate(-0.9em);
  -webkit-transform-style: preserve-3d;
}
@media only screen and (min-device-width: 720px) and (max-device-width: 720px) and (orientation:portrait) {
	.top-bar { 
		  height: 95px;		  
	}
	.nav {
  		bottom: -6em;
		left: -10%;
	    height: 15.5em;
		-webkit-transform: rotate(10deg) translate3d(-5em, 15em, 0em);
  		-ms-transform: rotate(10deg) translate3d(-5em, 15em, 0em);
	    transform: rotate(10deg) translate3d(-5em, 15em, 0em);
	    padding: 0 4.75em;  
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	.top-bar__icon { 		
		  display: inline-block;
		  margin: 2%;
		  font-size: 12px;		 		  
	}
	.nav__item {  		
			 
	}
	.nav__item:before {
 		 font-size: 3em;
		 line-height: 1.55;
	}	
	.nav__item {
	  border: 0.5em solid #222;
	  border-radius: 50%;
	  height: 5em;
	  margin: 0 0.5em;
  	  top: -2.5em;
	  width: 5em;
	  -webkit-transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  -ms-transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  -webkit-transform-style: preserve-3d;
	}
}
@media only screen and (min-device-width: 720px) and (max-device-width: 720px) and (orientation:landscape) {
	.top-bar { 
		  height: 95px;		  
	}
	.nav {
  		bottom: -6em;
		left: -10%;
	    height: 15.5em;
		-webkit-transform: rotate(10deg) translate3d(-5em, 15em, 0em);
  		-ms-transform: rotate(10deg) translate3d(-5em, 15em, 0em);
	    transform: rotate(10deg) translate3d(-5em, 15em, 0em);
	    padding: 0 4.75em;  
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	.top-bar__icon { 		
		  display: inline-block;
		  margin: 2%;
		  font-size: 12px;		 		  
	}
	.nav__item {  		
			 
	}
	.nav__item:before {
 		 font-size: 3em;
		 line-height: 1.55;
	}	
	.nav__item {
	  border: 0.5em solid #222;
	  border-radius: 50%;
	  height: 5em;
	  margin: 0 0.5em;
  	  top: -2.5em;
	  width: 5em;
	  -webkit-transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  -ms-transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  transform: rotate(-10deg) translate3d(-5em, 15em, 0em);
	  -webkit-transform-style: preserve-3d;
	}
}

@media only screen and (min-width: 480px) and (max-width: 719px) and (orientation:landscape){	
	.top-bar { 
		  height: 15%;		  
	}
}
@media only screen and (min-width: 320px) and (max-width: 479px) and (orientation:landscape){	
	.top-bar { 
		  height: 15%;		  
	}
}