.content_object {}

#container_holder {
   position: relative;
   background-image: url('/amakskids/images/bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: calc(100vw * 2.427)
}

.image {
   position: absolute;
   width: 300px;
   height: 300px;
}

.text {
   position: absolute;
   width: 600px;
   height: 300px;
}

#image1 {
   top: 2%;
   left: 30%;
   background-image: url('/amakskids/images/logo.png');
   background-size: cover;
   width: 21vw;
   height: calc(21vw * 0.753);
   transform: translateX(-50%);
}

#image2 {
   top: 2%;
   left: 45%;
   background-image: url('/amakskids/images/calendar.png');
   background-size: cover;
   width: 6vw;
   height: calc(6vw * 1.09);
   transform: translateX(-50%);
}

#image3 {
   top: 6%;
   left: 45%;
   background-image: url('/amakskids/images/uchastniki.png');
   background-size: cover;
   width: 6vw;
   height: calc(6vw * 1.017);
   transform: translateX(-50%);
}

#image4 {
   top: 13%;
   left: 50%;
   background-image: url('/amakskids/images/molbert.png');
   background-size: cover;
   width: 8vw;
   height: calc(8vw * 1.06);
   transform: translateX(-50%);
}





#image5 {
   top: 19%;
   left: 35%;
   background-image: url('/amakskids/images/detroom.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.776);
   transform: translateX(-50%);
}

#image6 {
   top: 28%;
   left: 50%;
   background-image: url('/amakskids/images/masterclass.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.877);

}

#image7 {
   top: 37%;
   left: 35%;
   background-image: url('/amakskids/images/sport.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.877);
   transform: translateX(-50%);
}

#image8 {
   top: 46%;
   left: 50%;
   background-image: url('/amakskids/images/show.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.757);

}

#image9 {
   top: 54%;
   left: 35%;
   background-image: url('/amakskids/images/ploshadka.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.791);
   transform: translateX(-50%);
}

#image10 {
   top: 66%;
   left: 33%;
   background-image: url('/amakskids/images/amaksiki.png');
   background-size: cover;
   width: 27vw;
   height: calc(27vw * 0.719);
   transform: translateX(-50%);
}

#image11 {
   top: 89.3%;
   left: 57%;
   background-image: url('/amakskids/images/photo.png');
   background-size: cover;
   width: 28vw;
   height: calc(28vw * 0.743);

}

#text1 {
   top: 2%;
   left: 50%;
   text-align: left;

}

#text2 {
   top: 6%;
   left: 50%;
   text-align: left;

}

#text3 {
   top: 17%;
   left: 50%;
   text-align: center;
   font-size: 2em;
   transform: translateX(-50%);
}






#text4 {
   top: 21%;
   left: 55%;
   text-align: left;
}

#text5 {
   top: 30%;
   left: 22%;
   text-align: left;

}

#text6 {
   top: 40%;
   left: 60%;
   text-align: left;

}

#text7 {
   top: 50%;
   left: 24%;
   text-align: left;

}

#text8 {
   top: 57%;
   left: 55%;
   text-align: left;

}

#text9 {
   top: 64%;
   left: 50%;
   text-align: center;
   font-size: 2em;
   transform: translateX(-50%);
   color: white;
}

#text10 {
   top: 68%;
   left: 48%;
   text-align: left;
   color: white;
}

#text11 {
   top: 89%;
   left: 18%;
   text-align: left;
   color: #1E90FF;
   font-size: 1.1em;
}

#text12 {
   top: 90%;
   left: 22%;
   text-align: left;
   color: black;
}

.table1 {
   position: absolute;
   width: 45vw;
   top: 75%;
   left: 51%;
   transform: translateX(-50%);

   height: 23vw;
   overflow: auto;

}

.table1>table {
   width: 100%;
}

th {
   background-color: white;
   color: DodgerBlue;
   border-radius: 10px;
   padding: 10px;
   text-align: center;
}

td {
   color: white;
   border-bottom: 2px dashed white;
   padding: 10px;
   text-align: center;
}


.buttonplan {
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonplan:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}

.buttonbron1 {
   position: absolute;
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   top: 98.5%;
   left: 50%;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonbron1:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}

.buttonbron2 {
   position: absolute;
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   top: 59%;
   left: 63%;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonbron2:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}

.buttonbron3 {
   position: absolute;
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   top: 34%;
   left: 32%;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonbron3:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}

.buttonbron4 {
   position: absolute;
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   top: 41%;
   left: 65%;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonbron4:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}

.buttonbron5 {
   position: absolute;
   background-color: #1E90FF;
   border-radius: 20px;
   color: white;
   padding-top: 10px;
   padding-bottom: 5px;
   padding-left: 50px;
   padding-right: 50px;
   top: 51%;
   left: 32%;
   transform: translateX(-50%);
   text-decoration: none;
}

.buttonbron5:hover {
   color: white;
   /* Цвет текста остается белым при наведении */
}


