/*Én voltam ^-^*/

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.cikk-subtitle {
   display: block;
   font-weight: bold;
   font-size: 30px;
   text-shadow: -3px -3px 5px #0000002d;
   margin-top: 50px;
   margin-bottom: 30px;
}

.cikk-lista::selection {
   background-color: #0323301c;
}

.article-jedlik .cikk-lista li::selection {
   color: #6179e6;
   background-color: #0323301c;
}

.article-programozas .cikk-lista li::selection {
   color: #29aec2;
   background-color: #0323301c;
}

.article-vilag .cikk-lista li::selection {
   color: #30b433;
   background-color: #0323301c;
}

.article-tudomany .cikk-lista li::selection {
   color: #AFD425;
   background-color: #0323301c;
}

.article-humor .cikk-lista li::selection {
   color: #e4b400;
   background-color: #0323301c;
}

.article-schooltura .cikk-lista li::selection {
   color: #db7d25;
   background-color: #0323301c;
}

.article-jatek .cikk-lista li::selection {
   color: #db3150;
   background-color: #0323301c;
}

.article-kozosseg .cikk-lista li::selection {
   color: #b137c4;
   background-color: #0323301c;
}

/*Cikkek Weboldal*/
.shadow {
   /* =szöveg= */
   text-shadow: 3px 3px 5px #03233048;
}

.code1 {
   /* >> szöveg */
   background-color: rgba(3, 35, 48, 0.9);
   border-radius: 10px;
   color: white;
   font-weight: bold;
   width: fit-content;
   padding: 5px;
   margin-top: 20px;
   font-family: 'Courier New', Courier, monospace;
   display: block;
   font-size: 80%;
}

.code2 {
   /* >>> szöveg */
   background-color: rgba(3, 35, 48, 0.4);
   display: block;
   border-radius: 5px;
   color: rgba(3, 35, 48, 0.9);
   font-weight: bold;
   width: fit-content;
   padding: 10px;
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
}

.code1-inline {
   /* >szöveg< */
   background-color: rgba(3, 35, 48, 0.9);
   border-radius: 10px;
   color: white;
   font-weight: bold;
   width: fit-content;
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
}

.code2-inline {
   /* >>szöveg<< */
   background-color: rgba(3, 35, 48, 0.4);
   border-radius: 5px;
   color: rgba(3, 35, 48, 0.9);
   font-weight: bold;
   width: fit-content;
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
}

.code-solid {
   color: rgba(3, 35, 48, 0.9);
   font-weight: bold;
   width: fit-content;
   font-family: 'Courier New', Courier, monospace;
   font-size: 90%;
}

.box {
   padding: 15px 30px;
   border: 3px solid #032330;
   border-radius: 30px;
   display: block;
   width: fit-content;
   background-color: #0323302c;
}

@media screen and (max-width: 500px) {
   .box {
      padding: 0;
      width: 100%;
      border-radius: 0;
      border: none;
      padding: 20px 5px;
   }
}

.underline {
   /* _szöveg_ */
   text-decoration: underline #032330;
}

.underline-green {
   /* __szöveg__ */
   text-decoration: underline #AFD425;
}

.underline-dashed {
   /* ___szöveg___ */
   text-decoration: underline dashed #032330;
}

.italic {
   /* *szöveg* */
   font-style: italic;
   color: rgba(3, 35, 48, 0.8);
}

.initial {
   /*bodynak class*/
   font-size: 70px;
   color: #032330;
}

.initial-green {
   /*bodynak class*/
   font-size: 70px;
   color: #AFD425;
}

.initial-shadow {
   /*bodynak class*/
   font-size: 70px;
   text-shadow: -5px -5px 16px rgba(0, 0, 0, 0.4);
}

.align-left {
   /* < szöveg */
   text-align: left;
}

.align-center {
   /* >< szöveg */
   text-align: center;
}

.align-right {
   /* > szöveg */
   text-align: right;
}

.align-justify {
   /* <> szöveg */
   text-align: justify;
}

.wrong {
   /* ==szöveg== */
   color: tomato;
   text-decoration: underline wavy tomato;
}

.highlight-jedlik,
.article-jedlik .highlight {
   color: #6179e6;
}

.highlight-programozas,
.article-programozas .highlight {
   color: #29aec2;
}

.highlight-vilag,
.article-vilag .highlight {
   color: #30b433;
}

.highlight-tudomany,
.article-tudomany .highlight {
   color: #AFD425;
}

.highlight-humor,
.article-humor .highlight {
   color: #e4b400;
}

.highlight-schooltura,
.article-schooltura .highlight {
   color: #db7d25;
}

.highlight-jatek,
.article-jatek .highlight {
   color: #db3150;
}

.highlight-kozosseg,
.article-kozosseg .highlight {
   color: #b137c4;
}

.highlight-dc {
   color: #7289DA;
}

.highlight-white {
   /* $$$$szöveg$$$ */
   color: white;
   text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
}

.spaced {
   /* |szöveg| */
   letter-spacing: 3px;
}

.link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #7F1C2E;
   cursor: pointer;
}

.link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #7F1C2E;
   background-color: none;
}

.link-ver {
   color: #0a698f;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #7F1C2E;
   cursor: pointer;
}

.link-ver:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #7F1C2E;
   background-color: none;
}

.link-jedlik,
.article-jedlik .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #6179e6;
}

.link-jedlik:hover,
.article-jedlik .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #6179e6;
   background-color: none;
}

.link-programozas,
.article-programozas .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #29aec2;
}

.link-programozas:hover,
.article-programozas .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #29aec2;
   background-color: none;
}

.link-vilag,
.article-vilag .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #30b433;
}

.link-vilag:hover,
.article-vilag .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #30b433;
   background-color: none;
}

.link-tudomany,
.article-tudomany .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #AFD425;
   cursor: pointer;
}

.link-tudomany:hover,
.article-tudomany .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #AFD425;
   background-color: none;
}

.link-humor,
.article-humor .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #e4b400;
   cursor: pointer;
}

.link-humor:hover,
.article-humor .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #e4b400;
   background-color: none;
}

.link-schooltura,
.article-schooltura .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #db7d25;
   cursor: pointer;
}

.link-schooltura:hover,
.article-schooltura .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #db7d25;
   background-color: none;
}

.link-eworld,
.article-jatek .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #db3150;
   cursor: pointer;
}

.link-eworld:hover,
.article-jatek .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #db3150;
   background-color: none;
}

.link-kozosseg,
.article-kozosseg .link {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #b137c4;
}

.link-kozosseg:hover,
.article-kozosseg .link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #b137c4;
   background-color: none;
}

.link-dc {
   color: #032330;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.15em 0 #7289DA;
}

.link-dc:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #7289DA;
   background-color: none;
}

.cross {
   /* ~szöveg~ */
   text-decoration: line-through #032330;
}

.hr {
   /* ----- */
   width: 80%;
   height: 10px;
   border-radius: 100%;
   border: none;
   background-color: #032330;
   margin: auto;
   margin-top: 50px;
   margin-bottom: 50px;
}

@media screen and (min-width: 750px) {
   .hr {
      margin-top: 100px;
      margin-bottom: 100px;
   }
}

.img {
   /* [1 Kép név](src) */
   object-fit: cover;
   display: block;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   width: 400px;
   height: 300px;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   cursor: default;
}

.img-small {
   /* [2 Kép név](src) */
   object-fit: cover;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: block;
   width: 300px;
   height: 300px;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   cursor: default;
}

.img-big {
   /* [3 Kép név](src) */
   object-fit: cover;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: block;
   width: 400px;
   height: auto;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   cursor: default;
}

.img-full {
   object-fit: cover;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: block;
   width: 100%;
   height: auto;
   cursor: default;
}

.img-wide {
   object-fit: cover;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: block;
   width: 800px;
   height: auto;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   cursor: default;
}

@media screen and (max-width: 900px) {
   .img-wide {
      width: 400px;
      height: auto;
   }
}

.img-tall {
   /* [4 Kép név](src) */
   object-fit: cover;
   margin: auto;
   margin-top: 25px;
   margin-bottom: 25px;
   display: block;
   width: 300px;
   height: 600px;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   cursor: default;
}

.img-photo {
   /* [5 Kép név](src) */
   object-fit: cover;
   margin: auto;
   margin-top: 35px;
   margin-bottom: 35px;
   display: block;
   width: 300px;
   height: 300px;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   border: 15px solid white;
   transform: rotate(-5deg);
   cursor: default;
}

.img-wide-photo {
   object-fit: cover;
   margin: auto;
   margin-top: 35px;
   margin-bottom: 35px;
   display: block;
   width: 400px;
   height: auto;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   border: 15px solid white;
   transform: rotate(-5deg);
   cursor: default;
}

/*
 {# Cím
 - egyik
 - másik
 } */

.source-box {
   background-color: #b9e7f8;
   width: fit-content;
   padding: 30px;
   padding-top: 0px;
   margin-top: 70px;
   border: 5px solid white;
   border-radius: 0 0 50% 0;
   box-shadow: 3px 7px 16px rgba(0, 0, 0, 0.4);
}

.source-header {
   border-bottom: 5px solid #032330;
}


/*Általános Beállítások*/

html {
   height: 100%;
   scroll-behavior: smooth;
}

body {
   background-color: #E6F1BC;
   font-family: 'Franklin Gothic MediumJSI';
   padding: 0;
   margin: 0;
   cursor: default;
   overflow-x: hidden;
   min-height: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   scroll-behavior: smooth;
}

.soon {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.7);
   color: #032330;
   margin: auto;
   font-size: 50px;
   font-weight: bold;
   text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
   z-index: 10;
   padding: 230px 0px 0px 0px;
   box-sizing: border-box;
   letter-spacing: -2px;
}

.parallax__layer {
   position: relative;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   scroll-behavior: smooth;
}

.parallax__layer--base {
   transform: translateZ(0);
   scroll-behavior: smooth;
}

.parallax__layer--top {
   transform: translateZ(-0.5px) scale(1.5);
   scroll-behavior: smooth;
}

.parallax {
   perspective: 1px;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   scroll-behavior: smooth;
}

.weboldal {
   flex: 1 0 auto;
   scrollbar-width: 50px;
}

::-webkit-scrollbar {
   max-width: 50px;
}

::-webkit-scrollbar-track {
   border-radius: 0px;
   background-color: #4d4d4d;
}

::-webkit-scrollbar-thumb {
   box-shadow: inset 0 0 5px rgba(44, 44, 44, 0.486);
   border-radius: 100px;
   background-color: #B2D732;
}

::-webkit-scrollbar-thumb:active {
   box-shadow: inset 0 0 8px rgba(44, 44, 44, 0.486);
}

.neon::-webkit-scrollbar-track {
   background: #46556e;
}

.neon::-webkit-scrollbar-thumb {
   background-color: #08F7FE;
}

.nyari::-webkit-scrollbar-track {
   background: linear-gradient(180deg, #00FFFF -20%, #FAEBD7 50%, #00FFFF 120%);
}

.nyari::-webkit-scrollbar-thumb {
   background-color: #00FFFF;
}

.oszi::-webkit-scrollbar-thumb {
   background-color: #865221;
}

.oszi::-webkit-scrollbar-track {
   background-color: #d8c2a4;
}

.snow::-webkit-scrollbar-thumb {
   background-color: #65aecf;
}


.openbutton {
   background-color: transparent;
   position: absolute;
   font-size: 40px;
   left: 20px;
   top: 30px;
   cursor: pointer;
   transition: .7s;
   color: #032330;
   z-index: 3;
}

.openbutton:hover {
   transition: .2s;
   color: white;
}

#settingsbutton {
   background-color: transparent;
   margin-top: -132px;
   font-size: 30px;
   cursor: pointer;
   position: absolute;
   left: 80px;
   top: 168px;
   color: #032330;
   transition: .7s;
}

#settingsbutton:hover {
   transition: .2s;
   color: white;
}

#settings {
   position: absolute;
   font-size: 30px;
   color: #032330;
   float: left;
   top: 122px;
   left: 100px;
   margin-left: 20px;
   margin-top: -132px;
   z-index: 2;
}

#settings ul li {
   display: inline;
}

@media screen and (max-width: 460px) {
   #settings {
      top: 180px;
      left: -22px;
      margin-left: 0px;
   }
}

.setting-button {
   margin-left: -7.5px;
   transition: .7s;
   padding: 15px;
   border-bottom: 5px solid transparent;
   cursor: pointer;
   color: #032330;
}

.setting-button:hover {
   box-shadow: inset 0px 7px 7px rgba(0, 0, 0, 0.4);
   transition: .2s;
   border-bottom: 5px solid #032330;
}

.setting-button:active {
   box-shadow: inset 0px 12px 10px rgba(0, 0, 0, 0.4);
   transition: .1s;
   border-bottom: 5px solid #032330;
}

.dropdown-content {
   display: none;
   position: absolute;
   left: -26px;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.5);
   z-index: 3;
   font-size: 26px;
   cursor: default;
}

.dropdown-content-2 {
   left: 37px
}

.dropdown-content-3 {
   left: 99px
}

.dropdown-content-4 {
   left: 20px
}

@media screen and (max-width: 460px) {
   .dropdown-content {
      left: 99px;
   }
}

.setting-header {
   text-align: center;
   font-size: 25px;
   border-bottom: 5px solid #032330;
   text-shadow: 1px 2px #0000002d;
   background-color: #AFD425;
   padding-top: 1px;
}

.dropdown-text {
   color: #032330;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   transition: .5s;
   width: 140px;
   cursor: pointer;
}

.dropdown-text:hover {
   background-color: rgb(194, 194, 194);
   transition: .2s;
}

.dropdown-text-red:hover {
   background-color: #FE2712;
}

.dropdown-text-blue:hover {
   background-color: #0a698f;
}

.dropdown-text-green:hover {
   background-color: #AFD425;
}

.dropdown-text-alap:hover {
   background-color: #AFD425;
}

