/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,video{height:auto;max-width:100%}audio{max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

@font-face {
  font-family: 'albbweb';
  font-style: normal;
  font-weight: normal;
  src: local(''),
       url('../fonts/alibaba/Alibaba-Regular.woff') format('woff'); 
}

@font-face {
  font-family: 'albbweb';
  font-style: normal;
  font-weight: bold;
  src: local(''),
       url('../fonts/alibaba/Alibaba-Bold.woff') format('woff'); 
}

@font-face {
  font-family: 'albbweb';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/alibaba/Alibaba-Black.woff') format('woff'); 
}

html, body {
  height: 100%;
  min-height: 100%;
  background-color: white;
  /*background-color: var(--brand-pri);*/
}

body {
  font-size: 100%;
  font-family: "albbweb", Tahoma, "Ubuntu", Arial;
  overflow-x: hidden;
  line-height: normal;
  word-wrap: break-word;
}

a {
  text-decoration: none;
  transition: color .2s ease-in-out;
}

button {
  border: none;
  /*transition: all .2s ease-in-out;*/
}

.hidden {
  display: none !important;
  visibility: hidden; }

input,
select,
textarea,
button {
  font-family: "albbweb", Tahoma, "Ubuntu", Arial; }

/* --- */

:root {

--gold: #d4b364;
--white: #FFF;
--black: #000;
--primary: #FDB713;
--primary-light: #FFE19C;
--primary-dark: #DB9A02;
--secondary-100: #F2F9FF;
--secondary-200: #C9E3F8;
--secondary-300: #51A2E7;
--secondary-400: #0077DB;
--secondary-500: #00569E;
--secondary-600: #004075;
--secondary-700: #001C33;
--success-100: #EAFAEE;
--success-300: #84E199;
--success-400: #28A745;
--success-500: #1E7B33;
--success-700: #11461D;
--warning-100: #FFF5E5;
--warning-300: #FFCE85;
--warning-400: #FF9800;
--warning-500: #A85D00;
--warning-700: #4D2800;
--info-100: #E8F9FC;
--info-300: #A0E8F3;
--info-400: #17A2B8;
--info-500: #0F697A;
--info-700: #072F36;
--danger-100: #FDF2F3;
--danger-300: #F2B5BB;
--danger-400: #DC3545;
--danger-500: #871722;
--danger-700: #410B10;
--grays-100: #F8FAFB;
--grays-150: #E2E6E9;
--grays-200: #BEC6CC;
--grays-300: #959EA6;
--grays-400: #6C7680;
--grays-500: #4B5259;
--grays-600: #2B2F33;
--grays-700: #0A0B0C;

}

.text-link {
  color: var(--brand-sec);
  cursor: pointer;
  margin: 1em .5em;
  padding: 1em 1em;
  font-size: 1.2rem;
  display: inline-block;
  background-color: transparent;
  transition: all .2s ease-in-out;
}

.text-link:hover {
  color: var(--brand-sec-dark);
}

.text-link:disabled, .text-link:disabled:hover {
  opacity: .3;
  cursor: auto;
  color: var(--brand-sec-dark);
}

.button {
  color: white;
  cursor: pointer;
  margin: 1em .5em;
  padding: 1em 2em;
  font-size: 1rem;
  line-height: 18px;
  font-weight: bold;
  display: inline-block;
  position: relative;
  transition: all .1s ease-in-out;
  background-color: black;
}

.button:before,
.button:after {
  top: 0;
  bottom: 0;
  z-index: 0;
  content: "";
  width: 20px;
  height: 20px;
  right: -10px;
  margin: auto;
  position: absolute;
  background: inherit;
  transform: rotate(45deg);
}

.button:after {
  right: auto;
  left: -10px;
}

.button:hover {
  background-color: #baa256;
  box-shadow: 0 0 0 0 #00000010;
}

.button:hover:before,
.button:hover:after {
  box-shadow: 0 0 0 0 #00000010;
}

.button:disabled, .button:disabled:hover {
  opacity: .3;
  cursor: auto;
  background-color: var(--brand-sec-dark);
}

.button b {
  font-size: .8em;
  font-weight: normal;
}

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

.button i {
  font-size: 1.5em;
  display: inline-block;
  vertical-align: middle;
}

.button i:nth-child(2) {
  padding-right: 10px;
}

.button i:nth-child(1) {
  padding-left: 10px;
}

.button.simple {
  color: black;
  cursor: pointer;
  margin: 1em .5em;
  padding: 1em 2em;
  font-size: 1rem;
  box-shadow: none;
  line-height: 18px;
  font-weight: bold;
  display: inline-block;
  position: relative;
  transition: all .1s ease-in-out;
  background-color: transparent;
}

.button.simple:before,
.button.simple:after {
  display: none;
}

.button-wrap {
  margin: 0 -0.5em;
}

.button.gold {
  color: black;
  background-color: var(--gold);
}

.button.gold:hover {
  color: black;
  background-color: white;
}

@keyframes ticking-left {
  0%   {border-right-color: var(--brand-sec-light);}
  33% {border-right-color: var(--brand-sec);}
  100% {border-right-color: var(--brand-sec-light);}
}

.button-wrap .chev:nth-of-type(1) {animation-delay: -.6s;}
.button-wrap .chev:nth-of-type(2) {animation-delay: -.4s;}
.button-wrap .chev:nth-of-type(3) {animation-delay: -.2s;}


.button-wrap .chev.right {
  animation: ticking-right 2s ease-in-out infinite;
}

@keyframes ticking-right {
  0%   {border-left-color: var(--brand-sec-light);}
  20% {border-left-color: var(--brand-sec);}
  100% {border-left-color: var(--brand-sec-light);}
}

.button-wrap .chev:nth-of-type(4) {animation-delay: -.2s;}
.button-wrap .chev:nth-of-type(5) {animation-delay: -.4s;}
.button-wrap .chev:nth-of-type(6) {animation-delay: -.6s;}


/* --- */

.input {
  outline: 0;
  width: 100%;
  color: black;
  border: none;
  padding: 1em 2em;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
  background-color: white;
  border: 1px solid #BEC6CC;
  transition: all .2s ease-in-out;
  font-feature-settings: "ss01";
}

.input.error {
  color: var(--red);
  border-color: var(--red);
}

.message {
  padding: 1em;
  display: block;
  font-size: .8em;
  border-radius: 10px;
  color: var(--warning-500);
  background-color: var(--warning-100);
  border: 1px solid var(--warning-300);
}

/* --- */

.content-box {
  position: relative;
  text-align: center;
}

.content-box h1 {
  font-weight: 800;
}

.content-box h2 {
  font-weight: bold;
  color: #888;
}

.content-box p {
  color: black;
}


/* --- */

.official-agent {
  width: 100%;
  display: flex;
  position: relative;
  padding: 10em 0 4em;
  align-items: center;
  justify-content: center;
  background: var(--grays-700);
}

.official-agent:after {
  content: "";
  top: 0;
  width: 100%;
  height: 50%;
  position: absolute;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}

.official-agent:before {
  bottom: 0;
  content: "";
  width: 100%;
  height: 100%;
  opacity: .2;
  position: absolute;
  background: url(../images/pattern-bg.png) repeat;
  background-size: 50%;
}

.official-agent .info {
  z-index: 1;
  color: var(--grays-150);
}

.official-agent .info a {
  color: var(--primary);
}

.official-agent .qatar-fwc {
  z-index: 2;
  margin-left: 1em;
  padding-left: 1em;
  /*border-left: 1px solid var(--primary-dark);*/
}

.official-agent .qatar-fwc img {
  /*width: 100%;*/
  height: 80px;
}

.wrapper {
  width: 100%;
  display: flex;
  direction: rtl;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.content-wrap {
  width: 100%;
}

.content-self {
  z-index: 1;
  margin: auto;
  display: block;
  font-size: 1em;
  max-width: 60em;
  padding: 2em 2em 0;
  text-align: center;
  position: relative;
}

content {
  height: auto;
  /*padding-top: 60px;*/
  background-position: top right, top left, bottom left, bottom right;
  background-repeat: no-repeat;
  background-size: 40%;
  /*background-color: var(--brand-pri);*/
}


/* --- */


content#main .home {
  height: 600px;
  position: relative;
  background: url(../images/b-bg-2.jpeg) no-repeat;
  background-size: cover;
}

content#main .home:after {
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,.6);
}

