/* -- Стили для верхней картинки -- */

.top_image {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    height: 790px;

    display: grid;
    grid-template-columns: 1fr minmax(360px, 1140px) 1fr;
    grid-template-rows: auto 6px auto;

    background-color: #ffffff;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top_image > h1 {
    grid-column: 2/3;
    grid-row: 1/2;

    justify-self: start;
    align-self: end;

    margin-bottom: 20px;
    margin-left: 80px;
}

.top_image > hr {
    grid-column: 2/3;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: center;

    height: 6px;
    width: 500px;

    border-width: 0;
    background-color: #ffffff;

    margin-left: 80px;
}

.top_image > p {
    grid-column: 2/3;
    grid-row: 3/4;

    justify-self: start;
    align-self: start;

    font-family: "aquarelle_regular_amd", sans-serif;
    text-align: center;
    font-size: 5em;
    line-height: 1.25;
    color: #ffffff;

    margin-top: 10px;
    margin-left: 80px;
}



/* -- Стили для обертки -- */

.main_wrapper {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: 1fr minmax(360px, 1140px) 1fr;
}

main {
    grid-column: 2/3;
    grid-row: 1/2;

    justify-self: center;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(4, auto);
}



/* -- Стили для первой секции -- */

.about_us {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    grid-template-rows: 60px 1fr 60px;

    margin: 80px 80px;
}

.about_us_img {
    grid-column: 1/3;
    grid-row: 1/4;

    justify-self: stretch;
    align-self: center;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 440px;
    height: 554px;

    border: solid 10px rgba(0, 0, 0, 0.2);
    border-image: linear-gradient(to top, rgba(252, 95, 69, 0.6) 0%, rgba(209, 209, 209, 0.9) 100%);
    border-image-slice: 1;
}

.about_us_info_cut {
    grid-column: 2/4;
    grid-row: 2/3;

    justify-self: start;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, min-content);

    padding: 0 80px;

    z-index: 1;

    background-color: #ffffff;

    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, var(--line_first_color) 25%, var(--line_second_color) 25%, var(--line_second_color) 50%, var(--line_third_color) 50%, var(--line_third_color) 75%, var(--line_fourth_color) 75%);
    border-image-slice: 4;
}

.about_us_info_cut > h2 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;
    align-self: start;

    margin-top: 30px;
    margin-bottom: 30px;
}

.about_us_info_cut > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: center;
    align-self: start;

    line-height: 1.5;
    text-align: justify;

    margin-bottom: 30px;
}

.about_us_info_cut > p > span {
    display: none;
}

.about_us_info_cut > a {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: end;
    align-self: start;

    font-size: 1.3em;

    padding: 10px 30px;

    border-bottom: 3px solid var(--border_bottom_color);
}

.about_us_info_cut > a:hover {
    border-bottom: 3px solid var(--line_first_color);
}



/* -- Стили для второй секции -- */

.our_dogs {
     grid-column: 1/2;
     grid-row: 2/3;

     justify-self: center;
     align-self: stretch;

     display: grid;
     grid-template-columns: repeat(1, auto);
     grid-template-rows: repeat(3, min-content);
     grid-row-gap: 20px;

     margin: 80px 80px;
 }

.our_dogs > h2 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 30px;
}

.our_dogs > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 50px;
}

.our_dogs_wrapper {
    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, min-content);
    grid-row-gap: 20px;

    position: relative;
}

.our_dogs_wrapper_1 {
    grid-column: 1/2;
    grid-row: 3/4;
}

.our_dogs_wrapper_2 {
    grid-column: 1/2;
    grid-row: 4/5;
}

.our_dogs_wrapper > input {
    display: none;
}

.our_dogs_wrapper > label {
    justify-self: stretch;
    align-self: stretch;

    padding: 20px 30px;

    text-align: center;

    opacity: 1;

    cursor: pointer;

    color: #000000;
}

.our_dogs_wrapper > label:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 1/2;

    background-color: var(--line_first_color);
}

.our_dogs_wrapper > label:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/2;

    background-color: var(--line_second_color);
}

.our_dogs_wrapper > label:nth-of-type(3) {
    grid-column: 3/4;
    grid-row: 1/2;

    background-color: var(--line_third_color);
}

.our_dogs_wrapper > label:nth-of-type(4) {
    grid-column: 4/5;
    grid-row: 1/2;

    background-color: var(--line_fourth_color);
}

.our_dogs_wrapper > label:hover {
    color: #000000;

    opacity: 0.8;
}

.our_dogs_wrapper_2 > label:nth-of-type(2):hover,
.our_dogs_wrapper_2 > label:nth-of-type(3):hover,
.our_dogs_wrapper_2 > label:nth-of-type(4):hover {
    opacity: 0.5;
}

.our_dogs_item {
    grid-column: 1/5;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    display: none;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 20px;
    grid-row-gap: 20px;

    position: absolute;

    opacity: 1;
    visibility: hidden;
    z-index: 0;
}