.dropdown-text-nyari:hover {
   background: linear-gradient(110deg, #00FFFF 30%, #FAEBD7 70%);
}

.dropdown-text-neon:hover {
   background-color: #46556e;
   color: #08F7FE;
}

.dropdown-text-Snow:hover {
   background-color: #cadae0;
}

.dropdown-text-oszi:hover {
   background: linear-gradient(110deg, #d8c2a4 30%, #865221 70%);
}

.tema-break {
   background-color: #7F1C2E;
   height: 5px;
   border: none;
   width: 100%;
   margin-bottom: 50px;
}

.tema-limited {
   text-align: center;
   position: absolute;
   top: 238px;
   left: 0;
   width: 100%;
   padding-top: 10px;
   padding-bottom: 10px;
   color: #7F1C2E;
   background-color: #FE2712;
   animation: temalimitedAN .6s ease infinite alternate-reverse;
}

@keyframes temalimitedAN {
   from {
      top: 238px;
   }

   to {
      top: 233px;
   }
}

.loginmodal {
   left: 25%;
   width: 300px;
   height: 550px;
   text-align: center;
}

.loginmodal-v2 {
   left: 25%;
   width: 300px;
   height: 100px;
   text-align: center;
}

.loginmodal-v3 {
   left: 15%;
   width: 300px;
   height: 100px;
   text-align: center;
}

.loginmodal .setting-header p {
   font-size: 40px;
}

.login-text {
   position: relative;
   top: 20px;
}

@media screen and (max-width: 510px) {
   .loginmodal {
      left: 40px;
   }
}

.login-input-text {
   text-align: center;
   width: 200px;
   height: 30px;
   display: block;
   margin: auto;
   margin-top: 30px;
   border: 5px solid transparent;
   background-color: transparent;
   border-radius: 50px 50px 0px 0px;
}

.login-input-text:focus {
   animation: logininputAN .4s ease forwards;
}

@keyframes logininputAN {
   0% {
      border-bottom: 5px solid transparent;
      border-radius: 50px;
   }

   100% {
      border: 5px solid transparent;
      border-bottom: 5px solid #032330;
      border-radius: 0px;
   }
}

.login-button {
   cursor: pointer;
   border: none;
   margin-top: 40px;
   background-color: #07384b;
   border: 5px solid #032330;
   color: white;
   border-radius: 100px;
   font-size: 20px;
   padding: 10px;
   transition: .7s;
   width: 50px;
   height: 60px;
}

.login-button::before {
   content: "✔";
}

.login-button:hover::before {
   content: "Bejelentkezés! ";
}

.login-button:hover {
   width: 200px;
   transition: .2s;
   left: 25%;
}

.login-footerlink {
   display: block;
   margin-top: 20px;
   cursor: pointer;
   font-size: 20px;
   color: #032330;
   text-decoration: none;
}

.login-footerlink:hover,
.register-footerlink:hover {
   text-decoration-color: #032330;
   text-decoration-style: dashed;
   text-decoration-line: underline;
}

#setting-close {
   margin-left: 20px;
   cursor: pointer;
}

.opener-button {
   transition: .7s;
}

.opener-button:hover {
   transition: .2s;
   color: white;
}

.sidenav {
   height: 100vh;
   width: 0;
   position: fixed;
   z-index: 101;
   top: 0;
   overflow-x: hidden;
   overflow-y: visible;
   transition: 0.5s;
   text-align: center;
   padding-top: 90px;
   box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.4);
   background: linear-gradient(to bottom right, #0a698f 30%, #33ccffb0 70%);
   transition-timing-function: ease-out;
}

a {
   text-decoration: none;
}

.sidenav a {
   text-decoration: none;
}

.sidenav .closebutton {
   background-color: transparent;
   position: absolute;
   color: #000;
   top: 10px;
   right: 20px;
   font-size: 46px;
   margin-left: 50px;
   transition: .7s;
   z-index: 10;
}

.sidenav .closebutton:hover {
   transition: .2s;
   color: white;
}

.sidenav::-webkit-scrollbar {
   width: 12px;
}

.sidenav::-webkit-scrollbar-track {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 50px;
   margin-top: 5%;
   margin-bottom: 15%;
}

.sidenav::-webkit-scrollbar-thumb {
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 50px;
}

.round-button {
   border: 2px solid #032330;
   background-color: #032330;
   color: white;
   font-weight: bold;
   padding: 15px 0px;
   font-size: 25px;
   border-radius: 5px;
   display: block;
   position: relative;
   width: 235px;
   height: 30px;
   transition: .7s;
   cursor: pointer;
   margin: auto;
   margin-bottom: 20px;
}

.round-button:hover {
   background: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, transparent 100%);
   transition: .2s;
   width: 255px;
   letter-spacing: 1.5px;
   border-color: white;
}

.round-button:active {
   background: linear-gradient(to left, rgba(255, 255, 255, .5) 0%, transparent 100%);
   transform: scale(0.9, 0.9);
   transition: .1s;
}

.categories {
   color: #032330;
   margin-left: 10px;
   margin-right: 10px;
   border-top: 5px solid #032330;
   border-bottom: 5px solid #032330;
   border-radius: 3px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   margin-top: 25px;
}

.categorytitle {
   position: relative;
   color: #032330;
   font-size: 40px;
   font-weight: bold;
   cursor: pointer;
   transition: 1s;
   text-align: center;
   top: 30px;
}

.categorytitle:hover {
   transition: .2s;
   color: white;
   letter-spacing: 2px;
}

.category-button {
   border: 2px solid #032330;
   background-color: #032330;
   color: white;
   font-weight: bold;
   padding: 14px 20px;
   font-size: 25px;
   border-radius: 5px;
   display: block;
   position: relative;
   width: 175px;
   height: 30px;
   transition: .7s;
   cursor: pointer;
   margin: auto;
   margin-bottom: 15px;
   text-align: left;
   padding-left: 50px;
   text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 354px) {
   .category-button {
      margin-left: -5%;
   }
}

.category-button:hover {
   background: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, transparent 100%);
   transition: .2s;
   width: 185px;
   letter-spacing: 1.5px;
   color: white;
}

.category-button:active {
   background: linear-gradient(to left, rgba(255, 255, 255, .5) 0%, transparent 100%);
   transform: scale(0.9, 0.9);
   transition: .1s;
}

.fa-map-marker {
   position: absolute;
   left: 15px;
   text-shadow: 0px 5px 11px rgba(0, 0, 0, 0.7);
   border-radius: 3px;
   transition: .7s;
}

.category-button:hover .fa-map-marker {
   border-bottom: 7px solid black;
   transition: .7s;
}


#jedlik-button:hover,
#vilag-button:hover,
#kozosseg-button:hover,
#jatek-button:hover,
#humor-button:hover,
#dokumentumok-button:hover,
#tudomany-button:hover,
#programozas-button:hover {
   color: white;
   border-color: white;
}

#jedlik-icon,
#jedlik-button {
   color: #6179e6;
   border-color: #6179e6;
}

#programozas-icon,
#programozas-button {
   color: #29aec2;
   border-color: #29aec2;
}

#vilag-icon,
#vilag-button {
   color: #30b433;
   border-color: #30b433;
}

#tudomany-icon,
#tudomany-button {
   color: #AFD425;
   border-color: #AFD425;
}

#humor-icon,
#humor-button {
   color: #e4b400;
   border-color: #e4b400;
}

#dokumentumok-icon,
#dokumentumok-button {
   color: #db7d25;
   border-color: #db7d25;
}

#jatek-icon,
#jatek-button {
   color: #db3150;
   border-color: #db3150;
}

#kozosseg-icon,
#kozosseg-button {
   color: #b137c4;
   border-color: #b137c4;
}

.category-dropdown {
   position: absolute;
   width: auto;
   height: auto;
   background-color: #AFD425;
   border-radius: 10px;
   padding: 5px;
   top: 0px;
   left: 330px;
   right: none;
   font-size: 16px;
   color: #032330;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
   text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   display: none;
   z-index: 200;
   transition: 1s;

   animation: categoryDropdownAN .1s ease-in forwards;
   animation-play-state: paused;
}

@keyframes categoryDropdownAN {
   from {
      transform: scale(1.3, 1.3);
      opacity: 0;
   }

   to {
      transform: scale(1, 1);
      opacity: 1;
   }
}

#jedlik-dd {
   background-color: #6179e6;
   top: 305px;
}

#programozas-dd {
   background-color: #29aec2;
   top: 385px;
}

#vilag-dd {
   background-color: #30b433;
   top: 465px;
}

#tudomany-dd {
   background-color: #AFD425;
   top: 545px;
}

#humor-dd {
   background-color: #e4b400;
   top: 625px;
}

#schooltura-dd {
   background-color: #db7d25;
   top: 705px;
}

#eworld-dd {
   background-color: #db3150;
   top: 785px;
}

#kozosseg-dd {
   background-color: #b137c4;
   top: 865px;
}

@media screen and (max-width: 1262px) and (min-width: 900px) {

   #jedlik-dd,
   #programozas-dd,
   #vilag-dd,
   #tudomany-dd,
   #humor-dd,
   #schooltura-dd,
   #eworld-dd,
   #kozosseg-dd {
      top: 335px;
      left: 30px;
   }
}

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

   #jedlik-dd,
   #programozas-dd,
   #vilag-dd,
   #tudomany-dd,
   #humor-dd,
   #schooltura-dd,
   #eworld-dd,
   #kozosseg-dd {
      top: 360px;
      left: 15px;
   }
}


.nav-footer-button {
   margin-bottom: 200px;
}


.nav-footer-arrow {
   font-size: 200px;
   color: #032330;
   position: absolute;
   padding: 0;
   bottom: -400px;
   margin: auto;
   left: 0;
   right: 0;
   margin-bottom: 0px;
   cursor: default;
   /*animation: arrowAN 2s ease infinite forwards alternate;*/
   z-index: -2;
}

@keyframes arrowAN {
   0% {
      transform: translateY(-90px) rotateZ(-30deg);
   }

   30% {
      transform: translateY(-20px) rotateZ(45deg);
   }

   60% {
      transform: translateY(20px) rotateZ(-45deg);
   }

   100% {
      transform: translateY(40px) rotateZ(0deg);
   }
}

#discord-nav-button {
   background: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, transparent 100%);
   background-color: #7289DA;
   border-color: #7289DA;
}

#discord-nav-button:hover {
   background-color: transparent;
   border-color: white;
}

#discord-nav-button:active {
   background: linear-gradient(to left, rgba(255, 255, 255, .5) 0%, transparent 100%);
}

#jelentkezz-button {
   margin-bottom: 400px;
   animation: jbAN 4s infinite forwards reverse;
   background-color: #032330;
   border-color: #030303;
}

#jelentkezz-button:hover {
   background-color: transparent;
   border-color: white;
}

@keyframes jbAN {
   0% {
      transform: scale(1, 1);
      background-color: #032330;
      border-color: #030303;
   }

   80% {
      /*90% a gyors*/
      transform: scale(1, 1);
      background-color: #032330;
      border-color: #030303;
   }

   100% {
      transform: scale(1.1, 1);
      background-color: #AFD425;
      border-color: #AFD425;
   }
}

.categories {
   color: #032330;
   margin-left: 10px;
   margin-right: 10px;
   border-top: 5px solid #032330;
   border-bottom: 5px solid #032330;
   border-radius: 3px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   margin-top: 25px;
}

.cikkbox:hover .cikktitlebox2 {
   width: 150.8px;
   margin-left: 260px;
}


.cikkbox:hover .cikkcategorytitle {
   animation: discordtextAN 1s;
   animation-delay: .5s;
   animation-fill-mode: forwards;
   visibility: visible;
   font-size: 25px;
}

@keyframes cikkcategorytitleAN {
   from {
      color: transparent;
   }

   to {
      color: white;
   }
}



.timer-box {
   position: fixed;
   top: 50px;
   margin: auto;
   left: 0;
   right: 0;
   width: 70%;
   z-index: 100;
   background-color: rgba(174, 212, 37, .95);
   border: 15px solid #032330;
   border-radius: 20%;
   padding: 30px;
   box-shadow: 0px 0px 80px rgba(0, 0, 0, 1);
}

.timer-title {
   font-size: 80px;
   text-align: center;
   text-transform: uppercase;
   margin: 0px;
   margin-bottom: 20px;
   color: #032330;
   text-shadow: 0px 10px 25px rgba(0, 0, 0, .4);
}

.timer-text {
   font-size: 40px;
   text-align: center;
   margin: 0 20px;
   color: #032330;
}

.timer-countdown {
   font-size: 60px;
   text-align: center;
   margin: 0;
   color: #032330;
   text-transform: uppercase;
   font-weight: bold;
   margin: 50px 0;
   background: radial-gradient(closest-side at 50% 50%, white -50%, transparent 100%);
}

.timer-close {
   position: absolute;
   top: -20px;
   right: 60px;
   font-size: 70px;
   cursor: pointer;
   color: #7F1C2E;
   padding: 0;
   transition: 1s;
}

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

   .timer-title,
   .timer-text {
      margin: 0;
      margin-right: 50px;
   }

   .timer-box {
      width: 100%;
      height: 100%;
      border-radius: 0px;
      top: 0;
      border: none;
   }

   .timer-title {
      font-size: 50px;
   }

   .timer-text {
      font-size: 30px;
   }

   .timer-countdown {
      margin-right: 50px;
      margin-top: 15px;
      margin-bottom: 20px;
   }

   .timer-close {
      top: -60px;
      right: 80px;
   }
}

.timer-close:hover {
   color: white;
   transition: .2s;
}


.search[type=text] {
   width: 180px;
   box-sizing: border-box;
   border: 4px solid #8ead1f;
   font-size: 16px;
   background-color: #E6F1BC;
   padding: 12px 20px 12px 12px;
   transition: width .4s ease-in-out;
   position: absolute;
   right: 20px;
   top: 20px;
   box-shadow: 5px 5px #0000002d;
   border-radius: 50px 0px 0px 50px;
   transition: .4s;
}

.search[type=text]:hover {
   width: 400px;
}

.search[type=text]:focus {
   mix-blend-mode: multiply;
}

.search[type=text]::placeholder {
   color: #032330ad;
   font-weight: bold;
}

.discord {
   padding: 10px;
   right: 20px;
   top: 150px;
   height: 100px;
   width: 100px;
   background-color: #7289DA;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
   transition: .9s;
   padding-top: 15px;
   border-radius: 50px;
   transition-timing-function: ease;
   object-fit: contain;
   position: absolute;
   z-index: 1;
}

