.nav-main {
	 align-items: center;
	 display: flex;
	 justify-content: center;
	 position: fixed;
	 transition: all 0.5s ease-in-out;
	 width: 100%;
	 background-image: linear-gradient(to right, rgba(0, 153, 255, 1) 0%, rgba(0, 153, 255, 1) 50%, rgba(0, 153, 255, .7));
	 clip-path: polygon(0 0, 100% 0, 100% 20%, 0 0);
	 height:50%;
	 min-height:400px;
	 opacity:0;
	 top:100px;
	 z-index:60;
}
#main-navigation-toggle:checked ~ .nav-main {
	 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	 top:100px;
	 opacity:1;
}
.mm {
    font-size:18px;
    color: rgba(255,255,255, 0);
    position:absolute;
    transition: all .5s;
    top:70px;
    transform: translateY(-100px);
    letter-spacing:2px;
}
.nav-main .menu__item {
	 opacity: 0;
	 transform: translateY(-100px); /* Directions buttons appear from*/
	 transition: opacity var(--td) var(--te), transform var(--td) var(--te);
}
.nav-main .subMenu, .nav-main .tdArrow1{
	 opacity: 0;
	 transform: translateX(-50px); /* Directions buttons appear from*/
	 transition: opacity var(--td) var(--te), transform var(--td) var(--te);
}

#main-navigation-toggle {
	 opacity: 0;
	 position: fixed;
	 top: 100%;
}
#main-navigation-toggle ~label {
	 cursor: pointer;
	 position: fixed;
	 right: 0;
	 top: 0;
	 width:160px;
	 height:100px;
	 display: flex;
     align-items: center;
     margin:auto;
     justify-content:flex-end;
     padding-right:20px;
     text-align:center;
	 font-size:17px;
	 line-height:18px;
	 color:#fff;
	 letter-spacing:2px;
	 z-index: 100;
}
#main-navigation-toggle ~label p {
    align-self:center;
}
#main-navigation-toggle:hover ~ label span::before, #main-navigation-toggle:hover ~ label span::after{
	 background-color: var(--color-primary);
}
#main-navigation-toggle ~ label span {
	 display: block;
	 height: 20px;
	 padding: 20px;
	 position: relative;
	 display:inline-block;
	 transition: transform calc(var(--td) * 3) var(--te);
	 width: 20px;
	 top:0;
}
#main-navigation-toggle ~ label span::before, #main-navigation-toggle ~ label span::after {
	 background-color: #fff;
	 bottom: 0;
	 content: '';
	 height: 4px;
	 left: 0;
	 margin: auto;
	 position: absolute;
	 right: 0;
	 transition: transform calc(var(--td) * 3) var(--te);
	 top: 0px;
	 width: 30px;
}
#main-navigation-toggle ~ label span::before {
	 transform: rotate(0) translateY(-100%);
}
#main-navigation-toggle ~ label span::after {
	 transform: rotate(0) translateY(100%);
}
#main-navigation-toggle:checked ~ label span::before {
	 transform: rotate(45deg);
}
#main-navigation-toggle:checked ~ label span::after {
	 transform: rotate(-45deg) 
}