.our_dogs_item > .our_dogs_avatar {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;
    align-self: stretch;

    width: 245px;
    height: 327px;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.our_dogs_item > .our_dogs_info {
    grid-column: 2/3;
    grid-row: 1/3;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto 200px auto 200px;
    grid-row-gap: 20px;
}

.our_dogs_item > .our_dogs_info > h3 {
    justify-self: center;
    align-self: center;

    text-align: center;
}

.our_dogs_item > .our_dogs_info > h3:nth-of-type(1) {
    grid-column: 1/2;
    grid-row: 1/2;
}

.our_dogs_item > .our_dogs_info > h3:nth-of-type(2) {
    grid-column: 1/2;
    grid-row: 3/4;
}

.our_dogs_info_text {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    overflow-y: auto;
}

.our_dogs_item > .our_dogs_info > .our_dogs_info_text > p {
    text-align: justify;

    text-indent: 2em;

    margin-right: 10px;
}

.our_dogs_item > .our_dogs_info > .our_dogs_titles {
    grid-column: 1/2;
    grid-row: 4/5;

    justify-self: stretch;
    align-self: stretch;

    overflow-y: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 5px;
}

.our_dogs_item > .our_dogs_info > .our_dogs_titles > p {
    justify-self: start;
    align-self: start;

    text-align: justify;

    margin-right: 10px;
}

.our_dogs_item > input {
    display: none;
}

.our_dogs_buttons_wrapper {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(2, min-content);
}

.our_dog_stand {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(1, min-content);
    grid-column-gap: 10px;

    padding: 9px 0;

    cursor: pointer;
}

.our_dog_stand > i {
    justify-self: end;
    align-self: center;
}

.our_dog_stand > p {
    justify-self: start;
    align-self: center;

    font-family: "gotham_amd", sans-serif;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.25;
    color: var(--text_color);
}

.our_dogs_gallery {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: center;

    font-family: "gotham_amd", sans-serif;
    text-align: center;
    font-size: 1.25em;
    line-height: 1.25;
    color: var(--text_color);

    padding: 9px 0;
}

.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_1_stand:hover > i,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_5_stand:hover > i,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_1_stand:hover > p,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_5_stand:hover > p,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dogs_gallery_1:hover {
    color: var(--line_first_color);
}

.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_2_stand:hover > i,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_2_stand:hover > p,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dogs_gallery_2:hover {
    color: var(--line_second_color);
}

.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_3_stand:hover > i,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_3_stand:hover > p,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dogs_gallery_3:hover {
    color: var(--line_third_color);
}

.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_4_stand:hover > i,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dog_4_stand:hover > p,
.our_dogs_item > .our_dogs_buttons_wrapper > .our_dogs_gallery_4:hover {
    color: var(--line_fourth_color);
}

.our_dogs_wrapper > .our_dog_1:checked ~ .our_dog_button_1,
.our_dogs_wrapper > .our_dog_2:checked ~ .our_dog_button_2,
.our_dogs_wrapper > .our_dog_3:checked ~ .our_dog_button_3,
.our_dogs_wrapper > .our_dog_4:checked ~ .our_dog_button_4,
.our_dogs_wrapper > .our_dog_5:checked ~ .our_dog_button_1 {
    opacity: 1;
}

.our_dogs_wrapper > .our_dog_1:checked ~ .our_dogs_item_1,
.our_dogs_wrapper > .our_dog_2:checked ~ .our_dogs_item_2,
.our_dogs_wrapper > .our_dog_3:checked ~ .our_dogs_item_3,
.our_dogs_wrapper > .our_dog_4:checked ~ .our_dogs_item_4,
.our_dogs_wrapper > .our_dog_5:checked ~ .our_dogs_item_5,
.our_dogs_wrapper > .our_dog_6:checked ~ .our_dogs_item_5,
.our_dogs_wrapper > .our_dog_7:checked ~ .our_dogs_item_5,
.our_dogs_wrapper > .our_dog_8:checked ~ .our_dogs_item_5 {
    display: grid;
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.our_dogs_item > .our_dogs_stand_img {
    grid-column: 2/3;
    grid-row: 1/3;

    justify-self: stretch;
    align-self: stretch;

    width: 0;
    height: 510px;

    display: block;

    background-color: #ffffff;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 430px;

    transition: all 1s ease-in-out 0.2s;

    z-index: 1;
}

.our_dogs_item > .stand:checked ~ .our_dogs_stand_img {
    width: 715px;
}

.our_dogs_item > .stand:checked ~ .our_dog_1_stand > i,
.our_dogs_item > .stand:checked ~ .our_dog_5_stand > i,
.our_dogs_item > .stand:checked ~ .our_dog_1_stand > p,
.our_dogs_item > .stand:checked ~ .our_dog_5_stand > p{
    color: var(--line_first_color);
}

.our_dogs_item > .stand:checked ~ .our_dog_2_stand > i,
.our_dogs_item > .stand:checked ~ .our_dog_2_stand > p {
    color: var(--line_second_color);
}

.our_dogs_item > .stand:checked ~ .our_dog_3_stand > i,
.our_dogs_item > .stand:checked ~ .our_dog_3_stand > p {
    color: var(--line_third_color);
}

.our_dogs_item > .stand:checked ~ .our_dog_4_stand > i,
.our_dogs_item > .stand:checked ~ .our_dog_4_stand > p {
    color: var(--line_fourth_color);
}

.our_dogs_wrapper ::-webkit-scrollbar {
    width: 8px;
}

.our_dogs_wrapper ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.51);
    border-radius: 10px;
}

.our_dogs_wrapper ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(75, 75, 75, 0.5);
    border-radius: 10px;
}

.no_stand {
    visibility: hidden;
}



/* -- Стили для третьей секции -- */

.achievments {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: center;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, min-content);

    margin: 80px 80px;
}

.achievments > h2 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 30px;
}

