/*****************************************************************************/
/****************************** ALAPSTRUKTÚRA ********************************/
/*****************************************************************************/
:root {
    --green1:                   #558055;        
    --green2:                   #24672D;
    --black:                    #34333A;
}
* {
    box-sizing:                 border-box;
    font-family:                sans-serif;
    font-size:                  18px;
    margin:                     0;
    padding:                    0;
}

html {
    height:                     100%; /* Important - set html + body height to 100% */
}

body {
    background:                 #E6FFE6;
    min-height:                 100%; /* Important - set html + body height to 100% */
    background:                 -webkit-linear-gradient(to right, #E6FFE6, #B6FFB6);
    background:                 -moz-linear-gradient(to right, #E6FFE6, #B6FFB6);

    display:                    flex;           /* Sticky Footer miatt */
    flex-direction:             column;
}
/*****************************************************************************/
/************************************ HEADER *********************************/
/*****************************************************************************/
.header_linkje {
    text-decoration:            none;
}

header{
    padding:                    1rem;
    margin:                     0 auto;
    text-align:                 center;         /* Ez is kell */

    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
    align-items:                center;
}

.udvozles {
    font-family:                "Comic Sans MS", cursive, sans-serif;
    font-weight:                bold;
    font-size:                  3rem;
    color:                      rgba(16, 128, 16, 1);
}

.szlogen {
    color: var(--black);
    font-family:                "Comic Sans MS", cursive, sans-serif;
    font-weight:                bold;
    letter-spacing:             .6rem;

    align-self:                 flex-end;
}

/*****************************************************************************/
/************************************ MAIN ***********************************/
/*****************************************************************************/
main {
    padding:                    1rem;
    margin:                     0 auto;

    flex:                       1 0 auto;       /* Sticky Footer miatt */
}
/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/************************************* NAV ***********************************/
/*****************************************************************************/
nav {
    width:                      100%;
    mask-image:                 linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 10%, #ffffff 90%, rgba(255, 255, 255, 0) 100%);
    margin:                     0 auto;
    padding:                    0;
}

nav > ul {
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;

    list-style-type:            none;
    margin:                     0;
    padding:                    0;
    text-align:                 center;
    background:                 linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(85, 80, 85, 0.2) 10%, rgba(85, 80, 85, 0.2) 90%, rgba(255, 255, 255, 0) 100%);
    
    box-shadow:                 0 0 1.2rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    -webkit-box-shadow:         0 0 1.2rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    -moz-box-shadow:            0 0 1.2rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
}

nav > ul > li {
    border-top:                 .1rem solid rgba(85, 128, 85, .2);
}

nav > ul > li > a {
    padding:                    1rem;
    font-family:                "Open Sans";
    font-weight:                bold;
    text-transform:             uppercase;
    color:                      rgba(0, 128, 0, 1);
    text-decoration:            none;
    display:                    block;
    border-bottom:              .1rem solid rgba(0, 0, 0, 0);
    transition:                 .2s;
}

nav > ul > li > a:hover {
    -webkit-box-shadow:         0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    -moz-box-shadow:            0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    box-shadow:                 0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);

    background:                 rgba(85, 128, 085, .4);
    color:                      rgba(0, 0, 0, .7);
    border-bottom:              .1rem solid rgba(0, 0, 0, 0);
}

nav > ul > li > a:active {
    background:                 rgba(85, 222, 85, .8);
    color:                      rgba(255, 255, 255, 1);
}

/* Navbar - Vége */


/*h2_egyedistilus - Eleje*/
.h2_egyedistilus {
    color:                      #111;
    font-size:                  xx-large;
    margin-bottom:              1rem;
}
/*h2_egyedistilus - Vége*/

/* Végül szineződik a jelenlegi menüelem */
.currentpage {
    -webkit-box-shadow:         0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    -moz-box-shadow:            0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);
    box-shadow:                 0 0 .5rem rgba(0, 0, 0, .1), inset 0 0 .1rem rgba(255, 255, 255, .6);

    background:                 rgba(85, 128, 085, .4);
    color:                      rgba(0, 0, 0, .7);
    border-bottom:              .1rem solid rgba(0, 0, 0, 0);
}

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/*********************************** FOOTER **********************************/
/*****************************************************************************/
/*Egyedi footer dekorációja - Eleje*/
footer {
    background-color:           rgba(85, 80, 85, .4);
    padding:                    1rem;
    text-align:                 center;
    border-top:                 .2rem;
    border-top-style:           solid;
    border-top-color:           rgba(255, 255, 255, 0.8);

    flex-shrink:                0;      /* Sticky Footer miatt */
}

