.topadds { width: 100%; min-width: 300px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.underadds {width: 100%; min-width: 300px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 2rem; padding-top: 1rem; margin-bottom: 2em; padding-bottom: 1rem;}
.bottomadds { width: 100%; min-width: 300px; min-height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 2rem; padding-top: 1rem; padding-bottom: 1rem; border-top: 2px solid lightslategray; border-bottom: 2px solid lightslategray}
.sitemap { width: 240px; margin-left: auto; margin-right: auto; margin-top: 1rem; }
.search { min-height: 100px;  margin-top: 1rem; }
.search form { width: 300px;  margin-left: auto; margin-right: auto;}
.search input {border-bottom: 2px solid silver; }
.headsvg { max-width: 1000px; margin-left: auto; margin-right: auto; }
.headsvg img { width: 100%; }

@media only screen and (min-width:1380px) {
	.headsvg.new {
		width: 900px;
		max-width: 900px;
		margin-bottom: 40px;
		margin-left: 0px;
	}
}

.entry-content {background: white; }
.entry-content section, .entry-content .wp-block-group,
.entry-content nav,
.entry-content aside { max-width: 900px; margin-left: auto; margin-right: auto; }
.secondary { max-width: 600px; margin-left: auto; margin-right: auto; background: white; }
.secondary header svg { width: 240px; margin-left: auto; margin-right: auto; }
.excerpt { max-width: 900px; margin-left: auto; margin-right: auto;}
.entry-header { max-width: 900px; margin-left: auto; margin-right: auto; }

@media (max-width: 1379px) {
	.excerpt { border-bottom: 6px solid lightslategray; margin-bottom: 1em; }
	.search { border-top: 6px solid lightslategray}
}

.block-group {
	background: ivory;
	margin-right: 0;
	padding-left:5%;
}


@media (min-width: 720px) {
	.block-columns {
		display: flex;
		justify-content: flex-end;
	}
	
	.block-columns.has-2-columns .block-column {
		width:49%
	}
	
	.block-columns.has-2-columns .block-column:nth-child(1) {
		margin-right: 26px;
	}
}

@media (min-width: 1008px) {
	.block-columns.has-4-columns .block-column { width: 24% }
}


.secondary {
	display: flex;
	flex-direction: column; 
}

.secondary h5 { padding-top: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.4rem }

@media (max-width: 1379px) {
	.secondary nav { order: 2}
	.secondary .bottomadds {order: 1}
	.secondary h5 { font-size: 1.4em; }
	.secondary li { font-size: 1.2em; }
}

@media (min-width: 1380px) {
	@supports not (-ms-high-contrast: none) {
		.secondary nav { order: 1}
		.secondary .bottomadds {order: 2}
		.secondary h5 { font-size: 1.1em;}
		.secondary li { font-size: 0.96em; }
	}
}


.scrollup {
	margin-top: 1em; 
	padding-top: 1em;
	padding-bottom: 1em;
	background: #efefef;
}
.scrollup svg { width: 90px; margin-left: auto; margin-right: auto; display: block; }

footer {
	background-color: hsl(220,15%,35%);
	padding: 1em;
	color: white;
	font-size: 0.9em;
}

footer.colofon {
	background: hsl(220,15%,25%);
	padding-bottom: 110px;
}

footer a {
	color: white;
	text-decoration: none; 
}

footer .kocon {
	width: 280px; margin-left: auto; margin-right: auto; 
}

.branding .layout-row {
	display: flex; 
	padding:0.5rem;
	box-sizing: border-box;
	max-width: 1380px;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

#top-logo { width: 68px }

.site-title {
	font-size: 1.5em;
	line-height: 1.5;
	margin-left: 0.5em;
	display: flex; flex-direction: column; justify-content: center; 
}

.site-title a {
	text-decoration: none;
	font-weight:500;
	color: hsl(12, 90%, 40%)
}

.topbar ul { padding: 0em; list-style-type: none; }
.topbar .menu-css { background: hsl(12,75%,55%); border-bottom: 8px solid hsl(12,75%,55%);}
.topbar .menu-html { background: hsl(190,45%,60%);border-bottom: 8px solid hsl(190,45%,60%); }
.topbar .menu-javascript-basis { background: hsl(45,100%,65%);border-bottom: 8px solid hsl(45,100%,65%); }
.topbar .menu-javascript { background: hsl(50,100%,45%);border-bottom: 8px solid hsl(50,100%,45%); }
.topbar .menu-tutorials { background: hsl(220,15%,50%);border-bottom: 8px solid hsl(220,15%,50%); }
.topbar .menu-svg { background: hsl(220,15%,65%);border-bottom: 8px solid hsl(220,15%,65%); }

.cat-css      .topbar .menu-html {border-bottom: 8px solid hsl(190,85%,85%)}
.cat-html     .topbar .menu-html {border-bottom: 8px solid hsl(190,85%,85%)}
.cat-js-basis .topbar .menu-javascript-basis {border-bottom: 8px solid hsl(45,100%,85%)}
.cat-js-web   .topbar .menu-javascript { border-bottom: 8px solid hsl(50,100%,75%); }
.cat-tutorial .topbar .menu-tutorials { border-bottom: 8px solid hsl(220,15%,65%); }
.cat-svg      .topbar .menu-svg { background: hsl(220,15%,25%);border-bottom: 8px solid hsl(220,15%,65%); }

.topbar li { }
.topbar a {
	font-size: 1.1em;
	color: white;
	width: 100%;
	height: 100%;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	display:flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 3em;
	box-sizing: border-box;
	font-weight:500;
	text-align:center;
}

input#hamburg {display: none; }
@media (max-width: 1008px) {
	.entry-header,
	time,
	.main-line .excerpt,
	.entry-content section,
	.entry-content .wp-block-group,
	.entry-content nav,
	.entry-content aside { 
		margin-left: 0.5rem; margin-right: 0.5rem
	}
}


@media (max-width: 1279px) {
	label.hamburg {
		display: block;
		background: #555;
		width: 100px;
		height: 65px;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		border-radius: 2px;
		transition: border-radius .5s;
	}
	
	label.hamburg .hamburg-line1,
	label.hamburg .hamburg-line2,
	label.hamburg .hamburg-line3 {
		position: absolute;
		left: 10px;
		height: 6px;
		width: 80px;
		background: #fff;
		border-radius: 2px;
		display: block;
		transition: 0.5s;
		transform-origin: center;
	}

	label.hamburg .hamburg-line1 {
		top: 15px;
	}

	label.hamburg .hamburg-line2 {
		top: 30px;
	}

	label.hamburg .hamburg-line3 {
		top: 45px;
	}


	#hamburg:checked + .hamburg .hamburg-line1{transform: translateY(15px) rotate(-45deg);}
	#hamburg:checked + .hamburg .hamburg-line2{opacity:0;}
	#hamburg:checked + .hamburg .hamburg-line3{transform: translateY(-15px) rotate(45deg);}

	.topbar ul { 
		list-style-type: none;
		height: auto; 
		max-height: 0; 
		overflow: hidden; 
		transition: 1s;
		background: #666;
		padding-left: 0
	}

	.topbar li { 
		height: 4em;
	}

	#hamburg:checked ~ ul {max-height: 800px;}
	
	.entry-content .block-cover {  border-top: 4px solid gainsboro; border-bottom: 4px solid gainsboro; padding-top:1.5rem; padding-bottom: 1.5rem; }
	
	
}


@media (min-width: 520px) {
	.headsvg { max-width: 440px}
	.topbar ul { 
		display: flex;
		flex-wrap: wrap;
	}

	.topbar li { 
		width: 50%;
	}
	
	.topbar a { 
		padding-left: 1.5rem;
	}
}


@media only screen and (min-width: 800px)  {
	body { font-size: 110%; line-height: 1.5}
	section em:not(section pre em) { font-family: serif; }
	#top-logo {
		width: 80px;
	}

	.site-title {
		font-size: 1.6em;
		line-height: 1.5;
		margin-left: 1em;
	}

	.topbar li { 
		width: 33.33333%;
		height: 5rem;
	}
	.topbar a { 
		padding-left: 0;
		align-items: center;
	}
	
	.footer-cols {
		display: flex;
		justify-content: center;
	}	
	
	.cols {
		width: 49%;
		max-width: 520px;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
	}
	
	.entry-content {}
	.excerpt {font-size: 1.2em}
	
	/** WP **/
	.home main.blog {
	
	}
}

/** WP **/

.home  .blog article header a {
	text-decoration:none;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space:nowrap;
	color: #222;
}

.home  .blog article .excerpt{
	border-bottom: none;
	background: none;
}
	
ul.post-meta {
	list-style-type: none;
}
	
@media (min-width: 920px) {
	.home  .blog {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		max-width: 1476px;
		margin-left: auto;
		margin-right: auto; 
	}
	
	.home  .blog article {
		width: 40%;
		max-width:40%;
		/*display: flex; */
		/*flex-direction: column;*/
		background: white;
		margin-bottom: 2rem;
		box-shadow: 3px 3px 5px hsla(0,0%,0%,0.1);
	}
	
	.home  .blog article header {
		margin-top:0;
		margin-left:0;
		width:100%;
		padding-top: 8px;
		font-weight: 300;
	}

	.home  .blog article .main-line {
		display:block;
	}
	
	.home  .blog article h2 {
		max-width:100%; 
		overflow: hidden; 
		text-overflow:ellipsis;
		text-align: left; font-size: 1.2em;
		margin-top:0;
	}



	.home  .blog article .excerpt p {
		font-size: 1rem;
		padding-right: 1rem;
	}
	
	.home .blog article .main-line .headsvg {
		max-width:50%;
		margin-left:auto;margin-right:auto
	}
	
	.home .excerpt p {
		max-width: 100%;
		margin-left: 0;
	}
}

/** WP **/
@media (min-width: 1260px) {	
	.home .blog article {
		width: 30%;
	}
}

@media (min-width: 1100px) {
	.headsvg { max-width: 640px}
}


@media only screen and (min-width: 1380px) {
	@supports not (-ms-high-contrast: none) {
	.topbar ul { 
		width:100%; background: gainsboro; list-style-type: none; padding-left: 0; justify-content: center;
	}
	.topbar li { 
		width: 16.66666%;
		max-width: 246px;
		padding-top:0.5em;
		padding-bottom:0.5em;
	}
	
	header.entry-header {
		max-width: 1380px;
		margin-top:2em;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
		padding-left: 34px;
	}
	
	/** WP **/
	body.home header.entry-header {
		padding-left: 0;
	}
	
	.main-line {
		display:grid;
		grid-template-columns: 1fr 900px 380px 1fr;
		grid-template-areas: ".       headsvg topadds . "
							 "excerpt excerpt search  search";
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	/** WP **/
	body.home .main-line {
		margin-top: 0;
		margin-bottom: 40px;
	}
	
	main {
		display:grid;
		grid-template-columns: 1fr 900px 380px 1fr;
		grid-template-areas: "entry-content entry-content secondary . ";
		justify-content:center;
	}
	
	.headsvg {grid-area: headsvg; width:900px; max-width: 900px; margin-bottom: 40px;}
	.topadds {grid-area: topadds; width: 360px; max-width: 360px; overflow:hidden; margin-bottom: 40px;  }
	.excerpt {grid-area: excerpt; background: #efefef; max-width: 100%; width: 100%; margin-top: 1rem; }
	.search {grid-area: search; background: #efefef; width: 100%; padding-left: 3rem; box-sizing: border-box; }
	.search form { margin-left: 0}
	.sitemap {display:none}
	
	.entry-content { 
		grid-area: entry-content;
		box-shadow:2px 0 4px -2px #ddd; 	
	}
	.secondary {
		grid-area: secondary;
		width: 360px;
		margin-left: 40px;
	}

	.secondary nav {}
	.secondary a {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.entry-content section,
	.entry-content .wp-block-group,
	.entry-content nav, 
	.entry-content aside { margin-left: calc(100% - 900px) }
	.entry-content .block-cover { margin-right: 0; margin-left: auto; }
	
	
	.excerpt p,
	.excerpt ul,
	.excerpt ol { max-width: 900px; margin-left: calc(100% - 900px); }
	.topadds div {
		background: ivory;
		width:300px;
		height: 600px;
	}
	
	.bottom { margin-top: 4em}
	
	section p {margin-right: 0.5em; color: #222; }
	}
}

/** WP **/

.home .blog {
	margin-top: 2rem;
}

@media (min-width: 1100px) {
	.headsvg { max-width: 900px}
	.headsvg img { width: 900px; height:600px; object-fit:cover}
	.home .blog {
		margin-top: 4rem;
	}
}

@media (min-width: 1260px) {	
	.home .blog {
		margin-top: 5rem;
	}
}

@media (min-width: 1500px) {
@supports not (-ms-high-contrast: none) {
	.home .blog {
		justify-content: space-between;
		max-width: 1476px;
	}
	.home .blog {
		margin-top: 8rem;
	}
}
}


@media (min-width:1500px) {
@supports not (-ms-high-contrast: none) {
	.headsvg {width:1000px; max-width: 1000px; margin-bottom: 40px; margin-left: -100px;}
	.headsvg img {width: 1000px; }
	.topadds {width: 420px; max-width: 420px;  }
	.secondary { width: 420px; margin-left: 60px; }
}
}
.demo-wrap { background: #efefef; padding: 4px 0}
.demo { max-width: 300px; margin: 1em auto; text-align: center; background: #fff; padding: 0.5em;}
.demo input, .demo select, .demo button { font-size: 1em; padding: 2px 8px}
.demo textarea { width: 90%; margin: 1em auto; font-size: 1em; color: #666}
.demo .result { background:#efefef;padding:10px;margin: 10px auto; }
.demo button { height: 30px; font-size: 0.9em; border-radius: 15px; border: 1px solid silver; padding-left: 12px; padding-right: 12px; background-image: linear-gradient(#E3E3E3, white); display: inline-block; margin: 8px 0}