h2,
h3,
.text_side,
.text_side>div {
    margin: 0px;
}

/* General layout */
.course {
    overflow: hidden;
}

.text_side {
    width: 35%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

.text_sixty {
    width: 60%;
    margin-right: 40%;
    padding-bottom: 1em;
    background-color: #FFFFFFBD;
}

.image_side {
    width: 50%;
    height: 80%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.align_bottom {
    align-items: flex-end;
    flex-direction: row;
}

.image_side .bins {
    width: 166px;
    height: 254px;
}

.irow {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 0px;
}

.icol {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.big_bins {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 40vw;
    height: 30vh;
    margin-bottom: 9vh;
}

img {
    max-width: 80%;
    max-height: 90%;
    object-fit: contain;
}

.grid_images {
    width: 20%;
    height: auto;
    position: relative;
    padding: 1%;
    padding-bottom: 2em !important;
    background-origin: content-box !important;
    background-position: center !important;
}

.grid_images>p {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

.withbg {
    background-color: #A0CAD9;
    box-shadow: 0px 3px 6px #0000004D;
    border: 1px solid #D5EEF2;
    border-radius: 40px;
}

#title_container {
    width: 100%;
    margin: 0;
}

#basic_info {
    width: 100%;
    padding: 20px 30px;
}

.btn_container {
    width: 100%;
    margin: 0;
}

/* Pages */
.cpage {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: center;
    padding: 1%;

    background: url("../../common/img/bg_bench.png") right center no-repeat;
    background-size: cover;
}

.page_col {
    flex-direction: column;
    justify-content: space-between;
    padding: 6%;
    padding-bottom: 1%;
    position: relative;
}

#page4 {
    background: url("../../common/img/course/bg_forest_trash.png") right center no-repeat;
    background-size: cover;
}

#page5 {
    background: url("../../common/img/course/bg_forest_people.png") right center no-repeat;
    background-size: cover;
}

#page10,
#page11,
#page12,
#page13,
#page14 {
    background: url("../../common/img/course/bg_forest.png") right center no-repeat;
    background-size: cover;
}

/* Page 3 images */
#t1 {
    background: url("../../common/img/course/erdeiruha.png") right center no-repeat;
    background-size: contain;
}

#t2 {
    background: url("../../common/img/course/hatizsak.png") right center no-repeat;
    background-size: contain;
}

#t3 {
    background: url("../../common/img/course/kulacs.png") right center no-repeat;
    background-size: contain;
    padding: 4% !important;
}

#t4 {
    background: url("../../common/img/course/szendvics.png") right center no-repeat;
    background-size: contain;
}

#t5 {
    background: url("../../common/img/course/esokabat.png") right center no-repeat;
    background-size: contain;
}

#t6 {
    background: url("../../common/img/course/nasi.png") right center no-repeat;
    background-size: contain;
}

#t7 {
    background: url("../../common/img/course/papirzsepi.png") right center no-repeat;
    background-size: contain;
}

#t8 {
    background: url("../../common/img/course/kullancs.png") right center no-repeat;
    background-size: contain;
}

/* Other page images */
#page6 .image_side,
#page7 .image_side {
    height: 80%;
    justify-content: flex-start;
}

#page6 #i1 .bins,
#page7 #i3 .bins {
    height: 100%;
}

#page6 #i2 .bins,
#page7 #i4 .bins {
    width: 50%;
    height: 100%;
}

#page8 .image_side,
#page9 .image_side {
    height: 80%;
    justify-content: flex-start;
}


#page8 #i5,
#page9 #i7 {
    align-items: flex-start;
}

#page8 #i5 .bins,
#page9 #i7 .bins {
    width: 60%;
    height: 100%;
}

#page8 #i6,
#page9 #i8 {
    align-items: flex-end;
}

#page8 #i6 .bins,
#page9 #i8 .bins {
    width: 100%;
    height: 100%;

}

.extra_img {
    width: 30%;
    height: 30%;
    position: absolute;
    bottom: 50px;
    right: 50px;

    background-position: right;
    background-repeat: no-repeat;
}

.fullbins {
    background-image: url("../../common/img/course/bins_full.png");
    background-size: contain;
}

.garbage_truck {
    background-image: url("../../common/img/course/garbage_truck.png");
    background-size: contain;
}

.bus {
    background-image: url("../../common/img/course/bus.png");
    background-size: contain;
}

/* Inner images */
#inner1 {
    background: url("../../common/img/course/papir.png") right center no-repeat;
    background-size: contain;
}

#inner2 {
    background: url("../../common/img/bin_blue_full.png") right center no-repeat;
    background-size: contain;
}

#inner3 {
    background: url("../../common/img/bin_blue_big.png") right center no-repeat;
    background-size: contain;
    background-position: bottom;
}

#inner4 {
    background: url("../../common/img/course/muanyag.png") right center no-repeat;
    background-size: contain;
}

#inner5 {
    background: url("../../common/img/bin_yellow_full.png") right center no-repeat;
    background-size: contain;
}

#inner6 {
    background: url("../../common/img/bin_yellow_big.png") right center no-repeat;
    background-size: contain;
    background-position: bottom;
}

#inner7 {
    background: url("../../common/img/course/feheruveg.png") right top no-repeat;
    background-size: contain;
}

#inner8 {
    background: url("../../common/img/bin_glass.png") right bottom no-repeat;
    background-size: contain;
    background-position: bottom;
}

#inner9 {
    background: url("../../common/img/course/szinesuveg.png") right top no-repeat;
    background-size: contain;
}

#inner10 {
    background: url("../../common/img/bin_green_big.png") right bottom no-repeat;
    background-size: contain;
    background-position: bottom;
}

#i1,
#i3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 30%;
}

#i2,
#i4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Responsive */
@media screen and (max-width:1400px) {
    .text_side {
        width: 50%;
    }

    .image_side {
        width: 40%;
    }
}