/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== base ===== */
body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto-imp-light;
  font-size: 1.1rem;
}

h1,
h2,
h3 {
  letter-spacing: 0;
  text-transform: inherit;
  font-weight: 500;
  font-family: Bureau-bold;
}

h1 {
  font-size: 60px;
  font-weight: 600;
}

h2 {
  font-weight: 600;
  font-size: 1.6rem;
  color: #ff7321;
}

h3 {
  font-size: 19px;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

a {
  font-family: Bureau-bold;
  color: black;
  font-weight: 700;
}
a.url-link {
  position: relative;
}
a.url-link::after {
  height: 15px;
  width: 30px;
  display: inline-block;
  position: absolute;
  right: 0;
  right: calc(100% - 160px);
  top: calc(50% - 5px);
  content: "";
  background-image: url("https://www.imperialbrandsplc.com/etc.clientlibs/imperialbrands/corporate/components/structure/basepage/clientlibs/resources/images/icons/icon-arrow-right-primary.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

a:hover {
  color: #ff7321;
}

.orange {
  color: #ff7321;
}

/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== masthead =====*/
.masthead {
  background-image: url("img/mastheadBg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 240px;
  position: relative;
  margin-bottom: 3rem;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  margin-bottom: 1rem;
}

.mastheadDarkCover {
  background-color: rgba(4, 4, 4, 0.2);
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}

/* ===== selectCountry =====*/
select {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.625rem;
  border: none;
  color: #ff7321;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  text-indent: 1px;
  text-overflow: "";
  background-image: url("img/chevron.png");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 35px;
}
select option {
  color: black;
  font-weight: 100;
  font-size: 18px;
}

/* ===== select ===== */
select {
  font-family: Bureau-light;
}

select:hover {
  cursor: pointer;
}

/* ===== buttons ===== */
button {
  font-family: Bureau-bold;
  border: 1px solid #ff7321;
  border-radius: 50px;
  background: none;
  color: #ff7321;
  padding: 8px 18px;
}
button.secondary {
  text-transform: uppercase;
  border: 1px solid #000000;
  color: #000000;
  padding: 1rem 3rem;
}
button.secondary:hover {
  background-color: #000000;
}

button:hover {
  background-color: #ff7321;
  color: white;
}
button:hover .calculatorIcon {
  background: white;
}

/* ===== footer =====*/
.footerContainer {
  font-size: 12px;
  font-weight: 700;
  margin-top: 1rem;
  color: #19316F;
  background-color: #f9f9fb;
  padding: 2rem;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}
.footerContainer p {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.footerContainer a {
  font-family: Roboto-imp-bold;
  text-decoration: none;
  color: #19316F;
}
.footerContainer a:hover {
  color: black;
  text-decoration: underline;
}

/* ===== headings/a/btns =====*/
@font-face {
  font-family: "Bureau-light";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Font-Bureau-Stainless-Light.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Bureau-regular";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/Font-Bureau-Stainless-Regular.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Bureau-bold";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/Font-Bureau-Stainless-Bold.otf") format("opentype");
  font-display: swap;
}
/* ===== body =====*/
@font-face {
  font-family: "Roboto-imp-light";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Roboto-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Roboto-imp-bold";
  font-style: normal;
  font-weight: 200;
  src: url("fonts/Roboto-bold.ttf") format("truetype");
  font-display: swap;
}
/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== navbar =====*/
.navbar {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 1rem 0 1rem;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  background-color: white;
}
.navbar img {
  margin: 0.25rem 0rem;
}
.navbar select {
  width: 175px;
  border: 1px solid #ff7321;
  border-radius: 30px;
  margin: 0;
  padding: 8px 18px;
}
.navbar select.medium {
  width: 215px;
}
.navbar .buttons {
  text-align: center;
}

/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== Maturity =====*/
#maturity a {
  font-family: "Roboto-imp-light";
}
#maturity .mastheadContent h1 {
  font-size: 3.6rem;
  margin-bottom: 1rem;
}
#maturity .masthead {
  margin-bottom: 2rem;
}
#maturity .lead {
  font-family: "Bureau-bold";
  font-size: 1.5rem;
  font-weight: 600;
}
#maturity .image img {
  max-width: -webkit-fill-available;
  border-radius: 10px;
}
#maturity .highlight {
  font-family: "Bureau-bold";
  font-weight: 600;
}
#maturity .usefulDocumentation {
  background-color: #f7f5f3;
  border: none;
  margin: 0;
}
#maturity .usefulDocumentation a {
  font-family: "Bureau-bold";
}
#maturity .submit-instruction,
#maturity .understand-risks {
  border: 1px solid #ff7321;
  border-radius: 0.625rem;
  padding: 2rem;
}
#maturity .submit-instruction .col-xl-8, #maturity .submit-instruction .col-xl-10,
#maturity .understand-risks .col-xl-8,
#maturity .understand-risks .col-xl-10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
#maturity .submit-instruction .col-xl-8 i, #maturity .submit-instruction .col-xl-10 i,
#maturity .understand-risks .col-xl-8 i,
#maturity .understand-risks .col-xl-10 i {
  font-size: 1.8rem;
}
#maturity .contactUs, #maturity .faqs {
  border: 1px solid #ff7321;
  border-radius: 0.625rem;
  padding: 2rem;
}
#maturity .contactUs h3, #maturity .faqs h3 {
  color: #ff7321;
}
#maturity .faqs a {
  font-family: "Bureau-bold";
}
#maturity.arabic .navbar select {
  padding: 8px 40px;
}
#maturity.arabic .accordion-button::after {
  margin-right: auto;
  margin-left: 0;
}
#maturity.arabic .accordion-button .fa-stack {
  margin-left: 1rem;
}
#maturity.greek {
  font-family: Arial, sans-serif !important;
}
#maturity.greek h1, #maturity.greek h2, #maturity.greek h3 {
  font-family: Arial, sans-serif !important;
}
#maturity.greek .lead, #maturity.greek .accordion-button, #maturity.greek .usefulDocumentation a,
#maturity.greek table tr th {
  font-family: Arial, sans-serif !important;
  font-weight: 600;
}

