Установка мода

.left {float: left;} .right {float: right;}

.zarukolasxrnsa {

   display: block;
   margin: 0 auto;
   height: auto;
   min-height: 100%;
   width: 100%;
   max-width: 1200px;
   background: #FFF;
   transition: 0.3s ease;

}

.kasuseteza-kigezolan {

   display: block;
   position: relative;
   height: auto;
   padding: 50px 0 30px;
   width: 85%;
   margin: 0 auto;

}

.kantengebsa {

   display: block;
   position: relative;
   height: 550px;
   width: 100%;
   margin: 0 auto;
   overflow: hidden;

}

.hidden-input {display: none;}

  1. zornetas1:checked ~ #perazim-derdnum1 {margin-left: 0;}
  2. zornetas1:checked ~ #perazim-derdnum2 {margin-left: 100%;}
  3. zornetas1:checked ~ #perazim-derdnum3 {margin-left: 200%;}
  4. zornetas1:checked ~ #perazim-derdnum4 {margin-left: 300%;}
  5. zornetas1:checked ~ #perazim-derdnum5 {margin-left: 400%;}
  6. zornetas1:checked ~ #perazim-derdnum6 {margin-left: 500%;}
  7. zornetas1:checked ~ #perazim-derdnum7 {margin-left: 600%;}
  8. zornetas1:checked ~ #perazim-derdnum8 {margin-left: 700%;}
  9. zornetas1:checked ~ #perazim-derdnum9 {margin-left: 800%;}
  10. zornetas1:checked ~ #perazim-derdnum10 {margin-left: 900%;}



  1. zornetas2:checked ~ #perazim-derdnum1 {margin-left: -100%;}
  2. zornetas2:checked ~ #perazim-derdnum2 {margin-left: 0;}
  3. zornetas2:checked ~ #perazim-derdnum3 {margin-left: 100%;}
  4. zornetas2:checked ~ #perazim-derdnum4 {margin-left: 200%;}
  5. zornetas2:checked ~ #perazim-derdnum5 {margin-left: 300%;}
  6. zornetas2:checked ~ #perazim-derdnum6 {margin-left: 400%;}
  7. zornetas2:checked ~ #perazim-derdnum7 {margin-left: 500%;}
  8. zornetas2:checked ~ #perazim-derdnum8 {margin-left: 600%;}
  9. zornetas2:checked ~ #perazim-derdnum9 {margin-left: 700%;}
  10. zornetas2:checked ~ #perazim-derdnum10 {margin-left: 800%;}
  1. zornetas3:checked ~ #perazim-derdnum1 {margin-left: -200%}
  2. zornetas3:checked ~ #perazim-derdnum2 {margin-left: -100%;}
  3. zornetas3:checked ~ #perazim-derdnum3 {margin-left: 0;}
  4. zornetas3:checked ~ #perazim-derdnum4 {margin-left: 100%;}
  5. zornetas3:checked ~ #perazim-derdnum5 {margin-left: 200%;}
  6. zornetas3:checked ~ #perazim-derdnum6 {margin-left: 300%;}
  7. zornetas3:checked ~ #perazim-derdnum7 {margin-left: 400%;}
  8. zornetas3:checked ~ #perazim-derdnum8 {margin-left: 500%;}
  9. zornetas3:checked ~ #perazim-derdnum9 {margin-left: 600%;}
  10. zornetas3:checked ~ #perazim-derdnum10 {margin-left: 700%;}


  1. zornetas4:checked ~ #perazim-derdnum1 {margin-left: -300%;}
  2. zornetas4:checked ~ #perazim-derdnum2 {margin-left: -200%;}
  3. zornetas4:checked ~ #perazim-derdnum3 {margin-left: -100%;}
  4. zornetas4:checked ~ #perazim-derdnum4 {margin-left: 0;}
  5. zornetas4:checked ~ #perazim-derdnum5 {margin-left: 100%;}
  6. zornetas4:checked ~ #perazim-derdnum6 {margin-left: 200%;}
  7. zornetas4:checked ~ #perazim-derdnum7 {margin-left: 300%;}
  8. zornetas4:checked ~ #perazim-derdnum8 {margin-left: 400%;}
  9. zornetas4:checked ~ #perazim-derdnum9 {margin-left: 500%;}
  10. zornetas4:checked ~ #perazim-derdnum10 {margin-left: 600%;}


  1. zornetas5:checked ~ #perazim-derdnum1 {margin-left: -400%;}
  2. zornetas5:checked ~ #perazim-derdnum2 {margin-left: -300%;}
  3. zornetas5:checked ~ #perazim-derdnum3 {margin-left: -200%;}
  4. zornetas5:checked ~ #perazim-derdnum4 {margin-left: -100%;}
  5. zornetas5:checked ~ #perazim-derdnum5 {margin-left: 0;}
  6. zornetas5:checked ~ #perazim-derdnum6 {margin-left: 100%;}
  7. zornetas5:checked ~ #perazim-derdnum7 {margin-left: 200%;}
  8. zornetas5:checked ~ #perazim-derdnum8 {margin-left: 300%;}
  9. zornetas5:checked ~ #perazim-derdnum9 {margin-left: 400%;}
  10. zornetas5:checked ~ #perazim-derdnum10 {margin-left: 500%;}


  1. zornetas6:checked ~ #perazim-derdnum1 {margin-left: -500%;}
  2. zornetas6:checked ~ #perazim-derdnum2 {margin-left: -400%;}
  3. zornetas6:checked ~ #perazim-derdnum3 {margin-left: -300%;}
  4. zornetas6:checked ~ #perazim-derdnum4 {margin-left: -200%;}
  5. zornetas6:checked ~ #perazim-derdnum5 {margin-left: -100%;}
  6. zornetas6:checked ~ #perazim-derdnum6 {margin-left: 0;}
  7. zornetas6:checked ~ #perazim-derdnum7 {margin-left: 100%;}
  8. zornetas6:checked ~ #perazim-derdnum8 {margin-left: 200%;}
  9. zornetas6:checked ~ #perazim-derdnum9 {margin-left: 300%;}
  10. zornetas6:checked ~ #perazim-derdnum10 {margin-left: 400%;}


  1. zornetas7:checked ~ #perazim-derdnum1 {margin-left: -600%;}
  2. zornetas7:checked ~ #perazim-derdnum2 {margin-left: -500%;}
  3. zornetas7:checked ~ #perazim-derdnum3 {margin-left: -400%;}
  4. zornetas7:checked ~ #perazim-derdnum4 {margin-left: -300%;}
  5. zornetas7:checked ~ #perazim-derdnum5 {margin-left: -200%;}
  6. zornetas7:checked ~ #perazim-derdnum6 {margin-left: -100%;}
  7. zornetas7:checked ~ #perazim-derdnum7 {margin-left: 0;}
  8. zornetas7:checked ~ #perazim-derdnum8 {margin-left: 100%;}
  9. zornetas7:checked ~ #perazim-derdnum9 {margin-left: 200%;}
  10. zornetas7:checked ~ #perazim-derdnum10 {margin-left: 300%;}


  1. zornetas8:checked ~ #perazim-derdnum1 {margin-left: -700%;}
  2. zornetas8:checked ~ #perazim-derdnum2 {margin-left: -600%;}
  3. zornetas8:checked ~ #perazim-derdnum3 {margin-left: -500%;}
  4. zornetas8:checked ~ #perazim-derdnum4 {margin-left: -400%;}
  5. zornetas8:checked ~ #perazim-derdnum5 {margin-left: -300%;}
  6. zornetas8:checked ~ #perazim-derdnum6 {margin-left: -200%;}
  7. zornetas8:checked ~ #perazim-derdnum7 {margin-left: -100%;}
  8. zornetas8:checked ~ #perazim-derdnum8 {margin-left: 0;}
  9. zornetas8:checked ~ #perazim-derdnum9 {margin-left: 100%;}
  10. zornetas8:checked ~ #perazim-derdnum10 {margin-left: 200%;}


  1. zornetas9:checked ~ #perazim-derdnum1 {margin-left: -800%;}
  2. zornetas9:checked ~ #perazim-derdnum2 {margin-left: -700%;}
  3. zornetas9:checked ~ #perazim-derdnum3 {margin-left: -600%;}
  4. zornetas9:checked ~ #perazim-derdnum4 {margin-left: -500%;}
  5. zornetas9:checked ~ #perazim-derdnum5 {margin-left: -400%;}
  6. zornetas9:checked ~ #perazim-derdnum6 {margin-left: -300%;}
  7. zornetas9:checked ~ #perazim-derdnum7 {margin-left: -200%;}
  8. zornetas9:checked ~ #perazim-derdnum8 {margin-left: -100%;}
  9. zornetas9:checked ~ #perazim-derdnum9 {margin-left: 0;}
  10. zornetas9:checked ~ #perazim-derdnum10 {margin-left: 100%;}
  1. zornetas10:checked ~ #perazim-derdnum1 {margin-left: -900%;}
  2. zornetas10:checked ~ #perazim-derdnum2 {margin-left: -800%;}
  3. zornetas10:checked ~ #perazim-derdnum3 {margin-left: -700%;}
  4. zornetas10:checked ~ #perazim-derdnum4 {margin-left: -600%;}
  5. zornetas10:checked ~ #perazim-derdnum5 {margin-left: -500%;}
  6. zornetas10:checked ~ #perazim-derdnum6 {margin-left: -400%;}
  7. zornetas10:checked ~ #perazim-derdnum7 {margin-left: -300%;}
  8. zornetas10:checked ~ #perazim-derdnum8 {margin-left: -200%;}
  9. zornetas10:checked ~ #perazim-derdnum9 {margin-left: -100%;}
  10. zornetas10:checked ~ #perazim-derdnum10 {margin-left: 0;}



