/* ==========================================================================
   Client: Devex
   Project: Devex World | Tickets workflow
   Version: 2022 v.2.0
   Author: Angel Ordax - @legnaleama
   ========================================================================== */

/* Variables
   ========================================================================== */

html {

  /* Palette */
  --gray-100: #383F45;
  --gray-80: #6A6F74;
  --gray-60: #898E91;
  --gray-40: #E4E5E6;
  --gray-20: #F5F5F5;
  --gray-0: #F1F1F1;

  --orange-100: #ff9900;
  --orange-80: #FFB84D;
  --orange-60: #FFD699;

  --purple-100: #5100CE;
  --purple-80: #7C3DDC;

  --white: #fff;

  /* Text */
  --text-primary: var(--gray-100);
  --text-primary-muted: var(--gray-60);
  --text-secondary: var(--gray-80);
  --text-secondary-muted: var(--gray-40);
  --text-disabled: var(--gray-40);

  /* Spacing */
  --large-spacer: 64px;
  --medium-spacer: 40px;
  --small-spacer: 24px;

  /* Tokens */
  --tk-1: 8px;
  --tk-2: 16px;
  --tk-3: 24px;
  --tk-4: 32px;
  --tk-5: 40px;
  --tk-6: 48px;
  --tk-7: 56px;
  --tk-8: 64px;
  --tk-9: 72px;
}


/* Helper classes
   ========================================================================== */

.orange {color: var(--orange-100)}
.orange-muted {color: var(--orange-60)}

.purple {color: var(--purple-100)}
.purple-muted {color: var(--purple-80)}

.white {color: var(--white)}

.text-primary {color: var(--text-primary)}
.text-secondary {color: var(--text-secondary)}
.text-primary-muted {color: var(--text-primary-muted)}
.text-secondary-muted {color: var(--text-secondary-muted)}
.text-disabled {color: var(--text-disabled)}

.crossed {text-decoration: line-through;}

@media screen and (max-width: 720px) {
  .hide-xs {
    display: none !important;
  }
}



/* Shadow styles
   ========================================================================== */

.depth-lv-3 {
  box-shadow: 0 10px 20px rgba(255,153,0,0.2), 0 6px 6px rgba(255,153,0,0.2);
}

/* Link styles`
   ========================================================================== */

.link-muted {
  color: var(--text-secondary);
  font-weight: regular;

  text-decoration: underline;
}
.link-muted:hover {
  color: var(--text-secondary);

  text-decoration: none;
}

/* Sections
   ========================================================================== */
#welcome {
  background: var(--white);
  padding: var(--large-spacer) 0;
  color: var(--text-secondary);
}

#tickets {
  /* background-image: url(https://placehold.co/600x700);
  background-position: bottom center;
  background-size: 500px;
  background-repeat: repeat-x; */

  background: var(--white);
  padding: 15px 0 50px 0;
  color: var(--text-secondary);
}

#faq-home {
  background-color: var(--gray-0);
  padding: 0 0 var(--tk-9);

  color: var(--text-secondary);
}

#top-sponsors {
  padding: 60px 6% 45px 6%;
  background-color: var(--gray-0);
}

#sponsor {
  background: var(--white);
  padding: var(--large-spacer);

  color: var(--text-secondary);
}


/* Text styles
   ========================================================================== */

#welcome h2,
#tickets h2,
#faq-home h2,
#themes h2,
#sponsor h2 {
  color: var(--orange-100);

  font-family: 'Pangram', Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 36px;
  text-align: center;

  text-transform: uppercase;

  margin-bottom: var(--tk-5);
  margin-top: 0px;
  padding: 0;
}

#welcome h2::after,
#tickets h2::after,
#faq-home h2::after,
#themes h2::after,
#sponsor h2::after {
  content: '.';

  font-size: 42px;

  color: var(--purple-100);
}

#welcome p {
  font-size: 20px;
  line-height: 24px;
}


/* Button styles
   ========================================================================== */

.btn-dxw,
.mktoButtonWrap .mktoButton { /* marketo override */
  background: var(--purple-100) !important;
  color: var(--white);

  border-radius: 0 !important;

  text-transform: uppercase;
  font-weight: 700;
}

.btn-dxw:hover,
.mktoButtonWrap .mktoButton:hover { /* marketo override */
  background: var(--purple-80) !important;
  color: var(--white);
}

.btn-dxw-secondary { /* marketo override */
  background: var(--orange-100) !important;
  color: var(--white);

  border-radius: 0 !important;

  text-transform: uppercase;
  font-weight: 700;
}

