/* colors:
 *
 * #474747: normal textcolor of menubuttons
 *
 * #fefefe: bg color of submenu popups
 * #676767: normal textcolor of sub-menubuttons
 * #333333: hover textcolor of sub-menubuttons
 *
 * #0d87e3: active textcolor of menubuttons
 * #0da4e3: hover textcolor of menubuttons
 *
 * rgba(0, 0, 0, 0.08): active bg color of menubuttons
 * rgba(0, 0, 0, 0.05): hover bg color of menubuttons
 */

#navbar,
#navbar ul,
#navbar ul li,
#navbar ul li a,
#navbar #menu-button
{
	display:                    inline-block;

	margin:                     0 auto;
	padding:                    0;

	list-style:                 none;
	-webkit-box-sizing:         border-box;
	-moz-box-sizing:            border-box;
	box-sizing:                 border-box;
	border:                     0;

	-o-transition:              0.3s;
	-ms-transition:             0.3s;
	-moz-transition:            0.3s;
	-webkit-transition:         0.3s;
	transition:                 0.3s;
}

#navbar #menu-button
{
	display:                    none;
}

#navbar ul ul
{
	position:                   absolute;
	top:                        60px;
	left:                       -9999px;

	padding-top:                6px;
	font-size:                  13px;
	-moz-transition:            top 0.2s ease, opacity 0.2s ease-in;
	-ms-transition:             top 0.2s ease, opacity 0.2s ease-in;
	-o-transition:              top 0.2s ease, opacity 0.2s ease-in;
	-webkit-transition:         top 0.2s ease, opacity 0.2s ease-in;
	transition:                 top 0.2s ease, opacity 0.2s ease-in;
	opacity:                    0;
}

#navbar ul ul li.has-sub.active > a::after
{
	border-left-color:          #0d87e3;
}

#navbar ul ul li.has-sub:hover > a::after
{
	border-left-color:          #0da4e3;
}

#navbar ul ul li.has-sub > a::after
{
	position:                   absolute;
	top:                        14px;
	right:                      17px;

	width:                      0;
	height:                     0;

	border:                     4px solid transparent;
	border-left-color:          #676767;
	content:                    "";
}

#navbar ul ul li:first-child > a
{
	border-top-left-radius:     3px;
	border-top-right-radius:    3px;
}

#navbar ul ul li:last-child > a
{
	border-bottom-left-radius:  3px;
	border-bottom-right-radius: 3px;
}

#navbar ul ul > li:hover > ul
{
	top:                        0;
	left:                       180px;

	opacity:                    1;
}

#navbar ul ul li.active > a
{
	color:                      #0d87e3;
}

#navbar ul ul li:hover > a
{
	color:                      #0da4e3;
}

#navbar ul ul li a
{
	width:                      180px;
	padding:                    11px 25px;
	color:                      #676767;
	font-weight:                400;
	text-decoration:            none;
	background:                 rgba(255, 255, 255, 0.6);
	box-shadow:                 0 2px 2px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1);
}

#navbar ul ul ul
{
	padding-top:                0;
	padding-left:               6px;
}

#navbar ul ul ul::after
{
	position:                   absolute;
	top:                        11px;
	left:                       -4px;

	width:                      0;
	height:                     0;

	border:                     5px solid transparent;
	border-right-color:         #fefefe;
	content:                    "";
}

#navbar > ul > li.has-sub.active > a::after,
#navbar > ul > li.has-sub:hover > a
{
	border-top-color:           #fefefe;
}

#navbar > ul > li.has-sub > a
{
	padding-right:              36px;
}

#navbar > ul > li.has-sub > a::after
{
	position:                   absolute;
	top:                        22px;
	right:                      17px;

	width:                      0;
	height:                     0;

	border:                     4px solid transparent;
	border-top-color:           #474747;
	content:                    "";
}

#navbar > ul > li
{
	display:                    inline-block;
	float:                      left;
}

#navbar > ul > li:hover > ul
{
	top:                        52px;
	left:                       0;

	opacity:                    1;
}

#navbar > ul > li > ul
{
	top:                        120px;
}

#navbar > ul > li > ul::after
{
	position:                   absolute;
	display:                    block;

	top:                        -4px;
	left:                       20px;

	width:                      0;
	height:                     0;

	border:                     5px solid transparent;
	border-bottom-color:        #fefefe;
	content:                    "";
}

#navbar > ul > li > a
{
	padding:                    18px 25px 21px;
	color:                      #474747;

/*  border between buttons
	border-right:               1px solid rgba(80, 80, 80, 0.12);
 */

	font-size:                  13px;
	font-weight:                400;
	text-decoration:            none;
	text-transform:             uppercase;
	letter-spacing:             1px;
}

