#record-filters{
display:block;}




.modal-open {
    padding-right: 0px !important;
}
.mobile{
		display:none;}



.border-right{border-bottom:1px solid black; border-right:1px solid black; padding:100px 45px 93px;position: relative;}



.borderright{border-right:1px solid black; }

@media only screen and (max-width: 576px) {

.borderright{border-right:0px solid black; }


}


@media only screen and (max-width: 576px) {

.border-right{border-bottom:0px solid black; border-right:0px solid black; padding:50px 96px 93px;position: relative;}

.intro-artikel {
   transform: translateY(0%) !important;
}

}






.intro-artikel{
position: absolute;
top: 50%;
transform: translateY(-50%);
}



@media only screen and (max-width: 576px) {


.intro-artikel{
text-align: center!important;
margin-left:9px;
top:62px;
}




}





.desktops{
	visibility: visible;


	}









@media only screen and (max-width: 576px) {



.desktops{
	visibility: hidden;


	}


	.keys{
	    margin-left: 0px;
	}


}


#buttins {
       width: 200px;

}


#buttins-pause {
       width: 200px;

}


.vjs-control-text .vjs-control-text .vjs-time-tooltip{
display:none;}

.vjs-control-text {
display:none;}
.vjs-time-tooltip{
display:none;}

.buttins:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.buttins:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}


#loader {
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
  width: 150px;
  height: 150px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #fff8d4;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display:none;

}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




.play{
	position: absolute;
	z-index: 999;
    margin-left: -100px;
    margin-top: -280px;
	}







	@media only screen and (max-width: 576px) {


.plays{

	    margin-left: -110px;
    margin-top: -80px;
	}

}











	*{
		font-family: 'Lora', serif;
		color: #6c7478;

	}


	.artikeltext{
		font-family: 'Lora', serif;
		color: #6c7478;



	}


		.artikels{
		font-family: 'Lora', serif;
		color: #6c7478;
		    padding-bottom: 100px;
    padding-right: 0px;
    font-size: 1em;
    padding-top:70px;

	}







	@media only screen and (max-width: 576px) {


.artikels{
		font-family: 'Lora', serif;
		color: #6c7478;
		    padding-bottom: 100px;
    padding-right: 33px;
    padding-top:30px;
    font-size: 0.9em;

	}



}






p{
font-family: 'Heebo', sans-serif;
	font-size: 1em;
	}

	.audioh4{
		margin-top: 40px;
	}

	.audiop{
	margin-top: 100px;
	}

	.col-sm-9{

	}



	.playerbackground{
		background-color: #fff8d4 !important;
		background-image: url(wave.png);
		background-repeat: no-repeat;
		background-position: center;

	}





	@media only screen and (max-width: 576px) {



	.playerbackground{
		background-color: #fff8d4 !important;
		background-repeat: no-repeat;
		background-position: center;
		width:100%;
		height:200px;
		    background-size: auto;

	}



}



.playpaly{

	background-color: Transparent !important;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
		margin-top: -419px;
		    margin-left: -181px;
    position: absolute;
    z-index: 9999;
    width: 320px;
    height: 320px;

}

.btnd:focus, .btnd:active, .btnd.active, .btnd:focus:active {
  background-image: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

	@media only screen and (max-width: 576px) {

.playpaly{

	background-color: Transparent !important;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    margin-top: -151px;
    margin-left: -60px;
    position: absolute;
    z-index: 9999;
    width: 110px;
    height: 110px;

}


	.playpaly img{

    width: 100px;
    height: 100px;

}



}






	canvas{
		opacity: 0;
	}


	#audio-text{
		background-color: #fff8d4 !important;
		border-right: 1px solid black;
		padding-left: 30px;
		padding-right: 20px;
	}



	@media only screen and (max-width: 576px) {


	#audio-text{
		border-right: 0px solid black;


	}



}






	#impressum{
		background-color: #fff8d4 !important;
		padding-left: 30px;
		padding-right: 20px;

		border-right:0px !imporant;
	}



	@media only screen and (max-width: 576px) {


	#impressum{

		height:100%;
		padding-top:100px;

	}



}




