html {
  border: solid 3px  #333333;
  height: auto;
  background-color:#800000;
  }
@media screen and (min-width:640px) {
  html {
   border: solid 5px  #333333;
  }		
}  
 @media screen and (min-width:1024px) {
  html {
   border: solid 10px  #333333;
  }		
}   
  
 html {
  scroll-behavior: smooth;
} 
  
 h1 {
 
    font-family: 'Roboto', sans-serif;
	color: #D2B48C;
	text-align: center;
	font-size: 22px;
}
@media screen and (min-width:640px) {
  h1 {
   font-size:30px;
  }	
	
}
@media screen and (min-width:640px) {
  h1 {
   font-size:30px;
  }	
	
}
 h4 { 
   font-family: 'Roboto', sans-serif;
	color: #D2B48C;
	text-align: center;
	font-size: 18px;
} 
.videoWrapper {

	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 10px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.logo{
	text-align: center;
    width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
    z-index: 90;
  } 


.bild {
	
	text-Align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	}
* {
  box-sizing: border-box;
}


#navbar {
  overflow: hidden;
  background-color: #333333;
}

#navbar a {
	float: left;
	display: block;
	color:  #DEB887;
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 6px;
	padding-right: 6px;
	text-decoration: none;
	font-size: 13px ;
	font-family: 'Roboto', sans-serif; 
}
@media screen and (min-width: 400px) {
  #navbar a{
    padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 16px ;	
  }
}
@media screen and (min-width: 500px) {
  #navbar a{
    padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 16px ;
  }
}
@media screen and (min-width: 640px) {
  #navbar a{
    padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 40px;
	padding-right: 40px;
	font-size: 16px ;	
  }
}
@media screen and (min-width: 1024px) {
  #navbar a{
    padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 75px;
	padding-right: 75px;
	font-size: 18px ;	
  }
}
	
#navbar a:hover {
  background-color:  #D2B48C;
  color: black;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: px;
}
/* Container for flexboxes */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns */
.column {
  flex: 25%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}


@media screen and (max-width: 1023px) {
  .column {
    flex: 50%;
  }
}
@media screen and (max-width: 639px) {
  .row {
    flex-direction: column;
  }
}	
.column a, p, h2, h3 {
    font-family: 'Roboto', sans-serif;
	padding-top: 30px;
	padding-left: 10px;
	padding-right: px;
	padding-bottom: px;
	color: #800000;
	background-color:#DEB887;
	}
	
 .text  {
	background-color:#DEB887;
	border: solid 1px  #800000;
	height:400x;
	font-size:14px;
	padding-right: 30px;
	padding-left: 20px;
	padding-bottom: 30px;
	box-shadow: 3px 3px #800000;
}
@media screen and (min-width:640px) {
 .text {
    padding-left: 30px;
	height: 520px;
	font-size:15x;
  }		
}
@media screen and (min-width: 1024px) {
  .text {
    height:600px;
	padding-right: 10px;
	padding-left: 5px;
	font-size:16px;
  }
}	
.text2 {
	padding-top: 20px;
	padding-bottom: 30px;
	font-size: 14px;
	text-align:center;
	padding-right:15px;
	background-color:#DEB887;
	border: solid 1px  #800000;
	box-shadow:3px 3px #800000;
	height: 250px;
}
@media screen and (min-width: 640px) {
  .text2 {
    height: 280px;
	font-size: 15px;
  }
}
@media screen and (min-width: 1024px) {
  .text2 {
    height: 280px;
	font-size: 16px;
  }
}
.text3  {
	font-size: 14px;

	padding-right: 10px;
	background-color:#DEB887 ;
	border: solid 1px  #800000;
	box-shadow:3px 3px #800000;
	height: 330px;
	text-align: center;
}
.text3 h3 {

    padding-top: 30px;
}

@media screen and (min-width:640px) {
  .text3  {
    
    font-size: 15px;
    padding-top: 10x;
    height: 330px;
  }
}
@media screen and (min-width:1024px) {
  .text3  {
    font-size: 16px;
    padding-top: 30x;
    height: 370px;
  }
  .elena img {
	height: 50%;
	text-align: center;
    padding-bottom:;
	width:auto;
	}
}

.text4 {
	padding-top: 50x;
	background-color:#DEB887;
	border: solid 1px  #800000;
	box-shadow:3px 3px #800000;
	height: 300px;
	text-align: center;
  }
  
.acord {
	padding-top: 15px;
	text-align:center;
	background-color:#DEB887;
	border: solid 1px  #800000;
	box-shadow:3px 3px #800000;
	
	}
	
@media screen and (min-width:640px) {
 .acord {
	height: 330px;
  }
}	
@media screen and (min-width:1024px) {
  .acord {
	height: 370px;
  }
}	 
	
	}	
.text6 {
	padding-top: 50px;
	padding-left: 80px;
	padding-bottom: 30px;
	text-align: center;
	background-color:#DEB887;
}	
.text7 {
	padding-top: 30px;
	padding-left: 50px;
	padding-bottom: 30px;
	text-align:center;
	background-color:#DEB887;
}		
.rose {
	padding-top: 20x;
	padding-left: 60x;
    padding-bottom: 20px;
	text-align:center;
	}	

	
.bild img	{
	border: solid 3px  #333333;
	max-width:100%;
}
@media screen and (min-width:640px) {
 .bild img	 {
	border: solid 5px  #333333;
  }
}	 
@media screen and (min-width:1024px) {
 .bild img	 {
	border: solid 7px  #333333;
  }
}	 

.bild3 img	{
	
	max-width:90%;
	text-align: center;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}


.bild2 img	{
	
	max-width:100%;
}


#fuss p	{
color:#DEB887;
     width:auto,
	 height: 60px;
	 background-color: #333333;
	 padding-top:10px; 
	  padding-bottom:10px; 
	 }