.achievments > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 50px;
}

.achievments_wrapper {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: repeat(1, 800px);
    grid-column-gap: 20px;
}

.achievments_wrapper > input {
    display: none;
}

.achievments_list {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-auto-rows: min-content;

    overflow-y: auto;
}

.achievments_list > label {
    justify-self: stretch;
    align-self: center;

    margin-right: 10px;

    text-align: center;

    background-color: var(--line_fourth_color);

    padding: 20px 30px;

    opacity: 1.0;

    color: #000000;
}

.achievments_list > label:hover {
    opacity: 0.8;

    color: #000000;
}

.achievments_wrapper ::-webkit-scrollbar {
    width: 8px;
}

.achievments_wrapper ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.51);
    border-radius: 10px;
}

.achievments_wrapper ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(75, 75, 75, 0.5);
    border-radius: 10px;
}

.achievments_second_wrapper {
    grid-column: 2/3;
    grid-row: 1/2;

    justify-self: center;
    align-self: stretch;

    position: relative;
}

.achievments_second_wrapper > .achievments_item {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;
    align-self: stretch;

    display: none;
    grid-template-columns: repeat(1, min-content);
    grid-template-rows: repeat(2, auto);
    grid-row-gap: 20px;

    position: absolute;

    opacity: 0;
    visibility: hidden;
    z-index: 0;
}

.achievments_second_wrapper > .achievments_item > a {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;
    align-self: center;

    width: 760px;
    height: 608px;

    display: block;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.achievments_second_wrapper > .achievments_item > .achievments_info {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, auto);
    grid-row-gap: 20px;
}

.achievments_second_wrapper > .achievments_item > .achievments_info > p {
    overflow-y: auto;

    grid-column: 1/2;

    justify-self: stretch;
    align-self: stretch;

    text-align: justify;
}

.achievments_second_wrapper > .achievments_item > .achievments_info > ul {
    overflow-y: auto;

    column-count: 2;
}

.achievments_wrapper > .achievment_1:checked ~ .achievments_list > .achievment_button_1,
.achievments_wrapper > .achievment_2:checked ~ .achievments_list > .achievment_button_2,
.achievments_wrapper > .achievment_3:checked ~ .achievments_list > .achievment_button_3,
.achievments_wrapper > .achievment_4:checked ~ .achievments_list > .achievment_button_4,
.achievments_wrapper > .achievment_5:checked ~ .achievments_list > .achievment_button_5,
.achievments_wrapper > .achievment_6:checked ~ .achievments_list > .achievment_button_6,
.achievments_wrapper > .achievment_7:checked ~ .achievments_list > .achievment_button_7,
.achievments_wrapper > .achievment_8:checked ~ .achievments_list > .achievment_button_8,
.achievments_wrapper > .achievment_9:checked ~ .achievments_list > .achievment_button_9,
.achievments_wrapper > .achievment_10:checked ~ .achievments_list > .achievment_button_10,
.achievments_wrapper > .achievment_11:checked ~ .achievments_list > .achievment_button_11,
.achievments_wrapper > .achievment_12:checked ~ .achievments_list > .achievment_button_12,
.achievments_wrapper > .achievment_13:checked ~ .achievments_list > .achievment_button_13,
.achievments_wrapper > .achievment_14:checked ~ .achievments_list > .achievment_button_14,
.achievments_wrapper > .achievment_15:checked ~ .achievments_list > .achievment_button_15,
.achievments_wrapper > .achievment_16:checked ~ .achievments_list > .achievment_button_16,
.achievments_wrapper > .achievment_17:checked ~ .achievments_list > .achievment_button_17,
.achievments_wrapper > .achievment_18:checked ~ .achievments_list > .achievment_button_18,
.achievments_wrapper > .achievment_19:checked ~ .achievments_list > .achievment_button_19,
.achievments_wrapper > .achievment_20:checked ~ .achievments_list > .achievment_button_20,
.achievments_wrapper > .achievment_21:checked ~ .achievments_list > .achievment_button_21,
.achievments_wrapper > .achievment_22:checked ~ .achievments_list > .achievment_button_22,
.achievments_wrapper > .achievment_23:checked ~ .achievments_list > .achievment_button_23 {
    opacity: 1;

    color: var(--line_first_color);
}

