@media only screen and (max-width:1600px){
  .header .container{width:100%}
}

@media only screen and (max-width:1550px){
  .header.header-style-alternate:not(.header-scroll){height:122px!important}
  .header.header-style-alternate:not(.header-scroll) .header-container .header-top .logo a img{max-height:122px}
}

@media only screen and (max-width:1450px){
  .header-style-default .header-container{width:100%}
}

/* blijft gewoon bestaan; dit is je "tussenstap" tot 1380px */
@media only screen and (max-width:1380px){
  .header,.header.header-style-alternate,.header.header-style-alternate.header-scroll{padding-left:0;padding-right:0}
  .header.header-style-alternate:not(.header-scroll){height:102px!important}
  .header.header-style-alternate:not(.header-scroll) .header-container .header-top .logo a img{max-height:102px}
}

/* WAS 1200px — is nu 1380px (hier klapt het menu in naar tablet/mobile menu) */
@media only screen and (max-width:1380px){
  .i-nav ul li a:hover{color:#242429!important}
  ul.sub-menu.i-dropdown.shown-menu{background:#f9f9f9}
  #quicksearch-mobile-modal{padding-right:0!important}
  #quicksearch-mobile-modal .is-focused .instant-results:before{display:none}
  #quicksearch-mobile-modal .instant-results ul li.ir-cat{padding:6px 15px;font-size:14px}
  #quicksearch-mobile-modal .instant-results ul li a{font-size:15px;padding:10px 15px}
  #quicksearch-mobile-modal .instant-results{top:80px}
  #quicksearch-mobile-modal .modal-dialog{width:100%;position:absolute;top:0}
  #quicksearch-mobile-modal .modal-content{border-radius:0;box-shadow:none;border:none}
  .header-right .user-profile-dropdown{display:none!important}
  #quicksearch-mobile-modal button.close{position:absolute;z-index:20000;opacity:1;right:15px;top:22px;width:35px;background:transparent;border:1px solid rgba(0,0,0,.1);height:35px;display:flex;align-items:center;justify-content:center;border-radius:40px;transition:.2s ease}
  #quicksearch-mobile-modal button.close span{font-size:0}
  #quicksearch-mobile-modal button.close:before{content:"\e5cd";font-size:20px;opacity:.5;font-family:Material Icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;text-rendering:auto;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0)}
  .i-dropdown li a{font-size:15px}
  .i-dropdown .submenu-toggle{display:flex}
  .user-profile-name .submenu-toggle{opacity:1;width:0;display:inline-block;opacity:.3}
  .user-profile-dropdown{float:none}
  .user-profile-name:hover .submenu-toggle{opacity:1}
  .i-nav>ul>li{display:block}
  .header-menu-left .i-nav>ul,.header-menu-right .i-nav>ul{display:block;height:auto}
  .user-area .open>ul.dropdown-menu{top:60px}
  .c27-header-search-form{display:none!important}
  .user-profile-dropdown{padding-bottom:0!important;width:100%;text-align:center;height:100%}
  .user-profile-dropdown .user-profile-name{padding:0 15px;text-align:left;display:flex;align-items:center;color:#242429!important;white-space:nowrap;overflow:hidden;margin-right:58px;text-overflow:ellipsis;height:100%;font-weight:600}
  .mobile-user-menu i{font-size:24px;width:40px}
  .user-profile-dropdown .user-profile-name .submenu-toggle i{color:#000}
  .user-profile-dropdown .user-profile-name:hover{color:#242429}
  .user-profile-dropdown .user-profile-name .avatar{min-width:32px;margin-right:10px;display:block}
  .header-right{height:38px}
  .user-area .user-profile-name{margin-right:0}
  .header-right a.view-cart-contents{margin-left:0!important}
  .header-right>div,body:not(.logged-in) .header-right a.view-cart-contents{margin:0 0 0 20px!important}
  .mobile-nav-button .header-button{background:#fff;padding:0;height:100%;width:100%;display:flex;align-items:center}
  .mobile-nav-button .header-button a{padding:0;background:var(--accent);color:#fff;height:100%;width:100%;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:0}
  .mobile-nav-button .header-button a i{vertical-align:middle;float:none;top:0;color:#fff}
  .header-right .header-button{display:none}
  .header .header-container .header-top .logo{display:flex;align-items:center;height:40px}
  .signin-area{display:none}
  .mobile-nav-head{display:block;padding:0;border-bottom:1px solid rgba(0,0,0,.1);display:flex;align-items:center;height:62px}
  .main-nav li a>i{display:block;float:left;font-size:24px;position:relative;color:#484848!important;width:40px}
  .header-light-skin .header-skin{background:#fff;border-bottom:1px solid #e3e3e3}
  .header-light-skin .user-area>i.user-area-icon{font-size:28px;top:-3px}
  .header-light-skin .user-area>a,.header-scroll.header-scroll-light-skin .mobile-menu-lines i,.header-scroll.header-scroll-light-skin .search-trigger a i,.header-scroll.header-scroll-light-skin .user-area .user-profile-name i,.header-scroll.header-scroll-light-skin .user-area>span{color:#242429}
  .header-dark-skin .user-area>a,.header-dark-skin .user-area>span{color:#fff}
  .header-light-skin .search-trigger a i,.header-light-skin .user-area .user-profile-name i,.header-light-skin .user-profile-name{color:#484848}
  .header-scroll.header-scroll-dark-skin .mobile-menu-lines i,.header-scroll.header-scroll-dark-skin .search-trigger a i,.header-scroll.header-scroll-dark-skin .user-profile-name{color:#fff}
  .header-scroll.header-scroll-dark-skin .user-area .user-profile-name i{color:hsla(0,0%,100%,.3)}
  .header-scroll.header-scroll-dark-skin .user-area>a{color:#fff}
  .header-light-skin .mobile-menu a span{background:#242429}
  .search-trigger a i{padding-top:0!important}
  .header.header-scroll{transition:initial;background:initial;padding:initial;height:auto}
  .search-trigger{display:block;margin-right:0}
  .search-trigger a i{font-size:22px}
  .header .user-area{margin-right:20px;margin-top:9px}
  .header-top{position:relative;padding:20px}
  .user-area .user-profile-name i{right:4px;top:2px}
  .mobile-menu{display:block;margin-right:30px;background:transparent}
  .mobile-user-menu ul{margin-bottom:0}
  .mnh-close-icon{display:block;float:left;margin-right:0;width:40px;height:40px;background:transparent;text-align:center;border-radius:50%;position:absolute;right:10px;z-index:4}
  .header.header-scroll.header-scroll-light-skin .mobile-menu a>div:active,.header.header-scroll.header-scroll-light-skin .search-trigger a i:active,.mnh-close-icon:active{background:rgba(0,0,0,.03)}
  .mnh-close-icon i{font-size:28px;text-align:center;padding-top:6px;float:unset;font-weight:unset}
  .mnh-close-icon i,.mnh-close-icon i.close:focus,.mnh-close-icon i.close:hover{color:#242429;opacity:1}
  .mobile-menu-lines i{font-size:28px;text-align:center;padding-top:6px;color:#242429;transition:all .2s ease}
  .header-dark-skin .mobile-menu-lines i{color:#fff}
  .mobile-menu a>div{position:relative;border-radius:50%}
  .mobile-menu a span{height:2px;width:25px;background:#fff;display:block;margin-bottom:10px;margin-left:8px;margin-top:2px;transition:all .6s ease;transform:rotate(0deg);position:absolute}
  .mobile-menu div span:nth-child(2){top:8px}
  .header .container{width:100%;padding:0}
  .header,.header.header-style-alternate,.header.header-style-alternate:not(.header-scroll),.header.header-style-default{padding:0!important;height:80px!important}
  .header .header-container .header-top .logo a img,.header.header-style-alternate:not(.header-scroll) .header-container .header-top .logo a img{max-height:50px}
  .i-nav .main-nav{margin-top:0!important}
  .header-light-skin.header-dark-skin .user-area .user-profile-name,.header-light-skin.header-dark-skin .user-area a[data-toggle=modal]{color:#fff}
  .header.header-light-skin.header-dark-skin .header-skin{border-color:transparent}
  .header.header-light-skin:not(.header-scroll) .mobile-menu a span,.header.header-scroll.header-scroll-light-skin .mobile-menu a span{background:#242429}
  .user-area>a,.user-area>span{opacity:1!important}
  .header ::-webkit-input-placeholder{color:#1d1d23!important}
  .header ::-moz-placeholder{color:#1d1d23!important;opacity:1}
  .header :-ms-input-placeholder{color:#1d1d23!important}
  .header :-moz-placeholder{color:#1d1d23!important;opacity:1}
  .i-nav{padding:0;display:block;clear:both;width:400px;transform:translateX(-400px);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-overflow-scrolling:touch;text-align:center;margin-top:-1px;position:fixed!important;overflow-y:auto;transition:transform .3s ease;right:unset!important}
  .i-nav,.i-nav-overlay{opacity:0;height:100vh;z-index:100;top:0;left:0}
  .i-nav-overlay{width:100%;background:rgba(29,29,31,.5);position:absolute;visibility:hidden;transition:opacity .25s ease-in-out}
  .main-nav li.current-menu-item a>i{color:var(--accent)}
  .mobile-menu-open{z-index:101;transition:transform .3s cubic-bezier(0,.52,0,1);right:unset!important;opacity:1;transform:translateX(0)}
  .mobile-menu-open~.i-nav-overlay{opacity:1;visibility:visible}
  .i-nav .main-nav{width:100%;margin-bottom:0}
  .i-nav>ul>li.current-menu-item>a{border-right:2px solid var(--accent);color:var(--accent)}
  .main-menu .submenu-toggle{width:50px;height:50px;justify-content:center;position:absolute;top:0;right:0;cursor:pointer}
  .main-menu .submenu-toggle i{color:#000;right:0;font-size:22px}
  .main-menu a[href="#"]~.submenu-toggle{width:100%}
  .main-menu a[href="#"]~.submenu-toggle i{position:absolute;right:15px}
  .mobile-menu-open .main-nav{left:0}
  .mobile-nav-button{height:50px;overflow:hidden;bottom:0;width:100%;margin-top:-1px;margin-bottom:120px}
  .i-nav ul li{display:block;float:none;width:100%;margin:0;border-bottom:1px solid rgba(0,0,0,.1)}
  .i-nav ul li a{padding:0 20px;height:50px;width:100%;border-bottom:none;margin-left:0!important;color:#242429;opacity:1;text-align:left;transition:background .2s ease,color .2s ease;font-weight:600;line-height:18px;display:flex;align-items:center}
  .i-nav ul li a.active{color:#242429}
  .mobile-menu-open .i-dropdown>li:first-child{border-top:1px solid rgba(0,0,0,.1)}
  .mobile-menu-open .header-search{width:100%}
  .mobile-menu-open .i-dropdown{background:transparent;box-shadow:none;width:100%;position:static;opacity:1!important;visibility:visible!important;display:none;margin-top:0;text-align:center;margin-bottom:0;padding:0;transform:none}
  .mobile-menu-open .i-dropdown:before{content:none}
  .mobile-menu-open .i-dropdown li a i{display:none}
  .mobile-menu-open .i-dropdown li:last-child{border-bottom:none}
  .mobile-menu-open .i-dropdown.id-open{display:block}
  .mobile-menu-open .i-dropdown li a{color:#242429;text-transform:none;font-size:14px;padding-left:20px}
  .mobile-menu-open .i-dropdown .i-dropdown .i-dropdown li a:hover{background:transparent;border-color:transparent;color:var(--accent)}
  .mobile-menu-open .i-dropdown li a:hover{color:var(--accent);padding-left:20px!important}
  .header-light-skin .header-right .header-button a.buttons{color:#242429}
  .header-right .header-button a.buttons i{font-size:22px}
  .header-scroll-light-skin.header-scroll .header-right .header-button a.buttons{color:#242429!important}
  .header-scroll-dark-skin.header-scroll .header-right .header-button a.buttons{color:#fff!important}
  body:not(.logged-in) .view-cart-contents{margin-top:10px;margin-right:15px}
  .c27-main-header.header-scroll .i-nav.mobile-menu-open,.i-nav{background-color:#fff!important}
  .c27-top-content-margin{height:80px}
  .header-menu-center .i-nav{max-width:unset!important}
}

@media only screen and (max-width:768px){
  .user-area .dropdown-menu{right:0!important;left:0!important;position:fixed;width:100%;top:78px}
  .user-area .open>ul.dropdown-menu{top:78px!important}
  .user-area .dropdown-menu a{font-size:16px}
  .user-area .dropdown-menu a:hover{padding-left:0}
  .mob-sign-in{display:block!important;position:relative;float:left}
  .user-area div.avatar{width:24px!important;height:24px!important}
  .header-right>div,.inbox-header-icon,body:not(.logged-in) .header-right a.view-cart-contents{margin-left:20px!important}
  .user-area.signin-area{display:none}
  .inbox-header-icon i,.mob-sign-in i,.search-trigger a i,.view-cart-contents>span{font-size:26px!important}
  .mobile-menu{margin-right:10px}
  .i-nav{width:350px;transform:translateX(-352px)}
  .mobile-menu-open{transform:translateX(0)}
  .header .user-area{margin-right:15px}
}

@media only screen and (max-width:600px){
  .admin-bar #c27-site-wrapper .header.header-scroll-admin-bar{top:0!important}
}

@media only screen and (max-width:480px){
  #quicksearch-mobile-modal .instant-results{top:60px}
  #quicksearch-mobile-modal button.close{top:12px}
  .user-area .dropdown-menu{top:58px}
  .user-area .open>ul.dropdown-menu{top:58px!important}
  .i-nav{width:300px;transform:translateX(-300px)}
  .mobile-menu-open{transform:translateX(0)}
  .mob-sign-in{margin-right:0}
  .header-dark-skin .user-area>a,.header-dark-skin .user-area>i.user-area-icon,.header-dark-skin .user-area>span{color:#242429!important}
  .header .header-container .header-top .logo a img,.header.header-style-alternate:not(.header-scroll) .header-container .header-top .logo a img{max-height:40px}
  .mobile-menu a span{width:20px}
  .header,.header.header-style-alternate,.header.header-style-alternate:not(.header-scroll),.header.header-style-default{height:60px!important}
  .header-top{padding:10px}
  .user-area .user-profile-name{font-size:0}
  .user-area .avatar{margin-right:0!important}
  .user-area .user-profile-name i{right:5px!important}
  .c27-top-content-margin{height:60px}
}

@media only screen and (max-width:320px){
  .header-right{position:absolute;right:10px}
  .i-nav{width:240px;transform:translateX(-240px)}
  .mobile-menu-open{transform:translateX(0)}
  .header .logo img{height:20px!important}
  .user-area .avatar{width:26px;height:26px;top:-3px}
}

/* WAS max 1200 — nu max 1380 */
@media (min-width:769px) and (max-width:1380px){
  .mob-sign-in{display:none}
  .header .user-area>i.user-area-icon{font-size:24px}
  .inbox-header-icon i,.mob-sign-in i,.search-trigger a i,.view-cart-contents>span{font-size:26px!important}
}

/* WAS min 1201 — nu min 1381 */
@media only screen and (min-width:1381px){
  body.admin-bar .c27-main-header.header.header-fixed{top:32px}
  .header-container>.container{height:52px;min-height:unset}
  .header-container .header-top{height:100%;justify-content:space-between}
  .header-container .header-top:after,.header-container .header-top:before{display:none}
  .header.header-style-alternate.header-scroll .header-container .header-top .logo a img,.header.header-style-default .header-container .header-top .logo a img{max-height:89px}
  .i-dropdown li a i.mi,.main-nav>li>a>i.mi{font-size:inherit;position:relative;top:2px}
  .main-nav li a>i{display:none}
  .i-nav .main-menu>li.menu-item:first-child>a{padding-left:0}
  .i-nav .main-menu li.menu-item:first-child ul.i-dropdown{margin-left:-15px}
  .main-nav ul.sub-menu li.has-children:after,.main-nav ul.sub-menu li.menu-item-has-children:after{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:rgba(0,0,0,.3)!important}
  .main-nav li:hover>.i-dropdown{display:block!important;opacity:1;visibility:visible;top:40px;pointer-events:all;left:0;transform:translateY(0)}
  .user-profile-dropdown:hover .i-dropdown{opacity:1!important;transition:all .2s;top:51px;visibility:visible;transform:translateY(0)}
  .header.header-transparent-skin .header-skin{border-bottom:1px solid hsla(0,0%,100%,.2)}
  .header.header-transparent-skin.header-scroll .header-skin{border-bottom:1px solid hsla(0,0%,100%,0)}
  .header.header-light-skin:not(.header-scroll) .header-skin,.header.header-scroll.header-scroll-light-skin .header-skin{background:#fff}
  .header-light-skin:not(.header-scroll) .main-nav li.has-children:after,.header-light-skin:not(.header-scroll) .main-nav li.menu-item-has-children:after,.header.header-scroll.header-scroll-light-skin .main-nav li.has-children:after,.header.header-scroll.header-scroll-light-skin .main-nav li.menu-item-has-children:after{color:rgba(0,0,0,.3)}
  .header-light-skin:not(.header-scroll) .user-area .user-profile-name,.header-light-skin:not(.header-scroll) .user-area a[data-toggle=modal],.header.header-scroll.header-scroll-light-skin .user-area .user-profile-name,.header.header-scroll.header-scroll-light-skin .user-area a[data-toggle=modal]{color:#242429}
  .header-light-skin:not(.header-scroll) .user-area .user-profile-name i,.header.header-scroll.header-scroll-light-skin .user-area .user-profile-name i{color:rgba(0,0,0,.3)}
  .header-light-skin:not(.header-scroll) .header-search input,.header.header-scroll.header-scroll-light-skin .header-search input{color:#1d1d23;font-weight:400}
  .header-light-skin:not(.header-scroll) .header-search input:focus,.header.header-scroll.header-scroll-light-skin .header-search input:focus{padding-left:30px}
  .header.header-light-skin:not(.header-scroll) .i-nav>ul>li .submenu-toggle i,.header.header-light-skin:not(.header-scroll) .i-nav>ul>li>a,.header.header-light-skin:not(.header-scroll) .user-area>a,.header.header-light-skin:not(.header-scroll) .user-area>span,.header.header-scroll.header-scroll-light-skin .i-nav>ul>li .submenu-toggle i,.header.header-scroll.header-scroll-light-skin .i-nav>ul>li>a,.header.header-scroll.header-scroll-light-skin .user-area>a,.header.header-scroll.header-scroll-light-skin .user-area>span{color:#242429}
  .header.header-scroll.header-scroll-light-skin .header-skin{background:#fff}
  .header-light-skin:not(.header-scroll) .header-search>i,.header.header-scroll.header-scroll-light-skin .header-search>i{color:#767676}
  .header-light-skin:not(.header-scroll) ::-webkit-input-placeholder,.header.header-scroll.header-scroll-light-skin ::-webkit-input-placeholder{color:#1d1d23!important}
  .header-light-skin:not(.header-scroll) ::-moz-placeholder,.header.header-scroll.header-scroll-light-skin ::-moz-placeholder{color:#1d1d23!important;opacity:1}
  .header-light-skin:not(.header-scroll) :-ms-input-placeholder,.header.header-scroll.header-scroll-light-skin :-ms-input-placeholder{color:#1d1d23!important}
  .header-light-skin:not(.header-scroll) :-moz-placeholder,.header.header-scroll.header-scroll-light-skin :-moz-placeholder{color:#1d1d23!important;opacity:1}
  .main-nav .i-dropdown{transition:all .2s;pointer-events:none}
  .header.header-style-alternate.header-dark-skin,.header.header-style-alternate.header-light-skin,.header.header-style-alternate.header-transparent-skin{height:auto}
  .header.header-style-alternate.header-dark-skin.header-scroll,.header.header-style-alternate.header-light-skin.header-scroll,.header.header-style-alternate.header-transparent-skin.header-scroll{height:89px}
  #quicksearch-mobile-modal,.mob-sign-in,.mobile-nav-button .header-button{display:none!important}
  .c27-top-content-margin{height:89px}
  .header-menu-center .header-center{width:100%;position:absolute;height:100%;left:0;z-index:1;justify-content:center}
  .header-menu-center .i-nav>ul{margin:0;height:50px;display:flex}
  .header-width-boxed .header-container{position:relative}
  header.c27-main-header.header-width-boxed{display:flex;justify-content:center}
  .header-menu-center .i-nav>ul{flex-wrap:wrap;align-items:center;height:unset;justify-content:center}
  .header-menu-center .i-nav>ul>li{height:30px}
  .header-menu-center .i-nav>ul>li:hover>.i-dropdown{top:30px}
  .header-menu-center .i-nav>ul>li:hover>.i-dropdown:after{content:"";height:10px;display:block;position:absolute;top:-10px;width:100%}
  .header.header-menu-left.header-width-boxed .header-center{margin-left:0}
}

/* Subrange: WAS 1301–1350 — nu 1381–1450 */
@media (min-width:1381px) and (max-width:1450px){
  .main-nav>li.menu-item>ul.i-dropdown{left:0}
  .i-nav .main-menu>li.menu-item:first-child>ul.i-dropdown{left:20px}
}

/* deze ranges blijven goed (sluiten aan op max-width:1380 hierboven) */
@media (min-width:1381px) and (max-width:1550px){
  .c27-main-header.header-style-alternate+.c27-top-content-margin{height:122px}
}

@media (min-width:1551px){
  .c27-main-header.header-style-alternate+.c27-top-content-margin{height:132px}
}
