/*
Theme Name:Nagold-Alive_Custom Theme
Author: CLS-Multimedia
*/
@import "font-awesome";
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

:root {

	--main-color:#040300;
	--contr-col: #13636D;
	--contr-col-ho: #238892;
	--link-col: var(--contr-col);
	--border1: #fafafa;
	--border2: #ddd;
	--headerfarbe: rgba(0, 0, 0, 0.5);
	--footerfarbe: #222;
	--footer-txt: #575757;
	--footer-title: #575757;
	--subfooterfarbe: #000;
	--theme-font-family: 'exo 2', sans-serif;

	--header-height: 110px;
}
/* 1. Seitenstruktur */
body {
	background: var(--main-color);
	color: #fdfdfd;
	
	
	
}
	
}

.container {

	max-width: 1240px;
	

}
.container h1, h2, h3,h4,h5, h6{
	font-family: var(--theme-font-family);
}

.page-id-17 header {
	display: none!important;
}

header {

	background: var(--headerfarbe); 
	width:100%;
	height:var(--header-height);
	border-bottom: 0px solid #ddd;

}

.home header {
background: rgba(0, 0, 0, 0); 
	

}
.inhaltsbereich {
background:#faf;
}

.inhaltsbereich a{
color: var(--link-col);
}

footer {

	background: var(--footerfarbe);
	color: var(--footer-txt);
	height:350px;

}






/*Header - einzelne Bereiche*/

.logo1 {
	float:left;
	width:25%;
		height:var(--header-height);
	background: ;
}
.logo1 img {
	 display:block;
   
    margin: auto 0;
    padding-top:2%;
	max-width:99%;
	height:90%;
}


.hauptmenu {
	float:left;
	
	height:var(--header-height);
	width:50%;
margin:-1px auto;
background: none;
}



.extra-modul1 {
	
	float:right;
	width:25%;
	height:var(--header-height);
	background:  ;
	padding-top:calc(var(--header-height) / 3);

}
.extra-modul1 .btn-primary {
	padding: 7px 50px;
	float:right;
	
 
 	
}

.extra-modul1 .btn-primary:before {
	font-family: FontAwesome;
   content: "\f101";
 	padding-right:7px;
 	vertical-align: center;
}






.navigation {

	
	list-style-type: none;
 	 padding: 0;
 	
 	height:100px;
 	width:100%;
 	border:0px solid #ddd;

}

.navigation li {
	

	float:left;
	line-height: 100px;
	border-bottom: 0px solid red;
}

.navigation li:last-child {
  border-bottom: none;
}

.navigation li a {
 display: block;
 height:100px;
  width: 100%;
  padding: 0 15px 0 15px;
  color:#333;
    text-align:center;
  font-weight: bold;
  text-decoration:none;

}
.navigation li a:hover {

	background-color:#fafafa;
	color:black;
	border-bottom:5px solid #333;
	
}

/*Hero Bereich - */

.hero-content-block1 {
	position:relative;



	
	background-image: url(https://nagold-alive.de/wp-content/uploads/2020/12/), url(https://nagold-alive.de/wp-content/uploads/2020/12/), url(https://nagold-alive.de/wp-content/uploads/2020/12/);
	
	background-position: bottom left, center, bottom center);
	background-size: 100% 22%, 4px, cover;
	background-repeat:  no-repeat, repeat, no-repeat;
		height:100vh;
/*	margin-top: calc(0px - var(--header-height));*/
	border-bottom:0px solid #ddd;
}

