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

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

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

.image_side {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    flex-direction: row;
}

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

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

.icol {
    height: 100%;
    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;
}

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

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

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

#page3,
#page7 {
    background: url("../../common/img/course/bg4.png") right center no-repeat;
    background-size: cover;
}

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

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

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

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

#page16,
#page17,
#page18 {
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding-bottom: 110px;

    background: url("../../common/img/course/bg_ut.png") right center no-repeat;
    background-size: cover;
    background-position-y: -80px;
}

#page19 {
    flex-direction: column;
    justify-content: space-around;
    position: relative;
}

.utja_text {
    width: 80%;
    margin: 0 10%;
    text-align: center;
}

#page16>.btn_container,
#page17>.btn_container,
#page18>.btn_container {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
    margin: 0px;
    padding: 0 10%;
    background-color: #FFF7EA;
}

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

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

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

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

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

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

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

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

/* Other page images */

#page2 .image_side,
#page3 .image_side {
    flex-direction: column;
    height: 70%;
}

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

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

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

#page8 #i1 .bins,
#page9 #i3 .bins {
    height: 100%;
}

#page8 #i2 .bins,
#page9 #i4 .bins {
    width: 50%;
    height: 100%;
}

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


#page10 #i5,
#page11 #i7 {
    align-items: flex-start;
}

#page10 #i5 .bins,
#page11 #i7 .bins {
    width: 60%;
    height: 100%;
}

#page10 #i6,
#page11 #i8 {
    align-items: flex-end;
}

#page10 #i6 .bins,
#page11 #i8 .bins {
    width: 100%;
    height: 100%;

}

#page12 #i9 {
    align-items: center;
    padding-bottom: 20%;
}

#page12 .image_side .bins {
    width: 180px;
    height: 275px;
}

#page13 .image_side {
    height: 80%;
}

#page13 #i10 {
    align-items: flex-start;
}

#page13 #i11 {
    align-items: flex-end;
}

.logo {
    width: 50%;
    height: 30%;
    position: relative;
    padding: 6%;
    padding-bottom: 2.5em;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center;
}

.logo>p {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}

#fkf {
    background-image: url(../../common/img/company_logos/fkf.png);
    background-size: contain;
}

#jog {
    background-image: url(../../common/img/company_logos/jog.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;
}

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

#inner12 {
    background: url("../../common/img/course/veszelyes2.png") left bottom no-repeat;
    background-size: contain;
}

#inner13 {
    background: url("../../common/img/course/zoldhulladek.png") left bottom no-repeat;
    background-size: contain;

    width: 100%;
    height: 70%;
    background-position: center;
}

#inner14 {
    background: url("../../common/img/course/bin_tp_full.png") left bottom no-repeat;
    background-size: contain;

    width: 100%;
    height: 50%;
}

#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: 40%;
    }
}