/*
Project Name: Bootstrap 5 ECO2 Template
Project URI: https://github.com/jvining
Description:  Jabberwocky
Author: Joshua Vining
Author URI: https://github.com/jvining
*/
  :root {
 --pallette: #0505B0 #0021FC #03E8AB - Accent #08C9F7;
 
 /* Event Colors */
 --event-color-primary: #0505B0!important;
 --event-color-secondary: #0021FC!important;
 --event-color-tertiary: #08C9F7!important;
 --event-color-accent: #03E8AB!important;
 --event-color-footer: var(--event-color-secondary) !important;
 --event-header-color: #070749!important;

 /* Fonts */
 --event-font-primary: 'komet', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'!important;
 --event-font-secondary: 'niveau-grotesk', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'!important;
 --event-font-tertiary: 'proxima-nova-condensed', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'!important;

 /* Logos - /UploadedFiles/EventPage/brands/procurecon/reff/logos */
 --event-logo-knockout:url('/UploadedFiles/EventPage/bootstrap5/img/logo-knockout.svg') center center no-repeat;
 --event-logo-color:url('/UploadedFiles/EventPage/bootstrap5/img/logo-color.svg') center center no-repeat;
 
 /* Homepage Hero Section */
 --event-hero-gradient: radial-gradient(58.28% 184.2% at 28.75% 35.83%, rgba(0, 33, 252, 0) 0%, hsl(from var(--event-color-primary) h s l / 60%) 100%);
 --event-hero-info-circle: var(--event-color-primary);
 --event-hero-info-gradient:linear-gradient(104.55deg, hsl(from var(--event-color-secondary) h s l / 70%) 58.25%, hsl(from var(--event-color-primary) h s l / 60%) 100% );
 
 /* Inner Pages Hero Section  */
 --event-inner-page-gradient:linear-gradient(240deg, rgba(0, 33, 252, 0) 48.41%, var(--event-color-primary) 100%);
 --event-inner-page-strip:url('/UploadedFiles/EventPage/1004998/images/bg-img-hero-inner.jpg') center 20% scroll no-repeat;
 
 /* Global - /UploadedFiles/EventPage/brands/procurecon/reff/speaker-borders */
 --event-speaker-border:url('/UploadedFiles/EventPage/brands/procurecon/reff/speaker-borders/pcon-speaker-borders-east.png');
 --event-connect-gradient:linear-gradient(-44deg, rgba(221,216,212,0.3) 0%,rgba(218,213,210,0.3) 2%,rgba(210,206,203,0.3) 3%,rgba(194,193,191,0.3) 6%,rgba(170,170,170,0.3) 11%,rgba(161,161,161,0.3) 12%,rgba(141,145,146,0.3) 15%,rgba(124,130,130,0.3) 18%,rgba(120,125,128,0.3) 19%,rgba(99,104,108,0.3) 22%,rgba(93,101,104,0.3) 23%,rgba(86,94,97,0.3) 24%,rgba(71,80,85,0.3) 26%,rgba(72,81,86,0.3) 27%,rgba(81,91,93,0.3) 28%,rgba(107,115,118,0.3) 32%,rgba(113,118,122,0.3) 33%,rgba(117,122,126,0.3) 34%,rgba(159,165,165,0.3) 42%,rgba(165,169,172,0.3) 43%,rgba(171,175,176,0.3) 44%,rgba(175,179,180,0.3) 45%,rgba(192,193,195,0.3) 48%,rgba(195,196,198,0.3) 49%,rgba(212,214,213,0.3) 53%,rgba(223,223,223,0.3) 56%,rgba(224,224,224,0.3) 58%,rgba(220,220,220,0.3) 61%,rgba(217,217,217,0.3) 62%,rgba(216,216,218,0.3) 63%,rgba(201,202,204,0.3) 68%,rgba(202,203,205,0.3) 69%,rgba(194,198,201,0.3) 71%,rgba(170,175,179,0.3) 79%,rgba(162,167,173,0.3) 81%,rgba(143,148,154,0.3) 87%,rgba(145,150,156,0.3) 88%,rgba(176,181,185,0.3) 94%,rgba(189,193,196,0.3) 96%,rgba(209,210,212,0.3) 100%);
 --event-image-gradient: linear-gradient(240deg, hsl(from var(--event-color-primary) h s l / 0%) 48.41%, hsl(from var(--event-color-primary) h s l / 60%) 100%);

/* Change text/bg color for last child nav items. If commented out it defaults to white  */
 --event-nav-btn-fg:var(--event-color-primary);
 --event-nav-btn-bg:var(--event-color-accent);

--event-br-global: calc(1.3125em - 1px)!important;
 
}


