/*Goldsmith Sound Webpage 
//CSS
//Last Update: February, 23rd of 2017
//by Arvid Löwenstein
*/

/* Regular */
@font-face {
    font-family: 'League Gothic';
    src: url('leaguegothic-italic-webfont.eot');
    src: url('leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-italic-webfont.woff') format('woff'),
         url('leaguegothic-italic-webfont.ttf') format('truetype'),
         url('leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg');
    font-weight: normal;
    font-style: italic;

}

/* Italic */
@font-face {
    font-family: 'League Gothic';
    src: url('leaguegothic-regular-webfont.eot');
    src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('leaguegothic-condensed-regular-webfont.eot');
    src: url('leaguegothic-condensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-condensed-regular-webfont.woff') format('woff'),
         url('leaguegothic-condensed-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed Italic */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('leaguegothic-condensed-italic-webfont.eot');
    src: url('leaguegothic-condensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-condensed-italic-webfont.woff') format('woff'),
         url('leaguegothic-condensed-italic-webfont.ttf') format('truetype'),
         url('leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg') format('svg');
    font-weight: normal;
    font-style: italic;
}





/*Modal*/
.button{
  background:coral;
  padding:1em 2em;
  color:#fff;
  border:0;
}

.button:hover{
  background:#333;
}

.modal{
  display:none;
  position: fixed;
  z-index:1;
  left: 0;
  bottom: 0;
  top:0;
  right:0;
  height: 100%;
  width:100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  pointer-events: none;
}

@keyframes modalopen{
  from{ opacity: 0}
  to {opacity: 1}
}

@keyframes modalclose{
  from{ opacity: 1}
  to {opacity: 0}
}

.modal-content{
  background-color:#f4f4f4;
  position: absolute;
  left: 50%;
  top: 50%;
  width:30%;
  /*-webkit-transform: translate(-50%, -50%);*/
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  pointer-events: auto;
}

.modal-content:before {
    content:'';
    position: absolute;
    top: -50px;
    left: 50%;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-bottom: solid 50px white;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}


.modal-header h2, .modal-footer h3{
  margin:0;
}

.modal-header{
  background:coral;
  padding:15px;
  color:#fff;
}

.modal-body{
  padding:10px 20px;
}

.modal-footer{
  background:coral;
  padding:10px;
  color:#fff;
  text-align: center;
}

.closeBtn{
  color:#ccc;
  float: right;
  font-size:30px;
  color:#fff;
}

.closeBtn:hover,.closeBtn:focus{
  color:#000;
  text-decoration: none;
  cursor:pointer;
}

/*
.phone:hover #Simplemodal
{
	display: block;
}
*/

/*Modal Ende*/

.Gear {
    position: relative;   
    overflow: hidden;
}

.Gear:before
{
	content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    background-image: url(pics/Gyraf_LQ.jpg); 
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.Gear div
{
	
    
    z-index: 2;
    position: relative;
    
}

.equipment
{
-webkit-transform: translate(-50%, -50%);
}

.containerwide {
  padding-right: -60px;
  padding-left: -60px;
  margin-right: auto;
  margin-left: auto;

}
@media (min-width: 768px) {
  .containerwide {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .containerwide {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .containerwide {
    width: 1170px;
  }
}
@media (min-width: 1400px) {
  .containerwide {
    width: 1250px;
  }
}

.spinner-wrap
{

}

#logo
{
  height:100%;
}

.header
{
	width: 50%;
	height: auto;
	text-align: center;
}

img.logo:hover
{
	opacity: 0.5;
}


/*-----------------------------*/

.navbar-default
{
    opacity: 0.9;
}

.img-circle
{
	position: relative;
	top: 0%;
	left: 0px;	
}

.navbar .navbar-nav
{
    display: inline-block;
    float: none;
    font-family: Rosario;
    font-size: 1.2em;
}

.navbar .navbar-collapse
{
    text-align: center;
}

.col-out
{
	position: relative;
	display: relative;
	text-align: center;
}

.col-inner
{	
	text-align: center;
}

/*-----------------------------*/






/*-----------------------------*/

@media (max-width: 900px)
{
	.playerwrapper
	{
	left:5px;
	right: 5px;
	}
}

.ueberschrift
{
	font-family: Oswald;
	line-height: 1;
}

.ueberschriftbox
{
	font-family: Oswald;
	line-height: 0;
	font-size: 1.5em;
}

div.interpretundsong
{
	transition: transform 0.2s ease-in-out;
	padding-top: 6px;
}

.audioplayer:hover div.audioplayer ~ p
{
	transform: translateY(10px);
}


/*
h3
{
	font-family: Oswald;
}

h2
{
	font-size: 72px;
  background: -webkit-linear-gradient(yellow, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


h1
{
	font-family: Oswald;
}
*/

.normalertextbox
{
	font-family: Rosario;
	
}

.normalertext
{
	font-family: Rosario;
}



/*-----------------------------*/

.videowrapper
{
	position: relative;
	padding-bottom: 41.8%;  /* Cinema */
	height: 0;
}

.videowrapper iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 900px)
{
  .videowrapper
  {
    padding-bottom: 56.25%;  /* real 16:9 */
  }
}

.videowrapperxs
{
	margin-top: 10px;
	margin-bottom: 10px;
	position: relative;
	padding-bottom: 56.25%;	 /* real 16:9 */
	height: 0;
}

.videowrapperxs iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*@media (max-width: 900px) {
  .videowrapperxs {
    padding-bottom: 40%;   real 16:9 
  }
}
*/

/*-----------------------------*/

.opinionswrapper
{
	position: relative;
	/*width: 48%;*/
}

.1opinionsrapper iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (max-width: 900px)
{
  .opinionswrapper
  {
    width: 100%;  
  }
}

/*-----------------------------*/

.socialmedia
{
	text-align: center;
}

div.audioplayer
{
	position:relative;
	display: inline-block;
	padding: 4px;
}

div.audioplayer > img
{
	cursor: pointer;
}

img.audioplayerbutton
{
	position: absolute;
	background-color: rgba(1,0,0,0.5);
	border-radius: 40px;
	opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    left:50%;
    top:50%;
	
	transition: 0.5s ease-in-out;
}

img.audioplayercover
{
	transition: 0.2s ease-in-out;

}

div.audioplayer:hover > img.audioplayerbutton
{
	opacity: 0.7;
}

div.audioplayer:hover > img.audioplayercover
{
	filter: brightness(80%); 
	transform: scale(1.05); 
}

div.audioplayer:active > img.audioplayercover
{
	box-shadow: 0px 0px 15px #888;
	/*transition: 0s;*/
}

@media (max-width: 900px)
{
	div.audioplayer:hover > img.audioplayerbutton
	{
		
	}

	img.audioplayercover
	{
	width: 80px;	
	}

	img.audioplayerbutton
	{
	opacity: 1;
	width: 40px;
	height: auto;
	/*transition: 0s;*/
	}
}

.imggalleryautosize
{
	width: 100%;
	height: auto;
	border:1px solid white;
	transition: 0.22s;
}

div.imggallerypadding
{
	padding: 4px 4px 4px 4px;
	
}

div.imggallerypadding1
{
	padding: 1px 1px 1px 1px;
	
}

img.imggalleryautosize:hover
{
	filter: brightness(80%); 
	transform: scale(1.1); 
}

/*-----------------------------*/
.pricecolumn
{
	background-color: #;
	padding-bottom: 1em;
	padding-top: 1em;
}


/*-----------------------------*/

.fixed-size-container
{
  margin: 0 auto 0 auto;
  background-color: #;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.fixed-size
{
  padding: 20px;
  background-color: #;
}

.fixed-size-header
{
  padding: 10px;
  background-color: #;
}

#socialicons
{
	cursor: pointer;
	transition: 0.2s;	
	width: 35px;
	height: auto;
	/*filter: grayscale(100%);
	border-radius: 30px;*/
}

#socialiconsheader:hover
{
	/*filter: brightness(100%); 
	box-shadow: 0px 0px 15px #888;
	transform: translateY(5px);*/ 
	opacity: 0.7;
}

#socialiconsheader
{
	cursor: pointer;
	transition: 0.2s;	
	width: 20px;
	height: auto;
}

.spotify
{
	cursor: pointer;
	transition: 0.2s;	
	width: 40px;
	height: auto;
	border: 2px solid black;
}

.spotifyheader
{
	cursor: pointer;
	transition: 0.2s;	
	width: 22px;
	height: auto;
	
}

#socialicons:hover
{
	/*filter: brightness(100%); 
	box-shadow: 0px 0px 15px #888;
	transform: translateY(5px);*/ 
	opacity: 0.7;
}

.spotifyheader:hover
{
	/*filter: brightness(100%); 
	box-shadow: 0px 0px 15px #888;
	transform: translateY(5px);*/ 
	opacity: 0.7;
}

.spotify:hover
{
	/*transform: translateY(3px);*/
	opacity: 0.7;
}

@media (max-width: 900px)
{
	.fixed-size
	{
	padding: 12px;
	}
}

@media (max-width: 900px)
{
	#socialiconsheader
	{
	cursor: auto;

	}
}

@media (max-width: 900px)
{
	.head
	{
	opacity:0;
	}
	.phone
	{
	opacity: 1;
	}
	#communication
	{
	left:10px;
	}
}

img.backtotop
{
	transition: 0.5s;
	border-radius: 30px;
}

img.backtotop:hover
{
	filter: brightness(100%);  
	box-shadow: 0px 0px 15px #888;	
	transform: scale(1.05);
}	

@media (min-width: 900px)
{
	.backtotop
	{
	left: 95%;
	}
}

@media (max-width: 900px)
{
	.backtotop
	{
	left: 50%;
	}
}
/*-----------------------------*/

.coverdiv
{
	position:relative;
	z-index: 2; 
	display: inline-block;
}

.coverlinks
{
	position: absolute;
	background-color: rgba(1,0,0,0.5);
	border-radius: 20px;
	right:5px;
	top:5px;
	z-index: 3;
}



.referencesbutton
{
	background-color: #2c2c2c;
	
	border: 1px solid #e7e7e7;
	padding: 10px 15px 10px 15px;
}

.referencesbutton2
{
	background-color:transparent;
	color:white;
	border: 2px solid white;
	padding: 10px 15px 10px 15px;
	transition-duration: 0.1s;

}

.referencesbutton2:hover
{
	background-color:white;
	color:#53bdfa;

}

.referencesbutton3
{
	background-color:transparent;
	color:black;
	border: 2px solid black;
	padding: 10px 15px 10px 15px;
	transition-duration: 0.1s;

}

.referencesbutton3:hover
{
	background-color:black;
	color:white;

}

.myButton:hover {
	background-color:transparent;
}
.myButton:active {
	position:relative;
	top:1px;
}

}

.referencesbutton:hover
{
	background-color: #3e8e41;
}


.referencesbutton:active
{
	background-color: darkgrey;
}

.stdbutton
{
	background-color: white;
	color: black;
	border: 1px solid #e7e7e7;
	padding: 10px 15px 10px 15px;
}

.stdbutton:hover
{
	background-color: darkgrey;
}

.stdbutton:active
{
	background-color: lightgrey;
}

.stdbutton2
{
	background-color: #fafafa;
	color: black;
	border: 1px solid #e7e7e7;
	padding: 10px 15px 10px 15px;
}

.stdbutton2:hover
{
	background-color: lightgrey;
}

.stdbutton2:active
{
	background-color: darkgrey;
}

.service
{
	transition: 0.5s;
	box-shadow: 0px 0px 15px #888;
}

div.service:hover
{
	filter: brightness(100%);  
	box-shadow: 0px 0px 15px #888;
}

.footer
{
	background-color: #2c2c2c;
	bottom:0;
	
}	

.getintouch
{
  background-color: #;
}

@media (max-width: 900px)
{
	.getintouch
	{
	padding-left: 0px;
	padding-right: 0px;
	}
}

@media (min-width: 900px)
{
	.getintouch
	{
	padding-left: 300px;
	padding-right: 300px;
	}
}

/*-----------------------------*/

/*lato*/






/*
@media (min-width: 600px)
{
  .socialflexbox
  {
    display: flex;
    justify-content: space-between;  
  }
}
*/


/*
.call-outs-container {
  
  margin: 50px auto 0 auto;

}

.call-out {

  padding: 0px;
  flex-basis: 23%;
  margin-bottom: 20px;
  
}

@media (min-width: 900px) {
  .call-outs-container {
    display: flex;
    justify-content: space-between;  
  }
}

.call-out:nth-child(1) {background-color: #c0dbe2; }
.call-out:nth-child(2) {background-color: #cdf1c3; }
.call-out:nth-child(3) {background-color: #ccb9da; }
.call-out:nth-child(4) {background-color: orange; }



.container > * {
  position: absolute;
}

*/
div.services
{
	background-color: white; 
	margin-right: 30px; 
	cursor: pointer;
	box-shadow: 0px 0px 10px -2px #FFF
	@grid-gutter-width: 50px;
	transition: 0.1s;
}

div.services:active
{
	box-shadow: 0px 0px 15px #888;
}

div.services:hover
{
	transform: scale(1.05);
	transition: 0.1s; 
}