#main											{background:url(../index/bg.jpg) no-repeat; height:1080px}

#grid											{position:relative; display:grid; grid-template-columns:1fr 1fr; justify-items:center; align-items:center}

#title-startpage					{grid-column:1/-1; margin:40px 0 0 220px; justify-self:start}

#logo-startpage						{margin:-60px 0 0 30px; justify-self:start}

#tsarstva-startpage				{opacity:1; grid-row:3/4; position:relative; z-index:3; left:-30px; top:70px}

.btn-sprite								{background:url(../index/btn-sprite.png) no-repeat}

#tsarstva-btns						{opacity:1; grid-row:4/7; position:relative; z-index:3; left:-55px; top:-110px}

#oopt-btn									{opacity:1; z-index:1; margin-right:20px; justify-self:end; align-self:end; width:268px; height:56px; background-position:-1px -509px}
#oopt-btn-mobile					{position:absolute; visibility:hidden}
#oopt-btn:hover						{background-position:-1px -567px}

#infoblock-btn						{opacity:1; z-index:1; margin:25px 20px 0 0; justify-self:end; align-self:start; grid-row:3/4; grid-column:2/-1; width:384px; height:57px; background-position:-1px -391px}
#infoblock-btn-mobile			{position:absolute; visibility:hidden}
#infoblock-btn:hover			{background-position:-1px -450px}

#animalia-btn							{margin-top:0; width:351px; height:52px; background-position:-1px -1px}
#animalia-btn:hover				{background-position:-1px -55px}

#plantae-btn							{margin-top:20px; width:306px; height:53px; background-position:-1px -625px}
#plantae-btn:hover				{background-position:-1px -680px}

#fungi-btn								{margin-top:20px; width:238px; height:52px; background-position:-1px -283px}
#fungi-btn:hover					{background-position:-1px -337px}

#description-startpage		{grid-row:4/7; grid-column:2/-1; display:grid; grid-template-columns:1fr; margin:90px 20px 0 0; background:url(../index/description-bg.png) no-repeat; width:713px; height:553px; line-height:1.6; font-family:'badscript'}
.h1												{margin:40px 0 0 70px; font-size:26px; font-weight:bold}
.text											{margin:-70px 75px 0 50px; font-size:20px; text-align:justify}
.text > span							{margin-left:40px}
.h2												{margin:-70px 50px 0 0; font-size:20px; text-align:right}
.separator								{margin:-100px 0 0 150px; opacity:1}
.h3												{margin-top:-125px; text-align:center; font-size:20px}
.h3 > a										{margin-top:0px; display:inline-block; line-height:1.5; text-decoration:underline}



#footer-bg								{opacity:1; position:relative; z-index:1; width:97%; margin:13px 0 10px 0; display:grid; grid-template-columns:332px 1fr 336px; grid-row:7/8; grid-column:1/-1; background:url(../index/bg-links.png) no-repeat; background-size:100% 100%}

#grid-links								{margin:5px 5px 7px; display:grid; grid-template-columns:repeat(auto-fit, minmax(auto, 104px)); justify-items:center; align-items:center; grid-gap:5px}

#zin											{position:relative}
#molbiol									{position:relative}
#krasfish									{position:relative}
#site-chuprov							{position:relative}

#zin,
#molbiol,
#krasfish,
#birds,
#site-chuprov							{padding:4px; box-shadow:0 0 1px black; border-radius:3px; background:#3C3C3C}
#zin > img,
#molbiol > img,
#krasfish > img,
#birds > img,
#site-chuprov > img				{border-radius:3px}
#zin:hover,
#molbiol:hover,
#krasfish:hover,
#birds:hover,
#site-chuprov:hover				{background:#00A19B}

#grid-srch-cont						{margin:5px 5px 5px 0; grid-column:3/4; display:grid; grid-template-columns:1fr 1fr; justify-items:end; align-content:start}

#search-btn								{opacity:0; width:133px; height:47px; background-position:-1px -807px; right:230px; bottom:80px; z-index:1}
/*#search-btn:hover					{background-position:-1px -856px}*/
/*#search-btn-opened				{position:absolute; right:0; top:0; width:34px; height:34px; background-position:-1px -735px}*/
/*#search-btn-opened:hover	{background-position:-1px -771px}*/
/*#search-btn-input					{position:absolute; right:50px; top:2px; font-size:30px; line-height:1; font-weight:bold; font-family:'badscript'; text-shadow:2px 2px 2px #715736}*/
/*#search-btn-input:hover		{text-shadow:4px 4px 4px #3C3C3C}*/
/*#search										{position:absolute; left:50%; margin-left:-500px; top:70px; width:1000px; opacity:0; z-index:-11; border-radius:3px; box-shadow:0 0 30px black}*/

