*

body
{
   
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Arial, sans-serif;
    line-height: 1.5; 
    background-color: whitesmoke;
}
header
{
    background-image: url();
    height: 300px;
    width: 100%;
    position: relative;
    text-align: center;
    overflow: hidden;
}
text
{
    color: #4a4a4a;
}
header .item
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    
}
header .item img
{
    width: 100%;
    height: 100%;
      
}
/*header .item2
{
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    height: 100%;
    padding: 0;
    margin: 0;
}
header .item2 img
{
    width: 100%;
    height: 100%;
}*/
header .logo
{
    position: absolute;
    left: 50%;
    transform: translateX(-100px);
    object-position: left;
}
header .logo img
{
    width: 300px;
    margin-top: 25px;
    /*margin-top: 0;
    padding-left: 15px;*/
}
header .itemtext
{
    position: absolute;
    left: 50%;
    font-size: 14px;
    width: 300px;
    transform: translateX(-135px);
    margin-top: 170px;
    padding-left: 35px;
    color: #4a4a4a;
}
.intro
{
    color: #4a4a4a;
    text-align: center;
    
}
main,
aside
{
    margin: 35px;
    color: #4a4a4a;
}
main
{
    width: 70%;
}
main2,
aside2
{
    width: 50%;
    color: #4a4a4a;
    text-decoration: none;
}

aside
{
    width: 30%;
    margin-left: 0;
}
aside section
{
    padding: 25px;
    margin-bottom: 25px;
   
}
aside .ul,li 
{
    text-decoration: none;
}
h1,
h2,
h3
{
    color: #4a4a4a;
}
footer
{
    padding: 25px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    color: #4a4a4a;
}
footer ul
{
    list-style: none;
    padding: 0;
}

a
{
    color: rgb(218, 20, 36);
    text-decoration: none;
}
a:hover
{
    text-decoration: underline;
}
.more    
{
    background-color: rgb(218, 20, 36);
    color: #eee;
    padding: 8px;
    padding-left: 15px;
    padding-right: 20px;
    border-radius: 50px;
    transition: 0.8s;
}
.more:hover
{
    background-color: rgb(218, 20, 36);
    text-decoration: none;
}
.callToAction
{
    padding: 5px 15px;
    background-color: #d8d8d8;
    border-radius: 50px;
    transition: 0.8s;
}
.callToAction:hover
{
    background-color: #d8d8d8;
    text-decoration: none;
}
nav
{
    position: static; 
}
nav ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    border-radius: 50px;
    
}
nav a
{
    padding: 10px 15px;   
    color: rgba(84, 84, 85, 0.75);
    text-transform: uppercase;
    font-size: 95%;
    display: block;
}
nav a:hover
{
    color: #fff;
    background-color: rgba(0,0,0, 0.25);
    text-decoration: none; 
    border-radius: 60px;
}
.container
{
    display: flex;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
}
.container2
{
    display: flex;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
}

