@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
--bs-font-sans-serif: "Kanit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--color-brand-purple: #9B26B6;
--color-brand-blue: #440099;
--color-brand-dark: #470A68;
--color-yellow: yellow;
}
.row {
--bs-gutter-x: 0;
}
.view-tiktok .row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 1.5rem;
}
header {
background-image: url(../images/fiatalok01.png), url(../images/atmenet.svg);
background-repeat: no-repeat;
background-position-y: bottom, 200px;
background-position-x: right, left;
min-height: min(450px, 29vw);
background-size: 0, cover;
}
header nav.navbar{
background-image: url(../images/fiatalok01.png);
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
}
header .navbar-brand {
flex-direction: column;
align-items: flex-start !important;
}
header .navbar-brand .site-logo img {
height: 22vw;
max-height: 250px;
}
.navbar-brand .site-slogan {
font-size: min(3em, 4.5vw);
font-weight: 600;
font-style: italic;
margin: 4vw 20px 40px;
color: var(--color-brand-purple);
}
.path-frontpage main {
margin-top: -235px;
}
.path-frontpage .region-content {
background-image: url(../images/rolunk_hatter.png);
aspect-ratio: 1920 / 1024;
padding: 209px 300px;
font-size: 1.4em;
font-weight: 600;
color: black;
max-width: 1500px;
background-size: contain;
margin: 100px auto;
background-repeat: no-repeat;
position: relative;
}
.path-frontpage .region-content::before {
content: "";
position: absolute;
background-image: url(../images/felx.svg);
top: -186px;
left: 60px;
z-index: 47;
width: 172px;
height: 516px;
background-size: cover;
background-position: right;
}
.path-frontpage .region-content::after {
content: "";
position: absolute;
background-image: url(../images/felx.svg);
bottom: -186px;
right: 60px;
z-index: 47;
width: 172px;
height: 516px;
background-size: cover;
background-position: left;
}
.path-frontpage .region-content .block-page-title-block {
position: absolute;
transform: rotate(-60deg);
top: 55px;
left: 30px;
color: var(--color-brand-purple);
}
.path-frontpage .region-content .block-page-title-block h1 {
font-size: 3.3em;
font-weight: 600;
}
.path-frontpage .region-content .block-page-title-block h1 em {
display: block;
text-align: center;
font-weight: 900;
text-shadow: 0em 0em 1em #000;
text-transform: uppercase;
}
.path-frontpage .region-content .field--name-body em {
font-style: normal;
color: white;
background-color: var(--color-brand-purple);
padding: 0 2px;
}
@media (min-width: 992px) {
.navbar-expand-lg {
flex-wrap: nowrap;
justify-content: center;
}
}
.navbar.nav-additional {
background-color: var(--color-brand-blue);
padding: 20px 0 40px;
}
.navbar.nav-additional::before {
width: 100px;
height: 100px;
content: "";
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
background-repeat: no-repeat;
background-position: center;
background-size: 50%;
}
#block-iksz-nyitolapifomenu .nav-item {
width: 100px;
height: 100px;
overflow: hidden;
background-color: #FFCB03;
box-shadow: 0px 0px 0px 0px rgba(255,203,3,.5),0px 0px 0px 0px rgba(255,203,3,1);
transition: all .2s ease, box-shadow .5s ease, z-index .5s step-end;
-webkit-transition: all .2s ease,box-shadow 5.s ease,z-index 0.5s step-end;
transform-style: preserve-3d;
z-index: 0;
}
#block-iksz-nyitolapifomenu .nav-item a {
text-align: center;
text-transform: uppercase;
line-height: 6em;
color: var(--color-brand-dark);
font-style: italic;
font-weight: 600;
display: block;
width: 100px;
height: 100px;
transition: margin 0.4s linear;
-webkit-transition: margin 0.4s linear;
text-decoration: none;
padding: 0;
position: relative;
}
#block-iksz-nyitolapifomenu .nav-item:hover {
z-index: 1;
transition: all .2s ease, box-shadow .5s ease, z-index 0.5s step-start;
-webkit-transition: all .2s ease,box-shadow 5.s ease,z-index 0.5s step-start;
box-shadow: 0px 0px 0px 20px rgba(255,203,3,1),0px 0px 0px 40px rgba(255,203,3,0);
}
#block-iksz-nyitolapifomenu .nav-item:hover a {
margin-top: -100px;
}
#block-iksz-nyitolapifomenu .nav-item a.nav-link::before {
aspect-ratio: 1;
background-position: center center;
width: 100px;
height: 100px;
display: block;
background-color: var(--color-brand-blue);
margin-top: 0;
background-repeat: no-repeat;
content: '';
background-size: 50%;
transition: background-color .5s step-end;
}
#block-iksz-nyitolapifomenu .nav-item:hover a.nav-link::before {
background-color: rgba(255,203,3,0);
transition: background-color .5s step-start;
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(1) a.nav-link::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(2) a.nav-link::before {
background-image: url('data:image/svg+xml,');
background-size: 40%;
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(3) a.nav-link::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>')
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(4) a.nav-link::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(5) a.nav-link::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
#block-iksz-nyitolapifomenu .nav-item:nth-child(6) a.nav-link::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
.above-content {
background: linear-gradient( 3.5deg, white calc(66.6% - 1px), var(--color-brand-blue) calc(66.6% + 1px) );
}
.block-views-blockhireink-hireink-block > h2 {
text-align: right;
font-size: 5em;
color: rgba(200,200,200,.5);
position: relative;
font-weight: 800;
font-style: italic;
margin-bottom: 0;
line-height: .8em;
margin-right: 1em;
}
.block-views-blockhireink-hireink-block .view-hireink {
background-color: var(--color-brand-purple);
border: 4px solid var(--color-yellow);
color: white;
margin: 0 4em;
position: relative;
}
.block-views-blockhireink-hireink-block .view-hireink::after {
content: "";
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: -160px;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.block-views-blockhireink-hireink-block .view-hireink article {
align-items: center;
padding: 1em;
}
.block-views-blockhireink-hireink-block .view-hireink article h2 {
color: white;
font-size: 1.2em;
}
.block-views-blockhireink-hireink-block .view-hireink article h2 a {
color: white;
}
.block-views-blockhireink-hireink-block .view-hireink article .data {
display: flex;
color: #dddddd;
}
.block-views-blockhireink-hireink-block .view-hireink article .data div:not(:last-child) {
margin-right: .5em;
}
.block-views-blockhireink-hireink-block .view-hireink article .field--name-field-leadimage .field__item {
aspect-ratio: 3/2;
}
.block-views-blockhireink-hireink-block .view-hireink article .field--name-field-leadimage .field__item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.below-content {
background-image: linear-gradient(180deg, white 0%, white 50%, black 50%, black 100%);
margin-bottom: -50px;
}
/*
#tiktok .col-md-4.views-row {
aspect-ratio: 9/19;
}
.view-tiktok {
padding-right: 2em;
}
*/
#tiktok {
padding: 3em 3em 2em 2em;
position: relative;
}
#tiktok::after {
background-image: url(../images/tiktok.png);
background-repeat: no-repeat;
background-position: right top;
position: absolute;
top: 0;
right: 0;
content: "";
width: 70px;
height: 180px;
background-size: contain;
}
#tiktok .col-md-4.views-row:nth-child(3n+2) {
margin-top: 2em;
}
.video-embed-field-responsive-video.video-embed-field-provider-tiktok {
max-width: min(100%, 325px);
margin: 0 auto;
}
.video-embed-field-responsive-video::after {
display: none;
}
.video-embed-field-responsive-video iframe {
position: static;
aspect-ratio: 9/19;
border-radius: 15px;
}
.region-above-footer {
background-color: black;
}
#block-iksz-tamogatok {
background-image: url(../images/tamogatok_hatter.png);
width: 100%;
aspect-ratio: 1920/857;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
#block-iksz-tamogatok ul {
padding: 24vw 0 0 0;
list-style: none;
display: flex;
justify-content: space-evenly;
align-items: center;
margin: 0 auto;
max-width: 900px;
width: 100%;
}
#block-iksz-tamogatok ul li a {
width: calc((100vw / 3) - 10px);
max-width: 220px;
height: auto;
aspect-ratio: 1;
display: block;
/* background-color: rgba(200,200,200,.5); */
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
text-align: center;
padding-top: 7em;
color: transparent;
transition: all .2s ease;
border-radius: 50%;
}
#block-iksz-tamogatok ul li:hover a {
background-color: rgba(255,255,255,.6);
box-shadow: 0 0 40px rgba(255,255,255,.9);
}
#block-iksz-tamogatok ul li a[href *= fidesz] {
background-image: url('../images/partners/fidesz.svg');
}
#block-iksz-tamogatok ul li a[href *= kdnp] {
background-image: url('../images/partners/kdnp.svg');
}
#block-iksz-tamogatok ul li a[href *= barankovics] {
background-image: url('../images/partners/barankovics.png');
}
#leaders {
background-color: var(--color-yellow);
aspect-ratio: 3/4;
width: 421px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 2em 100px;
border-radius: 1.5em;
text-align: center;
color: var(--color-brand-purple);
margin-top: 5em;
}
#leaders > h2 {
font-size: 3rem;
font-style: italic;
}
.view-tisztsegviselok .view-content .views-row {
background-color: var(--color-yellow);
border-radius: 1em;
box-shadow: 0px 0px 2px #888;
}
/*
.view-tisztsegviselok .view-content .views-row .views-field-field-leadimage img {
border-radius: 1em;
}*/
.view-tisztsegviselok .view-content .views-row .views-field-title .field-content {
font-size: 1.5em;
font-weight: 600;
white-space: nowrap;
}
a {
color: #88ce02;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
footer {
background-image: url(/themes/custom/iksz/images/fiatalok02.png), url(../images/atmenet.svg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain, cover;
position: relative;
}
footer .row {
min-height: 400px;
align-content: flex-end;
position: relative;
}
footer .row > div {
align-self: flex-end;
}
.region.region-footer-second {
color: white;
text-align: right;
padding: 0 2em;
}
.region.region-footer-second .text-formatted p:first-child {
color: var(--color-yellow);
}
.region.region-footer-second .text-formatted p:nth-child(2) {
color: var(--color-brand-dark);
}
.region.region-footer-first, .region.region-footer-first a {
color: var(--color-brand-dark);
}
.region.region-footer-first {
padding: 0 2em;
}
.region.region-footer-first .text-formatted p:first-child::before {
content: "";
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
width: 26px;
height: 19px;
display: block;
background-size: contain;
background-repeat: no-repeat;
}
.region.region-footer-first .text-formatted p:nth-child(2)::before {
content: "";
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
width: 26px;
height: 19px;
display: block;
background-size: contain;
background-repeat: no-repeat;
}
footer div .row::before {
content: '';
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
width: calc((100vw / 3) - 10px);
max-width: 200px;
aspect-ratio: 1;
top: 0; /*30px;*/
right: 25px;
z-index: 10;
display: block;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
}
#block-esemenyek-nyito > h2 {
text-transform: uppercase;
color: #888888;
font-size: 5em;
line-height: .5em;
font-weight: 800;
font-style: italic;
text-align: center;
position: relative;
}
#block-esemenyek-nyito > h2::before {
content: '';
display: block;
width: .8em;
height: .8em;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
background-repeat: no-repeat;
background-size: contain;
position: absolute;
bottom: -10px;
left: 5px;
}
.view-events .flexslider {
border: 0;
}
.view-events .flexslider .slides {
background-color: var(--color-brand-purple);
border-width: 5px 5px 0 0;
border-style: solid;
border-color: black;
}
.view-events .flexslider .slides > li {
padding: 1em 2em;
position: relative;
font-size: 1.2em;
color: var(--color-yellow);
}
.view-events .views-field.views-field-field-leadimage {
overflow: hidden;
aspect-ratio: 16/9;
}
.view-events .flexslider .views-field.views-field-title {
position: absolute;
bottom: 60px;
background-color: var(--color-brand-purple);
padding: 2px 5px;
color: white;
}
.view-events .flexslider .views-field.views-field-title a {
color: white;
}
.view-events .flexslider .views-field.views-field-event-date .field-content {
text-align: right;
}
.flex-direction-nav a {
height: 50px;
}
.navbar-toggler {
aspect-ratio: 1;
margin-right: 20px;
}
@media (min-width: 1920px) {
header nav.navbar, .above-content > .row, .below-content > .row, footer > div > .row, #block-iksz-tamogatok {
max-width: 1920px;
margin: 0 auto;
}
}
@media (max-width: 575.98px) {
}
@media (min-width: 768px) {
.navbar-brand .site-slogan {
display: block;
}
header {
background-position-y: bottom, 20vw;
min-height: min(450px, 33vw);
}
}
@media (max-width: 767.98px) {
header .navbar > .container-fluid {
justify-content: center;
}
#block-esemenyek-nyito > h2 {
font-size: 3em;
}
.block-views-blockhireink-hireink-block .view-hireink {
margin: 0;
}
.block-views-blockhireink-hireink-block > h2 {
font-size: 3.5em;
}
.view-tiktok .view-content .views-row:nth-child(n+4) {
display: none;
}
.view-tiktok {
padding-right: 0em;
}
.view-tiktok .row {
--bs-gutter-x: 0;
}
header {
min-height: unset;
background-position-y: bottom, 25vw;
}
header .navbar-brand .site-logo img {
height: auto;
width: 70vw;
display: block;
margin: 0 auto;
}
.below-content {
margin-bottom: 0;
}
#leaders {
margin-top: 0;
}
#leaders > h2 {
font-size: 2.5rem;
}
.view-tisztsegviselok .view-content .views-row .views-field-title .field-content,
.view-events .flexslider .views-field.views-field-title a,
.path-frontpage .region-content {
font-size: 1.3em;
}
.view-events .flexslider .slides > li {
font-size: .9em;
}
}
@media (max-width: 991.98px) {
.navbar-toggler {
background-color: #FFCB03;
border-color: #FFCB03;
}
.navbar.nav-additional {
padding: 0;
}
#block-iksz-nyitolapifomenu .nav-item {
width: 100%;
}
#block-iksz-nyitolapifomenu .nav-item a {
width: 100%;
padding-left: 100px;
}
#block-iksz-nyitolapifomenu .nav-item a.nav-link::before {
position: absolute;
left: 0;
}
#block-iksz-nyitolapifomenu .nav-item:hover a {
margin-top: 0px;
}
.block-views-blockhireink-hireink-block .view-hireink::after {
display: none;
}
}
@media (max-width: 1199.98px) {
#block-iksz-branding {
width: 95vw;
}
header nav.navbar {
background-image: none;
align-items: center !important;
}
.navbar-brand .site-slogan {
display: block;
font-size: 2em;
margin: 1rem auto 0;
text-shadow: 0px 0px 10px #fff;
}
.navbar-brand > div {
align-self: flex-end;
}
}
@media (min-width: 1200px) {
header {
background-position-y: bottom, 13vw;
}
.navbar-brand .site-slogan {
margin-top: 2.5vw;
}
}
@media (max-width: 1319.98px) {
footer {
background-size: 0, 400%;
}
.path-frontpage main {
margin-top: 0;
margin-bottom: 3em;
}
.path-frontpage .region-content::before {
left: 0;
}
.path-frontpage .region-content {
margin: 0
}
.path-frontpage .region-content::after {
right: 0;
}
.path-frontpage .region-content {
background-position: bottom;
aspect-ratio: auto;
background-color: var(--color-yellow);
padding: 1em;
border-radius: 1.5em;
}
.path-frontpage .region-content .block-page-title-block {
position: static;
transform: none;
}
.path-frontpage .region-content .block-page-title-block h1 {
font-size: 1.5em;
text-align: center;
}
.path-frontpage .region-content .block-page-title-block h1 em {
display: inline;
}
}
@media (min-width: 1400px) {
header {
background-position-y: bottom, min(210px, 15vw);
}
.navbar-brand .site-slogan {
margin-top: min(80px, 4vw);
}
}
@media (min-width: 2600px) {
header {
background-position-y: bottom, min(150px, 11vw);
}
}