/* active button */
#navbar > ul > li.active > a
{
	color:                      #0d87e3;
	background:                 rgba(0, 0, 0, 0.08);
}

/* hovered button */
#navbar > ul > li:hover > a,
#navbar > ul > li > a:hover
{
	color:                      #0da4e3;
	background:                 rgba(0, 0, 0, 0.05);
}

#navbar:after,
#navbar > ul:after
{
	display:                    block;
	height:                     0;
	clear:                      both;
	content:                    ".";
	line-height:                0;
	visibility:                 hidden;
}

#navbar
{
	width:                      auto;

	font-weight:                400;

	/*
	background:                 #39b1cc;

	background:                 -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
	background:                 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
	background:                 -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
	background:                 -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
	background:                 -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
	background:                 linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);
	*/
}

#navbar.align-right > ul > li
{
	float:                      right;
}

#navbar.align-right > ul > li > ul::after
{
	right:                      20px;
	left:                       auto;
}

#navbar.align-right > ul > li:hover > ul
{
	right:                      0;
	left:                       auto;
}

#navbar.align-center > ul
{
	float:                      none;
	text-align:                 center;
}

#navbar.align-center > ul > li
{
	float:                      none;
}

#navbar.align-center ul ul
{
	text-align:                 left;
}

#navbar.align-right ul ul
{
	text-align:                 right;
}

#navbar.align-right ul ul li.has-sub.active > a::after
{
	border-left-color:          transparent;
	border-right-color:         #0d87e3;
}

#navbar.align-right ul ul li.has-sub:hover > a::after
{
	border-left-color:          transparent;
	border-right-color:         #0da4e3;
}

#navbar.align-right ul ul li.has-sub > a::after
{
	right:                      auto;
	left:                       17px;

	border-left-color:          transparent;
	border-right-color:         #676767;
}

#navbar.align-right ul ul > li:hover > ul
{
	right:                      100%;
	left:                       auto;

	opacity:                    1;
}

#navbar.align-right ul ul ul
{
	padding-right:              6px;
}

#navbar.align-right ul ul ul::after
{
	right:                      -4px;
	left:                       auto;

	border-left-color:          #fefefe;
	border-right-color:         transparent;
}

/* small screens */
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px)
{
	#navbar #menu-button
	{
		display:                block;
		padding:                18px 25px;
		color:                  #474747;

		font-size:              13px;
		font-weight:            400;
		text-decoration:        none;
		text-transform:         uppercase;
		letter-spacing:         1px;

		cursor:                 pointer;
	}

	#navbar #menu-button::before
	{
		position:               absolute;
		display:                block;

		top:                    28px;
		right:                  25px;

		width:                  22px;
		height:                 3px;

		border-top:             2px solid #474747;
		content:                '';
	}

	#navbar #menu-button::after
	{
		position:               absolute;
		display:                block;

		top:                    18px;
		right:                  25px;

		width:                  22px;
		height:                 3px;

		border-top:             2px solid #474747;
		border-bottom:          2px solid #474747;
		content:                '';
	}

	#navbar > ul.open
	{
		display:                block;
	}

	#navbar.align-right > ul
	{
		float:                  none;
	}

	#navbar > ul > li,
	#navbar.align-right > ul > li
	{
		display:                block;
		float:                  none;
		border-top:             1px solid rgba(0, 0, 0, 0.1);
	}

	#navbar ul ul,
	#navbar ul li:hover > ul,
	#navbar > ul > li > ul,
	#navbar ul ul ul,
	#navbar ul ul li:hover > ul,
	#navbar.align-right ul ul,
	#navbar.align-right ul li:hover > ul,
	#navbar.align-right > ul > li > ul,
	#navbar.align-right ul ul ul,
	#navbar.align-right ul ul li:hover > ul
	{
		position:               relative;

		top:                    auto;
		right:                  auto;
		left:                   0;

		width:                  100%;
		padding:                0;
		text-align:             left;
		opacity:                1;
	}

	#navbar > ul,
	#navbar > ul > li.has-sub > a::after,
	#navbar ul ul li.has-sub > a::after
	{
		display:                none;
	}

	#navbar.align-center > ul
	{
		text-align:             left;
	}

	#navbar > ul > li > a
	{
		padding:                18px 25px;
		border-right:           0;
	}

	#navbar ul ul ul li a
	{
		padding-left:           45px;
	}

	#navbar ul ul li
	{
		width:                  100%;
	}

	#navbar ul ul li:first-child > a,
	#navbar ul ul li:last-child > a
	{
		border-radius:          0;
	}

	#navbar ul ul li a
	{
		width:                  100%;
		padding-left:           35px;
		box-shadow:             none;
	}
}