.tdee-background-image {
    width:100%;
    height: 70vh;
    background-image: url(../../images/landscapes/4185.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: 50%;
    color:white;
}
.tdee-main{
    width:90%;
    max-width: 800px;
    transform: translateY(-70px);
    padding: 40px 50px 30px;
    background-color: #fff;
    border-radius: 20px;
}
.tdee-naslov{
  font-weight: bolder;
  top: 35vh;
  position: relative;
  padding: 15px 30px;
  width: fit-content;
  margin: auto;
  border-radius: 15px;
  transform: translateY(-25%);
}
.tdee-icon-image{
    width:100px;
    margin:0 5px;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: .1s;
}
.tdee-icon-image:hover{
    border: 1px solid var(--main);
    opacity: .9;
}
.tdee-selected-image{
    border: 3px solid var(--main) !important;
}
.tdee-icon-image-activity{
    padding: 3px;
    width:100%;
    cursor: pointer;
    border-radius: 50%;
    transition: .1s;
}
.tdee-icon-image-activity-div{
    width:18%;
    margin:0 1%;
    padding: 0;
    border-radius: 50%;
}
.tdee-icon-image-activity:hover{
    border: 1px solid var(--main);
    opacity: .9;
}
@media only screen and (max-width:900px){
    .tdee-select-image {
        width: 100%;
    }
    .tdee-select-image p {
        margin: 10px 0 !important;
    }
    .tdee-select-pol p {
        margin: 20px 0 10px !important;
    }
    .tdee-main{
        width:95%;
        padding: 40px 20px 30px;
    }
}
@media only screen and (max-width:500px){
    .tdee-select-pol{
        width: 100%;
    }
    #male,#female{
        width: 70px;
    }
    .tdee-icon-image-activity-div p {
        font-size: 12px;
    }
}