@font-face {
    font-family: "Source Sans Pro";
    src: url("/website/static/googleFonts/Source_Sans_Pro/SourceSansPro-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Josefin";
    src: url("/website/static/googleFonts/Josefin_Sans/JosefinSans-VariableFont_wght.ttf") format("truetype");
}  

.g-6,
.gx-6 {
  --bs-gutter-x: 4.5rem;
}

.g-6,
.gy-6 {
  --bs-gutter-y: 4.5rem;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
}
h1,h2 {
    margin-bottom: 15px;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
}

.contentStart {
    margin-top: 65px;
}

.titleOverlay {
	width: 100%;
	position: fixed;
	top: 30%;
	left: 0;
}

.titleOverlay img {
	transform: scale(1.2);
}

/* ABOUT DRUMCIRCLES */

#aboutContainer{
	margin-top: 5rem;
}

#aboutHead {
	padding: 1rem 3rem 3rem 3rem;
	background: #fff;
}

#navSlider {
	background-color: #ddea88;
	padding: 1rem 3rem 3rem 3rem;
	margin: 0 -15px;
}

#navSlider .item {
	padding: 0 1.3rem;
}

#navSlider img {
	margin: auto;
}

#aboutDrum {
	padding: 2rem 1rem 3rem 2rem;
}

.px-about  {
	padding-right: .95rem !important;
	padding-left: .95rem !important;
}



#aboutAnwendungen {
	background-color: #ddea88;
	padding: 1rem 1rem 3rem 2rem;
	margin: 0 -15px;
}

#aboutAnwendungen .item {
	padding: 0 2rem;
}

#aboutAnwendungen img {
	margin: auto;
}

#aboutInstruments {
	padding: 1rem 1rem 3rem 2rem;
}

#aboutInstruments .embed-responsive {
	margin-top: 4rem;
}

#intrumentList {
	margin-top: 4rem;
}

#intrumentList img{
	margin: auto;
	max-height: 14rem;
}

#instruments1Col {
	border-right: 1px solid #000000;
	padding: 0 2rem;
}

#instruments2Col {
	padding: 0 2rem;
}

.instrumentsHeadline {
	padding: 0 1rem 1rem 1rem;
}

#aboutModeration {
	background-color: #ddea88;
	padding: 3rem 1rem 3rem 2rem;
}

#aboutfacilitator {
	background-color: #43413f;
	color: #ffffff;
	padding: 3rem 1rem 3rem 2rem;
}

#aboutfacilitator a {
	color: #ffffff !important;
}

/* SUPPORT DRUMCIRCLES */

#supportContainer{
	margin-top: 8rem;
}

#supportHead {
	background-color: #ddea88;
	padding: 2rem 4rem 4rem 4rem;
}

.contentBlock{
	margin-top: 3rem;
}

.contentPadding {
	padding: 0 2rem;
}

#supportBeratung img{
	margin-top: 1rem;
	padding: 0 8rem;
}

#supportCommunity img{
	margin-top: 1rem;
}

.plainLinks a {
	color: #000000;
	text-decoration: none;
}


.green{
	background-color: #ddea88;
}

.drumPadding {
	padding: 2rem 4rem 4rem 4rem;
}

/* EVENT DRUMCIRCLES */

#eventList {
	margin-top: 8rem;
}

.subtitle {
	font-size: 13px;
	font-weight: bold;
	color: #000;
}

.marginBot {
	margin-bottom: 2rem;
}

.marginTop {
	margin-top: 2rem;
}

.repSep {
	margin-top: 2rem;
}

.mainNews h1 {
	margin-top: 0px;
}

.eventModalHolder .modal-content {
	border-radius: 0px;
}

.padRight {
	padding-right: 1rem;
}

#showLess {
	display: none;
}

#showMore {
	display: none;
}

.imgCopyRightText {
	position: absolute;
	bottom: 0;
	left: 15px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	width: auto;
	padding: 20px;
}

.imgCopyRightTextModal {
	position: relative;
	bottom: 60px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	width: 50%;
	padding: 20px;
	margin-bottom: -40px;
}

#modalEventForm {
	margin: 2rem 0.5rem;
}

#modalEventForm .form-control, #modalEventForm .form-select {
	height: 45px;
}
#modalEventFormConfirmationMessage {
	display: none;
}
/* other stuff */
.product_wrapper {
	min-height: 330px;

	padding: 10px;
	border: 1px solid #d4d4d4;
	-webkit-transition : border 100ms ease-in-out;
	-moz-transition : border 100ms ease-in-out;
	-o-transition : border 100ms ease-in-out;
	transition : border 100ms ease-in-out;
}

