* {
margin: 0 ;
padding: 0 ;
}

body {
background: #FFFFF0;   /* #FFFFF0 */
}

.butt {
display: none;
}

.navig {
font-size: 15px;
}

.img1{
border: 2px solid;
border-radius: 20px;
position: absolute;
margin-left : 290px;
}

.img2 {
border: 2px solid;
border-radius: 20px;
position: absolute;
margin-left : 310px;
margin-top : 10px;
}

h1 {
background: yellow;
width: 275px;
height: 20vh;
text-align: center;   /* Расположение именно текста */
font-weight:bold;
border: 2px solid;
border-bottom:0px;
margin-bottom:0px;     /* Внешние отступы объекта */
border-radius: 0px 20px 0px 0px;
position: absolute;
}

h5 {
background: yellow;
width: 275px;
text-align: center;
font-size:16px;             /* Размер именно текста */
font-weight:bold;
border-left: 2px solid;
border-right:2px solid;
margin-bottom:0px;
position: absolute;
margin-top : 50px;
}


ul {
list-style: none;
background: yellow;
width: 275px;
height: 100 % ;
text-align: justify;
font-size:20px;
font-weight:bold;
line-height: 40px;   /* Растояние между линиями текста */
border: 2px solid;
border-top:0px;
border-radius: 0px 0px 20px 0px;
padding-top:30px;
position: absolute;
margin-top : 69px;

}

.links {
color: black;
text-decoration: none; /* чтобы не подчёркивалось */
}

.linksite {
color: #008080;
}

.links:hover  {    /* При наведении hover */
color: #FFFFF0;
cursor: pointer;   /* Изменение курсора на активный */
}

.badge {
position: absolute;
margin-top : 770px;
margin-left : 290px;
margin-bottom: 10px;
font-size:30px;
white-space: normal;
}

ol {
background: #9ACD32;  /*  #FF8C00;  */
width: 400px;
height: 34vh;
line-height: 35px;
font-weight:bold;
font-size:16px;
border-radius: 20px;
border: 2px solid;
position: absolute;
margin-top : 477px;
margin-left : 290px;
}

.imgkey {
padding-left: 65px;
padding-bottom: 30px;
}

.imgphone{
padding: 30px 0px 10px 0px ;
padding-bottom:;
}

.teltext {
font-size:30px;
padding-top: 30px;
}

.docum {
padding: 10px;
background: #9ACD32;
margin: 20px 20px 20px 20px ;
width: 420px;
height: 34vh;
line-height: 35px;
font-weight:bold;
font-size:18px;
border-radius: 20px;
border: 2px solid;
position: absolute;
margin-top : 477px;
margin-left : 740px;
}

.opendoor1 {
padding: 10px;
background: #9ACD32;   /* желто-зеленым */
margin: 20px 20px 20px 20px ;
width: 500px;
height: auto;
line-height: 25px;
font-weight:bold;
font-size:18px;
border-radius: 20px;
border: 2px solid;
position: absolute;
margin-top : 440px;
margin-left : 310px;
}

.mainend  {
padding: 20px;
background: #333;
margin: 20px 0px 20px 20px ;
width: 12%;
height: 35vh;
line-height: 45px;
font-weight:bold;
font-size:25px;
border-radius: 20px;
border: 2px solid;
text-align: center;
color: #FFFFF0;
position: absolute;
margin-top : 477px;
margin-left : 1205px;
}

.opendoor2 {
border-radius: 20px;
border: 2px solid;
padding: 25px;
background: #333;
position: absolute;
margin-top : 10px;
margin-left : 850px;
color: #FFFFF0;
line-height: 30px;
font-size:30px;
width: 514px;
height: auto;
font-weight:bold;
}

.opendoor3 {
border-radius: 20px;
border: 2px solid;
padding: 25px;
position: absolute;
margin-top : 250px;
margin-left : 850px;
color:  #333;
line-height: 20px;
font-size:20px;
width: 514px;
height: 40 vh;
font-weight:bold;
}

.opendoor4 {
background: #CCCCFF; 	/* Васильковый #6495ED; */
border-radius: 20px;
border: 2px solid;
padding: 15px;
position: absolute;
margin-top : 590px;
margin-left : 310px;
color:  #333;
line-height: 20px;
font-size:15px;
width: 500px;
height:  15vh;
font-weight:bold;
}

.opendoor5 {
border-radius: 20px;
border: 2px solid;
padding: 25px;
position: absolute;
margin-top : 510px;
margin-left : 850px;
color:  #333;
line-height: 20px;
font-size:20px;
width: 514px;
height: 40 vh;
font-weight:bold;
}

.lock1 {
border-radius: 20px;
border: 2px solid;
padding: 25px;
position: absolute;
margin-top : 0px;
margin-left : 910px;
color:  #333;
line-height: 25px;
font-size:20px;
width: 450px;
height: 40 vh;
font-weight:bold;
}

.lock2 {
border-radius: 20px;
border: 2px solid;
padding: 20px;
background: #333;
position: absolute;
margin-top : 580px;
margin-left : 290px;
color: #FFFFF0;
line-height: 30px;
font-size:20px;
width: 600px;
height: auto;
font-weight:bold;
}

