/* Mobile devices */

@media only screen and (max-width: 800px) {

  #header {
    margin: 10px;
    display: inline-block;
    vertical-align: middle
  }

  .header_img {
    display: inline-block;
    vertical-align: middle
  }

  #quote_answer_container {
    margin: 10px;
    display: inline-block;
    vertical-align: middle
  }
}

body, html {
  height: 100%;
}

body {
  /* The image used */
  background-image: url('../images/boilers/2Q3A4100_copy.jpg');

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Mallanna', sans-serif;
}

/* Header and nav bar styling styling */

#header {
  margin-bottom: 0px;
 }

a {
  color: #1d1c4f;
  font-family: Arial, Helvetica, sans-serif;
}

.return_to_main_site {
  padding-right: 30px;
  margin-top: 0px;
  background-color: #a6c52b;
  height: 25px;
}

/* Main page styling */

body {
  color: #1d1c4f;
  font-family: Arial, Helvetica, sans-serif;
}

button {
  border-radius: 5px;
  border: 1px solid lightgrey;
  height: 30px;
  width: 120px;
  color: #1d1c4f;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

button:hover {
    background-color: #999DB2;
}

#go-home:hover {
  background-color: #999DB2;
}

.hidden_box {
  display: none;
}

.disabled-link {
  pointer-events: none;
}

/* Quote container box */

.quote_container {
  text-align: center;
  border-radius: 5px;
  margin-bottom: 20px;
}

.package_breakdown {
  text-align: left;
}

/* Question container box */

span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

#quote_answer_container {
  margin: 15px;
}

.answer_box {
  padding: 5px;
}

.answer_img {
  border-radius: 5px;
  border: 1px solid lightgrey;
  width: 150px;
  cursor: pointer;
  transition: transform .2s; /* Animation */
}

.answer_img:hover {
  border: 1px solid #a6c52b;
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* Summary container box */

/* test */
#combi_option_two {
  background-color: white;
}

/*  */

#quote_summary {
  margin: 5px;
  margin-top: 25px;
  padding: 10px;
}

.bronze {
  border: 2px solid #cd7f32;
  border-radius: 5px;
  margin: 5px;
  padding-bottom: 50px;
}

.silver {
  border: 2px solid #C0C0C0;
  border-radius: 5px;
  margin: 5px;
  padding-bottom: 50px;
  background-color: #1d1c4f0D;
}

.gold {
  border: 2px solid #FFD700;
  border-radius: 5px;
  margin: 5px;
  padding-bottom: 50px;
  background-color: #1d1c4f0D;
}

.boiler_price {
  text-align: center;
}

.book_a_date {
  border: 2px solid #a6c52b;
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
}

.create_a_payment_plan {
width: 120px;
height: 50px;
margin-bottom: 25px;
}

.boiler_name {
  padding-left: 5px;
  font-weight: bold;
}

.name_container {
  text-align: center;
}

.fa-check-circle {
  color: #1d1c4f;
}

#bronze_monthly_price {
  font-weight: bold;
}

#silver_monthly_price {
  font-weight: bold;
}

#gold_monthly_price {
  font-weight: bold;
}

/* Finance modal */

.finance_button {
  width: 300px;
  margin: 50px;
}

.summary_button {
  width: 200px;
  font-weight: bold;
  border: 1px solid #1d1c4f;
  margin-bottom: 10px;
  background-color: #1d1c4f33;
  transition: transform .2s; /* Animation */
}

.summary_button:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.email_finance_button {
  width: 300px;
  margin: 50px;
}

.summary_buttons {
  width: 200px;
  margin-left: 20px;
  margin-right: 20px;
}

.book_button {
  width: 300px;
  font-weight: bold;
  border: 1px solid #1d1c4f;
  margin-bottom: 10px;
  background-color: #1d1c4f33;
  transition: transform .2s; /* Animation */
}

