.header-land{width:770px; height:350px; position:relative; background:url(/commercial/landing/land1.jpg) bottom; background-size:cover; background-repeat:no-repeat; clear: both;} .mobcapt{ margin-bottom: 5px; padding: 5px; background-color: #e8e8e8; text-align: center;} .header-land .overlay{position: absolute; bottom: 0px; height: 150px; width: 100%; background: linear-gradient(transparent, black);} .header-land .hl-title{width: 500px; padding: 10px; font-size: 20px; text-transform: uppercase; background-color: red; color: white; text-align: center; position: absolute; top: 10px; text-shadow: 1px 1px #040404; left: 10px;} .header-land-1{margin-top:0px; margin-bottom:20px; padding:5px;} .header-land-1 p{ font-size: 16px; line-height: 1.3;} .first-content1{width:770px; height:550px; position:relative; background:url(/commercial/landing/land2.jpg) bottom; background-size:contain; background-repeat:no-repeat; } .first-title{width:450px; position:absolute; right:0px; top:150px; } .first-title .first-title-1{padding: 5px; background-color: white; width: 350px; font-size: 18px} .first-title .first-title-2{padding: 5px; background-color: red; width: 400px; font-size: 16px; color:white;} .first-text{margin-top:20px; padding:5px;} .first-text p{ font-size: 16px; line-height: 1.3;} .land-gall-thumd{width:150px; float:left} .land-gall-thumd img{width:100%;} .grid-container { display: grid; grid-template-columns: auto auto auto; padding: 10px; } .grid-item { cursor:pointer; } .grid-item img{width:100%;} .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ z-index: 9999999; } /* Modal Content (image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; font-size: 16px; } /* Add Animation */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .baimatov{height:350px; background:url(/commercial/landing/01/azamat.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px; } .bai-title{ width: 400px; padding: 5px; position: absolute; bottom: 10px; left: 10px;} .bai-title-1{ padding: 5px; background-color: #ffffffcf; font-size: 20px;} .bai-title-2{ padding: 5px; background-color: red; color: white; font-size: 20px;} .baimatov-text {margin-bottom:20px; margin-top:20px; padding:5px;} .baimatov-text p{ font-size:16px; line-height:1.2} .baimatov-t .grid-item{height:150px; overflow:hidden;} .anjelika{height:350px; background:url(/commercial/landing/01/anj1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .iliyaz{height:350px; background:url(/commercial/landing/01/il1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .cholpon{height:350px; background:url(/commercial/landing/01/ch1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .jamilia{height:350px; background:url(/commercial/landing/01/jam1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .nurlan{height:350px; background:url(/commercial/landing/01/nur1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .gulnur{height:350px; background:url(/commercial/landing/01/gulnur1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .samara{height:350px; background:url(/commercial/landing/01/sam1.jpg) center; background-size:cover; background-repeat:no-repeat; margin-top:30px; position:relative;width:770px;} .l-left{position:absolute; left:15px; top:40%; color:white; cursor:pointer;} .l-right{position:absolute; right:15px; top:40%; color:white; cursor:pointer;} @media only screen and (max-width: 700px){ .modal-content { width: 100%; } #sharebutton{display:none;} .header-land {width: 100%; height: 250px;} .anjelika {width: 100%; height: 250px;} .samara {width: 100%; height: 250px;} .baimatov {width: 100%; height: 250px;} .iliyaz {width: 100%; height: 250px;} .cholpon {width: 100%; height: 250px;} .jamilia {width: 100%; height: 250px;} .nurlan {width: 100%; height: 250px;} .gulnur {width: 100%; height: 250px;} .grid-container { grid-template-columns: none;} .bai-title{left:5px; width:95%;} .bai-title-1 {font-size:15px;} .bai-title-2 {font-size:15px;} .header-land .hl-title { width: 250px;} .first-content1 { width: 100%; height: 250px;} .first-title{left:5px;} .first-title .first-title-1{ width: 250px; font-size: 16px;} .first-title .first-title-2{ font-size: 16px; width: 300px;} .baimatov-t .grid-item { height: auto;} }

Автор: Максат Орозумбетов