charset "utf-8";
.font1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: normal;
	font-weight: normal;
	color: #000000;
}

.font2 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: normal;
	color: #000000;
}

.font3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: normal;
	color: #000000;
}

.menubutton-1 {
	 align-items: center;
  grid-area: MB1;
}

.menubutton-2 {
	align-items: center;
  grid-area: MB2;
}

.menubutton-3 {
	align-items: center;
	
  grid-area: MB3;
}

.menubutton-4 {
	align-items: center;
	
  grid-area: MB4;
}

.menubutton-5 {
	align-items: center;
	
  grid-area: MB5;
}

.menubutton-6 {
	align-items: center;
	
  grid-area: MB6;
}

.smallmenubutton-1 {

  grid-area: SB1;
}

.smallmenubutton-2 {

  grid-area: SB2;
}

.smallmenubutton-3 {

  grid-area: SB3;
}

.smallmenubutton-4 {

  grid-area: SB4;
}

.smallmenubutton-5 {

  grid-area: SB5;
}

.smallmenubutton-6 {

  grid-area: SB6;
}
.smallmenubutton-7 {

  grid-area: SB7;
}
.sidemenubutton-1 {
   justify-items: end;
	align-items: end;
  grid-area: SDB1;
}

.sidemenubutton-2 {
  justify-items: start;
  align-items: start;
  gap :25px;
  grid-area: SDB2;
}

.contact-1 {
	justify-items: start;
	align-items: start;
	
  grid-area: A;
}
.contact-2 {
	justify-items: end;
	align-items: end;
  grid-area: B;
}
.contact-3 {
	grid-area: C;
}

.booferempty-1 {

  grid-area: BFE1;
}

.booferempty-2 {

  grid-area: BFE2;
}

.artbox-1 {
  grid-area: AB1;
}
/* используется как основной*/
#container {
	padding: 0px;
	min-width: 1000px;
	max-width: 1800px;
	width: 70%;
	min-height: 700px;  
    margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #FFFFFF;
}
/* используется для подменю, то есть меню разделов внутри основного меню*/
#container_grid_menu{
	display: grid;
    grid-template-rows: 35px 20px;
    grid-template-columns:1fr repeat(7, 150px) 1fr;
	grid-template-areas:
	"BFE1 SB1 SB2 SB3 SB4 SB5 SB6 SB7 BFE2";
	"BFE1 BFE1 BFE1 BFE1 BFE1 BFE1 BFE1 BFE1 BFE1"
	gap: 0px;
	width: 100%;
	justify-content: center;
}
/* используется как верхней шапки с контактами и флагами и основного меню*/
#container_grid_head{
	display: grid;
    grid-template-rows: 22px  auto 50px;
    grid-template-columns: repeat(8, 1fr);
	grid-template-areas:
    "A A A A  B B B B"
	"A A A A  C C C C"
	"BFE1 MB1 MB2 MB3 MB4 MB5 MB6 BFE2";
	gap: 0px;
	width: 100%;
	justify-content: center;
	
}
/* используется для галереи 2д, когда нужны 2 буфера по бокам и боковая кнопка*/
#container_grid_2dart{
	display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns:1fr 100px auto 1fr;
	grid-template-areas:
	"BFE1  SDB1  AB1  BFE2"
	"BFE1  SDB2  AB1  BFE2";
	gap: 0px;
	width: 100%;
	justify-content: center;
}
/* используется для удержания в адаптивном основном container центральной неадаптивной части на тысячу пикселей*/
#inside_block {
    min-height: auto;
	width: 1000px;
	margin-top: 0px;
	margin-bottom: 0px;
    margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	justify-content: center;
	background-color: #FFFFFF;
}

[class^="menubutton-"] {
  background-color: #FFFFFF;
  display: grid;
  place-items: center;
  }

  [class^="smallmenubutton-"] {
  background-color: #FFFFFF;
  display: grid;
  }

  [class^="sidemenubutton-"] {
  background-color: #FFFFFF;
  display: grid;
}
  
[class^="contact-"] {
  background-color: #FFFFFF;
  display: grid;
}

[class^="booferempty-"] {
  background-color: #FFFFFF;
  display: grid;
}

[class^="artbox-"] {
 
  display: grid;
  place-items: center;
}


#footer {
    /*background-color: #301fed;*/ 
	vertical-align: middle;
    position: fixed; 
    bottom: 0; 
    height: 60px;
    
    min-width: 1000px;
	max-width: 1800px;
	width: 70%;
}

#container_main{
	padding: 0px;
	width: 880px;
	height: 130px;	
    margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 35px;
	margin-right: 35px;
	background-image: url(image/fon_main.jpg);
}

#containernew{
	padding: 0px;
	max-width: 1500px;
	width: 80%;
	min-height: auto;	
    margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	background-image: #FFFFFF;
}



.images {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	line-height: 0;
	font-size: medium;
	margin-top: 0px;
	margin-top: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;

}
#details {
	width: 900px;
	margin-top: 0px;
	margin-bottom: 0px;
    margin-left: 25px;
	margin-right: 25px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
	background-color: url(image/gallery_menu.jpg);
}

#main {
    min-height: auto;
	width: 1000px;
	margin-top: 0px;
	margin-bottom: 0px;
    margin-left: 0px;
	margin-right: 0px;
	padding-top: 15px;
	padding-bottom: 20px;
	padding-right: 0px;
	padding-left: 0px;
	background-color: url(image/gallery_menu.jpg);
}
#title {
    
	margin: 0px;
	padding: 0px;
	height: 55px;
	width: 950px;
    background-image: url(image/fon_top_menu.jpg);
	
}	


.font4 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: small;
	color: #484848;
}
.font5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: x-small;
	font-weight: normal;
	color: #2f2f2f;
}
.font6 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: small;
	color: #ff0000;
}
.topbutton {
width:20px;
border:2px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:10px;
position:fixed;
bottom:50px;
right:50px;
cursor:pointer;
color:#333;
font-family:verdana;
font-size:12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
.wrapper {
width: 950px;
margin: 0 auto 420px;
overflow: hidden;
}
@keyframes fade {
0%{ opacity: 0; }
10%{ opacity: 1; }
20%{ opacity: 1; }
30%{ opacity: 1; }
40%{ opacity: 0; }
50%{ opacity: 0; }
60%{ opacity: 0; }
70%{ opacity: 0; }
80%{ opacity: 0; }
90%{ opacity: 0;}
100% { opacity: 0; }
}
.wrapper img {
position:absolute;
margin: 0 auto;
width: 950px;
overflow: hidden;
opacity:0;
animation-name: fade;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.wrapper img:nth-child(1) { animation-delay: 0s; }
.wrapper img:nth-child(2) { animation-delay: 5s; }
.wrapper img:nth-child(3) { animation-delay: 10s; }
.wrapper img:nth-child(4) { animation-delay: 15s; }