.menu {
padding:0;
margin:0;
width:100%;
min-height:100%;
position:relative;
line-height:70px;
font-size:14px;
 
}

.menu a.active-parent {
 
color:#ffbf05;
}

.menu > ul {
margin:0;
padding:0
}

.menu > ul > li > a {
padding:0 16px;
}

.menu__item {
position:relative;
border-bottom:1px solid rgba(255,255,255,0.3);
line-height:50px;
position:relative;
list-style:none
}

.menu__item a .arrow {
    transform: rotate(-45deg);
    width: 85px;
    text-align: center;
    position: absolute;
    right: -87px;
    top:-2px;
    display: inline-block;
    transition: transform .3s;
}

.menu__item a .arrow:before {
border:solid #ffbf05;
border-width:0 2px 2px 0;
display:inline-block;
padding:2px;
content:''
}

.menu__item a .arrow.open {
transform:rotate(45deg)
}

.menu__item a {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    transition: all .3s;
    display: block;
    position: relative;
    font-weight: 300!important;
    transform: translate(0,0)!important;
    /* background: #00e5e2; */
    color: #ccc8c8;
    text-transform: uppercase;
outline: none;
}

.menu__item a:hover {
background: rgb(255 255 255);
    color: #000000;
    text-decoration: none;
}

.menu__item a:hover .arrow:before {
border:solid #ffbf05;
border-width:0 2px 2px 0
 
}

.menu__link {
font-weight:300!important;
transform:translate(0,0)!important
}

.menu__sub-menu {
margin:0;
padding:0;
text-align:left;
pointer-events:none;
top:0;
display:none;
opacity:1;
visibility:visible;
position:relative
}

.menu__sub-menu a .arrow {
display:inline-block;
margin-left:10px;
transform:rotate(-45deg)
}

.menu__sub-menu a .arrow:before {
border:solid #fff;
border-width:0 2px 2px 0;
display:inline-block;
padding:2px;
content:''
}

.menu__sub-menu.open {
visibility:visible;
opacity:1;
display:block;
pointer-events:auto;
transform:translate(0,0);
 
}

.menu__sub-menu__item {
display:block;
width:200px;
position:relative;
min-width:100%
}

.menu__sub-menu__item a {
display:block;
font-size:17px;
font-weight:400;
text-align:left;
    background:#000000;
    color:#FFFFFF;
}

.menu__sub-menu__item a:hover {
background: #ffffff;
    color: #000;
}

.menu__sub-menu__item a:hover .arrow:before {
border:solid #fff;
border-width:0 2px 2px 0
}

.menu__sub-menu .menu__sub-menu {
top:0;
left:0;
position:relative
}

.menu__sub-menu .menu__sub-menu.open {
visibility:visible;
 
transform:translate(0,0)
}

.menu__sub-menu > li > a {
padding-left:2em
}

.menu__sub-menu li ul a {
padding-left:3em
}

.menu__sub-menu li ul li ul a {
padding-left:4em
}

.menu__sub-menu li ul li ul li ul a {
padding-left:5em
}

