@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
  }

body {
    margin: 0;
    font-family: "Quicksand";
}

#menu-wrapper {
    z-index: 1000;
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    transition: top 0.3s;
    background-color: rgb(118, 118, 118, 0.8);
  }

.section {
/*     max-width: 70rem; */
/*     margin: auto; */
    margin: 0 20vw;
}

.menu {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 10px;
}

/* .menu img {
    max-width: ;
} */

#menu-ul {
    display: flex;
    justify-content: space-between;
	position:relative;
}

.menu ul li {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

.menu ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-style: italic;
}

.menu ul li a:hover {
    color:  rgb(197 174 64);
}

/* Ez alábbi nem mukodik valamiért, az aktiv oldalon világit  */
.menu ul li a:active {
    color:  rgb(197 174 64);
}

.menu .icon {
    display: none;
}
#menu-ul ul{
	position: absolute;
	top: 25px;
	display: none;
	padding: 20px;
	background: #ffffff4d
}
#menu-ul ul li{
	padding: 0 20px 0 0;
}
#menu-ul li:hover > ul {
	display:inherit;
}
.main-wrapper {
    background-image: url('../img/sliderbg_blur.jpg');
	background-size: cover;
	background-color: rgb(118, 118, 118); 
}

.main-section{
    padding-top: 20em;
    padding-bottom: 10.5em;
}

.main-section span {
/*     display: inline; */
    background-color: rgb(197 174 64);
}

#main-title {
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    font-size: 2.7rem;
    width:fit-content;
/*     padding-left: 10px;
    padding-right: 10px; */
    word-wrap: break-word;
    box-shadow: 10px 0 0 rgb(197 174 64), -10px 0 0 rgb(197 174 64);
}
.menu a{text-decoration: none;}
.menu h2{
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    font-size: 2rem;
    width:fit-content;
/*     padding-left: 10px;
    padding-right: 10px; */
    word-wrap: break-word;

}
#sub-title {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 2.8rem;
    width:fit-content;
    word-wrap: break-word;
    box-shadow: 10px 0 0 rgb(197 174 64), -10px 0 0 rgb(197 174 64);
}

#sub-title-eng {
    font-style: italic;
    color: #ffffff;
    text-decoration: none;
    font-weight: 400;
    font-size: 2.1rem;
    width:fit-content;
    word-wrap: break-word;
    box-shadow: 10px 0 0 rgb(197 174 64), -10px 0 0 rgb(197 174 64);
}

.subsection {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.subsection .title {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.title {
    margin: 0;
    font-weight: 600;
    font-size: 2rem;
    color:  rgb(197 174 64);
    font-style: italic;
}

.post {
	  font-weight: 600;
    font-size: 1.2rem;
    color:  rgb(197 174 64);
}

.post a,
.text a {
		text-decoration: none;
		color:  rgb(197 174 64);
}

.title a {
    font-weight: 800;
    font-style: normal;
}

.text {
    line-height: 2rem;
}

.italic-text {
    font-style: italic;
}

.regular-text {
    font-weight: 600;
}

.section2-wrapper {
    background-color: rgb(245, 245, 245);

}

.section2 {
/*     padding-top: 2.5rem;
    padding-bottom: 2.5rem; */
    text-align: center;
    align-items: center;
    justify-content: center;
}

.section2 td {
    vertical-align: top;
}

.section2 p {
    margin: 0;
}

#table {
    margin: auto;
    width: 80%;
}

#table td {
    padding: 10px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

#table img {
    max-width: 170px;
}


.members{display: flex; flex-wrap: wrap; justify-content: space-around;}
.member{min-width: 280px; padding:0!important}
.ago{}
.soma{}
.judit{}

.member-name {
    font-weight: 800;
	font-size: 1rem;
    color: black;
    padding-bottom: 0.5rem;
}

.member-title {
    font-weight: 800;
    color: rgb(109, 109, 109);
/*     line-height: 0.2rem; */
}

.member-sub-title {
    font-weight: 300;
    color: rgb(109, 109, 109);
/*     line-height: 0.3rem; */
    font-style: italic;
}

.section4-wrapper {
/*     background-image: url('../img/contact.png'); */
    background-color: rgb(197 174 64);
}

.contact-title {
    font-weight: 600;
    font-size: 2rem;
    color:  rgb(255, 255, 255);
    font-style: italic;
}

.contact-title {
    text-align: center;
}

.section4 .text {
    color: white;
    line-height: 1rem;
}

#contact-table {
    margin: auto;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#contact-table td {
    padding-left: 5rem;
    padding-right: 5rem;
}

#contact-table a {
    text-decoration: none;
}

#contact-table a:hover p {
/*     transition: cubic-bezier(0.165, 0.84, 0.44, 1); */
    font-weight: 600;
    color: rgb(119, 164, 206)
}

/* downloads */

.document{
	background: #ffffff;
    padding: 30px;
    width: 70%;
    margin: 0;

}
.document .title{	
}
.document .title a{	
    color: #c3b046;
    text-decoration: none;
}
.document .title a:hover{
	color: #ab9a3d;
}

.document .details .button{
	width: 160px;
	text-align: center;
}
.document .details .button img{
	width: 60px;
}

.document .details{
    display: flex;

}
.document .details .text{
	width: calc(100% - 160px);
	float: left;
}

/* For Mobile resolution */
@media screen and (max-width: 1605px) {
    .section {
        margin: 0 10vw;
    }
}

@media screen and (max-width: 736px) {

    .main-section{
        padding-top: 11em;
        padding-bottom: 11em;
    }

    .section {
        margin: 0 5vw;
    }

    #main-title {
        font-size: 2rem;
    }
    
    #sub-title {
        font-size: 1.6rem;
    }

    #table td, #contact-table td {
        display: block;
    }

    #contact-table {
        max-width: 202px
    }

    #contact-table td {
        padding-left: 0rem;
        padding-right: 0rem;
        margin-bottom: 15px;
    }
    #contact-table td p {
        line-height: 1.3;
        margin-bottom: 8px;
        margin-top: 0px;
    }

  }

    /* When the screen is less than 1200 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the menu (.icon) */
@media screen and (max-width: 1200px) {
    .menu {
        display: block;
    }

    .menu ul {
        margin: 0;
    }

    .menu ul a {
        display: none;
    }

    .menu ul a.icon {
    /*    float: right; */
        display: block;
    }
}

/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon. This class makes the menu look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1200px) {
    .menu.section {position: relative;}
    .menu.section ul a.icon {
      position: absolute;
      right: 20px;
      top: 2.25em;
    }

    #menu-ul {
        display: block;
    }

    .menu.section.responsive ul a{
/*       float: none; */
      display: block;
/*       text-align: left; */
    }
  }