/********************************
  Global
********************************/
body {background-color: #f2f2f2;}

/********************************
 #cross-event-nav
********************************/ 
#eco-primary-nav.navbar-dark.bg-transparent a[data-bs-target="#cross-event-nav"] {margin-left:1em!important;transition: all 0.3s ease!important;}
#eco-primary-nav.navbar-light.bg-light a[data-bs-target="#cross-event-nav"] {margin-left:1em!important; border-color:#6c757d; color:#6c757d;transition: all 0.3s ease!important;}
#eco-primary-nav.navbar-light.bg-light a[data-bs-target="#cross-event-nav"]:hover {background:var(--event-color-secondary); border-color:var(--event-color-secondary); color:#fff!important; transition: all 0.3s ease!important;}

body.front-page.modal-open #eco-primary-nav a[data-bs-target="#cross-event-nav"] {margin-left:2em!important;transition: all 0.3s ease!important;}

#cross-event-nav .modal-content {min-height: 100vh !important; border-radius: unset !important; max-width:1200px!important; margin-left: auto; margin-right: auto;}
#cross-event-nav .modal-dialog{max-width: unset; border-radius: unset !important; background: linear-gradient(180deg, #00000075 0%, #0505b0 100%);}
#cross-event-nav .modal-body > .container .list-group-item, #cross-event-nav .modal-body > .container .list-group-item .nav-link  {border-color:#ffffff80!important; color:#ffffff80!important;}
#cross-event-nav .modal-body > .container .list-group-item:hover, #cross-event-nav .modal-body > .container .list-group-item:hover .nav-link {border-color:#fff!important; color:#fff!important;}
#cross-event-nav .modal-body > .container .list-group-item .nav-link sup  {display:none;transition: all 0.3s ease!important;}
#cross-event-nav .modal-body > .container .list-group-item:hover .nav-link sup  {display:inline-block;transition: all 0.3s ease!important;}
@media(max-width:990px){#cross-event-nav .modal-body > .container .list-group-item .nav-link.fa-3x {font-size:2em!important;}}      

body.front-page.modal-open #eco-primary-nav{z-index:9999!important;background:unset!important; outline:unset!important;border:none!important; box-shadow:unset;}
body.front-page.modal-open #eco-primary-nav .navbar-brand {background: var(--event-logo-knockout)!important; transition:all 0.3s ease;}

/********************************
  Primary Navigation 
********************************/
/* Logo */
#eco-primary-nav.bg-transparent .navbar-brand{transition: all 0.5s ease-in-out!important;}
#eco-primary-nav.bg-light .navbar-brand{transition: all 0.5s ease-in-out!important; }

/* On scroll fixes & behaviors */
@media(min-width:990px){#eco-primary-nav.bg-transparent #primary-nav ul.navbar-nav li.nav-item a.nav-link{color:#fff!important;}}
#eco-primary-nav.bg-light {outline: 1px #eee solid; border-bottom-left-radius: var(--event-br-global); border-bottom-right-radius: var(--event-br-global); box-shadow: 1px 1px 10px #00000045;}

/* Primary nav link styles */
#eco-primary-nav #primary-nav ul.navbar-nav li.nav-item a.nav-link{font-weight: 600; font-family: var(--event-font-tertiary) !important; line-height:1em;padding: .85em 1em;border-radius: var(--event-br-global); text-transform:uppercase;}
#eco-primary-nav #primary-nav ul.navbar-nav li.nav-item a.nav-link ul.dropdown-menu a.dropdown-item{font-family: var(--event-font-tertiary) !important;font-weight: 400;}

/* Primary nav hover styles */
#eco-primary-nav #primary-nav ul.navbar-nav:first-of-type li > a:hover{background: var(--event-color-secondary); color: #fff !important;}
#eco-primary-nav #primary-nav ul.navbar-nav li:has(.dropdown-menu)> a:hover{border-top-left-radius: var(--event-br-global) !important; border-top-right-radius: var(--event-br-global) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}

/* Primary Nav - Buttons */
#eco-primary-nav #primary-nav ul.navbar-nav:last-of-type > li:last-child > a span.btn {background: var(--event-nav-btn-bg, var(--event-color-secondary)); color: var(--event-nav-btn-fg, var(--white)); font-family: var(--event-font-secondary); text-shadow:none;}
#eco-primary-nav #primary-nav ul.navbar-nav:last-of-type > li:last-child > a span.btn:hover {background: var(--event-nav-btn-bg-hover, var(--event-color-primary)); border-radius: var(--event-br-global); color: var(--event-nav-btn-fg-hover, var(--white));}

#eco-primary-nav #primary-nav ul.navbar-nav:last-of-type > li:first-child > a span.btn {background-color: var(--event-color-secondary); color: var(--event-hero-btn-pri-fg-hover, var(--white));}
#eco-primary-nav #primary-nav ul.navbar-nav:last-of-type > li:first-child > a span.btn:hover {background-color: var(--event-color-primary); color: var(--event-hero-btn-pri-fg, var(--white));}

/********************************
  Hero Styles
********************************/
#eco-header, #eco-header .video-container, #eco-header .video-container video {border-bottom-left-radius: var(--event-br-global); border-bottom-right-radius: var(--event-br-global);}

#eco-header .container-fluid .container .row [class*="col-"]:before {content: ""; width: 35em; height: 35em; position: absolute; background-color: var(--event-hero-info-circle); border-radius: 50%; left: -5%; top: -120%; z-index: -9; opacity:.75;}
#eco-header .container-fluid .container .row [class*="col-"] {padding: 1em; border-radius: var(--event-br-global); position: relative; overflow: hidden; background: linear-gradient(180deg, var(--event-color-primary) -90%, transparent -50%, var(--event-color-primary) 100%);}

/********************************
  Footer 
********************************/
#eco-footer #eco-footer-credits {background-color:unset; padding:1em;}
#eco-footer #eco-footer-credits .container {background-color:var(--event-color-primary); border-radius: var(--event-br-global); }
#eco-footer #eco-footer-credits .container .row{background:var(--event-logo-knockout); background-position:95% 90%; background-size:180px; background-repeat:no-repeat;transition: all .1s ease-out;}

 
#eco-footer .slick-slide {background:#fbfbfb; border-radius:var(--event-br-global);}
#eco-footer .slick-slide a img {mix-blend-mode:multiply!important;}

/********************************
  Buttons
********************************/
.btn{font-family: var(--event-font-tertiary); font-weight: 600; border-radius:var(--event-br-global); }

/* Branded Buttons Styles */
.btn-event{background: var(--btn-bg, var(--event-color-primary))!important;}
.btn-event:hover{background: var(--btn-bg-hover, var(--event-color-secondary))!important;}
.btn-event,.btn-inverse{font-weight: 600;}

.btn-outline-event{color:var(--event-color-primary); border-color:var(--event-color-primary);}
.btn-outline-event:hover{color:#fff; background:var(--event-color-primary); border-color:var(--event-color-primary);}

.btn-outline-inverse{ color:#fff; border-color:var(--event-color-secondary)!important;}
.btn-outline-inverse:hover{background:var(--event-color-secondary)!important; border-color:var(--event-color-secondary)!important;}

/* Pill Nav .active fixes */
.nav-pills .nav-link.btn-outline-event.active {color:#fff!important; background:var(--event-color-primary); border-color:var(--event-color-primary);}
.nav-pills .nav-link.btn-outline-event-2.active {color:#fff!important; background:var(--event-color-secondary)!important; border-color:var(--event-color-secondary)!important;}


/********************************
  Boostrap Fixes
********************************/
.rounded-xl {border-radius: var(--event-br-global);}

.font-weight-light {font-weight: 300!important;}
.font-weight-normal {font-weight: 400!important}
.font-weight-bold {font-weight: 700!important}

/********************************
  Typography
********************************/
body p, body ul, body ol, body li, body table, body address, body blockquote, body cite {color:#5f5f5f; font-size:16px; line-height:1.75em; font-weight:400; font-family: var(--event-font-secondary);}

body :is(h1,h2,h3,h4,h5,h6) {font-weight:400;color: var(--event-header-color) !important;font-family: var(--event-font-primary) !important;letter-spacing: -.05rem;}
body #sb-page-content :is(p,div,ul,ol,li,table,address,blockquote,cite,label,input) {font-family:var(--event-font-secondary); }

/* Link Color fixes */
body #sb-page-content a:not(.btn){/* color: var(--event-color-secondary); */font-weight:700;font-family: var(--event-font-tertiary);}
body #sb-page-content a:not(.btn):hover, body #sb-page-content a:not(.btn):focus{color: var(--event-color-primary);}

/* Reduce H1 for Form Pages (long titles) */
body.not-front:has(:is(#gdprFields,.wbr-form)) h1.page-titler { font-size: 3rem !important; }

/********************************
  Utility Classes
********************************/
.lh-0 { line-height: 0 !important; }
.lh-1 { line-height: 1 !important; }
.lh-sm {line-height: 1.25 !important;}
.lh-base { line-height: 1.5 !important; }
.lh-lg { line-height: 2 !important; }

.font-primary{font-family: var(--event-font-primary)!important;}
.font-secondary {font-family: var(--event-font-secondary)!important;}
.font-tertiary {font-family: var(--event-font-tertiary)!important;}

.bg-color-primary{background:var(--event-color-primary) !important;}
.text-color-primary{color: var(--event-color-primary) !important;}
.text-color-secondary{color:var(--event-color-secondary) !important;}
.text-color-tertiary{color:var(--event-color-tertiary) !important;}
.text-color-accent{color:var(--event-color-accent) !important;}
.text-color-header{color:var(--event-header-color) !important;}

.object-fit-cover {object-fit:cover;}
.object-fit-contain {object-fit:cover;}

/********************************
  Event Gradients 
********************************/
.gradient-img {background: var(--event-image-gradient);}
.gradient-img img, .gradient-img video {position:relative; z-index: -1; display: block;}

/********************************
  Border
********************************/
.border-event {  border-color:var(--event-header-color) !Important;}   

/********************************
  Speakers
********************************/
.speaker-borders, .speaker-borders * { transition: all .1s ease-out;}
.speaker-borders { position: relative;}
.speaker-borders:hover:before { position: absolute; content: ""; top: 0; width: 100%; height: 100%; background-image: var(--event-speaker-border); background-size: contain; background-repeat: no-repeat; background-position: center;rotate: 180deg; }
.speaker-borders:hover img { border-radius: 50% !important;}

/********************************
 Slick Slider Image Carousel 
********************************/
.slick-gallery-1 .slick-track{min-height:650px; max-height:1100px;}
.slick-gallery-1 .slick-gallery-cell {min-height:650px; max-height:1100px;}
.slick-gallery-1::before {top:0; left: 0; z-index: 1; width: 150px; height:105%; content: '';position: absolute;  background: linear-gradient(90deg, rgb(255 255 255 / 65%), rgb(255 255 255 / 55%), rgb(255 255 255 / 45%), rgb(255 255 255 / 35%), rgb(255 255 255 / 25%), rgb(255 255 255 / 0%));}
.slick-gallery-1::after {top:0; right: 0; z-index: 1; width: 150px; height:105%; content: '';position: absolute;  background: linear-gradient(-90deg, rgb(255 255 255 / 65%), rgb(255 255 255 / 55%), rgb(255 255 255 / 45%), rgb(255 255 255 / 35%), rgb(255 255 255 / 25%), rgb(255 255 255 / 0%));}
@media(max-width:1400px){.slick-gallery-1 .slick-gallery-cell {min-height:550px; max-height: 750px;}}

.slick-gallery-1 ul.slick-dots{list-style:none;text-align:center;margin-top: -3.5em; position: relative; z-index:99; padding:unset!important;}
.slick-gallery-1 ul.slick-dots li {display:inline-block; background:var(--event-color-tertiary); width:100px; margin:0px 3px;  height:2px;}
.slick-gallery-1 ul.slick-dots li.slick-active {  background:var(--event-color-accent);  }
.slick-gallery-1 ul.slick-dots li button {background: none;	color: inherit;	border: none;	padding: 0;	font: inherit;	cursor: pointer;	outline: inherit; text-indent:-9999px; width:100%;}

@media(max-width:1024px){.slick-gallery-1 ul.slick-dots li {width:80px; margin:0px .75em;}}
@media(max-width:990px){.slick-gallery-1 ul.slick-dots li {width:60px; margin:0px .5em;} .slick-gallery-1 .slick-gallery-1::before,.slick-gallery-1::after{width:80px;}}
@media(max-width:550px){.slick-gallery-1 .slick-gallery-cell {min-height:350px; max-height: 550px;} .slick-gallery-1 ul.slick-dots li {width:40px;  margin:0px .15em;} .slick-gallery-1::before,.slick-gallery-1::after{width:50px;}}

/********************************
  Agenda At A Glance
********************************/
.btn-accordian svg{transition: all .3s ease-in-out;}
.btn-accordian svg{rotate: 0deg;}
.btn-accordian.collapsed svg{rotate: 44deg;}

/********************************
  Coming Soon events
********************************/
@media (min-width:768px) {.coming-soon-banner {height: 200px !important;}}
@media (min-width:992px) {.coming-soon-banner {height: unset !important;}

/********************************
  PCon Community In Numbers Grid
********************************/
.parent{gap:.3em;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:min-content min-content min-content min-content min-content;grid-auto-flow:row;grid-template-areas:"cta-1 cta-register" "cta-video cta-video" "cta-3 cta-img" "cta-2 cta-2" "cta-text cta-text";} 
.cta-1{grid-area:cta-1;} .cta-register{grid-area:cta-register;} .cta-video{grid-area:cta-video;} .cta-img{grid-area:cta-img;}
.cta-2{grid-area:cta-2;} .cta-3{grid-area:cta-3;} .cta-text{grid-area:cta-text;}
.cta-text.border-event{border-color:transparent !important;}
.video-container{background-image:url(https://eco-cdn.iqpc.com/eco/images/uploaded_images/BTMpwz5fXSiWGvD5r3s0zowkWKfTicaswWfTPZQz.png);background-size:cover;background-position:center center;background-size:125% 125%;}
@media(min-width:992px){.parent{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:min-content min-content min-content min-content min-content;grid-auto-flow:row;grid-template-areas:"cta-1 cta-1 cta-video cta-video cta-video cta-video cta-video cta-register cta-register cta-register cta-register cta-register" ". . cta-video cta-video cta-video cta-video cta-video cta-img cta-img . . ." ". . cta-video cta-video cta-video cta-video cta-video cta-2 cta-2 cta-2 cta-2 ." ". . . . cta-3 cta-3 cta-3 cta-2 cta-2 cta-2 cta-2 ." "cta-text cta-text cta-text cta-text cta-3 cta-3 cta-3 . . . . .";} .video-container{background-image:none;} .cta-text.border-event{border-color:var(--event-header-color) !important;}}

/********************************
  Hover Card 
********************************/
.hover-card-1{height:40vh;min-height:31.25em;}
.hover-card-1 *{transition:all .2s ease-in-out;}
.hover-card-1:hover .card{margin-top:-10em;}
.hover-card-1:hover p.card-text, .hover-card-1:hover .card-body i{font-size:18px;}}
@media(min-width:992px){.hover-card-1 p.card-text, .hover-card-1 .card-body i{font-size:0px;}
@media(min-width:1200px){.hover-card-1{ height:max(45vh,34.37em);}}
@media(min-width:1600px){.hover-card-1{height:max(45vh,40.6em);}}

/********************************
 Share The Knowledge
********************************/ 
@media(min-width:992px){.hover-card-2 *{transition:translate .2s ease-in-out,opacity .3s ease-in-out;} .hover-card-2 .hover-icon{opacity:0;} .hover-card-2:hover .hover-icon{opacity:1;}}

/********************************
 You Need  Marquee Text 
********************************/
.marquee-text{height:350px;overflow:hidden;position:relative;width:100%;}
.marquee-text ul{animation:scrollUp 12s ease-in-out infinite;/* animation:scrollUp 12s ease-in-out infinite alternate;*/}
.marquee-text ul li{height:60px;padding:0px 0;width:100%;}
@media (min-width:992px){.marquee-text ul li{height:120px;}}

@-webkit-keyframes scrollUp{from{transform:translateY(0);} to {transform:translateY(-75%);/* 75*/}}
@keyframes scrollUp{from{transform:translateY(0);} to {transform:translateY(-75%);}}

.bg-scroller{position:relative;overflow:hidden;}
.bg-scroller svg{position:absolute;left:0%;top:-1%;width:40%;z-index:2;rotate:90deg;}
.bg-scroller:before{content:"";position:absolute;background-color:var(--event-color-secondary);border-radius:50%;width:100vw;max-width:500px;height:100vh;max-height:500px;top:7em;left:-3em;}

@media (min-width:768px){.bg-scroller svg{height:100%;width:auto;max-width:100%;top:0;left:0;rotate:0deg;z-index:0;} .bg-scroller:before{width:65%;min-width:50vw;height:65vh;top:-30%;right:-10vw;left:auto;max-height:unset;max-width:unset;justify-self:unset;} .marquee-text::before{top:0;left:0;z-index:1;width:100%;content:'';height:85px;position:absolute;background:linear-gradient(180deg,var(--event-color-secondary),rgba(255,142,113,0));} .marquee-text::after{left:0;bottom:0;z-index:1;width:100%;content:'';height:85px;position:absolute;background:linear-gradient(180deg,rgba(255,142,113,0),var(--event-color-secondary));}}
@media (min-width:992px){.bg-scroller:before{height:800px;width:800px;right:-20%;top:-35%;}}
@media (min-width:1200px){.bg-scroller:before{height:1000px;width:1000px;right:-15%;top:-55%;}}
@media (min-width:1600px){.bg-scroller:before{height:1000px;width:1000px;right:-3%;}}