@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Poiret+One&display=swap');
*{padding:0;margin:0;}
:root{
	--cl-orange:#d56f09;	
}
body{
	font-family: Noto Sans, -apple-system, system-ui, sans-serif;	
	height: 100%; background-color: #252525; background-size: 10%; background-attachment: fixed;
}
.logo{}
h2{font-weight: 500;letter-spacing: 2px; text-align:center;margin: 0;}	
.box_header {
	display: flex;align-items: center; flex-direction: column; justify-content: space-around;
	height: max(40vw, 200px);padding: 1em 1em 0.5em 0.5em;
	font-weight: unset;position:relative;		
	background-image: url(/pic/baner_foto.webp); background-size: cover; background-repeat: no-repeat; background-position: center;
    aspect-ratio: 22 / 9;
	text-align: center;    
    width: -webkit-fill-available;
}
.box_header::before{
	content: '';
    z-index: 1;position: absolute;left: 0;top: 0;
    width: 100%;  height: 100%;            
	backdrop-filter: brightness(0.7);    
}
.zag_head{
	width: -webkit-fill-available;z-index:2;text-shadow: 1px 1px 6px black;
	color: #ffffff;font-family: Poiret One, sans-serif; font-weight:unset;font-size: clamp(180%, 4vw, 7vh);
	text-shadow: 1px 1px 3px #000000, -1px -1px 3px black;
	user-select: none;padding-left: min(25%, 8rem);
}
.zag_head::before{
	content: '';
    z-index: 1;position: absolute;
	top: 0; left: 0; margin: 0.5em;
    width: min(25%, 7rem);  height: min(25%, 7rem);
    background-image: url(/pic/logo_128.png); background-size: contain;background-position: left; background-repeat: no-repeat;filter: opacity(0.8);
    z-index: 0;    
}
.zag_adres{
	display: flex; flex-wrap: wrap;  align-content: center;  justify-content: space-around;  align-items: center;
	color: #c99652; margin-top: 20px;
}
nav{
	display:flex;gap:1em;z-index:1;align-self: flex-start;z-index: 2;
	a{
		display:block; color: #dfdfdf; padding: 3px 0.5rem;border-radius: 6px;
        backdrop-filter: brightness(0.5);font-family: 'Poiret One',sans-serif; font-size: larger;   font-weight: 600;
        text-decoration: none;		
		&:hover{background-color:var(--cl-orange);}
    }	
}
ul{margin: 25px auto;width: fit-content; font-size: larger;}
.slide_row{	
	position:relative;overflow-x: hidden;padding-left: 2rem;
	li{transform:translateX(50%); opacity:0; animation: r-left .5s ease-out; animation-fill-mode: forwards;}	
	li:nth-child(2){animation-delay: 150ms;}
	li:nth-child(3){animation-delay: 300ms;}
	li:nth-child(4){animation-delay: 450ms;}
	li:nth-child(5){animation-delay: .6s;}
	li:nth-child(6){animation-delay: 750ms;}
	li:nth-child(7){animation-delay: 900ms;}
	li:nth-child(8){animation-delay: 1050ms;}
}
@keyframes r-left{
	0%{transform:translateX(50%); opacity:0}
	100%{transform:translateX(0%); opacity:1}
}
    
.link_net{display: flex;flex-direction: row;flex-wrap: wrap;align-content: center;justify-content: space-around;align-items: center;text-decoration: none;}
.link_net div{margin: 5px;}

address{font-style: italic;}

.box_content{
	display: flex; flex-direction: column;justify-content: space-between;	align-items: center; margin: 0 auto; width: 80%;
	box-shadow: 0px 0 70px #595959;	
}
.box_youtube{
	display: flex;gap: 1em;
    margin: 5px; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center;
}
.box_messenger{
	display: flex;font-size: 20px;Justify-content: space-evenly;	
}
.but_messen{	
	color:#fff; 
	font-size: 20px; 
	margin: 2px 3px;
	padding: 5px 20px;text-align: center;
	border-radius: 6px;
    text-align: center;
    line-height: 35px;
	transition: .2s linear;
}
.but_messen:hover{cursor:pointer; transform: scale(1.02);}

.ramka{
	padding:1.5em;	margin: 1px 0px 0px 0px; width: -webkit-fill-available;	font-size: large; background-color: #ffffff; border-radius: 2px; 
	p{text-indent: 2rem;line-height: 1.8rem;text-align: justify;}
}
details summary{font-weight:500; font-size: 1.5em; text-align: center;}	

.sidemap{color: #ffffff;font-size: 16px;text-shadow: 2px 1px black; text-align: center; margin-top: 0;}
.ramka_annotation{overflow: hidden;	border-radius: 10px 10px 0px 0px;box-shadow: 5px 5px 10px 2px #bbbbbb;	margin: 15px 15px;	background-color: #e1f8ff;font-size: 90%;	border-radius: 10px;padding: 5px 5px 5px 5px;}  
.caption{display: inline-table;	width: 100%;text-align: center;	font-size: 1.1em;cursor: pointer;margin: 5px;}
.annotation{display: none;}	
footer{
	display: flex; flex-direction: column; align-items: center; margin: 0;	text-align: center;	padding: 1em;padding-bottom: 10px;color: #e6e6e6;
}
.phone{text-decoration: none; color: #e6e6e6;}
#form_write{
	display:flex; flex-direction: column;width: 420px;margin: 10px;padding: 15px;background-color: var(--cl-orange);border-radius: 5px;color: white;
	input{padding: 10px;  outline: none;  font-size: larger; margin:0.2em;}
	textarea{padding: 10px;  outline: none;  font-size: x-large; margin:0.2em; height: 100px; text-align: left;}
	div{text-align: center;  font-size: x-large;}
}
/*с мобильника*/
@media only screen and (max-width : 1200px) {	
	.ramka{font-size: 16px;}	
	.wrap_write_lesson{width: -webkit-fill-available;}	
	.box_youtube{flex-direction: column;}
	.but_round{right: 10px;}
	.zag_head{}	
	ul{  font-size: large; }
}	
@media only screen and (max-width : 768px) {
	.box_header {background-image: url(/pic/baner_foto_comp.webp);}
	.box_content {width: -webkit-fill-available;}
	#form_write{width: 320px;}
	.ramka{border-radius:0px;}	
	.sidemap{width: 98%;} 	
	.zag_head{}	
	.box_youtube{flex-direction: column;}
	.box_messenger{flex-direction: column;}	
	h2{letter-spacing: normal;}
	iframe, video{width:350px; height:200px;}
	address{font-size: smaller;}	
}