* { box-sizing: border-box; margin: 0px; padding: 0px; } @font-face { font-family: ‘mari’; src: url(‘bpg_arial_2009.ttf’); font-weight: normal; font-style: normal; } @font-face { font-family: ‘mari2’; src: url(‘bpg_mrgvlovani_caps_2010.ttf’); font-weight: normal; font-style: normal; } li { font-family: ‘mari’; } h3 { font-family: ‘mari2’; } a { font-family: ‘mari2’; } .block1 { width: 1200px; height: 300px; background: url(‘BANNER.jpg’); margin: auto; } .block2 { width: 1200px; background: url(‘Menu3.jpg’); margin: auto; } .block1-osno { width: 100%; background: url(‘BANNER-.png’) repeat-x; float: left; } .block2-osno { width: 100%; background: url(‘Menu3-gagrzeleba.jpg’) repeat-x; float: left; } .block3-osno { width: 100%; background: #d5bf90 repeat-x; float: left; } .menu { width: 1200px; height: 40px; background: url(‘Menu3.jpg’); list-style-type: none; } .menu li { float: left; margin: 0px 0px 0px 0px; } .menu li a { text-decoration: none; color: white; width: 150px; height: 30; display: block; padding-top: 10px; text-align: center; margin: 0px 50px 0 90px; font-weight: bold; } .menu li a:hover { background: url(‘menu-hover.jpg’); border: 1px; color: white; display: block; width: 150px; font-weight: bold; } * { box-sizing: border-box; } label[for] { cursor: pointer; } input[type=»checkbox»] { display: none; } body { background-color: #000; } .lightbox, .grid { width: 100%; position: fixed; top: 0; left: 0; } .lightbox { z-index: 1; min-height: 100%; overflow: auto; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform .5s ease-out; transition: transform .5s ease-out; } .lightbox img { position: fixed; top: 50%; left: 50%; max-width: 96%; max-height: 96%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } input[type=»checkbox»]:checked + .lightbox { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } input[type=»checkbox»]:checked ~ .grid { opacity: .125; } .grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; z-index: 0; height: 100%; padding: 16px; overflow: auto; background-color: #222; text-align: center; -webkit-transition: opacity .75s; transition: opacity .75s; } .grid .grid-item { display: inline-block; width: 25%; padding: 16px; opacity: .75; -webkit-transition: opacity .5s; transition: opacity .5s; } .grid .grid-item:hover { opacity: 1; } @media screen and (max-width: 1024px) { .grid .grid-item { width: 50%; } } @media screen and (max-width: 480px) { .grid .grid-item { width: 100%; } } .grid img { max-width: 100%; max-height: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }