/************* MENU ************/

.closebutton {
position: absolute;
right: 24px;
top: 26px;
width: 24px;
display: block;
z-index: 1051;
}


a.menuclose {
	width: 24px;
	height: 24px;
	background: url('../images/close.png') center center no-repeat;
	background-size: 20px;
	display: block;
	text-decoration: none;
}

.menover {
    position: fixed;
    top: 0px;
    display: none;
	width: 100%;
    height: 100%;
	z-index: 1050;
	background-color: rgba(255,255,255,0.98);
    overflow: auto;
}

.menover .menures {
	position: relative;
    width: calc(100% - 40px);
	max-width: 400px;
	margin: 0 auto;
	top: 8px;
	height: calc(100vh - 80px);
}

a.mrlink, a.mrsublink {
	width: 100%;
	display: block;
	font-style: normal;
	text-decoration: none;
	color: var(--grey);
}

a.mrlink.active, a.mrsublink.active { color: var(--blue); }

a.mrlink { height: 40px; padding: 10px 0px; }

a.mrlink, .navcatmo { font-size: 20px; }

a.mrsublink { font-size: 18px; height: auto; min-height: 30px; padding: 5px 0px 0px 50px; }

a.mrlink:focus, a.mrsublink:focus { color: var(--grey); }

a.mrlink:hover, a.mrsublink:hover {
	color: var(--blue);
}

.mrlist {
	list-style: none;
	padding-left: 0;
    position: relative;
	top: 76px;
}

.mrlist li {
	width: 100%;
	text-align: left;
}

.icon-shop3 {
background: url('../images/shop.png') left center no-repeat;
background-size: 25px 20px;
}

.icon-otv3 {
background: url('../images/otv.png') left 3px center no-repeat;
background-size: 25px 20px;
}

.icon-web3 {
background: url('../images/website.png') left 3px center no-repeat;
background-size: 20px 20px;
}

.icon-mo3 {
background: url('../images/login.png') left 6px center no-repeat;
background-size: 19px 20px;
}

.icon-lo3 {
background: url('../images/logout.png') left 6px center no-repeat;
background-size: 18px 20px;
}

.icon-ad3 {
background: url('../images/admin.png') left 6px center no-repeat;
background-size: 20px 20px;
}

.icon-op3 {
background: url('../images/organo.premium.png') left 40px center no-repeat;
background-size: 82px 36px;
height: 36px !important;
margin: 0.85em 0px;
}

.icon-shop3:hover {
background: url('../images/shop.active.png') left center no-repeat;
background-size: 25px 20px;
}

.icon-otv3:hover {
background: url('../images/otv.active.png') left 3px center no-repeat;
background-size: 25px 20px;
}

.icon-web3:hover {
background: url('../images/website.active.png') left 3px center no-repeat;
background-size: 20px 20px;
}

.icon-mo3:hover {
background: url('../images/login.active.png') left 6px center no-repeat;
background-size: 19px 20px;
}

.icon-lo3:hover {
background: url('../images/logout.active.png') left 6px center no-repeat;
background-size: 18px 20px;
}

.icon-ad3:hover {
background: url('../images/admin.active.png') left 6px center no-repeat;
background-size: 20px 20px;
}


a.mrlink, .icon-shop3, .icon-otv3, .icon-web3, .icon-mo3, .icon-lo3, .icon-ad3 { padding-left: 40px; }

.mrlmt { margin-top: 20px; }

a.mrlink { font-weight: var(--medium); }



@media only screen and (max-width: 768px) {
.mrlist { top: 70px; }
.closebutton { top: 23px; }
}


@media only screen and (max-width: 480px) {
.mrlist { top: 64px; }
.closebutton { right: 20px; top: 20px; }
.mrlist li.navsubmo {
	width: 30%;
	display: inline-block;
}
}

@media only screen and (max-width: 359px) {
.menover .menures { width: calc(100% - 30px);  }
a.mrlink, .icon-shop3, .icon-otv3, .icon-web3, .icon-mo3, .icon-lo3, .icon-ad3  { padding-left: 35px; }
.icon-op3 { background: url('../images/organo.premium.png') left 35px center no-repeat; background-size: 82px 36px; }
a.mrsublink { padding: 5px 0px 0px 45px; }
}


/*** TOPNAV ***/

.topanchor {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
max-width: 1px;
max-height: 1px;
overflow: hidden;
}

#mo-menu {
display: block;
position: fixed;
top: 0px;
width: 100%;
height: 46px;
background-color: rgba(229,240,248,1);
z-index: 49;
border-bottom: 1px solid var(--blue);
}