/* mastheadContent */
.mastheadContent {
  padding: 1rem 2rem 1rem 2rem;
}
.mastheadContent h1 {
  color: white;
  font-size: 47px;
  font-weight: 700;
}
.mastheadContent p {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
.mastheadContent button {
  color: white;
  border-color: white;
  padding: 1rem 3rem;
  text-transform: uppercase;
  border: 2px solid white;
}
.mastheadContent button:hover {
  color: #ff7321;
  background-color: white;
}

/* ===== countryPage =====*/
#tabs-3 .container-fluid {
  border-top: 1px solid #ccc;
  margin-top: -1px;
}

/* leftSide */
/* countryKeyFeatures BP version */
.countryKeyFeatures .col-lg-6,
.countryKeyDates .col-lg-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
.countryKeyFeatures img,
.countryKeyDates img {
  margin-right: 0.75rem;
}
.countryKeyFeatures .lead,
.countryKeyDates .lead {
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 2rem;
}

/* ///////////////////////////// */
.countryKeyDates {
  padding: 2rem 2rem 1rem;
  border-radius: 0.625rem;
  background-color: #f7f5f3;
}
.countryKeyDates h3 {
  color: #ff7321;
}
.countryKeyDates .iconCol {
  margin: 24px 0 0rem 0;
}

.contactUs {
  padding: 1rem;
}
.contactUs h3 {
  margin-top: 2rem;
}

/* rightSide */
.optionPrice {
  padding: 1.5rem;
  background-color: #453628;
  border-radius: 0.625rem;
  margin: 1rem 0rem;
}
.optionPrice h2 {
  color: white;
  margin: 0;
}
.optionPrice .price {
  font-size: 2.5rem;
  margin-left: 0.25rem;
}

.aboutSharesave {
  padding: 1.5rem;
  border: 1px solid #ff7321;
  border-radius: 0.625rem;
  margin: 1rem 0rem;
}
.aboutSharesave .rightSideList li {
  padding: 0.5rem 0rem;
}

.usefulDocumentation {
  padding: 1.5rem;
  border: 1px solid #ff7321;
  border-radius: 0.625rem;
  margin: 1rem 0rem;
}
.usefulDocumentation p {
  font-size: 11px;
}
.usefulDocumentation .rightSideList li {
  padding: 0.5rem 0rem;
}
.usefulDocumentation .rightSideList li span {
  font-family: "Bureau-light";
  font-weight: 500;
}

/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
@media screen and (max-width: 768px) {
  #maturity .mastheadContent {
    padding: 1rem 2rem;
  }
  #maturity .mastheadContent h1 {
    font-size: 3rem;
  }
  #maturity .image {
    display: none;
  }
  #maturity .submit-instruction button.secondary {
    padding: 1rem;
    width: 100%;
    margin-top: 1.5rem;
  }
  #maturity .faqs .col-4 {
    display: none;
  }
  .navbar button {
    margin: 1rem 0;
  }
}
@media only screen and (min-width: 992px) {
  .navbar .buttons {
    position: absolute;
    right: 10px;
  }
  .rightSide {
    padding-left: 3rem;
  }
  h1 {
    font-size: 60px;
  }
  .mastheadContent select {
    font-size: 25px;
    background-size: 50px;
  }
  .countryKeyFeatures h3 {
    line-height: 2;
  }
  .countryKeyFeatures .iconCol {
    --bs-gutter-x: 4rem;
    margin: 24px 0 0;
  }
  .countryKeyDates h3 {
    line-height: 2;
  }
  .countryKeyDates .iconCol {
    --bs-gutter-x: 4rem;
    margin: 24px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .faqs img {
    display: none;
  }
}
@media only screen and (max-width: 1024px) {
  .p-output--figure {
    position: inherit;
  }
  #bonusOf {
    margin: 3rem 0rem;
  }
  #maturity .usefulDocumentation h2 {
    font-size: 1.4rem;
  }
  #maturity .faqs img {
    max-width: -webkit-fill-available;
    margin-right: 2rem;
  }
}
/* ===== Viewports ===== */
/* ===== Colors ===== */
/* ===== Fonts =====*/
/* ===== Margins & Paddings ===== */
/* ===== calculator =====*/
.calculatorContainer {
  background-color: #f7f5f3;
  padding: 1rem 2rem;
  border-radius: 0.625rem;
}