.product_wrapper:hover {
	border: 1px solid #141414;
}

.catGrid {
	margin-bottom: 1rem;
}

.gridOp {
	margin-bottom: .5rem;
}

.pimcore_area_image66Text33 .rightColumn {
	padding-top: 3rem;
}

.cat-imagecontainer {
    height: 100px;
}

/* Facilitator stuff */

#facilitatorList {
	margin-top: 80px;
}

.thumbnail {
	display: block;
	padding: 10px 4px 4px 4px;
	margin-bottom: 20px;
	line-height: 1.42857143;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 0px;
	-webkit-transition: border .2s ease-in-out;
	   -o-transition: border .2s ease-in-out;
		  transition: border .2s ease-in-out;
}

.thumbnail:hover {
	border: 1px solid #141414;
}

#facilitatorList  .thumbnail{
	margin-bottom: 50px;
	padding: 15px;
}

.artistsDetailHead
{
	margin-top: 			4rem;
	background: 			#000;
	color: 					#fff;
}

.artistsDetailHead img
{
	width: 					100%;
}

.artistsDetailHead .artistDetailHeadColumn
{
	max-width: 				100%;
}

.artistsDetailHead #artistDetailHeadLeftColumn
{
	min-width: 				47.9%;

}
.artistsDetailHead #artistDetailHeadRightColumn
{
	min-width: 				52.1%;
	padding-top: 			30px;
}

.artistsDetailHead #artistDetailHeadRightColumnImg2Container
{
	width: 					37.8%;
	padding-right: 			0;
}

.artistsDetailHead #artistDetailHeadRightColumnImg3Container
{
	width: 					29.9%;
	padding-left: 			0;
}

.artistsDetailHead #artistDetailHeadRightColumnImg4Container
{
	width: 					46%;
	padding-right: 			0;
}

.artistsDetailHead #artistDetailHeadRightColumnImg5Container
{
	width: 					42.2%;
	padding-left: 			0;
}

.artistsDetailHead #artistDetailHeadRightColumnBand,
.artistsDetailHead #artistDetailHeadRightColumnArtistName
{
	min-width: 				54.5%;
	width:					auto;
	margin-bottom: 			1px;
	margin-left: 			1px;
}

.artistsDetailHead #artistDetailHeadRightColumnBand div,
.artistsDetailHead #artistDetailHeadRightColumnArtistName div
{
	border: 				1px solid #fff;
	font-size: 				18px;
	line-height: 			18px;
	padding: 				7px 12px;
	/*font-family: 			'LuzSansBook';*/
}


#artistDetail
{
	padding-bottom: 		40px;
}

#artistDetailArtistName
{
	padding-top: 			40px;
}

#artistDetailArtistName h1
{
	margin: 				0;
	/*font-family: 			'LuzSansLight';*/
	color: 					#000;
}

#artistDetail  #artistDetailHeadinfos div a
{
	text-decoration: 		none;
	color:					#857d70;
}

#artistDetail  #artistDetailHeadinfos div a:hover
{
	color: 					#337f8c;
}

#artistDetailTitle
{
	margin-top: 			5px;
	margin-bottom: 			20px;
}

#artistDetailTitle h2
{
	margin: 				0;
	/*font-family: 			'Brandon Text';*/
	color: 					#000;
	font-size: 				22px;
}
#artistDetailTitle  span
{
	background-color: 		#bfbfbf;
	padding:				0 12px 0 2px;
}

#artistDetailText
{
	text-align: 			justify;
}

#artistDetailVideo
{
	margin-top:				40px;
	position: 				relative;
	padding-bottom: 		55%;
	padding-top: 			15px;
	height: 				0;
	overflow: 				hidden;
}
#artistDetailVideo iframe
{
	position: 				absolute;
	top: 					0;
	left: 					0;
	width: 					100%;
	height: 				100%;
	border: 				1px solid #000;
}

