@import url('https://fonts.googleapis.com/css?family=Boogaloo|Niramit:300,300i,400,400i,500,500i,600,600i,700,700i');

body {
 font-family: 'Niramit';
 font-weight: 400;
 overflow-x: hidden;
 background: #6120a0;
 background: -moz-linear-gradient(top, #6120a0 0%, #2e2342 100%);
 background: -webkit-linear-gradient(top, #6120a0 0%, #2e2342 100%);
 background: linear-gradient(to bottom, #6120a0 0%, #2e2342 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6120a0', endColorstr='#2e2342',GradientType=0 );
}
* {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-shadow:none;
 text-rendering: optimizeLegibility;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .btn {
 font-family: 'Boogaloo';
}
label {
 margin-bottom: 0;
 font-weight: 600;
}
small, .small {
 font-size: 85%;
}
.navbar-toggler {
 padding: .5rem .75rem;
}
.upper, .text-upper {
 text-transform: uppercase!important;
}
.btn { 
 text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
 font-weight: 300;
 padding: .25rem 1rem;
 font-size: 1.25rem;
 line-height: 1.45;
 letter-spacing: 1px;
 border-radius: 0;
}
.btn-group-lg>.btn, .btn-lg {
 padding: .5rem 1.5rem;
 font-size: 1.75rem;
 line-height: 1.5;
}
.btn-group-sm>.btn, .btn-sm {
 padding: .1rem .75rem;
 font-size: .8rem;
 line-height: 1.5;
}
.alert {
 border-radius: 0;
}
[class*=btn]:not([class*=btn-outline]) {
 border: 0 !important;
}
/* ===== S T A R T * #wrapper ===== */
 #wrapper {
  height: 100%;
  display: flex;
  position: relative;
 }
 #sideColumn {
  background-color: #2b1044;
  z-index: 3;
  flex: 1;
 }
 @media screen and (max-width: 1199px){
  .container {
   max-width: 100%;
  }
  #wrapper.container {
   padding-right: 0;
   padding-left: 0;
  }
 }
 @media screen and (max-width: 991px){
  #sideColumn {
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  }
  #sideColumn:not(.toggled) #menuTabs,
  #sideColumn:not(.toggled) #catnav,
  #sideColumn:not(.toggled) #usernav{
   display: none;
  }
  #sideColumn.toggled {
   width: 300px;
   height: 100%;
   display: block;
   position: absolute;
   background-color: #000;
  }
  #sideColumn.toggled .fa-expand-alt {
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
 }
  #sideColumn.toggled #iconnav .sidebarToggle {
   display: none;
  }
  #sideColumn.toggled .fa-expand-alt:before {
   content: "\f00d";
  }
  #sideColumn.toggled #menuTabs,
  #sideColumn.toggled #catnav,
  #sideColumn.toggled #usernav {
   display: flex;
  }
  #sideColumn {
  background-color: #30104f;
   flex-basis: 34px;
  }
  #contentColumn {
   flex-basis: calc(100% - 34px);
  }
  #header .navbar {
   padding: 0;
  }
  #header .navbar .navbar-nav:first-of-type {
   margin: .5rem 1rem
  }
  #footer img {
   max-height: 50px;
  }
  #footer .btn {
   padding: .25rem .7rem;
   font-size: 1rem;
  }
 }
 @media screen and (min-width: 992px){
  #sideColumn {
   flex-basis: 260px;
  }
  #contentColumn {
   flex-basis: calc(100% - 260px);
  }
 }



/* = = = #header = = = */
 #header {
  background: #2e2341 url(../images/topbar.jpg) center -15px repeat-x;
  color: #fff;
  padding: 2.5rem 0 0;
 }
 #header .brand img {
  max-height: 80px;
 }
 #header span {
  font-size: 105%;
 }
 #header .navbar {
  margin-top: .75rem;
  font-family: 'Boogaloo';
  font-size: 1.15rem;
  font-size: 1.25rem;
  letter-spacing: 1px;
  background-color: #150822;
 }
 #header .navbar .nav-link {
  padding: .5rem .65rem;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255,255,255,.8);
 }
 #header .navbar .nav-link:hover {
  color: white;
 }
/* = = = /#header = = = */
/* = = = #search = = = */
 #search {
  background-color: #555;
 }
 #search .input-group .btn {
  padding: .25rem 1.5rem .25rem .75rem;
  line-height: 1.25rem;
 }
 #search .btn [class*=fa] {
  font-size: 80%;
  opacity: .7;
 }
 #search .form-control {
  height: unset;
  padding: .25rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25rem;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.95));
  border-color: rgba(255,255,255,.8);
 }
 #search .form-control::placeholder {
  color: #6120a0;
  font-weight: 700;
 }
 #search .form-control:focus {
  background-color: #fff;
 }