@media(max-width:800px) {

   #container_holder {
      height: calc(100vw * 8.427);
   }

   .image {
      position: absolute;
      width: 300px;
      height: 300px;
   }

   .text {
      position: absolute;
      width: 250px;
      height: 300px;
   }

   #image1 {
      top: calc(2% - 10px);
      left: 50%;
      background-image: url('/amakskids/images/logo.png');
      background-size: cover;
      width: 21vw;
      height: calc(21vw * 0.753);
      transform: translateX(-50%);
   }

   #image2 {
      top: 4%;
      left: 23%;
      background-image: url('/amakskids/images/calendar.png');
      background-size: contain;
      width: 9vw;
      height: calc(9vw * 1.09);
      transform: translateX(-50%);
   }

   #image3 {
      top: 8%;
      left: 23%;
      background-image: url('/amakskids/images/uchastniki.png');
      background-size: cover;
      width: 9vw;
      height: calc(9vw * 1.017);
      transform: translateX(-50%);
   }

   #image4 {
      top: 13%;
      left: 50%;
      background-image: url('/amakskids/images/molbert.png');
      background-size: cover;
      width: 12vw;
      height: calc(12vw * 1.06);
      transform: translateX(-50%);
   }




   #image5 {
      top: 19%;
      left: 17%;
      background-image: url('/amakskids/images/detroom.png');
      background-size: cover;
      width: 20vw;
      height: calc(20vw * 0.776);
      transform: translateX(-50%);
   }

   #image6 {
      top: 25%;
      left: 69%;
      background-image: url('/amakskids/images/masterclass.png');
      background-size: cover;
      width: 20vw;
      height: calc(20vw * 0.877);
   }

   #image7 {
      top: 32%;
      left: 17%;
      background-image: url('/amakskids/images/sport.png');
      background-size: cover;
      width: 20vw;
      height: calc(20vw * 0.877);
      transform: translateX(-50%);
   }

   #image8 {
      top: 38%;
      left: 69%;
      background-image: url('/amakskids/images/show.png');
      background-size: cover;
      width: 20vw;
      height: calc(20vw * 0.757);

   }

   #image9 {
      top: 44%;
      left: 17%;
      background-image: url('/amakskids/images/ploshadka.png');
      background-size: cover;
      width: 20vw;
      height: calc(20vw * 0.791);
      transform: translateX(-50%);
   }

   #image10 {
      top: 53%;
      left: 50%;
      background-image: url('/amakskids/images/amaksiki.png');
      background-size: cover;
      width: 30vw;
      height: calc(30vw * 0.719);
      transform: translateX(-50%);
   }

   #image11 {
      top: 89.3%;
      left: 57%;
      background-image: url('/amakskids/images/photo.png');
      background-size: cover;
      width: 28vw;
      height: calc(28vw * 0.743);
      display: none;

   }

   .buttonbron1 {
      top: 98%;
      width: fit-content;
      left: 50%;
      white-space: nowrap;
   }

   .buttonbron2 {
      top: 48%;
      width: fit-content;
      left: 50%;
      white-space: nowrap;
   }

   .buttonbron3 {
      top: 29%;
      width: fit-content;
      left: 50%;
      white-space: nowrap;
   }

   .buttonbron4 {
      top: 35%;
      width: fit-content;
      left: 50%;
      white-space: nowrap;
   }

   .buttonbron5 {
      top: 41%;
      width: fit-content;
      left: 50%;
      white-space: nowrap;
   }

   #text1 {
      top: 4%;
      left: 31%;
      text-align: left;

   }

   #text2 {
      top: 8%;
      left: 31%;
      text-align: left;

   }

   #text3 {
      top: 15%;
      left: 50%;
      text-align: center;
      font-size: 1.3em;
      transform: translateX(-50%);
      width: 100%;
   }



   #text4 {
      top: 19%;
      left: 30%;
      text-align: left;
   }

   #text5 {
      top: 25%;
      left: 5%;
      text-align: left;

   }

   #text6 {
      top: 33%;
      left: 30%;
      text-align: left;

   }

   #text7 {
      top: 39%;
      left: 12%;
      text-align: left;

   }

   #text8 {
      top: 44%;
      left: 32%;
      text-align: left;

   }

   #text9 {
      top: 51%;
      left: 50%;
      text-align: center;
      font-size: 2em;
      transform: translateX(-50%);
      color: black;
   }

   #text10 {
      top: 56%;
      left: 10%;
      width: 90%;
      text-align: left;
      color: black;
   }

   #text11 {
      top: 87%;
      left: 25%;
      text-align: left;
      color: #1E90FF;
      font-size: 1.1em;
   }

   #text12 {
      top: 89%;
      left: 5%;
      text-align: left;
      color: black;
      width: 95%;
   }

   .table1 {
      position: absolute;
      width: 90%;
      top: 65%;
      left: 50%;
      height: 165vw;
      transform: translateX(-50%);
   }

   .table1>table td {
      padding-left: 10px !important;
      padding-right: 10px !important;
   }

   th {
      background-color: white;
      color: DodgerBlue;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
   }

   td {
      color: white;
      border-bottom: 2px dashed white;
      padding: 10px;
      text-align: center;
   }
}