/*ARNION.CSS*/

body { text-align:center; background-image: url(./elemek/hatter2.png); }
form { display:inline; padding:0; margin:0; }
code { font-size:12px; }

#page 
{ 
  margin:auto; 
  width:1000px; /*762px*/
  border:3px solid #222222;
  font:95% /*76%*/ verdana,tahoma;
  line-height: 140%;
  color: #bbbbbb;
  text-align:left;
  display:block;
  background-image: url(./elemek/hatter3.png);
  
 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


 /*  
 box-shadow: 0px 0px 5px #bbbbbb;
  -moz-box-shadow: 0px 0px 5px #bbbbbb;
  -webkit-box-shadow: 0px 0px 5px #bbbbbb; */     
}

#header    { clear:both; margin:20px; }
#header h1 { font:35px verdana,tahoma; padding:0; margin:0px; color:#ffbf00; }
#header h2 { font:15px verdana,tahoma; padding:0; margin:0px; color:#bbbbbb; }
#header h1 a { color:#ffbf00;  }

#main      { margin:20px; clear:both; }
#content   { float:left; width:72%; }

#jobb      { text-align:right; }
#kozep     { text-align:center; }

#righty    { float:right; width:25%;  }

#main h2   
{
 font:150% verdana,tahoma;
 padding:2px;
 padding-left:5px;
 padding-bottom:0px;
 color:#ffbf00;
 border-top:3px solid #222222;
 border-left:15px solid #222222;
 margin:10px 0px 10px 0px;
 font-variant:small-caps;
 display:block;
}

#main h3   
{
 font:100% verdana,tahoma;
 padding:2px;
 padding-left:10px;
 padding-bottom:0px;
 color:#bbbbbb;
 margin:10px 0px 10px 0px;
 font-variant:small-caps;
 font-weight:bold;
 display:block;
}

#main h4   
{
 font:100% verdana,tahoma;
 padding:2px;
 padding-left:40px;
 padding-top:10px;
 padding-bottom:0px;
 color:#bbbbbb;
 margin:10px 0px 10px 0px;
 font-variant:normal;
 font-weight:bold;
 display:block;
}

#main h5   
{
 font:100% verdana,tahoma;
 padding:2px;
 padding-left:40px;
 padding-top:10px;
 padding-bottom:0px;
 color:#bbbbbb;
 margin:10px 0px 10px 0px;
 font-variant:normal;
 font-style:italic;
 font-weight:bold;
 display:block;
}
/*
#main   p  { margin:6px; }
*/

#main   p  { margin:9px; }
#main  pre { margin:9px;  padding-left:20px;}

#main   ul { padding:0px; margin:10px 0 10px 20px; }
#main   li { list-style: square inside; }

#footer    {  margin:20px; clear:both; border-top:1px solid #222222; text-align:center; color:#bbbbbb; }
#nav ul    { list-style-type:none; border:0px solid black; padding:0px; margin:0px;}
#nav li 
{ 
 padding:0px;
 margin:0px;
 display:inline;
}


#nav li a 
{
 display:block;
 font-weight:lighter;
 border-left:5px solid #222222;
 padding:3px 5px 4px 10px;
 margin:3px 5px 0 5px;
 text-decoration:none;
 color:#bbbbbb; 
}

#nav li a:hover
{
 display:block;
 border-left:15px solid #222222;
 background:#bbbbbb;
 padding:3px 5px 4px 5px;
 margin-left:0px;
 color:black;
}

#main a, #footer a
{
 color:#ffbf00;
 border-bottom:1px solid #222222;
 text-decoration:none;
 font-weight:bolder;
}

#main a:hover, #footer a:hover
{
 color:#bbbbbb;
}


#main img{
 padding:2px;
 margin:3px;
 border:1px solid #222222;
 display:block;
 max-width:100% /*A képek reszponzív méretezése */
}

#main code{
 padding:10px;
 margin:3px;
 border:1px solid #222222;
 display:block;
 background-color:#323232; 
 width:95%;
 overflow:auto
}

#main icon{
border-image:none;
}

.item{
  width:250px;
  text-align:center;
  display:block;
  background-color: transparent;
  border: 1px solid transparent;
  margin-right: 25px;
  margin-bottom: 1px;
  float:left;
}

.img-left{
 float:left;
 clear:left;
}

.img-right{
 float:right;
 clear:right;
}

/* Tablet Styles */
@media only screen
and (min-width : 600px)
and (max-width : 960px) {
	#page { width: 90%; font-size: 84%; }
	#header h1 { font-size: 32px; }
	#header h2 { font-size: 15px; }
	#header img { height: 64px; width: 57px; }
}

/* Large Phone Styles */
@media only screen
and (min-width : 350px)
and (max-width : 600px) {
	#content { clear: both; width: 100%; }
        #righty { clear: both; width: 100%; }	
	#page { width: 95%; font-size: 84%; }
	#header h1 { font-size: 30px; }
	#header h2 { font-size: 15px; }
	#header img { height: 64px; width: 57px; }
}

/* Small Phone Styles */
@media only screen
and (min-width : 120px)
and (max-width : 350px) {
	#content { clear: both; width: 100%; }
        #righty { clear: both; width: 100%; }	
	#page { width: 98%; font-size: 84%; } 
	#header h1 { font-size: 27px; }
	#header h2 { font-size: 15px; }
	#header img { height: 47px; width: 42px; }
}

.w3-animate-opacity{animation:opac 2s}@keyframes opac{from{opacity:0} to{opacity:1}}