/* = = = /#search = = = */
/* = = = #sideColumn = = = */
 #sideColumn {
  padding-bottom: 1rem;
 }
 #sideColumn .triggerSide {
  background-color: #fff;
  padding: .25rem;
 }
 #sideColumn #catnav a:not(.btn),
 #sideColumn #usernav a:not(.btn),
 #sideColumn #iconnav a:not(.btn) {
  color: #fff;
 }
 #sideColumn #iconnav a:not(.btn) {
  opacity: .4;
 }
 #sideColumn #iconnav a:not(.btn):hover {
  opacity: .8;
 }
 .toggled {}

 #sideColumn #menuTabs .nav-link {
  color: orange;
 }
 #sideColumn #menuTabs, #sideColumn #menuTabs .nav-link {
  border-radius: 0;
  font-size: 90%;
  border: 0;
 }
 #sideColumn #menuTabs .nav-link.active {
  font-weight: 700;
 }
 #sideColumn #menuTabs .nav-link.active, #sideColumn #menuTabs .nav-item.show .nav-link {
  background-color: rgba(255, 255, 255, 0.3);
 }
 #sideColumn .nav-link {
  -webkit-transition: transform .35s ease-in-out;
  -moz-transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
  position: relative;
 }

 #sideColumn .dditem:before {
  font-weight: 300;
  content: "\f105";
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  right: 1rem;
  display: inline-block;
 }

 #sideColumn .nav-item.bg-secondary {
  background-color: black;
  color: #fff;
 }
 #sideColumn .nav-item.bg-secondary .dditem:before,
 #sideColumn .nav-item .nav-link[aria-expanded=true]:before {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
#sideColumn .dropdown-item:focus, #sideColumn .dropdown-item:hover {
 background-color: purple;
}

#sideColumn .dropdown-item {
 white-space: inherit;
 font-size: 90%;
}
#sideColumn .dropdown-item:first-child, #sideColumn .dropdown-item:last-child {
 border-radius: 0;
}

/* = = = /#sideColumn = = = */
 #season-countdown {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  font-size: .9em;
 }
 #season-countdown>div {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  border: 1px solid #888;
  text-align: center;
  margin-left: .25rem;
  font-size: 85%;
  text-transform: uppercase;
 }
 #season-countdown>div span {
  font-size: .9rem;
  background-color: #202020;
  display: block;
 }
 @media (min-width: 768px) {
  #season-countdown>div span {
   font-size: 1.25rem;
  }
 }
/* = = = #contentColumn = = = */
 #contentColumn {
  min-height: 29vh;
  position: relative;
  padding-top: .5rem;
  padding-bottom: 3rem;
  background-color: #fff;
 }
 #contentColumn > #search {
  margin-top: calc(-.5rem - 1px);
  margin-bottom: calc(.5rem - 1px);
 }
 @media screen and (min-width: 1200px) {
  #contentColumn {
   min-height: 50vh;
   padding: 2rem 1rem;
  }
  #contentColumn > #search {
   margin-top: -2rem;
   margin-bottom: 2rem;
   margin-left: -1rem;
   margin-right: -1rem;
  }
 }

 body#tinymce.mce-content-body {
  background: #fff;
  padding: 1rem;
 }
 .badge>input {
  border: 0;
  padding: 0;
  display: inline-block;
  height: auto;
  width: 40px;
  font-size: 15px;
  line-height: 16px;
  text-align: center;
  background-color: transparent;
  color: #fff;
 }
 .masonry {
  column-count: 3;  
  transition: all .5s ease-in-out;
  column-gap: .5em;
  column-fill: initial;
 }
 .masonry.artists {
  column-count: 5;
 }
 .masonry img {
  margin-bottom: .5em;
 }
 .masonry .artistBlock {
  position: relative;
  border: 1px solid rgba(0,0,0,.5);
  display: inline-block;
  margin-bottom: .5em;
 }
 .masonry .artistBlock {
  margin-bottom: 0;
 }
 .masonry .artistBlock p:first-of-type {
  position: absolute;
  bottom: 0;
  margin:0;
  display: block;
  width: 100%;
  padding: .5rem;
  background-color: rgba(255,255,255,.9);
 }
 @media screen and (max-width: 575px) {
  .artistimg {
   max-width: 280px;
  }
 }
 .facebook {
  color: #4267B0;
 }
 .twitter {
  color: #55ACEB;
 }
 .pinterest {
  color: #E50322;
 }
 .linkedin {
  color: #0573AE;
 }
 .instagram {
  color: #7F3CAE;
 }
 @media screen and (min-width: 769px) {
  .addScroll {
   max-height: 465px;
   overflow-y: auto;
  }
 }

