* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #D7B520;    
    padding: 5px;
    font-family: 'Roboto', sans-serif;
}

h2, h3, h4, p {
    padding: 5px;
}

main{    
    width: 80%;
    margin: 20px auto;
    border: 2px solid #ddd;
    box-shadow: 6px 8px 8px chocolate;
    border-radius: 5px;    
    background-color:  #fff;  
    color:  #555;
    height:  auto; 
    padding: 1%;  
}
/** - Header -**/
header {
    text-align: center;
    background-color: Gainsboro;
    /*padding: 30px;*/
    border: 1px solid blueviolet;
    border-radius: 12px;
    margin-bottom:  10px;
}

header h1 {
    font-size: 3vw;
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: rgba(64, 224, 208, 0.4);
    color: yellow;    
    padding: 16px 30px;   
    text-align: center;    
    border-radius: 50%;
}

header img{
    width: 100%;
    height: auto;
    margin-bottom: -4px;
    border-radius: 12px;
}

div.left-column {
    float: left;
    width: 30%;
    height: 100%;    
    background: #6c9dc6;
    padding: 1vw;
    color: white;
    border: 1px solid brown;
    border-radius: 12px;
}

div.right-column {
    float: left;
    width: 70%;
    padding-left: 8px;
}

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

/**** oldalsó menü ****/
.sidenav {
    width: 100%;
    /*position: fixed;*/
    position:   -webkit-sticky;
    position:   sticky;    
    z-index: 1;
    top: 2px;
    border-radius: 10px;
    background-color: blue;
    overflow-x: hidden;
    padding: 8px 0;
    margin-bottom: 30px;
}
  
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 18px;
    color: white;
    display: block;
}
  
.sidenav a:hover {
    color: bisque;
    background-color: teal;
}

.sidenav img{
    width: 20px;
    height: 20px;
}

#need{    
    animation-name: zoom;
    animation-duration: 5s;     
    margin: 10px auto;
    color: red;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
}
@keyframes zoom {
    0%   {color: #6c9dc6; background: #6c9dc6;}
    100% {color: red; background: rgba(255, 255, 255, 0.7);}
}

/* Az input mezők*/
form h4{
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
}

label{
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.4;
}

input[type=checkbox], input[type=radio]{
    width: 18px;
    height: 18px;
}

input[type=text], 
input[type=email], 
input[type=tel],  
select, 
textarea 
{
    width: 100%;
    padding: 12px;
    /*border:           thin solid grey;*/
    border-radius:    6px;
    resize:  vertical;
    background-color: #FFFACD;
    margin: 10px auto;
    font-size: 14px;
}

input[type=submit], .gdpr{
    width: 100%;
    padding: 12px;
    background-color: lime;
    border-radius:  6px;
    resize: vertical;
    margin: 5px auto;
    font-weight: bold;
}

input[type=submit]:hover, .gdpr:hover{
    cursor: pointer;
    background-color: olivedrab;
    color: white;
    transition: background-color .5s ease-in-out;
}

input:focus, select:focus{
    background-color: white;    
}

input:required, 
select:required{
    border: 1px solid red;
}

input:required::placeholder, 
select:required, 
label[for=adatkez]{
    color: red;    
}

ul.csekbox, ul.radiok{
    list-style-type: none;
    text-align: center;
    margin: 10px auto;
    line-height: 1.4;
}

span.red{
    color: red;
    font-size: 1.4rem;
}

/*  A táblázat*/
#hide{
    visibility: hidden;
    margin: 0 auto;
    text-align: center;
}

#rejtve{
    visibility: hidden;
    margin: 0 auto;
    text-align: center;    
}

#rejtve b{
    color: yellow;
}

/**** -- A jobb oldali oszlop, A strandok --****/
a.link{
    text-decoration: none;
    color: navy;
}
a.link:visited{
    color: green
}
a.link:hover{
    color: brown;
    font-style: normal;
}

section{
    margin: 0px auto;
    padding: 18px;    
}

section .tartalom{
    width: 100%;
    text-align: left;
    margin-top: 5px;
}

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

section p{
    margin-top: 10px;
    line-height: 1.4;
}

img.kep{
    width:  80%;
    height: auto;
    margin-left: 10%;
    border-radius: 8px;
}

img.jobbra{    
    width: 40%;
    height: auto;
    margin: 0 0 2px 10px;
    float:  right; 
    border-radius: 5px;   
}

img.kep:hover, img.jobbra:hover{
    opacity: 0.8;
    box-shadow: 5px 6px 5px gray;
    transition: 0.8s;
}

.link_jobbra{
    text-align:        right;
    font-style:        italic;
    margin:            15px 0 15px 0;
}
/***/
/* -- Külön a section-ök -- */
#szekcio1{
    background-color: #ffeee6;
    border: 1px solid hotpink;
    border-radius: 12px;
    margin-bottom: 10px;
}

#szekcio2{
    background-color: #FFFACD;
    border: 1px solid brown;
    border-radius: 12px;
    margin-bottom: 10px;
}

#szekcio3{
    background-color: lavender;
    border: 1px solid blueviolet;
    border-radius: 12px;
    margin-bottom: 10px;
}
/* - lábazat - */

footer {
    text-align: center;
    background-color: Gainsboro;
    padding: 20px;
    border: 1px solid blueviolet;
    border-radius: 12px;
}

/**** Footer END ****/

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

    div.right-column,
    div.left-column {
        width: 100%;
    }
    .sidenav a {
        float: none;
        text-align: center;
    }
}

hr{
    width: 60%;
    margin: 4px auto;
}