/* Add your css code here */
/*
Variable Definitions:
  --r-bg: Sets the background color.
  --r-tx: Sets the text color.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Sets the link text color.
  --r-lk-h: Sets the hover color for link text.
  --r-br: Sets the border color.
  --r-bg-fr: Sets the background color for input forms.
  --r-tx-lk: Sets the menu link text color.
  --r-tx-lk-h: Sets the hover color for menu link text.
  --r-bg-lk: Sets the background color for menu links.
  --r-bg-lk-h: Sets the hover background color for menu links.
  --r-tx-bt: Sets the button text color.
  --r-tx-bt-h: Sets the hover color for button text.
  --r-bg-bt: Sets the button background color.
  --r-bg-bt-h: Sets the hover background color for buttons.
*/

/*
Regions Names, each region has an ID and a Class with the same name.
You can use .page-wrapper or #page-wrapper
#page-wrapper {}
#primary-sidebar-menu {}
#fixed-search-block {}
#popup-login-block {}
#header {}
#primary-menu {}
#welcome-text {}

#top-container {}
#top-box-first {}
#top-box-second {}
#top-box-third {}

#system-messages {}
#breadcrumb {}
#page-title {}

#main-container {}
#sidebar-box-first {}
#sidebar-box-main {}
#sidebar-box-second {}

#bottom-container {}
#bottom-box-first {}
#bottom-box-second {}
#bottom-box-third {}
#bottom-box-fourth {}

#footer-container {}
#footer-box-first {}
#footer-box-second {}
#footer-box-third {}

#footer-menu {}
#copyright {}

Examples:

#page-wrapper {
  background-color: var(--r-bg);
  color: var(--r-tx);
  border-color: var(--r-br);
}

h1, h2, h3 {
  color: var(--r-h1);
}

a:not(li.nav__menu-item a) {
  color: var(--r-lk);
  color: var(--r-lk-h);
}

input:not(.button) {
  background-color: var(--r-bg-fr);
}

li.nav__menu-item a {
  color: var(--r-tx-lk);
  background-color: var(--r-bg-lk);
}

li.nav__menu-item a:hover {
  color: var(--r-tx-lk-h);
  background-color: var(--r-bg-lk-h);
}

button:not(li.nav__menu-item button) {
  color: var(--r-tx-bt);
  background-color: var(--r-bg-bt);
}

button:not(li.nav__menu-item button):hover {
  color: var(--r-tx-bt-h);
  background-color: var(--r-bg-bt-h);
}
https://www.drupal.org/docs/extending-drupal/themes/contributed-themes/solo/instructions-for-developers-on-using-colors-in-solo-theme
*/

/*Typography*/
a.site-name-link, h1, h2, h3 {font-family: 'Della Respira', serif !important;}
p,a,ul,ol,.field__label, .field__item,time {font-family: 'Raleway', sans-serif !important;}
h1{text-align:center;}

/*Layout*/
.layout__region { padding: 10px;}
.main-container, .page-title-inner,
.top-container-inner, .copyright-inner{max-width:1140px !important;margin:0 auto;}
.main-container-inner{gap:0 !important;}
.page-title .page-title-text{display:block; padding:0;margin-bottom:0;font-size: calc(1vw + 4vh + 1vmin);line-height: calc(1.5vw + 4vh + 1.5vmin);}
.solo-outer .region-inner {padding:0 !important;}
.page-wrapper .main-navigation-wrapper { z-index: 500 !important;}

/*Video*/
iframe{height:40vh;}
video{width: 100%;!important;background: black;object-fit: cover;}

/*Image*/
.main-box-inner img {border-radius: 10px;}
.field--name-field-layout-image img {width:100%;}

/*Header*/
#welcome-text-inner{padding:0;}
.views-field-field-slider-text h3{color:#fff !important;text-align:center;}
.splide ul, .splide li {background: none !important;}
.splide .slide__caption{margin-top: 70vh;}
.splide .slide__description{background: rgba(44,68,160, .4);}
.image-style-slider-image-style{width: 100%;max-height: 800px;  object-fit: cover;}
.splide__track{margin-bottom: -32px;}

/* Next Event */
#block-thebeartlas-views-block-events-blocks-block-3 {
  display: none;
}

#block-thebeartlas-views-block-events-blocks-block-3 .element-container-wrapper{
  padding: 1em;
  background: linear-gradient(-45deg, #2C7EA0, #1A2960, #2c44a0, #1A2960, #2C7EA0););
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
@-moz-keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}