#topnav {
position: fixed;
display: block;
width: 100%;
height: 100px;
top: 46px;
z-index: 50;
margin: 0;
background: var(--white);
border-bottom: 1px solid var(--xlightblue);
}

#topnav.active {
height: 50px;
}

#logo {
position: absolute;
top: 0px;
right: 50px;
width: 120px;
display: block;
height: auto;
margin-top: -15px;
}

#topnav.active #logo {
width: 60px;
}

a.logo {
display: block;
width: 100%;
background-color: var(--blue);
padding: 14px 0px 14px;
}

a.logo:hover {
background-color: var(--lightblue);
}

#topnav.active a.logo { padding: 7px 0px 7px; }

.logoi {
width: 64%;
display: block;
border: 0;
margin: 0 auto;
}

#menu {
position: absolute;
top: 40px;
left: 50px;
width: auto;
height: auto;
}

#topnav.active #menu {
top: 15px;
}

a.navlink, a.navlinkc {
display: inline-block;
color: var(--blue);
font-size: 20px;
font-weight: var(--medium);
text-decoration: none;
height: auto;
}

a.navlink { margin-right: 30px; line-height: 20px; }
a.navlinkc { margin-right: 16px; text-align: center; line-height: 24px; }

#topnav.active a.navlinkc {
font-size: 18px; line-height: 20px;
}

a.navlink:hover {
color: var(--blue);
}

a.navlinkc:hover {
color: var(--lightblue);
}

a.navlink.current {
color: var(--blue);
}

.hover {
position: relative;
display: inline-block;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.hover:after {
position: absolute;
right: 1px;
left: 1px;
content: "";
-webkit-transition: -webkit-transform 500ms;
transition: -webkit-transform 500ms;
-o-transition: transform 500ms, -o-transform 500ms;
transition: transform 500ms;
transition: transform 500ms, -webkit-transform 500ms, -o-transform 500ms;

bottom: -4px;
background: rgba(102,102,102,1);
}

a.navlink .hover:after {
bottom: -2px;
background: var(--orange);
height: 1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}

a.navlinkc .hover:after {
bottom: -4px;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}

a.navlinkc .hovx:after {
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}

a.navlink:hover .hover:after, #dropdown li:hover > a .hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}

a.navlink.current .hover:after {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}

#menbutton {
display: none;
position: absolute;
left: 24px; 
top: 26px;
}

#topnav.active #menbutton {
top: 13px;
}

a.menbutton {
width: 24px;
height: 24px;
background: url('../images/menbutton.svg') center center no-repeat;
background-size: 24px;
display: block;
text-decoration: none;
}

#menextra {
position: absolute;
top: 2px;
left: 50%;
display: block;
width: auto;
transform: translateX(-50%);
text-align: center;
}

a.navlinke {
display: inline-block;
color: var(--blue);
font-size: 16px;
font-weight: var(--medium);
text-decoration: none;
line-height: 16px;
height: auto;
margin-right: 16px; 
padding-top: 26px;
}

.icon-shop {
background: url('../images/shop.png') center top no-repeat;
background-size: 30px 24px;
}

.icon-otv {
background: url('../images/otv.png') center top no-repeat;
background-size: 30px 24px;
}

.icon-web {
background: url('../images/website.png') center top no-repeat;
background-size: 24px 24px;
}

.icon-mo {
background: url('../images/login.png') center top no-repeat;
background-size: 23px 24px;
}

.icon-lo {
background: url('../images/logout.png') center top no-repeat;
background-size: 21px 24px;
}

.icon-ad {
background: url('../images/admin.png') center top no-repeat;
background-size: 24px 24px;
}

.icon-op {
background: url('../images/organo.premium.png') center top no-repeat;
background-size: 82px 36px;
width: 83px;
height: 36px !important;
}

.icon-shop:hover {
background: url('../images/shop.active.png') center top no-repeat;
background-size: 30px 24px;
}

.icon-otv:hover {
background: url('../images/otv.active.png') center top no-repeat;
background-size: 30px 24px;
}

.icon-web:hover {
background: url('../images/website.active.png') center top no-repeat;
background-size: 24px 24px;
}

.icon-mo:hover {
background: url('../images/login.active.png') center top no-repeat;
background-size: 23px 24px;
}

.icon-lo:hover {
background: url('../images/logout.active.png') center top no-repeat;
background-size: 21px 24px;
}

.icon-ad:hover {
background: url('../images/admin.active.png') center top no-repeat;
background-size: 24px 24px;
}

