/* Micro Clearfix */
.clearance:before, .clearance:after { content: ''; display: table; visibility: hidden; }
.clearance:after { clear: both; }
.clearance { *zoom: 1; }
.primary-nav-gruop { position: relative; overflow: visible; }
.primary-nav-gruop ul { margin: 0; padding: 0; list-style: none; }
.primary-nav-pole { display: none; }

/**/
#primary-nav-button { font-size: 0; font-weight: bold; position: absolute; top: 0; left: 0px; display: none; width: 50px; height: 50px; padding: 0; border: 0; text-align: center; text-align: center; text-decoration: none; }
#primary-nav-button:focus { outline: none; cursor: pointer; }
#primary-nav-button:hover { cursor: pointer; }
#primary-nav-button.selected { background: inherit; }
#primary-nav-button:before { content: '\2261'; font-size: 45px; font-weight: 400; font-style: normal; line-height: 1; position: relative; position: relative; top: 0px; left: 3px; display: block; width: 1em; height: 1em; color: inherit; speak: none; }

/*#primary-nav lv1*/
#primary-nav { display: inline-block; float: right; }
#primary-nav ul.primary-menu > li { position: relative; float: left; margin-right: 0; text-align: left; white-space: nowrap; }
#primary-nav ul.primary-menu > li:last-child { margin-right: 0; }
#primary-nav ul.primary-menu > li a { display: block; text-decoration: none; }
#primary-nav ul.primary-menu > li > a { padding-right: 10px; }

/*#primary-nav lv2 + ... */
#primary-nav .sub-menu { position: absolute; left: 0; display: none; max-height: 1333px; }
#primary-nav .sub-menu li { width: 100%; }
#primary-nav .sub-menu.hide { display: none; }
#primary-nav .sub-menu { z-index: 23330; min-width: 200px; border-bottom: 1px; }
#primary-nav .sub-menu li:last-child { border-bottom: 0; }

/* downarrow */
.downarrow { display: inline-block; min-width: 3px; padding: 0; background: none; text-align: center; }
.sub-menu .downarrow { position: absolute; right: 0; padding-right: 10px; }
.downarrow:before { content: '\25be'; font-size: 1em; line-height: 1.1; display: block; width: 1em; height: 1em; color: inherit; }
#primary-nav .sub-menu .downarrow:before { content: '\25b8'; }

/**/
@media (min-width:0px) and (max-width:800px) {
	#primary-nav { position: absolute; top: 100%; display: none; width: 100%; }
	#primary-nav li { width: 100%; margin: 0; white-space: normal; }
	#primary-nav li a { padding-top: 12px; padding-bottom: 12px; }
	#primary-nav .sub-menu { position: relative; float: left; width: 100%; }
	#primary-nav .sub-menu li a { padding-top: 10px; padding-bottom: 10px; }
	#primary-nav-button { display: inline-block; }
	#primary-nav li a { padding-left: 15px !important; }
	#primary-nav .sub-menu li a { padding-left: 30px !important; }
	#primary-nav .sub-menu .sub-menu li a { padding-left: 45px !important; }
	#primary-nav .sub-menu .sub-menu .sub-menu li a { padding-left: 60px !important; }
	#primary-nav .sub-menu { animation: none !important; }
	.downarrow:before { content: '\f0d7';font-family: 'Font Awesome 5 Free'; font-weight: 900;}
	#primary-nav .sub-menu .downarrow:before { content: '\f0d7'; font-family: 'Font Awesome 5 Free'; font-weight: 900; }
	#primary-nav .downarrow, #primary-nav .sub-menu .downarrow { position: absolute; right: 0; padding-right: 15px; }
}

/**/
@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
	0% { opacity: 0; transform: translateX(20px); }
	100% { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInLeft {
	0% { opacity: 0; transform: translateX(-20px); }
	100% { opacity: 1; transform: translateX(0); }
}

/**/

/* button style */
#primary-nav-button { background: #2689be; }
#primary-nav-button:hover { background: #2689be; }
#primary-nav-button.selected { background: #2689be; }
#primary-nav-button:before { color: #fff; }

/* lv1 style */
#primary-nav li > a { font-size: 18px; font-weight: 400; color: #c4d2da; line-height: 1; }
#primary-nav li > a:hover { background: #fff; }
#primary-nav li.selected > a { background: transparent; }
#primary-nav li.selected > a:hover { background: transparent; }
#primary-nav li.active > a { background: #c4d2da; color: #333; }
#primary-nav li.active > a:hover { background: #c4d2da; color: #333; }
#primary-nav ul.primary-menu > li > a { padding-right: 5px; }

/*lv2 + ... style */
#primary-nav .sub-menu { background: #c4d2da; animation: fadeInRight .4s 0s ease both; }
#primary-nav .sub-menu li { padding: 0; border-bottom: 1px solid RGBA(0, 0, 0, .2); }
#primary-nav .sub-menu li a { font-size: 16px; font-weight: 400; padding: 10px 10px; color: #333; }
#primary-nav .sub-menu li > a:hover { background: RGBA(255, 255, 255, .4); }
#primary-nav .sub-menu li.selected > a { background: RGBA(255, 255, 255, .4); }

/* mobile style */
@media (min-width:0px) and (max-width:800px) {
	#primary-nav { background: #c4d2da; }
	#primary-nav li { border-bottom: 1px solid RGBA(0, 0, 0, .2); }
	#primary-nav li:last-child { border-bottom: 1px solid transparent; }
	#primary-nav li a { font-size: 16px; font-weight: 400; color: #333; }
	#primary-nav li { background: transparent; }
	#primary-nav li:hover { background: RGBA(255, 255, 255, .4); }
	#primary-nav li > a:hover { background: transparent; }
	#primary-nav li.selected { background: transparent; }
	#primary-nav li.selected > a { background: transparent; }
	#primary-nav li.selected:hover { background: transparent; }
	#primary-nav li.selected li:first-child { border-top: 1px solid RGBA(0, 0, 0, .2); }
	#primary-nav li.active > a { color: #333; }
	#primary-nav li.active > a:hover { background: RGBA(255, 255, 255, .4); color: #333; }
	#primary-nav .sub-menu { background: RGBA(255, 255, 255, .4); }
	#primary-nav .sub-menu .sub-menu { background: RGBA(255, 255, 255, .4); }
	#primary-nav .sub-menu .sub-menu .sub-menu { background: RGBA(255, 255, 255, .4); }
}
@media (min-width:992px) {
	#primary-nav ul.primary-menu > li > a { padding-right: 15px; }
}
@media (min-width:800px) and (max-width:991px) {
	#primary-nav ul.primary-menu > li > a { padding-right: 5px; }
}
@media (min-width:0px) and (max-width:800px) {
	.primary-nav-pole { display: block; height: 50px; margin: 0; }
}