/* Basic rules */
.wrapper-fluid { width: 100%; height: auto;display: inline-block;}
.navbar-header {display:none;visibility:hidden;}
.newheadermenu {float:left;text-align:center;width:100%;margin:0 auto;padding:0;background:#fff url("../img/newheadermenu_bg.png")repeat-x;height:61px;border-top:1px solid #eeeeee;position:relative;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* language switcher 01/2018 */
.countries-menu-block ul { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4;padding: 10px 0}
.countries-menu-block ul li { display: block;}
.countries-menu-block ul li a{ text-decoration: underline; color: #666; font-size: 14px;}
.countries-menu-block ul li a.active {color: #e50f2e;}
/* mobile menu 01/2018 */
ul.menu { text-align: center;display: inline-block;margin:0;padding:0;font-family: 'PT Sans Narrow', sans-serif;}
ul.menu li {float:left;border-left: 1px #fff solid; border-right: 1px #eeeeee solid;  height: 65px; padding: 0; margin: 0;position:relative; }
ul.menu li:first-child { border-left: none; }
ul.menu li:last-child { border-right: none; }
ul.menu li a { display: block; font-size: 19px; font-weight: 700; color: #666; margin: 0; padding: 20px 20px 0 20px; text-decoration: none;font-family:'PT Sans Narrow', Helvetica, Arial, Sans-Serif;}
ul.menu li:hover, ul.menu li.active-trail { background: #ffdb19;}
/* drop down */
ul.menu ul { opacity:0; visibility:hidden; position:absolute; top:65px; left:0;padding:0;background: -webkit-linear-gradient(left,#3b3637 0%,#1f191a 100%); width:400px;}
ul.menu li:hover > ul { opacity:1; visibility:visible; z-index:10;}
ul.menu ul.menu li { float:none !important; border-left: none;border-right:none;border-top:none;border-bottom:1px dotted #666}
ul.menu ul.menu li:last-child { float:none !important; border-left: none;border-right:none;border-top:none;border-bottom:1px dotted transparent !important}
ul.menu li.expanded ul.menu {-webkit-transition: all 0.35s; -moz-transition: all 0.35s;transition: all 0.35s;}
ul.menu li.expanded ul.menu .leaf { height: auto; padding: 10px 15px; width:auto ; text-align:left}
ul.menu ul.menu li.leaf a { color:#666; font-family: 'PT Sans Narrow', sans-serif; font-weight:400 !important; padding:13px 10px 13px 64px  }
ul.menu ul.menu .leaf:hover a {color: #fff;}
ul.menu li.expanded ul.menu li:hover {background:transparent !important;} 
/* icons */
.icon-map-marker { background: url("../img/icon-map-marker.png") 13px 7px no-repeat; }
.icon-map-marker:hover { background: url("../img/icon-map-marker.png") 13px -78px no-repeat; opacity: 1; }
.icon-shell-flag {background: url("../img/icon-shell-flag.png") 13px 7px no-repeat; }
.icon-shell-flag:hover { background: url("../img/icon-shell-flag.png") 13px -79px no-repeat; opacity: 1; }
.icon-partner-person {background: url("../img/icon-partner-person.png") 13px 7px no-repeat;}
.icon-partner-person:hover { background: url("../img/icon-partner-person.png") 13px -78px no-repeat; opacity: 1; }

 /* footer menu */
.menu.footer-menu { margin:15px 0 0;padding:0;background: transparent;}
.menu.footer-menu .leaf { float: none;padding:0 15px 2px 15px;margin:0;border-left:none !important;border-right: 1px solid white;height:auto !important;position:static;margin:0 0 4px 0} 
.menu.footer-menu .leaf a {display: inline-block; font-size: 16px; font-weight: 400; color: #fff; margin: 0; padding:0; text-decoration: none;}
.menu.footer-menu .leaf a:hover {background:transparent;text-decoration:none;}
.menu.footer-menu .leaf:hover {background:transparent;} 

/* footer menu 2 */
.footer-disclaimer .menu { margin:15px 0 0;padding:0;background: transparent;}
.footer-disclaimer .menu .leaf { float: none;padding:0 15px 2px 15px;margin:0;border-left:none !important;border-right: 1px solid white;height:auto !important;position:static;margin:0 0 4px 0} 
.footer-disclaimer .menu .leaf a {display: inline-block; font-size: 16px; font-weight: 400; color: #fff; margin: 0; padding:0; text-decoration: none;}
.footer-disclaimer .menu .leaf a:hover {background:transparent;text-decoration:none;}
.footer-disclaimer .menu .leaf:hover {background:transparent;} 

/* top button */
#ordercard-button-nh .button { font-size: 15px;font-weight: 400; padding: 0 20px; margin-left: 5px; height: 38px; line-height: 37px; border-radius: 0; background: #e50f2e; background-image:none }
#ordercard-button-nh .button:hover{background:#f62930;}
#ordercard-button-nh .button span::before { content:url('../img/ico-euroshellcard.png');position:relative;top:4px;margin-right:10px}
/* shell logo */
.shell-logo-block { position: absolute; left: 0; top: 0; width:120px; height:85px;background:#fff}
.shell-pecten-logo {display:none;visibility:hidden}
/* mobile-language */
.menu li.mobile-language {display:none;visibility:hidden}

/* Client tab */
.client-tab {display:none;visibility:hidden;}
.client-btn-box {width:100%;margin-bottom:8px}
.client-btn-box .btn-info {width:50%;float:left;margin: 0;}
.tab-container .number-highlight a { color: #e50f2e; font-weight: 700; font-size: 19px; line-height: 1.2;}
.client-tab-item a { color: #666; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;}

/* Cookies bar */
.sliding-popup-bottom { background: black; position: fixed; opacity: 0.95;}

/* Responsive */

@media (max-width: 1024px) { 
  #service-buttons-de-nh .button { font-size: 15px; font-weight: 400; padding: 8px 16px; margin-left: 5px; height: auto; border: 1px solid #e8e8e8; background: #f3f3f3; line-height: 1.2; border-radius: 0;  width: auto;   display: inline-block;}
  #ordercard-button-nh .button { font-size: 15px; font-weight: 400; padding: 4px 16px 10px; margin-left: 0; height: auto; line-height: 1.2; border-radius: 0; background: #e50f2e; width: auto;   display: inline-block;}
}

@media (max-width: 991px) { 
  ul.menu li a { display: block; font-size: 17px; font-weight: 700; color: #666; margin: 0; padding: 20px 20px 7px 20px; text-decoration: none;}
  .countries-menu-block ul { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3;padding: 10px 0}
  ul.menu ul { opacity: 0; visibility: hidden; position: absolute; top: 65px; left: 0; padding: 0; background: -webkit-linear-gradient(left,#3b3637 0%,#1f191a 100%); width: 250px;}
}

@media (max-width: 900px) { 
  figure.tab-image-de-nh { float:right;display:initial; visibility:visible; position: static; z-index: 2; margin-left: 90px; margin: 20px 0 0 120px;}
  .topheadline { width:50%;float:left; font-size: 29px;}  
  .newheaderfleetcor { float: left; width: 30%; height: 43px; margin: 20px 0 0 0;}
  .newheader { float: left; margin: 0; padding: 0; width: 100%; height: auto;}
  .newheaderbox { float: left; width: 35%; height: 137px; margin: 0; padding: 11px 0 0 0; text-align: center; color: #666; font-size: 16px; box-sizing: border-box;}
}

@media (max-width: 800px) { 
  .de section.top-banner { background-image: url("../img/de-promo-bg-2017-900px.jpg"); background-size: cover; height: auto; overflow: hidden; width: 100%;padding: 7px 0}
}

@media (min-width: 770px) { 
  .navbar-collapse {display: initial;visibility:visible;margin: 0;padding: 0;}
}

@media (max-width: 769px) { 
  .navbar-toggle { float: right; background-color: #c7c5c6; background-image: none; border: medium none; border-radius: 4px; height: 40px; margin-bottom: 8px; margin-right: 22px; margin-top: 12px; padding: 9px 10px; position: relative; width: 44px;}
  .navbar-toggle:hover { background:#777}
  .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; color: white; border: 2px solid white;}
  .countries-menu-block ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;padding: 10px 0}
  .collapse.in { display: block; width: 100%; position: relative; z-index: 20;border-bottom: 2px solid #777;}
  .navbar-collapse { z-index:20;padding-right: 0; padding-left: 0; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent;  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);  width: 100%;}
  .icon-map-marker, .icon-shell-flag, .icon-partner-person, .menu-sub li.icon-partner-person:hover, .menu-sub li.icon-shell-flag:hover, .menu-sub li.icon-map-marker:hover  {background: transparent;}

  ul.menu li:hover, ul.menu li.active-trail { background: transparent;}
  ul.menu ul.menu li.leaf a { color: #666; font-size:19px; font-family: 'PT Sans Narrow', sans-serif; font-weight: 400 !important; padding: 7px 0;}
  ul.menu li a { display: block; font-size: 20px; font-weight: 700; color: #666; margin: 0; padding: 2px 0 7px; text-decoration: none;}
  ul.menu ul.menu .leaf:hover a { color: #666;}
  ul.menu ul { opacity:1; visibility:visible; position:static;padding:0;background:transparent;width:100%;}
  ul.menu ul.menu li { float:left !important; border-left: none;border-right:none;border-top:none;border-bottom:1px dotted #666}
  ul.menu { width:100%;/*background:#eee;*/text-align: center;display: inline-block;margin:0;padding:0;font-family: 'PT Sans Narrow', sans-serif;}
  ul.menu li {width: 100%;float:none;border-left: none; border-right: none;  height: auto; padding: 0; margin: 0;position:relative; }
  .menu.footer-menu .leaf { float: none;padding:9px 0;margin:0;border-left:none !important;border-right: none; border-bottom: 1px dotted #444; height:auto !important;position:static;}
  .footer-disclaimer { background: #1f191a; color: #fff; padding: 15px 0 40px; text-align: center;}
  .menu.footer-menu .leaf:first-child { float: none;padding:9px 0;margin:0;border-left:none !important;border-right: none; border-bottom: 1px dotted #444; border-top: 1px dotted #444; height:auto !important;position:static;}
  
  /* footer menu 2 */
  .footer-disclaimer .menu .leaf { float: none;padding:9px 0;margin:0;border-left:none !important;border-right: none; border-bottom: none; height:auto !important;position:static;}
  .footer-disclaimer .menu .leaf:first-child { float: none;padding:9px 0;margin:0;border-left:none !important;border-right: none; border-bottom: none; border-top: 1px dotted #444; height:auto !important;position:static;}  
  
  .shell-logo-block, .mob-left-part {display:none;visibility:hidden}
  .deform { float: right; margin: 15px 0 0 0; height: auto; width: 100%; background: #c7c5c6; box-shadow: none; padding: 10px 18px 16px 18px;}
  .newheader { position: relative; float: left; margin: 0; padding: 0; width: 100%; height: auto;}  
  .newheaderbox { float: left; width: 50%; height: auto; margin: 0; padding: 11px 0 0 0; text-align: center; color: #666; font-size: 16px;position: relative;z-index: 50;}
  .shell-pecten-logo { display: initial;  visibility: visible; right: 75px; width: 45px; top: 16px; position: absolute;}
  /* mobile-language */
  .menu li.mobile-language { display: inline-block; visibility: visible; position: relative; top: 12px; margin: 0; padding: 0; height: 57px;}
  /* menu */
  .newheadermenu { text-align: center; width: 70%; position: absolute; right: 0; background:transparent; border-top:none; top:7px;z-index: 60;}
  .navbar-header {display:initial;visibility:visible; float: right;top: 0px;position:relative}
  /* client tab 2.2. 2018 */
  .newheaderbox {display:none;visibility:hidden;}
  .client-tab {display:initial;visibility:visible; width: 100%; float: left;position:relative;z-index:50;}
  .client-tab button { width: 98%; float: left; position:relative;z-index:25; margin:0 1%}
  .client-btn-box .collapse.in  { display: block;width: 100%; position: relative; z-index: 20; border-bottom:none;margin-bottom:10px;}
  .client-btn-box .btn-info { background-color: #fff; border-color: none; color: #666; font-size: 17px; padding: 5px 0 10px;text-decoration:underline;border:none;white-space:initial;}
  .client-btn-box .btn-info:focus, .client-btn-box .btn-info:focus { color: #666; background-color: #fff !important; border-color: transparent; box-shadow: none; text-decoration:none;border:0; outline:none; box-shadow:none; }
  .client-btn-box .btn-info[aria-expanded="true"] {background:#f8f8f8 !important;text-decoration:none;}
  .client-tab .collapse > a {color: #666;font-size: 15px; line-height: 16px;text-decoration: none;text-decoration: none;font-weight: 700;}
  .client-tab .collapse .number-highlight a { color: #e50f2e; font-weight: 700; font-size: 19px; line-height: 19px;}
  .tab-container .button {margin-bottom:8px;}
  /* menu select */
  #language-panel {width: 94%; margin: 0 3% 0 3%; padding: 0 0 0 0;}
  /* icons */
  .icon-map-marker, .icon-map-marker:hover, .icon-shell-flag, .icon-shell-flag:hover, .icon-partner-person, .icon-partner-person:hover { background: none; }
  /* shell logo */
  #logo-shell-de { display:none;visibility:hidden;}
  
  .menu li { border-top: 1px dotted #444; width:100%; height:auto !important; }
  .menu li:first-child { border-top: none; height:auto !important;}
  
  ul.menu li.expanded ul.menu .first.leaf  { height: auto; padding: 0; text-align: center; border-bottom: none; border-top: none; width: 100%;}
  ul.menu li.expanded ul.menu .leaf { height: auto ; padding: 0; text-align: center; border-bottom: none; width: 100%; }

  ul.menu li.expanded ul.menu .last.leaf {display: inline-block; height: auto;}
  ul.menu li.expanded {display:flex;flex-direction:column;height:auto !mportant;}
  
  
  
}

@media screen and (max-width: 700px){
  .topheadline { padding: 7px 0 10px;font-size: 29px; float: left; display: inline-block; width: 100%; position:static; }
}

@media screen and (max-width: 600px){
  .topheadline h1 { font-size: 29px; display: inline;}
  .newheaderfleetcor { float: left; width: 100%; height: 41px; margin: 22px 0 0 0; padding-right: 50%;}
  /* de banner */
  .de .promo-autumn-2017-button-block { float: left; width: 100%; position: relative; padding: 0; margin: 0; text-align: center;}
  .de .promo-autumn-2017-arrow { background: #2b8ff0 url("../img/promo-autumn-2017-arrow.png") no-repeat scroll 50% 50%; border-radius: 100%; display: inline-block; height: 72px; margin: 15px 0 20px 0; position: static; text-align: center; width: 72px;}
  .de .promo-autumn-2017-button-block ul { border-radius: 16px;background: white; width: 100%; height: auto; margin: 0 0 0 0; text-align: center; box-shadow: 0px 0px 0px 6px rgba(0,0,0,0.1);}
  .de figure.banner-content { background-image: none; float: left; width: 98%;}
  /* shell logo */
  .shell-logo-block {position: absolute; left: 0; top: -65px; width: 90px; height:auto;background:transparent;}
  /* carusel block */
  .carousel-de { background: #df1f26;  min-height: 380px; width: 100%; float: left; padding: 0 2%;}
  /* form */
  .deform { float: right; margin: 20px 0 0; height: auto; width: 100%; background: #c7c5c6; box-shadow: none; padding: 10px 18px 16px 18px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

}

@media screen and (max-width: 560px){
  .topheadline h1 { font-size: 29px; display: inline;visibility:visible;}
  .client-tab .tab-content > .active { position: inherit; background: #f8f8f8;display: table;width: 100%;padding: 12px 15px;margin-bottom: 10px;text-align: center !important;}
  #service-buttons-de-nh, #ordercard-button-nh { position:initial;}
}
@media screen and (max-width: 470px){
   .client-btn-box {width:100%}
   .client-tab-btn {width:100%}
   .client-tab-item {width:100%;text-align:center}
}

@media screen and (max-width: 414px){
   .client-btn-box {width:100%}
}

@media screen and (max-width: 360px){
  figure.tab-image-de-nh img {width: 95%;}
  .navbar-toggle {  float: right; background-color: #048fd0; background-image: none; border: medium none; border-radius: 4px; height: 40px; margin-bottom: 8px; margin-right: 15px; margin-top: 12px; padding: 9px 10px;  position: relative;  width: 44px;}
  .shell-pecten-logo { display: initial; visibility: visible; right: 63px; width: 44px; top: 16px; position: absolute;}
  .newheaderfleetcor { float: left; width: 100%; height: 41px; margin: 22px 0 0 0; padding-right: 40%;}
}

/* change language block */
.newheaderfleetcor { float: left; width: 25%; height: 117px; margin: 20px 5% 0 0; position: relative;}
.logo-language-switcher { float: left; width: auto; height: auto; margin: 0 0 0 0; position: absolute; bottom: 0;}
.country-switcher { display: block; padding: 7px 15px; background-color: #eee; font-size: 16px; position: relative; bottom: 0; left: 0; cursor: pointer;}


@media (max-width: 769px) { 
  .newheaderfleetcor { float: left; width: 25%; height: 75px; margin: 20px 5% 0 0; position: relative;}
  .countries-menu-block {position: relative;top: -1px;}
  .newheaderfleetcor {float: left; width: 100%; height: auto; margin: 20px 5% 0 0; padding: 0 0 15px;}
  .newheaderfleetcor .newheaderlogo { width: 250px; height: auto;}
  .logo-language-switcher { float: left; width: 100%; height: 37px; margin: 0 0 0 0; position: initial; bottom: 0;}
  .navbar-toggle { float: right; background-color: #c7c5c6; background-image: none; border: medium none; border-radius: 4px; height: 40px; margin-bottom: 8px; margin-right: 22px; margin-top: 6px; padding: 9px 10px; position: relative;  width: 44px;}
  .shell-pecten-logo {  display: initial; visibility: visible; right: 75px; width: 45px; top: 10px; position: absolute;}
  .navbar-collapse ul.menu { width: 100%; background: #e1e1e1; text-align: center; display: inline-block; margin: 0; padding: 0; font-family: 'PT Sans Narrow', sans-serif;}
  /*.footer-disclaimer ul.menu {background: #000 !mportant; margin:15px 0;}*/
}
@media (max-width: 414px) { 
  .newheaderfleetcor .newheaderlogo { width: 200px; height: auto;}
}

@media (max-width: 350px) { 
  .newheaderfleetcor .newheaderlogo { width: 170px; height: auto;}
}

/* change of banner NL, PL - 8.3. 2018 */
@media (max-width: 1023px) { 
  div.q2f16_banner { background: #ffdb19 url("../banner_april/images/2qf16-bg_higher.jpg") top right no-repeat !important;}
  div.q2f16_banner .message_nl, div.q2f16_banner .message { width: 50% !important; height: initial !important;}
  div.q2f16_banner .ctabox {  display: flex; flex-direction: row; align-content: space-between; flex-wrap: wrap; float: left; width: 100%; height: auto; margin: 15px 0; padding: 0; background:#ffdb19 url("../banner_april/images/ctatitle.png") 0 0 no-repeat !important;}
  div.q2f16_banner .ctabox .ctatitle_nl, div.q2f16_banner .ctabox .ctacall { flex:1 1 auto; width: auto;}
  
}  
@media (max-width: 640px) {   
  div.q2f16_banner { background: #ffdb19 url("../banner_april/images/2qf16-bg_higher.jpg");background-size: contain !important; background-repeat: no-repeat  !important;}
  div.q2f16_banner .message_nl, div.q2f16_banner .message { width: 100% !important; height: auto; margin-top:150px; background: #ffdb19;padding:15px 20px;}
  div.q2f16_banner .expires, .nl div.q2f16_banner .expires { float: left; height: auto; padding: 0; width: 100%; position: absolute;}
  div.q2f16_banner .ctabox {  display: flex; flex-direction: row; align-content: space-between; flex-wrap: wrap; float: left; width: 100%; height: auto; margin: 0; padding: 0; background:#ffdb19 url("../banner_april/images/ctatitle.png") 0 0 no-repeat !important;}
}


/* change FR top banner 19.4. 2018 */
@media (max-width: 768px) { 
  .fr_left_banner { float: left; width: 100%; height: auto; font-family: 'PT Sans','Arial','Helvetica','Sans-serif'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
  .carousel_fr .wrapper { display: flex;flex-direction: column;flex-wrap: wrap; }
  .fr_left_banner {order:2;margin-bottom: 100px;flex:1 0 auto;}
  .carousel_fr .wrapper .deform {flex:1 0 auto;}
  .carousel_fr { background: #df1f26 url(../img/carousel_fr_bg-940.png) 50% 190% no-repeat; min-height: auto;}
}

@media (max-width: 700px) { 
  .fr_left_banner { float: left; width: 100%; height: auto; font-family: 'PT Sans','Arial','Helvetica','Sans-serif'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
  .fr_left_banner .fr_signin { float: left; width: 100%; height: 70px; padding: 4px 0 0 44px; margin: 0 0 18px 0; color: #fff; font-size: 17px; font-weight: 700; background: url(../img/fr_signin-pen.png)0 50% no-repeat;}
}


@media (max-width: 620px) { 
  .fr_left_banner { visibility:visible;display:initial;}
  .top_smalltext {visibility:visible;display:initial;}
  figure.fr_smalltext {float: left; width: 100%;}
}

@media (max-width: 560px) { 
    .fr_left_banner {order:2;margin-bottom: 140px;}
  .carousel_fr {background: #df1f26 url(../img/carousel_fr_bg-940.png) 60% 155% no-repeat; min-height: auto;}
}

@media (max-width: 440px) { 
    .fr_left_banner {order:2;margin-bottom: 140px;}
  .carousel_fr {background: #df1f26 url(../img/carousel_fr_bg-940.png) 60% 145% no-repeat; min-height: auto;}
}

@media (max-width: 320px) { 
    .fr_left_banner {order:2;margin-bottom: 140px;}
  .carousel_fr {background: #df1f26 url(../img/carousel_fr_bg-940.png) 60% 135% no-repeat; min-height: auto;}
}