.discord:hover {
   padding-right: 200px;
   width: 150px;
   top: 150px;
   right: 20px;
   transition: .5s;
}

.discordimg {
   position: absolute;
   height: 100px;
   width: 100px;
   transition: .2s;
}

@keyframes discordtextAN {
   0% {
      color: white;
      opacity: 0;
   }

   100% {
      color: white;
      opacity: 1;
   }
}

.discord:hover .discordimg {
   transform: rotateZ(-15deg);
   transition: .2s;
   transition-timing-function: ease-out;
}

.discordtext {
   position: absolute;
   color: transparent;
   font-weight: bold;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   transition: .5s;
   transition-timing-function: ease-in-out;
   margin-top: 25px;
   visibility: hidden;
}

.discord:hover .discordtext {
   animation: discordtextAN 1.5s;
   animation-delay: .5s;
   animation-fill-mode: forwards;
   font-size: 40px;
   visibility: visible;
   margin-left: 100px;
}

.ytbutton {
   right: 55px;
   top: 90px;
   height: 50px;
   width: 50px;
   background-color: #FF0000;
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
   border-radius: 50px;
   position: absolute;
   text-align: center;
   color: white;
   font-size: 25px;
}

.ytbutton:hover {
   animation: ytAN 1.2s ease-in-out infinite alternate;
}

@keyframes ytAN {
   0% {
      color: white;
      background-color: #FF0000;
   }

   100% {
      color: #FF0000;
      background-color: white;
   }
}

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

   .nav-footer-arrow {
      bottom: 0;
      margin-bottom: 200px;
   }

   .sidenav {
      background: linear-gradient(to bottom right, #0a698f 60%, #33ccffb0 100%);
   }

   .about-title-line {
      margin-left: 10px;
      margin-right: 10px;
   }

   .discord {
      padding: 10px;
      left: 50px;
      top: 275px;
      height: 100px;
      width: 100px;
      background-color: #7289DA;
      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
      transition: .9s;
      padding-top: 15px;
      transition-timing-function: ease;
      object-fit: contain;
      position: absolute;
   }

   .discord:hover {
      padding-right: 10px;
      width: 100px;
      top: 265px;
      left: 50px;
      right: 20px;
   }

   .discord:hover .discordtext {
      animation: none;
      visibility: hidden;
      margin-left: 0px;
   }

   .ytbutton {
      right: 50px;
      top: 80px;
   }

   .categories {
      margin-left: 50px;
      margin-right: 50px;
      margin-bottom: 50px;
      margin-top: 50px;
   }

   .search[type=text] {
      /*width: 200px;
      height: 40px;
      box-sizing: border-box;
      border: none;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.7);
      font-weight: bold;
      border-top: 4px solid #7d981b;
      border-right: 4px solid #7d981b;
      padding: 12px 20px 12px 12px;
      position: fixed;
      right: auto;
      left: 0px;
      top: auto;
      bottom: 0px;
      transition: .4s;
      box-shadow: none;
      z-index: 100;
      transition: .8s ease-in-out;
      border-radius: 0px 50px 50px 0px;*/
      display: none;
   }

   .search[type=text]:hover {
      border: none;
      border-top: 4px solid #7d981b;
      border-right: 4px solid #7d981b;
      box-shadow: none;
   }

   .search[type=text]:focus {
      width: 100%;
      border: none;
      border-top: 4px solid #7d981b;
      box-shadow: none;
      border-radius: 0px;
      transition: .3s ease-in-out;
   }

}

@media screen and (max-width: 1262px) and (min-width: 900px) {

   /* Tablet */

   .nav-footer-arrow {
      bottom: 0;
      margin-bottom: 200px;
   }

   .sidenav {
      background: radial-gradient(farthest-side at 50% 0%, #0a698f 60%, #33ccffb0 200%);
   }

   .discord {
      padding: 10px;
      left: 0px;
      margin: auto;
      top: 275px;
      height: 100px;
      width: 100px;
      background-color: #7289DA;
      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
      transition: .9s;
      padding-top: 15px;
      transition-timing-function: ease;
      object-fit: contain;
      position: absolute;
   }

   .discord:hover {
      padding-right: 10px;
      width: 100px;
      top: 265px;
      left: 0px;
      right: 20px;
   }

   .discord:hover .discordtext {
      animation: none;
      visibility: hidden;
      margin-left: 0px;
      transform: rotateZ(0deg);
   }
}

@media screen and (max-width: 600px) {
   .discord {
      padding: 10px;
      padding-bottom: 15px;
      height: 60px;
      width: 60px;
      border-radius: 30px;
      top: 290px;
      left: 20px;
   }

   .discordimg {
      height: 70px;
      width: 70px;
      left: 5px;
      transform: rotateZ(0deg);
   }

   .discord:hover {
      padding: 10px;
      padding-bottom: 15px;
      height: 60px;
      width: 60px;
      border-radius: 30px;
      top: 290px;
      left: 20px;
   }
}

img {
   -webkit-user-drag: none;
}

::selection {
   background-color: transparent;
}

.neon::-webkit-scrollbar-track {
   background: #46556e;
}

.neon::-webkit-scrollbar-thumb {
   background-color: #08F7FE;
}


/*NYÁRI TÉMA*/

/*.neon::selection {
   background: linear-gradient(180deg, #00FFFF -20%, #FAEBD7 50%, #00FFFF 120%);
}*/

.nyari::-webkit-scrollbar-track {
   background: linear-gradient(180deg, #00FFFF -20%, #FAEBD7 50%, #00FFFF 120%);
}

.nyari::-webkit-scrollbar-thumb {
   background-color: #00FFFF;
}

.oszi::-webkit-scrollbar-track {
   background-color: #865221;
}

.oszi::-webkit-scrollbar-thumb {
   background-color: #d8c2a4;
}

#mainlogoL {
   transition: margin-left .5s;
   position: relative;
   top: 10px;
}

@media screen and (max-width: 600px) {
   #mainlogoL {
      visibility: hidden;
   }
}

#mainlogoS {
   transition: margin-left .5s;
   margin: auto;
   visibility: hidden;
}

@media screen and (max-width: 600px) {
   #mainlogoS {
      position: relative;
      top: -150px;
      visibility: visible;
   }
}

@media screen and (max-width: 321px) {
   #mainlogoS {
      left: -20px;
   }
}

@media screen and (max-width: 460px) {
   #mainlogoS {
      top: -120px;
   }

   .ytbutton {
      left: 120px;
      top: 300px;
   }
}

.titleheader {
   background-color: #AFD425;
   box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
   height: 320px;
   width: 100%;
}

#shady {
   z-index: 100;
   position: absolute;
   opacity: 0;
   visibility: hidden;
   width: 100%;
   transition: 0.5s;
   height: 100%;
}

.footer {
   width: 100%;
   background-color: #4d4d4d;
   color: #222222;
   flex-shrink: 0;
   padding-top: 10px;
   margin-top: 50px;
   padding-bottom: 20px;
}

.footertext {
   text-align: center;
}

h1.footertext {
   font-size: 40px;
   color: #8ead1f;
}

h2.footertext {
   font-size: 25px;
}

.credits {
   text-align: center;
   text-transform: uppercase;
   font-family: open sans, Arial, Helvetica, sans-serif;
   font-size: 15px;
}

hr.credits {
   border: 2px solid #222222;
   width: 500px;
}

@media screen and (max-width: 580px) {
   hr.credits {
      width: 250px;
   }
}

.back-to-the-top {
   position: fixed;
   bottom: 50px;
   right: 20px;
   z-index: 100;
   width: 70px;
   height: 70px;
   color: #032330;
   background-color: #AFD425;
   border: 7px solid #AFD425;
   border-radius: 30px;
   text-align: center;
   font-size: 65px;
   transition: 1s;
   opacity: .9;

   box-shadow: 0px 10px 0px rgb(133, 158, 41);
}

.back-to-the-top:hover {
   transition: .1s;
   opacity: .8;
}

.back-to-the-top:active {
   transition: .05s;
   bottom: 44px;
   box-shadow: 0px 4px 0px rgb(133, 158, 41);
}

.load-moar {
   text-align: center;
   padding: 12px;
   font-size: 25px;
   cursor: pointer;
   width: 180px;
   padding-top: 17px;
   height: 30px;
   margin: 80px auto;
   color: #032330;
   background-color: #AFD425;
   border-radius: 10px;
   letter-spacing: 1px;
   text-transform: uppercase;
   transition: 1.5s;
}

.load-moar:hover {
   transition: .3s;
   letter-spacing: 3px;
   color: white;
   text-shadow: 0 0 20px 10px white;
   box-shadow: 0 0 10px #AFD425, 0 0 40px #AFD425, 0 0 80px #AFD425;
}

/* 
.easter-egg {
   position: fixed;
   bottom: 0px;
   z-index: 10;
   width: 300px;
   left: -300px;
   animation: PepeAN 1s 2s ease-in forwards;
}

@keyframes PepeAN {
   0% {
      left: -300px;
   }
   100% {
      left: 0px;
   }
}

.back-to-the-top:hover ~ .easter-egg {
   left: 0;
   background-color: #032330;
} */

.verseny-title {
   position: absolute;
   top: 275px;
   font-size: 35px;
   margin: auto;
   right: 0;
   left: 0;
   color: white;
   text-align: center;
   height: 0;
   width: 390px;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   border-bottom: 40px solid #032330;
   cursor: pointer;
   z-index: 2;
   transition: .8s;
}

.verseny-title:hover {
   transition: .2s;
   letter-spacing: 1px;
}

.verseny-title:active {
   transition: .1s;
   transform: scale(.9, .9);
   top: 290px;
}

.verseny-line {
   position: absolute;
   width: 100%;
   height: 20px;
   background-color: #032330;
   top: 310px;
   z-index: 1;
   box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
}

@media screen and (max-width: 1262px) {
   .verseny-title {
      top: 290px;
      margin: 0;
      left: 58%;
      font-size: 25px;
      width: 300px;
   }
}

@media screen and (max-width: 899px) {
   .verseny-title {
      top: 290px;
      left: 200px;
   }
}

@media screen and (max-width: 600px) {
   .verseny-title {
      top: 290px;
      left: 110px;
   }
}

@media screen and (max-width: 460px) {
   .verseny-line {
      display: none;
   }

   .verseny-title {
      top: 290px;
      margin: 0;
      left: 200px;
      font-size: 20px;
      border: none;
      background-color: #032330;
      border-radius: 50%;
      height: 90px;
      padding-top: 10px;
      width: 100px;
   }
}

/*Verseny.html*/

.ver-title-bg1 {
   position: absolute;
   background-color: #032330;
   width: 55%;
   height: 1000px;
   top: 300px;
   left: 0%;
   border-radius: 0 0 100% 0;
   box-sizing: border-box;
   animation: verAN1 1s 1s ease-in-out forwards;
   z-index: -3;
}

.ver-title-bg2 {
   position: absolute;
   background-color: #032330;
   width: 55%;
   height: 1000px;
   top: 300px;
   right: 0%;
   border-radius: 0 0 0 100%;
   box-sizing: border-box;
   animation: verAN2 1s 1s ease-in-out forwards;
   z-index: -3;
}

@keyframes verAN1 {
   0% {
      left: 0%;
   }

   30% {
      left: -10%;
   }

   60% {
      left: -10%;
   }

   100% {
      left: -30%;
      box-shadow: 10px 0px 100px black;
   }
}

@keyframes verAN2 {
   0% {
      right: 0%;
   }

   30% {
      right: -10%;
   }

   60% {
      right: -10%;
   }

   100% {
      right: -30%;
      box-shadow: -10px 0px 50px rgba(0, 0, 0, .6);
   }
}

.ver-intro {
   position: absolute;
   font-size: 70px;
   top: 500px;
   color: white;
   line-height: 120%;
   left: 0;
   right: 0;
   margin: auto;
   z-index: -4;
   width: fit-content;
   height: fit-content;
   width: -moz-fit-content;
   height: -moz-fit-content;
   transform: rotateZ(-6deg);
   text-shadow: 5px -5px rgba(0, 0, 0, .5);
}

@media screen and (max-width: 778px) {
   .ver-intro {
      font-size: 40px;
   }
}

@media screen and (max-width: 468px) {
   @keyframes verAN1 {
      0% {
         left: 0%;
      }

      30% {
         left: -10%;
      }

      60% {
         left: -10%;
      }

      100% {
         left: -40%;
      }
   }

   @keyframes verAN2 {
      0% {
         right: 0%;
      }

      30% {
         right: -10%;
      }

      60% {
         right: -10%;
      }

      100% {
         right: -40%;
      }
   }
}

.ver-box {
   background-color: #0a698f;
   position: absolute;
   box-shadow: 10px 10px 5px 10px rgba(0, 0, 0, .1),
      -10px -10px 5px 10px #107aa3;
}

.ver-box-white {
   background-color: #eaeaea;
   position: absolute;
   box-shadow: 6px 6px 12px 10px rgba(0, 0, 0, .1),
      -6px -6px 12px 10px white;
}

.ver-box1 {
   z-index: -5;
   border-radius: 100%;
   width: 300px;
   height: 300px;
   top: 1840px;
   right: 100px;
   box-shadow: inset 10px 10px 5px 10px rgba(0, 0, 0, .1),
      inset -10px -10px 5px 10px #107aa3;
}

.ver-box2 {
   z-index: -5;
   border-radius: 100% 5%;
   width: 300px;
   height: 300px;
   top: 2340px;
   right: 0;
   left: 0;
   margin: auto;
}

.ver-box3 {
   z-index: -5;
   border-radius: 0 100px 100px 0;
   max-width: 700px;
   height: 200px;
   top: 2040px;
   left: 0;
   right: 0;
}

.ver-box4 {
   position: static;
   margin-left: 100px;
   margin-bottom: 80px;
   border-radius: 60px;
   width: 300px;
   height: 300px;
   transform: skewY(6deg);
   box-shadow: inset 10px 10px 5px 10px rgba(0, 0, 0, .1),
      inset -10px -10px 5px 10px white;
}

