.#{$prefix}-main-menu {
	height: 100%;
	> ul {
	    height: 100%;
	    display: flex;
	    align-items: center;
	    margin: 0;
        padding: 0;
		> li {
		    display: inline-block;
    		padding: 27px 7px;
    		@include transition(all .3s);
    		&:hover {
    			background: #cec7c71c;
    		}
            &.menu-item-has-children {
                > a {
                   &:after {
                        content: '\f107';
                        font-family: fontAwesome;
                        padding-left: 10px;
                    }     
                }      
                &:hover {
                    > a {
                        &:after {
                           content: '\f106';
                        }    
                    }                  
                }        
            }
    		a {
    			color: $color_white;
    			padding: 10px;
                text-transform: capitalize;
                font-size: 1rem;
                font-weight: 600;
    			&:hover {
    				text-decoration: none;
    			}
    		}            
		}
	} 
}