html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: verdana, sans-serif;
    font-size: 1.25rem;
}
body {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* page structure: föoldal */
.container-fluid {
    height: 100%;
    width: 100%;
}
.fejlec {
    display: inline-block;
    text-align: center;
}
.kozep-page1 {
    display: flex;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    /* border: solid 1px red; */
}
.kozep-pagex {
    display: flex;
    flex-grow: 1;
    width: 92%;
    height: 79.5%;
}
.foecim {       
    display: flex;
    justify-content: center;
    align-content: center;         
    margin: auto;
}

.kozep-page1 img {
    /* margin-bottom: 2rem; */
    width: 75%;
    height: 75%;
}
.lablec {              
    color: white;
    display: inline-block;
    padding: 0;
    margin: 0rem;
    text-align: center;
    z-index: 2;
}
.lablec1 {              
    color: white;
    display: inline-block;
    padding: 0;
    margin: 0rem;
    text-align: center;
    z-index: 2;
}
.lablec a {
    background-color: rgba(44, 29, 13, 0.7);
    padding: 0rem 1rem;
    min-width: 22rem;
    width: 22rem;
    border: 1px solid white;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    color: white;
    font-style: italic;
}
.lablec1 a {
    background-color: rgba(44, 29, 13, 0.7);
    padding: 0rem 1rem;
    min-width: 22rem;
    width: 22rem;
    border: 1px solid white;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    color: white;
    font-style: italic;
}
.contact {
    text-decoration: none;
    color: rgb(80, 64, 53);
    font-style: italic;
}
.div-fb {
    background-color: rgb(80, 64, 53);
    float: left;
}
.paraph img {
    position: absolute;
    top: 2px;
    left: 4px;
    height: 4.1rem;
    border: 1px solid white;
    border-radius: 4px;
}
.paraph1 img {
    position: absolute;
    top: 2px;
    left: 4px;
    height: 4.1rem;
    border: 1px solid white;
    border-radius: 4px;
}
/* .paraph img:hover {
    text-decoration: none;
    filter: invert(100%);
    transition-duration: 0.3s;
} */
.menue {
    background-color: rgba(44, 29, 13, 0.7);
    padding: 0px 8px;
    min-width: 11rem;
    width: 11rem;
    display: inline-block;
    color: white;
    text-decoration: none;
    border: 1px solid;
    border-radius: 4px;
    white-space: nowrap;
}
.menue:hover{
    text-decoration: none;
    filter: invert(100%);
    color: white;
    transition-duration: 0.3s;
}
.m-aktiv {
    font-weight: bold;
}

/* hamburger */
.dropdown {
    position: absolute;
    display: none;
    top: 4px;
    right: 4px;
    /* z-index: 1; */
}
.dropbtn {
    background-color: rgba(44, 29, 13, 0.7);
    padding: 0px 4px;
    text-decoration: none;
    color: #eee;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 2rem;
    top: 0rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    background-color: rgba(44, 29, 13, 0.9);
    padding: 0px 8px 0px 8px;
    margin: 0px 8px 2px 8px;
    color: white;
    font-size: 1.1rem;
    text-decoration: none;
    border: 1px solid;
    border-radius: 4px;
    display: block;
}
.dropdown-content a:hover {
    text-decoration: none;
    filter: invert(100%);
    transition-duration: 0.3s;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    text-decoration: none;
    filter: invert(100%);
    transition-duration: 0.3s;
}
/* Other pages */

/* Csoportok, Magamról */
.row-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}
.col-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.sub-title {
    background-color: rgb(205, 154, 126);
    color: white;
}
.purple-block {
    border-left: rgb(245, 224, 216) 2px solid;
    /* border-right: rgb(255, 180, 150) 2px solid; */
}

.vert-title {
    top: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4%;
    font-size: 1.3rem;
    overflow: hidden;
}
.vert-title p {
    margin-bottom: 0rem;
}
/* --- gallery --- */
.card img {
    cursor: pointer;
}
.div-half {
    width: 50%;
    float: left;
}
.div-third {
    width: 33.33%;
    float: left;
}
/* Modal */
/* Next & previous buttons */
.prev,
.next, 
.close {
  cursor: pointer;
  position: absolute;
  width: auto;
  /* padding: 16px; */
  margin-top: -5%;
  /* color: white; */
  font-weight: bold;
  font-size: 40px;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover,
.close:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.prev {
    top: 50%;
    left: 0;
    /* border-radius: 0 3px 3px 0; */
}
.next {
    top: 50%;
    right: 0;
    /* border-radius: 3px 0 0 3px; */
}
.close {
    top: 1.2rem;
    right: 0;
    font-size: 1.2rem;
}
/* Így csináld */
.bage-block {
    /* background-color: rgb(236, 215, 173); */
    border-left: rgb(245, 235, 213) 2px solid;
}
.tab-pane {
    background-color: rgb(236, 215, 173);
}
.nav-tabs {
    border-bottom-color: transparent;
}
.nav-item {
    width: 14rem;
    font-weight: bold;
    background-color: #BAC8D1;
}
.p-transp {
    color: transparent;
    font-size: 0.5rem;
}

/* browser compatibility !!!  */
.fejhely {
    width: 100%;
    height: 16.0%;
}
.labhely {
    width: 100%;
    height: 4.5%;
}
.fejbal, .labbal {
    color: transparent;
}
.body-bg-fa {
    background-image: url(img/addingclayto.jpg);
}
.body-bg-ht {
    background-image: url(img/hatter.jpg);
    /* 1 keretes PS*/
}
.kozep-purple {
    background-color: rgb(235, 194, 176);
    /* border: rgb(245, 224, 216) 2px solid; */
}
.kozep-bage-d {
    background-color: rgb(236, 215, 173);
    /* border: rgb(246, 235, 213) 2px solid; */
}
.kozep-bage-g {
    background-color: rgb(226, 195, 133);
    /* border: rgb(219, 190, 132) 2px solid; */
}
/* scroll to top */
#scroll-to-top {
    position: fixed;
    bottom: 4.5%;
    right: 4px;
    color: #eee;
    background-color: rgba(44, 29, 13, 0.7);
    border: 1px solid;
    cursor: pointer;
    width: 35px;
    border-radius: 100%;

    /* padding: 0px 4px;
    text-decoration: none; */

    display: flex;
    justify-content: center;
    margin: 0;
    padding: 3px 10px;

    /* display: none; */
}

#scroll-to-top:hover {
    text-decoration: none;
    filter: invert(100%);
    transition-duration: 0.3s;
}
/* media */
@media (min-width: 500px) {
    .img-wrapper {
        float: left;
    }
}
@media (max-width: 767px) {
    .paraph,
    .fomenu,
    .vert-title,
    .lablec,
    .fejhely,
    .labhely {
        display: none;
    }
    .dropdown {
        display: inline-block;
    }
    .kozep-pagex {
        width: 100%;
    }
    .purple-block {
        border-left: none;
    }
    .div-third {
        width: 100%;
        float: none;
    }
}

@media (max-width: 1199px) {
    .lablec a {
        font-size: 1rem;
    }
    
    .div-half {
        width: 100%;
    }
}

@media (max-height: 520px) {
    .paraph,
    .fomenu,
    .vert-title,
    .lablec,
    .fejhely,
    .labhely {
        display: none;
    }
    .dropdown {
        display: inline-block;
    }
    .purple-block {
        border-left: none;
    }
}