body {
 	font-family: rubik;
 	font-size: 1em;
 	background-color: #010012;
 	color: #C1C1C1;
 }
 .grid {
	display: grid;
  	grid-template-areas:
  	 	"header"
  	 	"menu"
  	 	"article"
  	 	"footer";  

 	min-width: 200px;
	max-width: 1600px;
	margin: 0 auto;
  }

header {
	grid-area: header;
	padding: 12px 0px;
}

article {
	grid-area: article;
}
footer {
	grid-area: footer;
	padding: 0px 0px 30px 0px;
}      

a {
  text-decoration: none;
  color: #F54F24;
  text-shadow: 2px 4px 10px rgb(240, 110, 72, 0.8);
  transition: color 2s, text-shadow 2s;
}/* #F06E48 */

a:hover{
	color: #FF8838;
	text-shadow: 2px 4px 15px rgb(240, 110, 72, 1);
}

.font_red {
	color: #F54F24;
	text-shadow: 2px 4px 10px rgb(240, 110, 72, 0.8);
}
.font_grey {
	color: #CECECE;
}


/*---------references_film---------*/
.references_film {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
	grid-gap: 15px;
	max-width: 1600px;
	margin: 0 auto;
}

/* https://reconcept.ru/blog/adaptivnoe-video-s-iframe-youtube-i-vimeo */
    .frame-film__div {
      position:relative;
      padding-bottom:56.25%;
    /*  /padding-top:25px; */
      height:0;
    }
    .frame-film__iframe {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
/* ------------------------------------------------------------------------ */
.frame-film {

}
	.frame-film__about{
		text-align: left;
		font-family: rubik;
		/* align-self: start;*/
	}
	.frame-film__about h2 {
		font-weight: 500;
		font-size: 1.6em;
		padding: 12px 0px;
		
	}
	.frame-film__about p {
		font-size: 1em;
		line-height: 1.3em;
		padding-top: 10px;
	}
	.link-more {
		color: #26637C;
		font-weight: 500;	
	}
/*---------references_film---------*/

/*-------ARTICLE--------*/
.art {
	background-color: #010010;
}
	.art__head{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		background-image: url('../img/DSC02620-03-notext.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		padding-bottom: 28.2%; 	
		height:0;				
		width: 100%;
	}
	.art__head-p1, .art__head-p2, .art__head-p3 {
		width: 100%;
		background-image: url('../img/Hashtag_anim_450x541_alpha6.gif');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		padding-bottom: 84%;
		height:0;
	}
	.art__head-p2 {
		background-image: url('../img/head_parts-02.gif');
	}
	.art__head-p3 {
		background-image: url('../img/head_parts-03.jpg');
	}
	.art__head__hashtag {
		color: #d74242;
		font-family: rubik;
		font-size: 2.15em;
		line-height: 1.2em;
		padding-left: 3.5%;
		padding-top: 6%;
	}
	.art__head_about{
		font-family: rubik;
		/* color: #DFDFDF; */
		/* color: #7DD7D6; */
		color: #D0F0EF;
		text-shadow: 2px 4px 10px rgb(119, 249, 249, 0.6);
		font-family: rubik;
		font-size: 16px;
		letter-spacing: 0.5px;
		/* line-height: 1.2em; */
		padding-left: 11%;
		max-width: 450px;
		padding-top: 42%;
		text-align: justify;
		font-weight: 100;
		line-height: 140%;
		transition: color 2s, text-shadow 2s;
	}
	.art__head_about:hover{
		color: #FF8838;
		text-shadow: 2px 4px 10px rgb(240, 110, 72, 0.8);
	}

	.art__about-mobile {
		display: none;
	}
	.art__about-mobile-text{
		color: white;
	    font: 1.3em rubik;
		text-align: center;
		font-weight: 100;
		padding: 10px 50px;
		margin: 0 auto;
	}
/*-------/ARTICLE--------*/


.categories_title{
	padding: 25px 0px 8px 0px;
}
	.categories_title h2 {
		text-align: left;
		font-size: 2.5em;
		padding: 0px 30px;
	}

	.categories_title hr {
		/* background-color: #DC2D3D; */ /* Цвет линии */
		background-color: #CECECE; /* Цвет линии */
		color: red; /* Цвет линии для IE6-7 */
		height: 3px; /* Толщина линии */
	}


/*-------menu----------*/
menu {
	min-width: 360px; /*выключить*/
	/* display: grid; */
	grid-area: menu;
	padding: 8px 15px;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: black;
	display: flex;
}
menu > div {
	font-size: 1.2em;
	color: white;
	display: block;
	padding: 4px 10px;
	font-weight: 300;
	margin: 0 auto;
	/*border: 1px solid red;*/
}

menu > div:hover {
	animation-name: line_anim;
 	animation-duration: 1s;
	border-color: #FFB400;
	color: #FFB400;  
}
	.menu__item {
		display: block;
		border-bottom-style: solid;
		/* border-width: 1px; */
		font-size: 1.2em;
		letter-spacing: 0.5px;
		color: #D0F0EF;
		border-color: #F54F24;
		/*border: 1px solid red;*/
	}
	.menu__item:hover {
		animation-name: line_anim;
	  	animation-duration: 1s;
		color: #FF9B26;
		border-color: #FFB400;
	}

	@keyframes line_anim {
	  	from {border-color: #D3D3D3;}
	  	to {border-color: #FFB400;}
		from {color: #FFFFFF;}
	  	to {color: #FF9B26;}
	}
/*-------menu----------*/

/*-------HEADER----------*/
.name, .name a:hover {
	font-size: 2em;
	font-weight: bold;
	color: black;
}

.comment_name {
	font-size: 12px;
	color: black;
}
.logo {
	display: flex;
	justify-content: center;
	font-size: 3em;
	font-weight: 300;
	letter-spacing: 15px;
	text-align: left;
	/*border: 1px solid red;*/
} 
/*-------HEADER----------*/

/*-------FOOTER----------*/
.grid_contacts {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: 1fr 1fr;
	margin-left: auto; /*центрирование блоков*/
	margin-right: auto; /*центрирование блоков*/
	max-width: 1200px;
	margin-top: 40px;
}
	.grid_contacts div {
		/* border: 1px solid green; */
		padding: 5px 24px 10px 24px;
	}
	.grid_contacts__phones{
		border-right: 3px solid #DC2D3D;
		text-align: right;
	}
	.grid_contacts h3{
		padding-bottom: 12px;
	}
	.grid_contacts__phones p, .grid_contacts__links p{
		padding-bottom: 6px;
	}
	.grid_contacts__links a{
		padding-right: 6px;
	}
/*-------FOOTER----------*/

/*-------references_frame----------*/
.references_frame {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
	grid-gap: 15px; 
	max-width: 1600px;
	margin: 0 auto;
}

	.references_frame > div {
	 	position: relative;
	 	background-color: black;
	}   
	.references_frame__h2 {
		position: absolute;
		text-align: center;
		top: 0;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center; 	
		align-items: center;
		background-color: rgba(0, 0, 0, 0.25); 
		/* justifyContent: "flex-start",
		alignItems: "flex-end", */
	}
	.references_frame__span {
		position: relative;
		color: white;
		font: 24px rubik;
		line-height: 29px;
		font-weight: 500;
		text-shadow: 0.5px 0.5px 15px #313131; 
		/* bottom: -20px; */
		bottom: -43%;
	}
	.references_frame img {
		width: 100%;
		opacity: 0.9;
	}

	/* .black_frame{
		position: absolute;
		background-color: rgba(184, 43, 205, 0.05);
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: .5s ease; 
	} */

/*-------references_frame----------*/

.copyright p{
	text-align: right;
	font-size: 0.7em;
	padding: 20px 10px;
}

.categories_title__link {
	display: inline-block;
}

.pt-6 {
	padding-top: 6em;
}
.pt-2 {
	padding-top: 2em;
}

.gallery_warp {
	/*border: 2px solid green;*/
	padding-bottom: 2em;
}

.gallery {
	margin-left: auto; /*центрирование блоков*/
	margin-right: auto; /*центрирование блоков*/
}


@media screen and (max-width: 1470px) {
	/* 360*4(minmax)+10*3(gap) */
    .references_film {grid-template-columns: 1fr 1fr 1fr;}
    .references_frame {grid-template-columns: 1fr 1fr 1fr;}
   }
   @media screen and (max-width: 1100px) {
    .references_film {grid-template-columns: 1fr 1fr;}
    .references_frame {grid-template-columns: 1fr 1fr;}
   }
   @media screen and (max-width: 730px) {
    .references_film {grid-template-columns: 1fr;}
    .references_frame {grid-template-columns: 1fr;}
    body {font-size: 0.9em;}
    .logo {font-size: 2.5em;letter-spacing: 8px;}
    .art__about-mobile {display: block;}
    .art__about-mobile-text{padding: 10px 100px;}
    .art__head-p1 {background-image: url('../img/Hashtag_anim_center_450x541_alpha2.gif');}
    .art__head_about {display: none;} 
    .art__head__hashtag {padding-top: 11%;} 
   }
   @media screen and (max-width: 570px) {
	.logo {font-size: 2em;letter-spacing: 6px;}
   .art__about-mobile-text {font-size: 1.2em; padding: 10px 50px;} 
   .categories_title h2 {font-size: 1.6em}
   menu > div {font-size: 1.1em;}
   
   }

   @media screen and (max-width: 450px) {
   	.art__about-mobile-text {font-size: 1em; padding: 10px 28px;}
	.logo {font-size: 1.6em; letter-spacing: 4px;}
	menu > div {font-size: 0.95em;}
   }