/*главная*/ #main {background:url(../oopt/ergaki/bg.jpg)} #header-bg {background:url(../oopt/ergaki/header-bg.jpg) no-repeat; height:300px} #grid-mainpage {position:relative; display:grid; grid-template-columns:0.35fr 1fr; align-items:start; justify-items:center; grid-column-gap:10px} #header-title {top:-280px; position:absolute; justify-self:center} #logo-site-mainpage {grid-column:1/-1; justify-self:start; margin:-90px 0 0 20px; border-radius:5px; padding:4px; background:transparent; box-shadow:black 0 0 5px} #logo-site-mainpage > img {border-radius:5px; opacity:0.9} #logo-site-mainpage:hover {padding:4px; background:#00A19B} #menu {margin:15px 0 0 10px; padding:0 0 10px 0; line-height:1.2; background:rgba(115, 154, 125, 0.2); border-radius:5px; box-shadow:black 0 0 2px} .menu-albums {margin:5px 0 5px 5px} .menu-materials {margin:5px 0 5px 5px} .menu-lev1 {margin:0 5px 0 10px; font-size:20px; text-shadow:1px 1px 2px #818181} .menu-lev2 {padding:2px 0 2px 35px} .menu-lev2:hover {background:#79A083} #info {margin:15px 10px 0 0; padding:0 10px 10px; line-height:1.2; background:rgba(115, 154, 125, 0.2); border-radius:5px; box-shadow:black 0 0 2px} .info-title {margin:15px 0 0; font-size:28px; text-align:center; text-shadow:2px 2px 4px #818181} .info-text {margin:15px 0 0; font-size: 16px; text-align:justify} .info-text > span {margin-right:50px} .info-img {margin:20px auto 20px; text-align:center} .info-img > img {margin:0 auto 0; box-shadow:black 0 0 5px; border-radius:5px} .info-img > div {margin:10px auto 0; font-size:16px} /*слайдер*/ #grid-slider {position:relative; display:grid; grid-template-columns:1fr; align-items:center; justify-items:center; margin-top:0} #logo-site-slider {justify-self:start; margin:-117px 0 0 20px; border-radius:5px; padding:4px; background:transparent; box-shadow:black 0 0 5px} #logo-site-slider > img {border-radius:5px; opacity:0.9} #logo-site-slider:hover {padding:4px; background:#00A19B} #title-fauna > img {width:100%} #slider-btn {grid-column:1/1; margin:-30px 0 auto 20px} #slider {grid-column:1/1; width:100%; margin-top:20px} .ergaki-slider-bg, .ergaki-slider-hover:hover {background:#8BB295} /*страница с видами*/ #main-last-page {background:url(../oopt/ergaki/bg.jpg)} #classification, #sinonim, #rus-names, #location, #dopinfo, #notice, #sources {background:#9BC2A5} /*кордон таловка*/ #main {line-height:1.2} #grid-albums-talovka {margin:60px 0 0 0; display:grid; grid-template-columns:1fr; justify-items:center; align-items:center} #title-main-talovka {margin:10px auto 0} #title-talovka {margin:25px 0 0 60px; justify-self:start} #autor {grid-column:1/-1; justify-self:start; margin:20px 0 0 70px; color:#2B431F; font-size:18px; font-weight:bold} .container {display:grid; grid-template-columns:1fr 1fr; justify-items:center; align-items:center; margin-top:40px} .talovka01a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka01b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-100px 30px 0 0; box-shadow:0 0 20px black} .text01b {grid-column:1/2; grid-row:3/4; margin:40px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka02a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka02b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-150px 30px 0 0; box-shadow:0 0 20px black} .text02b {grid-column:1/2; grid-row:3/4; margin:40px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka03a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka03b {grid-column:1/2; grid-row:3/4; justify-self:start; margin:-140px 0 0 30px; box-shadow:0 0 20px black} .text03b {grid-column:2/3; grid-row:3/4; margin:20px 80px 0 0; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka04a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka04b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-90px 30px 0 0; box-shadow:0 0 20px black} .text04b {grid-column:1/2; grid-row:3/4; margin:40px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka05a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka05b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-110px 30px 0 0; box-shadow:0 0 20px black} .text05b {grid-column:1/2; grid-row:3/4; margin:20px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka06a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka06b {grid-column:1/2; grid-row:3/4; justify-self:start; margin:-120px 0 0 30px; box-shadow:0 0 20px black} .text06b {grid-column:2/3; grid-row:3/4; margin:20px 80px 0 0; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka07a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka07b {grid-column:1/2; grid-row:3/4; justify-self:start; margin:-210px 0 0 30px; box-shadow:0 0 20px black} .text07b {grid-column:2/3; grid-row:3/4; margin:20px 80px 0 0; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka08a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka08b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-150px 30px 0 0; box-shadow:0 0 20px black} .text08b {grid-column:1/2; grid-row:3/4; margin:20px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka09a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka09b {grid-column:2/3; grid-row:3/4; justify-self:end; margin:-140px 30px 0 0; box-shadow:0 0 20px black} .text09b {grid-column:1/2; grid-row:3/4; margin:20px 0 0 80px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka10a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka10b {grid-column:1/2; grid-row:3/4; justify-self:start; margin:-135px 0 0 30px; box-shadow:0 0 20px black} .text10b {grid-column:2/3; grid-row:3/4; margin:20px 80px 0 30px; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} .talovka11a {grid-column:1/-1; margin:0 5px 0; box-shadow:0 0 20px black} .talovka11b {grid-column:1/2; grid-row:3/4; justify-self:start; margin:-170px 0 0 30px; box-shadow:0 0 20px black} .text11b {grid-column:2/3; grid-row:3/4; margin:20px 80px 0 0; color:#2B431F; font-size:18px; text-indent:40px; text-align:justify} @media (max-width:1240px) { #header-title > img {width:100%} #menu {margin:10px 0 0 10px} .menu-fauna > img, .menu-albums > img, .menu-materials > img {max-width:100%} #info {margin:10px 10px 0 0} .info-img > img {max-width:100%} .info-text {text-align:left} #slider-btn {margin:10px auto 0} #slider {margin:5px auto 0} /*кордон таловка*/ #title-main-talovka > img {width:100%} #title-talovka > img {width:100%} .container img {max-width:100%} .container img {max-width:100%} .container > :nth-child(1) {box-shadow:0 0 5px black} .container > :nth-child(2) {margin:5px; box-shadow:0 0 5px black} .container > :nth-child(3) {margin:0 15px 0} } @media (max-width:1080px) { #header-title {margin:70px 5px 0} } @media (max-width:640px) { #grid-mainpage {grid-template-columns:1fr} #menu {margin:10px 0 0} #info {margin:10px 0 0; border-radius:0} .info-title {font-size:24px} /*кордон таловка*/ #title-talovka {margin-left:5px} #title-talovka > img {width:70%} #autor {margin:20px 0 0 10px; font-size:14px} .container {margin-top:20px} .container > :nth-child(2) {width:90%} .container > :nth-child(3) {margin:5px; font-size:14px; text-align:left; text-indent:15px} }