.achievments_wrapper > .achievment_1:checked ~ .achievments_second_wrapper > .achievments_item_1,
.achievments_wrapper > .achievment_2:checked ~ .achievments_second_wrapper > .achievments_item_2,
.achievments_wrapper > .achievment_3:checked ~ .achievments_second_wrapper > .achievments_item_3,
.achievments_wrapper > .achievment_4:checked ~ .achievments_second_wrapper > .achievments_item_4,
.achievments_wrapper > .achievment_5:checked ~ .achievments_second_wrapper > .achievments_item_5,
.achievments_wrapper > .achievment_6:checked ~ .achievments_second_wrapper > .achievments_item_6,
.achievments_wrapper > .achievment_7:checked ~ .achievments_second_wrapper > .achievments_item_7,
.achievments_wrapper > .achievment_8:checked ~ .achievments_second_wrapper > .achievments_item_8,
.achievments_wrapper > .achievment_9:checked ~ .achievments_second_wrapper > .achievments_item_9,
.achievments_wrapper > .achievment_10:checked ~ .achievments_second_wrapper > .achievments_item_10,
.achievments_wrapper > .achievment_11:checked ~ .achievments_second_wrapper > .achievments_item_11,
.achievments_wrapper > .achievment_12:checked ~ .achievments_second_wrapper > .achievments_item_12,
.achievments_wrapper > .achievment_13:checked ~ .achievments_second_wrapper > .achievments_item_13,
.achievments_wrapper > .achievment_14:checked ~ .achievments_second_wrapper > .achievments_item_14,
.achievments_wrapper > .achievment_15:checked ~ .achievments_second_wrapper > .achievments_item_15,
.achievments_wrapper > .achievment_16:checked ~ .achievments_second_wrapper > .achievments_item_16,
.achievments_wrapper > .achievment_17:checked ~ .achievments_second_wrapper > .achievments_item_17,
.achievments_wrapper > .achievment_18:checked ~ .achievments_second_wrapper > .achievments_item_18,
.achievments_wrapper > .achievment_19:checked ~ .achievments_second_wrapper > .achievments_item_19,
.achievments_wrapper > .achievment_20:checked ~ .achievments_second_wrapper > .achievments_item_20,
.achievments_wrapper > .achievment_21:checked ~ .achievments_second_wrapper > .achievments_item_21,
.achievments_wrapper > .achievment_22:checked ~ .achievments_second_wrapper > .achievments_item_22,
.achievments_wrapper > .achievment_23:checked ~ .achievments_second_wrapper > .achievments_item_23 {
    display: grid;
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 1;
}



/* -- Стили для четвертой секции -- */

.puppies {
    grid-column: 1/2;
    grid-row: 4/5;

    justify-self: center;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(4, min-content);

    margin: 80px 80px;
}

.puppies > h2 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 30px;
}

.puppies > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 50px;
}

.puppies > input {
    display: none;
}

.puppies_wrapper {

}

.puppies_wrapper_1 {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);

    position: relative;

    margin-bottom: 50px;
}

.puppies_wrapper_2 {
    grid-column: 1/2;
    grid-row: 4/5;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, auto);

    margin-bottom: 50px;
}

.puppies_wrapper_3 {
    grid-column: 1/2;
    grid-row: 5/6;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, auto);

    margin-bottom: 50px;
}

.puppies_wrapper > label {
    text-align: center;

    padding: 10px 0;

    cursor: pointer;

    background-color: var(--line_fourth_color);

    opacity: 1.0;

    color: #000000;
}

.puppies_wrapper > label:hover {
    background-color: var(--line_fourth_color);

    opacity: 0.8;

    color: #000000;
}

.kids_1_rus_button {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;
}

.kids_1_eng_button {
    grid-column: 2/3;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;
}

.kids_1_banner {
    grid-column: 1/3;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    width: 980px;
    height: 614px;

    display: block;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: all 2s ease-in-out 0.5s;

    position: absolute;

    opacity: 0;
    visibility: hidden;
    z-index: 0;
}

.button_z {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: center;
    align-self: center;

    width: 980px;
    height: 39px;

    background-color: var(--line_fourth_color);

    display: block;
}

.kids_2_banner {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: center;
    align-self: center;

    width: 980px;
    height: 1260px;

    display: block;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: all 2s ease-in-out 0.5s;

    opacity: 1.0;
    z-index: 0;
}

.kids_3_banner {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: center;
    align-self: center;

    width: 980px;
    height: 1260px;

    display: block;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    transition: all 2s ease-in-out 0.5s;

    opacity: 1.0;
    z-index: 0;
}

.kids_links {
    grid-column: 1/3;
    grid-row: 3/4;

    justify-self: stretch;
    align-self: stretch;

    background-color: #1a1e20;

    display: grid;
    grid-template-columns: repeat(5, auto);
    grid-column-gap: 20px;

    padding: 0 40px;
}

.kids_links > a,
.kids_links > p {
    align-self: center;

    font-family: "impact", sans-serif;
    text-align: center;
    font-size: 1em;
    line-height: 1.25;
    color: #ffffff;

    padding: 10px;
}

.kids_links > a:hover,
.kids_links > p:hover {
    color: var(--line_first_color);
}

.kids_1_details {
    grid-column: 1/3;
    grid-row: 4/5;

    justify-self: stretch;
    align-self: stretch;

    text-align: center;

    padding: 15px 0;
}

.puppies > .kids_1_checkbox_rus:checked ~ .puppies_wrapper > .kids_1_banner_rus,
.puppies > .kids_1_checkbox_eng:checked ~ .puppies_wrapper > .kids_1_banner_eng {
    position: relative;

    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.puppies > .kids_1_checkbox_rus:checked ~ .puppies_wrapper > .kids_1_rus_button,
.puppies > .kids_1_checkbox_eng:checked ~ .puppies_wrapper > .kids_1_eng_button {
    color: var(--line_first_color);
    background-color: var(--line_fourth_color);

    opacity: 1;
}



/* -- Стили для пятой секции -- */

.section_5_wrapper {
    grid-column: 1/2;
    grid-row: 4/5;

    justify-self: stretch;
    align-self: stretch;

    display: grid;
    grid-template-columns: 1fr minmax(360px, 1140px) 1fr;

    background-color: #616161;
}

.useful_info {
    grid-column: 2/3;
    grid-row: 1/2;

    justify-self: center;
    align-self: stretch;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, min-content);

    padding: 80px 0;
}

.useful_info > h2 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 30px;

    color: #ffffff;
}