.footerszoveg {
    color:                      rgba(0, 128, 0, 1);
}

.creator:link {
    color:                      greenyellow;
    font-style:                 italic;
    font-weight:                bold;
}
/*Egyedi footer dekorációja - Vége*/

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/*********************************** GLOBÁLISOK ******************************/
/*****************************************************************************/
#lightingtop {
    background:                 url('images/lightingtop.png') no-repeat scroll 0% 0% transparent;
    width:                      778px;
    height:                     929px;
    position:                   fixed;
    top:                        0;
    right:                      0;
    z-index:                    -1;
    opacity:                    1;
}

/***** Transparend_bg - Eleje ********/
.transparent_bg {
    background:                 rgba(85, 128, 85, .1);
    border:                     .2rem solid var(--green1);
    border-radius:              .5rem;
    box-shadow:                 .2rem .2rem .2rem rgba(0, 0, 0, .40);
    backdrop-filter:            blur(.2rem);
    background-image:           url('images/stripe.svg');
}
/***** Transparend_bg - Vége *********/

/*** Egész oldal reszponzív képei  ***/
.responsive_image {
    max-width:                  100%;
    height:                     auto;
}
/*************************************/

/***** Egész oldal alap linkjei  *****/
.linkek {
    color:                      black;
}

.linkek:hover {
    text-decoration:            none;
    color:                      gray;
}
/*************************************/

/*************************************/
/** Ugrás az oldal tetejére - Eleje **/
/*************************************/
.centered {
    display:                    flex;
    justify-content:            center;
}

.jump_to_top {
    display:                    block;
    width:                      3rem;
    height:                     3rem;
    text-align:                 center;
    border-radius:              50%;
    border:                     .2rem solid rgba(85, 128, 85, 1);
    box-shadow:                 .2rem .2rem .2rem rgba(0, 0, 0, .4);
    background-image:           url('images/arrow_up.svg');
    background-repeat:          no-repeat;
    background-size:            contain;
    background-color:           white;
}
/*************************************/
/** Ugrás az oldal tetejére - Vége ***/
/*************************************/

/*****************************************************************************/
/**************************** ÁLLÁSOK KÁRTYÁK - START ************************/
/*****************************************************************************/

.card_container {
    display:                grid;
    grid-template-columns:  1fr;
    gap:                    1rem;
    margin-bottom:          1rem;
}
/*****************************************************************************/

.card{
    position:               relative;                   /* CARD RELATIVE */
    background-color:       rgba(85, 128, 85, .1);
    min-height:             50vh;
    overflow:               hidden;
    box-shadow:             .2rem .2rem .2rem rgba(0, 0, 0, .40);
    height:                 30rem;                       /* Mind a 3 kártya azonos magasságú */

    background-image:       url('images/stripe.svg');
    backdrop-filter:        blur(.2rem);
    border-radius:          .5rem;

    border:                 .2rem solid var(--green1);

    transition:             .2s;
}

.card:hover {
    border-image-source:    repeating-linear-gradient(45deg, green, gold 2rem 2rem, green 20%);
    border-image-repeat:    stretch;
    border-image-slice:     1;
    transform:              translateY(-0.25rem);
}

/*************************************/
/********* Keretvillogás - eleje *****/
/*************************************/
.card_container > .card:nth-child(2) {
    animation-name:         villogas;
    animation-duration:     .25s;
    animation-iteration-count: 12;
}

@keyframes villogas {
    0% {
        border-image-source:    repeating-linear-gradient(45deg, green, gold 2rem 2rem, green 20%);
        border-image-repeat:    stretch;
        border-image-slice:     1
    }

    100% {
        border-image-source:    repeating-linear-gradient(45deg, gold, green 2rem 2rem, gold 20%);
        border-image-repeat:    stretch;
        border-image-slice:     1
    }
  }