.book_button:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.close-popup {
  margin-top: 30px;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  font-weight: bold;
  border: 1px solid #1d1c4f;
  background-color: #1d1c4f33;
  cursor: pointer;
}

#emailForm {
  padding: 10px;
  margin-left: 10%;
  margin-right: 10%;
}

/* New finance modal */

.hideFinanceModal {
  display: none;
}

.finance_modal {
  border-radius: 5px;
  border: 1px solid lightgrey;
  height: 30px;
  width: 75px;
  color: #1d1c4f;
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.finance_modal_selected {
  border: 1px solid #1d1c4f;
  background-color: #a6c52b;
}

/* New finance modal */

/* Footer */

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height:80px;
  background-color: white;
}

/* Tabs in modal */

#tabs-with-content .tabs:not(:last-child) {
  margin-bottom: 0;
}

#tabs-with-content .tab-content {
  padding: 1rem;
  display: none;
}

#tabs-with-content .tab-content.is-active {
  display: block;
}

/* Loading pop up */

@keyframes ldio-p0600yk0jo {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.5,1.5);
  } 100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1,1);
  }
}
.ldio-p0600yk0jo div > div {
  position: absolute;
  width: 37.2px;
  height: 37.2px;
  border-radius: 50%;
  background: #1d1c4f;
  animation: ldio-p0600yk0jo 3.125s linear infinite;
}.ldio-p0600yk0jo div:nth-child(1) > div {
  left: 229px;
  top: 136px;
  animation-delay: -2.734375s;
}
.ldio-p0600yk0jo > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 247.6px 154.6px;
}.ldio-p0600yk0jo div:nth-child(2) > div {
  left: 202px;
  top: 202px;
  animation-delay: -2.34375s;
}
.ldio-p0600yk0jo > div:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 220.6px 220.6px;
}.ldio-p0600yk0jo div:nth-child(3) > div {
  left: 136px;
  top: 229px;
  animation-delay: -1.953125s;
}
.ldio-p0600yk0jo > div:nth-child(3) {
  transform: rotate(90deg);
  transform-origin: 154.6px 247.6px;
}.ldio-p0600yk0jo div:nth-child(4) > div {
  left: 71px;
  top: 202px;
  animation-delay: -1.5625s;
}
.ldio-p0600yk0jo > div:nth-child(4) {
  transform: rotate(135deg);
  transform-origin: 89.6px 220.6px;
}.ldio-p0600yk0jo div:nth-child(5) > div {
  left: 43px;
  top: 136px;
  animation-delay: -1.171875s;
}
.ldio-p0600yk0jo > div:nth-child(5) {
  transform: rotate(180deg);
  transform-origin: 61.599999999999994px 154.6px;
}.ldio-p0600yk0jo div:nth-child(6) > div {
  left: 71px;
  top: 71px;
  animation-delay: -0.78125s;
}
.ldio-p0600yk0jo > div:nth-child(6) {
  transform: rotate(225deg);
  transform-origin: 89.6px 89.6px;
}.ldio-p0600yk0jo div:nth-child(7) > div {
  left: 136px;
  top: 43px;
  animation-delay: -0.390625s;
}
.ldio-p0600yk0jo > div:nth-child(7) {
  transform: rotate(270deg);
  transform-origin: 154.6px 61.599999999999994px;
}.ldio-p0600yk0jo div:nth-child(8) > div {
  left: 202px;
  top: 71px;
  animation-delay: 0s;
}
.ldio-p0600yk0jo > div:nth-child(8) {
  transform: rotate(315deg);
  transform-origin: 220.6px 89.6px;
}
.loadingio-spinner-spin-6wmc58s8grc {
  width: 310px;
  height: 310px;
  display: inline-block;
  overflow: hidden;
  background: #ffffff;
}
.ldio-p0600yk0jo {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-p0600yk0jo div { box-sizing: content-box; }
/* generated by https://loading.io/ */