/* cikk - kezdőlap*/
article img
{
    margin-bottom: 15px;
    max-width: 100%;
}
article section
{
    border-left: 15px solid #e8e8e8;
    padding-left: 25px;
    padding-bottom: 5px;
    margin-bottom: 25px;
}
article .intro
{
    font-weight: bold;
    color: #444;
}
/* Táblázat-szolgáltatások*/
table
{
    margin: 25px;
    border-collapse: collapse;
}
thead,
tbody
{
    border-radius: 15px;
}
thead
{
    background-color: #dcdaeb;
    color: #635f7e;
    font-size: 90%;
}
th,
td
{
    text-align: center;
    padding: 8px;
}
tbody tr
{
    border-bottom: 1px solid #d8d8d8;
}
tbody tr:hover
{
    background-color: #f6f5fd;
    transition: 0.5s;
}
table .price
{
    /* A whitspace-ekkel (szóköz, tab, enter) nem töri meg a szöveget */
    white-space: nowrap;
}
table .content
{
    font-size: 80%;
}
/*galéria-referenciák*/
.gallery
{
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.gallery li
{
    width: 16.1%;
    margin-bottom: 0.666%;
    overflow: hidden;
}
.gallery a 
{
    display: block;
    opacity: 0.8;
    transition: 0.5s;
}
.gallery a:hover
{
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 25px 30px -15px #000;
}
.gallery img
{
    width: 100%;
    height: 120px;
    object-fit: cover;
    /*object-position: center;-általában ez az alapértelmezett*/
    display: block;
    transition: 0.5s;
}
.gallery .auto
{
    width: 49.666%;
}
/*kapcsolatok*/
iframe
{
    border: 0;
    width: 100%;
    height: 350px;
}
@media screen and (max-width:1225px) 
{
    header .logo img
    {
        max-width: 85%;
    }
    header .itemtext
    {
        font-size: 85%;
    }
}
@media screen and (max-width:1100px) 
{
    header .logo img
    {
        max-width: 60%;
    }
    header .itemtext
    {
        font-size: 60%;
    }
}
@media screen and (max-width: 900px)
{
    header
    {
        max-height: 60%;
        max-width: 100%;
    }
    header .logo img
    {
        max-width: 50%;
    }
    header .itemtext
    {
        font-size: 50%;
        margin-top: 100px;
    }
}
@media screen and (max-width: 790px)
{
    header
    {
        max-height: 175px;
    }
    header .logo img
    {
        max-width: 40%;
    }
    header .itemtext
    {
        font-size: 40%;
        margin-top: 80px;
    }
}
@media screen and (max-width: 700px) 
{
    
    header
    {
        max-height: 150px;
    }
    main,aside
    {
        width: 50%;
    }
    header .logo img
    {
        max-width: 30%;
        transform: translateX(-25px);
    }
    header .itemtext
    {
        font-size: 30%;
        margin-top: 65px;
        transform: translateX(-160px);
    }
    .gallery li 
    {
        width: 49.666%;
    }
    
    table,
    tbody,
    tr, td, th
    {
        display: block;
    }
    thead
    {
        display: none;
    }
    table tr th:first-child,
    table tr *:nth-child(3)
    {
        display: none;
    }
     
}
@media screen and (max-width: 550px)
{
    header
    {
        max-height: 100px;
        max-width: 100%;
    }
    header .logo img
    {
        margin-top: 5px;
        max-width: 30%;
        transform: translateX(-5px);
    }
    header .itemtext
    {
        font-size: 30%;
        margin-top: 40px;
        transform: translateX(-165px);
    }
    nav ul
    {
        flex-wrap: wrap;
    }
    .container
    footer
    {
        display: block;
    }
    main,
    aside
    {
        width: auto;
    }
    aside
    {
        margin-left: 35px;
    }
    footer section
    {
        margin-bottom: 35px;
    }

    /* mobil menü*/
    nav
    {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: transparent;   
        background-image: url(menus-2.png);
        background-size: 100%;
        opacity: 0.75;
        cursor: pointer;
        right: 15px;
        top: 15px;
        transition: 0.5s;
        overflow: hidden;
    }
    nav.open
    {
        position: fixed;
        width: 100%;
        height: 100%;
        right: 0;
        top: 0;
        z-index: 1;
        background-color: rgba(0,0,0, 0.66);
        background-image: none;
        opacity: 1;
        display: flex;
        justify-content: flex-end;
    }
    nav ul
    {
        background-color: #fff;
        display: block;
        height: 100%;
        width: 75%;
        max-width: 250px;
        padding-top: 25px;
        display: block;
        opacity: 0;
        transform: translateX(250px);
        transition: 0.5s;
    }
    nav.open ul
    {
        opacity: 1;
        transform: translateX(0);
    }
    nav a
    {
        font-size: 120%;
        color: #999;
        padding: 15px 20px;
    }
}