/*
    Description: 	Menu Framework
    Author: 		InsideLab
    Version: 		1.0
*/

/*	--------------------------------------------------
	:: Tablet Portrait Design for a width of 1200px
	-------------------------------------------------- */

    @media only screen and (min-width:960px) and (max-width:1199px) {
		
	/*	--------------------------------------------------
		:: Menu Responsive Toggle show on Responsive
		-------------------------------------------------- */	
		
		.menu .togglel {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper hide by Default
		-------------------------------------------------- */	
		
		.menu .menu-wrapper {
			position:absolute;
			opacity:0;
			visibility:hidden;
			margin-top:10px;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper show on Checked
		-------------------------------------------------- */
		
		.menu .togglei:checked ~ .menu-wrapper {
			position:static;
			opacity:1;
			visibility:visible;
			margin-top:0;
			-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 item Block Elements
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label Relative & left align
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item > a,
		.menu .menu-wrapper .menu-item > .label{
			position:relative;
			text-align:left;
		}
	
	/*	--------------------------------------------------
		:: Menu item right arrow
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item#right-arrow > .label:after {
			margin-top:3px;
			float:right;
		}
		
		.menu .menu-wrapper .menu-item#right-arrow > .input:checked + .label:after {
			content:"\f0d7";
		}
		
	/*	--------------------------------------------------
		:: Menu item Block Elements with No Float
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item.left {
			float:none;
		}
		
		.menu .menu-wrapper .menu-item.right {
			float:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Hover from Desktop Hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item:hover .section {
			opacity:0;
			visibility:hidden;
		}
		
	/*	--------------------------------------------------
		:: Menu item Section no Animation
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section,
        .menu .menu-wrapper .menu-item .input:checked ~ .section,
        .menu .menu-wrapper .menu-item:hover .section {
			-webkit-transform:none;
               -moz-transform:none;
                 -o-transform:none;
                    transform:none;
			-webkit-transition:none;
               -moz-transition:none;
                 -o-transition:none;
                    transition:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item hide by Default
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section {
			height:0;
            opacity:0;
	        visibility:hidden;
		}
		
        .menu .menu-wrapper .menu-item .section {
			margin:4px 0 0 0;
		}
		
	/*	--------------------------------------------------
		:: Menu item show on Checked
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .input:checked + .label ~ .section {
			position:static;
			width:100%;
            height:100%;
            opacity:1;
            visibility:visible;
		}
		
	/*	--------------------------------------------------
		:: Menu item desktop Arrow hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section:before,
        .menu .menu-wrapper .menu-item .section:after {
			display:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Blue
		-------------------------------------------------- */
		
		.menu-default.menu-blue-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#EEEEEE;
			border:1px solid transparent;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Green
		-------------------------------------------------- */
		
		.menu-default.menu-green-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#25a650;
		    border:1px solid #32bf61;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Red
		-------------------------------------------------- */
		
		.menu-default.menu-red-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#c92f41;
		    border:1px solid #dd3c4f;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Orange
		-------------------------------------------------- */
		
		.menu-default.menu-orange-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#d54343;
		    border:1px solid #ea5d5d;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Purple
		-------------------------------------------------- */
		
		.menu-default.menu-purple-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#993597;
		    border:1px solid #b647b4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Border Dark Version
		-------------------------------------------------- */
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item{
			border-bottom:1px solid #1a2027;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:first-child{
			border-top:4px solid #1a2027;
			border-left:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:last-child{
			border-bottom:none;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.left {
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.right {
			border-left:none;
		}
		
    }

/*	--------------------------------------------------
	:: Tablet Portrait Design for a width of 960px
	-------------------------------------------------- */

    @media only screen and (min-width:768px) and (max-width:959px) {
		
        .wrapper { width:768px; }
		
	/*	--------------------------------------------------
		:: Menu Responsive Toggle show on Responsive
		-------------------------------------------------- */	
		
		.menu .togglel {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper hide by Default
		-------------------------------------------------- */	
		
		.menu .menu-wrapper {
			position:absolute;
			opacity:0;
			visibility:hidden;
			margin-top:10px;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper show on Checked
		-------------------------------------------------- */
		
		.menu .togglei:checked ~ .menu-wrapper {
			position:static;
			opacity:1;
			visibility:visible;
			margin-top:0;
			-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 item Block Elements
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label Relative & left align
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item > a,
		.menu .menu-wrapper .menu-item > .label{
			position:relative;
			text-align:left;
		}
	
	/*	--------------------------------------------------
		:: Menu item right arrow
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item#right-arrow > .label:after {
			margin-top:3px;
			float:right;
		}
		
		.menu .menu-wrapper .menu-item#right-arrow > .input:checked + .label:after {
			content:"\f0d7";
		}
		
	/*	--------------------------------------------------
		:: Menu item Block Elements with No Float
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item.left {
			float:none;
		}
		
		.menu .menu-wrapper .menu-item.right {
			float:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Hover from Desktop Hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item:hover .section {
			opacity:0;
			visibility:hidden;
		}
		
	/*	--------------------------------------------------
		:: Menu item Section no Animation
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section,
        .menu .menu-wrapper .menu-item .input:checked ~ .section,
        .menu .menu-wrapper .menu-item:hover .section {
			-webkit-transform:none;
               -moz-transform:none;
                 -o-transform:none;
                    transform:none;
			-webkit-transition:none;
               -moz-transition:none;
                 -o-transition:none;
                    transition:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item hide by Default
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section {
			height:0;
            opacity:0;
	        visibility:hidden;
		}
		
        .menu .menu-wrapper .menu-item .section {
			margin:4px 0 0 0;
		}
		
	/*	--------------------------------------------------
		:: Menu item show on Checked
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .input:checked + .label ~ .section {
			position:static;
			width:100%;
            height:100%;
            opacity:1;
            visibility:visible;
		}
		
	/*	--------------------------------------------------
		:: Menu item desktop Arrow hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section:before,
        .menu .menu-wrapper .menu-item .section:after {
			display:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Blue
		-------------------------------------------------- */
		
		.menu-default.menu-blue-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#2d8bbb;
			border:1px solid #3face4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Green
		-------------------------------------------------- */
		
		.menu-default.menu-green-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#25a650;
		    border:1px solid #32bf61;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Red
		-------------------------------------------------- */
		
		.menu-default.menu-red-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#c92f41;
		    border:1px solid #dd3c4f;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Orange
		-------------------------------------------------- */
		
		.menu-default.menu-orange-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#d54343;
		    border:1px solid #ea5d5d;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Purple
		-------------------------------------------------- */
		
		.menu-default.menu-purple-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#993597;
		    border:1px solid #b647b4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Border Dark Version
		-------------------------------------------------- */
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item{
			border-bottom:1px solid #1a2027;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:first-child{
			border-top:4px solid #1a2027;
			border-left:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:last-child{
			border-bottom:none;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.left {
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.right {
			border-left:none;
		}
		
    }

/*	--------------------------------------------------
	:: Mobile Landscape Design for a width of 420px
	-------------------------------------------------- */

    @media only screen and (min-width:480px) and (max-width:767px) {
		
        .wrapper { width:420px; }
		
	/*	--------------------------------------------------
		:: Menu Responsive Toggle show on Responsive
		-------------------------------------------------- */	
		
		.menu .togglel {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper hide by Default
		-------------------------------------------------- */	
		
		.menu .menu-wrapper {
			position:absolute;
			opacity:0;
			visibility:hidden;
			margin-top:10px;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper show on Checked
		-------------------------------------------------- */
		
		.menu .togglei:checked ~ .menu-wrapper {
			position:static;
			opacity:1;
			visibility:visible;
			margin-top:0;
			-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 item Block Elements
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label Relative & left align
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item > a,
		.menu .menu-wrapper .menu-item > .label{
			position:relative;
			text-align:left;
		}
	
	/*	--------------------------------------------------
		:: Menu item right arrow
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item#right-arrow > .label:after {
			margin-top:3px;
			float:right;
		}
		
		.menu .menu-wrapper .menu-item#right-arrow > .input:checked + .label:after {
			content:"\f0d7";
		}
		
	/*	--------------------------------------------------
		:: Menu item Block Elements with No Float
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item.left {
			float:none;
		}
		
		.menu .menu-wrapper .menu-item.right {
			float:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Hover from Desktop Hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item:hover .section {
			opacity:0;
			visibility:hidden;
		}
		
	/*	--------------------------------------------------
		:: Menu item Section no Animation
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section,
        .menu .menu-wrapper .menu-item .input:checked ~ .section,
        .menu .menu-wrapper .menu-item:hover .section {
			-webkit-transform:none;
               -moz-transform:none;
                 -o-transform:none;
                    transform:none;
			-webkit-transition:none;
               -moz-transition:none;
                 -o-transition:none;
                    transition:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item hide by Default
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section {
			height:0;
            opacity:0;
	        visibility:hidden;
		}
		
        .menu .menu-wrapper .menu-item .section {
			margin:4px 0 0 0;
		}
		
	/*	--------------------------------------------------
		:: Menu item show on Checked
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .input:checked + .label ~ .section {
			position:static;
			width:100%;
            height:100%;
            opacity:1;
            visibility:visible;
		}
		
	/*	--------------------------------------------------
		:: Menu item desktop Arrow hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section:before,
        .menu .menu-wrapper .menu-item .section:after {
			display:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Blue
		-------------------------------------------------- */
		
		.menu-default.menu-blue-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#2d8bbb;
			border:1px solid #3face4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Green
		-------------------------------------------------- */
		
		.menu-default.menu-green-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#25a650;
		    border:1px solid #32bf61;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Red
		-------------------------------------------------- */
		
		.menu-default.menu-red-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#c92f41;
		    border:1px solid #dd3c4f;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Orange
		-------------------------------------------------- */
		
		.menu-default.menu-orange-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#d54343;
		    border:1px solid #ea5d5d;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Purple
		-------------------------------------------------- */
		
		.menu-default.menu-purple-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#993597;
		    border:1px solid #b647b4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Border Dark Version
		-------------------------------------------------- */
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item{
			border-bottom:1px solid #1a2027;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:first-child{
			border-top:4px solid #1a2027;
			border-left:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:last-child{
			border-bottom:none;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.left {
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.right {
			border-left:none;
		}
		
    }

/*	--------------------------------------------------
	:: Mobile Portrait Design for a width of 300px
	-------------------------------------------------- */

    @media only screen and (max-width:479px) {
		
        .wrapper { width:300px; }
		
	/*	--------------------------------------------------
		:: Menu Responsive Toggle show on Responsive
		-------------------------------------------------- */	
		
		.menu .togglel {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper hide by Default
		-------------------------------------------------- */	
		
		.menu .menu-wrapper {
			position:absolute;
			opacity:0;
			visibility:hidden;
			margin-top:10px;
		}
		
	/*	--------------------------------------------------
		:: Menu Wrapper show on Checked
		-------------------------------------------------- */
		
		.menu .togglei:checked ~ .menu-wrapper {
			position:static;
			opacity:1;
			visibility:visible;
			margin-top:0;
			-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 item Block Elements
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item {
			display:block;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label Relative & left align
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item > a,
		.menu .menu-wrapper .menu-item > .label{
			position:relative;
			text-align:left;
		}
	
	/*	--------------------------------------------------
		:: Menu item right arrow
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item#right-arrow > .label:after {
			margin-top:3px;
			float:right;
		}
		
		.menu .menu-wrapper .menu-item#right-arrow > .input:checked + .label:after {
			content:"\f0d7";
		}
		
	/*	--------------------------------------------------
		:: Menu item Block Elements with No Float
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item.left {
			float:none;
		}
		
		.menu .menu-wrapper .menu-item.right {
			float:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Hover from Desktop Hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item:hover .section {
			opacity:0;
			visibility:hidden;
		}
		
	/*	--------------------------------------------------
		:: Menu item Section no Animation
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section,
        .menu .menu-wrapper .menu-item .input:checked ~ .section,
        .menu .menu-wrapper .menu-item:hover .section {
			-webkit-transform:none;
               -moz-transform:none;
                 -o-transform:none;
                    transform:none;
			-webkit-transition:none;
               -moz-transition:none;
                 -o-transition:none;
                    transition:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item hide by Default
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section {
			height:0;
            opacity:0;
	        visibility:hidden;
		}
		
        .menu .menu-wrapper .menu-item .section {
			margin:4px 0 0 0;
		}
		
	/*	--------------------------------------------------
		:: Menu item show on Checked
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .input:checked + .label ~ .section {
			position:static;
			width:100%;
            height:100%;
            opacity:1;
            visibility:visible;
		}
		
	/*	--------------------------------------------------
		:: Menu item desktop Arrow hide
		-------------------------------------------------- */
		
		.menu .menu-wrapper .menu-item .section:before,
        .menu .menu-wrapper .menu-item .section:after {
			display:none;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Blue
		-------------------------------------------------- */
		
		.menu-default.menu-blue-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#EEEEEE;
			border:1px solid transparent;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Green
		-------------------------------------------------- */
		
		.menu-default.menu-green-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#25a650;
		    border:1px solid #32bf61;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Red
		-------------------------------------------------- */
		
		.menu-default.menu-red-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#c92f41;
		    border:1px solid #dd3c4f;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Orange
		-------------------------------------------------- */
		
		.menu-default.menu-orange-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#d54343;
		    border:1px solid #ea5d5d;
		}
		
	/*	--------------------------------------------------
		:: Menu item Label show on Checked Purple
		-------------------------------------------------- */
		
		.menu-default.menu-purple-default .menu-wrapper .menu-item .input:checked + .label {
			background-color:#993597;
		    border:1px solid #b647b4;
		}
		
	/*	--------------------------------------------------
		:: Menu item Border Dark Version
		-------------------------------------------------- */
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item{
			border-bottom:1px solid #E1E1E1;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:first-child{
			border-top:4px solid #E1E1E1;
			border-left:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item:last-child{
			border-bottom:none;
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.left {
			border-right:none;
		}
		
		.menu-default.menu-dark-default .menu-wrapper .menu-item.right {
			border-left:none;
		}
	
	}