header{position:relative;height:220px;background-color:#499AE8;z-index:99}header .header-top{background-color:#418AD0}header .header-top .container{display:flex;flex-direction:row;justify-content:space-between}header .header-top #menu-kanal{position:relative}header .header-top #menu-kanal li{display:inline-block;padding:8px 20px 8px 0}header .header-top #menu-kanal li.active a span{transform:translateY(-100%)}header .header-top #menu-kanal li a{position:relative;height:17px;padding:0 9px 0 0;overflow:hidden;font-size:14px;color:#FFFFFF}header .header-top #menu-kanal li a:hover span{transform:translateY(-100%)}header .header-top #menu-kanal li a:focus span{transform:translateY(-100%)}header .header-top #menu-kanal li a span{position:relative;display:inline-block;transition:transform 0.3s}header .header-top #menu-kanal li a span::before{position:absolute;top:100%;content:attr(data-hover);font-weight:700;transform:translate3d(0, 0, 0)}header .header-top #menu-kanal li.kanal-lain:hover .kanal-expand,header .header-top #menu-kanal li.kanal-lain:focus .kanal-expand{display:flex;flex-direction:row;justify-content:space-between}header .header-top #menu-kanal li.kanal-lain .content-left{width:170px;padding-right:20px;margin-right:20px;border-right:2px solid #418AD0}header .header-top #menu-kanal li.kanal-lain .content-right{width:150px}header .header-top #menu-kanal li.kanal-lain i{position:relative;top:1px;padding-left:5px;transition:all .3s ease-in-out}header .header-top #menu-kanal li.kanal-lain .kanal-expand{display:none;position:absolute;top:33px;right:-33px;z-index:999;padding:8px 32px;background-color:#FFFFFF;border-radius:21px;box-shadow:0 1px 5px 0 #D4D4D4}header .header-top #menu-kanal li.kanal-lain .kanal-expand:hover .kanal-expand,header .header-top #menu-kanal li.kanal-lain .kanal-expand:focus .kanal-expand{display:flex;flex-direction:row;justify-content:space-between}header .header-top #menu-kanal li.kanal-lain .kanal-expand:before{position:absolute;top:-5px;right:63px;content:"";margin:0 30px;border-bottom:8px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}header .header-top #menu-kanal li.kanal-lain .kanal-expand li{display:block;padding:8px 0}header .header-top #menu-kanal li.kanal-lain .kanal-expand a{height:auto;text-align:center;padding:8px 40px;font-weight:700;color:#252525;transition:all .2s ease-in-out}header .header-top #menu-kanal li.kanal-lain .kanal-expand a:hover{color:#FFFFFF;background-color:#418AD0;border-radius:30px}header .header-top #social-media-header{padding:4px 0}header .header-top #social-media-header li{display:inline-block;padding:0 8px;line-height:12px}header .header-top #social-media-header li a{position:relative;height:27px;line-height:29px;padding:0 15px;color:#FFFFFF}header .header-top #social-media-header li a::before,header .header-top #social-media-header li a::after{position:absolute;width:25px;height:2px;background:#fff;content:'';opacity:0.2;transition:all 0.3s;pointer-events:none}header .header-top #social-media-header li a::before{top:0;left:0;transform:rotate(90deg);transform-origin:0 0}header .header-top #social-media-header li a::after{right:0;bottom:0;transform:rotate(90deg);transform-origin:100% 0}header .header-top #social-media-header li a:hover::before,header .header-top #social-media-header li a:hover::after{opacity:1}header .header-top #social-media-header li a:hover::before{left:50%;transform:rotate(0deg) translateX(-50%)}header .header-top #social-media-header li a:hover::after{right:50%;transform:rotate(0deg) translateX(50%)}header .header-top #social-media-header li a:focus::before,header .header-top #social-media-header li a:focus::after{opacity:1}header .header-top #social-media-header li a:focus::before{left:50%;transform:rotate(0deg) translateX(-50%)}header .header-top #social-media-header li a:focus::after{right:50%;transform:rotate(0deg) translateX(50%)}header .header-middle .container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:52px 0}header .header-middle #logo a{position:relative}header .header-middle #logo a::before,header .header-middle #logo a::after{position:absolute;content:'';opacity:1}header .header-middle #logo a::before{top:-20px;right:-35px;bottom:-20px;left:-35px;border-top:2px solid #fff;border-bottom:2px solid #fff;transform:scale(0, 1);transform-origin:0 0;opacity:1}header .header-middle #logo a::after{top:-35px;right:-20px;bottom:-35px;left:-20px;border-right:2px solid #fff;border-left:2px solid #fff;transform:scale(1, 0);transform-origin:100% 0}header .header-middle #logo a:hover::before,header .header-middle #logo a:hover::after{opacity:1;transform:scale(1);transition:opacity 0.35s, transform 0.35s}header .header-middle #search .search-field{position:relative}header .header-middle #search #search-input{width:100%;height:42px;margin:0 auto;padding:4px 16px 4px 48px;font-size:14px;font-weight:700;color:#1B4DA6;border:1px solid #F4F7FE;border-radius:30px;background-color:#F4F7FE;z-index:99;transition:all .3s ease-in-out}header .header-middle #search #search-input:focus{outline:none;padding:4px 48px 4px 48px}header .header-middle #search #search-input:focus ~ button.btn-reset{z-index:9}header .header-middle #search #search-input::placeholder{color:#499AE8}header .header-middle #search button{text-align:center}header .header-middle #search button:focus{outline:none}header .header-middle #search .btn-search{position:absolute;top:7px;left:15px;width:26px;height:26px;padding:4px;color:#499AE8;font-size:15px;border:none;background-color:#F4F7FE;border-radius:50%;z-index:99;cursor:pointer;transition:all .3s ease-in-out}header .header-middle #search .btn-reset{position:absolute;top:10px;right:10px;border:none;width:20px;height:20px;padding:0;color:#1B4DA6;line-height:20px;background-color:#F4F7FE;border:1px solid #F4F7FE;border-radius:50%;cursor:pointer;z-index:-1}header .header-middle #search .btn-reset:before{position:relative;top:1.4px;right:2px;font-size:14px}header .header-bottom #subkanal-navigation{position:relative;padding:0 20px;background-color:#418AD0;border-radius:40px;text-align:center}header .header-bottom #subkanal-navigation .subkanal{position:relative;display:inline-block;padding:12px 30px}header .header-bottom #subkanal-navigation .subkanal.active a::before,header .header-bottom #subkanal-navigation .subkanal.active a::after{opacity:1;transform:translateY(-1px)}header .header-bottom #subkanal-navigation .subkanal.active a::before{height:5px}header .header-bottom #subkanal-navigation .subkanal a::before,header .header-bottom #subkanal-navigation .subkanal a::after{position:absolute;top:0;left:0;width:100%;height:1px;background:#FFFFFF;content:'';opacity:0;transition:opacity 0.3s, height 0.3s}header .header-bottom #subkanal-navigation .subkanal a::after{top:100%;opacity:0;transition:transform 0.3s, opacity 0.3s;transform:translateY(-10px)}header .header-bottom #subkanal-navigation .subkanal a:hover::before,header .header-bottom #subkanal-navigation .subkanal a:hover::after{opacity:1;transform:translateY(-1px)}header .header-bottom #subkanal-navigation .subkanal a:hover::before{height:5px}header .header-bottom #subkanal-navigation .subkanal a:focus::before,header .header-bottom #subkanal-navigation .subkanal a:focus::after{opacity:1;transform:translateY(-1px)}header .header-bottom #subkanal-navigation .subkanal a:focus::before{height:5px}header .header-bottom #subkanal-navigation .title{text-align:left;font-weight:700;color:#FFFFFF}header .header-bottom #subkanal-navigation .subtitle{font-style:italic;color:#a4ccf3}.mask-header{position:absolute;top:203px;width:50%;height:40px;z-index:9;text-indent:-9999px;background-color:#499AE8}