#main-navigation-toggle:checked ~ .nav-main .menu__item {
	 opacity: 1;
	 transform: translateX(0);
	 transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
}
#main-navigation-toggle:checked ~ .nav-main .trSub{
    border-top:1px solid rgba(255,255,255, .3);
    border-bottom: 1px solid rgba(255,255,255, .3);
    transition-delay: calc(var(--td) * 2 * (2 * .5));
    transition-duration: 1s;
}
#main-navigation-toggle:checked ~ .nav-main .subMenu  {
	 opacity: 1;
	 transform: translateX(0);
	 transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
	 transition-delay: calc(var(--td) * 2 * (2 * 1));
	 transition-duration: 1s;
}
#main-navigation-toggle:checked ~ .nav-main .mm  {
    color: rgba(255,255,255, 0.3);
    transform: translateX(0);
}
#main-navigation-toggle:checked ~ .nav-main .tdArrow1  {
	 opacity: 1;
	 transform: translateX(0);
	 transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te);
	 transition-delay: calc(var(--td) * 2 * (2 * 1.2));
	 transition-duration: 1s;
}
#main-navigation-toggle:checked ~ .nav-main .menu__item:nth-child(1) {
	 transition-delay: calc(var(--td) * 2 * (2 * 0.25));
	 z-index: -1;
}
#main-navigation-toggle:checked ~ .nav-main .menu__item:nth-child(2) {
	 transition-delay: calc(var(--td) * 2 * (3 * 0.25));
	 z-index: -2;
}
#main-navigation-toggle:checked ~ .nav-main .menu__item:nth-child(3) {
	 transition-delay: calc(var(--td) * 2 * (4 * 0.25));
	 z-index: -3;
}
#main-navigation-toggle:checked ~ .nav-main .menu__item:nth-child(4) {
	 transition-delay: calc(var(--td) * 2 * (5 * 0.25));
	 z-index: -4;
}
#main-navigation-toggle:checked ~ .nav-main .menu__item:nth-child(5) {
	 transition-delay: calc(var(--td) * 2 * (6 * 0.25));
	 z-index: -5;
}
.menu {
	 position: relative;
	 text-align: left;
	 z-index: 100;
}
.menu__item {
	 font-family: var(--font-family-secondary);
	 font-size: 26px;
	 line-height:50px;
	 letter-spacing:2px;
	 display: block;
	 position: relative;
	 max-width:200px;
}
.menu__link:hover::before, .menu__link:hover::after {
	 transform: translateX(calc(100% - 0.5rem));
	 transition-duration: calc(var(--td) * 3);
}
.menu__link:hover .menu__link::after {
	 transition-delay: calc(var(--td) / 2);
}
.menu__link {
	 color: var(--color-dark);
	 display: inline-block;
	 font-weight: normal;
	 overflow: hidden;
	 position: relative;
	 text-decoration: none;
	 transition: color var(--td) var(--te), opacity var(--td) var(--te), 
	 transform var(--td) var(--te);
}
.menu__link::before, .menu__link::after {
	 content: '';
	 background-color: var(--color-light);
	 height: 100%;
	 left: 0;
	 padding:10px;
	 position: absolute;
	 transform: translateX(-110%);
	 transform-origin: 0 50%;
	 transition: transform 0s var(--te);
	 width: 110%;
	 z-index: -1;
}

.menu__link:hover  {
	 color: var(--color-secondary);
	 opacity: 1;
	 transform: translate(0, 0);
	 transition-duration: calc(var(--td) * 3);
}

.mainTable {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    border-spacing:0; 
    border-collapse: collapse;
    transition:all .5s;
}
.trSub{
    border-top:1px solid rgba(255,255,255, 0);
    border-bottom: 1px solid rgba(255,255,255, 0);
}
.trThin {
    height:10%;
}
.trMiddle {
    height:80%;
}
.tdArrow {
    width:30px;
    overflow:hidden;
    color:rgba(255,255,255, .3);
}
.tdArrow1 {
    border-top: 10px solid transparent;
    border-left: 30px solid rgba(255,255,255, .3);
    border-bottom: 10px solid transparent;
    height:10px;
}
.tdRight {
    padding-left:10px;
    
}
.trSub {
    height:20%;
    
}
.subMenu {
    font-size:40px;
    text-decoration: none;
    width:50%;
    color:rgba(255,255,255, 0.6);
    text-align:right;
    align-items:center;
    margin:auto;
    padding-right:40px;
    transition:all .5s;
    border-right: 1px solid rgba(255,255,255, .3);
    overflow:hidden;
}
.subMenu a {
    font-size:2.5vw;
    text-decoration: none;
    color:rgba(255,255,255, 0.6);
    transition:all .5s;
}
.subMenu a:hover {
    color:rgba(255,255,255, 1);
    transition:all .5s;
}

.subSpan {
    font-size:1vw;
    float:bottom;
    margin-right:20px;
}

@media screen and (max-width: 1000px) {
.menu > .menu__item {
	 font-family: var(--font-family-secondary);
	 font-size: 30px;
	 line-height:50px;
	 letter-spacing:4px;
}
 .subMenu a {
	 font-family: var(--font-family-secondary);
	 font-size: 3vw;
}
.subSpan {
    display:none;
}
}
@media screen and (max-width: 600px) {
    .subMenu, .tdArrow {
        display:none;
        width:100%;
    }
    .mainTable {
        width:100%;
    }
    .menu {
        width:100%;
        text-align:right;
    }
    .menu__item {
        text-align:center;
        min-width:100%;
    }
    .trRight{
        text-align:center;
        width:100%;
    }
    .mm {
        display:none;
    }
    
}