/*************************************/
/********** Keretvillogás - vége *****/
/*************************************/
.chapes_inside_card {
    position:               absolute;
    height:                 80%;
    width:                  100%;
}

hr {
    border:                 .1rem dashed rgba(46, 139, 87, 1);
}

#szovegkiemeles {
    color:                  white;
    background-color:       rgba(46, 139, 87, 1);
    padding:                .2rem;
    font-weight:            600;
    box-decoration-break:   clone;
    border-left-color:      var(--black);
}


/************************************ Shapes *********************************/


.rectangle_1 {
    position:               absolute;                   /* ALL SHAPE IS ABSOLUTE */
    width:                  100%;
    height:                 60%;
    transform:              rotate(45deg);

    margin-left:            auto;
    margin-right:           auto;
    left:                   0;
    right:                  0;

    top:                    -30%;

    background-image:       radial-gradient(farthest-corner at 1rem 1rem , rgba(0, 128, 0, 0.1), rgba(0, 128, 0, 0.1));
}

.rectangle_2 {
    position:               absolute;
    width:                  100%;
    height:                 60%;
    transform:              rotate(135deg);

    margin-left:            auto;
    margin-right:           auto;
    left:                   -50%;
    right:                  -2rem;

    top:                    -20%;

    background-image:       radial-gradient(farthest-corner at 1rem 1rem , rgba(0, 128, 0, 0.1), rgba(255, 255, 255, 0.1));
}

.circle {
    position:               absolute;
    width:                  14rem;
    height:                 14rem;
    border-radius:          50%;

    margin-left:            auto;
    margin-right:           auto;
    left:                   auto;
    right:                  0;
    bottom:                 -50%;

    background-image:       radial-gradient(farthest-corner at 1rem 1rem , rgba(0, 128, 0, 0.1), rgba(255, 255, 255, 0.1));
}

/*******************************Text after shapes ****************************/

.content_on_card {
    position:               relative;                   /* AGAIN THE TEXT CONTENT FROM HERE IS RELATIVE */
    padding:                1rem;
    height: 100%;
    width: 100%;

    display:                grid;
    grid-template-columns:  1fr;
    grid-template-rows:     auto 1fr;
    gap:                    1rem;
}

.content_on_card_head_section {
    text-align:             center;
}

.content_on_card_body_section {
    text-align:             center;
}

/* Kártyaheader dekorja */
.profilkep{
    margin:                 0 auto;
    width:                  5rem;
    height:                 5rem;
    background-image:       url('./images/profile.svg');
    background-repeat:      no-repeat;
    background-size:        5rem 5rem;
    background-position:    center;
    border:                 .2rem solid var(--black);
    border-radius:          50%;
}
.elvarasok_szoveg {
    text-align:             left;
}

.szakma{
    font-size:              xx-large;
    margin:                 1rem auto;
    text-decoration:        underline double var(--black);

}

.feltetel {
    margin:                 1rem auto;
    border-left:            .2rem solid var(--green2);
    background-color:       rgba(255, 255, 255, 0.8);
    border-radius:          0 .25rem .25rem 0;
}
.feltetel::before {
    content:                '⚡';
    padding-right:          .5rem;
}

/*****************************************************************************/
/**************************** ÁLLÁSOK KÁRTYÁK - START ************************/
/*****************************************************************************/

/*************************************/
/*************** Logo ****************/
/*************************************/
.logo{
    height:                     270px;

    background-image:           url('./images/manuelvill_szurke_v2.png');
    background-repeat:          no-repeat;
    background-size:            contain;
}
/*************************************/
/*************************************/
/*************************************/

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/******************************* INDEX.HTML **********************************/
/*****************************************************************************/
.tartalom_container {
    display:                    flex;
    flex-direction:             column;
    gap:                        1rem;
    margin-bottom:              1rem;
}

.tartalom_container>div:last-child {
    padding:                    1rem;
}
.tartalom_container>div:first-child {
    background-color:           rgba(36, 103, 45, .4);
    border-radius:              0.5rem;
}

.cim {
    font-size:                  x-large;
}
/*************************************/
/****** Cégtörténet a főoldalon ******/
/*************************************/
.cegtortenet {
    position:                   relative;
}