.losaznu-tikartev {

   display: inline-block;
   position: absolute;
   left: 0;
   height: 90%;
   margin: 0 auto;
   width: 100%;
   max-width: 1200px;
   background-size: cover !important;
   background-position: center !important;
   transition: 0.6s ease-in-out;

}

  1. perazim-derdnum1{background: img_container_about;}
  2. perazim-derdnum2{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_02.png");}
  3. perazim-derdnum3{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_03.png");}
  4. perazim-derdnum4{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_04.png");}
  5. perazim-derdnum5{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_05.png");}
  6. perazim-derdnum6{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_06.png");}
  7. perazim-derdnum7{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_07.png");}
  8. perazim-derdnum8{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_08.png");}
  9. perazim-derdnum9{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_09.png");}
  10. perazim-derdnum10{background: url("http://dna.su.kg/resources/AboutCombo/Main_Combo_10.png");}

.kantengebsa-label {

   position: relative;
   height: 100%;
   width: 22%;
   transition: 0.3s ease;
   background: rgba(255,255,255,0.65);
   opacity: 0;
   background-repeat: no-repeat;
   background-size: 69% 35%;
   background-position: center;

} .kantengebsa-label:hover {opacity: 1;}

}

.kantengebsa-button {

   display: inline-block;
   position: relative;
   height: 100%;
   width: 8%;
   margin: 0 1%;
   background: rgba(35, 52, 101, 0.8);
   transition: 0.3s ease;
   cursor: pointer;

} .kantengebsa-button::before {

   content: ;
   display: inline-block;
   position: absolute;
   height: 90%; 
   width: 90%;
   left: 50%;
   border: 1px solid black;
   transform: translate(-50%, -14%);
   opacity: 0;
   transition: 0.2s ease;

} .kantengebsa-button:hover {background: rgba(20,20,20,0.8);} .kantengebsa-button:hover::before {opacity: 1; height: 130%; width: 110%;}

@media only screen and (max-width: 750px) {

   .kantengebsa-button {margin: 0 0.5%}
   .kantengebsa {width: 100%; padding-bottom: 84%; height: 0;}

}

@media only screen and (max-width: 650px) {

   .kasuseteza-kigezolan::before {bottom: 12%;}

}

@media only screen and (max-width: 550px) {

   .kasuseteza-kigezolan::before {bottom: 13%;}

}

@media only screen and (max-width: 450px) {

   .kasuseteza-kigezolan::before {bottom: 14%;}

}