.wrapbanner {
	box-shadow: -20px -3px 20px 0px rgb(88 43 76 / 20%);
}
@media(min-width: 713px) {
  .poster img {
		border-radius: 2rem;
}
}
@media ((min-width: 762px) and (max-width:1349px)),((min-width: 1351px)) {
	.poster {
		opacity: 0.9;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0.3s ease
	}
}
@media(min-width:821px){
	.wrapbanner {
    flex-wrap: nowrap;
		padding: 1rem;
}
#onlineshkola .text {
	padding: 3rem 10rem;
}
}
.poster:hover {
	opacity: 0;           
	visibility: hidden;
}
@media(min-width:1441px) {
.banner {
		h2 {
			font-size: 1.6rem;
			margin: 2% 0 2% 10%;
			width: 100%;
			padding: 1rem;
	}
}
}
	.banner {
		padding-right: 5%;
		/* h2 {
			font-size: 1.9rem;
				margin: 2% 0 2% 10%;
        width: 80%;
        padding: 1rem;
		} */
    video, .poster img {
        margin-top: 2rem;
        max-width: 40rem;
        height: 15rem;
        border-radius: 2rem;
        width: 100%;
        object-fit: cover;
    }
}
.banner:has(video) {
	height: auto;
	max-width:100%;
}
h1 {
	margin: 1.2rem 0;
	background-color: #f7ecdb6e;
	color: #c44228;
	font-size: 2.7rem;
	text-shadow: 0px 0px 1px #6ead80;
}
.nav-menu {
	padding: 0;
	margin: 0;
}