/* = = = /#contentColumn = = = */
/* = = = #showcase = = = */
 .artistDispBox {
  position: relative;
  display: flex;
  position: relative;
  height: 100%;
 }
 .artistDispBox span {
  display: flex;
  max-height: 12rem;
  align-items: stretch;
  overflow: hidden;
  display: flex;
 }
 .artistDispBox span img {
  transition: all .4s ease-in-out;
  object-fit: cover;
 }
 .artistDispBox strong {
  display: block;
  right: 0;
  text-align: center;
  position: absolute;
  padding: .5rem;
  background-color: #2b1044;
  color: #ffa500;
  bottom: 0;
  left: 0;
  opacity: 0;
 }

 .artistDispBox:hover span img, .artistDispBox:focus span img {
  transform: scale(1.2);
 }
 .artistDispBox:hover::before, .artistDispBox:focus::before {
  background-color: rgba(43, 16, 68, .7);
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
 }
 .artistDispBox:hover strong, .artistDispBox:focus strong {
  opacity: 1;
 }
 /* .box2o .frame {  
  max-height: 12rem;
  align-items: stretch;
  overflow: hidden;
  display: flex;
 }
 .box2o .frame img {
  object-fit: cover;
 }
 .box2o {
  background-color: #F1F1F1;
  border: 1px solid rgba(0,0,0,0.15);
  align-items: stretch;
  position: relative;
 }
 .box2o:after {
  position: absolute;
  display: block;
  content: '';
  width: 100%; // Full width (cover the whole page)
  height: 100%; // Full height (cover the whole page)
  background: -moz-linear-gradient(top, transparent 0%,  rgba(0,0,0,.85) 100%);
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,.85) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.85) 100%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;   
 }
 .box2o .display {
  bottom: 0px;
  display: block;
  width: 100%;
  position: absolute;
  z-index: 2;
  color: #fff;
  padding: .5rem;
 }
 .box2o .display a:not([class*=text-]) {
  font-weight: bold;
  color: #fff;
 }
 @media screen and (min-width: 1200px) {
  .box2o:hover:after {
   background-color: rgba(0,0,0,0.5); // Black background with opacity
  }
  .box2o .frame {
   max-height: 12rem;
  }
  .box2o:hover .display {
   background-color: rgba(0,0,0,.9);
  }
 }
 @media screen and (min-width:576px) and (max-width: 991px) {
  .box2o .frame {
   max-height: 12rem;
  }
 } */
 #showcase {
  color: #FBAE00;
  background-color:#6120a0;
  background-image:
  radial-gradient(#FBAE00, rgba(251,174,0,.2) 2px, transparent 40px),
  radial-gradient(#FBAE00, rgba(251,174,0,.15) 1px, transparent 30px),
  radial-gradient(#FBAE00, rgba(251,174,0,.1) 2px, transparent 40px),
  radial-gradient(rgba(251,174,0,.4), rgba(251,174,0,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
 }
 #showcase > [class*=container] {
  padding-top: 1rem;
  padding-bottom: 1rem;
 }
 /* = = = #sponsors = = = */
  #sponsors {
   margin-bottom: .5rem;
  }
  #sponsors .record {
   margin: 0 .75rem;
   position: relative;
  }
  #sponsors .record img {
   margin: 0 auto;
   padding: .5rem;
   max-height: 80px;
   background-color: #fff;
   border: 1px solid rgba(0,0,0,.5);
   /*-webkit-filter: grayscale(1);
   filter: grayscale(1);*/
  }
  #sponsors .record div:last-of-type, #sponsors .record div:only-of-type {
   min-width:2rem;
   position: absolute;
   bottom: .0;
   right: .75rem;
  }

  #sponsors .record a:hover .text-white-50 {
   background-color: #2c0750!important;
   color: #fff !important;
   font-weight: 600;
  }
  @media screen and (min-width: 991px) {
   #sponsors .record img {
    max-height: 150px;
   }
  }
  #sponsors .record:hover img {
   -webkit-filter: grayscale(0);
   filter: grayscale(0);
  }
 /* = = = /#sponsors = = = */
/* = = = /#showcase = = = */
/* = = = #footer = = = */
 #footer {
  background: url(../images/topbar.jpg) center 115% repeat-x;
 }
 #footer > [class*=container] {
  padding-bottom: 1rem;
 }
/* = = = /#footer = = = */


@media (min-width: 1200px) {
 .container {
  max-width: 1200px;
 }
}