/* GLOBAL */
a, a:hover {
  transition: 0.7s;
}
/* Heating Oil */
.heating-oil-container {
  background-image: url("../images/heating-oil-bg-image.jpg");
  background-size: cover;
  background-position: center left;
}
.heating-oil-container .width-main-wraper {
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
}
.heating-oil-order-box {
  background-image: url("../images/heating-oil-order-box-bg.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #212121;
  height: 468px;
  width: 400px;
  text-align: center;
}
.global-oil-tanker {
  align-self: center;
  flex-grow: 2;
  text-align: right;
}
.heating-oil-order-box .add-to-basket button {
  background-color: #aae2ff;
}
/* Red Diesel */
.red-diesel-container {
  background-image: url("../images/global-oil-red-diesel-bg.jpg");
  background-size: cover;
  background-position: center center;
}
.red-diesel-container .width-main-wraper {
  padding: 30px 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: flex-end;
  width: 100%;
}
.red-diesel-order-box {
  background-image: url("../images/red-diesel-order-box-bg.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #212121;
  height: 468px;
  width: 400px;
  text-align: center;
}
.red-diesel-order-box .add-to-basket button {
  background-color: #ffe557;
}
/* Gas */
.gas-container {
  background-image: url("../images/gas-cooking.jpg");
  background-size: cover;
  background-position: center center;
}
.gas-container .width-main-wraper {
  padding: 30px 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: flex-end;
  width: 100%;
}
.gas-order-box {
  background-image: url("../images/gas-box-bg.png");
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #212121;
  height: 580px;
  width: 400px;
  text-align: center;
}
.gas-order-box .add-to-basket button {
  background-color: #4529D3;
  color: #ffffff;
}
/* COAL */
.coal-container {
  background-image: url("../images/coal-bg-image.jpg");
  background-size: cover;
  background-position: center center;
}
.coal-container .width-main-wraper {
  padding: 30px 0;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: flex-end;
  width: 100%;
}
.coal-order-box {
  background-image: url("../images/coal-order-box-bg.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  box-shadow: 0px 0px 15px #212121;
  height: 580px;
  width: 400px;
  text-align: center;
}
.coal-order-box .add-to-basket button {
  background-color: #ff8701;
  color: #ffffff;
}
.global-oil-tanker h2 {
  color: #ffffff;
  text-shadow: 2px 2px 8px #000000;
  font-weight: 900;
  font-size: 46px;
}
.coal-info {
  color: #ffe557;
  font-size: 14px;
  margin-top: -5px;
  display: block;
}
.coal-info:hover {
  color: #ffffff;
  text-decoration: none;
}
.coal-order-box, 
.heating-oil-order-box, 
.gas-order-box, 
.red-diesel-order-box {
  text-align: center;
  color: #ffffff;
  align-self: center;
}
.coal-order-box p, 
.gas-order-box p, 
.heating-oil-order-box p, 
.red-diesel-order-box p {
  color: #ffffff !important;
  font-size: 24px !important;
}
.coal-order-box p span, 
.gas-order-box p span, 
.heating-oil-order-box p span, 
.red-diesel-order-box p span {
  font-size: 12px !important;
}
.heating-oil-order-box h2, 
.red-diesel-order-box h2 {
  color: #d3f0a5 !important;
  font-size: 44px;
}
.coal-order-box h2 {
  color: #ffb869;
  font-size: 44px;
}
.heating-oil-order-box h2 strong, 
.red-diesel-order-box h2 strong {
  color: #b1eb56 !important;
}
.coal-order-box h2 strong {
  color: #ffb869;
}
.gas-order-box h2 {
  color: #34B5E4;
  font-size: 30px;
}
.gas-order-box h2 strong {
  	color: #4696EB;
	font-size: 44px;
}
span#reddieselPrice, 
span#oilPrice, 
span#gasPrice, 
span#coalPrice {
  font-size: 38px;
  font-weight: 700;
}
/* Other */
.about-hp {
  background-color: #f2f2f2;
  padding: 35px 0;
}
.about-hp .width-main-wraper {
  display: flex;
  justify-content: center;
}
.about-hp .width-main-wraper div {
  align-self: center;
  max-width: 50%;
}
.about-hp .width-main-wraper .about-text-hp {
  background-color: #ffffff;
  padding: 35px 25px 55px 25px;
}
.width-main-wraper {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}
.button-main {
  display: inline-block;
  border: 2px solid #212121;
  background-color: #212121;
  color: #1a4879;
  border-radius: 6px;
  padding: 5px 25px;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
.simple-ordering {
  background-color: #ffffff;
  color: #1a4879;
  text-align: center;
}
.simple-ordering h2 {
  padding-bottom: 30px;
  font-weight: 600;
}
.simple-ordering p {
  font-size: 20px;
  font-weight: 600;
  padding-top: 15px;
}
.hp-separator {
  padding: 0 25px 35px 25px;
}
.prices span {
  font-size: 20px;
}
.add-to-basket button {
  border: 2px solid #ffffff;
  padding: 5px 15px;
  color: #212121;
  font-size: 20px;
  border-radius: 10px;
  margin-top: 15px;
  transition: 0.7s;
}
.add-to-basket button:hover {
  transition: 0.7s;
  border: 2px solid #000000;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #212121;
}
/* desktop */
@media only screen and (min-width: 600px) {

    /* menu phone and email */
    .nav-phone-email {
      z-index: 1999;
      position: absolute;
      top: -10px;
      width: 100%;
      text-align: center;
      display: block;
    }
    .nav-phone-email a {
      padding: 5px 25px;
      font-size: 18px;
      font-weight: 700;
      transition: 0.5s;
    }
    .nav-phone-email a:hover {
      transition: 0.5s;
      background-color: rgba(0, 0, 0, 0.95);
      text-decoration: none;
      color: #ffffff;
    }
    .nav-email, .nav-phone {
      display: inline-block;
      background-color: rgba(225, 225, 225, 0.5);
      border-radius: 0px 0px 10px 10px;
      margin-top: -15px;
    }
    
}
/* mobile */
@media only screen and (max-width: 600px) {
  .hideonmobile {
    display: none;
  }
    .about-hp .width-main-wraper div {
      max-width: 100%;
    }
    .about-hp .width-main-wraper {
        display: block;
    }
}
.confirmation-box {
    width: auto;
    max-width: 600px;
    margin: 15px auto;
}
/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  max-width: 260px;
  margin: 0 auto 15px auto;
}
.coal-order-box .custom-select {
  max-width: 280px;
}
.custom-select select {
}
.select-selected {
  background-color: #ffffff;
  border-radius: 10px;
  font-size: 20px;
  text-align: left;
  transition: 0.7s;
}
.select-selected:hover {
  transition: 0.7s;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #212121;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 20px;
  right: 10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-color: #212121 transparent transparent transparent;
  border-radius: 3px;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #212121 transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div, .select-selected {
  color: #212121;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border-radius: 10px;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.coal-types-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  max-width: 1200px;
  margin: 10px auto;
}
.coal-types-intro {
  width: 100%;
  padding: 25px 0;
}
.coal-type-box:nth-child(2n) {
  background-color: #f2f2f2;
}
.coal-type-box {
  background-color: #e2e2e2;
  padding: 10px;
  max-width: 400px;
  border: 1px solid #fefefe;
}
.coal-type-box h2 {
  font-size: 22px;
  font-weight: 700;
}