#contact-btn							{width:193px; height:47px; background-position:-1px -185px; right:34px; bottom:80px; z-index:1}
#contact-btn:hover				{background-position:-1px -234px}
#contact-btn-opened				{position:absolute; right:0; top:0; width:36px; height:36px; background-position:-1px -109px}
#contact-btn-opened:hover	{background-position:-1px -147px}
#contact									{position:absolute; visibility:hidden; display:grid; grid-template-columns:1fr 260px; justify-self:center; align-self:center; justify-items:center; align-items:center; line-height:1.5; overflow:hidden; z-index:11; border-radius:3px; box-shadow:0 0 50px black; background:url(../img/bg-animalia.jpg)}
#contact-photo						{position:relative; margin:10px; grid-row:1/8; overflow:hidden; box-shadow:0 0 2px black; border-radius:4px}
#contact-bird							{position:absolute; left:-160px; top:-50px}
#t1,#t2,#t3,#t4,#t5,#t6,
#contact a								{font-family:verdana; font-size:16px}
#t1												{margin:30px 10px 0 0; padding-bottom:2px; border-bottom:1px solid black; text-align:center}
#t2												{align-self:start}
#t3												{align-self:; border-bottom:1px solid black; padding-bottom:2px}
#t4												{justify-self:start; margin-left:10px}
#t5												{justify-self:start; margin-left:10px}
#t6												{margin:0 10px 0; text-align:justify}
#link-ftp									{margin-bottom:10px; text-align:center; padding:5px 10px 7px; border:1px solid #404040; border-radius:5px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0,0,0,0.3), 0 0 4px 1px rgba(0,0,0,0.2)}
#link-ftp:hover						{background:#00CDCD}



#overlay									{position:absolute; width:100%; visibility:hidden; background:black; z-index:10; left:0; top:0; height:100%}

#spider										{position:absolute; width:103px; height:69px; opacity:0; left:150px; bottom:-100px}

#belka										{position:absolute; width:67px; height:76px; left:-60px; top:200px}

#footer										{display:none}




























@media (max-width:1260px) {
#belka												{display:none}

#spider												{display:none}

#main													{height:auto; background:url(../index/bg-mobile.jpg) no-repeat; background-size:cover}

#title-startpage							{margin:10px 10px 0 90px; grid-column:1/3}
#title-startpage > img				{width:100%}

#logo-startpage								{margin:-40px 7px 0}
#logo-startpage > img					{width:60%}

#description-startpage				{margin:10px 10px 0; width:100%; max-width:713px; grid-row:3/4; grid-column:1/3; background:url(../index/description-bg.png) no-repeat}
#description-startpage > img	{max-width:100%}

#tsarstva-startpage						{grid-row:4/5; margin:15px 0px 0 10px; left:0; top:0; position:relative; justify-self:start}
#tsarstva-startpage > img			{width:100%}

#tsarstva-btns								{grid-row:5/6; justify-self:start; left:0; top:0; margin:0 0 0 5px}
#animalia-btn									{margin:0}
#plantae-btn									{margin:0}
#fungi-btn										{margin:0}

#oopt-btn											{position:relative; grid-row:4/5; grid-column:2/3; justify-self:end; align-self:end}

#infoblock-btn								{position:relative; grid-row:5/6; grid-column:2/3; justify-self:end; align-self:start; margin-top:20px}

#footer-bg										{grid-row:6/7; grid-column:1/3; position:relative; grid-template-columns:332px 1fr 1fr;}
}





@media (max-width:770px) {
#oopt-btn											{display:none}
#oopt-btn-mobile							{position:relative; visibility:visible; margin-right:5px; grid-row:4/5; grid-column:2/3; justify-self:end; align-self:end}
#oopt-btn-mobile > img				{width:100%}

#infoblock-btn								{display:none}
#infoblock-btn-mobile					{position:relative; visibility:visible; margin-right:5px; grid-row:5/6; grid-column:2/3; justify-self:end; align-self:start}
#infoblock-btn-mobile > img		{width:100%}

#grid-srch-cont								{grid-template-columns:1fr}
}





@media (max-width:713px) {
#grid													{grid-template-columns:1fr}

#title-startpage							{margin:10px 10px 0 55px}

#logo-startpage								{margin:-20px 5px 0}
#logo-startpage > img					{width:40%}

#description-startpage				{border-radius:10px; box-shadow:0 0 5px black; width:auto; height:auto; line-height:1.3; background:url(../index/description-mobile-bg.png) no-repeat; background-size:100% 100%}
.h1														{margin:10px auto 0}
.text													{margin:5px 10px 0}
.h2														{margin:10px 10px auto 0}
.separator										{margin:15px auto 0}
/*.h3														{margin:10px auto 15px; font-size:20px}*/
.h3														{margin:10px 10px 15px; font-size:20px}

#tsarstva-startpage						{display:none}

#tsarstva-btns								{margin-top:15px}

#oopt-btn-mobile							{grid-column:1/3; grid-row:6/7; margin:15px 5px 0; justify-self:end; visibility:visible; position:relative}

#infoblock-btn-mobile					{grid-column:1/3; grid-row:7/8; margin:0 5px 0; justify-self:end; visibility:visible; position:relative}

#footer-bg										{grid-row:9/10; width:96%; grid-template-columns:minmax(auto, 332px) 1fr; border-radius:10px; box-shadow:0 0 5px black}

#grid-srch-cont								{grid-column:2/3}

#contact											{grid-template-columns:minmax(auto, 260px)}
#contact div									{font-size:14px}
#contact-photo > img					{width:100%}
#t1														{margin:-5px 0 0}
#t3														{margin:5px auto 5px}
#t6														{margin-top:10px}
#link-ftp											{margin-top:5px}
#contact-btn-opened						{display:none}
}




@media (max-width:480px) {
#grid-links										{grid-template-columns:1fr 1fr}
#grid-links img								{width:100%}
.separator										{width:80%}
}