.header_menu {
  display: none;
  /*visibility: hidden;*/
}
@media screen and (min-width: 321px) and (max-width: 599px) {
	body {
  		background: rgb(236, 226, 211);
	}
	.logo img {
		max-width: 80px;
		height: auto;	
	}
	.about {
		display: none;
		visibility: hidden;
	}
	#welcomplace, p.welcom, p.welcomtextabout2 {
		text-align: center;
	}
	#navul_middle {
	border-top: solid 1px #dfd3c0;
	padding-top: 0.6em;
}
}
@media screen and (min-width: 0px) and (max-width: 320px) {
	body {
  		background: rgb(236, 226, 211);
	}.logo img {
		max-width: 70px;
		height: auto;	
	}
	.about {
		display: none;
		visibility: hidden;
	}
	#navul_middle {
	border-top: solid 1px #dfd3c0;
	padding-top: 0.6em;
}
	#welcomplace, p.welcom, p.welcomtextabout2 {
		text-align: center;
	}
}
@media screen and (max-width: 1237px) {
  .menu_bg {
      z-index: 10;
      background-color: #ece2d3;
	  border: 1px solid #D8C2A3;
      width: 300px;
      position: absolute;
    /* This trasform moves the drawer off canvas. */
    -webkit-transform: translate(-300px, 0);
    transform: translate(-300px, 0);
    /* Optionally, we animate the drawer. */
    transition: transform 0.3s ease;
      /*display: block;*/
  }
  .menu_bg.open {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      /*display: none;*/
	  border-bottom: none;
  }
  #navul {
	display: none;
	order: 2;
  }
  .menu_bg li {
    display: list-item;
    width: 100%;
    text-align: left;
  }
  .header_menu {
    display: inline-block;
    position: absolute;
    right: 0;
    padding: 1em;
  }
  .header_menu img {
    width: 30px;
  }
  .menu, .menu:hover {
	padding: 0.8em;  
  }
  #logopic {
    order: 0;
  }
  #sites {
    order: 1;
    width: 100%;
  }
  #navul_middle {
	margin-left: 10px;
}
  H1,p,div {
	text-align: center;
  }
	div.examples img {
		width: 100vmax;
		height; 100vmax;
		
	}
	#welcomplace_left, #welcomplace_left ul, p.contact_title {
	text-align: center;
	}
	table {
	text-align: center;	
	}
	p.welcom {
		text-align: center;
	}
	.bottom {
	padding-bottom: 40px;	
	}
}
@media screen and (min-width: 1238px) and (max-width: 1300px) {
	
	.menu_bg ul li {
	margin-right: 0.8em;
}

}
@media screen and (min-width: 1301px) and (max-width: 1450px) {
header {
	width: 1300px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#content {
	width: 1300px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.thumbntext {
	margin-left: 40px;
	
}
}

@media screen and (min-width: 1451px) {
header {
	width: 1450px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
#content {
	width: 1450px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.menu_bg ul li {
	margin-right: 0.5em;
}
.thumbntext {
	margin-left: 50px;
	
}
#navul_middle {
	margin-left: 15px;
}
}