/*
| Файл основных настроек блоков страницы.
| Назначение сеток и размещения объектов.
| ---------------------------------------
| 17.01.22
*/
/* Подключение стороннего шрифта */
@font-face {
	font-family: "Montserrat-Regular";
	src: url("../fonts/Montserrat-Regular.ttf") format("truetype");




}
@font-face {
	font-family: "Montserrat-Black";
	src: url("../fonts/Montserrat-Black.ttf") format("truetype");

}





@font-face {
	font-family: "Montserrat-Bold";
	src: url("../fonts/Montserrat-Bold.ttf") format("truetype");

}



 .whithe{
	color: #ffffff;
	text-shadow: #000000 10px 0px 20px;
 }


 



@font-face {
	font-family: "Montserrat-Medium";
	src: url("../fonts/Montserrat-Medium.ttf") format("truetype");

}
@font-face {
	font-family: "Montserrat-SemiBold";
	src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");

}



html {
	scroll-behavior: smooth;
  }
  


body{
	background: #ffffff;
	position: relative;
	z-index: -3;
}


/* Общие правила всех элементов страницы */
* {
	margin: 0px;
	padding: 0px;
	font-size: 20px;

	color: rgb(255, 255, 255);


	font-family: "Montserrat-Bold";

}

a{
	text-decoration: none;
}
li{
list-style: none;

}
h1{
font-family: "Montserrat-Bold";
text-align: center;
}

img{
	height: 100%;
max-width: 100%;
object-fit: cover;
display: block;
}
/* Блок, отображающий содержимое страницы */
.page {
	display: grid;
	grid-template-rows: repeat(7, minmax(min-content,max-content));


}
.w{
	color: white;
}

/* Блок-структура динамического контента */
:is(nav,header,main,footer) > :is(.container) {

	display: grid;
	grid-template-rows: repeat(auto-fill, minmax(0px, max-content));
	grid-gap: 20px;
	margin: 0 auto;

}









/* Блок-структура построчного размещения */
:is(nav,header,main,footer) > :is(.container) > :is(.container__row) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(800px, 1fr));
	grid-gap: 20px;

}




@media screen and (min-width: 1600px) {
	:is(nav,header,main,footer) > :is(.container) {
		max-width: 1600px;}
}













@media(max-width: 1720px){
		:is(nav,header,main,footer) > :is(.container) {
				max-width: 1200px;


		}
		.fotos{
			text-align: center;

		}
		header>.container>.container__row>.heder_con>.forma{
			margin: 0 auto;
			
		}

}
@media(max-width: 1300px){
	div>.cart-main{
		width: 25vw;
		height: 35vw;
	}
	#metal{
		width: 70vw;
	}
	.music_pleer>.use_pleer{
		max-width: 305px;
	}
	:is(nav,header,main,footer) > :is(.container) {
				max-width: 970px;



			}
:is(nav,header,main,footer) > :is(.container) {
				margin: 0 auto;
			}
}
@media(max-width: 1111px){
	div>.cart-main{
		width: 35vw;
		height: 45vw;
	}
	.ylsg-metal>.whithe{
		font-size: 5vw
	}
	#metal{
		width: 80vw;
	}

	.filtr>.hed-filtr>p{
		font-size: 16px;
	}
	.olojka-film{
		margin: 0 auto;
	}
	.container>.film-hed{
		display: grid;
		margin-bottom: 5%;
	}
	.opisanie-div{
		min-height: 500px;
	}
	.music_pleer>.use_pleer{
		max-width: 255px;
	}

	.yslygi>.container>.container__row{
		grid-template-columns: 50% 50%;
	}

		.container{
		margin: 0 auto;
	}
	header>.container>.container__row>.menu>ul>.menu_btn>a{
		font-size: 16px;
		text-align: center;
	}

	}
	:is(nav,header,main,footer) > :is(.container) {
				margin: 0 auto;
			}


@media(max-width: 817px){
	div>.con-syp-up{
		grid-template-columns: 49% 49%;
        grid-gap: 0% 2%;
	}
	div>.main-carts{
		grid-template-columns: 49% 49%;
        grid-gap: 0% 2%;
	}
	div>.cart-main{
		width: 44vw;
        height: 75vw;
	}
}