.view-display-id-block_3 h2{font-size: 1.2em;text-align:center;color: #fff !important; text-decoration:underline;padding:15px;}
.view-display-id-block_3 h2:hover{color: #23A6D5 !important; text-decoration:none; font-weight:bold;}

/*CTA Section*/
.top-container h2{text-align:center;}
.top-container img{border-radius: 50%;width: 20vh;height: 20vh;margin: 0 auto !important;}
.top-container a{display: block;width: 100%; padding: 10px 20px;border: 2px solid #fff;border-radius: 0;text-decoration: none;color: #fff;transition: background-color 0.3s, color 0.3s;}
.top-container a:hover{ background-color: #fff; color: #2c44a0 !important;}
.top-container .field--name-body{min-height: 220px;}
.top-container .field--name-field-cta-link{text-align:center;}
.top-container h2{text-align: center;border-bottom: 2px #fff solid;padding-bottom: 10px;}

/*Events*/
.view-events-blocks .solo-table-wrapper caption{background: #2c44a0;padding: 10px;color: #fff;}
.view-events-blocks .solo-table-wrapper caption h3{color: #fff;}
.view-events-blocks .tableresponsive-toggle-columns{display:none;}
.view-events-blocks .views-field-title a{color:#2c44a0 !important;text-decoration:underline;font-weight: bold;}
.node--type-event .field--name-field-private-evenyt {font-weight:bold;}

/*Band Members*/
.view-band-members-block .vvjt .vvjt-inner .tab-buttons .vvjt-button.active{background: #a4b4dc;border-radius: 10px;}
.view-band-members-block .vvjt .vvjt-inner .tab-buttons .vvjt-button{text-align:center;}
@media (max-width: 62rem) {.vvjt.br-992.vertical .tab-buttons .vvjt-button {width: 100px !important;height: 100px; !important}.vvjt.br-992.vertical .vvjt-inner .vvjt-button img {height: 100% !important;width: 100% !important;}}


/*Footer*/
.copyright{background: #2c44a0 !important; margin-bottom: -5px !important;}
.copyright-first, .copyright-second{color:#fff !important;}
.copyright a{color:#fff !important;}

/*Cookie Compliance */
.eu-cookie-compliance-default-button,
.eu-cookie-compliance-secondary-button{
    box-shadow: none !important;
    background: none !important;
    border-radius: 0 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    padding: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
font-weight: normal !important}

.eu-cookie-compliance-default-button:hover,
.eu-cookie-compliance-secondary-button:hover{
background: #fff !important;
color: #2C7EA0 !important;
}

.eu-cookie-compliance-message{
  margin:15px 0 0 20px;
}



#block-solo-subtheme-simplenewssubscription {
  display: none;
}

.spb-popup-main-wrapper{
    background: #2c44a0 !important;
    color: #fff !important;
    border:0 !important;
    border-radius: 10px;
}

.spb-popup-main-wrapper .simplenews-subscriber-form{margin-top:40px; padding: 0 20px; text-align:center;}
.spb-controls button{border-radius:5px; opacity: .5;}
.spb-popup-main-wrapper .form-submit{border-radius: 5px;}


/*Commerce */
.product-padding{padding: 20px;}
.product-center,.product-center img{
  text-align: center !important;margin: 0 auto !important;
}
.product-cart-box{border:#fff 1px solid; padding: 20px; border-radius: 10px; background: #fff;}
.product-cart-box .field--name-price label{text-transform: uppercase; font-weight: bold; color: #2c44a0 !important;}
.button--add-to-cart{
    box-shadow: none !important;
    background: #2c44a0 !important;
    border-radius: 0 !important;
    border: 1px solid #fff !important;
    color: #fff !important;
    padding: 8px !important;
    text-decoration: none !important;
    text-shadow: none !important;
font-weight: normal !important}

.maintenance-page h1,
.maintenance-page a,
.maintenance-page p{color:#fff !important;text-align: center;}
.maintenance-page .maintenance-wrapper{
  	margin:0;
	display:flex;
	height:calc(100vh - 40px);
	align-items:center;
  max-width:100% !important;
}
.maintenance-page .maintenance-content{width: 85vw;
    margin: auto;
    overflow: auto;}

body.maintenance-page{  background: linear-gradient(-45deg, #2C7EA0, #1A2960, #2c44a0, #1A2960, #2C7EA0););
  background-size: 400% 400%;
  -webkit-animation: Gradient 15s ease infinite;
  -moz-animation: Gradient 15s ease infinite;
  animation: Gradient 15s ease infinite;}