/*Schriftart Body */
body { 
    font-family: TrajanPro-Regular, 'Lucida Grande', sans-serif;
    background-color: whitesmoke;
}

/* Schrift Links */
a {
  color: black;
  text-decoration: none;
    
}

a:hover{
    color:#f64136;
    text-decoration: none;
}

a:visited{
    color: black;
    text-decoration: none;
}

/* Kontakt*/
.Kontakt {
  background-color: whitesmoke;
  margin: auto;
  overflow: hidden;
  width: 100%;
  padding: 10px;
  justify-content: flex-end;
  border-bottom-style: solid;
  border-bottom-color: #727272;
  border-bottom-width: thin;
}

/* Header*/
.header {
  margin: auto;
  overflow: hidden;
  width: 80%;
}


/* The sticky class für JS wenn runtergscrollt wird*/
.sticky {
 margin: auto;
  position: fixed;
  top: 0;
  width: 80%;
  z-index: 1;
}

/* Padding von sticky+ content für die höhe des Abstandes */
.sticky + .content {
  padding-top: 102px;
}

.Logo {
  background-color: whitesmoke;
  overflow: hidden;
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.header_left{
  width: 200px;
}
.header_right {
    width: 500px;
}


/* Farbe des Menüs */
.topnav {
  background-color: #545454;
  overflow: hidden;
  width: 80%;
  margin: auto;
  border-radius: 0.5em;
}

/* Style der Links in NAV Menü */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Farbe bei Hover NAV */
.topnav a:hover {
  background-color: #727272;
  color: #f2f2f2;
}

/* Aktiver Link NAV Menü */
.topnav a.active {
  background-color: #f64136;
  color: white;
}

/* Verstecke Icon für kleine Bildschirme NAV Menü */
.topnav .icon {
  display: none;
}
/*Wenn Bildschirm klein (<1200px) zeige icon */
@media screen and (max-width: 1200px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    overflow: hidden;
  }
}

/* Javascript NAV Menü bei kleinen Bildschirmen */
@media screen and (max-width: 1200px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 


/* Content */

.content {
  background-color: whitesmoke;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  width: 80%;
  padding: 10px;
  padding-top: 20px;
  z-index: -1;
  margin-top: 30px;

}

.content_box{
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 20px;
    width: 96%;
    overflow: hidden;
}

.kontaktaufnahme{
    width: 75%;
    float: right;
}

.kontaktdaten{
    width: 25%;
    float: left;
}
/*Für Bilder im Content Bereich */
.image_content{
    width:49%;
}
@media screen and (max-width: 800px) {
    .image_content{
        width:100%;
    }
}
@media screen and (max-width: 800px) {
    .kontaktaufnahme{
        width:100%;
        float: none;
    }
}
@media screen and (max-width: 800px) {
    .kontaktdaten{
        width:100%;
        float: none;
    }
}

@media screen and (max-width: 800px) {
    .small-link{
        padding:20px;
    }
}


/*Allgemein Buttons*/
.button {
  background-color: #545454; 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin:inherit;
  border-radius: 0.5em;
}

/*Textfelder*/
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Absendebutton */
input[type=submit] {
  background-color: #f64136;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="checkbox"] {
    display:none;
}

input[type=checkbox]+ label::before{
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 2px solid black;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

input[type="checkbox"]:checked+label::before {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #f64136;
}

.scroll-down {
	position: relative;
	left: 50%;
	bottom: 10px;
	display: block;
	text-align: center;
	font-size: 20px;
	z-index: 100;
	text-decoration: none;
	text-shadow: 0;
    width: 13px;
    height: 13px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    z-index: 9;
    left: 50%;
    -webkit-transform: translate(-50%, 0%) rotate(45deg);
    -moz-transform: translate(-50%, 0%) rotate(45deg);
    transform: translate(-50%, 0%) rotate(45deg);
	-webkit-animation: fade_move_down 4s ease-in-out infinite;
	-moz-animation:    fade_move_down 4s ease-in-out infinite;
	animation:         fade_move_down 4s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}