/*********************
 Styling used from the schippers.eu website to create a identical layout as the payment page
*********************/

body {
  font-family: "futura", Helvetica, Arial, sans-serif;
  font-size:   14px;
  line-height: 1.538461538;
  color:       #67767d;
  padding-bottom: 25px;
}

hr,
img {
  border: 0
}

a,
a:focus,
a:hover {
  cursor: pointer;
  text-decoration: none
}

.main-container {
  max-width: 1190px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.container-padding {
  width:       91.59664%;
  margin-left: 4.20168%;
}

/*********************
 FONTS
*********************/
@font-face {
  font-family: 'futura';
  src:         url(../fonts/futuralt-bold-webfont.eot);
  src:         url(../fonts/futuralt-bold-webfont.eot?#iefix) format('embedded-opentype'),
               url(../fonts/futuralt-bold-webfont.woff2) format('woff2'),
               url(../fonts/futuralt-bold-webfont.woff) format('woff'),
               url(../fonts/futuralt-bold-webfont.ttf) format('truetype'),
               url(../fonts/futuralt-bold-webfont.svg#futura_ltbold) format('svg');
  font-weight: 800;
  font-style:  normal;
}

@font-face {
  font-family: 'futura';
  src:         url(../fonts/futuralt-light-webfont.eot);
  src:         url(../fonts/futuralt-light-webfont.eot?#iefix) format('embedded-opentype'),
               url(../fonts/futuralt-light-webfont.woff2) format('woff2'),
               url(../fonts/futuralt-light-webfont.woff) format('woff'),
               url(../fonts/futuralt-light-webfont.ttf) format('truetype'),
               url(../fonts/futuralt-light-webfont.svg#futura_ltlight) format('svg');
  font-weight: 200;
  font-style:  normal;
}

@font-face {
  font-family: 'futura';
  src:         url(../fonts/futuralt-webfont.eot);
  src:         url(../fonts/futuralt-webfont.eot?#iefix) format('embedded-opentype'),
               url(../fonts/futuralt-webfont.woff2) format('woff2'),
               url(../fonts/futuralt-webfont.woff) format('woff'),
               url(../fonts/futuralt-webfont.ttf) format('truetype'),
               url(../fonts/futuralt-webfont.svg#futura_ltregular) format('svg');
  font-weight: 400;
  font-style:  normal;
}

@font-face {
  font-family: 'futura';
  src:         url(../fonts/futuralt-heavy-webfont.eot);
  src:         url(../fonts/futuralt-heavy-webfont.eot?#iefix) format('embedded-opentype'),
               url(../fonts/futuralt-heavy-webfont.woff2) format('woff2'),
               url(../fonts/futuralt-heavy-webfont.woff) format('woff'),
               url(../fonts/futuralt-heavy-webfont.ttf) format('truetype'),
               url(../fonts/futuralt-heavy-webfont.svg#futura_ltheavy) format('svg');
  font-weight: 600;
  font-style:  normal;
}

/*********************
 HEADER
*********************/
header.checkout {
  position:       relative;
  padding-bottom: 50px;
}

header.checkout .container {
  position: relative;
}

section.checkout_header {
  width: 100%;
}

section.checkout_header .back.to_webshop {
  height:   10px;
  display: inline-block;
  float: left;
}

section.checkout_header .back.to_webshop a {
  /*padding-left:    11px;*/
  font-weight:     600;
  font-size:       15px;
  /*background:      url("../images/carret_grey.svg") 0 3px no-repeat;*/
  /*background-size: 5px;*/
  float:           left;
  color:           #68757d;
  line-height:     1;
}

section.checkout_header .back.to_webshop:hover,
section.checkout_header .back.to_webshop:hover a {
  float:           left;
  background:      url("../images/carret_green.svg") 0 3px no-repeat;
  background-size: 5px;
  color:           #3ab05e;
}

section.checkout_header .order_help {
  float: right;
}

section.checkout_header .order_help {
  margin-bottom: -7px;
}

section.checkout_header .order_help a {
  font-size:       15px;
  font-weight:     600;
  background:      url("../images/icon_customer_server.svg") 0 0 no-repeat;
  background-size: 18px;
  line-height:     23px;
  float:           right;
  color:           #68757d;
  padding-left:    25px;
}

section.checkout_header .order_help:hover a {
  background:      url("../images/icon_customer_server.svg") 0 -23px no-repeat;
  color:           #3ab05e;
  background-size: 18px;
  float:           right;
  line-height:     23px
}

section.checkout_header .logo_wrapper {
  width:       100%;
  text-align:  center;
  padding-top: 50px;
}

section.checkout_header .logo_wrapper a {
  background: url("../images/schippers_logo.svg") 0 0 no-repeat;
  width:      240px;
  height:     90px;
  margin-top: 0;
  display:    inline-block;
}

/*********************
 Progress bar (steps)
*********************/

.checkout_menu {
  font-family: 'futura';
  font-size: 15px;
  font-weight: 600;
  float: left;
  height: 80px;
  display: inline-block;
}
.checkout_menu > div {
  display: inline-block;
  float: left;
  width: 100%;
  overflow: hidden;
}
.checkout_menu ul {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0 0 30px;
}
.checkout_menu ul li {
  float: left;
  display: block;
  width: 25%;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  z-index: 500;
}
.checkout_menu ul li:last-child {
  width: 25%;
}
@media screen and (max-width: 750px) {
  .checkout_menu ul li {
    float: left;
    display: block;
    width: 10%;
  }
  .checkout_menu ul li:last-child {
    width: 10%;
  }
}
.checkout_menu ul li:not(:first-child)::before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top-width: 25px;
  border-top-style: solid;
  border-top-color: #bec4c7;
  border-bottom-width: 25px;
  border-bottom-style: solid;
  border-bottom-color: #bec4c7;
  border-left-width: 12px;
  border-left-style: solid;
  border-left-color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 0px;
  position: absolute;
}
.checkout_menu ul li:not(:last-child)::after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top-width: 25px;
  border-top-style: solid;
  border-top-color: #fff;
  border-bottom-width: 25px;
  border-bottom-style: solid;
  border-bottom-color: #fff;
  border-left-width: 12px;
  border-left-style: solid;
  border-left-color: #bec4c7;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  right: 0px;
}
.checkout_menu ul li a {
  color: #fff;
  font-weight: 400;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.checkout_menu ul li a i {
  display: none;
}
.checkout_menu ul li div {
  color: #fff;
  font-weight: 400;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.checkout_menu ul li div i {
  display: none;
}
.checkout_menu ul li.active {
  background-color: #67767d;
}
.checkout_menu ul li.active.check::before {
  border-top-color: #67767d;
  border-bottom-color: #67767d;
}
.checkout_menu ul li.active.check::after {
  border-left-color: #67767d;
}
.checkout_menu ul li.active.check a i {
  display: inline;
  font-size: 1rem;
  color: #3ab05e;
}
.checkout_menu ul li.active.check:hover {
  /*background-color: #3ab05e;*/
}
.checkout_menu ul li.active.check:hover::before {
  /*border-top-color: #3ab05e;*/
  /*border-bottom-color: #3ab05e;*/
}
.checkout_menu ul li.active.check:hover::after {
  /*border-left-color: #3ab05e;*/
}
.checkout_menu ul li.active.check:hover a i {
  /*color: #fff;*/
}
@media screen and (max-width: 750px) {
  .checkout_menu ul li.active.current {
    float: left;
    display: block;
    width: 60%;
  }
  .checkout_menu ul li.active.current:last-child {
    width: 60%;
  }
}
.checkout_menu ul li.inactive {
  background-color: #bec4c7;
}
.checkout_menu ul li.inactive a {
  pointer-events: none;
  cursor: default;
}
@media screen and (max-width: 750px) {
  .checkout_menu ul li {
    background-size: 20px 50px !important;
  }
  .checkout_menu ul li a {
    margin-left: -10px;
  }
  .checkout_menu ul li a i {
    display: none;
  }

  .checkout_menu ul li div i {
    display: none;
  }
  .checkout_menu ul li.active {
    background-color: #67767d;
    margin: 0;
  }
  .checkout_menu ul li.active a {
    display: none;
  }
  .checkout_menu ul li.active a i {
    display: inline;
  }
  .checkout_menu ul li.active:hover {
    /*background-color: #67767d;*/
  }
  .checkout_menu ul li.active:hover a i {
    /*display: none;*/
  }
  .checkout_menu ul li.active.current {
    background-color: #67767d;
    margin: 0;
  }
  .checkout_menu ul li.active.current a {
    display: inline-block;
  }
  .checkout_menu ul li.active.current:hover {
    /*background-color: #3ab05e;*/
  }
  .checkout_menu ul li.active.current:hover a i {
    /*display: none;*/
  }
  .checkout_menu ul li.active:last-child {
    background-image: none;
  }
  .checkout_menu ul li.inactive {
    background-color: #bec4c7;
    margin: 0 0 0 -1px;
  }
  .checkout_menu ul li.inactive a {
    display: none;
  }
}