.useful_info > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: stretch;

    margin-bottom: 50px;

    color: #ffffff;
}

.useful_info_wrapper {
    grid-column: 1/2;
    grid-row: 3/4;

    justify-self: center;
    align-self: stretch;

    display: grid;
    grid-template-columns: 1fr repeat(3, 188px) 1fr;
    grid-template-rows: 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px 1fr 50px;

    max-width: 980px;
}

.useful_info_img {
    grid-column: 2/5;

    justify-self: center;
    align-self: stretch;

    width: 489px;
    height: 264px;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    border: 3px solid #ffffff;
    border-bottom: 0;

    box-sizing: border-box;
}

.useful_info_img:nth-of-type(1) {
    grid-row: 2/4;
}

.useful_info_img:nth-of-type(2) {
    grid-row: 4/6;
}

.useful_info_img:nth-of-type(3) {
    grid-row: 6/8;
}

.useful_info_img:nth-of-type(4) {
    grid-row: 8/10;
}

.useful_info_img:nth-of-type(5) {
    grid-row: 10/12;

    border-bottom: 3px solid #ffffff;
}

.useful_info_txt {
    align-self: stretch;

    display: grid;

    background-color: #ffffff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: 1px;
}

.useful_info_txt_wrapper {
    justify-self: center;
    align-self: center;

    /*width: 396px;*/
    height: 204px;

    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(2, min-content);

    margin: 30px 60px;

    box-sizing: border-box;

    overflow-y: auto;
}

.useful_info_txt:hover {
    opacity: 0.95;

    background-color: var(--overlay_color);
}

.useful_info_txt:nth-of-type(1) {
    grid-column: 1/3;
    grid-row: 1/3;

    justify-self: end;
}

.useful_info_txt:nth-of-type(2) {
    grid-column: 4/6;
    grid-row: 3/5;

    justify-self: start;
}

.useful_info_txt:nth-of-type(3) {
    grid-column: 1/3;
    grid-row: 5/7;

    justify-self: end;
}

.useful_info_txt:nth-of-type(4) {
    grid-column: 4/6;
    grid-row: 7/9;

    justify-self: start;
}

.useful_info_txt:nth-of-type(5) {
    grid-column: 1/3;
    grid-row: 9/11;

    justify-self: end;
}

.useful_info_txt > .useful_info_txt_wrapper > h3 {
    grid-column: 1/2;
    grid-row: 1/2;

    justify-self: stretch;
    align-self: start;

    text-align: center;

    margin-bottom: 20px;
    margin-right: 10px;
}

.useful_info_txt > .useful_info_txt_wrapper > p {
    grid-column: 1/2;
    grid-row: 2/3;

    justify-self: stretch;
    align-self: start;

    text-align: justify;

    margin-right: 10px;
}

.useful_info_txt > p:hover {
    color: var(--text_color);
}

.useful_info ::-webkit-scrollbar {
    width: 8px;
}

.useful_info ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.51);
    border-radius: 10px;
}

.useful_info ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(75, 75, 75, 0.5);
    border-radius: 10px;
}