.icon-shop2 {
background: url('../images/shop.png') left bottom no-repeat;
background-size: 30px 24px;
}

.icon-otv2 {
background: url('../images/otv.png') left bottom no-repeat;
background-size: 30px 24px;
}

.icon-web2 {
background: url('../images/website.png') left bottom no-repeat;
background-size: 24px 24px;
}

.icon-mo2 {
background: url('../images/login.png') left bottom no-repeat;
background-size: 23px 24px;
}

.icon-shop2:hover {
background: url('../images/shop.active.png') left bottom no-repeat;
background-size: 30px 24px;
}

.icon-otv2:hover {
background: url('../images/otv.active.png') left bottom no-repeat;
background-size: 30px 24px;
}

.icon-web2:hover {
background: url('../images/website.active.png') left bottom no-repeat;
background-size: 24px 24px;
}

.icon-mo2:hover {
background: url('../images/login.active.png') left bottom no-repeat;
background-size: 23px 24px;
}


@media only screen and (max-width: 1740px) {
#logo { right: 36px; }
#menu { left: 36px; }
a.navlink { font-size: 19px; line-height: 19px; margin-right: 24px; }
}

@media only screen and (max-width: 1600px) {
#mo-menu { height: 42px; }
#topnav { top: 42px; }
a.navlink { font-size: 18px; line-height: 18px; margin-right: 24px; }
a.navlinke { padding-top: 22px; }
.icon-shop, .icon-shop:hover, .icon-shop2, .icon-shop2:hover { background-size: 25px 20px; }
.icon-web, .icon-web:hover, .icon-web2, .icon-web2:hover { background-size: 20px 20px; }
.icon-mo, .icon-mo:hover, .icon-mo2, .icon-mo2:hover { background-size: 19px 20px; }
.icon-ad, .icon-ad:hover { background-size: 20px 20px; }
.icon-lo, .icon-lo:hover { background-size: 18px 20px; }
.icon-op { background-size: 74px 32px; width: 75px; height: 32px !important; }
}

@media only screen and (max-width: 1520px) {
.icon-user:hover, .icon-phone:hover, .icon-email:hover { padding-left: 20px; width: 20px; }	
}

@media only screen and (max-width: 1440px) {
#mo-menu { height: 40px; }
#topnav { height: 78px; top: 40px; }
#logo { width: 100px; right: 30px; }
a.logo { padding: 12px 0px 12px; }
#menu { top: 30px; left: 30px; }
#topnav.active #menu { top: 14px; }
a.navlink { font-size: 18px; line-height: 18px; margin-right: 20px; }
a.navlinke { font-size: 14px; line-height: 14px; }
}

@media only screen and (max-width: 1340px) {
a.navlink { font-size: 17px; line-height: 17px; margin-right: 18px; }
}

@media only screen and (max-width: 1280px) {
a.navlinke { font-size: 12px; line-height: 14px; }
}

@media only screen and (max-width: 1240px) {
#topnav { height: 76px; }
#logo { right: 24px; }
#menu { top: 29px; left: 24px; }
#topnav.active #menu { top: 14px; }
a.navlink { font-size: 16px; line-height: 16px; margin-right: 18px; }
}


@media only screen and (max-width: 1110px) {
a.navlink { margin-right: 14px; }
}

@media only screen and (max-width: 1080px) {
#menu { display: none; }
#menbutton { display: inline-block; }
}

@media only screen and (max-width: 768px) {
#topnav { height: 70px; }
#logo { width: 90px; }
a.logo { padding: 10px 0px 10px; }
#menbutton { top: 23px; }
a.navlinke { margin-right: 12px; }
}

@media only screen and (max-width: 540px) {
#menextra { left: 20px; transform: translateX(0); }
}

@media only screen and (max-width: 510px) {
a.icon-me-h1 { display: none; }	
}

@media only screen and (max-width: 480px) {
#topnav { height: 64px; }
#logo { width: 80px; right: 20px; }
a.logo { padding: 8px 0px 8px; }
#menbutton { top: 20px; left: 20px; }
.icon-op { background-size: 68px 30px; width: 69px; height: 30px !important; }
}

@media only screen and (max-width: 436px) {
.opremium .icon-web { display: none !important; }
}

@media only screen and (max-width: 420px) {
a.icon-me-h2 { display: none; }	
}

@media only screen and (max-width: 379px) {
a.navlinke { margin-right: 10px; }
}

@media only screen and (max-width: 359px) {
#mo-menu { display: none; }
#logo { top: 0px; margin-top: 0px; }
#topnav { top: 0px; }
}