html {font-size: 16px; background-color: #0e3963;  }
body {font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size:17px; padding:0; margin:0; line-height: 1.6; background-color: #0e3963; line-height: 1.4; background: url(images/bg.jpg); background-attachment: fixed; background-size: calc(20vw);}  
a {color:#e0c849;}
a:hover {color:#fff;}
p {padding:0 0 10px; color:#fff; line-height: 1.8;}
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.uppercaps {text-transform: uppercase;}
.w100 {display: block; margin:0 auto; width:100%; padding:30px 0}
.row {padding-bottom:30px;}
.row .row {padding-bottom:0;}
.section {padding-top:50px ;padding-bottom:20px; min-height: 500px;}
.content {display: block; width:100%; min-height: 100vh;}
.valignmid {  display: flex; justify-content: center; align-itrems: center;}
.hide {display: none;}
.blue {color:#0e3963;}
.lblue {color:#97c3cc;}
.button {background-color: #e0c849; display: block; width:fit-content; padding:10px 60px; margin:20px auto; color:#0e3963; text-decoration: none; font-weight: 600; font-size:1.2rem; border-radius: 50px; }
.button:hover {background-color: #97c3cc; color:#0e3963;}
.caps {text-transform: uppercase;}
.hide {display: none !important;}


/* H1-H4 */
h1 {--m:2; --u:calc(var(--m)*1px*sqrt(2)); --o:-.05em; background:repeating-linear-gradient(45deg, #97c3cc 0 var(--u), #0e3963 0 calc(2*var(--u))) text; color:transparent; font:600 calc(var(--m)*clamp(0.5em, 30vmin, 2.8em))/ 1.125 "Montserrat", Helvetica, Arial, sans-serif; text-shadow:var(--o) var(--o) #fff; place-self:center; letter-spacing:.1em; text-align:center; text-transform:uppercase; text-wrap:balance; margin:20px auto 40px;}
.allchar { --m: 1 }
h2 {font-size: 2.4rem; font-weight: 600; color:#97c3cc; text-transform: uppercase;}
h3 {font-size: 2rem; font-weight: 600; color:#fff; line-height: 1.4; padding:0 0 20px;}
h4 {font-size: 1.4rem; font-weight: 700; color:#97c3cc; padding:20px 0 10px 0;}
.h1bg {border-bottom:1px dotted #028090; border-top:1px dotted #028090; padding:0;}
.h1bg .row {padding:0;}
.h1img {display: block; margin:0 auto; width:100%; height: auto; margin:0;}
.section {margin:40px auto;}
.rowspace10 {display: block; height: 10px;}
.rowspace20 {display: block; height: 200px;}
.label {color:#97c3cc; text-transform: uppercase; font-weight:600; letter-spacing: 1px; border-bottom:1px solid #97c3cc; width: fit-content; margin:0 0 10px; padding:2px 0px; font-size:1.2rem;}
sup {font-size:.5rem; position: relative; top:-1rem;}
li {color:#fff; padding-bottom:10px;}
ol > li::marker { font-weight: bold;}
.ty {width:90%; height: auto; border:2px solid #97c3cc; border-radius: 10px; margin:0 auto 40px; }

/* HEADER */
#header { margin:0px auto 50px; min-height: 0; padding: 20px 0 0 0;}
.row {padding:0 !important}
#navlogo {width:auto; width: 80%; height: auto; margin:55px auto 20px; display: block; max-width: 600px; }
#eventlogo {width:auto;width: 98%; height: auto;margin:40px auto 20px; display: block;}
/* NAV */
.navcontainer {width:98%; margin:0 auto; display: block; max-width: 1320px; position:fixed; left: 50%; top:10px; transform: translate(-50%, 0); z-index: 200; }
#navmain {font-size: 0.9rem; font-weight: 700; text-transform: uppercase;  padding: 0; background-color: #97c3cc !important ; border-radius: 50px;}
#navbarSupportedContent {}
#navmain .nav-item {color:#0e3963; padding:10px 20px; text-align: center;} 
#navmain .nav-item:hover {color:#fff; cursor: pointer;} 

/* HOME */
#header h3 {font-weight: 600; color:#fff;  padding:10px 0 0px 10px; font-size:2.0rem }
.small {font-size:0.7em; font-weight: 400;}
.headerinfo {display:flex; align-content: baseline;}
.borderright {padding-right:40px; border-right:1px dotted #97c3cc}
.paddingleft {padding-left:20px;}

/* ABOUT */
#about h3 {font-size:1.5rem;}
.buttonleft {margin:20px 0 !important;}

/* TICKETS */
.venderbooth {border:1px solid #97c3cc; width:fit-content; margin:0 auto; padding:20px 20px; background:#0e3963; border-radius: 20px; }
iframe {margin:40px auto; }

/* SUPPORTERS */
.supporterlogos { display: block; width:fit-content; height: auto; border:2px solid #97c3cc; padding:0; border-radius: 10px; margin:-10px auto 20px;}
.supporters h3 {margin:40px auto 0; color:#97c3cc; font-size:3rem;}

/* SPEAKERS */
.speaker .row {display:flex; border:1px dotted #765c0a; background-color: #000; border-radius: 10px; margin-bottom:40px; width:99%; align-content:baseline; position: relative;}
.speaker {display:flex;}
.speakerpic {border-radius: 100%; margin:10px auto 20px; width:100%; border:#dec250 2px solid;}
.speakername {font-size:1.4rem; display: block; margin:20px auto 0; font-weight: 400; color:#dec250;  line-height: 1.2;}
.speakertitle {font-size:0.9rem; display: block; margin:4px auto 0; font-weight: 500;  color:#8f7305; line-height: 1.2; font-style: italic;}
.speakercompany {font-size:1rem; display: block; margin:2px auto 20px; font-weight: 600; color:#c2a52e;  line-height: 1.1;}
.speakerlogo {display: none; width:250px; height: auto; mix-blend-mode: darken;}
.speakerbio {width:98%; display: none; margin:5px auto 20px; text-align: left; font-size:1rem; font-weight: 400; color:#f9f1d0; line-height: 1.6; }
.bioviewbutton {background:#403202; color:#ae8c04; width:98%; display: block; margin:10px auto 10px; border-radius: 10px; font-size:0.8rem; text-transform: uppercase; font-weight: 600;}
.bioviewbutton:hover  {background:#8d6d03; cursor: pointer;}
.bioview {position: absolute; height: 40px; bottom:-20px;}

/* AGENDA */
#agendatable {color:#f9f1d0; font-weight: 300; display: block; margin:0 auto;}
#agendatable ul {color:#f9f1d0; padding:10px 0 0 20px;}
#agendatable li {padding:0 0 2px;}
#agendatable strong {font-weight: 600;}
#agendatable td {border-bottom:1px solid #5d4d10; padding:20px 0; font-size:1rem; line-height: 1.6;}

/* REGISTER */
.ticketprices {padding-top:20px;}
.ticketprices h4 {padding:10px 0; margin:0 auto; color:#f9f1d0; font-weight: 600;}
.vipinclude  {border:1px dotted #765c0a; padding:10px 0 5px; margin:10px auto 20px; border-radius: 10px;}
.vipinclude h3 {color:#caad3e; padding:0 0 10px 0; font-weight: 700; font-size:1.4rem;}
.photolist {margin-top:10px;}
.discountcode {max-width: 800px; width:90%; margin:30px auto; display: block;}



#contact .label {margin:0 auto 10px;}
#contact h2 {text-transform: none!important; padding-top:100px;}
#contact a {line-height: 2;}

/* FOOTERS */
#footer {background-color: #042d55; margin:0 auto 0; padding:10px 0; font-size:0.7rem; font-weight: 500; color:#97c3cc; width:100%; border-top:1px dotted #97c3cc; text-align: center;}
#footer .nav-link {color:#97c3cc;}
.footercopyright {margin:0 0 0 20px;}


/* 1300 - 1400 */
@media only screen and (min-width: 1300px) and (max-width: 1400px) {
    h2 {font-size:2.5rem;}
    h3 {font-size:1.8rem;}

}

/* 1200 - 1300 */
@media only screen and (min-width: 1200px) and (max-width: 1300px) {
    h2 {font-size:2.2rem;}
    h3 {font-size:1.5rem;}
}

/* 1100 - 1200 */
@media only screen and (min-width: 1100px) and (max-width: 1200px) {
    h2 {font-size:2.2rem;}
    h3 {font-size:1.5rem;}

}

/* 1000 - 1100 */
@media only screen and (min-width: 1000px) and (max-width: 1100px) {
  h2 {font-size:2.2rem;}  
  h3 {font-size:1.5rem;}
  #header h3 {font-size:1.8rem;}
}

/* 900 - 1000 */
@media only screen and (min-width: 900px) and (max-width: 1000px) {
  html {font-size:15px;}
  .container {max-width: 95%;}
  h1 {font-size:5rem;}
  h2 {font-size:2.2rem;}  
  h3 {font-size:1.5rem;}
  #header h3 {font-size:1.8rem;}
}

/* 800 - 900 */
@media only screen and (min-width: 800px) and (max-width: 900px) {
  html {font-size:14px;}
.container {max-width: 95%;}
  h1 {font-size:5rem;}
  h2 {font-size:2.0rem;}  
  h3 {font-size:1.5rem;}
  #header h3 {font-size:1.8rem;}

}

/* 768 - 800 */
@media only screen and (min-width: 768px) and (max-width: 800px) {
  html {font-size:14px;}
.container {max-width: 95%;}
 h3 {font-size:1.2rem;}
   h1 {font-size:5rem;}
  h2 {font-size:2.0rem;}  
  h3 {font-size:1.5rem;}
  #header h3 {font-size:1.8rem;}

}

/* 600 - 768 */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    html {font-size:14px;}
.container {max-width: 95%;}
   h1 {font-size:5rem;}
  h2 {font-size:2.0rem;}  
  h3 {font-size:1.5rem;}
  .supporters h3 {font-size:2.0rem;}  
 #navmain {border-radius: 5px;}
 .aboutleft {text-align: center;}
 .label {text-align: center; margin:0 auto;}
 h2 {margin:20px auto; text-align: center;}
  .container, .container-sm {max-width: 90%}
  #header h3 {border-left:none; text-align: center;width: fit-content; margin:20px auto; padding:5px 0;}
.buttonleft {margin:20px auto !important; display:block ;}
.borderright {border:none;}

}

/* 500 - 600 */
@media only screen and (min-width: 500px) and (max-width: 600px) {
    html {font-size:14px;}
.container {max-width: 95%;}
   h1 {font-size:3.5rem;}
  h2 {font-size:2.0rem;}  
  h3 {font-size:1.5rem;}
  .supporters h3 {font-size:2.0rem;}  
 #navmain {border-radius: 5px;}
 .aboutleft {text-align: center;}
 .label {text-align: center; margin:0 auto;}
 h2 {margin:20px auto; text-align: center;}
  .container, .container-sm {max-width: 90%}
  #header h3 {border-left:none; text-align: center;width: fit-content; margin:20px auto; padding:5px 0;}
.buttonleft {margin:20px auto !important; display:block ;}
.borderright {border:none;}

}

/* 0 - 500 */
@media only screen and (min-width: 0px) and (max-width: 500px) {
    html {font-size:13px;}
.container {max-width: 95%;}
   h1 {font-size:3.5rem;}
  h2 {font-size:2.0rem;}  
  h3 {font-size:1.5rem;}
  .supporters h3 {font-size:2.0rem;}  
 #navmain {border-radius: 5px;}
 .aboutleft {text-align: center;}
 .label {text-align: center; margin:0 auto;}
 h2 {margin:20px auto; text-align: center;}
  .container, .container-sm {max-width: 90%}
  #header h3 {border-left:none; text-align: center;width: fit-content; margin:20px auto; padding:5px 0; font-size:1.5rem}
.buttonleft {margin:20px auto !important; display:block ;}
.borderright {border:none;}

}