/* -- Стили для мобильных устройств -- */
/* -- Extra small devices (portrait phones, less than 576px) -- */
@media (max-width: 575.98px) {
    /* -- Стили для верхней картинки -- */

    .top_image {
        display: none;
    }



    /* -- Стили для обертки -- */

    .main_wrapper {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
    }

    main {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(4, auto);
    }



    /* -- Стили для первой секции -- */

    .about_us {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, min-content);
        grid-row-gap: 20px;

        margin: 40px 20px;
    }

    .about_us_img {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: center;

        width: 300px;
        height: 378px;

        border: solid 10px rgba(0, 0, 0, 0.2);
    }

    .about_us_info_cut {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        padding: 0 40px;
    }

    .about_us_info_cut > h2 {
        margin-top: 20px;
        margin-bottom: 20px;

        font-size: 2.5em;
    }

    .about_us_info_cut > p {

    }

    .about_us_info_cut > a {
        justify-self: center;
        align-self: center;

        font-size: 1.3em;

        margin-bottom: 20px;
    }



    /* -- Стили для второй секции -- */

    .our_dogs {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 20px;
    }

    .our_dogs > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .our_dogs > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .our_dogs_wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, min-content);
        grid-row-gap: 3px;
        grid-column-gap: 3px;
    }

    .our_dogs_wrapper > label {
        justify-self: stretch;
        align-self: stretch;

        padding: 20px 30px;

        text-align: center;

        opacity: 0.5;

        cursor: pointer;
    }

    .our_dogs_wrapper > label:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 1/2;

        background-color: var(--line_first_color);
    }

    .our_dogs_wrapper > label:nth-of-type(2) {
        grid-column: 2/3;
        grid-row: 1/2;

        background-color: var(--line_second_color);
    }

    .our_dogs_wrapper > label:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 2/3;

        background-color: var(--line_third_color);
    }

    .our_dogs_wrapper > label:nth-of-type(4) {
        grid-column: 2/3;
        grid-row: 2/3;

        background-color: var(--line_fourth_color);
    }

    .our_dogs_item {
        grid-column: 1/3;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: none;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 20px;
        grid-row-gap: 20px;

        margin-top: 17px;
    }

    .our_dogs_item > .our_dogs_avatar {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: center;

        width: 320px;
        height: 427px;
    }

    .our_dogs_item > .our_dogs_info {
        grid-column: 1/2;
        grid-row: 2/3;

        grid-template-rows: 80px 200px 80px 200px;

        transition: all 1s ease-in-out 0.2s;

        visibility: visible;
        opacity: 1;
    }

    .our_dogs_item > .our_dogs_info > .our_dogs_titles {
        grid-column: 1/2;
        grid-row: 4/5;

        grid-row-gap: 10px;
    }

    .our_dogs_buttons_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .our_dogs_item > .our_dogs_stand_img {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: start;

        width: 320px;
        height: 0;

        background-position: center center;
        background-size: 320px;
    }

    .our_dogs_item > .stand:checked ~ .our_dogs_stand_img {
        height: 620px;
        width: 320px;
    }

    .our_dogs_item > .stand:checked ~ .our_dogs_info {
        visibility: hidden;
        opacity: 0;
    }



    /* -- Стили для третьей секции -- */

    .achievments {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 20px;
    }

    .achievments > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .achievments > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .achievments_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 234px auto;
        grid-column-gap: 0;
        grid-row-gap: 20px;
    }

    .achievments_list {
        grid-column: 1/2;
        grid-row: 1/2;
    }

    .achievments_second_wrapper {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .achievments_second_wrapper > .achievments_item {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: none;
        grid-template-columns: repeat(1, min-content);
        grid-template-rows: repeat(2, auto);
        grid-row-gap: 20px;
    }

    .achievments_second_wrapper > .achievments_item > a {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        width: 320px;
        height: 256px;
    }



    /* -- Стили для четвертой секции -- */

    .puppies {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 20px;
    }

    .puppies > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .puppies > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .puppies_wrapper {

    }

    .puppies_wrapper_1 {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .puppies_wrapper_2 {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .kids_1_banner {
        grid-column: 1/3;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        width: 320px;
        height: 214px;
    }

    .button_z {
        width: 320px;
    }

    .kids_2_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 320px;
        height: 411px;
    }

    .kids_3_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 320px;
        height: 411px;
    }

    .kids_links {
        display: none;
    }



    /* -- Стили для пятой секции -- */

    .section_5_wrapper {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: 1fr minmax(360px, 1140px) 1fr;

        background-color: #616161;
    }

    .useful_info {
        grid-column: 2/3;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        padding: 0;
        margin: 40px 20px;
    }

    .useful_info > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;

        font-size: 2.5em;
    }

    .useful_info > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;
    }

    .useful_info_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;

        max-width: 980px;
    }

    .useful_info_img {
        grid-column: 1/2;

        justify-self: center;
        align-self: stretch;

        width: 320px;
        height: 173px;
    }

    .useful_info_img:nth-of-type(1) {
        grid-row: 1/2;
    }

    .useful_info_img:nth-of-type(2) {
        grid-row: 3/4;
    }

    .useful_info_img:nth-of-type(3) {
        grid-row: 5/6;
    }

    .useful_info_img:nth-of-type(4) {
        grid-row: 7/8;
    }

    .useful_info_img:nth-of-type(5) {
        grid-row: 9/10;

        border-bottom: 0;
    }

    .useful_info_txt {
        align-self: stretch;

        display: grid;

        background-color: #ffffff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
        border-radius: 1px;
    }

    .useful_info_txt_wrapper {
        justify-self: center;
        align-self: center;

        width: 280px;
        height: auto;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(2, min-content);

        margin: 10px 20px;

        box-sizing: border-box;

        overflow-y: auto;
    }

    .useful_info_txt:hover {
        opacity: 0.95;

        background-color: var(--overlay_color);
    }

    .useful_info_txt:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(2) {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 6/7;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(4) {
        grid-column: 1/2;
        grid-row: 8/9;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(5) {
        grid-column: 1/2;
        grid-row: 10/11;

        justify-self: center;
    }

    .useful_info_txt > .useful_info_txt_wrapper > h3 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: start;

        text-align: center;

        margin: 0;
    }

    .useful_info_txt > .useful_info_txt_wrapper > p {
       display: none;
    }
}