content#main .home:before {
  content: "";
  bottom: 0;
  width: 100%;
  height: 30%;
  position: absolute;
  
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}


content#main .home .content-self .content-box {
  padding: 0 2em 2em;
}

content#main .home .content-self .content-box strong {
  font-size: 4em;
  line-height: 1;
  display: block;
  margin: 2em 0 0;
  font-weight: 800;
  color: var(--gold);
}

content#main .home .content-self .content-box h1 {
  color: white;
  font-size: 1.7em;
  margin: .5em 0 1em;
  font-weight: 800;
}

content#main .home .content-self .content-box h2 strong {
  font-weight: bold;
}


content#main .home .content-self .content-box p {
  margin-top: 1em;
}

content#main .home .logo {
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  margin: auto;
  max-width: 10em;
  padding: .5em 1em;
  position: absolute;
  background-color: white;
  border-radius: 0 0 10px 10px;
}

content#main .home .more-info {
  width: 100%;
  color: white;
  display: block;
}

content#main .home .more-info:hover {
  color: var(--gold);
}

/* --- */


content#main .intro {
  height: 700px;
  position: relative;
  background: url(../images/b-bg-2.jpeg) no-repeat;
  background-size: cover;
}

content#main .intro:after {
  content: "";
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0,0,0,.6);
}

