body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 0px 1fr 242px;
}


.header {
    background-color: #35BFB7;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1280px 1fr;
}
.logo {
    margin-left: 68px;
    margin-top: 13px;
}
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 33px;
    background: url("images/zootabor_1920_bg.jpg");
}


.footer {
    background-color: #35BFB7;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slideshowdiv {
    width: 1170px;
    height: 596px;
    border-radius: 34px;
    position: relative;
}
.slideshowitem {
    width: 100%;
    height: 100%;
    transition: all 1s ease-out;
    position: absolute;
    top: 0;
    left: 0;
}
.sltextbox {
    width: 455px;
    height: 573px;
    background-color: white;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 15px;
}

.sl1img{
    margin-top: 117px;
    width: 312px;
    height: 267px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sl1btn {
    width: 379px;
    height: 53px;
    display: flex;
    background: #35BFB7 0% 0% no-repeat padding-box;
    border-radius: 13px;
    justify-content: center;
    align-items: center;
    font: normal normal bold 20px/24px Roboto;
    letter-spacing: 1.6px;
    color: #FFFFFF;
    position: absolute;
    bottom: 38px;
    cursor: pointer;
}
.sl1bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: url(images/Zootabor_header_picts_01.jpg);
    background-repeat: no-repeat;
    border-radius: 34px;
}
.sl2bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: url(images/Zootabor_header_picts_02.jpg);
    background-repeat: no-repeat;
    border-radius: 34px;
}
.sl3bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: url(images/Zootabor_header_picts_03.jpg);
    background-repeat: no-repeat;
    border-radius: 34px;
}
.sl4bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: url(images/Zootabor_header_picts_04.jpg);
    background-repeat: no-repeat;
    border-radius: 34px;
}
.sl5bg {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: url(images/Zootabor_header_picts_05.jpg);
    background-repeat: no-repeat;
    border-radius: 34px;
}

.logos {
    display: flex;
    flex-direction: row;
    margin-top: 56px;
    margin-bottom: 56px;
}
.logobox {
    width: 265px;
    height: 274px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 25px;
}
.sl2textbox {
    /* margin-left: 36px;
    margin-right: 20px;
    margin-top: 30px; */
    width: 379px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 30px;
}
.sl3textbox {
    /* margin-left: 36px;
    margin-right: 20px;
    margin-top: 30px; */
    width: 379px;
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

.sl2txt1 {
    text-align: left;
    font: normal normal bold 20px/24px Roboto;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
}
.sl2txt2 {
    text-align: left;
    margin-top: 15px;
    font: normal normal bold 40px/24px Roboto;
    letter-spacing: 0px;
    color: #35BFB7;
}
.sl2txt3 {
    text-align: left;
    font: normal normal normal 20px/24px Roboto;
    letter-spacing: 0.3px;
    color: #2F2F2F;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.8rem;

}
.sl2txt4 {
    padding-top: 15px;
    text-align: left;
    font: normal normal bold 20px/24px Roboto;
    letter-spacing: 0px;
    color: #000000;
}
.sl2txt5 {
    /* padding-top: 15px; */
    text-align: left;
    font: normal normal normal 20px/24px Roboto;
    letter-spacing: 0px;
    color: #000000;
}

.sl5txt1 {
    text-align: left;
    font: normal normal bold 40px/24px Roboto;
    letter-spacing: 0px;
    color: #35BFB7;
    padding-top: 10px;
    text-transform: uppercase;
    line-height: 3rem;

}
.sl5txt2 {
    text-align: left;
    /* padding-top: 15px; */
    font: normal normal normal 20px/24px Roboto;
    letter-spacing: 0px;
    color: #000000;
    line-height: 2rem;
}
.sl5txt3 {
    /* padding-top: 15px; */
    text-align: left;
    font: normal normal normal 20px/24px Roboto;
    letter-spacing: 0px;
    color: #35BFB7;
    margin-bottom: 20px;
}
.sl5btn {
    width: 379px;
    height: 53px;
    display: flex;
    background: #35BFB7 0% 0% no-repeat padding-box;
    border-radius: 13px;
    justify-content: center;
    align-items: center;
    font: normal normal bold 20px/24px Roboto;
    letter-spacing: 1.6px;
    color: #FFFFFF;
    margin-bottom: 9px;
    cursor: pointer;
}
.cleartext {
    text-decoration: none;
}
ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #35BFB7; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.zootaborlogo {
    width: 203px;
    height: 213px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.edufunlogo {
    width: 265px;
    height: 115px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.listitem {
    margin-left: -20px;
    line-height: 25px;

}

  
  .hide {
    transition: all 0.5s ease-out;
    opacity : 0;
    z-index: 1;
  }


  .show {
    transition: all 0.5s ease-out;
    opacity: 1;
    z-index: 100;
  }


.dot{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    opacity: 0.3;
    top: 545px;
    z-index: 1000;
}
.dotactive {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    position: absolute;
    display: flex;
    top: 545px;
    justify-content: center;
    align-items: center;
}
.dotactivedot {
    width: 20px;
    height: 20px;
    background-color: #35BFB7;
    border-radius: 50%;
}



#dot1 {
    left: 760px;
}
#dot2 {
    left: 791px;
}
#dot3 {
    left: 822px;
}
#dot4 {
    left: 852px;
}
#dot5 {
    left: 883px;
}

#activedot1 {
    left: 760px;
}
#activedot2 {
    left: 791px;
}
#activedot3 {
    left: 822px;
}
#activedot4 {
    left: 852px;
}
#activedot5 {
    left: 883px;
}
.logobox2 {
    width: 566px;
    height: 274px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 28px;
    display: grid;
    margin-left: 25px;
    margin-right: 25px;
    grid-template-columns: 264px 302px;
}
.videolinkimg {
    margin-top: 18px;
    margin-left: 19px;
    margin-bottom: 18px;
}
.videolinkcim {
    margin-top: 29px;
    margin-left: 52px;
    margin-right: 24px;
    font: normal normal bold 35px/41px Roboto;
    color: black;
    text-decoration: none;
}
.videolinkszoveg {
    margin-top: 29px;
    margin-left: 52px;
    width: 193px;
    font: normal normal normal 20px/24px Roboto;
    color: black;
    text-decoration: none;
}
.nodecor {
    text-decoration: none;
}