/************* 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.active {
  display: block;
}

.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-mo3 {
background: url('../images/login.png') left 6px center no-repeat;
background-size: 19px 20px;
}

.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-mo3:hover {
background: url('../images/login.active.png') left 6px center no-repeat;
background-size: 19px 20px;
}

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

.mrlmb { margin-bottom: 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-mo3 { padding-left: 35px; }
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;
}

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

#topnav.active {
height: 50px;
}

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

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

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

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

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

.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.navlinkc .hov1:after { background: rgba(239,122,78,1); height: 3px; }
a.navlinkc .hov2:after { background: rgba(0,124,139,1); height: 3px; }
a.navlinkc .hov3:after { background: rgba(176,199,142,1); height: 3px; }
a.navlinkc .hov4:after { background: rgba(205,176,200,1); height: 3px; }
a.navlinkc .hov5:after { background: rgba(109,163,216,1); height: 3px; }
a.navlinkc .hovx:after { background: var(--orange); height: 1px; }

a.navlink:hover .hover:after, a.navlinkc:hover .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: 30px;
left: 1200px;
width: auto;
}

#topnav.active #menextra {
top: 5px; 
}

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-mo {
background: url('../images/login.png') center top no-repeat;
background-size: 23px 24px;
}

.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-mo:hover {
background: url('../images/login.active.png') center top no-repeat;
background-size: 23px 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-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-mo2:hover {
background: url('../images/login.active.png') left bottom no-repeat;
background-size: 23px 24px;
}

#menicons {
position: absolute;
top: 40px;
right: 192px;
width: auto;
}

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

a.micon {
display: inline-block;
height: 24px;
width: 24px;
margin-left: 16px;
text-decoration: none;
overflow: hidden;
color: var(--blue);
font-size: 16px;
line-height: 24px;
white-space: nowrap;
padding-left: 24px;
font-weight: var(--light)
}

a.miht { opacity: 0.5; }
a.miht:hover { opacity: 1; }

a.mih1, a.mih2, a.mih3 { display: none; }

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

.icon-email {
background: url('../images/email.png') left center no-repeat;
background-size: 24px 18px;
}

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

.icon-phone.ipch:hover {
width: 146px;
}

.icon-email:hover {
background: url('../images/email.active.png') left center no-repeat;
background-size: 24px 18px;
width: 136px;
padding-left: 30px;
}

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

@media only screen and (max-width: 1800px) {
#menextra { left: 1160px; }
}

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

@media only screen and (max-width: 1600px) {
a.navlink { font-size: 18px; line-height: 18px; margin-right: 24px; }
#menicons { right: 180px; }
#menextra { left: 1000px; top: 32px; }
#topnav.active #menextra { top: 7px; }
a.navlinke { padding-top: 22px; }
.icon-shop, .icon-shop:hover, .icon-shop2, .icon-shop2:hover { background-size: 25px 20px; }
.icon-otv, .icon-otv:hover, .icon-otv2, .icon-otv2:hover { background-size: 25px 20px; }
.icon-mo, .icon-mo:hover, .icon-mo2, .icon-mo2:hover { background-size: 19px 20px; }
a.micon { font-size: 15px; width: 20px; height: 20px; padding-left: 20px; }
.icon-phone, .icon-phone:hover{ background-size: 20px 20px; }
.icon-email, .icon-email:hover { background-size: 20px 15px; }
}

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

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

@media only screen and (max-width: 1380px) {
#menextra { left: 880px;  }
}

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

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

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


@media only screen and (max-width: 1200px) {
.tnh1 { display: none !important; }
#menextra { left: 720px; }
}

@media only screen and (max-width: 1140px) {
#menextra { left: 690px; }
}

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

@media only screen and (max-width: 1080px) {
#menu { display: none; }
#menbutton { display: inline-block; }
#menicons { top: 26px; right: 156px; }
#menextra { display: none; }
a.mih1, a.mih2, a.mih3 { display: inline-block; }
}

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

@media only screen and (max-width: 480px) {
#topnav { height: 64px; }
#logo { width: 80px; right: 20px; }
a.logo { padding: 14px 0px; }
#menbutton { top: 20px; left: 20px; }
#menicons, #topnav.active #menicons { right: 146px; }
}

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

@media only screen and (max-width: 359px) {
#menicons, #topnav.active #menicons { right: 136px; }
a.mih1 { display: none; } 
}