content#main .intro:before {
  content: "";
  bottom: 0;
  width: 100%;
  height: 50%;
  position: absolute;
  
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}


content#main .intro .content-self .content-box {
  padding: 0 2em 2em;
}

content#main .intro .content-self .content-box strong {
  font-size: 4em;
  line-height: 1;
  display: block;
  margin: 1em 0 0;
  font-weight: 800;
  color: var(--gold);
}

content#main .intro .content-self .content-box h1 {
  color: white;
  font-size: 1.7em;
  margin: 1em 0 1em;
  font-weight: 800;
}

content#main .intro .content-self .content-box h2 strong {
  font-weight: bold;
}


content#main .intro .content-self .content-box p {
  margin-top: 1em;
}

.content-box h1 i,
.content-box .prize-title i {
  margin-left: 5px;
}

/* --- */


.calc-status {
  padding: 1em 0;
  /*border-top: 1px solid var(--grays-200);*/
  border-bottom: 1px solid var(--grays-150);
}

.calc-status .stepper {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.calc-status .stepper span {
  display: flex;
  align-items: center;
  color: var(--grays-200);
}

.calc-status .stepper span:not(:last-child):after {
  content:"";
  width: 1em;
  margin: 0 .4em;
  border-bottom: 1px solid;
}

.calc-status .stepper span i {
  margin-left: .2em;
  display: block;
}

.calc-status .stepper span strong {
  display: block;
  font-size: .7em;
}

.calc-status .stepper span.current {
  color: var(--grays-700);
}

.calc-status .stepper span.passed {
  color: var(--success-400);
}

/* --- */

.price-calc {
  max-width: 600px;
  background: white;
  text-align: center;
  padding: 1em 1em 0;
  border-radius: 10px;
  margin: -22em auto 0;
  box-shadow: 0 4px 2px 0 rgba(0,0,0,0.2);
}

.price-calc h2 {
  color: black;
  font-size: 1.4em;
  font-weight: 800;
  padding: 1em 0 1em 0;
}

.price-calc h3 {
  font-weight: bold;
}

.price-calc h4 {
  color: var(--grays-300);
  font-size: .8em;
  margin-bottom: 10px;
}

.price-calc h3.single {
  margin-bottom: 10px;
}

.price-calc .calc-section hr {
  /*width: 50%;*/
  border: none;
  margin: 1em auto 0;
  border-bottom: 1px solid var(--grays-150);
}

.price-calc .calc-section {
  padding: 1em 0;
  color: var(--grays-600);
  /*border-top: 1px solid var(--grays-150);*/
}

.price-calc .calc-section:first-child {
  border: none;
}

.price-calc .calc-section .steps {
  color: white;
  width: 1.6em;
  height: 1.6em;
  margin-left: 5px;
  display: inline-block;
  background-color: black;
  border-radius: 100%;
}

.price-calc .calc-section input[type="radio"],
.price-calc .calc-section input[type="checkbox"] {
  display: none;
}

.price-calc .calc-section select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  cursor: pointer;
  font-size: .9em;
  font-weight: bold;
  padding: 1em 1em;
  border-radius: 6px;
  display: inline-block;
  color: var(--grays-600);
  background-color: white;
  transition: all .1s ease-in-out;
  border: 1px solid var(--grays-200);
  box-shadow: 0 2px 2px 0 var(--grays-150);
}
 
