/*
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

/*
Font: Montserrat
Orange - F16A4D
Blue - 15465D
Grey - E8E9E9
*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");

body {
  background-color: #15465d;
  font-family: "Montserrat", sans-serif;
}

/*header*/
.header-bg {
  background-color: #f16a4d;
  color: #ffffff;
}
.header {
  font-family: "Montserrat", sans-serif;
  padding: 2rem 0rem 2rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
}
/*menu*/
.menu {
  font-family: "Montserrat", sans-serif;
  background-color: #f16a4d;
  transition: background 0.5s ease;
  z-index: 999;
}
.menu-alt {
  background-color: #15465d;
  z-index: 999;
}

.menu .btn-support {
  position: absolute;
  top: 0rem;
  right: 1rem;

  color: rgba(255, 255, 255, 0.5);
  transition: all 0.6s ease;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;

  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
}
.menu .btn-support:hover {
  color: rgba(255, 255, 255, 1);
}
.menu .btn-support .btn-support-text {
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  margin: 0rem 0rem 0rem 0rem;
  transition: all 0.6s ease;
  background-color: #f16a4d;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top: none;
  border-bottom-left-radius: 1.5rem !important;
  border-bottom-right-radius: 1.5rem !important;
}
.menu .btn-support:hover .btn-support-text {
  padding: 3rem 0.5rem 0.5rem 0.5rem;
  border-color: rgba(255, 255, 255, 1);
}
.menu .btn-support .btn-support-img {
  transition: all 0.6s ease;
  width: 80%;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem auto 0rem auto;
}
.menu .btn-support .btn-support-img img {
  transition: all 0.6s ease;
  width: 100%;
  margin: auto;
}
.menu .btn-support:hover .btn-support-img img {
  width: 0%;
}
.menu .btn-phone {
  transition: all 0.6s ease;

  position: absolute;
  bottom: 0rem;
  right: 1rem;

  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.menu .btn-phone:hover {
  color: #f16a4d;
}
.menu .btn-phone:after {
  position: absolute;
  bottom: 4px;
  left: 0rem;
  display: block;
  /*width: calc(100% - 11px);*/
  width: 100%;
  height: 1px;
  transform: scaleX(0);
  background-color: #f16a4d;
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  content: "";
  transform-origin: left center;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
}
.menu .btn-phone:hover::after {
  transform: scaleX(1);
}

.menu .navbar-brand {
  display: block;
  width: 100%;
}
@media (min-width: 992px) {
  .menu .navbar-brand {
    display: inline-block;
    max-width: 35%;
  }
}

.menu .navbar-brand img {
  max-width: 100%;
}
@media (min-width: 768px) {
  .menu .navbar-brand img {
    max-width: 100%;
    /*max-height: 30%;*/
    max-height: 10rem;
  }
}
.menu .nav-link {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.7em;
}
@media (min-width: 768px) {
  .menu .nav-support {
    border: 1px solid #ffffff;
    background-color: #f16a4d;
    padding: 3.9rem 0.5rem 0.6rem 0.5rem;
    margin: -3.5rem 0rem 0rem 0rem;
    border-bottom-left-radius: 20% !important;
    border-bottom-right-radius: 20% !important;
    transition: all 0.2s ease-in-out;
  }
  .menu .nav-support:hover {
    border: 1px solid #ffffff;
    background-color: #f16a4d;
    padding: 2.9rem 0.5rem 1.6rem 0.5rem;
    /*margin: -2.8rem 0rem 0rem 0rem;*/
    border-bottom-left-radius: 20% !important;
    border-bottom-right-radius: 20% !important;
  }
}
/*content*/
.content-bg {
  background-color: #e8e9e9;
  color: #000000;
  /*min-height: 500px;*/
}
.content {
  font-family: "Montserrat", sans-serif;
  padding: 2rem 0rem 2rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  font-size: 1em;
  /*min-height: 3000px;*/
  color: #15465d;
}
.content h1,
.content .c-h1,
.c-h1 {
  font-size: 3em;
  line-height: normal;
}
.content h2,
.content .c-h2,
.c-h2 {
  font-size: 2.5em;
  line-height: normal;
}
.content h3,
.content .c-h3,
.c-h3 {
  font-size: 2em;
  line-height: normal;
}
.content h4,
.content .c-h4,
.c-h4 {
  font-size: 1.5em;
  line-height: normal;
}
.content h5,
.content .c-h5,
.c-h5 {
  font-size: 1.3em;
  line-height: normal;
}
.content h6,
.content .c-h6,
.c-h6 {
  font-size: 1.1em;
  line-height: normal;
}
.content p,
.content .c-p,
.c-p {
  line-height: normal;
}
.content .c-p2,
.c-p2 {
  font-size: 0.8em;
  line-height: normal;
}
.box-c1 {
  background-color: #f16a4d;
  color: #ffffff;
}
.box-c2 {
  background-color: #ffffff;
  color: #f16a4d;
}
.box-c3 {
  background-color: #f16a4de6;
  color: #ffffff;
}
.content .c-a1 {
  color: #f16a4d;
  font-size: 1.1em;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}
.content .c-a1:hover {
  color: #15465d;
  text-decoration: none;
}
.content .box-tools {
  background-color: #f16a4d;
  padding: 0.7rem;
  color: #fff;
  font-size: 0.65rem;
  position: relative;
  margin-bottom: 0.5rem;
  font-weight: bold;
}
@media (min-width: 992px) {
  .content .box-tools {
    top: -2rem;
    margin-bottom: -1.5rem;
  }
}
.content .product-info-box {
  background-color: #ffffff;
  padding: 2rem;
  /*color: #FFF;*/
  font-size: 0.8rem;
  position: relative;
  /*margin-bottom: 0.5rem;*/
  /*font-weight: bold;*/
}
@media (min-width: 992px) {
  .content .product-info-box {
    top: -2rem;
    margin-bottom: -1.5rem;
  }
}
.content .order .form-control {
  color: #f16a4d;
}
.content .order .order-label {
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  color: #15465d;
  font-size: 0.85em;
  letter-spacing: 1px;
  font-weight: bold;
  display: block;
  line-height: normal;
}
.content .order .order-info {
  float: right;
}
.content .order .order-field-text {
  position: absolute;
  top: 2em;
  right: 1em;
  font-weight: bold;
  font-size: 0.8em;
  line-height: normal;
  color: #aaaaaa;
  letter-spacing: 1px;
}
.popover .popover-body {
  background-color: #f16a4d;
  color: #ffffff;
}
.popover .arrow:after {
  border-right-color: #f16a4d;
  border-left-color: #f16a4d;
}
.gallery-buttons {
  font-size: 0.8em;
}

.content .list-tick li {
  background-image: url("/images/tick.png");
  background-size: 1.8em;
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 1.9rem;
  display: block;
}
@media (min-width: 768px) {
  .content .list-tick li {
    display: inline-block;
  }
}
.content .product-feature-list li {
  background-image: url("/images/tick.png");
  background-size: 1.8em;
  background-repeat: no-repeat;
  background-position: top left;
  padding-left: 1.9rem;
  display: block;
}

/*footer*/
.footer-bg {
  background-color: #15465d;
  color: #ffffff;
}
.footer {
  font-family: "Montserrat", sans-serif;
  padding: 2rem 0rem 1rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  font-size: 0.9rem;
}
.footer .f-h1 {
  margin: 0rem 0rem 1.5rem 0rem;
  font-size: 1.8em;
  font-weight: bold;
  text-transform: uppercase;
}
.footer .f-h2 {
  margin: 0rem 0rem 0.5rem 0rem;
  font-size: 1em;
  font-weight: bold;
}
.footer .f-nav {
  font-size: 1em;
}
@media (min-width: 992px) {
  .footer .f-nav {
    font-size: 0.8em;
  }
}
.footer .f-nav li a {
  color: #fff;
  display: block;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.3rem 0rem 0.3rem 0rem;
}
.footer .f-nav li a:hover {
  color: #f16a4d;
  text-decoration: none;
}
.footer .f-i1 {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #fff;
  padding: 0px;
  color: #fff;
  text-transform: lowercase;
}
.footer .f-b1 {
  background-color: transparent;
  border: none;
  color: #fff;
  text-transform: capitalize;
  padding: 0px;
  font-size: 0.8em;
  font-weight: bold;
}
/*footer2*/
.footer2-bg {
  background-color: #2f6077;
}
.footer2 {
  color: #cccccc;
  font-family: "Montserrat", sans-serif;
  padding: 1rem 0rem 1rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  font-size: 0.5rem;
  letter-spacing: 0.1rem;
}
/*misc*/
.hr1 {
  height: 2px;
  margin: 1rem 0rem;
}
.hr2 {
  height: 1px;
  margin: 1rem 0rem;
}
.bg-c1 {
  background-color: #f16a4d;
}
.text-c1 {
  color: #f16a4d;
}
.border-c1 {
  border: 1px solid #f16a4d;
}
.bg-c2 {
  background-color: #15465d;
}
.text-c2 {
  color: #15465d;
}
.border-c2 {
  border: 1px solid #15465d;
}
.bg-c3 {
  background-color: #e8e9e9;
}
.text-c3 {
  color: #e8e9e9;
}
.border-c3 {
  border: 1px solid #e8e9e9;
}
/*buttons*/
.btn-c1 {
  border: 1px solid #f16a4d;
  background-color: #15465d;
  color: #ffffff;
}
.btn-c1:hover {
  border: 1px solid #15465d;
  background-color: #f16a4d;
  color: #15465d;
}
.btn-c2,
.btn-c2:disabled:hover {
  border: 1px solid #f16a4d;
  background-color: #f16a4d;
  color: #ffffff;
}
.btn-c2:hover {
  /*border: 1px solid #E8E9E9;*/
  background-color: #e8e9e9;
  color: #f16a4d;
}
.btn-c3 {
  border: 1px solid #15465d;
  background-color: #15465d;
  color: #ffffff;
}
.btn-c3:hover,
.btn-c3:focus,
.btn-c3.active {
  /*border: 1px solid #E8E9E9;*/
  background-color: #e8e9e9;
  color: #15465d;
}
.btn-c4 {
  color: #ffffff;
  font-weight: bold;
}
.btn-c4:hover {
  color: #15465d;
}
.btn-c5 {
  color: #f16a4d;
  text-decoration: underline;
}
.btn-c5:hover {
  color: #000000;
}
.btn-c6 {
  border: 1px solid #939598;
  background-color: #939598;
  color: #ffffff;
}
.btn-c6:hover {
  /*border: 1px solid #E8E9E9;*/
  background-color: #e8e9e9;
  color: #939598;
}
.btn-c7 {
  border: 1px solid #939598;
  background-color: #939598;
  color: #ffffff;
}
.btn-c7:hover,
.btn-c7.active {
  border: 1px solid #f16a4d;
  background-color: #f16a4d;
  color: #ffffff;
}
.btn-c8 {
  text-decoration: none;
  padding: 0rem 0rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  color: #15465d;
  font-size: 1em;
  line-height: normal;
}
.btn-c8:hover {
  color: #f16a4d;
}
.btn-c9 {
  border: 1px solid #939598;
  background-color: #939598;
  color: #ffffff;
  font-size: 0.8rem;
}
.btn-c9:hover,
.btn-c9:focus,
.btn-c9.active {
  border: 1px solid #f16a4d;
  background-color: #f16a4d;
  color: #ffffff;
}
.btn-c10 {
  text-decoration: underline;
  color: #15465d;
  font-weight: bold;
}
.btn-c10:hover {
  color: #ffffff;
}

#holding-page-box {
  display: table-cell;
  vertical-align: middle;
  background-color: #e8e9e9;
  overflow: hidden;
}
.order-form-dropdown-image {
  width: 15%;
  margin-right: 0.5rem;
}

