article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}

body, div, span, object, iframe,
h1, h2, h2, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: "StRydeRegular", "Verdana", sans-serif;
	vertical-align:baseline; 
	 }
ul, li {
	list-style: none;
	}

iframe {
	overflow: hidden;
	}
   
	   
a:active, a:hover, a:visited, a:link  {
  text-decoration: none;

  }


html {
	background: url(images/bg.jpg) no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	
@font-face {
    font-family: 'StRydeRegular';
    src: url('stryde-regular-webfont.eot');
    src: url('stryde-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('stryde-regular-webfont.woff') format('woff'),
         url('stryde-regular-webfont.ttf') format('truetype'),
         url('stryde-regular-webfont.svg#StRydeRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
<!-- 		Toggle Start Here		/-->

*, * focus {
	outline: none;
	margin: 0;
	padding: 0;
}

.container {
	width: 480px;
	margin: 190px 0 0 60px;
}

h1.trigger {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	background:url(images/h2_trigger_a.png) no-repeat;
	height: 40px;
	line-height: 40px;
	width: 480px;
	font-size: 17px;
	font-weight: normal;
	float: left;
}

.blog {
	padding: 0;
	margin: 0;
	background:url(images/h2_trigger_a.png) no-repeat;
	height: 40px;
	line-height: 40px;
	width: 480px;
	font-size: 17px;
	font-weight: normal;
	float: left;
}
.blog a {
	color: #000;
	text-decoration: none;
	display: block;
}
.blog a:hover {
	color: #000;
}

h1.trigger a {
	color: #000;
	text-decoration: none;
	display: block;
}

p {
	line-height:20px;
	}
p a{
	color: #000;
	text-decoration: none;
}

h1.trigger a:hover {
	color: #000;
}

h1.active {background-position: left bottom;}

.toggle_container {
	margin: 0 0 0 0;
	padding: 0;
	overflow: hidden;
	font-size: 13px;
	width: 480px;
	clear: both;
	display: none;
}
.toggle_container .block {
	margin-top: 10px;
}
.toggle_container .block p {
	text-align: justify;
	padding: 5px 0;
	margin: 5px 0;
}
.toggle_container h2 {
	margin: 0 0 10px;
	padding: 0 0 5px 0;
}

.szlogen {
	font-size: 16px;
	font-style:italic;
	width: 480px;
	height:auto;
	padding-top: 20px;
	line-height: 20px;
	}
h2 {
	font-size: 15px;
}

.submit_bt {
	width: 78px;
	height: 22px;
	display:block;
	float:left;
	margin: 0;
	}

<!-- 		Toggle End Here		/-->
#container {
	width:480px;
	padding:0;
	margin:0 auto;
	position:relative;
	z-index:0;
}

#products_example {
	width:480px;
	height:400px;
	position:relative;
}

/*
	Slideshow
*/


/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

#products .slides_container {
	width:480px;
	overflow:hidden;
	float:left;
	position:relative;
	display:none;
}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container a {
	width:480px;
	height:390px;
	display:block;
}

/*
	Next/prev buttons
*/

#products .next,#products .prev {
	position:absolute;
	margin: 150px 40px 0 10px;
	width:21px;
	height:0;
	padding-top:21px;
	overflow:hidden;
	display:block;
	z-index:101;
	color: #FFF;
}

#products .prev {
	background:url(../img/arrow-prev.png);
}

#products .next {
	left:440px;
	background:url(../img/arrow-next.png);
}

/*
	Pagination
*/

#products .pagination {
	width:480px;
	float:left;
}

#products .pagination li {
	float:left;
	list-style:none;
	margin:10px 7px 0 0;
}
/*

#products .pagination li:last-child {
	margin:10px 0 0 1px;
}
*/


#products .pagination li a {
	display:block;
	width:153px;
	height:93px;
	float:left;
}


#products .pagination li.current a {
	border:1px solid #7f7f7f;
	margin:-1px;
}

/*
	Fellepesek
*/

.datum {
	width: 90px;
	display:block;
	overflow:hidden;
	float: left;
	font-weight: normal;
	}
.helyszin{
	display:block;
	float: left;
	width: 251px;
	overflow:hidden;
	height: 18px;
	margin-right: 10px;
	}
	
.fellepes_link {
	display:block;
	width: 129px;
	height: 18px;
	float: right;
	}
	
.fellpesek{
	width: 480px;
	height: 18px;
	display:block;
	margin: 15px 0 5px 0;
	}
	
/*

Kepek

*/

* {margin: 0;padding: 0;}
img {border: none;}
a {outline: none;}

/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
	50% { opacity: 0;}
	100% { opacity: 1;}
}

#kepek_gallery {
	text-align: left;
	width: 480px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
}

ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 480px;
	height: 293px;
	overflow: hidden;	
}

ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	overflow: auto;
	width: 480px;
}

ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	width: 153px;
	height: 93px;
	display: block;
	overflow: hidden;
	float: left;
	margin: 10px 7px 0px 0px;
	opacity: 0.75;
}

ul#thumb a:hover {opacity: 1;} 

ul#slider li {	
	width: 480px;
	height: 293px;
	position: absolute;
	}
	
ul#slider li p {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: inherit;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	width: 100%;
}

ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
	0% {left:-480px;}
	
	100% { left:0px;}
}


ul#slider li:target {
	-webkit-animation-name: moveTarget; 
	-webkit-animation-duration: .5s; 
	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
	z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position. 
Adds a lower z-index than the now current image.
*/

@-webkit-keyframes moveIt {
	0% { left:0px;}
	50% {left:480px;}
	100% { left:-480px; z-index: 5;}}


ul#slider li:not(:target) {
	-webkit-animation-name: moveIt; 
  	-webkit-animation-duration: 1.5s; 
  	-webkit-animation-iteration-count: 1;
	top:0px;
	left: 0px;
}