.dropdown {
  width: 50%;
  margin: auto;
  position: relative;
  display: block;
}
 
select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: #fff;
  cursor: pointer;
}
 
select::-ms-expand {
  display: none;
}
 
.dropdown::after {
  content: '\f078';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  line-height: 2em;
  padding: .5em 1em;
  pointer-events: none;
  font-family: "Font Awesome 6 Pro";
}
 
.dropdown:hover::after {
    color: black;
}

.price-calc .calc-section .comp-select .icon {
  width: 3em;
  padding: .5em;
  display: block;
  margin-top: 5px;
  position: relative;
}

.price-calc .calc-section .comp-select .icon img {
  height: 50px;
  vertical-align: middle;
}

.price-calc .calc-section .comp-select i {
  /*display: block;*/
  /*font-size: .7em;*/
  font-style: normal;
  color: var(--grays-400);
}

.price-calc .calc-section .comp-select {
  width: 60%;
  margin: .5em;
  cursor: pointer;
  font-size: .9em;
  padding: .5em .5em;
  border-radius: 10px;
  display: inline-block;
  transition: all .1s ease-in-out;
  border: 1px solid var(--grays-200);
  box-shadow: 0 2px 2px 0 var(--grays-150);
}

.price-calc .calc-section .comp-select:hover {
  border: 1px solid var(--grays-500);
}

.price-calc .calc-section .comp-select .comp-select-wrap {
  display: flex;
  text-align: right;
  align-items: center;
}

.price-calc .calc-section .comp-select .comp-select-wrap .desc {
  flex-wrap: wrap;
  color: var(--grays-500);
}

.price-calc .calc-section .comp-select .comp-select-wrap strong {
  width: 100%;
  display: inline-block;
}

.price-calc .calc-section .comp-select .comp-select-wrap strong i {
  color: var(--grays-600);
  margin-left: 5px;
}

.price-calc .calc-section .comp-select .comp-select-wrap strong img {
  width: 1.4em;
  margin: 0 .5em;
  vertical-align: middle;
  border: 1px solid var(--grays-150);
}

.price-calc .calc-section .comp-select .comp-select-wrap b {
  font-size: .8em;
  font-weight: normal;
}

.price-calc .calc-section .comp-select .comp-select-wrap i {
  font-size: .8em;
  color: var(--grays-300);
}

.price-calc .calc-section .comp-select .comp-select-wrap i.price {
  font-size: 1em;
  display: block;
  font-weight: bold;
  color: var(--secondary-400);
}

.price-calc .calc-section input:checked + .comp-select {
  color: black;
  border-color: black;
  box-shadow: inset 0 0 0 2px black,
              0 2px 2px 0 var(--grays-150);
}

.price-calc .calc-section input:checked + .comp-select .desc {
  color: black;
}

.price-calc .calc-section input + .comp-select .icon:before {
  font-size: 1.5em;
  content: "\f111";
  background: white;
  text-align: center;
  font-family: "Font Awesome 6 Pro";
}

.price-calc .calc-section input:checked + .comp-select .icon:before {
  content: "\f058";
  font-weight: bold;
}

/* --- */

.price-calc .calc-section .comp-select.full-width {
  width: 100%;
  margin: 1em 0 0;
}

.price-calc .calc-section .comp-select.full-width .desc {
  align-self: flex-end;
}

.price-calc .calc-section .comp-select.full-width .images {
  display: flex;
  flex-wrap: wrap;
  margin-left: 1em;
}

.price-calc .calc-section .comp-select.full-width .images {
  width: 40%;
  overflow: hidden;
  border-radius: 10px;
}

.price-calc .calc-section .comp-select.full-width .images img {
  border: 2px solid white;
}

.price-calc .calc-section .comp-select.full-width .images img:first-child {
  order: 1;
  width: 100%;
}

.price-calc .calc-section .comp-select.full-width .images img:not(:first-child) {
  width: 33.33%;
  order: 2;
}

.price-calc .calc-section .comp-select.full-width b {
  font-size: .8em;
}

.price-calc .calc-section .comp-select.full-width b i {
  margin-left: .5em;
  color: var(--primary);
}

.price-calc .calc-section .comp-select.full-width .price {
  font-size: .8em;
  text-align: left;
  margin-top: .5em;
  padding-top: .5em;
  color: var(--grey-200);
  border-top: 1px solid var(--grays-150);
}