.btn-dxw-secondary:hover { /* marketo override */
  background: var(--orange-80) !important;
  color: var(--white);
}

.btn-dxw-tertiary { /* marketo override */
  background: var(--white) !important;
  color: var(--purple-100);

  border-radius: 0 !important;
  border: 2px solid var(--purple-100);

  text-transform: uppercase;
  font-weight: 700;
}

.btn-dxw-tertiary:hover { /* marketo override */
  border-color: var(--purple-80) !important;
  color: var(--purple-80);
}

/* Components
   ========================================================================== */

/* Features list
*/
ul.features-list {
  list-style-type: none;
  margin: 0 0 0 32px;
  padding: 0;
}

ul.features-list li {
  margin: 0;
  padding: 0 0 8px 0;

  font-size: 16px;
  line-height: 21px;

  text-indent: -32px;
}

ul.features-list li.disabled {
  color: var(--gray-60);
  text-decoration: line-through;
}

ul.features-list li:before {
  content: '';
  display: inline-block;
  background-image: url('https://pages.devex.com/rs/685-KBL-765/images/icon-check-active.svg');

  width: 16px;
  height: 16px;

  vertical-align: middle;
  margin-right: 12px;
}

ul.features-list li.disabled:before {
  content: '';
  display: inline-block;
  background-image: url('https://pages.devex.com/rs/685-KBL-765/images/icon-check-disabled.svg');

  width: 16px;
  height: 16px;

  vertical-align: middle;
  margin-right: 12px;
}


/* Ticket box
*/
.ticket-box {
  position: relative;
  margin-bottom: var(--large-spacer);

  background: var(--white);
}

@media only screen and (min-width: 769px) {
  .ticket-box {
    /* min-height: 796px; */
    min-height: 364px;
  }
}

.ticket-box .offer {
  position: absolute;
  top: 0;
  width: 100%;
  padding: var(--tk-1);

  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  text-align: center;

  background: var(--orange-80);
  color: var(--white);
}

.ticket-box .offer.secondary {
  background: var(--gray-40);
  color: var(--gray-60);
}

.ticket-box .title {
  padding: var(--medium-spacer) var(--small-spacer) var(--small-spacer) ;
}

.ticket-box .title h4 {
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;

  margin-bottom: -8px;

  color: var(--text-primary);
}

.ticket-box .title h5 {
  font-size: 16px;
  line-height: 22px;
  font-weight: normal;

  color: var(--text-primary);
}

.ticket-box .price {
  padding: 0 var(--small-spacer);
}

.ticket-box .price .value-primary {
  font-size: 46px;
  line-height: 52px;
  font-weight: bold;

  color: var(--text-primary);
}

.ticket-box .price .value-secondary {
  font-size: 16px;
  line-height: 22px;
  /* font-weight: bold; */

  color: var(--text-primary);
}

.ticket-box .content {
  padding: var(--small-spacer) var(--small-spacer) var(--small-spacer);

  border-top: 1px solid var(--gray-20);
}

.ticket-box .content p {
  font-size: 16px;
  line-height: 21px;

  color: var(--text-secondary);

  margin: var(--tk-1) 0;
}

.ticket-box .actions {
  padding: var(--large-spacer) var(--small-spacer) var(--small-spacer)  var(--small-spacer);
}

.ticket-box .footer {
  padding: 0 var(--medium-spacer) var(--medium-spacer);

  font-size: 14px;
  line-height: 18px;

  color: var(--text-primary-muted);
}

.ticket-box .annex {
  padding: var(--small-spacer) var(--small-spacer);

  background: var(--gray-20);

  color: var(--text-secondary);
}


/* Modal
*/
.modal {
  z-index: 10000;
  padding-top: 10%;
}

.modal-body {
  color: var(--text-primary);

  font-size: 18px;
  margin: var(--tk-2) 0 var(--tk-4);
}

.modal-actions {
  padding-top: var(--tk-3)
}

/* Experimental
   ========================================================================== */

#tickets--cut {
  /* height: 590px; */
  height: 184px;
  width: 100%;
  display: inline-block;
  margin-top: -674px;

  background-color: var(--gray-0);
}

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

  #tickets--cut {
    height: 1500px;
    margin-top: -1500px;
  }
}


/* Marketo overrides
   ========================================================================== */

.mktoButtonRow {float: left !important;}
label#LbltermsandConditions {width: calc(100% - 40px) !important; float: right;}