:root {
		--menu-slide-pos: -450px;
		--menu-slide-width: 450px;

		--menu-slide-pos-mobile: -100%;
		--menu-slide-width-mobile: 100%;

		--menu-slide-pos-mobile-landscape: -300px;
		--menu-slide-width-mobile-landscape: 300px;
	}

    @keyframes slidein {
		from {right: var(--menu-slide-pos);}
		to {right: 0;}
    }
    @keyframes slideout {
		from {right: 0;}
		to {right: var(--menu-slide-pos);}
    }
    .menuSlide {
		position: fixed;
		top: 0;
		height: 100%;
		z-index: 500;
		right: 100%;
		min-width: var(--menu-slide-width);
    }

    .bg-menu {
        background-color: #003398;
    }
    .bg-luxury {
        background-color: #000000;
    }
    .open {
        animation-name: slidein;
        animation-duration: 0.3s;
        right: 0;
    }
    .close {
        animation-name: slideout;
        animation-duration: 0.1s;
        right:100%;
    }
    .menuSlide .container {
    /* margin-left: 2.35rem; */
    }
    .menuSlide ul#ghmenu {
        padding-left: 2.35rem;
    }
    .menuSlide ul#ghmenu li {
        padding: 0.7rem 0;
    }

	@media only screen and (max-width: 575px) {
		body {
			background-color:transparent !important;
		}
	}	
	
	@media only screen and (max-width: 575px) {
		.custom-button-nav {
			margin-right:0px !important;
		}
	}	
	
	
	@media only screen and (max-width: 425px) {
	    @keyframes slidein {
	        from {right: var(--menu-slide-pos-mobile);}
	        to {right: 0;}
	    }
	    @keyframes slideout {
			from {right: 0;}
			to {right: var(--menu-slide-pos-mobile);}
	    }

	    .menuSlide {
			min-width: var(--menu-slide-width-mobile);
	    }
	}

	@media only screen
		and (min-device-width: 375px)
		and (max-device-width: 892px)
		and (orientation: landscape) {

        .menuSlide ul#ghmenu li,
        .menuSlide ul#ghmenu li a,
        .menuSlide ul#ghmenu li span {
        	padding: 0.18rem;
            font-size: 1.1rem!important;
        }

	    @keyframes slidein {
	        from {right: var(--menu-slide-pos-mobile-landscape);}
	        to {right: 0;}
	    }
	    @keyframes slideout {
	        from {right: 0;}
	        to {right: var(--menu-slide-pos-mobile-landscape);}
	    }

	    .menuSlide {
	        min-width: var(--menu-slide-width-mobile-landscape);
	    }
    }

	.menuSlide ul#ghmenu li a, .menuSlide ul#ghmenu li span {
		font-size: 1.25rem;
        color: #ffffff!important;
    }

    .menuSlide ul#ghmenu li span.around-me{
		cursor:pointer;
	}


    .menuSlide ul#ghmenu li form {
        width: 80%;
    }
    #ghmenu .tt-suggestion {
        color: #003398;
    }
    #ghmenu .tt-suggestion.tt-cursor {
        color: #ffffff;
    }
    .custom-button-nav {
        padding: 0;
        margin-right:0px !important;
    }
    .custom-button-nav-open {
        position: absolute;
        top: 0.8rem;
        padding-right: 1.5rem;
    }
    .custom-button-nav:focus, .custom-button-nav-open:hover {
        outline: 0;
        box-shadow: none;
    }
    .custom-button-nav .navbar-toggler-custom-icon {
        background: url(/wp-content/themes/gh/img/navigation/ghab_icon_menu50.svg) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 30px;
        height: 20px;
    }
    .custom-button-nav:hover > .navbar-toggler-custom-icon {
		background: url(/wp-content/themes/gh/img/navigation/ghab_icon_menu50_hover.svg) no-repeat;
		background-size: contain;
    }
    .custom-button-nav-open .navbar-toggler-custom-icon {
		background: url(/wp-content/themes/gh/img/navigation/ghab_icon_menu50_open.svg) no-repeat;
        background-size: contain;
        display: inline-block;
        width: 30px;
        height: 20px;
    }
    .custom-button-nav-open:hover > .navbar-toggler-custom-icon {
        background: url(/wp-content/themes/gh/img/navigation/ghab_icon_menu50_hover.svg) no-repeat;
        background-size: contain;
    }