.price-calc .calc-section .comp-select.full-width .price strong {
  font-size: 1rem;
  color: var(--secondary-400);
}

.price-calc .desc {
  width: 100%;
  padding: .5em 1em;
}

.price-calc .available-card {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 1em;
  align-items: center;
  /*justify-content: center;*/
}

.price-calc .calc-section .comp-select .available-card .available-card-wrap {
  width: auto;
  display: flex;
  flex-direction: column;
}

.price-calc .flight-head {
  font-size: .8em;
}

.price-calc .calc-section.flight .flight-legs-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-calc .calc-section.flight .flight-leg {
}

.price-calc .calc-section.flight .flight-leg:first-child {
  margin: 0 0 0 2em;
}

.price-calc .calc-section .comp-select .flight-head .airline {
  border: 0;
  width: 3em;
  margin: 0 0 0 1em;
}

.price-calc .flight-date {
  font-size: 1em;
}

.price-calc .flight-iata {
  font-size: 1em;
  font-weight: normal;
}

.price-calc .flight-duration {
  display: flex;
  font-size: 1em;
  align-items: center;
  font-weight: normal;
}

.price-calc .flight-duration:after,
.price-calc .flight-duration:before {
  width: 2em;
  content: "";
  margin: 0 .5em;
  display: block;
  border-bottom: 1px solid;
}

.price-calc .calc-section.package .comp-select .comp-select-wrap .room-types {
  display: flex;
  margin: .5em 0;
}

.price-calc .calc-section.package .comp-select .comp-select-wrap .room-types i {
  border: none;
  font-size: .8em;
  margin-left: .5em;
  border-radius: 2em;
  font-weight: normal;
  padding: .2em 1em .1em;
  color: var(--grays-800);
  background-color: var(--grays-150);
}

/* ---- */

.pax-group {
  padding: 1em 0;
  margin: 1em 0 2em;
  border-radius: 10px;
  border: 1px solid var(--grays-150);
  background-color: var(--grays-100);
}

.pax-group .validation-message {
  font-size: .7em;
  margin-top: 5px;
  color: var(--danger-400);
}

.pax-group h3 {
  /*text-align: right;*/
  padding: 1em 1em 2em;
}

.pax-group h3 i {
  margin-left: 5px;
}

.pax-fields {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.field {
  margin: 0 .5em;
  text-align: right;
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

.field.invalid .input-wrap input {
  border-color: var(--danger-400);
}

.field.half {
  width: 45%;
}

.field label {
  font-size: .8em;
  padding-bottom: .5em;
  color: var(--grays-400);
}

.field .input-wrap.ltr {
  direction: ltr;
}

.price-calc .field .input-wrap input {
  width: 100%;
  padding: .7em 1em;
}

.field .input-wrap.date {
  display: flex;
}

.field .input-wrap.date input {
  text-align: center;
}

.field .input-wrap.date input:nth-child(2) {
  margin: 0 .4em;
}

.field .input-wrap .dropdown {
  width: 100%;
  font-size: .8em;
  font-weight: normal;
}

/* ---- */

.price-calc .calc-section .input-type {
  font-size: .9em;
  margin-left: .5em;
}

.price-calc .calc-section .sep {
  margin: 0 1em;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid var(--grays-200);
}

.price-calc .calc-section input {
  cursor: pointer;
  padding: .5em 1em;
  border-radius: 6px;
  display: inline-block;
  color: var(--grays-600);
  transition: all .1s ease-in-out;
  border: 1px solid var(--grays-200);
  box-shadow: inset 0 2px 2px 0 var(--grays-150);
}

.price-calc .calc-section .button {
  width: 50%;
}

/* --- */

.action-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2em;
}

.action-section .button {
  margin: 1em;
}


/* --- */


table.cnf {
  width: 95%;
  margin: 1em auto;
  direction: rtl;
  font-size: .8em;
}

table.cnf tr td {
  padding: 1em;
  text-align: right;
  color: var(--grays-400);
  border: 1px solid var(--grays-200);
  background-color: var(--grays-100);
}

table.cnf tr td:first-child {
  background-color: var(--grays-150);
}

table ul li {
  list-style: inside disc;
}

.total-price {
  width: 70%;
  padding: 1em;
  display: block;
  margin: 2em auto 0;
  border-radius: 10px;
  border: 1px solid var(--success-300);
  background-color: var(--success-100);
}

.total-price i {
  width: 100%;
  display: block;
  font-size: .9em;
  font-style: normal;
  color: var(--success-500);
}

.total-price strong {
  font-size: 1.2em;
  color: var(--success-400);
}


/* --- */

content#main .seg-1 {
  z-index: 1;
  position: relative;
  background-color: black;
}