.fancybox-caption {
  font-size: 1.1rem;
}

#video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
#video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.table-fixed {
  table-layout: fixed;
}
.video-gallery .video iframe {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  width: 100%;
  height: 20rem;
}

.disable-copy {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* #tempplate-main */
#template-main .navbar,
#template-main .footer-bg,
#template-main .footer2-bg {
  display: none;
}

#template-main {
  background-color: #e8e9e9;
  color: #000000;
}

/* payments */
.section-payments .payment-spinner {
  display: none;
}
.section-payments .payments {
  display: grid;
}
.section-payments.processing .payment-spinner {
  display: flex;
}
.section-payments.processing .payments {
  display: none;
}

.payments {
  display: grid;
  gap: 1rem;
  justify-items: end;
  grid-template-columns: repeat(1, 1fr);
}
.payments .payment {
  width: 100%;
  cursor: pointer;
}
@media (min-width: 768px) {
  .payments {
    grid-template-columns: repeat(1, 1fr);
  }
  .payments .payment {
    width: 40%;
  }
}
.payments .payment-afterpay {
}
.payments .payment-paypal {
}
.payment-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.payment-spinner i {
  font-size: 5em;
}

.card-payment-error {
  display: none;
  text-align: center;
  background-color: #dc3545;
  color: #ffffff;
  margin-bottom: 1rem;
}
.card-payment-error.show {
  display: block;
}
.card-payment-error .card-header {
  font-weight: bold;
}
.card-payment-error .card-body {
}
.card-payment-error .card-text {
}

.detail {
  display: flex;
  gap: 1rem;
  grid-template-columns: 1fr 2fr;
  /* word-break:  */
}
.detail .name {
  font-weight: bold;
}
.detail .value {
  font-weight: normal;
}