/* -- Small devices (landscape phones, 576px and up) -- */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* -- Стили для верхней картинки -- */

    .top_image {
        display: none;
    }



    /* -- Стили для обертки -- */

    .main_wrapper {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
    }

    main {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(4, auto);
    }



    /* -- Стили для первой секции -- */

    .about_us {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, min-content);
        grid-row-gap: 20px;

        margin: 40px 30px;
    }

    .about_us_img {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: center;

        width: 496px;
        height: 625px;

        border: solid 10px rgba(0, 0, 0, 0.2);
    }

    .about_us_info_cut {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        padding: 0 40px;
    }

    .about_us_info_cut > h2 {
        margin-top: 20px;
        margin-bottom: 20px;

        font-size: 2.5em;
    }

    .about_us_info_cut > p {

    }

    .about_us_info_cut > a {
        justify-self: center;
        align-self: center;

        font-size: 1.3em;

        margin-bottom: 20px;
    }



    /* -- Стили для второй секции -- */

    .our_dogs {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 30px;
    }

    .our_dogs > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .our_dogs > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .our_dogs_wrapper {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, min-content);
        grid-row-gap: 3px;
        grid-column-gap: 3px;
    }

    .our_dogs_wrapper > label {
        justify-self: stretch;
        align-self: stretch;

        padding: 20px 30px;

        text-align: center;

        opacity: 0.5;

        cursor: pointer;
    }

    .our_dogs_wrapper > label:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 1/2;

        background-color: var(--line_first_color);
    }

    .our_dogs_wrapper > label:nth-of-type(2) {
        grid-column: 2/3;
        grid-row: 1/2;

        background-color: var(--line_second_color);
    }

    .our_dogs_wrapper > label:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 2/3;

        background-color: var(--line_third_color);
    }

    .our_dogs_wrapper > label:nth-of-type(4) {
        grid-column: 2/3;
        grid-row: 2/3;

        background-color: var(--line_fourth_color);
    }

    .our_dogs_item {
        grid-column: 1/3;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: none;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, auto);
        grid-column-gap: 20px;
        grid-row-gap: 20px;

        margin-top: 17px;
    }

    .our_dogs_item > .our_dogs_avatar {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: center;

        width: 516px;
        height: 689px;
    }

    .our_dogs_item > .our_dogs_info {
        grid-column: 1/2;
        grid-row: 2/3;

        grid-template-rows: 80px 200px 80px 200px;

        transition: all 1s ease-in-out 0.2s;

        visibility: visible;
        opacity: 1;
    }

    .our_dogs_item > .our_dogs_info > .our_dogs_titles {
        grid-column: 1/2;
        grid-row: 4/5;

        grid-row-gap: 10px;
    }

    .our_dogs_buttons_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .our_dogs_item > .our_dogs_stand_img {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: start;

        width: 320px;
        height: 0;

        background-position: center center;
        background-size: 320px;
    }

    .our_dogs_item > .stand:checked ~ .our_dogs_stand_img {
        height: 620px;
        width: 320px;
    }

    .our_dogs_item > .stand:checked ~ .our_dogs_info {
        visibility: hidden;
        opacity: 0;
    }



    /* -- Стили для третьей секции -- */

    .achievments {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 30px;
    }

    .achievments > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .achievments > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .achievments_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 156px auto;
        grid-column-gap: 0;
        grid-row-gap: 20px;
    }

    .achievments_list {
        grid-column: 1/2;
        grid-row: 1/2;

        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: min-content;

        overflow-y: auto;
    }

    .achievments_second_wrapper {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .achievments_second_wrapper > .achievments_item {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: none;
        grid-template-columns: repeat(1, min-content);
        grid-template-rows: repeat(2, auto);
        grid-row-gap: 20px;
    }

    .achievments_second_wrapper > .achievments_item > a {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        width: 516px;
        height: 413px;
    }



    /* -- Стили для четвертой секции -- */

    .puppies {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 30px;
    }

    .puppies > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .puppies > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .puppies_wrapper_1 {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .puppies_wrapper_2 {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .kids_1_banner {
        grid-column: 1/3;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        width: 516px;
        height: 345px;
    }

    .button_z {
        width: 516px;
    }

    .kids_2_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 516px;
        height: 663px;
    }

    .kids_3_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 516px;
        height: 663px;
    }

    .kids_links {
        display: none;
    }



    /* -- Стили для пятой секции -- */

    .section_5_wrapper {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: 1fr minmax(360px, 1140px) 1fr;

        background-color: #616161;
    }

    .useful_info {
        grid-column: 2/3;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        padding: 0;
        margin: 40px 30px;
    }

    .useful_info > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;

        font-size: 2.5em;
    }

    .useful_info > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;
    }

    .useful_info_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;

        max-width: 980px;
    }

    .useful_info_img {
        grid-column: 1/2;

        justify-self: center;
        align-self: stretch;

        width: 516px;
        height: 279px;
    }

    .useful_info_img:nth-of-type(1) {
        grid-row: 1/2;
    }

    .useful_info_img:nth-of-type(2) {
        grid-row: 3/4;
    }

    .useful_info_img:nth-of-type(3) {
        grid-row: 5/6;
    }

    .useful_info_img:nth-of-type(4) {
        grid-row: 7/8;
    }

    .useful_info_img:nth-of-type(5) {
        grid-row: 9/10;

        border-bottom: 0;
    }

    .useful_info_txt {
        align-self: stretch;

        display: grid;

        background-color: #ffffff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
        border-radius: 1px;
    }

    .useful_info_txt_wrapper {
        justify-self: center;
        align-self: center;

        width: 476px;
        height: auto;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(2, min-content);

        margin: 10px 20px;

        box-sizing: border-box;

        overflow-y: auto;
    }

    .useful_info_txt:hover {
        opacity: 0.95;

        background-color: var(--overlay_color);
    }

    .useful_info_txt:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(2) {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 6/7;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(4) {
        grid-column: 1/2;
        grid-row: 8/9;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(5) {
        grid-column: 1/2;
        grid-row: 10/11;

        justify-self: center;
    }

    .useful_info_txt > .useful_info_txt_wrapper > h3 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: start;

        text-align: center;

        margin: 0;
    }

    .useful_info_txt > .useful_info_txt_wrapper > p {
        display: none;
    }
}

