:root{
--gtkblue:#272945; --gtkgold:#efad1e; --gtkgreen:#77aa75; --gtksky:#5f97ae; }
html,body,div,p,ul,ol,li{margin:0;outline:none;border:none;padding:0}
body{width:100vw;overflow-x:hidden;font-family:"Open Sans", Arial, Helvetica, sans-serif;color:var(--gtkblue)}
body:before{
content:"";
position:fixed;
width: 700px;
height: 700px;
bottom:-208px;
right:-141px;
z-index:-1;
background:url(https://cdn.uni-pannon.hu/general/cimerek/gtk_cimer_512.webp) no-repeat;
background-size: 640px;
transform:rotate(-47.5deg);
filter:saturate(.15);
opacity:.1
}
*:before,*:after{font:var(--fa-font-solid)}
a{text-decoration:none;color:var(--gtkblue);transition:.5s ease-in-out}
a:hover{color:var(--gtkgold)}
a:hover:before{color:var(--gtksky);transition:.5s ease-in-out}
span.srt{display:none;margin:-1px;height:1px;width:1px}
a[href^="https"]:not(:\has(img)):after{content:" \f08e"}
a[href*="gtk.uni"]:not(:\has(img)):after{content:""} a[href^="mailto"]:not(:has(img)):after{content:" \f0e0"}
a[href$=".pdf"]:before{content:"\f019  "}
a[href$=".docx"]:before{content:"\f019  "}
a[href$=".pptx"]:before{content:"\f019  "} header{background:var(--gtkblue);display:flex;justify-content:space-between;line-height:56px;padding:0 30px;text-transform:uppercase}
#sitetitle{color:#fff;text-align:center;font-size:30px;font-weight:400}
#socialsites a{display:inline-block;color:#fff;line-height:56px}
#socialsites a:after{margin:10px;font:var(--fa-font-brands)}
#socialsites a[title="Facebook"]:after{content:"\f39e"}
#socialsites a[title="Instagram"]:after{content:"\f16d"}
#socialsites a[title="YouTube"]:after{content:"\f167"}
#socialsites a[title="Spotify"]:after{content:"\f1bc"}
#socialsites a[title="LinkedIn"]:after{content:"\f0e1"}
nav{position:sticky;top:0;height:60px;display:flex;justify-content:space-between;align-items:center;background:#fff;padding:1px 30px;box-shadow:rgba(0,0,0,.12) 0 1px 3px;z-index:10}
#mobilemenu{display:none}
#logo{height:60px}
#logo a img{height:60px}
#hsearch input{
width:150px;
color:#888;
font-size:16px;
height:20px;
padding:2px;
margin:2px;
border-radius:5px;
}
.post-header{padding:30px;line-height:1.2;text-align:center;font-size:46px;font-weight:700;letter-spacing:-1px}
.post-header a{color:var(--gtkblue)}
.post-content{max-width:1280px;margin:auto;padding:0 40px;color:#7E8890;font-weight:400;line-height:24px;font-size:16px}
.post-content h2{margin:20px 0;color:var(--gtkblue);line-height:1.2;font-size:34px;font-weight:700}
.post-content h3{margin:30px auto 15px auto;color:var(--gtkblue);line-height:33px;font-size:24px;font-weight:700}
.post-content p{margin-bottom:20px}
.post-content .has-background{border-radius:6px;padding:15px}
.post-content .has-background h3{margin:0}
.post-content .GSDI-member{margin:0 0 20px 0;border:1px solid #eee}
.post-content .GSDI-member h3{margin:15px;font-weight:400}
.post-content .GSDI-member{color:var(--gtkblue);line-height:30px;font-size:18px;letter-spacing:2px}
.post-content .GSDI-member img{margin-bottom:30px}
#totop{
position:fixed;
bottom:30px;
right:75px;
border-radius:4px;
background:var(--gtkblue);
color:#fff;
cursor:pointer;
transition:opacity .4s ease-in-out,background .2s ease-in-out;
opacity:.9
}
#totop:before{display:block;width:42px;line-height:42px;text-align:center;font-size:22px;content:"\f106"}
#totop:hover{background:var(--gtkgold)}
footer{max-width:1280px;margin:auto;line-height:24px;font-size:16px}
footer h3 a{line-height:1.5;font-size:24px;font-weight:700;letter-spacing:1px}
footer hr.wp-block-separator{border-top:none} @media (min-width: 839px) {
nav{position:sticky;top:0}
}
@media (max-width: 839px) {
header{flex-wrap:wrap;justify-content:space-around}
nav{height:40px;flex-wrap:wrap;padding:0 20px}
#mobilemenu{display:inline-block}
#logo{height:40px}
#logo a img{display:block;height:36px;padding:2px}
div#nav{order:4;width:100%;z-index:10}
.post-header{font-size:7vw}
.post-content{padding:0}
.post-content p{padding:0 10px}
.post-content h2{font-size:6vw}
.post-content h3{font-size:5.5vw}
.post-content h4{font-size:5vw}
footer{margin:0 10px}
} @media only screen and (min-width: 840px) {
div#mobilemenu{display:none}
#nav{font-size:14px;font-weight:bold;letter-spacing:1px;z-index:8}
#nav ul{background:#fff;float:left;transition:.5s;list-style:none}
#nav li{position:relative;float:left;padding:0 15px;transition:.5s}
#nav li:hover>ul{opacity:1;visibility:visible}
#nav ul ul {position:absolute;margin:10px;opacity:0;visibility:hidden}
#nav ul ul li{background:#f2f1f0;padding:10px;width:100%;border-bottom:1px solid #e2e2e2}
#nav ul ul li a{font-weight:normal}
#nav ul ul li:hover{background:#fff}
#nav ul ul ul{left:100%;top:0;margin:0}
#nav a{white-space:nowrap;color:var(--gtkblue)}
#nav span{display:none}
}
@media only screen and (max-width: 839px) {
div#mobilemenu{font-weight:bold;line-height:40px;font-size:14px;z-index:10}
div#mobilemenu::before{content:"\f0c9"}
#nav ul{display:none;background:#f2f1f0;font-size:30px;list-style:none}
#nav>ul{margin:0 -20px}
#nav ul li{border-top:1px solid #e2e2e2;overflow:hidden}
#nav a{padding:0 0 0 10px;font-size:14px;font-weight:normal;letter-spacing:1px;z-index:8}
#nav a{display:inline-block;width:calc(100% - 50px);line-height:50px;color:var(--gtkblue);font-weight:normal;white-space:nowrap;overflow:hidden}
#nav .sub-menu a::before{padding:0 0 0 10px;content:"- "}
#nav .sub-menu .sub-menu a::before{padding:0 0 0 20px;content:"-- "}
#nav .sub-menu .sub-menu .sub-menu a::before{padding:0 0 0 30px;content:"--- "}
#nav span{display:block;float:right;margin:15px 10px 0 0;font:var(--fa-font-solid)}
} .flipbox{background:#ddd}
.flipbox>div{
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flipbox:hover>div{transform:rotateY(180deg)}
.flipbox>div>*:nth-child(odd), .flipbox>div>*:nth-child(even){
position: absolute;
backface-visibility: hidden
}
.flipbox>div>*:nth-child(odd){border-radius:6px;padding:15px}
.flipbox>div>*:nth-child(odd) h3{margin:auto}
.flipbox>div>*:nth-child(even){transform:rotateY(-180deg)}