.menu-button {
padding:5px;
background:linear-gradient(-90deg,#ffffff,#ffffff);
border:none;
cursor:pointer;
transition:0;
border-radius:2px;
width:auto;
position:absolute;
top:12px;
right:22px;
    z-index: 99;
}

.burger-icon {
position:relative;
margin-top:10px;
margin-bottom:10px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.burger-icon,.burger-icon::before,.burger-icon::after {
display:block;
width:30px;
height:4px;
background-color:#000;
outline:1px solid transparent;
-webkit-transition-property:background-color,-webkit-transform;
-moz-transition-property:background-color,-moz-transform;
-o-transition-property:background-color,-o-transform;
transition-property:background-color,transform;
-webkit-transition-duration:.3s;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
transition-duration:.3s
}

.burger-icon::before,.burger-icon::after {
position:absolute;
content:""
}

.burger-icon::before {
top:-10px
}

.burger-icon::after {
top:10px
}

.menu.open .burger-icon {
position:relative;
margin-top:10px;
margin-bottom:10px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.menu.open .burger-icon,.menu.open .burger-icon::before,.menu.open .burger-icon::after {
display:block;
width:30px;
height:4px;
background-color:#222;
outline:1px solid transparent;
-webkit-transition-property:background-color,-webkit-transform;
-moz-transition-property:background-color,-moz-transform;
-o-transition-property:background-color,-o-transform;
transition-property:background-color,transform;
-webkit-transition-duration:.3s;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
transition-duration:.3s
}

.menu.open .burger-icon::before,.menu.open .burger-icon::after {
position:absolute;
content:""
}

.menu.open .burger-icon::before {
top:-10px
}

.menu.open .burger-icon::after {
top:10px
}

.menu-button.is-active .burger-icon {
background-color:transparent
}

.menu-button.is-active .burger-icon::before {
-webkit-transform:translateY(10px) rotate(45deg);
-moz-transform:translateY(10px) rotate(45deg);
-ms-transform:translateY(10px) rotate(45deg);
-o-transform:translateY(10px) rotate(45deg);
transform:translateY(10px) rotate(45deg)
}

.menu-button.is-active .burger-icon::after {
-webkit-transform:translateY(-10px) rotate(-45deg);
-moz-transform:translateY(-10px) rotate(-45deg);
-ms-transform:translateY(-10px) rotate(-45deg);
-o-transform:translateY(-10px) rotate(-45deg);
transform:translateY(-10px) rotate(-45deg)
}

html,body {
height:100%;
min-height:100%;
margin:0;
font-family:"Slabo+27px",sans-serif;
font-weight:300;
}

 
.menu-content {
position:relative;
height:100%;
transform:translate(-100%,0);
width:0;
overflow:hidden;
z-index:1
}

.menu-content.open {
transform:translate(0,0);
transition:all .5s;
transition-timing-function:cubic-bezier(0.62,0.04,0.82,0.13);
width:75%;
box-shadow:5px 5px 15px 0 rgba(0,0,0,0.1);
min-height:100%!important
}

.menu-content.close {
transform:translate(-100%,0);
transition:all .5s;
transition-timing-function:cubic-bezier(0.62,0.04,0.82,0.13);
text-shadow:none;
width:0
}

.page-content {
position:relative;
width:80%;
padding:25% 10%
}

.page-content__text {
padding:30px;
text-align:center;
font-size:14px;
line-height:1.5em;
color:#fff;
background:linear-gradient(-90deg,rgba(0,229,226,0.2),#00b2b0)
}

.page-content__text h1 {
font-size:30px;
line-height:30px;
color:#fff
}

@media screen and (min-width: 992px) {
.menu {
 
height:70px;
min-height:auto;
position:relative;
}

.menu > ul > .menu__item.to-left > ul {
right:0
}

.menu ul > .menu__sub-menu__item.to-left > ul {
left:-300px
}

.menu .menu__sub-menu.to-left-ul > li > a {
text-align:right
}

.menu .menu__sub-menu.to-left-ul > li > a .arrow {
text-align:right;
transform:rotate(135deg);
right:auto;
left:0
}

.menu > ul {
display:flex;
flex-direction:row;
 
}

.menu__item {
border-bottom:none;
line-height:70px
}

.menu__item a .arrow {
width:auto;
margin:0 10px;
    left: 6px;
}

.menu__item > a .arrow {
transform:rotate(45deg)
}

.menu__sub-menu {
position:absolute;
visibility:hidden;
opacity:0;
top:70px;
pointer-events:none;
transition:all .3s;
transform:translate(0,60px);
z-index:999
}

.menu__sub-menu__item {
line-height:42px;
height:42px;
padding-right:0
}

.menu__sub-menu .menu__sub-menu {
top:0;
left:300px;
transition:all .3s;
transform:translate(-60px,0);
position:absolute
}

.menu__sub-menu li a {
padding:0 1em!important
}

.menu-button.visible-xs {
display:none
}

.menu-content {
width:100%;
transform:translate(0,0);
height:70px;
overflow:visible
}

.menu-content.open {
width:100%
}

.menu-content.close {
width:100%
}

.page-content {
width:70%;
padding:15%
}

.page-content__text h1 {
font-size:50px;
line-height:50px
}
}

@media (max-width: 750px){
.menu-content {
    position: fixed;
}
.menu{
background-color:#4c4b4b;
}
.menu__item a{
color: #fff;
}
 
.menu__item a .arrow:before {
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 8px;
    content: '';
}
.menu__sub-menu__item a{
background:#000000;
    text-transform: capitalize;
} 
.menu__sub-menu__item{
width: 100%;
}
.menu__sub-menu > li > a {
    padding-left: 8px;
}
.menu__item a:hover {
    background:rgb(0, 0, 0);
    color: #ffffff;
}
.menu a.active-parent{
color: #ffffff;
}
html{
overflow-x:auto;
}
.menu__item a .arrow{
right: -8px;	
}

.menu__sub-menu li ul a {
    padding-left: 20px;
}
}