/********************************/
/**************BODY**************/
/********************************/
html {
	font-family: 'Quicksand', sans-serif;
	background-image: url(../images/ozadje.png)/*tpa=http://dijaki.smgs.si/VrazicLovro/port/images/ozadje.png*/;
	background-repeat: repeat;
	text-shadow: 0px 0px 1px #FFF;
	background-attachment:fixed;
}

body {
	margin: 0px;
	padding: 0px;
}

.wrapper1, .wrapper2, body {
	margin: 0 auto;
	width: 1080px;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

.wrapper1, .wrapper2 {
	background-color: rgba(0,0,0,0);
}

::selection {
	background: #fff;
	color: black;
	text-shadow: none;
}

p {
	color: #fff;
}

hr {
	border: solid 1px #888;
	width: 95%;
}
/*//////////////////////////////////////////////////////////////////////*/


/********************************/
/*********WELCOME SCREEN*********/
/********************************/
.left, .right { 
	cursor: pointer; 
	position: absolute; 
	display: block; 
	margin: 0px; 
	padding: 0px; 
	width: 50%; 
	height: 100%; 
	background-color: #252525;
}

.left:hover, .right:hover {
	text-shadow: 0px 0px 30px #fff, 0px 0px 30px #fff;
	font-size: 15pt;
}

.left  {  
	left: 0; 
}

.right {  
	right: 0;
}

.wrapper1, .wrapper2 { 
	display: none; 
}

.timface {	
	position: absolute;
	right: 0;
}

.aljazface {
	position: absolute;
	left: 0;
}

.timface, .aljazface {
	height: 100%;
}

.left h1 {
	float: left;
}

.right h1 {
	float: right;
	margin-right: 40px;
}

.left h1, .right h1 {
	transition: all 0.7s;
	-moz-transition: all 0.7s; /* Firefox 4 */
	-webkit-transition: all 0.7s; /* Safari and Chrome */
	-o-transition: all 0.7s; /* Opera */
}
/*//////////////////////////////////////////////////////////////////////*/


/********************************/
/*********NAVIGATION BAR*********/
/********************************/
ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	margin-left: 20px;
}

li {	
	float: left;
}

nav a:link, a:visited {
	display: block;
	height: 35px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	line-height: 35px;
	font-size: 25px;
	margin: 20px;
	transition: all 0.7s;
	-moz-transition: all 0.7s; /* Firefox 4 */
	-webkit-transition: all 0.7s; /* Safari and Chrome */
	-o-transition: all 0.7s; /* Opera */
}

nav {	
	height: 85px;
}

.home, .about {	
	border-right-style: solid;
	border-width: 1px;
	border-right-color: #999;
}

nav a:hover { 
	text-shadow: 0px 0px 50px #fff, 0px 0px 50px #fff, 0px 0px 25px #fff;
}

a {
	text-decoration: none;
}
/*//////////////////////////////////////////////////////////////////////*/


/********************************/
/************FOOTER**************/
/********************************/
footer {
	text-align: center;
	overflow: hidden;
	margin-top: 15px;
}

footer p {
	color: #fff;
	font-size: 9pt;
	margin: 20px 45px 25px 0px;
}

footer img {
	float: right;
	margin-top: -10px;
}
/*//////////////////////////////////////////////////////////////////////*/


/********************************/
/************ABOUT***************/
/********************************/
article p {
	font-size: 11pt;
	margin: 0px 40px;
}

h1 {
	color: #fff;
	margin-left: 40px;
}

article img {
	float: right;
	margin: 0px 40px 0px 20px;
}

article {
	overflow: hidden;
}

article ul {
	color: #fff;
	font-size: 7pt;
	margin-left: 40px;
	margin-right: 40px;
}

article li {
	float: none;
}

aside {
	float: right;
	margin: -60px 100px 0px 0px;
	height: 50px;
}

aside img {
	margin-right: 10px;
	transition: all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition: all 0.5s; /* Safari and Chrome */
	-o-transition: all 0.5s; /* Opera */
}

aside img:hover {
	box-shadow: 0px 0px 10px #fff, 0px 0px 10px #fff;
}

aside ul {
	margin: 0px;
}

aside p {
	margin-right: 10px;
}

aside a:link {
	line-height: 65px;
}

.facebook {
		border-radius: 5px;
}

article a {
	text-decoration:underline;
}
/*//////////////////////////////////////////////////////////////////////*/


/********************************/
/**********ZEMLJEVID*************/
/********************************/
iframe, small {
	margin: 0px 40px;
}
/*//////////////////////////////////////////////////////////////////////*/

a {
    text-decoration: none;
    color: #fff;
}

.roll {
    display: inline-block;
    overflow: hidden;



    -webkit-perspective: 400px;
       -moz-perspective: 400px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
}
.roll span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
    
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
    
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
}
    .roll:hover span {
        background: #111;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
.roll span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #000;
    background: #fff;
    text-shadow: 0px 0px 1px #000;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}​