/* @media(max-width:2560px) {
	.cancelzero {
		display: none;
}
}
@media(max-width:1920px) {
	.cancelfirst {
		display: none;
}
} */
@media (max-width:1440px) {
	#onlineshkola .text {
			padding: 3rem 10rem;
	}
	.banner {
				video, .poster img {
					margin-top: 0;
			}
			li {
					margin: 0 0 0 3rem;
			}
			}
	}
	@media (max-width: 1339px) {
    .wrapbanner {
		max-height: 41.750rem;
		padding: 0.833rem;
	}
	a .cancelsecond, a .cancelfirst {
		margin: 0 2px 0 2px;
}
}
@media (max-width: 1292px) {
  .banner {
	padding:0 ;
    min-width: 16rem;
  }
}
/* @media(max-width:1280px){
     .banner {
        video, .poster img {
                  margin: 0;
            height: 25rem;
            max-width: 20rem;
        }
    }
} */
@media (max-width:1024px) and (orientation:landscape) {
	h1 {
			margin: 0.3rem 0;
			font-size: 1.7rem;
	}
#onlineshkola .text {
	padding: 3rem 10rem;
}
	.banner {
		padding:0 ;
		min-width: 16rem;
		video, .poster img {
							 margin: 0;
				 height: 20rem;
				 max-width: 20rem;
				 border-radius: 2rem;
		 }
	h2 {
		font-size: 1.2rem;
		margin: 0 0 2% 10%;
		padding: 0.5rem 0;
		width: 80%;
	}
	li {
			margin: 0 0 0 3rem;
	}
}	
.wrapbanner {
	max-height: 41.750rem;
	padding: 0.833rem;
}
}
@media (max-width:1024px) and (orientation:portrait) {
	h1 {
			margin: 0.3rem;
			font-size: 1.7rem;
	}
#onlineshkola .text {
	padding: 3rem 10rem;
}
	.banner {
		padding:0 ;
		min-width: 16rem;
		video, .poster img {
							 margin: 0;
				 height: 25rem;
				 max-width: 20rem;
				 border-radius: 2rem;
		 }
	h2 {
		font-size: 1.2rem;
		margin: 0 0 2% 10%;
		padding: 0.5rem 0;
		width: 80%;
	}
	li {
			margin: 0 0 0 1.5rem;
	}
}	
.wrapbanner {	
		flex-wrap: nowrap;
	max-height: 41.750rem;
	padding: 0.833rem;
}
#onlineshkola .text {
	padding: 3rem;
	width: 100%;
}
}
@media (max-width: 820px) and (orientation:portrait) {
	.wrapbanner {
flex-wrap: wrap;
margin: 0;
padding: 0;
margin-bottom:8rem;
}
	h1 {
			margin: 0.5rem 0;
	}
			.banner {
			video, .poster img {
					margin: 0.5rem;
					height: 15rem;
					max-width: 30rem;
			}
	}
	.banner {
			max-width: 34.167rem;
	min-width: 100%;
	width:100%;
			}
			ul {
			margin: 0.3rem auto 1rem 0.6rem;
	}
	#onlineshkola .text {
			padding: 3rem;
	}
	 }
	 @media (max-width: 768px) and (orientation:portrait) {
    .wrapbanner {
		padding: 0;
		margin: 0;
		max-height: 50rem;
		max-width: 32rem;
}
	.banner {
		display: block;
		max-width: 15.167rem;
	video, .poster img {
		width: 100%;
	  }
	}
}
@media (max-width: 762px) and (orientation:portrait) {
	.wrapbanner {
	box-shadow: none;
	margin: 0;
	padding: 0;
	max-height: 30.833rem;
	max-width: 31.75rem;
}
.banner {
	width: 100%;
	margin: 0;
	padding: 0 0 0.833rem 0;
	max-width: 31.75rem;
	video, .poster img {
		width: 100%;
		max-width: 31.75rem;
		margin: 0;
		padding: 0;
	}
}
.poster {
	opacity:1;
}
}
@media (max-width: 712px) and (orientation:portrait) {
	.wrapbanner {
	max-width: 29.667rem;
}
.banner {
	display: block;
	margin: 0;
			video, .poster img {
					border-radius:0;
			}
}
	#onlineshkola .text {
			padding: 0.4rem;
	}
	/* .cancelsecond {
		display: none;
} */
}
@media (max-width: 640px) and (orientation:portrait) {
.wrapbanner {
flex-wrap: wrap;
box-shadow: -4px -2px 9px 4px rgb(88 43 76 / 20%);
margin: 0;
padding: 0;
max-height: 30.833rem;
max-width: 26.667rem;
}
.banner {
width: 100%;
margin: 0;
padding: 0 0 20px 0;
max-width: 26.667rem;
video, .poster img {
width: 100%;
max-width: 26.667rem;
margin: 0;
padding: 0;
max-height: 15rem;
}
}
}
@media (max-width: 600px) and (orientation:portrait) {
	.wrapbanner {
	max-height: 29rem;
	max-width: 25rem;
}
.banner {
	max-width: 25rem;
	video, .poster img {
		max-width: 25rem;
		max-height: 14.083rem;
	}
}
}
@media (max-width: 480px) and (orientation:portrait) {
	.wrapbanner {
max-height: 100%;
max-width: 20rem;
}
h1 {
	font-size: 1.5rem;
}
.banner {
max-width: 20rem;
min-width: 15.625rem;
h2 {
	font-size: 1.4rem;
			width: 100%;
			margin:0;
}
	video, .poster img {
height: 12rem;
max-width: 20rem;
}
}
.banner:has(video) {
height: 12rem;
}
h2 span {
	display:none;
}
header {
	height: 1.5rem;
}
}
@media (max-width: 414px) and (orientation:portrait) {
     h1 {
        font-size: 1.7rem;
        margin: 0.5rem 0;
        text-shadow: 0px 0px 1px #6ead80;
     }
    .banner {
		max-width: 17.25rem;
		min-width: 15.833rem;
		width: 100%;
		margin: 0;
		padding: 0;
	  video, .poster img {
		  width: 100%;
		  height: 10rem;
		  max-width: 17.25rem;
	   }
	}
    .wrapbanner {
		max-width: 17.25rem;
		padding: 0;
     }
   .banner:has(video){
	  height: 10rem;
	  max-width: 17.25rem;
   }
	 header {
		height: 1.1rem;
	 }
}
@media (max-width: 391px) {
	.banner {
		margin: 0;
		padding: 0;
	}
}
@media (max-width: 385px) and (orientation:portrait) {
	li {
		margin: 0 0 0 0.6rem;
}
    h2 {
	  padding: 0;
	  margin: 0 0 0.417rem 0;
	  font-size: 0.778rem;
    }
    .wrapbanner {
		max-width: 16.042rem;
	}
.banner {
		max-width: 16.042rem;
		video, .poster img {
			max-width: 16.042rem;
		}
	}
}
@media (max-width: 360px) and (orientation:portrait) {
	.wrapbanner {
			max-width: 20rem;
	padding: 0;
	.banner, .banner video {
			min-width: 100%;
	}
}
h1 {
	font-size: 1.4rem;
	margin: 0;
}
.banner {
	h2 {
			font-size: 1.2rem;
			padding: 0.5rem 0 0 0;
	}
	ul {
		margin: 0.3rem auto 0 0.6rem;
		li {
			font-size: 0.7rem;
			margin: 0 0 0 0.6rem;
	}
}
			video {
				height: 100%;
						max-width: 20rem;
						min-width: 18.75rem;
	 }
	}
}
@media (max-width: 320px) and (orientation:portrait) {
	header {
		height: 1.8rem;
}
h1 {
	font-size: 1.8rem;
	margin: 1rem 0;
}
.wrapbanner {
	box-shadow: -3px -4px 20px 11px rgb(88 43 76 / 20%);
	margin-bottom: 20%;
}
.banner {
	h2 {
		font-size: 1.5rem;
		padding: 0.5rem 0;
}
	ul {
		margin: 0.5rem auto 1rem 0.6rem;
		li {
			font-size: 1rem;
			margin: 0 0 0 2rem;
			line-height: 1.2rem;
	}
}
	video, .poster img {
			max-width: 20rem;
	}
}
button {
	border-radius: 1rem;
	width: 85%;
	height: 4.5rem;
	margin: 0 0 2rem 0;
}
#onlineshcola .text {
	margin: 0 8%;
	width: 80%;
}
}
@media (max-width: 281px) and (orientation:portrait) {
	header {
		height: 1.563rem;
	}
}