/* -- Medium devices (tablets, 768px and up) -- */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* -- Стили для обертки -- */

    .main_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
    }

    main {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(4, auto);
    }



    /* -- Стили для первой секции -- */

    .about_us {
        grid-template-columns: auto;
        grid-template-rows: repeat(2, min-content);
        grid-row-gap: 20px;

        margin: 40px 30px;
    }

    .about_us_img {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: center;

        width: 496px;
        height: 625px;

        border: solid 10px rgba(0, 0, 0, 0.2);
    }

    .about_us_info_cut {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        padding: 0 40px;
    }

    .about_us_info_cut > h2 {
        margin-top: 20px;
        margin-bottom: 20px;

        font-size: 2.5em;
    }

    .about_us_info_cut > p {

    }

    .about_us_info_cut > a {
        justify-self: center;
        align-self: center;

        font-size: 1.3em;

        margin-bottom: 20px;
    }



    /* -- Стили для второй секции -- */

    .our_dogs {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 30px;
    }

    .our_dogs_item > .our_dogs_stand_img {
        grid-column: 2/3;
        grid-row: 1/3;

        justify-self: stretch;
        align-self: stretch;

        width: 0;
        height: 510px;

        display: block;

        background-color: #ffffff;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 430px;

        transition: all 1s ease-in-out 0.2s;

        z-index: 1;
    }

    .our_dogs_item > .stand:checked ~ .our_dogs_stand_img {
        width:443px;
    }


    /* -- Стили для третьей секции -- */

    .achievments {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 30px;
    }

    .achievments > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .achievments > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .achievments_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 156px auto;
        grid-column-gap: 0;
        grid-row-gap: 20px;
    }

    .achievments_list {
        grid-column: 1/2;
        grid-row: 1/2;

        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: min-content;

        overflow-y: auto;
    }

    .achievments_second_wrapper {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .achievments_second_wrapper > .achievments_item {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: none;
        grid-template-columns: repeat(1, min-content);
        grid-template-rows: repeat(2, auto);
        grid-row-gap: 20px;
    }

    .achievments_second_wrapper > .achievments_item > a {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        width: 516px;
        height: 413px;
    }



    /* -- Стили для четвертой секции -- */

    .puppies {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        margin: 40px 20px;
    }

    .puppies > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        font-size: 2.5em;
    }

    .puppies > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 50px;
    }

    .puppies_wrapper_1 {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .puppies_wrapper_2 {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
        align-self: stretch;

        position: relative;
    }

    .kids_1_banner {
        grid-column: 1/3;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        width: 707px;
        height: 473px;
    }

    .button_z {
        width: 707px;
    }

    .kids_2_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 707px;
        height: 909px;
    }

    .kids_3_banner {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
        align-self: center;

        width: 707px;
        height: 909px;
    }

    .kids_links {
        padding: 0 20px;
    }



    /* -- Стили для пятой секции -- */

    .section_5_wrapper {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: 1fr minmax(360px, 1140px) 1fr;

        background-color: #616161;
    }

    .useful_info {
        grid-column: 2/3;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(3, min-content);

        padding: 0;
        margin: 40px 30px;
    }

    .useful_info > h2 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;

        font-size: 2.5em;
    }

    .useful_info > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: stretch;

        margin-bottom: 30px;

        color: #ffffff;
    }

    .useful_info_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;

        max-width: 980px;
    }

    .useful_info_img {
        grid-column: 1/2;

        justify-self: center;
        align-self: stretch;

        width: 516px;
        height: 279px;
    }

    .useful_info_img:nth-of-type(1) {
        grid-row: 1/2;
    }

    .useful_info_img:nth-of-type(2) {
        grid-row: 3/4;
    }

    .useful_info_img:nth-of-type(3) {
        grid-row: 5/6;
    }

    .useful_info_img:nth-of-type(4) {
        grid-row: 7/8;
    }

    .useful_info_img:nth-of-type(5) {
        grid-row: 9/10;

        border-bottom: 0;
    }

    .useful_info_txt {
        align-self: stretch;

        display: grid;

        background-color: #ffffff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
        border-radius: 1px;
    }

    .useful_info_txt_wrapper {
        justify-self: center;
        align-self: center;

        width: 436px;
        height: auto;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(2, min-content);

        margin: 40px 40px;

        box-sizing: border-box;

        overflow-y: auto;
    }

    .useful_info_txt:hover {
        opacity: 0.95;

        background-color: var(--overlay_color);
    }

    .useful_info_txt:nth-of-type(1) {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(2) {
        grid-column: 1/2;
        grid-row: 4/5;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(3) {
        grid-column: 1/2;
        grid-row: 6/7;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(4) {
        grid-column: 1/2;
        grid-row: 8/9;

        justify-self: center;
    }

    .useful_info_txt:nth-of-type(5) {
        grid-column: 1/2;
        grid-row: 10/11;

        justify-self: center;
    }

    .useful_info_txt > .useful_info_txt_wrapper > h3 {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: stretch;
        align-self: start;

        text-align: center;

        margin: 0;
        margin-bottom: 20px;
    }

    .useful_info_txt > .useful_info_txt_wrapper > p {
        grid-column: 1/2;
        grid-row: 2/3;

        justify-self: stretch;
        align-self: start;

        text-align: justify;

        margin-right: 10px;
    }
}

/* -- Large devices (desktops, 992px and up) -- */
@media (min-width: 992px) and (max-width: 1139.98px) {
    .main_wrapper {
        grid-column: 1/2;
        grid-row: 3/4;

        justify-self: stretch;
        align-self: stretch;

        display: grid;
        grid-template-columns: auto;
    }

    main {
        grid-column: 1/2;
        grid-row: 1/2;

        justify-self: center;
        align-self: stretch;

        display: grid;
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(4, auto);
    }
}

/* -- Extra large devices (large desktops, 1200px and up) -- */
@media (min-width: 1140px) {

}