content#main .seg-1 .content-self {
  display: flex;
  align-items: center;
}


content#main .seg-1 .content-self .content-box {
  flex: 2;
  text-align: right;
  position: relative;
  border-radius: 20px;
}


/* --- */

content#main .seg-2 {
  z-index: 1;
  position: relative;
}


content#main .seg-2 .content-self {
  padding: 0;
  max-width: 100%;
}

content#main .seg-2 .content-self .content-box {
  border-radius: 20px;
  padding: 4em 2em;
}


content#main .seg-2 .content-self .content-box h2 {
  font-size: 2em;
  margin: 0 0 2em;
  font-weight: 800;
  color: var(--grays-700);
}

content#main .seg-2 .content-self .content-box h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
  color: var(--grays-400);
}

content#main .seg-2 .content-self .content-box h3 strong {
  font-weight: 800;
}

content#main .seg-2 .content-self .content-box p {
  margin: 1em 0;
}

content#main .seg-2 .ticket-info {
  padding: 0;
  display: flex;
  overflow: hidden;
  text-align: right;
  margin-bottom: 4em;
  border-radius: 10px;
}

content#main .seg-2 .ticket-info:nth-child(odd) {
  background-color: #f0ebdc;
}

content#main .seg-2 .ticket-info .ticket-hero {
  width: 50%;
  overflow: hidden;
  position: relative;
  background-position: right;
  background-size: cover;
}

content#main .seg-2 .ticket-info .ticket-hero:before {
  top: 0;
  bottom: 0;
  z-index: 0;
  content: "";
  width: 40px;
  height: 40px;
  right: -20px;
  margin: auto;
  position: absolute;
  background: white;
  transform: rotate(45deg);
}

content#main .seg-2 .ticket-info .ticket-hero.right:before {left: -20px; right: auto;}
content#main .seg-2 .ticket-info .ticket-hero.left:before {background-color: #f0ebdc;}

content#main .seg-2 .ticket-info .ticket-hero.match-club {background-image: url(../images/tickets/match-club-hero.png);}
content#main .seg-2 .ticket-info .ticket-hero.match-pavilion {background-image: url(../images/tickets/match-pavilion-hero.jpeg);}
content#main .seg-2 .ticket-info .ticket-hero.match-business {background-image: url(../images/tickets/match-business-hero.png);}
content#main .seg-2 .ticket-info .ticket-hero.pearl-lounge {background-image: url(../images/tickets/pearl-lounge-hero.jpeg);}

content#main .seg-2 .ticket-info .ticket-content {
  padding: 2em 2.5em;
  font-size: .9em;
}

content#main .seg-2 .ticket-info .ticket-title {
  display: flex;
  margin-bottom: 1em;
  padding-bottom: 1em;
  align-items: center;
  border-bottom: 1px solid var(--grays-200);
}

content#main .seg-2 .ticket-info .ticket-title .ticket-title-wrap {
  padding-right: 1em;
}

content#main .seg-2 .ticket-info .ticket-title .ticket-title-wrap span {
  color: var(--primary-dark);
}

content#main .seg-2 .ticket-info .ticket-title img {
  max-width: 100px;
}

content#main .seg-2 .ticket-info h4 {
  font-size: 1.5em;
  font-weight: bold;
}

content#main .seg-2 .ticket-info .gallery {
  width: 100%;
  display: flex;
  margin-top: 1em;
  padding-top: 1em;
  align-items: center;
  border-top: 1px solid var(--grays-200);
}

content#main .seg-2 .ticket-info .gallery img {
  width: 49%;
  margin: .5em;
  border-radius: 6px;
}

/* --- */

content#main .seg-3 {
  z-index: 1;
  position: relative;
  /*padding-bottom: 40em;*/
  background: white;
  background-size: 100%;
}


content#main .seg-3 .content-self .content-box {
  border-radius: 20px;
  padding: 4em 2em;
  text-align: right;
}