.hero-buttons1 {
 position: absolute;
 background: linear-gradient(0deg, #fafafa 50%, transparent 50%);
width:100%;
  bottom: 0%;


}

.hero-btn-image {
	cursor: default;
	margin:10px;
	width:200px;
}





.hero-container {
	background:transparent;
	float:left;
	width:100%;
	position:relative;

	


}

.hero-container h1,.hero-container h2,.hero-container h3,.hero-container h4,.hero-container h5,.hero-container h6 {
	font-family: raleway;
	font-weight: 700;
	color:#fff;
	
}
.hero-container h1{
	margin-top:150px;
	float:left;
	
	font-size:6em;
	

}
.hero-container h2{
	float:left;
	font-size: 12em;
	
	margin-top:-80px;

}


.hero-container h3{
	float:left;
	font-size:2em;
	margin-top:-20px;

}	

.hero-title h3{
	
	float:left;
	font-family: raleway;
	font-weight: 700;
	font-size:2em;
	color:#fafafa;
		margin-top:-20px;
}

.hero-title h1 {
	margin-top:150px;
	float:left;
	font-family: raleway;
	font-weight: 700;
	font-size:6em;
	color:#fff;
}

.hero-title h2 {
	float:left;
	font-family: raleway;
	font-weight: 700;
	font-size: 12em;
	color:#fff;
	margin-top:-80px;
}
.hero-caption {
	float:right;
	font-family: raleway;
	font-weight: 700;
	font-size: 8em;
	color:#fdfdfd;
}

.hero-image1 {
	margin-left:25%;
	max-width:400px;
	height: auto;
}

.hero-content-block2 {
	position:absolute;
	z-index: 999999;
	top: 600px;
}





header.scrolled {
  background-color: var(--headerfarbe) !important;
  transition: background-color 200ms linear;
}

.seperator-option-1 {
	margin-top:-100px;
	z-index: 9999999999999999;
	float:left;
	height:100px;
	width:100%;
	background-color: ;
	background-image: url(http://localhost/wordpress/wp-content/uploads/2020/07/seperator-diagonal1-11.svg);
	background-repeat: no-repeat;
	background-size: 100% 100px;

	
	
	
}



.full-height1 {
	height:calc(100vh - var(--header-height));
}



.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}



.embed-container2 {
  position: relative; 
  padding-bottom: 94.91%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container2 iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container2.ratio4x3 {
  padding-bottom: 75%;
}

.Willkommen-content-block {
	
padding-bottom: 120px;
	
}

.media-size-small {
	display: none;
}

.image-border {
	background: #fff;
	margin:5px;
	padding:5px;
	border: 1px solid #ddd;
	max-width:100%;
	height:auto;
}

.container-impressum {
	padding:80px 0;
}

/*Buttons - bootstrap klassen*/

.btn-primary {
  color: #fff;
  background-color: var(--contr-col);
  border-color: var(--border1);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--contr-col-ho);
  border-color: var(--border2);
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: var(--contr-col-ho);
  border-color: var(--border1);
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
 background-color: var(--contr-col-ho);
  border-color: var(--border1);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--contr-col-ho);
  border-color: var(--border1);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}



/*Footer - Einzelne Bereiche*/



.kontaktsektion h2 {
font-family: var(--theme-font-family);

}

.footer-komplett {

color: #fafafa;
}

.footer-komplett a{

color: #fefefe;
}

.footer-komplett h2{
	
font-size: 4em;
color:#fff;
}


.footer-bereich1, .footer-bereich2, .footer-bereich3{
	list-style-type: none;
	float:left;
	width:33%;
	height:250px;
	
		
}

.footer-bereich1{

	border-right: 1px solid #ddd;

}

.footer-bereich2{
	
	padding-left:20px;
	padding-right:20px;
	border-right: 1px solid #ddd;

}


.karte {
	background:white;
	padding:7px 7px 3px 7px;

	-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: transform 0.3s ease;
}

.karte:hover {
	
	-webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(40%);
  transition: transform 0.3s ease;
}
.footer-bereich3 {
	
	padding-left:20px;
	font-size: 1.2em;
}

/*Sub-Footer - Einzelne Bereiche*/

.sub-footer {
	
 	 padding: 0;
	font-family: raleway;
	font-weight: 500;
	height: 100px;
	padding-top:0px;
	background:var(--subfooterfarbe);
	color: #fafafa;
}


.subfooter-bereich1 {
	padding-top:15px;
	height:30px;
	float:right;

}
.subfooter-bereich1 a {

	font-weight: 500;
	color: #fafafa;
}
.subfooter-bereich1 a:hover {

	font-weight: bold;
	color: #fafafa;
}

.subfooter-bereich1 li {
	list-style-type: none!important;
	padding:0 10px;
	float:left;
	line-height: 18px;
	border-right: 2px solid #ddd;
}


.subfooter-bereich1 li:last-child {
  border-right: none;
}


.firmeninfo {
	line-height: 1.2em;
	color:#888;
}
.firmeninfo a{
		color:#ddd;
}


/*
full width
*/
.entry-content .alignwide {
	width:100vw;
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
.entry-content .alignfull {
		width:100vw;
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
}
.alignfull img {
width: 100vw;
}



.particleeffect {
	height: 500px;
	background:#ff0000;
}



.standard-width {

}

.mobile-width {

	display:none!important;
}


/*-----------------------------------------------------------------
--------------------Responsive Design -----------------------------
-------------------------------------------------------------------*/

/* breakpoint - unter 600px */

@media only screen and (max-width: 1000px) {
				
.standard-width {
display:none!important;
}
.mobile-width {
display:block!important;

}

		.hero-content-block1 {
	
		height:80vh;
	
}

}

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

		.hero-content-block1 {
	
		height:70vh;
	
}
}

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

		.hero-content-block1 {
	
		height:60vh;
	
}
}


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

		.hero-content-block1 {
	
		height:40vh;
	
}
}