/* --------------- Menu --------------- */

.hamenu{
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100vh;
	background: #1d1d1d;
	overflow: hidden;
	z-index: 99999999999;
	transition: all 0.7s cubic-bezier(1, 0, 0.55, 1);

    &:after{
        content: '';
        background-image: url(../imgs/menu-shape.png);
        background-size: contain;
        background-repeat: repeat;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: .5;
    }

	.close-menu{
		position: absolute;
		top: 30px;
		right: 40px;
		width: 60px;
		height: 60px;
		line-height: 60px;
		border: 1px solid rgba(255,255,255,.2);
		border-radius: 50%;
		text-align: center;
		cursor: pointer;
		z-index: 4;
	}

	.close-menu{
		color: #fff;
		transform: translateY(-100px);
		opacity: 0;
		transition: all .4s;
	}

	&.open{

		.close-menu{
			transform: translateY(0);
			opacity: 1;
			transition-delay: 1s;
		}

		.menu-links{

			.main-menu{

				> li{
					
					.link{
						transform: translateY(0);
						opacity: 1;
						transition-delay: 1s;
					}
				}
			}
		}

		.cont-info{
            transform: translateX(0);

            .text-center{
				transform: translateY(0);
				opacity: 1;
				transition-delay: 1.4s;
			}
		}
	}

	.menu-links{
		color: #fff;
		height: 100vh;
		padding-top: 80px;
        padding-left: 80px;
        padding-right: 80px;
		overflow: auto;
        width: 100%;
        background: #111;
		display: flex;
		align-items: center;

		&::-webkit-scrollbar {
			width: 5px;
		}
		
		&::-webkit-scrollbar-track {
			background: #111;
		}
		
		&::-webkit-scrollbar-thumb {
			background: rgba(255,255,255,.2);
			border-radius: 5px;
		}

		.main-menu{
			position: relative;
			z-index: 2;

			ul{
				margin: 0;
				padding: 0;
			}

			> li{
				transition: all .5s;
				
				.link{
					font-size: 50px;
					font-weight: 600;
					line-height: 1.2;
					padding: 15px 30px;
					width: 100%;
					position: relative;
					display: block;
					transform: translateY(100px);
					opacity: 0;
					transition: all .7s;

					i{
						position: absolute;
						width: 90px;
						top: 0;
						right: 0;
						bottom: 0;

						&:before{
							content: '';
							width: 1px;
							height: 16px;
							position: absolute;
							top: 50%;
							left: 50%;
							background: #fff;
						}

						&:after{
							content: '';
							width: 16px;
							height: 1px;
							position: absolute;
							top: calc(50% + 8px);
							left: calc(50% - 8px);
							background: #fff;
						}
					}

					&.dopen{

						i{

							&:before{
								opacity: 0;
							}
						}
					}

					.fill-text{
						position: relative;
						color: rgba(255,255,255,.4);

						&:after{
							content: attr(data-text);
							position: absolute;
							top: 0;
							left: 0;
							color: #fff;
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							transition: width .75s cubic-bezier(.63,.03,.21,1);
						  }
					}
				}

				&.hoverd{
					
					.link{

						.fill-text{
	
							&:after{
								width: 0;
							  }
						}
					}
				}

				.sub-dmenu{
					font-size: 30px;
					font-weight: 500;
					padding-left: 50px;
					text-transform: capitalize;
					letter-spacing: normal;
					background: rgba(255,255,255,.009);
				}
			}

			.sub-menu{
				display: none;
				padding: 20px 0;

				&.no-bord{
					border-top: 0;
					padding: 0;
				}

				li{
					padding: 0;
					margin: 0;
					line-height: 1;
					font-size: 22px;
					font-weight: 400;
					
					a{
						padding: 12px 12px 12px 40px;
						opacity: .6;
						transition: all .4s;

						&:hover{
							opacity: 1;
						}
					}
				}
			}

			.sub-menu2{
				display: none;
				padding: 10px 0 20px;

				li{
					padding: 0;
					margin: 0;
					line-height: 1;
					font-size: 22px;
					font-weight: 400;
					
					a{
						padding: 12px 12px 12px 70px;
						opacity: .6;
						transition: all .4s;

						&:hover{
							opacity: 1;
						}
					}
				}
			}
		}
	}

	.cont-info{
		padding-left: 30px;
        width: 70%;
		color: #fff;
        background: #1d1d1d;

        .logo{
            width: 200px;
            margin: auto;
        }

        .social-icon{

            a{
                margin: 0 15px;
            }
        }

        .text-center{
			transform: translateY(50px);
			transition: all .4s;
			opacity: 0;

			h5{
				font-size: 20px;
				font-weight: 500;
				letter-spacing: normal;
				line-height: 1.7;
			}
		}
	}
}

@media screen and (max-width: $tablet-sm-screen) {

    .hamenu.open .cont-info{
		display: none;
	}

	.hamenu .menu-links{
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 15px;
	}

	.hamenu .menu-links .main-menu{
		width: 100%;
	}

	.hamenu .menu-links .main-menu > li .link{
		font-size: 30px;
	}
}