.ver-bg1 {
   position: absolute;
   top: 2740px;
   width: 100%;
   height: fit-content;
   min-height: 840px;
   z-index: -6;
   background-color: #eaeaea;
   transform: skewY(-6deg);
}

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

   .ver-box1,
   .ver-box2,
   .ver-box3 {
      transform: scale(.6, .6);
   }

   .ver-box1 {
      right: -100px;
      left: auto;
      top: 1200px;
   }

   .ver-box2 {
      top: 1600px;
   }

   .ver-box3 {
      left: -140px;
      top: 1400px;
   }

   .ver-box4 {
      transform: skewY(6deg) scale(.6, .6);
      margin-left: 50px;
      margin-bottom: 40px;
   }

   .ver-bg1 {
      top: 1900px;
   }

   .ver-title-bg1,
   .ver-title-bg2 {
      height: 500px;
   }

   #verFooter {
      margin-top: -2000px;
   }
}

.ver-title1 {
   position: absolute;
   text-align: center;
   z-index: 1;
   font-size: 100px;
   mix-blend-mode: overlay;
   top: 1970px;
   color: white;
   margin-left: 50px;
   text-shadow: 0px 0 7px rgba(255, 255, 255, .3);
}

.ver-title2 {
   position: absolute;
   text-align: center;
   z-index: 1;
   font-size: 75px;
   mix-blend-mode: overlay;
   top: 2380px;
   color: white;
   margin: auto;
   left: 50px;
   right: 50px;
   text-shadow: 0px 0 7px rgba(255, 255, 255, .3);
}

.ver-title3 {
   text-align: center;
   font-size: 70px;
   margin: 4600px 40px 0 40px;
   color: white;
   left: 50px;
   right: 50px;
}

.ver-info {
   font-size: 50px;
   top: 2300px;
   color: #0a698f;
   text-align: center;
   margin: auto;
   z-index: 10;
   margin: 150px 50px 50px 50px;
   transform: skewY(6deg);
   text-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
}

.ver-info-button {
   position: absolute;
   font-size: 100px;
   top: 1100px;
   color: white;
   text-align: center;
   width: fit-content;
   margin: auto;
   z-index: 13;
   left: 0;
   right: 0;
   cursor: pointer;
   transition: 1s;
   padding: 10px;
}

.ver-info-button:hover {
   color: #0a698f;
   box-shadow: inset 0 -1.15em 0 white;
   border-radius: 50px;
   transition: .2s;
   letter-spacing: 5px;
}

@media screen and (max-width: 1200px) {
   .ver-title1 {
      font-size: 70px;
   }
}

@media screen and (max-width: 650px) {
   .ver-title3 {
      margin-top: 3400px;
   }
}

@media screen and (max-width: 600px) {
   .ver-title1 {
      font-size: 50px;
      margin-left: 10px;
      top: 1330px;
   }

   .ver-title2 {
      font-size: 50px;
      top: 1700px;
      left: 20px;
      right: 20px;
   }

   .ver-title3 {
      font-size: 50px;
      margin: 2500px 0 0 0;
   }

   .ver-info {
      font-size: 35px;
      margin: 100px 20px 20px 20px;
   }

   .ver-info-button {
      top: 900px;
      font-size: 70px;
   }
}

@media screen and (max-width: 388px) {
   .ver-title3 {
      margin-top: 2700px;
   }
}

.ver-award {
   border: 4px solid #0a698f;
   background-color: #0a698f28;
   border-radius: 50px;
   padding: 30px;
   margin-bottom: 20px;
   list-style-position: inside;
   list-style-type: disc;
}

.ver-award b {
   font-size: 125%;
   color: white;
   background-color: #0a698f;
   border-radius: 100px;
}

.ver-award li {
   margin-top: 15px;
   margin-bottom: 30px;
}

.ver-role {
   color: white;
   border-radius: 50px;
}

#demo {
   position: absolute;
   top: 1080px;
   margin: auto;
   left: 0;
   right: 0;
   text-align: center;
   color: white;
   z-index: -10;
   font-size: 5vw;
}

.demo-title {
   position: absolute;
   top: 1000px;
   margin: auto;
   left: 0;
   right: 0;
   text-align: center;
   color: white;
   z-index: -10;
   font-size: 5vw;
}

@media screen and (max-width: 600px) {
   .ver-award-box {
      font-size: 70%;
   }

   .ver-award b {
      border-radius: 0 0 100px 0;
   }

   .ver-award {
      padding: 0px;
      margin: 0px;
      margin-top: 50px;
      box-shadow: none;
      border: none;
      border-radius: 0;
      border-top: 5px solid #0a698f;
      background: none;
   }

   #demo {
      font-size: 8vw;
      top: 850px;
   }

   .demo-title {
      font-size: 8vw;
      top: 850px;
   }
}



/*CikkDisplay ami ha megnyitsz egy cikket*/

.cd {
   position: absolute;
   top: 450px;
   width: 80%;
   height: fit-content;
   padding: 20px;
   right: 0px;
   background-color: #AFD425;
   box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.4);

   font-size: 55px;
   text-transform: uppercase;
   color: #032330;
   text-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4);
   line-height: 1;
   z-index: 3;
   text-align: center;
}

.cd-bg {
   height: 550px;
   position: absolute;
   width: 100%;
   background-color: #032330;
   z-index: -2;
   transform: skewY(6deg);
}

.cd-img {
   position: absolute;
   z-index: -5;
   min-width: 100%;
   height: 350px;
   object-fit: cover;
   top: 350px;
}

.cd-img-bg {
   position: absolute;
   z-index: -4;
   min-width: 100%;
   height: 100px;
   top: 600px;
}