#modal-headline{
		background-color: #fff8d4 !important;
		padding-left: 30px;
		padding-right: 20px;
		border-right:0px !imporant;
	}



	@media only screen and (max-width: 576px) {


#modal-headline{

		height:100%;
		padding-top:30px;

	}



}






.cross{
		    width: 35px;
    height: 35px;
    position: absolute;
    z-index: 999;
    right: 15px;
    top: 15px;
	}



	@media only screen and (max-width: 576px) {


.cross{
    width: 35px;
    right: 23px;
    position: fixed;
    z-index: 999;
    top: 23px;
    display:block;
    transition: all 0.0s

	}



}






	#datenschutz{
		background-color: #fff8d4 !important;
		padding-left: 30px;
		padding-right: 20px;
		min-height:100vh;
		border-right:0px !imporant;
	}


		#datenschutz2{
			background-color: #fff8d4 !important;
			padding-left: 30px;
			padding-right: 20px;
			min-height:100vh;
			border-right:0px !imporant;
		}




	@media only screen and (max-width: 576px) {
		#datenschutz2

			height:100%;
			padding-top:100px;

		}

	#datenschutz{


		height:100%;
		padding-top:100px;

	}

	.modal-dialog {

    margin: 0rem;

}



}






	#artikel{
		background-color: #fff8d4 !important;
			}

			#artikel2{
				background-color: #fff8d4 !important;
					}


#neu{
		background-color: #fff8d4 !important;
			}



	.audiodetail{
font-family: 'Heebo', sans-serif;
    font-size: 0.8em;
    bottom: -132px;
    padding-bottom: 30px;
    position: inherit;
    display:block;
	}



	.artikeldetail{
		font-family: 'Heebo', sans-serif;
	font-size: 0.8em;

	}







	@media only screen and (max-width: 576px) {


    .audiodetail{

    font-family: 'Heebo', sans-serif;
    font-size: 0.8em;
    bottom: 66px;
    padding-bottom: 10px;
    position: inherit;
        display:block;

	}




}






	.artikeldetail-top{
		font-family: 'Heebo', sans-serif;
	font-size: 0.8em;
	padding-top:10px;
	display:block;

	}








	.artikeldetails{
		font-family: 'Heebo', sans-serif;
	font-size: 0.8em;
	}



	.tabs{
	padding-bottom:100px}

	.first{
	bottom:40px;position:absolute;display:block;
	}

	.second{
	bottom:20px;position:absolute;display:block;
	}




	@media only screen and (max-width: 576px) {



	.artikeldetail-top{
		font-family: 'Heebo', sans-serif;
	font-size: 0.7em;

	}


	.artikeldetails{
		font-family: 'Heebo', sans-serif;
	font-size: 0.7em;
	padding-top:20px !important;
	}


		.artikeldetail{
		font-family: 'Heebo', sans-serif;
	font-size: 0.7em;



	}


	.first{
	bottom:auto;position:relative;display:block;
	}

	.second{
	bottom:auto;position:relative;display:block;
	}

.tabs{
	padding-bottom:10px}

}





	.audioh4{
		padding-top: 22px;
		font-size: 2.5em;
	}






	@media only screen and (max-width: 576px) {


	.audioh4{
		padding-top: 30px;
		font-size: 2em;
	}




}











	.close {

    font-size: 3.5rem !important;


}


	button.close {

    right: 16px !important;
    position:absolute !important;
    z-index: 666 !important;
}




.modal-backdrop {
    background-color: white !important;
    opacity: 0 !important;
    filter: Alpha(opacity=50); /* IE8 and earlier */


}



.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: red;
  transition: all 2s ease 0s;
}



