body {
    background: rgb(7,110,151);
    background: linear-gradient(90deg, rgba(7,110,151,1) 24%, rgba(3,142,196,1) 40%, rgba(3,142,196,1) 60%, rgba(8,98,134,1) 75%);
    color: #ffffff;
    font-size: 16px;
}

.tavtarto80 {
    height: 80px;
}

.tavtarto40 {
    height: 40px;
}

.tavtarto20 {
    height: 20px;
}

h4 {
    color: #f6c500;
}

h2 {
    font-size: 40px;
}


.top {
    height: 70px;
    background: #6b9c4d;
    padding-top: 10px;
    width: 100%;
    margin: 0;
    vertical-align: middle;
}

.bottom {
    background: #6b9c4d;
    text-align: center;
    padding: 20px 0px;
}

.bottom_szov {
    margin-bottom: 8px;
    font-size: 20px;
}

.bottom_szov2 {
    padding-left: 20px;    
    font-size: 20px;
}

.logo {
    width: 100%;
    max-width: 317px;
}

.kozepre {
    text-align: center;
}

.hero_alcim {
    background: #6b9c4d;
    padding: 10px 30px;
    border-radius: 5px;
}

.ablak1 {
    background: #019bd6;
    padding: 40px;
    border-radius: 7px;
}

.BTN_1 {
    padding: 10px 40px;
    background: #086286;
    border-radius: 7px;
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.BTN_1:hover {
    background: #ffffff;
    color: #086286;
}

.ablak2 {
    background: #6b9c4d;
    padding: 40px;
    padding-bottom: 20px;
    border-radius: 7px;
}

.BTN_2 {
    padding: 10px 40px;
    background: #4c7830;
    border-radius: 7px;
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

.BTN_2:hover {
    background: #ffffff;
    color: #4c7830;
}

.middle {
    vertical-align: middle;
}

.mobil {
    display: none;
}

.link {
    color: #ffffff;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
    color: #ffffff;
}

.kattinthat {
    cursor: pointer;
}

.kattinthat:hover {
    text-decoration: underline;
}

/* Small devices (tablets, 768px and up) */
@media all and (min-width: 100px) and (max-width: 992px) 
{
    .desktop        {display: none;}
    .mobil          {display: block;}
    .ablak1         {text-align: left;}
    .ablak2         {text-align: left;}
    .mobil_tav      {height: 30px;}
    body            {font-size: 15px;}
    h2              {text-align: center; font-size: 30px;}
    .hero_alcim     {text-align: center;}
    .mobil_ablak1   {background: #019bd6; border-radius: 7px;}
    .mobil_ablak2   {background: #6b9c4d; border-radius: 7px;}
    .ablak1         {padding-left: 0px;}
    .ablak1         {padding-right: 0px;}
    .ablak2         {padding-left: 0px;}
    .ablak2         {padding-right: 0px;}
    .mobil_kozep    {text-align: center;}
    .bottom_szov    {font-size: 16px;}
    .bottom_szov2   {font-size: 16px;}
}