body {
    background-size: cover !important;
    transition: background 300ms ease-in 200ms;;
	 background: url(background.jpg) no-repeat center center fixed; ;
	 font-family: 'Comfortaa', sans-serif;
	 color: #fff;
	 overflow: auto;
}
 .main-content {
	 max-width: 700px;
	 margin: 5em auto 2em;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
}
 h1 {
	 width: 100%;
	 margin: 0 auto 1.5em;
	 font-size: 30px;
	 text-align: center;
	 color: #fff;
	 font-weight: 700;
}
 h1 small {
	 text-transform: none;
	 display: block;
	 margin: 20px 0;
	 font: 400 20px 'Comfortaa', sans-serif;
	 color: #999;
}
 .line, .box {
	 transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .line {
	 height: 8px;
	 width: 45px;
	 background: #fff;
	 margin: 5px auto;
}
 .box {
	 width: 10px;
	 height: 10px;
	 background: #fff;
	 margin: 3px 3px;
	 display: inline-block;
}
 .circle {
	 width: 12px;
	 height: 12px;
	 margin: 3px;
	 background: #fff;
	 border-radius: 50%;
	 display: block;
}
 .menu__wrapper {
     width:4.5rem;
     margin:1rem 1rem;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 flex: 1;
}
 .menu__wrapper span{
     font-size:1em;
     display: block;
     width:100%;
}
 .menu__wrapper > div {
	 width: 6rem;
	 height: 6rem;
	 padding: 0.5rem;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 align-items: center;
	 cursor: pointer;
}
 .menu__wrapper > div:hover, .menu__wrapper > div:focus {
	 outline: none;
}
 .menu__wrapper > span {
	 display: inline-block;
	 text-align: center;
	 line-height: 1.2;
	 padding: 20px;
	 margin-top: auto;
}
 .menu__item--hamburger:hover .line:nth-child(1), .menu__item--hamburger:focus .line:nth-child(1) {
	 transform: rotate(45deg) translate(12px, 12px);
}
 .menu__item--hamburger:hover .line:nth-child(2), .menu__item--hamburger:focus .line:nth-child(2) {
	 visibility: hidden;
}
 .menu__item--hamburger:hover .line:nth-child(3), .menu__item--hamburger:focus .line:nth-child(3) {
	 transform: rotate(-45deg) translate(15px, -16px);
}
 .menu__item--doner {
	 flex-direction: column;
}
 .menu__item--doner .line:nth-child(2) {
	 width: 32px;
}
 .menu__item--doner .line:nth-child(3) {
	 width: 20px;
}
 .menu__item--doner:hover .line:nth-child(1), .menu__item--doner:focus .line:nth-child(1) {
	 transform: rotate(45deg) translate(12px, 12px);
}
 .menu__item--doner:hover .line:nth-child(2), .menu__item--doner:focus .line:nth-child(2) {
	 width: 20px;
	 transform: rotate(-45deg) translate(-12px, -1.5px);
}
 .menu__item--doner:hover .line:nth-child(3), .menu__item--doner:focus .line:nth-child(3) {
	 transform: rotate(-45deg) translate(25px, -14px);
}
 .menu__item--bento:hover .box:nth-child(2), .menu__item--bento:focus .box:nth-child(2), .menu__item--bento:hover .box:nth-child(4), .menu__item--bento:focus .box:nth-child(4), .menu__item--bento:hover .box:nth-child(6), .menu__item--bento:focus .box:nth-child(6), .menu__item--bento:hover .box:nth-child(8), .menu__item--bento:focus .box:nth-child(8) {
	 opacity: 0;
}
 .menu__item--kebab {
	 flex-direction: column;
	 position: relative;
	 transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .menu__item--kebab .circle:nth-child(4), .menu__item--kebab .circle:nth-child(5) {
	 position: absolute;
	 opacity: 0;
	 top: 50%;
	 margin-top: -6px;
	 left: 50%;
}
 .menu__item--kebab .circle:nth-child(4) {
	 margin-left: -25px;
}
 .menu__item--kebab .circle:nth-child(5) {
	 margin-left: 13px;
}
 .menu__item--kebab:hover, .menu__item--kebab:focus {
	 transform: rotate(45deg);
}
 .menu__item--kebab:hover .circle, .menu__item--kebab:focus .circle {
	 opacity: 1;
}
 .menu__item--meatball {
	 transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
 .menu__item--meatball:hover, .menu__item--meatball:focus {
	 transform: rotate(45deg);
}
 .wide_button {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 border: 1px solid white;
	 cursor: pointer;
	 width: 80%;
	 padding:10px 40px;
	 border-radius:10px;
	 background-color:rgba(0,0,0,0.2);
	 transition: all 0.4s;
	 
}
.wide_button:hover{
	color:#333;
	transform: translateY(-4px);
	transform: scale(1.05);
	background-color:rgba(255,255,255,0.2);
}
.stdBorder{
    width: 70em;
    max-width:98%;
	background-color:rgba(0,0,0,0.2);
	border-radius:20px;
}
.footBorder{
    transition: all 0.4s;
    cursor: pointer;
    margin: 0 1em;
    padding: 0.5em 1em;
	background-color:rgba(0,0,0,0.2);
	border-radius:20px;
}
.footBorder:hover{
	transform: translateY(-4px);
	transform: scale(1.05);
}

 aside.context {
	 text-align: center;
	 color: #fff;
}
 aside.context a {
	 text-decoration: none;
	 color: #fff;
	 padding: 3px 0;
	 border-bottom: 1px dashed;
}
 aside.context .explanation {
	 max-width: 700px;
	 margin: 6em auto 0;
}
.footer{
     display: flex;
     justify-content: center;
}
 footer {
	 text-align: center;
	 margin: 4em auto;
	 width: 100%;
}
 footer a {
	 text-decoration: none;
	 display: inline-block;
	 /*width: 45px;*/
	 /*height: 45px;*/
	 /*border-radius: 50%;*/
	 background: transparent;
	 /*border: 1px dashed #fff;*/
	 color: #fff;
	 margin: 5px;
}
 footer a:hover {
	 background: rgba(255, 255, 255, 0.1);
}
 footer a .icons {
	 margin-top: 12px;
	 display: inline-block;
	 font-size: 20px;
}