.btn-gewa {
	color: #0d0d0d;
	background-color: #fff;
	border-color: #0d0d0d;
	border-radius: 0px;
	border-width: 1px;
	padding: 4px 10px;
}
.btn-gewa:focus,
.btn-gewa.focus {
	color: #fff;
	background-color: #0d0d0d;
	border-color: #0d0d0d;
}
.btn-gewa:hover {
	color: #fff;
	background-color: #0d0d0d;
	border-color: #0d0d0d;
}
.btn-gewa:active,
.btn-gewa.active,
.open > .dropdown-toggle.btn-gewa {
	color: #0d0d0d;
	background-color: #fff;
	border-color: #0d0d0d;
}
.btn-gewa:active:hover,
.btn-gewa.active:hover,
.open > .dropdown-toggle.btn-gewa:hover,
.btn-gewa:active:focus,
.btn-gewa.active:focus,
.open > .dropdown-toggle.btn-gewa:focus,
.btn-gewa:active.focus,
.btn-gewa.active.focus,
.open > .dropdown-toggle.btn-gewa.focus {
	color: #fff;
	background-color: #0d0d0d;
	border-color: #fff;
}
.btn-gewa:active,
.btn-gewa.active,
.open > .dropdown-toggle.btn-gewa {
	background-image: none;
}

.btn-gewa .badge {
  color: #337ab7;
  background-color: #fff;
}

.btn:focus {
	outline: 0;
	box-shadow: none !important;
}

.contain {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.drumNav .nav-link, .drumNav a{
	font-size: 91%;
}

.smallerText{
	font-size: 85%;
}

.navItemBorder {
	width: 90%;
	opacity: 0.3;
}

.navItemBorderHolder {
	width: 0%;
	transition: width .6s ease-in-out;
	overflow: hidden;
	white-space: nowrap;
}

.nav-item:hover .navItemBorderHolder {
	width: 100%;
}

.imagecontainer {
	position: relative;
	height: 150px;
	margin-top: 15px;
	background-color: white;
}

.imagecontainer img {
	max-width: 100%;
	max-height: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.product-listing .product_description {
	min-height: 70px;
}

/*   SEARCH EXPAND  */
#searchform .form-control{
	width: 160px;
	-webkit-transition: width 0.4s ease-in-out;
	transition: width 0.4s ease-in-out;
     /*border: none;*/
     border-top: none;
     border-left: none;
     border-right: none;
     border-radius: 0;
     border-color: #000000;
}

#searchform .form-control {
	/*padding: 0.375rem 0.75rem 0.375rem 0rem;*/
     padding: 0.175rem 0.75rem 0.175rem 0rem;
}

#searchform .form-control:focus, #searchform .form-control.focus {
	width: 220px;
     box-shadow: none;
     border-color: #000000;
}

#searchform .form-control:active, #searchform .form-control.active {
	width: 120px;
     box-shadow: none;
     border-color: #000000;
}


#searchform .form-control::placeholder {
    color: #000;
    opacity: .7;
}
.filter-list, #moreCategories {
	list-style-type: none;
}

.page-link {
	color: #212529;
}
.page-link:hover {
	z-index: 2;
	color: #000000;
	background-color: #e9ecef;
	border-color: #dee2e6;
}

.page-link:focus {
	z-index: 3;
	color: #000000;
	background-color: #e9ecef;
	outline: 0;
	box-shadow: none;
}


#product_right {
	padding: 20px 20px 20px 20px;
	color: white;
	background-color:  #141414;
  }
  
  #article_table {
	margin-top: 40px;
  }
  
  #single-product-carousel .item {
	height: 400px;
  }
  
  #single-product-carousel .item a img {
	max-width: 80%;
  }
  
  #single-product-carousel .carousel-control {
	color: #141414;
  }
  
  .product-imagecontainer {
	position: relative;
	height: 550px;
	margin-top: 15px;
  }
  
  .product_image {
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  }
  

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.newsLeadTitleHolder {
		width: 20%;
	}

	.mainBorder{
		width: 70%;
	}

	.newsLeadTitle {

		font-size: 22px;
	}

	#mc_embed_signup {
		padding: 1rem 2.5rem;
	}
	#aboutHead {
		background: linear-gradient(to bottom,  #fff 60%, #ddea88 40%);
	}

	#supportHead {
		background: linear-gradient(to bottom,  #fff 40%, #ddea88 40%);
	}

	.contentPadding {
		padding: 0 5rem;
	}

	#supportBeratung img{
		padding: 0rem;
	}

}

@media only screen and (min-width: 992px) {
    .titleOverlay{
        width: 70%;
        position: fixed;
        top: 15%;
        left: 15%;
    }
    .titleOverlay img {
        transform: scale(1);
    }
}