.cd-img-bg-jedlik {
   background: linear-gradient(to bottom, transparent 0%, #6179e6 120%);
}

.cd-img-bg-programozas {
   background: linear-gradient(to bottom, transparent 0%, #29aec2 120%);
}

.cd-img-bg-vilag {
   background: linear-gradient(to bottom, transparent 0%, #30b433 120%);
}

.cd-img-bg-tudomany {
   background: linear-gradient(to bottom, transparent 0%, #AFD425 120%);
}

.cd-img-bg-humor {
   background: linear-gradient(to bottom, transparent 0%, #e4b400 120%);
}

.cd-img-bg-schooltura {
   background: linear-gradient(to bottom, transparent 0%, #db7d25 120%);
}

.cd-img-bg-jatek {
   background: linear-gradient(to bottom, transparent 0%, #db3150 120%);
}

.cd-img-bg-kozosseg {
   background: linear-gradient(to bottom, transparent 0%, #b137c4 120%);
}

.cd-info {
   position: absolute;
   width: 400px;
   height: fit-content;
   background-color: #AFD425;
   right: 50px;
   top: 450px;
   box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.4);
   z-index: 1;
   padding-top: 150px;
}

.cd-jedlik {
   background-color: #6179e6;
}

.cd-programozas {
   background-color: #29aec2;
}

.cd-vilag {
   background-color: #30b433;
}

.cd-tudomany {
   background-color: #AFD425;
}

.cd-humor {
   background-color: #e4b400;
}

.cd-schooltura {
   background-color: #db7d25;
}

.cd-jatek {
   background-color: #db3150;
}

.cd-kozosseg {
   background-color: #b137c4;
}


.cd-info-title {
   text-align: center;
   font-size: 50px;
   color: #032330;
   text-shadow: -3px -3px 10px rgba(0, 0, 0, 0.4);
}

.cd-info-content {
   font-size: 25px;
   color: #032330;
   box-shadow: inset 0 5px 10px rgba(0, 0, 0, .4);
   border-radius: 10px;
   margin: 10px;
   padding: 7px;
   background: radial-gradient(farthest-side at 50% 0%, rgba(255, 255, 255, .4) 10%, transparent 100%);
   transition: .2s;
   text-align: left;
}

#articleBody {
   position: relative;
   top: 55px;
   margin: 300px 30% 100px 50px;
   font-size: 26px;
   color: #032330;
   cursor: text;
}


.article-jedlik::selection,
.article-jedlik span::selection {
   color: #6179e6;
   background-color: #0323301c;
}

.article-programozas::selection,
.article-programozas span::selection {
   color: #29aec2;
   background-color: #0323301c;
}

.article-vilag::selection,
.article-vilag span::selection {
   color: #30b433;
   background-color: #0323301c;
}

.article-tudomany::selection,
.article-tudomany span::selection {
   color: #AFD425;
   background-color: #0323301c;
}

.article-humor::selection,
.article-humor span::selection {
   color: #e4b400;
   background-color: #0323301c;
}

.article-schooltura::selection,
.article-schooltura span::selection {
   color: #db7d25;
   background-color: #0323301c;
}

.article-jatek::selection,
.article-jatek span::selection {
   color: #db3150;
   background-color: #0323301c;
}

.article-kozosseg::selection,
.article-kozosseg span::selection {
   color: #b137c4;
   background-color: #0323301c;
}

@media screen and (max-width: 1500px) {
   .cd-info {
      right: 0px;
   }

   .cd-info-title {
      margin-top: 75px;
   }

   #articleBody {
      margin-right: 40%;
   }
}

@media screen and (max-width: 1050px) {
   #articleBody {
      margin-right: 50px;
      text-align: justify;
   }

   .cd-info {
      margin: auto;
      width: 90%;
      position: static;
      padding-top: 0px;
   }

   .cd-info-title {
      margin-top: 35px;
   }
}

@media screen and (max-width: 750px) {
   .cd {
      width: 100%;
      font-size: 40px;
      padding: 20px 0;
      box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
   }

   #articleBody {
      margin-right: 20px;
      margin-left: 20px;
   }
}

/*KategoryDisplay ami ha megnyitsz egy kategóriát*/
.kated-bg {
   position: absolute;
   width: 100%;
   height: 600px;
   background-color: #032330;
   transform: skewY(-4deg);
   z-index: -2;
   box-shadow: 0px 10px 10px rgba(0, 0, 0, .4);
}

.kated-title-bg {
   position: absolute;
   width: 100%;
   height: 600px;
   background:
      linear-gradient(130deg, rgba(255, 255, 255, .6) 0%, transparent 30%);
   background-size: 400%;
   animation: katedDetailsAN 50s ease-in-out infinite;
   background-color: #333333;
   transform: skewY(4deg);
   z-index: -3;
   top: 200px;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, .3);
}

.kated-title-bg-jedlik {
   background-color: #6179e6;
}

.kated-title-bg-programozas {
   background-color: #29aec2;
}

.kated-title-bg-vilag {
   background-color: #30b433;
}

.kated-title-bg-tudomany {
   background-color: #AFD425;
}

.kated-title-bg-humor {
   background-color: #e4b400;
}

.kated-title-bg-schooltura {
   background-color: #db7d25;
}

.kated-title-bg-jatek {
   background-color: #db3150;
}

.kated-title-bg-kozosseg {
   background-color: #b137c4;
}

.kated-title {
   position: absolute;
   top: 400px;
   left: 0;
   right: 20%;
   text-align: center;
   font-size: 80px;
   color: white;
   text-transform: uppercase;
   transform: skewY(-4deg);
   margin-left: 20px;
}

.kated-details {
   font-size: 30px;
   color: white;
   position: absolute;
   top: 630px;
   left: 30%;
   right: 10%;
}

@media screen and (max-width: 550px) {
   .kated-title-bg {
      animation: none;
   }
}

@media screen and (max-width: 900px) {
   .kated-details {
      left: 5%;
   }
}

@media screen and (max-width: 600px) {
   .kated-title {
      font-size: 40px;
      top: 480px;
   }

   .kated-title-bg {
      height: 650px;
   }

   .kated-details {
      top: 600px;
   }
}

.kated-asset1 {
   position: absolute;
   margin: auto;
   left: 0;
   right: 0;
   height: 600px;
   width: 70%;
   background: linear-gradient(to right, #032330 0%, #032330 10%, transparent 10%, transparent 90%, #032330 90%, #032330 100%);
   top: 660px;
   z-index: -5;
   border-radius: 0 0 50px 50px;
   animation: LOAD_AN1 .5s ease-in-out forwards;
}

.kated-asset2 {
   position: absolute;
   margin: auto;
   left: 0;
   right: 0;
   width: 90%;
   height: 100px;
   background-color: #032330;
   border-radius: 100px;
   border: 15px dotted rgba(255, 255, 255, 0.3);
   box-shadow: 0 5px 20px 5px rgba(0, 0, 0, .7);
   top: 1000px;
   z-index: -5;
   color: white;
   font-size: 50px;
   text-align: center;
   padding-top: 50px;
   animation: LOAD_AN2 3s ease forwards;
   transition: .7s;
}

@keyframes LOAD_AN1 {
   0% {
      opacity: 0;
      margin-top: -500px;
   }

   60% {
      opacity: 1;
   }

   100% {
      margin-top: 0;
   }
}

@keyframes LOAD_AN2 {
   0% {
      opacity: 0;
      margin-top: -500px;
      width: 60%;
   }

   60% {
      opacity: 1;
   }

   90% {
      width: 60%;
   }

   100% {
      margin-top: 0;
      width: 90%;
   }
}

@media screen and (max-width: 419px) {
   .kated-asset2 {
      height: 150px;
   }
}

@media screen and (max-width: 830px) {
   .kated-asset1 {
      display: none;
      animation: none;
   }

   .kated-asset2 {
      animation: none;
   }
}

.nincs-cikk {
   position: absolute;
   margin: auto;
   left: 0;
   right: 0;
   width: fit-content;
   top: 1300px;
   color: #032330;
   font-size: 50px;
   text-align: center;
   z-index: -7;
}

.sad-smile {
   font-size: 200%;
   transform: rotateZ(90deg);
}

.sad-smile:before {
   content: ':(';
   animation: crying 3s infinite;
}

@keyframes crying {
   0% {
      content: ":'("
   }

   100% {
      content: ":("
   }
}

/*Kezdőlap weboldal*/

.cikkgrid {
   display: grid;
   grid-template-columns: auto auto auto;
   grid-template-rows: auto;
   grid-column-gap: 50px;
   grid-row-gap: 40px;
   justify-content: center;
   padding-top: 100px;
}

.cikkgrid>div {
   align-self: center;
   justify-self: center;
}

.cikkgrid>div:first-child {
   /* =  .cikkbox*/
   height: 500px;
   width: 1000px;
   grid-column-start: 1;
   grid-column-end: 4;
   margin-top: 50px;
}

.cikkgrid>div:first-child .cikkcategorytitle {
   margin-top: 20px;
}

.cikkgrid>div:first-child .cikktitle {
   font-size: 25px;
   padding-top: 20px;
}

.cikkgrid>div:first-child .cikkimg {
   height: 340px;
   margin-top: 9px;
}

.cikkgrid>div:first-child .cikktitlebox {
   height: 80px;
   margin-top: -25px;
   /*Egyenlő a .cikktitle font-size-jával, negatívban*/
}

.cikkgrid>div:first-child .cikktitlebox2 {
   border-bottom: 70px solid #AFD425;
   border-left: 40px solid transparent;
   margin-left: 910px;
   margin-top: -80px;
}

.cikkgrid>div:first-child .ckb-jedlik {
   border-bottom-color: #6179e6;
}

.cikkgrid>div:first-child .ckb-programozas {
   border-bottom-color: #29aec2;
}

.cikkgrid>div:first-child .ckb-vilag {
   border-bottom-color: #30b433;
}

.cikkgrid>div:first-child .ckb-tudomany {
   border-bottom-color: #AFD425;
}

.cikkgrid>div:first-child .ckb-humor {
   border-bottom-color: #e4b400;
}

.cikkgrid>div:first-child .ckb-schooltura {
   border-bottom-color: #db7d25;
}

.cikkgrid>div:first-child .ckb-jatek {
   border-bottom-color: #db3150;
}

.cikkgrid>div:first-child .ckb-kozosseg {
   border-bottom-color: #b137c4;
}

.cikkgrid>div:first-child:hover .cikktitlebox2 {
   margin-left: 809.8px;
}

.cikkbox:nth-child(n+8) {
   display: none;
}

.cikkbox {
   width: 440px;
   height: 350px;
   border: 6px solid #032330;
   border-radius: 5px;
   cursor: pointer;
   background-color: #032330;
   transition: .7s;
   opacity: 0;
   margin-top: 30px;

   animation: cikkBoxLOAD_AN 1s ease-out forwards;
}

@keyframes cikkBoxLOAD_AN {
   0% {
      opacity: 0;
      margin-top: 30px;
   }

   70% {
      opacity: 1;
   }

   100% {
      opacity: 1;
      margin-top: 0px;
   }
}

.cikkbox:hover .cikkcategorytitle {
   animation: discordtextAN 1s;
   animation-delay: .5s;
   animation-fill-mode: forwards;
   visibility: visible;
   font-size: 25px;
}

.cikkbox:active {
   transform: scale(.9, .9);
   transition: .1s;
}

@keyframes cikkcategorytitleAN {
   from {
      color: transparent;
   }

   to {
      color: white;
   }
}

.cikkbox:hover .cikktitlebox2 {
   width: 150.8px;
   margin-left: 260px;
}

.cikkcategory::after {
   content: "";
   clear: both;
   display: table;
}

.cikkcategory {
   box-sizing: border-box;
}

.cikktitlebox {
   background-color: #032330;
   height: 60px;
   width: 100%;
   margin-top: -20px;
}

.cikktitle {
   font-size: 20px;
   color: white;
   padding-top: 13px;
   padding-left: 10px;
   font-weight: bold;
   text-transform: uppercase;
   width: 260px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.cikktitlebox2 {
   border-bottom: 50px solid #AFD425;
   border-left: 30px solid transparent;
   margin-left: 360px;
   width: 50px;
   margin-top: -59px;
   transition: .5s;
}

.ckb-jedlik {
   border-bottom-color: #6179e6;
}

.ckb-programozas {
   border-bottom-color: #29aec2;
}

.ckb-vilag {
   border-bottom-color: #30b433;
}

.ckb-tudomany {
   border-bottom-color: #AFD425;
}

.ckb-humor {
   border-bottom-color: #e4b400;
}

.ckb-schooltura {
   border-bottom-color: #db7d25;
}

.ckb-jatek {
   border-bottom-color: #db3150;
}

.ckb-kozosseg {
   border-bottom-color: #b137c4;
}


.cikkcategorytitle {
   position: absolute;
   color: transparent;
   transition: .5s;
   margin-top: 10px;
   visibility: hidden;
   font-size: 1px;
}

.cikkimg {
   object-fit: cover;
   height: 210px;
   width: 100%;
   transition: 0.5s;
   margin-top: 9px;
}

.cikkfooter {
   position: relative;
   margin-top: -3px;
   margin-left: -6px;
   margin-bottom: 0px;
   background-color: #032330;
   height: 75px;
   width: 100%;
   border: 6px solid #032330;
   border-radius: 0 0 5px 5px;
   text-align: left;
   transition: .7s;
   z-index: 5;
}

.cf-jedlik {
   background-color: #6179e6;
   border-color: #6179e6;
}

.cf-programozas {
   background-color: #29aec2;
   border-color: #29aec2;
}

.cf-vilag {
   background-color: #30b433;
   border-color: #30b433;
}

.cf-tudomany {
   background-color: #AFD425;
   border-color: #AFD425;
}

.cf-humor {
   background-color: #e4b400;
   border-color: #e4b400;
}

.cf-schooltura {
   background-color: #db7d25;
   border-color: #db7d25;
}

.cf-jatek {
   background-color: #db3150;
   border-color: #db3150;
}

.cf-kozosseg {
   background-color: #b137c4;
   border-color: #b137c4;
}

h1.cikkfootertext {
   position: relative;
   display: block;
   font-size: 15px;
   color: white;
   transition: .5s;
   text-transform: uppercase;
   margin-bottom: -5px;
   padding-left: 10px;
   text-align: center;
}

h2.cikkfootertext {
   position: relative;
   display: block;
   font-size: 15px;
   color: white;
   font-weight: bold;
   transition: .5s;
   margin-bottom: -10px;
   padding-left: 10px;
   text-align: center;
}

p.cikkfootertext {
   position: relative;
   display: block;
   font-size: 15px;
   color: white;
   transition: .5s;
   margin-bottom: 0px;
   padding-left: 10px;
   text-align: center;
}

@media screen and (min-width: 1500px) {
   .cikkgrid>div:first-child:hover .cikkfooter {
      height: 340px;
      margin-top: -349px;
   }
}

@media screen and (max-width: 1500px) {
   .cikkgrid>div:first-child {
      grid-column-start: 1;
      grid-column-end: 3;
   }

   .cikkgrid>div:first-child:hover .cikkfooter {
      height: 340px;
      margin-top: -349px;
   }

   .cikkgrid>div:first-child .cikktitle {
      width: 800px;
   }

   .cikkgrid {
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
   }

   .about-title-line {
      background: linear-gradient(to right, #032330 25%, transparent 25%, transparent 75%, #032330 75%);
   }

}

@media screen and (max-width: 1023px) {
   .cikkgrid>div:first-child {
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkgrid>div:first-child:hover .cikkfooter {
      height: 211px;
      margin-top: -220px;
   }

   .cikkgrid>div:first-child {
      height: 350px;
      width: 440px;
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkgrid>div:first-child .cikkcategorytitle {
      margin-top: 10px;
   }

   .cikkgrid>div:first-child .cikktitle {
      font-size: 20px;
      padding-top: 13px;
      width: 260px;
   }

   .cikkgrid>div:first-child .cikkimg {
      height: 210px;
   }

   .cikkgrid>div:first-child .cikktitlebox {
      height: 60px;
      margin-top: -20px;
      /*Egyenlő a .cikktitle font-size-jával, negatívban*/
   }

   .cikkgrid>div:first-child .cikktitlebox2 {
      border-bottom: 50px solid #AFD425;
      border-left: 30px solid transparent;
      margin-left: 360px;
      margin-top: -59px;
   }

   .cikkgrid>div:first-child .ckb-jedlik {
      border-bottom-color: #6179e6;
   }

   .cikkgrid>div:first-child .ckb-programozas {
      border-bottom-color: #29aec2;
   }

   .cikkgrid>div:first-child .ckb-vilag {
      border-bottom-color: #30b433;
   }

   .cikkgrid>div:first-child .ckb-tudomany {
      border-bottom-color: #AFD425;
   }

   .cikkgrid>div:first-child .ckb-humor {
      border-bottom-color: #e4b400;
   }

   .cikkgrid>div:first-child .ckb-schooltura {
      border-bottom-color: #db7d25;
   }

   .cikkgrid>div:first-child .ckb-jatek {
      border-bottom-color: #db3150;
   }

   .cikkgrid>div:first-child .ckb-kozosseg {
      border-bottom-color: #b137c4;
   }

   .cikkgrid>div:first-child:hover .cikktitlebox2 {
      margin-left: 260px;
   }

}

@media screen and (max-width: 490px) {
   .cikkgrid>div:first-child {
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkgrid>div:first-child:hover .cikkfooter {
      height: 211px;
      margin-top: -220px;
   }

   .cikkgrid>div:first-child {
      height: 420px;
      width: 280px;
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkcategorytitle {
      color: white;
      visibility: visible;
      font-size: 25px;
   }

   .cikkgrid>div:first-child .cikktitle {
      font-size: 20px;
      padding-top: 13px;
   }

   .cikkgrid>div:first-child .cikkimg {
      height: 210px;
      margin-top: 0;
   }

   .cikkgrid>div:first-child .cikktitlebox {
      height: 60px;
      margin-top: -20px;
      /*Egyenlő a .cikktitle font-size-jával, negatívban*/
   }

   .cikkgrid>div:first-child .cikktitlebox2 {
      border-bottom: 50px solid #AFD425;
      border-left: 30px solid transparent;
      margin-left: 200px;
      margin-top: -10px;
      margin-left: 0px;
      width: 250px;
   }

   .cikkgrid>div:first-child .ckb-jedlik {
      border-bottom-color: #6179e6;
   }

   .cikkgrid>div:first-child .ckb-programozas {
      border-bottom-color: #29aec2;
   }

   .cikkgrid>div:first-child .ckb-vilag {
      border-bottom-color: #30b433;
   }

   .cikkgrid>div:first-child .ckb-tudomany {
      border-bottom-color: #AFD425;
   }

   .cikkgrid>div:first-child .ckb-humor {
      border-bottom-color: #e4b400;
   }

   .cikkgrid>div:first-child .ckb-schooltura {
      border-bottom-color: #db7d25;
   }

   .cikkgrid>div:first-child .ckb-jatek {
      border-bottom-color: #db3150;
   }

   .cikkgrid>div:first-child .ckb-kozosseg {
      border-bottom-color: #b137c4;
   }

   .cikkgrid>div:first-child:hover .cikktitlebox2 {
      margin-left: 0px;
      width: 250px;
   }

   .cikkgrid>div {
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkgrid>div {
      height: 420px;
      width: 280px;
      grid-column-start: 1;
      grid-column-end: 2;
   }

   .cikkgrid>div .cikkcategorytitle {
      margin-top: 10px;
   }

   .cikkgrid>div .cikktitle {
      font-size: 20px;
      padding-top: 13px;
   }

   .cikkgrid>div .cikkimg {
      height: 210px;
      margin-top: 0;
   }

   .cikkgrid>div .cikktitlebox {
      height: 60px;
      margin-top: -20px;
      /*Egyenlő a .cikktitle font-size-jával, negatívban*/
   }

   .cikkgrid>div .cikktitlebox2 {
      border-bottom: 50px solid #AFD425;
      border-left: 30px solid transparent;
      margin-left: 200px;
      margin-top: -10px;
      margin-left: 0px;
      width: 250px;
   }

   .cikkgrid>div .ckb-jedlik {
      border-bottom-color: #6179e6;
   }

   .cikkgrid>div .ckb-programozas {
      border-bottom-color: #29aec2;
   }

   .cikkgrid>div .ckb-vilag {
      border-bottom-color: #30b433;
   }

   .cikkgrid>div .ckb-tudomany {
      border-bottom-color: #AFD425;
   }

   .cikkgrid>div .ckb-humor {
      border-bottom-color: #e4b400;
   }

   .cikkgrid>div .ckb-schooltura {
      border-bottom-color: #db7d25;
   }

   .cikkgrid>div .ckb-jatek {
      border-bottom-color: #db3150;
   }

   .cikkgrid>div .ckb-kozosseg {
      border-bottom-color: #b137c4;
   }

   .cikkgrid>div:hover .cikktitlebox2 {
      margin-left: 0px;
      width: 250px;
   }

   .cikkfooter {
      height: 110px;
   }

   .cikkcategory {
      background-color: #032330;
   }
}

.cikkbox:hover .cikkfooter {
   transition: .2s;
   height: 211px;
   margin-top: -220px;
   opacity: .85;
   border-color: #032330;
}

.cikkbox:hover .cikkfootertext {
   transition: .2s;
   font-size: 120%;
   letter-spacing: 2px;
}

.cikkbox:hover .cikkfootertext:first-child {
   transition: .2s;
   padding-top: 80px;
}

/*Rólunk weboldal */

.about-box {
   text-align: center;
   padding-top: 130px;
   color: #032330;
}

.about-title {
   font-size: 80px;
   padding: 0px 40px;
   width: 300px;
   margin: auto;
   margin-bottom: -30px;
   color: white;
   text-align: center;
   background-color: #032330;
}

.about-title-line {
   position: relative;
   top: -20px;
   height: 10px;
   background: linear-gradient(to right, #032330 35%, transparent 35%, transparent 65%, #032330 65%);
   margin-left: 60px;
   margin-right: 60px;
   border: none;
}

.about-title-bg {
   width: 0;
   height: 0;
   border-left: 250px solid transparent;
   border-right: 250px solid transparent;
   border-top: 250px solid #032330;
   border-radius: 100px;
   position: relative;
   top: -100px;
   z-index: -1;
   margin: auto;

}

.about-bg {
   position: absolute;
   z-index: -2;
   background-color: #07384b;
   top: 318px;
   height: 505px;
   width: 100%;
   box-shadow: inset 0px 0px 2em black;
}

.about-subtitle {
   font-size: 60px;
   border: 5px solid transparent;
   border-bottom: 5px solid #032330;
   padding: 10px;
   width: fit-content;
   width: -moz-fit-content;
   margin: auto;
   border-radius: 50px;
   padding-top: 100px;
}

@media screen and (max-width: 1500px) {
   .about-title-line {
      background: linear-gradient(to right, #032330 25%, transparent 25%, transparent 75%, #032330 75%);
   }

}

@media screen and (max-width: 640px) {
   .about-title-line {
      visibility: hidden;
   }

   .about-title {
      font-size: 50px;
      padding: 0px;
      width: 250px;
   }

   .about-title-bg {
      border-left: 160px solid transparent;
      border-right: 160px solid transparent;
      border-top: 160px solid #032330;
      border-radius: 100px;
      position: relative;
      top: -70px;
   }

}

.about-text {
   position: relative;
   z-index: -3;
   background-color: #032330;
   color: white;
   padding: 300px 80px 100px 80px;
   margin-top: -155px;
   font-size: 20px;
   box-shadow: inset 0px 40px 50px rgba(0, 0, 0, 0.6);
}

.about-members-box {
   text-align: left;
}

.about-text-title {
   border-right: 40px solid transparent;
   border-bottom: 60px solid #032330;
   height: 0;
   font-size: 40px;
   padding-left: 20px;
   width: fit-content;
   width: -moz-fit-content;
   margin-bottom: 40px;
   margin-top: 60px;
   color: white;
}

@media screen and (max-width: 330px) {
   .about-text-title {
      font-size: 30px;
   }
}

.about-person {
   color: 032330;
   padding: 10px;
   padding-bottom: 50px;
   font-size: 25px;
   border-top: 4px solid #032330;
   background-color: transparent;
   height: 0px;
   width: fit-content;
   width: -moz-fit-content;
   border-left: 10px solid #032330;
   background: radial-gradient(farthest-side at 0% -50%, #032330 -100%, transparent 100%);
}

.about-person-short {
   color: 032330;
   padding: 10px;
   padding-bottom: 50px;
   margin: 0;
   font-size: 25px;
   background-color: transparent;
   height: 0px;
   width: fit-content;
   width: -moz-fit-content;
   border-left: 10px solid #032330;
   background: radial-gradient(farthest-side at -100% 50%, #032330 -100%, transparent 110%);
}

.about-magamrol {
   margin: -10px 40px 60px 40px;
   font-size: 20px;
}

@media screen and (max-width: 580px) {
   .about-person {
      height: 30px;
   }

}

@media screen and (max-width: 400px) {
   .about-person-tooLong {
      height: 58px;
   }

}

.highlight-blue-purple {
   text-decoration: underline dashed #6179e6;
}

.highlight-darkgreen {
   text-decoration: underline dashed #249b26;
}

.highlight-purple {
   text-decoration: underline dashed #b137c4;
}

.highlight-red {
   text-decoration: underline dashed #db3150;
}

.highlight-yellow {
   text-decoration: underline dashed #e4b400;
}

.highlight-orange {
   text-decoration: underline dashed #db7d25;
}

.highlight-lightgreen {
   text-decoration: underline dashed #AFD425;
}

.highlight-blue-green {
   text-decoration: underline dashed #29aec2;
}


.about-dc-bg1 {
   position: relative;
   width: 100%;
   height: 870px;
   background-color: #2C2F33;
   margin-top: 120px;
   margin-bottom: -800px;
   transform: skewY(-5deg);
   z-index: 0;
}

#dc {
   position: relative;
   color: white;
   /*#23272A, de jobb a black*/
   margin: auto;
   text-align: center;
   font-size: 45px;
   top: -130px;
   left: 0px;
   z-index: 3;
}

.about-dc-bg2 {
   position: relative;
   top: 120px;
   width: 100%;
   height: 170px;
   background-color: #7289DA;
   transform: skewY(-5deg);
   z-index: 4;
   mix-blend-mode: darken;
}

#dc-short {
   text-transform: uppercase;
   color: white;
   /*#7289DA*/
   font-size: 200%;
   text-shadow: 5px 5px 15px rgba(0, 0, 0, .8);
}

@media screen and (max-width: 700px) {
   #dc-short {
      font-size: 150%;
   }
}

.about-dc-frame {
   position: relative;
   top: -50px;
   left: 30px;
}

.about-dc-text {
   position: relative;
   color: white;
   text-align: center;
   font-size: 25px;
   top: -500px;
   left: 440px;
   margin-right: 45%;
}

@media screen and (max-width: 1000px) {
   .about-dc-bg1 {
      height: 1370px;
   }

   #dc {
      top: -630px;
   }

   .about-dc-frame {
      top: -550px;
      width: 90%;
   }

   .about-dc-text {
      top: -450px;
      left: 40px;
      margin-right: 15%;
   }
}


.about-thenks {
   text-align: center;
   font-size: 60px;
}

.about-thenks-person,
.about-thenks-person-tooLong {
   color: #032330;
   padding-left: 10px;
   padding-right: 10px;
   font-size: 25px;
   border-top: 10px solid transparent;
   border-bottom: 40px solid white;
   border-right: 25px solid transparent;
   border-left: 25px solid transparent;
   height: 10px;
   width: fit-content;
   width: -moz-fit-content;
   margin: auto;
   margin-bottom: 40px;
   text-align: center;
}

@media screen and (max-width: 530px) {
   .about-thenks {
      font-size: 50px;
   }
}

@media screen and (max-width: 450px) {
   .about-thenks {
      font-size: 30px;
   }
}

@media screen and (max-width: 1155px) {
   .about-thenks-person-tooLong {
      border-bottom: 60px solid white;
   }
}

@media screen and (max-width: 669px) {
   .about-thenks-person {
      border-bottom: 60px solid white;
   }
}

@media screen and (max-width: 626px) {
   .about-thenks-person-tooLong {
      border-bottom: 80px solid white;
   }
}

@media screen and (max-width: 456px) {
   .about-thenks-person-tooLong {
      border-bottom: 115px solid white;
   }
}

@media screen and (max-width: 386px) {
   .about-thenks-person {
      border-bottom: 80px solid white;
   }
}

@media screen and (max-width: 392px) {
   .about-thenks-person-tooLong {
      border-bottom: 145px solid white;
   }
}

@media screen and (max-width: 341px) {
   .about-thenks-person {
      border-bottom: 115px solid white;
   }
}

/*Regisztráció*/

.registermodal {
   color: #032330;
   position: relative;
   width: 100%;
   height: 1500%;
   margin: auto;
   text-align: center;
   display: block;
   background-color: #f1f1f1;
   box-shadow: 6px 6px 16px 0px rgba(0, 0, 0, 0.4);
   font-size: 32px;
}

.registermodal .setting-header p {
   font-size: 40px;
   margin-bottom: 0px;
   background: radial-gradient(farthest-side at 50% 100%, #032330 -50%, transparent 50%);
}

.register-info {
   background-color: transparent;
   color: #032330;
   position: absolute;
   cursor: pointer;
   top: 20px;
   right: 20px;
   font-size: 46px;
   transition: .7s;
}

.register-info:hover {
   transition: .2s;
   color: white;
}

.register-infobox {
   border: 5px solid red;
   width: 40%;
   height: 500px;
   position: absolute;
   top: 110px;
   right: 20px;
}

.login-text {
   position: relative;
   top: 40px;
}

.login-input-text {
   text-align: center;
   width: 200px;
   height: 30px;
   display: block;
   margin-bottom: 30px;
   margin: auto;
   margin-top: 50px;
   border: 5px solid transparent;
   background-color: transparent;
   border-radius: 50px 50px 0px 0px;
}

.login-input-text:focus {
   animation: logininputAN .4s ease forwards;
}

.login-button {
   cursor: pointer;
   border: none;
   margin-top: 60px;
   background-color: #07384b;
   border: 5px solid #032330;
   color: white;
   border-radius: 100px;
   font-size: 20px;
   padding: 10px;
   transition: .7s;
   width: 50px;
   height: 60px;
}

.login-button::before {
   content: "✔";
}

.login-button:hover::before {
   content: "Bejelentkezés! ";
}

.login-button:hover {
   width: 200px;
   transition: .2s;
   left: 25%;
}

.login-footerlink {
   display: block;
   margin-top: 20px;
   margin-bottom: 10px;
   cursor: pointer;
   font-size: 20px;
   color: #032330;
   text-decoration: none;
}

.login-footerlink:hover,
.register-footerlink:hover {
   text-decoration-color: #032330;
   text-decoration-style: dashed;
   text-decoration-line: underline;
}

@media screen and (max-width: 350px) {
   .register-info {
      font-size: 35px;
      right: 10px;
   }
}

/*Jelentkezés Weboldal */
á .jelentkezes-box {
   text-align: center;
   padding-top: 700px;
   color: #032330;
}

.jelentkezes-hair {
   position: absolute;
   width: 600px;
   /*300*/
   height: 100px;
   left: 0;
   right: 0;
   margin: auto;
   top: 500px;
   z-index: 1;
   background: linear-gradient(135deg, #07384b 25%, transparent 25%) -50px 0,
      linear-gradient(225deg, #07384b 25%, transparent 25%) -50px 0,
      linear-gradient(315deg, #AFD425 25%, transparent 25%),
      linear-gradient(45deg, #AFD425 25%, transparent 25%);
   background-size: 100px 100px;
   background-color: #AFD425;
}



.jelentkezes-title {
   position: absolute;
   font-size: 60px;
   background: radial-gradient(farthest-side at 50% 50%, white -30%, transparent 40%);
   background-color: #032330;
   box-sizing: border-box;
   color: white;
   width: 600px;
   left: 0;
   right: 0;
   margin: auto;
   text-align: center;
   top: 720px;
   padding: 80px 10px;
   border-radius: 40%;
   z-index: 1;
}

.jelentkezes-mouth {
   position: absolute;
   width: 150px;
   height: 30px;
   background-color: #032330;
   border-radius: 0 0 50% 50%;
   left: 0;
   right: 0;
   margin: auto;
   top: 1030px;
   z-index: 1;
}

.jelentkezes-eye {
   position: absolute;
   width: 600px;
   height: 600px;
   background-color: #AFD425;
   border-radius: 0 0 50% 50%;
   left: 0;
   right: 0;
   margin: auto;
   top: 500px;
   z-index: 0;
}

.jelentkezes-neck {
   position: absolute;
   left: 0;
   right: 0;
   width: 30px;
   height: 80px;
   background-color: #AFD425;
   margin: auto;
   top: 1090px;
}

.jelentkezes-bg {
   position: absolute;
   top: 100px;
   background-color: #07384b;
   width: 100%;
   height: 1250px;
   z-index: -3;
   transform: skewY(-6deg);
}

.jelentkezes-body {
   position: absolute;
   width: 400px;
   height: 550px;
   background-color: #AFD425;
   margin: auto;
   left: 0;
   right: 0;
   top: 1150px;
   border-radius: 20rem 20rem 0 0;
}

.jelentkezes-shorts-legs {
   top: 1750px;
   left: 0;
   right: 0;
   position: absolute;
   width: 360px;
   height: 200px;
   background: linear-gradient(to right, #07384b 60px, transparent 60px, transparent 300px, #07384b 300px);
   margin: auto;
}

.jelentkezes-shorts {
   top: 1650px;
   left: 0;
   right: 0;
   position: absolute;
   width: 400px;
   height: 100px;
   background-color: #07384b;
   margin: auto;
}

.jelentkezes-legs {
   top: 1950px;
   left: 0;
   right: 0;
   position: absolute;
   width: 340px;
   height: 200px;
   background: linear-gradient(to right, #AFD425 40px, transparent 40px, transparent 300px, #AFD425 300px);
   margin: auto;
   z-index: -1;
}

.jelentkezes-shoulders {
   top: 1250px;
   position: absolute;
   width: 480px;
   height: 100px;
   background: linear-gradient(to right, #AFD425 65px, transparent 65px, transparent 415px, #AFD425 415px);
   margin: auto;
   border-radius: 20rem 20rem 0 0;
   z-index: 0;
   left: 0;
   right: 0;
}

.jelentkezes-arms {
   top: 1350px;
   position: absolute;
   width: 480px;
   height: 200px;
   background: linear-gradient(to right, #AFD425 65px, transparent 65px, transparent 415px, #AFD425 415px);
   margin: auto;
   left: 0;
   right: 0;
   z-index: 0;
}

.jelentkezes-gloves {
   top: 1550px;
   left: 0;
   right: 0;
   position: absolute;
   width: 480px;
   height: 80px;
   background: linear-gradient(to right, #032330 65px, transparent 65px, transparent 415px, #032330 415px);
   margin: auto;
   z-index: 0;
   border-radius: 0% 0% 50% 50%;
}

.jelentkezes-leg-front {
   top: 1930px;
   left: 0;
   right: 0;
   position: absolute;
   width: 340px;
   height: 200px;
   background: linear-gradient(to right, transparent 300px, #AFD425 300px);
   margin: auto;
   z-index: 2;
}

.jelentkezes-shorts-leg-front {
   top: 1750px;
   right: 0;
   left: 0;
   position: absolute;
   width: 360px;
   height: 180px;
   background: linear-gradient(to right, transparent 300px, #07384b 300px);
   margin: auto;
   z-index: 2;
}

.jelentkezes-body-button {
   position: absolute;
   width: 300px;
   height: 300px;
   background: radial-gradient(farthest-side at 50% 50%, white -100%, transparent 100%);
   background-color: #032330;
   top: 1265px;
   left: 0;
   right: 0;
   cursor: pointer;
   border-radius: 100%;
   color: white;
   z-index: 3;
   margin: auto;
   transition: .7s;
   font-weight: bold;
   font-size: 50px;
   box-shadow: 0px 0px 10px black;
   border: none;
}

.charger {
   position: absolute;
   width: 320px;
   left: 0;
   right: 0;
   height: 320px;
   border: 25px dashed #7F1C2E;
   top: 1230px;
   border-radius: 100%;
   margin: auto;
}

.charger-deleter {
   position: absolute;
   left: 0;
   right: 0;
   width: 375px;
   height: 375px;
   top: 1228px;
   border-radius: 100%;
   margin: auto;
   z-index: 2;
   cursor: default;
   background: conic-gradient(at 50% 50%, transparent 0%, transparent 6%, #AFD425 6%, #AFD425 100%);
}

.jelentkezes-body-button:hover~.charger-deleter {
   animation: jelentkezesAN 14s .5s ease forwards;
   animation-iteration-count: 1;
}

.jelentkezes-body-button:hover {
   transition: .2s;
   font-size: 55px;
   animation: jelentkezesbuttonAN 1.5s 14.5s 1 forwards;
}

@keyframes jelentkezesbuttonAN {
   0% {
      background: radial-gradient(farthest-side at 50% 50%, white -100%, transparent 100%);
      background-color: #032330;
   }

   100% {
      background: radial-gradient(farthest-side at 50% 50%, black 0%, transparent 100%);
      transform: scale(0, 0);
      background-color: #032330;
   }
}

.jelentkezes-body-img {
   position: absolute;
   width: 100px;
   top: 1605px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 3;
   transform: rotate(-15deg);
   padding-left: 200px;
}


@keyframes jelentkezesAN {
   0% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 6%, #AFD425 6%, #AFD425 100%);
   }

   7.7% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 12%, #AFD425 12%, #AFD425 100%);
   }

   15.4% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 20%, #AFD425 20%, #AFD425 100%);
   }

   23.1% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 26%, #AFD425 26%, #AFD425 100%);
   }

   30.8% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 32%, #AFD425 32%, #AFD425 100%);
   }

   38.5% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 40%, #AFD425 40%, #AFD425 100%);
   }

   46.2% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 46%, #AFD425 46%, #AFD425 100%);
   }

   53.9% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 54%, #AFD425 54%, #AFD425 100%);
   }

   61.6% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 60%, #AFD425 60%, #AFD425 100%);
   }

   69.3% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 68%, #AFD425 68%, #AFD425 100%);
   }

   74% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 74%, #AFD425 74%, #AFD425 100%);
   }

   82% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 80%, #AFD425 80%, #AFD425 100%);
   }

   87% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 88%, #AFD425 88%, #AFD425 100%);
   }

   91% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 94%, #AFD425 94%, #AFD425 100%);
   }

   95% {
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 100%, #AFD425 0%);
   }

   100% {
      background: conic-gradient(at 50% 50%, transparent 0%, #AFD425 0%, #AFD425 100%);
   }
}

.jelentkezes-bg-legs {
   position: absolute;
   top: 1790px;
   background-color: white;
   width: 100%;
   height: 300px;
   transform: skewY(6deg);
   z-index: 1;
}

.jelentkezes-title-legs {
   position: absolute;
   left: 0;
   right: 0;
   color: #032330;
   transform: skewY(6deg);
   font-size: 80px;
   top: 1850px;
   width: 500px;
   margin: 0;
   margin: auto;
   z-index: 2;
}

@media screen and (min-width: 1501px) {
   .jelentkezes-title-legs {
      visibility: hidden;
   }

}

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

   .jelentkezes-hair {
      width: 300px;
   }

   .jelentkezes-title {
      width: 304px;
      font-size: 30px;
      padding: 30px 10px;
      top: 620px;
   }

   .jelentkezes-mouth {
      top: 750px;
      width: 90px;
      height: 20px;
   }

   .jelentkezes-eye {
      width: 300px;
      height: 300px;
   }

   .jelentkezes-neck {
      top: 790px;
      width: 20px;
      height: 55px;
   }

   .jelentkezes-bg {
      height: 850px;
   }

   .jelentkezes-body {
      top: 840px;
      width: 200px;
      height: 300px;
      /*?*/
   }

   .jelentkezes-shorts-legs {
      top: 1150px;
      width: 170px;
      height: 110px;
      background: linear-gradient(to right, #07384b 30px, transparent 30px, transparent 140px, #07384b 140px);
   }

   .jelentkezes-shorts {
      top: 1105px;
      width: 200px;
      height: 50px;
   }

   .jelentkezes-legs {
      top: 1200px;
      width: 160px;
      height: 150px;
      background: linear-gradient(to right, #AFD425 20px, transparent 20px, transparent 140px, #AFD425 140px);
   }

   .jelentkezes-shoulders {
      top: 870px;
      width: 260px;
      background: linear-gradient(to right, #AFD425 65px, transparent 65px, transparent 45px, #AFD425 45px);
   }

   .jelentkezes-arms {
      top: 970px;
      width: 260px;
      height: 100px;
      background: linear-gradient(to right, #AFD425 65px, transparent 65px, transparent 45px, #AFD425 45px);
   }

   .jelentkezes-gloves {
      top: 1045px;
      width: 260px;
      height: 50px;
      background: linear-gradient(to right, #032330 40px, transparent 40px, transparent 220px, #032330 220px);
   }

   .jelentkezes-body-button {
      width: 150px;
      height: 150px;
      top: 900px;
      font-size: 26px;
   }

   .jelentkezes-body-button:hover {
      font-size: 29px;
   }

   .jelentkezes-body-button:hover~.charger-deleter {
      animation: jelentkezesAN_mobile 14s .5s ease forwards;
      animation-iteration-count: 1;
   }

   @keyframes jelentkezesAN_mobile {
      0% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 7%, #AFD425 7%, #AFD425 100%);
      }

      7.7% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 15%, #AFD425 15%, #AFD425 100%);
      }

      15.4% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 23%, #AFD425 23%, #AFD425 100%);
      }

      23.1% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 31%, #AFD425 31%, #AFD425 100%);
      }

      30.8% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 39%, #AFD425 39%, #AFD425 100%);
      }

      38.5% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 47%, #AFD425 47%, #AFD425 100%);
      }

      46.2% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 55%, #AFD425 55%, #AFD425 100%);
      }

      53.9% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 63%, #AFD425 63%, #AFD425 100%);
      }

      61.6% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 69%, #AFD425 69%, #AFD425 100%);
      }

      69.3% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 78%, #AFD425 78%, #AFD425 100%);
      }

      74% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 86%, #AFD425 86%, #AFD425 100%);
      }

      82% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 94%, #AFD425 94%, #AFD425 100%);
      }

      87% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 100%, #AFD425 100%, #AFD425 100%);
      }

      95% {
         background: conic-gradient(at 50% 50%, transparent 0%, transparent 100%, #AFD425 0%);
      }

      100% {
         background: conic-gradient(at 50% 50%, transparent 0%, #AFD425 0%, #AFD425 100%);
      }
   }

   .jelentkezes-leg-front {
      top: 1200px;
      width: 160px;
      height: 150px;
      background: linear-gradient(to right, transparent 140px, #AFD425 140px);
   }

   .jelentkezes-shorts-leg-front {
      top: 1150px;
      width: 170px;
      height: 110px;
      background: linear-gradient(to right, transparent 140px, #07384b 140px);
   }

   .charger {
      width: 160px;
      height: 160px;
      top: 880px;
      border: 15px dashed #7F1C2E;
   }

   .charger-deleter {
      top: 875px;
      width: 200px;
      height: 200px;
      background: conic-gradient(at 50% 50%, transparent 0%, transparent 7%, #AFD425 7%, #AFD425 100%);
   }

   .jelentkezes-body-img {
      top: 1075px;
      width: 60px;
      padding-left: 100px;
   }

   .jelentkezes-bg-legs {
      top: 1175px;
      height: 155px;
   }

   .jelentkezes-title-legs {
      top: 1195px;
      font-size: 50px;
      width: 300px;
   }

}

@media screen and (max-width: 462px) {
   .jelentkezes-title-legs {
      font-size: 45px;
      text-align: center;
   }
}

.subtitle-hivatkozas {
   position: relative;
   margin-top: 1900px;
}

.subtitle-section {
   position: relative;
   top: 560px;
}

.jelentkezes-link {
   color: inherit;
}

.jelentkezes-subtitle {
   position: relative;
   transform: skewY(-6deg);
   font-size: 50px;
   width: fit-content;
   width: -moz-fit-content;
   left: 30px;
   border-top: 10px solid transparent;
   border-bottom: 30px solid white;
   border-right: 25px solid transparent;
   height: 10px;
   transition: .7s ease-in;
   cursor: pointer;
   text-decoration: none;
   color: #032330;
}

.jelentkezes-subtitle:hover {
   color: white;
   border-bottom: 30px solid #032330;
   transition: .2s ease-out;
   transform: scale(1.1, 1.1);
}

.jelentkezes-munka-bg1 {
   position: absolute;
   top: 3600px;
   background-color: #032330;
   width: 100%;
   height: 800px;
   z-index: -4;
   transform: skewY(-6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg-a {
   position: absolute;
   top: 3600px;
   background-color: #07384b;
   width: 100%;
   height: 800px;
   z-index: -4;
   transform: skewY(6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-title {
   position: absolute;
   color: white;
   font-size: 60px;
   top: 3580px;
   width: fit-content;
   width: -moz-fit-content;
   left: 50px;
   border-top: 10px solid transparent;
   border-bottom: 30px solid #032330;
   border-right: 25px solid transparent;
   height: 10px;
   border-radius: 100% 0 100% 0;
}

.jelentkezes-munka-text {
   position: absolute;
   top: 3800px;
   color: white;
   font-size: 25px;
   width: fit-content;
   width: -moz-fit-content;
   left: 50px;
   z-index: 4;
   width: 70%;
   text-align: center;
}

.jelentkezes-munka-arrow {
   position: absolute;
   left: 40px;
   font-size: 40px;
   width: 40px;
   height: 50px;
   padding: 15px 20px;
   background-color: rgba(0, 0, 0, .5);
   color: white;
   border-radius: 100%;
   font-weight: bolder;
   z-index: 4;
   text-align: center;
   transition: .7s;
   cursor: pointer;
   text-decoration: none;
}


.jelentkezes-munka-arrow:hover {
   background-color: rgba(255, 255, 255, .2);
   transition: .2s;
}

.jelentkezes-munka-bg-b {
   position: absolute;
   top: 4500px;
   background-color: #07384b;
   width: 100%;
   height: 800px;
   z-index: -3;
   transform: skewY(6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg2 {
   position: absolute;
   top: 4400px;
   background-color: white;
   width: 100%;
   height: 500px;
   z-index: -4;
   transform: skewY(-6deg);
}

.jelentkezes-munka-bg-b1 {
   position: absolute;
   top: 5300px;
   background-color: #07384b;
   width: 100%;
   height: 800px;
   z-index: -2;
   transform: skewY(6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg21 {
   position: absolute;
   top: 5085px;
   background-color: #032330;
   width: 100%;
   height: 450px;
   z-index: -3;
   transform: skewY(-3deg);
}

.jelentkezes-munka-bg-c {
   position: absolute;
   top: 6300px;
   background-color: #07384b;
   width: 100%;
   height: 800px;
   z-index: -2;
   transform: skewY(6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg3 {
   position: absolute;
   top: 6100px;
   background-color: #032330;
   width: 100%;
   height: 1100px;
   z-index: -3;
   transform: skewY(-6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg-d {
   position: absolute;
   top: 7300px;
   background-color: #07384b;
   width: 100%;
   height: 800px;
   z-index: -1;
   transform: skewY(6deg);
   box-shadow: 0 10px 10px rgba(0, 0, 0, .5);
}

.jelentkezes-munka-bg4 {
   position: absolute;
   top: 7200px;
   background-color: #AFD425;
   width: 100%;
   height: 850px;
   z-index: -2;
   transform: skewY(-6deg);
}

.jelentkezes-bg2 {
   position: absolute;
   top: -400px;
   background-color: white;
   width: 100%;
   height: 300px;
   transform: skewY(6deg);
   z-index: 1;
   left: 0;
   right: 0;
}

.jelentkezes-title2 {
   position: absolute;
   color: #032330;
   transform: skewY(6deg);
   font-size: 80px;
   top: -400px;
   width: 460px;
   margin: auto;
   margin-top: 50px;
   left: 0;
   right: 0;
   z-index: 2;
}

.jelentkezes-code {
   border-radius: 10px;
   background-color: rgba(0, 0, 0, 0.6);
   font-family: 'Courier New';
   font-weight: bold;
}

.mini-link {
   color: white;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.1em 0 #AFD425;
}

.mini-link:hover {
   transition: .2s;
   color: #032330;
   box-shadow: inset 0 -1em 0 #AFD425;
   background-color: none;
}

.mini-dc-link {
   color: white;
   text-decoration: none;
   transition: 1s;
   box-shadow: inset 0 -0.1em 0 #7289DA;
}

.mini-dc-link:hover {
   transition: .2s;
   color: #7289DA;
   box-shadow: inset 0 -1em 0 #7289DA;
   background-color: none;
}

.ver-reddite-link {
   text-decoration: none;
   transition: 1s;
   color: #db6205;
   box-shadow: inset 0 -0.1em 0 #db6205;
}

.ver-reddite-link:hover {
   transition: .2s;
   color: white;
   box-shadow: inset 0 -1em 0 #db6205;
}

#p {
   margin-top: 5500px;
}

@media screen and (max-width: 1500px) {
   /*Nagyból kicsi monitor*/

   .subtitle-hivatkozas {
      margin-top: 1400px;
   }

   .jelentkezes-munka-bg1 {
      top: 3000px;
   }

   .jelentkezes-munka-bg-a {
      top: 3000px;
   }

   .jelentkezes-munka-title {
      top: 3000px;
   }

   .jelentkezes-munka-text {
      top: 3200px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -510px;
   }

   .jelentkezes-munka-bg-b {
      top: 3900px;
   }

   .jelentkezes-munka-bg2 {
      top: 3800px;
   }

   #szerkeszto {
      margin-top: -500px;
   }

   #szerkText {
      margin-top: -550px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 4800px;
   }

   .jelentkezes-munka-bg21 {
      top: 4580px;
   }

   #foszerkeszto {
      margin-top: -350px;
   }

   #fszerkText {
      margin-top: -450px;
   }

   .jelentkezes-munka-bg-c {
      top: 5800px;
   }

   .jelentkezes-munka-bg3 {
      top: 5750px;
   }

   #riporter {
      margin-top: -370px;
   }

   #ripText {
      margin-top: -470px;
   }

   #nyil6 {
      margin-top: -450px;
   }

   #nyil7 {
      margin-top: -450px;
   }

   .jelentkezes-munka-bg-d {
      top: 6750px;
   }

   .jelentkezes-munka-bg4 {
      top: 6650px;
   }

   #dcmod {
      margin-top: -410px;
   }

   #dcText {
      margin-top: -550px;
   }

   .jelentkezes-bg2 {
      visibility: hidden;
   }

   .jelentkezes-title2 {
      visibility: hidden;
   }

   .parallax__layer--top {
      transform: none;
   }

   .jelentkezes-bg2 {
      visibility: hidden;
   }

   .jelentkezes-title2 {
      visibility: hidden;
   }

}

@media screen and (max-width: 1262px) {
   .round-button {
      width: 265px;
   }

   .round-button:hover {
      width: 295px;
   }

   .categories {
      margin-left: 50px;
      margin-right: 50px;
   }

   .nav-footer-arrow {
      bottom: -730px;
   }
}

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

   /*Kicsiből kisebb monitor*/

   .jelentkezes-munka-bg1 {
      height: 900px;
   }

   .jelentkezes-munka-bg-a {
      top: 3000px;
      height: 900px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -400px;
   }

   .jelentkezes-munka-bg-b {
      top: 4000px;
      height: 900px;
   }

   .jelentkezes-munka-bg2 {
      top: 3900px;
   }

   #szerkeszto {
      margin-top: -350px;
   }

   #szerkText {
      margin-top: -450px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 5000px;
      height: 850px;
   }

   .jelentkezes-munka-bg21 {
      top: 4800px;
   }

   #foszerkeszto {
      margin-top: -180px;
   }

   #fszerkText {
      margin-top: -300px;
   }

   #nyil4 {
      margin-top: -200px;
   }

   #nyil5 {
      margin-top: -200px;
   }

   .jelentkezes-munka-bg-c {
      top: 6050px;
      height: 850px;
   }

   .jelentkezes-munka-bg3 {
      top: 6000px;
      height: 980px;
   }

   #riporter {
      margin-top: -150px;
   }

   #ripText {
      margin-top: -280px;
   }

   #nyil6 {
      margin-top: -165px;
   }

   #nyil7 {
      margin-top: -165px;
   }

   .jelentkezes-munka-bg-d {
      top: 7050px;
   }

   .jelentkezes-munka-bg4 {
      top: 6980px;
   }

   #dcmod {
      margin-top: -120px;
   }

   #dcText {
      margin-top: -240px;
   }

   #nyil8 {
      margin-top: -150px;
   }

   #p {
      margin-top: 5800px;
   }
}

