* {
margin: 0; padding: 0; text-decoration: none; color: inherit; background: none;
font-size: 1.04em;
font-family: 'Open Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
}
body {padding-bottom:30px;}
html {scroll-behavior: smooth;}
li {margin-left: 40px; }
/* menu */
#headerdiv {
background-color:#164D96; color:white; text-transform: uppercase; width:100%; display: block; vertical-align: middle; text-align: center;
}
#logodiv {display: block;font-size: 1.4em; margin: 0 auto; text-align: center; }
#logodiv img{vertical-align:middle; width: 220px; margin-top: 20px;}
#headerdiv hr {border: 0px;height: 1px; color: white; background-color: white;margin-bottom: 10px;}

#menu1 {display: block; padding:5px 0; margin: 0 10px; text-align:center;}
#menu1 a{display: inline-block; background-color: #2E72CC; border-radius: 5px; padding: 10px; margin: 3px 0;}
#menu1 a{color: white; font-size: 0.8em;}
#menu1 a:last-child {border:0px;}
#menu1 a:hover {background-color:#1F5AA9;}

#menu2 {display: block; background-color: #164D96; color: white; text-align: center; padding:10px;} 
#menu2 a{display: inline-block; color: #B1C3FF; font-size: 0.7em; text-transform: uppercase; 
margin: 5px;
}
#menu2 a:hover {color:white;}
#menu2 img {vertical-align: middle;}

#cim {background-color:#1F5AA9; color:#ddd; text-transform: uppercase;
font-size:12px; text-align:center; padding:10px 0px;
//border-top: 1px solid #1C4071; 
//border-bottom: 1px solid white;

}
#cim a{color:#DFECFF;font-size:16px;font-weight:bold;}
/*
#felugras {color: #777D88;text-align:center; font-size:20px;background-color:#DEE5EF;cursor:pointer;position:fixed;bottom:0;width:100%;}
*/

#felsoinfo {text-transform: uppercase; background-color: #FFFFAB; color: #333; font-size:12px; text-align:center; padding:10px 0px; border-bottom:1px solid #ccc; }

#felugras {
color: #1F5AA9; text-align: center; font-size:20px; background-color:#DEE5EF; opacity: 0.7; cursor:pointer; 
position:fixed;
}
@media only screen and (max-width: 899px){
    #felugras { bottom:0; width:100%; }
}
@media only screen and (min-width: 900px){
    #felugras { bottom: 20px; right: 20px; padding: 20px; border-radius: 100px; -webkit-box-shadow: 2px 3px 10px 0px rgba(0,0,0,0.31); -moz-box-shadow: 2px 3px 10px 0px rgba(0,0,0,0.31); box-shadow: 2px 3px 10px 0px rgba(0,0,0,0.31); }
}

.tartalombox {
color: #292929;
position: relative;
margin: 0;
/*display: flex;
justify-content: center;*/
text-align: center;
box-shadow: inset 0 20px 20px -20px #164D96;
}
.tartalombox p, .tartalombox ul, .tartalombox ol{
max-width: 700px;
margin: 0 auto 10px auto;
display: block;
text-align: justify;
}
.tartalombox img{
text-align: center;
margin:  10px auto;
display: block;
border: 1px solid #babdb6;
max-width: 100%;
}
.tartalombox h1 {
text-align: center;
padding-top: 20px;
margin: 0 auto 20px auto;
font-size: 1.4em;
}
.tartalombox a {
color: #1F5AA9; background-color:#DEE5EF; cursor:pointer; padding: 1px 5px;
}
.tartalombox i{font-size: 0.8em;}
.tartalombox .index {
display: inline-block;
width: 250px; padding:5px; vertical-align: top; text-align: left; margin: 10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.3);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.3);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.3);
}
.tartalombox .index a{display:block;background-color: white;}
.tartalombox .index:hover {background-color:;}
.tartalombox .indexkep {width: 100%;height:150px; padding:0px;margin-right:5px;
background-repeat:no-repeat; background-size:cover;
}

.tartalombox .index h3{
width: 100%
color: #555;
margin:10px 0 0 0;
padding:0;
border-color: #ddd;
font-size:1em;
}

.tartalombox .index ul {margin:0 0 0 10px;padding:5px 0 0 0;}
.tartalombox .index li {padding: 0 0 5px 0;}
.tartalombox .index li:last-child {font-weight: bold;}

.tartalombox .indexismerteto {color: black; font-variant: small-caps;}
.tartalombox .indexcim {font-size: 1em; color: black;}
.tartalombox .index li{margin: 5px 0px; list-style-type: none;}






.indexkep, .utism, .utcim, .utido, .utar {text-align: center;}

.indexek { -webkit-font-smoothing: antialiased;
vertical-align: top;

display: inline-block;
cursor: pointer;
margin: 1.5%; padding: 0px;
list-style: none;
background-size:cover;
min-width: 400px; max-width: 800px;
width: 90%;
height: 400px;
color: white; 
position: relative;
box-shadow: 0px 0px 10px 0px #164D96;
}
.utido {
min-width: 90px;
height: 100%; min-height: 80px;font-size: 1.4em;
background-color: white;
color: #164D96;
font-weight: bold;
float: left;
margin-left: -10px; margin-top: -10px;
padding: 10px 0 0 0;
margin-right: 10px;
box-shadow: 0px 0px 10px 0px #164D96;
}
.indexkep {}
.utism {text-align: center;}
.utcim { font-size: 1.1em; padding: 10px 10px 0 0; background-color: #164D96; min-height: 70px;
}
.utar { font-weight: bold; position: absolute; bottom: 0px; right: 0px; padding: 10px 20px; background-color: #2E72CC;}

.utnap {
font-size: 13px;
text-align: center;
width: 130px;
margin: 0 auto; padding: 2px 0;
background-color: #2E72CC; color: white;
}
.uttol {display:block; width: 100%;
line-height: 5px;font-size: 12px;text-align: center;}



#utinfo {
border: 0px solid red;
max-width: 480px;
margin: 0 auto 10px auto;
display: inline-block;
}

#kepek {
border: 0px solid red;
/*
position: absolute;
top: 30px; right: 0px;
left: calc(50% + 360px);*/
padding: 0; margin: 0 auto;
display: inline-block;
vertical-align: top;
text-align: center;
}
#kepek img{
margin: 0 2px 10px 12px;
width: 190px;
display: inline-block;
vertical-align: top;
}
@media only screen and (max-width: 799px){
    #kepek { width: 100%; }
}
@media only screen and (min-width: 800px){
    #kepek { width: 210px; }
}

#hazkepek {max-width: 900px; text-align: center; margin: auto; display: block;}
#hazkepek img{max-width: 200px; display: inline-block; margin: 5px; vertical-align: top;}
#infobox {max-width: 700px; display: block; margin: 0 auto;}
.tav {vertical-align: top;  text-align: center;
display: inline-block; width: 68px; margin: 0px; padding: 0px;
}