content#main .seg-3 .content-self .content-box h2 {
  font-size: 1.2em;
  margin: 0 0 1em;
}

content#main .seg-3 .content-self .content-box h2 strong {
  font-weight: 800;
}

content#main .seg-3 .content-self .content-box p {
  margin: 1em 0;
  color: #888;
}

content#main .seg-3 .content-self .content-box img {
  margin: auto;
  display: block;
  max-width: 300px;
}

content#main .seg-3 li {
  color: #888;
  list-style: square inside;
}

content#main .seg-3 a {
  color: #0276D8;
}


/* --- */

/* - Top Nav - */

.top-nav {
  width: 100%;
  padding: 1em 0;
  text-align: center;
  background-color: black;

  top: 0;
  right: 0;
  z-index: 99;
  position: fixed;
}

.top-nav a,
.top-nav .menu-link {
  padding: 1em;
  color: white;
  font-weight: bold;
}

.top-nav a:hover {
  color: var(--primary);
}

.top-nav .menu-link {
  display: none;
}

/* - Package List - */

.package-list {
  display: flex;
  flex-wrap: wrap;
  margin: -22em auto 0;
}

.package-single {
  width: 33%;
  margin: 1em 0;
  display: inline-block;
}

.package-list.final-package .package-single {
  width: 50%;
  margin: 1.5em 0;
}

.package-wrap {
  width: 90%;
  padding: 1em;
  text-align: right;
  position: relative;
  display: inline-block;
  background-color: white;
}

.package-name {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
}

.package-desc {
  display: block;
  font-size: .8em;
  padding-top: .4em;
}

ul.package-desc {
  margin-top: .5em;
}

ul.package-desc span {
  display: block;
  font-weight: bold;
  margin-bottom: .5em;
}

ul.package-desc li {
  list-style: inside square;
}

.package-bottom {
  display: block;
  margin-top: 3em;
}

.package-pax {
  display: block;
  font-size: .8em;
}

.package-price {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
}

.package-wrap .button {
  width: 100%;
  height: 56px;
  text-align: center;
  margin: 1em 0 0 0;
}

.package-wrap .button:before,
.package-wrap .button:after {
  display: none;
}

.promo-label {
  color: white;
  font-size: .7em;
  font-weight: bold;
  padding: .3em .8em;
  border-radius: 1em;
  margin-bottom: 1em;
  display: inline-block;
  background-color: var(--secondary-400);
}

.promo-label.gold-label {
  color: var(--primary);
  background-color: black;
}

.promo-label.silver-label {
  color: black;
  background-color: var(--grays-200);
}

.package-wrap .bg-art {
  left: 0;
  top: -60px;
  opacity: .1;
  font-size: 15em;
  font-weight: bold;
  position: absolute;
}

.package-wrap .bg-art i {
  font-size: 10rem;
  line-height: normal;
  vertical-align: top;
  padding: 6rem 0 0 1rem;
}

.package-wrap.gold-wrap {
  background-color: var(--primary-light);
  background: linear-gradient(45deg, var(--primary-light), var(--primary));
}

.package-wrap.silver-wrap {
  background-color: var(--grays-150);
  background: linear-gradient(45deg, var(--grays-100), var(--grays-300));
}

.package-single.sold-out {

}

.package-single.sold-out .package-name,
.package-single.sold-out .package-desc,
.package-single.sold-out .package-pax,
.package-single.sold-out .package-price {
  opacity: .4;
}

.package-single.sold-out .button {
  color: black;
  cursor: auto;
  background-color: transparent;
  box-shadow: inset 0 0 0 2px black;
}


/* --- */



/* --- */