.cegtortenet > p {
    margin-bottom:              1rem;
}

.ground_icon {
    position: absolute;
    background-image:           url('images/ground.svg');
    width:                      4rem;
    height:                     4rem;
    right:                      0;
}

/* Felsorolás cégtörténeten belül - Eleje */
.felsorolas_ul {
    padding-left: 1rem;
}
.felsorolas_ul > li {
    list-style:                 '➤ ';
    margin-bottom:              .5rem;
}
/* Felsorolás cégtörténeten belül - Vége  */

/*************************************/
/*************************************/
/*************************************/

/*************************************/
/*********** Skills - Start **********/
/*************************************/
.skills_bg{
    border:                 .2rem;
    border-style:           solid;
    border-image-source:    repeating-linear-gradient(45deg, var(--green2), white);
    border-image-repeat:    stretch;
    border-image-slice:     30;
}

/* Pipa - Eleje */
.checkmark {
    display:                    inline;
    height:                     2rem;
    width:                      auto;
}
/* Pipa - vége  */

.skills {
    display:                    flex;
    flex-direction:             column;
    justify-content:            flex-start;
    align-content:              center;
    gap:                        1rem;
    padding:                    1rem;
}

.skills > a:link {
    color:                      black;
    background:                 rgba(85, 128, 85, .1);
    display:                    block;
    box-shadow:                 .2rem .2rem .2rem rgba(0, 0, 0, .40);
    backdrop-filter:            blur(.2rem);
    transition:                 .5s;
}

.skills > a:link {
    color:                      black;
}

.skills > a:visited {
    color:                      black;
}

.skills > a:hover {
    color:                      green;
    text-decoration:            none;
    background:                 rgba(85, 128, 85, .2);
    transform:                  translateY(-0.25rem);
}

.skills > a:active {
    color:                      white;
}

.skills > a > .felsorolas {
    color: white;
    display:                    flex;
    flex-direction:             row;
    flex-wrap:                  nowrap;
    justify-content:            space-evenly;
    align-items:                center;
    gap:                        1rem;

    border-radius:              .5rem;
    margin:                     1rem;
}
/*************************************/
/*********** Skills - End  ***********/
/*************************************/



/*************************************/
/****** Írógép animáció - Eleje ******/
/*************************************/

.line-1{
    width:                  24em;
    border-right:           .15rem solid transparent;
    white-space:            nowrap;
    overflow:               hidden;
    transform:              translateY(-50%);    
}

/* Animation */
.anim-typewriter{
    animation:              typewriter 4s steps(43) 1s 1 normal both, blinkTextCursor 500ms steps(43) 16 normal;
}

@keyframes typewriter{
    from {
        width:              0;
    }
    to {
        width:              23rem;
    }
}

@keyframes blinkTextCursor {
    from{
        border-right-color: var(--black);
    }
    to{
        border-right-color: transparent;
    }
}
/*************************************/
/******* Írógép animáció - Vége ******/
/*************************************/

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/************************** REFERENCIAMUNKAINK.HTML **************************/
/*****************************************************************************/

/*************************************/
/************* GALÉRIA ***************/
/*************************************/
.gallery {
    display:                    grid;
    grid-template-columns:      1fr 1fr;
    gap:                        1rem;
    margin-bottom:              1rem;
}

.kep {
    position:                   relative;
    transition:                 0.2s;
}

/* Képkeret hoverje*/
.kep:hover {
    transform:                  translateY(-0.25rem);
}

/*** Kör a képen - eleje ***/
.number_on_image {
    color:                      white;
    background:                 rgba(64, 128, 64, 1);
    position:                   absolute;
    height:                     1.5rem;
    width:                      1.5rem;
    top:                        -0.5rem;
    left:                       1rem;
    border-radius:              50%;
    border:                     .2rem solid white;


    display:                    flex;       /*Így mindig centerben vannak a számok X és Y -ban is*/
    justify-content:            center;
    align-items:                center;
}

.number_on_image > span {                   /* Ez maga a szám a körben*/
    font-size:                  x-small;
    font-weight:                bold;
}
/*** Kör a képen - vége ***/

.kepen_a_link {
    display:                    block;
    width:                      100%;
    height:                     100%;
    border-radius:              .5rem;
}

