/******************************************************************/
/*general*/
/******************************************************************/

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

@font-face {
   font-family: BebasNeue;
   src: url(BebasNeue-Regular.ttf);
}
@font-face {
   font-family: Montserrat;
   src: url(Montserrat-VariableFont_wght.ttf);
}
body, input, button, textarea {font-family:Montserrat, sans-serif;
font-size:0.9em}

nav, h1, h2, h3{font-family: BebasNeue,sans-serif;}

h1{
	font-size:2.5em;
	margin:1em 0 1em 0;
	}
	/*font-size:2vw; viewportwidth*/
h2{
	font-size:2em;
	margin:1em 0 1em 0;
	} 
	
h3{font-size:1.5em;
margin:1em 0 1em 0;}

ul, ol{margin:0 0 1em 0;}
p, ul, ol{line-height: 1.6;}

.container1 p {margin:0 0 2em 0;
}

img.rounded {
  border-radius: 100%;
}

.seitenbereich {
	text-align: left;  /* Inhalt wieder links wegen alten IEs */
	margin: 0 auto;    /* Zentrierung mitte */
	width:80%; /* or max-width:900px; */
	/*padding-bottom:3em;*/
	padding-bottom:2em;
	display:flex;
	flex-direction:column;
	min-height:400px;
	} 
	
.seitenbereichcontact {
	text-align: left;  
	margin: 0 auto;    
	width:80%; 
	padding-bottom:2em;
	display:flex;
	flex-direction:column;
	} 
	
.seitenbereichabout {
    text-align: left;  /* Inhalt wieder links wegen alten IEs */
	margin: 0 auto;    /* Zentrierung mitte */
	width:80%;
	padding-bottom:3em;
	padding-top:3em;
	background: url("petra2.png") no-repeat scroll right bottom;
	background-size: 55% auto; /*alternativ: contain*/
	} 

.seitenbereichabout ul{margin-left:30px;
padding:0;
}

.seitenbereich ul{margin-left:30px;
padding:0;
}
.center{text-align:center;}

/********************************************************************************/
/*contactform*/
/********************************************************************************/

input[type=text], input[type=email], input[type=tel], textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

 button, input[type=submit], input[type=reset] {
  background-color: darkseagreen;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius:10px;
  float: right;
  width:200px;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

button:hover, input[type=submit]:hover, input[type=reset]:hover {
  background-color: darkseagreen;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}



/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75/*, input[type=submit]*/ {
    width: 100%;
    margin-top: 0;
  }
}


/********************************************************************************/
/*navbar*/	
/********************************************************************************/
.responsive, .menu {
  display: flex;
  background-color: burlywood;
}

/* Style the navigation bar links */
.responsive a, .menu a:not(.logo){
  color: white;
  padding:20px;
  text-decoration: none;
  font-size:1.5em;
}

.logo img{
max-height:3em; 
margin:10px 20px;}
/*.menu a:not(.logo) {
  text-align: center;
}*/

/* Change color on hover */
.responsive a:not(.logo):hover, .menu a:not(.logo):hover {
  background-color: darkseagreen;
}

.responsive a:not(.logo, .toggle):active, .menu a:not(.logo, .toggle):active {
  text-decoration: underline;
}

.logo {
flex-grow:1; /*pushes the rest of the items to the end of the container.*/

}

.toggle {display:none;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .responsive, .menu {   
    display: flex;
	flex-wrap:wrap;
	justify-content:space-between; /*equal space between items*/
	align-items:center; /*aligns items in the center vertically*/
  }
  .logo {order:0; 
  display:block;
  }

  .toggle {order:1;
  display:block;
  font-size: 2em;
  }
  .menu .item {order:2;
  display:none;
  width:100%;
  text-align:center;
  }
  .responsive .item {order:2;
  width:100%;
  text-align:center;
  }
}

/********************************************************************************/
/*styleabout*/
/********************************************************************************/

/* Hide the link that should open and close the topnav on small screens */
.nav .icon {
  display: none;
}

.quote1{
	max-width:400px; margin:auto;}
.indent{
	text-indent: -50px;
	padding:0 0 15px 40px;
	margin:0;}
.nobullet{
	list-style-type:none;
	}

/********************************************************************************/	
/*searchbar*/
/********************************************************************************/

/* Add a background color to the top navigation bar */
.searchbar {
  width:200px;
  float: right;
}


/* Style the search box inside the navigation bar */
.searchbar input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
  width:200px;
}

/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
/*@media screen and (max-width: 600px) {
  .nav a, .searchbar input[type=text] {
    float: none;
    display: block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 14px;
  }*/

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */  
@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
    float: left;
    display: block;
  }
}
  
  .searchbar input[type=text] {
    border: 1px solid #ccc;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .responsive {position: relative;
  overflow: hidden;
  background-color: burlywood;}
  
  .responsive a.icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  .responsive a {
    float: none;
    display: block;
    text-align: right;
	
  font-size: 1.5em;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  }
}

/******************************************************************/
/*footer*/
/******************************************************************/

footer{
color:white;
display:flex; /*apply flexbox*/
flex-direction:column;
padding:0;
margin:0;
position:relative;
bottom:0;
}

.contact{
background-color:rgb(228,196,155);
text-align:center;
justify-content: center;
flex-basis:100%;
padding:20px 25px;
}

.footera{display:flex;
} /*inner flexbox, to create the columns, while copyright section stays on the bottom*/

.footera h3 {margin:0 0 20px 0;}


.contact ul {list-style-type:none;
line-height:1.6;
padding:0;
}

.copyright{
	background-color:burlywood;
	/*line-height: 30px;*/
    /*height: 50px;*/
    text-align:center;
	justify-content: center;
	display:flex;
	flex-wrap:wrap;
	padding:10px;}
	
.copyright a{color:white;}

.contact ul, .contact li {
	list-style-type:none;}

.contact ul li a {color:white;}

	
/* Responsive layout - when the screen is less than 600px wide, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .footera {
    flex-direction:column;
  }
}

/*HOME*/
.fade { animation: fadeIn 7s; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.container1{display:flex;} /*apply flexbox*/
.homesec1{flex-grow:1;
flex-basis:100%;
padding:20px;}
.homesec1 a {color:white;
text-decoration:none;
}
.homesec1 a:hover {text-decoration:underline;}
.homesec2{
display:flex;	
flex-grow:1;
flex-basis:70%;
padding:20px;
align-items:center;}
@media screen and (max-width: 600px) {
  .container1 {
    flex-direction:column;
  }
}	

/********************************************************************************/
/*Privacy and disclaimer*/ 
/********************************************************************************/
/*.hide{display:none;}
#hide1{display:none;}*/
#display1, #display2, #display3, #display4, #display5, #display6, #display7, #display8, #display9, #display10, #display11, 
#display12, #display13, #display14, #display15, #display16 {display:none;}
div .hover:hover{color:burlywood;
cursor: pointer;}