﻿@import "font.css";
	
/*	--------------------------------------------------
	:: Menu
	-------------------------------------------------- */

    .menu,
    .menu .menu-wrapper	{
	    position:relative;
	    display:block;
		width:100%;
	    margin:0 auto;
	    padding:0;
		font-size:0;
		text-align:center; /* ALIGN MENU ELEMENT ON MENU */
		-webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box; 
	            box-sizing:border-box;	
    }
	
	.menu:after,
    .menu .menu-wrapper:after { 
	    content:""; 
	    display:block; 
	    height:0; 
	    clear:both; 
	    visibility:hidden; 
	}
	
	.menu .menu-wrapper	{
	    max-width:1200px; /* REMOVE THIS IF YOU DON´T NEED MENU WRAPPER 1200PX ON MENU */
    }
	
	.menu .menu-wrapper .menu-item {
		display:inline-block;
		text-align:center; /* ALIGN MENU TEXT ON ELEMENT */
		-webkit-transition:all 0.4s ease-in-out;
           -moz-transition:all 0.4s ease-in-out;
		     -o-transition:all 0.4s ease-in-out;
		        transition:all 0.4s ease-in-out;
	}
	
	.menu .menu-wrapper .menu-item .input {
		position:absolute;
        display:none;
	}

    .menu .menu-wrapper .menu-item .label {
		position:relative;
		display:block;
		cursor:pointer;
        font-style:normal; 
	    font-weight:normal; 
		font-family:'Hind', sans-serif;
	    font-size:14px;
		text-transform:uppercase;
		margin:0;
		padding:12px 15px;
    }	
	.menu .menu-wrapper .menu-item .label i{
	    font-style:normal; 
	    font-weight:normal;
	    font-size:14px;
		text-transform:uppercase;
		vertical-align:baseline;
        margin-right:10px;
    }
	
	/*	--------------------------------------------------
		:: Right Arrow
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item#right-arrow > .label:after {
			position:relative;
			font-family:'FontAwesome';
			content:"\f0d7";
			font-size:12px;
			vertical-align:baseline;
			margin-left:10px;
		}
		
		.menu .menu-wrapper .menu-item:hover#right-arrow > .input + .label:after {
			content:"\f0d8";
		}
	
	/*	--------------------------------------------------
		:: Menu <a> Link
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item > a {
			position:relative;
			display:block;
			cursor:pointer;
			font-style:normal; 
			font-weight:normal; 
			font-family:'Hind', sans-serif;
	    	font-size:14px;
			text-transform:uppercase;
			margin:0;
			outline:none;
			border:none;
			padding:12px 15px;
			text-decoration:none;
		}
		
		.menu .menu-wrapper .menu-item > a i{
			font-style:normal; 
			font-weight:normal;
			font-size:12px;
			vertical-align:baseline;
			margin-right:10px;
		}
		
/*	--------------------------------------------------
	:: Section
	-------------------------------------------------- */

	.menu .menu-wrapper .menu-item .section {
	    position:absolute;
		display:block;
		margin:14px 0 0 0;
		padding:0;
		z-index:10;
		list-style:none;
		width:220px; /* ADD HERE YOUR SECTION WIDTH */
		text-align:left;
        -webkit-box-sizing:border-box;
	       -moz-box-sizing:border-box;
	            box-sizing:border-box;
    }
	
	.menu .menu-wrapper .menu-item .section li{
		position:relative;
		display:block;
		cursor:pointer;
    }

	.menu .menu-wrapper .menu-item .section li a{
		display:block;
		text-decoration:none;
		font-style:normal; 
	    font-weight:normal; 
	    font-family:"Hind"; 
	    font-size:13px;
		padding:18px 18px;
    }
	
	.menu .menu-wrapper .menu-item .section li a:hover,
	.menu .menu-wrapper .menu-item .section li a:focus{
		outline:none;
    }
	
/*	--------------------------------------------------
	:: Menu section Dropdown Hide by Default
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item .section {
	    opacity:0;
		visibility:hidden;
    }
	
/*	--------------------------------------------------
	:: Menu section Dropdown show on Hover
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item:hover .section {
	    opacity:1;
		visibility:visible;
    }
	
/*	--------------------------------------------------
	:: Menu section Dropdown Arrow
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item .section:before {
	    position:absolute;
		content:"";
		bottom:100%;
		left:20px;
	}
	
/*	--------------------------------------------------
	:: Menu section Dropdown Arrow space Clickable
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item .section:after {
	    position:absolute;
		content:"";
		bottom:100%;
		left:0;
		width:100%;
		height:14px;
	}
	
/*	--------------------------------------------------
	:: Menu section Element Align Left
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item.left {
		position:relative;
		float:left;
	}
	
	.menu .menu-wrapper .menu-item.left .section {
		left:0;
	}
	
	.menu .menu-wrapper .menu-item.left .section:before {
		left:20px;
		right:auto;
	}
	
	.menu .menu-wrapper .menu-item.left .section:after {
		left:0;
		right:auto;
	}
	
/*	--------------------------------------------------
	:: Menu section Element Align Right
	-------------------------------------------------- */
	
	.menu .menu-wrapper .menu-item.right {
		position:relative;
		float:right;
	}
	
	.menu .menu-wrapper .menu-item.right .section {
		right:0;
	}
	
	.menu .menu-wrapper .menu-item.right .section:before {
		right:20px;
		left:auto;
	}
	
	.menu .menu-wrapper .menu-item.right .section:after {
		right:0;
		left:auto;
	}
	
/*	--------------------------------------------------
	:: Menu Responsive Toggle hide on Desktop
	-------------------------------------------------- */
	
	.menu .togglei,
	.menu .togglel{
        display:none;
	}
	
	.menu .togglel {
		cursor:pointer;
		text-align:left;
		font-style:normal; 
		font-weight:800; 
		font-family:'Hind', sans-serif;
		text-transform:uppercase;		
		font-size:15px;
		margin:0;
		padding:12px 34px;
	}
	
	.menu .togglel i {
		float:right;
		font-style:normal; 
		font-weight:normal; 
		font-size:24px;
		margin:0;
		vertical-align:middle;
	}
	
