html, body, div, span, h1, h2, h3, h4, h5, h6, p, ol, ul, li, form, label, legend, caption, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary
{
    margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 105%;
	font-family: inherit;
	vertical-align: baseline;
}

ol, ul 
{
	list-style: none;
}

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

html, body 
{
	width:103%;
	height:100%;
}


html, body{
	font-family:Open Sans, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	margin:0 0 1px;
	line-height: 1.5;
}

html { 
  background: url(../images/rt1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p 
{
	margin-bottom:7px;
}
	
a, p a 
{
	text-decoration:underline;
	color:green;
}

a:hover
{
	color:white;
}

#container, #container_left, #container_right
{
position: relative;
width:100%;
}

#container
{
	position:relative;
	width:980px;
	margin:0 auto;
	text-align:left;
	background-color:transparent;
	padding:15px;		
}
				
header
{
	position: relative;
	float:left;
	width: 100%;
	height:100px;
}

footer
{
	position:relative;
	height:30px;
	clear:both;
	width:100%;
	margin-bottom:18px;
	text-align: center;
	padding-top: 300px;
	font: 15px Arial bold;
}

nav
{
	position:absolute;
	width:1000px;
	top:40px;
	left:50px;
	background:transparent;
}


nav ul li
{
	float: left;
	line-height:normal;
	
}

nav ul li a
{
	font-size: 20px;
	font-family:Open Sans, Helvetica, sans-serif;
	color: white;
	text-transform:capitalize;
	font-weight:normal;
	display:block;
	padding:15px;
	background-color:green;
	margin-top:-10px;
	margin-right:1px;
    text-decoration:none;
	-moz-border-radius: 8px;
	border-radius: 1px;
	}

nav ul li a:hover
{
	color: black;
}


header hgroup
{
	width: 420px;
	position: relative;
	top:60px;
	background:transparent;
	margin-top:6px;
	margin-left:-40px;
}

#flags 
{
	list-style:none;
	margin:5px 0 0;
	margin-right: 120px;
}

#flags li 
{
	float:right;
	margin-right: 10px;
}

#intro
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: 10px;
}

#main-container
{
	width: 200px;
	position: relative;
	margin:  50px auto;
}


.container
{
	width: 324px;
	height: 412px;
	perspective: 2000px;
}

.karta
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta 
{
	transform:translate3d(200px,200px,900px)	
}

.slike
{
	width:200px;
	height:151px;
}

.face
{
	position: absolute;
	backface-visibility: hidden;
}

#intro2
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-right: 150px;
}

.karta2
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta2 
{
	transform:translate3d(30px,200px,900px)	
}

#intro3
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: -150px;
}

.karta3
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta3 
{
	transform:translate3d(-30px,200px,900px)	
}

#intro4
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	
}

.karta4
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta4
{
	transform:translate3d(-190px,200px,900px)	
}


#intro5
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: 10px;
}

.karta5
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta5
{
	transform:translate3d(200px,0px,900px)	
}

#intro6
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-right: 150px;
}

.karta6
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta6
{
	transform:translate3d(10px,0px,900px)	
}

#intro7
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: -150px;
}

.karta7
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta7
{
	transform:translate3d(-30px,0px,900px)	
}

#intro8
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	
}

.karta8
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta8
{
	transform:translate3d(-190px,0px,900px)	
}

#intro9
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: 10px;
}

.karta9
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta9
{
	transform:translate3d(200px,-100px,900px)	
}

#intro10
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-right: 150px;
}

.karta10
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta10
{
	transform:translate3d(10px,-100px,900px)	
}

#intro11
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	margin-left: -150px;
}

.karta11
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta11
{
	transform:translate3d(-30px,-100px,900px)	
}

#intro12
{
	width: 200px;
	position: relative;
	float: left;
	height:151px;
	padding:10px;
	background:transparent;
	margin-top:17px;
	
}

.karta12
{
	width: 200px;
	height: 151px;
	border: 2px solid black;
	transform-style: preserve-3d;
	transition-duration: 1.5s;	
	transform: rotateZ(0deg);
}

.container:hover .karta12
{
	transform:translate3d(-190px,-100px,900px)	
}