@media screen and (max-width: 995px) {
   #nyil2 {
      margin-top: -300px;
   }

   #nyil3 {
      margin-top: -300px;
   }
}

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

   /*tablet*/
   .jelentkezes-munka-bg1 {
      height: 1000px;
   }

   .jelentkezes-munka-bg-a {
      height: 1000px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -280px;
      left: 20px;
   }

   .jelentkezes-munka-bg-b {
      top: 4100px;
      height: 1100px;
   }

   .jelentkezes-munka-bg2 {
      top: 4000px;
   }

   #szerkeszto {
      margin-top: -250px;
   }

   #szerkText {
      margin-top: -300px;
   }

   #nyil2 {
      margin-top: 0px;
   }

   #nyil3 {
      margin-top: 0px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 5250px;
      height: 900px;
   }

   .jelentkezes-munka-bg21 {
      top: 5100px;
   }

   #foszerkeszto {
      margin-top: 80px;
   }

   #fszerkText {
      margin-top: -10px;
   }

   #nyil4 {
      margin-top: 120px;
   }

   #nyil5 {
      margin-top: 120px;
   }

   .jelentkezes-munka-bg-c {
      top: 6350px;
      height: 900px;
   }

   .jelentkezes-munka-bg3 {
      top: 6300px;
      height: 1100px;
   }

   #riporter {
      margin-top: 150px;
   }

   #ripText {
      margin-top: 50px;
   }

   #nyil6 {
      margin-top: 185px;
   }

   #nyil7 {
      margin-top: 185px;
   }

   .jelentkezes-munka-bg-d {
      top: 7400px;
      height: 900px;
   }

   .jelentkezes-munka-bg4 {
      top: 7350px;
      height: 950px;
   }

   #dcmod {
      margin-top: 230px;
   }

   #dcText {
      margin-top: 130px;
   }

   #nyil8 {
      margin-top: 300px;
   }

   #p {
      margin-top: 6200px;
   }
}

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

   /*Kisebb tablet*/
   .subtitle-hivatkozas {
      margin-top: 550px;
   }

   .jelentkezes-subtitle {
      font-size: 40px;
   }

   .jelentkezes-munka-bg1 {
      height: 1200px;
      top: 2000px;
   }

   .jelentkezes-munka-bg-a {
      height: 1200px;
      top: 2000px;
   }

   .jelentkezes-munka-title {
      top: 2000px;
      font-size: 50px;
   }

   .jelentkezes-munka-text {
      top: 2200px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -1058px;
      width: 30px;
      height: 40px;
      font-size: 30px;
      padding: 13px 18px;
   }

   .jelentkezes-munka-bg-b {
      top: 3300px;
      height: 1300px;
   }

   .jelentkezes-munka-bg2 {
      top: 3200px;
   }

   #szerkeszto {
      margin-top: -990px;
   }

   #szerkText {
      margin-top: -1050px;
   }

   #nyil2 {
      margin-top: -600px;
   }

   #nyil3 {
      margin-top: -600px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 4600px;
      height: 1100px;
   }

   .jelentkezes-munka-bg21 {
      top: 4500px;
      height: 250px;
   }

   #foszerkeszto {
      margin-top: -500px;
   }

   #fszerkText {
      margin-top: -600px;
   }

   #nyil4 {
      margin-top: -320px;
   }

   #nyil5 {
      margin-top: -320px;
   }

   .jelentkezes-munka-bg-c {
      top: 5900px;
      height: 1080px;
   }

   .jelentkezes-munka-bg3 {
      top: 5850px;
      height: 1200px;
   }

   #riporter {
      margin-top: -280px;
   }

   #ripText {
      margin-top: -380px;
   }

   #nyil6 {
      margin-top: -85px;
   }

   #nyil7 {
      margin-top: -85px;
   }

   .jelentkezes-munka-bg-d {
      top: 7100px;
      height: 1100px;
   }

   .jelentkezes-munka-bg4 {
      top: 7050px;
      height: 1160px;
   }

   #dcmod {
      margin-top: -50px;
      left: 20px;
   }

   #dcText {
      margin-top: -150px;
   }

   #nyil8 {
      margin-top: 220px;
   }

   #p {
      margin-top: 7000px;
   }
}

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

   /*Közepes telefon*/
   .jelentkezes-subtitle {
      font-size: 30px;
   }

   .jelentkezes-munka-bg-a {
      height: 1200px;
   }

   .jelentkezes-munka-bg1 {
      height: 1220px;
   }

   .jelentkezes-munka-title {
      top: 2000px;
      font-size: 35px;
      left: 20px;
   }

   .jelentkezes-munka-text {
      top: 2200px;
      font-size: 25px;
      width: 80%;
      left: 30px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -1100px;
      width: 30px;
      height: 40px;
   }

   .jelentkezes-munka-bg-b {
      top: 3300px;
      height: 1200px;
   }

   .jelentkezes-munka-bg2 {
      top: 3190px;
   }

   #szerkeszto {
      margin-top: -1050px;
   }

   #szerkText {
      margin-top: -1100px;
   }

   #nyil2 {
      margin-top: -700px;
   }

   #nyil3 {
      margin-top: -700px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 4500px;
      height: 1200px;
   }

   .jelentkezes-munka-bg21 {
      top: 4400px;
      height: 250px;
   }

   #foszerkeszto {
      margin-top: -650px;
   }

   #fszerkText {
      margin-top: -750px;
   }

   #nyil4 {
      margin-top: -320px;
   }

   #nyil5 {
      margin-top: -320px;
   }

   #p {
      margin-top: 7100px;
   }
}

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

   /*Pici telefon*/
   .jelentkezes-munka-bg1 {
      height: 1610px;
   }

   .jelentkezes-munka-bg-a {
      height: 1600px;
   }

   .jelentkezes-munka-arrow {
      margin-top: -680px;
      width: 30px;
      height: 40px;
   }

   .jelentkezes-munka-bg-b {
      top: 3700px;
      height: 1500px;
   }

   .jelentkezes-munka-bg2 {
      top: 3605px;
   }

   #szerkeszto {
      margin-top: -620px;
   }

   #szerkText {
      margin-top: -650px;
   }

   #nyil2 {
      margin-top: 50px;
   }

   #nyil3 {
      margin-top: 50px;
   }

   .jelentkezes-munka-bg-b1 {
      top: 5300px;
      height: 1300px;
   }

   .jelentkezes-munka-bg21 {
      top: 5150px;
      height: 250px;
   }

   #foszerkeszto {
      margin-top: 180px;
   }

   #fszerkText {
      margin-top: 120px;
   }

   #nyil4 {
      margin-top: 620px;
   }

   #nyil5 {
      margin-top: 620px;
   }

   .jelentkezes-munka-bg-c {
      top: 6770px;
      height: 1200px;
   }

   .jelentkezes-munka-bg3 {
      top: 6750px;
      height: 1340px;
   }

   #riporter {
      margin-top: 600px;
   }

   #ripText {
      margin-top: 490px;
   }

   #nyil6 {
      margin-top: 925px;
   }

   #nyil7 {
      margin-top: 925px;
   }

   .jelentkezes-munka-bg-d {
      top: 8090px;
      height: 1250px;
   }

   .jelentkezes-munka-bg4 {
      top: 8000px;
      height: 1350px;
   }

   #dcmod {
      margin-top: 900px;
   }

   #dcText {
      margin-top: 800px;
   }

   #nyil8 {
      margin-top: 1360px;
   }

   #p {
      margin-top: 8200px;
   }
}