.lock3 {
background: #CCCCFF; 	/* Васильковый #6495ED; */
border-radius: 20px;
border: 2px solid;
padding: 25px;
position: absolute;
margin-top : 440px;
margin-left : 950px;
color:  #333;
line-height: 25px;
font-size:25px;
width: 400px;
height:  auto;
font-weight:bold;
}

.door1 {
position: absolute;
font-size: 20px;
margin-top : 550px;
margin-left : 314px;
width: 400px;
height:  auto;
border-radius: 20px;
border: 2px solid;
padding: 10px;
}

.door2 {
font-size: 20px;
position: absolute;
margin-top : 550px;
margin-left : 730px;
width: 400px;
height:  auto;
border-radius: 20px;
border: 2px solid;
padding: 10px;
}

.door3 {
font-size: 20px;
background: #333;
color: white;
position: absolute;
margin-top : 570px;
margin-left : 1160px;
width: 200px;
height:  auto;
border-radius: 20px;
border: 2px solid;
padding: 10px;
}

.water1 , .window1 , .stick1 {
background: #CCCCFF;
border-radius: 20px;
border: 2px solid;
padding: 25px;
position: absolute;
margin-top : 10px;
margin-left : 1070px;
color:  #333;
line-height: 20px;
font-size:20px;
width: 300px;
height: auto;
font-weight:bold;
}

.water2 ,.window2 , .stick2 {
background: #9ACD32; 	/* Васильковый #6495ED; #CCCCFF; */
border-radius: 20px;
border: 2px solid;
padding: 15px;
position: absolute;
margin-top : 590px;
margin-left : 420px;
color:  #333;
line-height: 20px;
font-size:15px;
width: 500px;
height:  15vh;
font-weight:bold;
}

.water3 , .window3 , .stick3 {
padding: 20px;
background: #333;
margin: 20px 0px 20px 20px ;
width: 12%;
height: 35vh;
line-height: 45px;
font-weight:bold;
font-size:25px;
border-radius: 20px;
border: 2px solid;
text-align: center;
color: #FFFFF0;
position: absolute;
margin-top : 457px;
margin-left : 1140px;
}

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

.butt {
float : left;
display: inline-block;
position:static;
margin-top: 20px;
width: 96%;
margin-left:2%;
height: 7vh;
border-radius: 20px 20px 20px 20px;
text-decoration: none;
background-color: #6495ED;

}
.butt:hover {background-color: yellow}

.butt:active {
  background-color:#6495ED;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.img1 , .img2 {
position: static;
max-width: 96%;
float:left;
margin-top: 770px;
margin-left: 2%;
}

h1 {
background: yellow;
width: 100%;
height: 10%;
text-align: center;   /* Расположение именно текста */
font-weight:bold;
border: 2px solid;
border-bottom:0px;
margin-bottom:0px;     /* Внешние отступы объекта */
position: absolute;
border-radius: 0px 0px 0px 0px;
}

h5 {
width: 100%;
text-align: center;
margin-bottom:0px;
position: absolute;
margin-top : 50px;
}

ul {
width: 100%;
height: 100 % ;
text-align: center;
position: absolute;
font-size: 35px;
line-height: 45px;
margin-top : 69px;
padding-left: 0px;
border-radius: 0px 0px 20px 20px;
}
  
.imgkey {
display: none;
}

ol {
width: 96%;
height: auto;
position: static;
float: left;
margin-top : 10px;
margin-left: 2%;
margin-bottom: 10px;
}


.opendoor1 , .opendoor2 , .opendoor3 , .opendoor4 , .opendoor5 , .lock1 , .lock2 , .lock3 , .door1 ,.door2,.door3,
 .water1 , .water2 , .water3 , .window1 , .window2 , .window3 ,.stick1 , .stick2 , .stick3,
 .mainend, .docum , .badge  {
width: 96%;
height: auto;
position: static;
float: left;
margin-top : 20px;
margin-left : 2%;
}

}

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

.butt {
float : left;
display: inline-block;
position:static;
margin-top: 20px;
width: 100%;
height: 7vh;
border-radius: 20px 20px 20px 20px;
text-decoration: none;
background-color: #6495ED;
  }
h1 {
float:left;
background: yellow;
width: 100%;
height: 10%;
text-align: center;   /* Расположение именно текста */
font-weight:bold;
border: 2px solid;
border-bottom:0px;
margin:0px;     /* Внешние отступы объекта */
position: static;
border-radius: 0px 0px 0px 0px;
  }
  
  h5 {
    float:left;
width: 100%;      
position: static; 
text-align: center;
margin-bottom:0px;
margin: 0px;
}

ul {
width: 100%;
height: 100 % ;
text-align: center;
position: static;
margin: 0px;
padding-left: 0px;
border-radius: 0px 0px 20px 20px;
}
  
.img1 , .img2 {
position: static;
max-width: 100%;
float:left;
margin-top: 10px;
margin-left: 0px;
}