@media(max-width: 992px){
	#metal{
		width: auto;
	}
	header>.diviz>h1 {
		font-size: 40px;

	}
	header>.diviz>h2 {
		font-size: 20px;
	}

:is(nav,header,main,footer) > :is(.container) {
				margin: 0 auto;
	}			
nav>.container>.container__row>.nav_bar{
	padding-right: 2%;
}

}


@media(max-width: 990px){
	.opis-metal-yslg>.opis{
		font-size: 18px;
	}
.container>.overfl>.pleer_row{
	display: flex;
}
	.opis-cart-header>.opis-box>a{
		font-size: 18px;
	}
	.cart-ysl>.zag-cart-header{
		font-size: 35px;
	}
}
@media(max-width: 850px){
	div>.btn-header{
		display: block;
	}

	nav>.nav-bar{
		justify-content: space-around;
	}
	div>.heder-yslugi{
	display: flex;
    transform: 0;
    transform: translateX(52.5%);
	}
	
	
	
	div>.cart-ysl{
		
		width: 100vw;
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
	}
	
}




@media(max-width: 767px){
	#none{
		display: none;
	}
	div>.zag-main{
		margin-top: 10%;
	}
	.ylsg-metal>.whithe {
        font-size: 9vw;
    }
	.flx-metal{
		margin-bottom: 10%;
	}
	div>.opis-metl-d{
		padding: 5%;
	}
	.opis-metl{
		margin-bottom: 5%;
	}
	.opis-metl::before{
		display: none;
	}
	.opis-metl-d>a{
		display: none;
	}
	.opis-metl-d>.zak-buttom{
		display: block;
		padding: 5% 0;
	}
	div>.opis-metl-d{
		grid-template-columns: none;
	}
	div>.zag-main{
		min-width: 0;
		font-size: 5vw;
	}


	:is(nav,header,main,footer) > :is(.container) {
				max-width: none;}
:is(nav,header,main,footer) > :is(.container) {
				margin: 0 auto;
			}


			.ylsg-metal>.flx-metal{
				display: grid;
			}



	}		


@media(max-width: 650px){


.music_pleer>.use_pleer{
max-width: 400px;

}
}

@media(max-width: 500px){
	div>.cart-main {
        width: 44vw;
        height: 90vw;
    }
	div>.name-tovar>p{
		font-size: 20px;
	}
	div>.flx-box-cart{
	display: grid;			

	}
	div>.zag-main {
        min-width: 0;
        font-size: 6vw;
    }
	.flx-box-cart>.none-img>img{
		display: block;
		margin: 0 auto;
	}
	.flx-box-cart>.none-img{
		display: block;

	}
	.img-cart-header>img{
			display: none;
	}
	div>.opis-box{
		margin: 0 auto;
        margin-top: 5%;
	}



	.films>.spisok{
		padding-left: 5%;
	}
	.films>.filtr{
		padding-right: 5%;
	}
	.container>.overfl>.pleer_row{
		gap: 0;
	
	}
	.music_pleer>.name_trek_div{
		margin-bottom: 15%;
	}
	.use_pleer>.btns_pleer{
		margin-top: 20%;
	}
	main>.container{
		padding: 0;
	}
	.overfl{
		height: 100vh;
	}
	.overfl>.pleer_row{
		padding: 0;
		height: 100vh;
	}
	.img_music_container>.img_music {
		height: 65vh;
		max-height: 100%;
	}
	.pleer_row>.music_pleilist{
		border-radius: 0;
	
		flex: 0 0 90%;
	}
	.overfl>.pleer_row>.music_pleer{
		border-radius: 0;
	}	
	.music_pleer>.use_pleer{
		max-width: 300px;
		
}


}





@media(max-width: 410px){
	div>.opis-tov>p {
		font-size: 18px;
	}
	header>.diviz>h1 {
        font-size: 30px;
    }
	.music_pleer>.use_pleer{
		max-width: 250px;
		
}

}
.avtorisation-body{
	max-height: 100vh;
}