.kepkeret {
    padding:                    .25rem;
    background-color:           white;
    /*border:                     .1rem solid green;*/
    border-radius:              .5rem;
    max-width:                  100%;
    height:                     auto;
}

.fitimg {
    width:                      100%; /* You can set the dimensions to whatever you want */
    height:                     10rem;
    object-fit:                 cover;
    box-shadow:                 .2rem .2rem .2rem rgba(0, 0, 0, .40);
}

.referenciamunka_alatti_szoveg {
    margin:                     1rem 0;
}
/*************************************/
/*************************************/
/*************************************/

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/******************************** LEIRASOK.HTML ******************************/
/*****************************************************************************/
.leiras {
    padding: 1rem;
    margin-bottom: 1rem;
}

/*Visszanyil - Eleje*/
.go_back {
    display:                    flex;
    justify-content:            center;
    align-items:                center;

    border:                     .2rem solid var(--green1);
    background-color:           white;
    width:                      11rem;
    height:                     2rem;
    border-radius:              1rem;
    text-decoration:            none;
    margin-top:                 1rem;
    padding:                    1rem;
}

.go_back:link {
    color:                      black;
}
.go_back:active {
    color:                      black;
}
.go_back:visited {
    color:                      black
}

.telefon {
    display: block;
    width: 2rem;
    height: 2rem;
    background-image: url('./images/arrow_left.svg');
    background-repeat: no-repeat;
    background-position: center;
}
/*Visszanyil - Vége */

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/***************************** ELERHETOSEGEK.HTML ****************************/
/*****************************************************************************/

/*****************************************************************************/
/********************** contact_card_container START *************************/
/*****************************************************************************/
.contact_card_container {
    display:                grid;
    grid-template-columns:  1fr;
    gap:                    1rem;
    margin-bottom:          1rem;
}

/*************************************/
/*********** contact_card ************/
/*************************************/

/* Két child van a contact_card_container parenten belül */
/* :nth-child(1) == elérhetőségek kártya */
/* :nth-child(2) == térkép kártya */

/************************************************/
/*************** CÉGADATOK KÁRTYA ***************/
/************************************************/
.contact_card:nth-child(1) {
    border:                 .2rem solid var(--green2);
    display:                grid;
    grid-template-columns:  auto 1fr;
    gap:                    1rem;
    padding:                1rem 0 1rem 1rem;
    border-radius:          0.5rem;
    background-image:       url('./images/stripe.svg');
}

.contact_card:nth-child(1) > div {
    /* border:                 .2rem solid gray; */
    padding-top:            .25rem;
    padding-bottom:         .25rem;
}

.col-span-2 {
    grid-column:            span 2;
}

.picture_on_contact_card {
    text-align:             center;
}
.col-1 {
    display:                flex;
    justify-content:        center;
    align-items:            center; 
}

.col-2 {
    display:                flex;
    justify-content:        center;
    align-items:            center;

    text-align:             center;
    background-color:       white;
    min-height:             3.8rem;
    padding-left:           .5rem;
    padding-right:          .5rem;
    transition:             .2s;
    border-left-width:      .2rem;
    border-left-style:      solid;
    border-left-color:      green;
    box-shadow:             .0rem .2rem .2rem rgba(0, 0, 0, .5);
}

.col-2:hover {
    transform:              translateY(-.2rem);
    border-left:           .2rem solid red;
}

.qr-code {
    text-align:             right;
}
.qr-code > img {
    height:                 5.5rem;
    width:                  5.5rem;
    margin:                 0 .5rem .5rem 0;
    box-shadow:             .0rem .2rem .2rem rgba(0, 0, 0, .5);
}

/*Ikonok*/
.telefon_bg {
    background-image:       url('./images/phone.svg');
    background-repeat:      no-repeat;
    background-size:        50% 50%;
    background-position-y:  center;
    background-position-x:  -1.5rem;
}

/* Linkek vastagítása a kártyán */
.contact_card > a {
    font-weight:            bold;
}

/*******************************************/
/*** TÉRKÉP megformázása innentől lefelé ***/
/*******************************************/
.contact_card:nth-child(2) {
    border:                 .2rem solid var(--green2);
    padding:                1rem;
    border-radius:          0.5rem;
    background-image:       url('./images/stripe.svg');
    text-align:             center;
}