@media screen and (max-width: 348px) {
   #dcmod {
      font-size: 32px;
   }
}

/*Témák Weboldal*/
.temagrid {
   display: grid;
   grid-template-columns: auto auto auto auto;
   grid-template-rows: auto;
   grid-column-gap: 50px;
   grid-row-gap: 40px;
   justify-content: center;
   padding-top: 200px;
}

@media screen and (max-width: 1900px) {
   .temagrid {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto;
   }
}

@media screen and (max-width: 1400px) {
   .temagrid {
      display: grid;
      grid-template-columns: auto auto;
   }
}

@media screen and (max-width: 900px) {
   .temagrid {
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
   }
}

.temabox {
   width: 400px;
   height: 250px;
   border: 6px solid #032330;
   background-color: #032330;
   border-radius: 30px;
   cursor: pointer;
   transition: 1s;
}

.temabox:active {
   transform: scale(0.9, 0.9);
   transition: .1s;
}

.tematitle-limited {
   position: absolute;
   top: 40px;
   right: 265px;
   color: #FF0000;
   transition: .2s;
}

.temabox h3 {
   font-weight: bold;
   text-shadow: -3px -3px #0000002d;
}

.temabox:hover .tematitlebox {
   margin-top: -225px;
   transition: .2s;
   width: 100%;
   height: 205px;
   border-radius: 22px;
}