.table tbody tr:hover, element:active td, .table tbody tr:hover th {
	background-color: #fff8d4;
    transition: all 0.3s ease 0s;
    -webkit-user-select: none; -webkit-touch-callout: default;
}



.menu{
	padding-left: 30px;
	padding-top: 30px;
}

.menu .men{
	padding-right: 20px;

}



@media only screen and (min-width: 900px) {


.menmobile{visibility: hidden;}


}





video {
    object-fit: cover;
}

.men a{
	color: #6c7478;
	text-decoration: none;
font-family: 'Heebo', sans-serif;

}


.men a:hover{
	color:  rgba(177,177,177,0.92);
	text-decoration: none;
font-family: 'Heebo', sans-serif;

}



.email{
	right: 0;
	position: absolute;
	padding-right: 30px;
	padding-top: 30px;
	 visibility: hidden;
}


@media only screen and (min-width: 900px) {


.email{visibility: visible;}


}



.email a{
	color: #6c7478;
	text-decoration: none;
}


.email a:hover{
	color:  rgba(177,177,177,0.92);
	text-decoration: none;
}


.introtext{
	font-family: 'Lora', serif;
	font-size:1.4em;
	bottom:40px;
	padding-right:150px;
	position: absolute;
}


@media only screen and (max-width: 1040px) {

   .introtext{
	font-family: 'Lora', serif;
	font-size: 1.2em;
	bottom:40px;
	padding-right: 60px;
	position: absolute;
	}


}


@media only screen and (max-width: 576px) {


   .introtext{
	font-family: 'Lora', serif;
	font-size: 1.2em;
	bottom:40px;
	padding-right: 60px;
	position: absolute;
	}




}



.artikel-image{
	width:100%;
	overflow:hidden;
	background-image: url("http://sebastian-seibold.com/julia/grav-admin/stardust.png");
	background-repeat:repeat;
	height:550px;
	overflow:hidden
	}




@media only screen and (max-width: 576px) {


.artikel-image{
	height:300px;

	}



}





.modal-mobile{
visibility:visible;
}

.modal-intro{
padding-right:100px;
padding-top:235px;
}

.modal-desktop{
visibility:visible;
}


.modal-desktop-no{
visibility:hidden;
}



















@media only screen and (max-width: 576px) {



.modal-mobile{
visibility:hidden;
}


.modal-desktop{
visibility:hidden;
}

.modal-desktop-no{
visibility:visible;
}


.modal-intro{
padding-right:100px;
padding-top:0px !important;
}



}





.mobile_no{
	visibility:visible;
	}


@media only screen and (max-width: 576px) {


.mobile_no{
	visibility:hidden;
	}

#modalimprint{
	padding-right:0px !important;

}

table.dataTable tbody td {
    padding: 25px 22px 25px 19px !important;
}

}




.audiooverlay{
	    height: 564px;
    width: 1100px;
       position: absolute;

    top: 50%;
    transform: translateY(-50%);

	}



	.audiobottom{
background-color:#fff8d4;height:220px;
}



@media only screen and (max-width: 576px) {


.audiooverlay {
    height: 100vh;
    overflow: hidden;
    width: inherit;
    background-color:#fff8d4;
    width: 100%;


}

.audiobottom{
background-color:#fff8d4;height:100%;
}}






.keywords{

	position: absolute;
		top: 50%;
		transform: translateY(-50%);

	}


.mobiles{
	visibility: hidden;
	}


@media only screen and (max-width: 576px) {


.mobiles{
	visibility: visible;
	background:red;
	}

.keywords{

	position: absolute;
	top: 20%;


	}

}






.mob{
	width:100%;
	}



	@media only screen and (max-width: 576px) {


  .mob{

	overflow: hidden;}



}



.intro{
	padding-right: 50px;


}




@media only screen and (max-width: 576px) {


.intro{
	padding-right: 20px;
	line-height:2.3em;

}






}