.calculatorNav .navbar {
  margin: 0rem 1rem 1rem 1rem;
}

#calculator h1 {
  color: #ff7321;
}
#calculator .calculatorLabel {
  display: block;
  margin-bottom: 0.6666666667rem;
  font-weight: 700;
}
#calculator .input-calc {
  display: block;
  width: 100%;
  border: 0.0625rem solid #a9a5a5;
  border-radius: 0;
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  height: 70px;
}
#calculator .prefix {
  padding-left: 0.625rem;
  padding-top: 1.0625rem;
  position: absolute;
  font-size: 1.5rem;
}
#calculator p.error-msg {
  display: none;
  color: #d50000;
  font-size: 1rem;
}
#calculator ul {
  padding: 1rem;
  border: 0.0625rem solid #a9a5a5;
  background-color: #ffffff;
  min-height: 9.75rem;
  position: relative;
}
#calculator ul li {
  list-style: none;
}
#calculator .p-output--figure {
  color: #333;
  font-size: 3rem;
  position: absolute;
  margin: 0;
  bottom: 0.5rem;
}

#bonusOf {
  color: #ff7321;
}
#bonusOf h3 {
  padding: 1rem 0;
}

#accordionOne .accordion-item,
#accordionOne-C .accordion-item {
  margin-bottom: 1rem;
  border: none;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button {
  font-size: 1.2rem;
  background-color: #ffffff;
  border-radius: 0.625rem;
  border: 1px solid #cdcaca;
  color: #ff7321;
  padding: 1rem 0.85rem;
  line-height: 1.3;
  text-transform: none;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button::after,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff7321'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
#accordionOne .accordion-item h2.accordion-header .accordion-button:not(.collapsed),
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:not(.collapsed) {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-bottom: 1px solid white;
  border-radius: 10px 10px 0 0;
  margin-bottom: -1px;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button:not(.collapsed)::after,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff7321'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
#accordionOne .accordion-item h2.accordion-header .accordion-button .fa-1:before, #accordionOne .accordion-item h2.accordion-header .accordion-button .fa-2:before, #accordionOne .accordion-item h2.accordion-header .accordion-button .fa-3:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button .fa-1:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button .fa-2:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button .fa-3:before {
  color: white;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button:hover,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:hover {
  background-color: #ff7321;
  color: #ffffff;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button:hover::after,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:hover::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
#accordionOne .accordion-item h2.accordion-header .accordion-button:hover .fa-1:before, #accordionOne .accordion-item h2.accordion-header .accordion-button:hover .fa-2:before, #accordionOne .accordion-item h2.accordion-header .accordion-button:hover .fa-3:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:hover .fa-1:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:hover .fa-2:before,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button:hover .fa-3:before {
  color: #ff7321;
}
#accordionOne .accordion-item h2.accordion-header .accordion-button.info-tax,
#accordionOne-C .accordion-item h2.accordion-header .accordion-button.info-tax {
  font-size: 1.6rem;
  padding-left: 1.3rem;
}
#accordionOne .accordion-item h2.accordion-header .fas,
#accordionOne-C .accordion-item h2.accordion-header .fas {
  display: contents;
}
#accordionOne .accordion-item h2.accordion-header .fa-stack-1x,
#accordionOne-C .accordion-item h2.accordion-header .fa-stack-1x {
  width: 40px;
}
#accordionOne .accordion-item .accordion-body,
#accordionOne-C .accordion-item .accordion-body {
  border: 1px solid #cdcaca;
  border-radius: 0 0 10px 10px;
}
#accordionOne .accordion-item .accordion-body ul,
#accordionOne-C .accordion-item .accordion-body ul {
  margin: 0;
  padding: 1rem;
}
#accordionOne .accordion-item .accordion-body ul li,
#accordionOne-C .accordion-item .accordion-body ul li {
  list-style: disc;
  margin-bottom: 1rem;
}
#accordionOne .accordion-item .accordion-body ul li::marker,
#accordionOne-C .accordion-item .accordion-body ul li::marker {
  color: #ff7321;
}

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border: 1px solid #cdcaca;
}
table tr {
  border-bottom: 1px solid #DCDFE4;
  padding: 0.75rem 1rem;
}
table tr:nth-child(even) {
  background-color: #f2f2f2;
}
table tr th {
  font-family: "Bureau-bold";
  font-size: 1.25rem;
  background-color: #ff7321;
  color: #ffffff;
  padding: 1rem 1.5rem;
  border: 1px solid #cdcaca;
}
table tr td {
  padding: 0.75rem 1.5rem;
  border: 1px solid #cdcaca;
}