 body {
     margin: 0;

     font-family: Roobert, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: 16px;
     font-weight: 600;
 }

 * {
     box-sizing: border-box;
 }

 html {
     font-size: 18px;
     height: 100%;
 }

 .logo {
     padding: 20px;
     background-color: white;
     width: 100%;
     position: relative;

 }

 .logo img {
     height: 10vw;
     width: auto;
     display: block;
     margin-left: auto;
     margin-right: auto;
     position: relative;
 }

 .logo p {
     font-size: 1.2vw;
     font-weight: bold;
     font-style: oblique;
 }

 .logo .p1 {
     position: absolute;
     top: 20%;
     right: 15%;
     display: flex;
 }

 .logo .p2 {
     position: absolute;
     top: 45%;
     right: 15%;
     display: flex;
 }

 .logo .phone_icon {
     height: 1.3vw;
     width: auto;
 }

 .logo .p1 a {
     text-decoration: none;
     color: black;
 }

 .logo .mail_icon {
     height: 1.6vw;
     width: auto;
 }


 nav {
     background: rgba(0, 0, 0, 0.9);
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     max-width: 70%;
     margin: auto;
     margin-bottom: 40px;
 }

 nav::after {
     content: "";
     clear: both;
     display: table;
 }

 nav .navigation a {
     color: #fff;
     text-decoration: none;
     padding: 20px;
     display: block;
 }



 nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 nav ul li .cim {

     color: #fff;
     text-decoration: none;
     left: 0px;
     padding: auto;
     display: block;
 }

 nav ul li a {
     float: right;
 }

 nav .cim {
     font-size: 22px;
     float: left;
     padding: 18px;
 }

 nav a:hover {
     color: #C28F47;
     transition: 0.5s;
 }

 nav .cim:hover {
     color: #C28F47;
     transition: 0.5s;
 }

 .wrapper {
     width: 70%;
     background: white;
     margin: 0 auto;
 }

 .wrapper .picture img {
     width: 100%;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, .4);
     transition: 1s;
 }

 .wrapper .kapcsolat {
     text-align: center;
     font-size: 18px;
 }

 .wrapper .kapcsolat .melleklet p {
     font-size: 14px;
     font-style: italic;
     text-align: left;
 }

 .wrapper .form {
     width: 50%;
     margin: auto;

 }

 .wrapper .kapcsolat .email {
     color: black;
     position: relative;
     width: 100%;
     height: 3rem;
     margin: 0 0 2rem 0;

 }

 .wrapper .kapcsolat .form_input {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 2px solid grey;
     border-radius: 0.5rem;
     outline: none;
     padding: 1.25rem;
     background: none;

 }

 .wrapper .kapcsolat .form_label {
     color: black;
     position: absolute;
     left: 1rem;
     top: 0.8rem;
     padding: 0 0.5rem;
     cursor: text;
     transition: 0.2s;
     background-color: white;

 }

 /*
.form_input:focus ~ .form_label{
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0.8rem;
}
*/
 /*
.form_input:placeholder-shown ~ .form_label{
    border: 1px solid #ccc;
  }
  */
 .form_input:not(:placeholder-shown)~.form_label {
     top: -0.5rem;
     font-size: 0.8rem;
     left: 0.8rem;
 }

 .gomb {
     appearance: none;
     background-color: transparent;
     border: 2px solid #1A1A1A;
     border-radius: 15px;
     box-sizing: border-box;
     color: #3B3B3B;
     cursor: pointer;
     display: inline-block;
     line-height: normal;
     margin: 8rem 0 3rem 0;
     min-height: 60px;
     min-width: 0;
     outline: none;
     padding: 16px 24px;
     text-align: center;
     text-decoration: none;
     transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
     user-select: none;
     -webkit-user-select: none;
     touch-action: manipulation;
     width: 100%;
     will-change: transform;
 }

 .gomb:disabled {
     pointer-events: none;
 }

 .gomb:hover {
     color: #fff;
     background-color: #1A1A1A;
     box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
     transform: translateY(-2px);
 }

 .gomb:active {
     box-shadow: none;
     transform: translateY(0);
 }

 .picture {
     position: relative;
     color: #C28F47;
     font-size: 3vw;
     justify-content: center;
     align-items: center;
 }

 .szlogen {
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 35%;
     left: 17%;
     transform: scale(0);
     transition: 0.5s;
 }

 .picture:hover>.szlogen {
     transform: scale(1);
     transition: 0.5s;

 }

 .picture:hover>img {
     filter: blur(6px);
     transition: 0.5s;
 }

 .content {
     padding: 2rem 4rem;
     margin: 0 0 2rem 0;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-gap: 10px;
     grid-template-areas:
         "header header header header"
         "main main main main"
         ". . . footer";
     position: relative
 }

 .content .header {
     grid-area: header;
     font-size: 1.5rem;

 }

 .content .indexh1 {
     color: #C28F47;
     font-size: 4vw;
     margin: auto;
     text-shadow: 2px 2px rgba(0, 0, 0, .1);
 }

 .content .main {
     grid-area: main;
     font-size: 3vw;
     margin: auto;
 }

 .text ul {
     margin: auto;
     list-style-type: none;
 }

 .mobile-menu-button {
     width: 50px;
     display: block;
     float: right;
     border: 2px solid #C28F47;
     padding: 10px;
     margin: 7px 5px;
     display: none
 }

 .mobile-menu-button span {
     display: block;
     height: 4px;
     background: white;
     margin: 0 0 5px 0;
     border-radius: 2px
 }

 .mobile-menu-button span:last-of-type {
     margin: 0;
 }

 .mobile-menu-button+input[type="checkbox"] {
     display: none
 }

 .mobile-menu-button+input[type="checkbox"]:checked~.navigation li {
     display: block;
 }

 .mobile-menu-button+input[type="checkbox"]:checked~.cimul {
     display: none;
 }

 /*arlista.html rész*/
 .arlista p {
     margin: 30px auto;
     text-align: center;
     font-size: 2vw;
 }

 .arlista h1 {
     margin: 70px auto auto auto;
     text-align: center;
     font-size: 6vw;
     text-shadow: 2px 2px rgba(0, 0, 0, .1);
 }

 .arlista_table {
     margin: 3vw auto auto auto;
 }


 .arlista_table {
     border-collapse: collapse;
     box-shadow: 0 0 100px rgba(0, 0, 0, .3);
 }

 .arlista_table .tableptag {
     font-size: 2vw;
     padding: 0px;
     margin: 0px;
     float: left;
 }

 .arlista_table td {
     font-size: 3vw;
     padding: 10px 15px;
     background: white;
     transition: all .3s
 }

 .arlista_table tr:nth-child(odd) td {
     background: #ddd
 }

 .arlista_table tr:hover td {
     background: #C28F47;
     color: white;
 }

 /*automentes*/
 .automentes p {
     margin: 30px auto;
     text-align: center;
     font-size: 2vw;
 }

 .automentes h1 {
     margin: 70px auto auto auto;
     text-align: center;
     font-size: 6vw;
     text-shadow: 2px 2px rgba(0, 0, 0, .1);
 }

 .automentes_table {
     margin: 3vw auto auto auto;
 }


 .automentes_table {
     border-collapse: collapse;
     box-shadow: 0 0 100px rgba(0, 0, 0, .3);
 }

 .automentes_table .tableptag {
     font-size: 2vw;
     padding: 0px;
     margin: 0px;
     float: left;
 }

 .automentes_table td {
     font-size: 3vw;
     padding: 10px 15px;
     transition: all .3s
 }

 .automentes_table tr:nth-child(odd) td {
     background: #ddd
 }

 .automentes_table tr:hover td {
     background: #C28F47;
     color: white;
 }

 /*gumiszerviz*/
 .gumiszerviz p {
     margin: 30px auto;
     text-align: center;
     font-size: 2vw;
 }

 .gumiszerviz h1 {
     margin: 70px auto auto auto;
     text-align: center;
     font-size: 6vw;
     text-shadow: 2px 2px rgba(0, 0, 0, .1);
 }

 .gumiszerviz_table {
     margin: 3vw auto auto auto;
 }


 .gumiszerviz_table {
     border-collapse: collapse;
     box-shadow: 0 0 100px rgba(0, 0, 0, .3);
 }

 .gumiszerviz_table .tableptag {
     font-size: 2vw;
     padding: 0px;
     margin: 0px;
     float: left;
 }

 .gumiszerviz_table td {
     font-size: 3vw;
     padding: 10px 15px;
     transition: all .3s
 }

 .gumiszerviz_table tr:nth-child(odd) td {
     background: #ddd
 }

 .gumiszerviz_table tr:hover td {
     background: #C28F47;
     color: white;
 }

 /*utanfutokolcsonzes.html rész*/
 .arlista .uk_grid {
     padding: 2rem 2rem;
     margin: 0 0 2rem 0;

     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
     grid-template-areas:
         "first second third";
     position: relative
 }

 .arlista .uk_grid .first {
     grid-area: first;
     font-size: 1.5rem;
     margin: auto;
 }

 .arlista .uk_grid img {
     margin: auto;
     padding: auto;
     width: 100%;
     height: auto;
 }



 /*munkaim.html rész*/
 .munkaim {
     box-sizing: border-box;
     padding: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin: 40px 20px 0 20px;
 }

 .munkaim .box {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }

 .munkaim .box .dream {
     display: flex;
     flex-direction: column;
     width: 32.5%;
 }

 .munkaim .box .dream img {
     width: 100%;
     margin-bottom: 20px;
     border-radius: 5px;
 }

 @media only screen and (max-width: 900px) {
     .munkaim .box {
         flex-direction: column;
     }

     .munkaim .box .dream {
         width: 100%;
     }
 }

 /*bemutatkozas.html rész*/

 .bemutatkozas {
     width: 70%;
     align-items: center;
     margin: auto;
     padding-bottom: 20px;
 }

 .bemutatkozas img {
     width: 25%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     border-radius: 5%;
 }

 .bemutatkozas .itext {
     font-size: 1.5vw;
 }

 /* vizsga.html */
 .vizsga {
     max-width: 70%;
     margin: auto;

     .title {
         margin: 70px auto auto auto;
         text-align: center;
         font-size: 6vw;
         text-shadow: 2px 2px rgba(0, 0, 0, .1);
     }

     .description {
         margin: 20px auto auto auto;
         font-size: 1.8vw;
     }
 }

 @media(max-width:900px) {
     .mobile-menu-button {
         display: block;
     }

     .navigation li {
         display: none;
         float: none;
     }

     .navigation li .blackhover {
         float: none;
     }

     .navigation a {
         padding: 1rem;
     }

     .cim {
         padding: 10px 0px 14px 0px;
     }

     .elerhetoseg {
         font-size: 2vw;
     }

     .logo img {
         height: 15vw;
         right: 29%;
     }

     .logo p {
         font-size: 2.8vw;
     }

     .logo .p1 {
         position: absolute;
         top: 20%;
         right: 15%;
         display: flex;
         align-items: center;
     }

     .logo .p2 {
         position: absolute;
         top: 45%;
         right: 15%;
         display: flex;
         align-items: center;
     }

     .logo .phone_icon {
         height: 2vw;
         width: auto;
         right: 0%;
     }

     .logo .mail_icon {
         height: 2.4vw;
         width: auto;
         right: 0%;
     }

     .wrapper .kapcsolat {
         text-align: center;
         font-size: 2.4vw;
     }

     .wrapper .form {
         width: 80%;
         margin: auto;

     }

     .bemutatkozas {
         width: 70%;
         align-items: center;
         margin: auto;
     }

     .bemutatkozas img {
         width: 40%;
         display: block;
         margin-left: auto;
         margin-right: auto;
         border-radius: 5%;
     }

     .bemutatkozas .itext {
         font-size: 3vw;
     }

     .wrapper .kapcsolat .melleklet p {
         font-size: 10px;
         font-style: italic;
         text-align: left;
     }
 }