.cat{
	display: block;
}

.cat a{
	color: #6c7478;
	text-decoration: none;
font-family: 'Heebo', sans-serif;

}

.cat a:hover{
	color:  rgba(177,177,177,0.92);
	text-decoration: none;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 25px 50px;
}


.dataTables_wrapper .col-sm-12{
	padding: 0px !important;
}

.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 0px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6;
}


.dataTables_filter{
	display: none;
}


#example2_wrapper{
padding-left: 0px !important;
padding-right: 0px !important;

}



.container-fluid {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}



.btn-primary{
	border:0px !important;
	background-color: white !important;
	color: #6c7478 !important;
}


ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + label {
    background: red;
}



#play-pause-button{
  font-size: 50px;
  cursor: pointer;
}


#test{
	border-right:1px solid black;
	border-bottom:1px solid black;
	}


@media only screen and (max-width: 576px) {

#test{
	border-right:0px solid black;
	border-bottom:0px solid black;
	height:500px !important;
	}


.borders-right{
border-right:0px !important;
}

}


.borders-right{
border-right:1px solid black;
}


#test2{
	min-height: 0px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-top: -1px;
}


.aboutme h3{
	font-size: 1em;
	font-family: 'Heebo', sans-serif;
	font-weight: 100;
	padding-bottom: 50px;
}

.aboutme{
	position: absolute;
	bottom:70px;
	padding-left: 70px;
	padding-right: 70px;
}


.row{
	margin-right: 0px !important;}

@media only screen and (max-width: 576px) {


.jahr {
    width:60px !important;
}

.titel {
    width:219px;
    padding-left:30px !important;
}

.row{
	margin-right: 0px;}


	table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {

    background-position: 92% 50%;
}


.inner {
    width: 103%;
    height: 100%;
    margin-top: 40px;
    margin-left: 20px;
    transform: translateZ(30px);
    background-image: url(julia_004.png);
    background-position: right;
     background-size:     cover;
}

.box {
    width: 102% !important;
    height: 560px;
    margin-left: 0px;
    background-image: url(julia_002.jpg);
    background-position: top;
        transform: perspective(111112222975px) rotateX(0deg) rotateY(-10deg) scale3d(1, 1, 1) !important;
}


#kontakt {
    padding-right:0px;
}

}



.play-pause.paused {
  background-color:red;
}



#artikelneu{


    margin-top: 100px;
    margin-bottom: 200px;
    width: 1100px;
    visibility: visible;

}




.smallscreen{

	display:none;

	}

.bigscreen{

	display:block;

	}




@media only screen and (max-width: 576px) {



.smallscreen{

	display:block;

	}

.bigscreen{

	display:none;

	}


}






@media only screen and (max-width: 576px) {


#artikelneu{


    margin-top: 0px;
    width: 111%;

}

}









@media only screen and (max-width: 576px) {


.aboutme {
    position: static;
        padding-top: 70px;
    padding-bottom: 70px;
    padding-left: 30px;

  }


}


.footer span{
	font-size: 0.7em;
	font-family: 'Heebo', sans-serif;
}




.aboutmetext a{
	color: #6c7478;
	text-decoration: underline;
	font-family: 'Heebo', sans-serif;

}

.your-element{
	width: 100%;
	height: 400px;
	background-color: aqua;
}
.box{
	width: 100%;
	height: 700px;
	margin-left: -80px;
	background-image: url(julia_004.jpg);
	background-position: top;
}

.inner{
    width: 100%;
    height: 100%;
    margin-top: -80px;

    transform: translateZ(60px);
    background-image: url(julia_004.png);
    background-position: top;



}


.out{
	width: 120%;
	height: 100%;
	overflow: hidden;

	  }



.nopadding{
	padding-left: 0px !important;
	padding-right: 0px !important;
}

html{
 -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; // Added in from answer from Felix
    overflow-x: scroll;
    }