.temabox:hover .tematitlebox-alap {
   background-color: #AFD425;
}

.temabox:hover .tematitlebox-neon {
   background: linear-gradient(to bottom right, #273c5a 70%, #09FBD3 70.1%);
}

.temabox:hover .tematitlebox-snow {
   background-color: #65aecf;
}

.temabox:hover .temadetails {
   color: white;
   visibility: visible;
   transition-delay: .2s;
}

.temabox:hover .temacolorbox {
   visibility: visible;
   transition-delay: .2s;
}

.temabox:hover .temalimited-corner {
   border-radius: 0px 22px 0 0;
}

.temabox:hover .tematitle-limited {
   top: 10px;
   right: 20px;
   transition: .2s;
   color: white;
}

.temaimg {
   object-fit: cover;
   width: 400px;
   height: 200px;
   border-radius: 22px;
}

.tematitlebox {
   background-color: #032330;
   position: relative;
   height: 60px;
   width: 90%;
   margin-top: -60px;
   border-radius: 40px 100px 0px 0px;
   transition: .7s;
}

.temadetails {
   color: white;
   padding-left: 20px;
   padding-right: 20px;
   visibility: hidden;
   font-size: 20px;
   text-shadow: 5px 5px 5px #0000002d;
}

.temacolorbox {
   visibility: hidden;
   position: absolute;
   bottom: -50px;
}

.temacolor {
   border: 1px solid #032330;
   width: 10px;
   height: 10px;
   margin-left: 5px;
   display: inline-block;
}

.temacolor-alap1 {
   background-color: #AFD425;
}

.temacolor-alap2 {
   background-color: #0A698F;
}

.temacolor-alap3 {
   background-color: #33CCFFB0;
}

.temacolor-alap4 {
   background-color: #4D4D4D;
}

.temacolor-neon1 {
   background-color: #273c5a;
}

.temacolor-neon2 {
   background-color: #09FBD3;
}

.temacolor-neon3 {
   background-color: #F5D300;
}

.temacolor-neon4 {
   background-color: #FE53BB;
}

.temacolor-snow1 {
   background-color: #65aecf;
}

.temacolor-snow2 {
   background-color: #86c5e2;
}

.temacolor-snow3 {
   background-color: #9bbac7;
}

.temacolor-snow4 {
   background-color: #dae3e7;
}

.temacolor-oszi1 {
   background-color: #663e19;
}

.temacolor-oszi2 {
   background-color: #865221;
}

.temacolor-oszi3 {
   background-color: #d8c2a4;
}

.temacolortext {
   display: inline-block;
   color: white;
   font-size: 15px;
}

.temabox:hover .tematitlebox-oszi {
   background-color: #663e19;
}

@media screen and (max-width: 424px) {
   .temabox {
      width: 300px;
   }

   .temaimg {
      width: 300px;
   }
}