.contact_card:nth-child(2) > div {
    /* border:                 .2rem solid gray; */
    padding-top:            .25rem;
    padding-bottom:         .25rem;
}

iframe {
    border:                 .1rem solid transparent;
    width:                  100%;
    min-height:             40rem;
}

/*****************************************************************************/
/*********************** contact_card_container END **************************/
/*****************************************************************************/
.infocard1 {
    margin-bottom:              1rem;
    border:                     .2rem solid var(--green1);
    border-radius:              .5rem .5rem .5rem .5rem;
    border-left-width:          1rem;
    border-left-color:          var(--green1);
    background:                 rgba(85, 128, 85, .1);
    box-shadow:                 .2rem .2rem .2rem rgba(0, 0, 0, .40);
    backdrop-filter:            blur(.2rem);
    background-image:           url('images/stripe.svg');
}

.infocard1_item {
    display:                    flex;
    align-items:                center;
    margin:                     1rem;
}

.infocard1 a {
    font-weight:                bold;
}

/*****************************************************************************/
/*****************************************************************************/
/*****************************************************************************/

/*****************************************************************************/
/*************************** CSS @media Rule - Eleje *************************/
/*****************************************************************************/
/**************************/
/* SM devices - (≥ 568px) */
/**************************/
@media screen and (min-width: 35.5em){

}
/**************************/
/* MD devices - (≥ 768px) */
/**************************/
@media screen and (min-width: 48em){
    header {
        width:                      66vw;
    }

    main {
        width:                      66vw;
    }
}
/***************************/
/* LG devices - (≥ 1024px) */
/***************************/
@media screen and (min-width: 64em){
    /* Skills háttere */
    .skills {
        background-image: url('./images/bgleft.webp');
    }

    /* Fömenü linkjei itt törik kisebb darabokra nagyméretben*/
    nav > ul {
        flex-direction:             row;
    }
    nav>ul>li{
        border-top:                 .1rem solid rgba(0, 0, 0, 0);
    }
    nav > ul > li > a:hover {
        border-bottom:              .1rem solid var(--green1);
    }

    .gallery {
        grid-template-columns:      1fr 1fr 1fr;
    }



    .contact_card_container {
        grid-template-columns:      1fr 1fr;
        width: 100%;
    }
    .col-2:hover {
        transform:                  translateX(1.5rem);
    }

    /* Cím kihúzása jobbra. */
        .contact_card > div:nth-child(5),
        .contact_card > div:nth-child(3) {
        transform:              translateX(1.5rem);
    }



    .elerhetoseg_grid > div:nth-child(2n+2) {
        padding-left:               1rem;
        text-align:                 left;
    }
        .elerhetoseg_grid > div:nth-child(2n+2):last-child {
        text-align:                 center;
    }

    .card_container{
        grid-template-columns:      1fr 1fr;
    }

    .card{
        height:                     33rem;
    }
}
/***************************/
/* XL devices - (≥ 1280px) */
/***************************/
@media screen and (min-width: 80em){
    .gallery {
        grid-template-columns:      1fr 1fr 1fr 1fr;
    }

    .elerhetosegek_container {
        flex-direction:             row;
    }

    .tartalom_container {
        flex-direction:             row;
    }
}
/****************************/
/* XXL devices - (≥ 1920px) */
/****************************/
@media screen and (min-width: 120em){
    .card_container{
        grid-template-columns:      1fr 1fr 1fr;
    }
    .card{
        height:                     28rem;
    }

    .gallery {
        grid-template-columns:      1fr 1fr 1fr 1fr 1fr;
    }
}
/*****************************/
/* XXXL devices - (≥ 2560px) */
/*****************************/
@media screen and (min-width: 160em){
    .gallery {
        grid-template-columns:      1fr 1fr 1fr 1fr 1fr 1fr;
    }
}
/****************************/
/* X4K devices - (≥ 3840px) */
/****************************/
@media screen and (min-width: 240em){
    .gallery {
        grid-template-columns:      1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}
/*****************************************************************************/
/*************************** CSS @media Rule - Vége **************************/
/*****************************************************************************/