@media (max-width: 800px) {
  
  body {
    font-size: 90%;
  }

  #main.wrapper {
    padding-top: 50px;
  }

  content#main .home {
    height: 450px;
  }

  content#main .home .content-self .content-box {
    padding: 6em 0 1em;
  }

  content#main .home .content-self .content-box strong {
    margin: 0;
    font-size: 2.2em;
  }

  content#main .home .content-self .content-box h1 {
    margin: 0;
    font-size: 1em;
    margin: .5em 0 1em;
  }

  content#main .home .content-self .content-box .button i {
    display: none;
  }

  content#main .intro .content-self .content-box {
    padding: 1em;
  }

  content#main .intro .content-self .content-box strong {
    margin: 0;
    font-size: 1.5em;
  }

  .action-section .button {
    width: 100%;
    padding: 1em;
    margin: 1em 0;
    font-size: .9em;
  }
  
  .action-section .button i {
    /*display: none;*/
  }

  .action-section .button:before,
  .action-section .button:after {
    display: none;
  }

  .action-section .button.simple {
    width: 50%;
  }

  .calc-status .stepper span strong {
    display: none;
  }

  .field.half {
    width: 100%;
  }

  .price-calc {
    border-radius: 0;
  }

  .price-calc .calc-section .comp-select {
    width: 95%;
    padding: 1em;
  }

  .price-calc .calc-section.package .comp-select .comp-select-wrap {
    flex-direction: column;
  }

  .price-calc .calc-section.package .comp-select.full-width .images {
    margin: 0;
    width: 100%;
  }

  content#main .seg-2 .content-self .content-box {
    padding: 4em 0;
  }

  content#main .seg-2 .ticket-info {
    flex-direction: column;
    border-radius: 0;
  }
  
  content#main .seg-2 .ticket-info .button {
    width: 100%;
    text-align: center;
  }

  content#main .seg-2 .ticket-info .ticket-hero {
    order: 1;
    width: 100%;
    height: 200px;
  }

  content#main .seg-2 .ticket-info .ticket-hero.right:before,
  content#main .seg-2 .ticket-info .ticket-hero:before {
    left: 0;
    right: 0;
    top: -20px;
    bottom: auto;
  }
  
  content#main .seg-2 .ticket-info .ticket-hero.left:before {
    background-color: #f0ebdc;
  }

  content#main .seg-2 .ticket-info .ticket-content {
    padding: 2em 2em;
  }

  content#main .seg-2, content#main .seg-3 {
    z-index: 0;
  }

  content#main .seg-3 .content-self .content-box img {
    width: 100%;
  }

  content#main .seg-2 .content-self .content-box h2 {
    font-size: 1.2em;
  }

  .official-agent,
  content#main .seg-2 .ticket-info .ticket-title {
    text-align: center;
    flex-direction: column;
  }

  .official-agent {
    z-index: 0;
    padding: 0 0 4em;  
  }

  .official-agent .qatar-fwc {
    margin: 0;
    padding: 0;
  }

  .official-agent .qatar-fwc img {
    height: 60px;
  }

  .official-agent .info {
    font-size: .8em;
    padding: 0 1em 4em;
  }

  .price-calc {
    margin: -8em auto 0;
    padding-bottom: 2em;
  }

  .price-calc .calc-section .button {
    width: 70%;
  }

  content#main .intro .content-self .content-box h1 {
    font-size: .8em;
  }

  .button.to-bank {
    background-color: var(--success-500);
  }

  .action-section {
    position: fixed;
    bottom: 0;
    background: white;
    left: 0;
    right: 0;
    z-index: 9;
    padding: 0 1em;
    box-shadow: 0 0 10px 0 #00000050;
  }

  .price-calc .calc-section.flight .flight-legs-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .price-calc .calc-section.flight .desc {
    padding: .5em;
  }

  /* --- */

  .top-nav {
    padding: .5em;
  }

  .top-nav .menu-link {
    display: inline-block;
  }

  .top-nav .menu-link i {
    margin-left: 10px;
  }
  
  .top-nav .menu-wrap {
    right: 0;
    z-index: 9;
    width: 100%;
    display: none;
    position: absolute;
    background-color: black;
    border-top: 1px solid var(--grays-600);
  }

  .top-nav a {
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--grays-600);
  }

  /* --- */

  .package-list {
    margin: -10em auto 0;
  }

  .package-list.final-package .package-single,
  .package-single {
    width: 100%;
    margin: 1em 0;
    text-align: center;
  }
}

@media (max-width: 620px) {

  body {
    /*font-size: 70%;*/
    /*background: white;*/
  }

  header {
    height: 50px;
  }

  header img {
    margin: 2px 20px;
    height: 45px;
  }

  content#main .top-visual {
    height: 60px;
  }

  content#main .intro {
    height: 250px;
  }


  content#main .seg-1 .content-self {
    padding: 0;
  }

  content#main .seg-1 .side-image img {
    /*left: 50%;*/
    position: relative;
  }
  
  content#main .seg-1 .button-wrap {
    text-align: center;
  }

  content#main .seg-1 .content-self .content-box {
    padding: 2em 0;
  }

}