/* ------------------------------------------ PINGVINI ----------------------------------------------- */

.wrap-penguins { position: absolute; left: 50%;
	height:443px;}

.wrap-penguins-r {
	height:443px;
	width:50%;
	background-image:url(../images/skyice-pattern-r.jpg);
	float:right;}

.wrap-penguins-l {
	height:443px;
	width:50%;
	background-image:url(../images/skyice-pattern-l.jpg);
	float:left;}

.penguins {
	width:1004px;
	height:443px;
	background-image:url(../images/timereader.jpg);
	position: relative; left: -50%; }

.penguins-sign {
	width:450px;
	height:100px;
	margin: 40px 0 0 45px;
	position:absolute;}

.h1-penguins-sign {
	position:absolute;
	margin:0;
	padding:0;
	font-weight:bold;
	font-size:38px;
	color:white;
	-webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    transition: all 300ms ease;}
	
a:hover .h1-penguins-sign {
	color:black;
	margin-left:30px;}

.h2-penguins-sign {
	font-weight:normal;
	font-size:20px;
	display:inline;
	position:absolute;	
	margin: 55px 0 0 30px; 
	padding: 4px 10px 4px 10px;
	color:white;
	background: -moz-linear-gradient(top, #008aeb 0%, #026bb5 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008aeb), color-stop(99%,#026bb5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* IE10+ */
	background: linear-gradient(to bottom, #008aeb 0%,#026bb5 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008aeb', endColorstr='#026bb5',GradientType=0 ); /* IE6-8 */
	-webkit-box-shadow: 2px 0px 11px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    2px 0px 11px rgba(50, 50, 50, 0.4);
	box-shadow:         2px 0px 11px rgba(50, 50, 50, 0.4);
	-webkit-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%; 
	-moz-transform-origin: bottom center;
	-moz-trasition: all 300ms ease;
	-ms-trasition: all 300ms ease;
	-webkit-trasnition: all 300ms ease;
	-o-transition:all 300ms ease;
	transition: all 300ms ease;
	 }

a:hover .h2-penguins-sign {
	 animation: smallToBig 300ms ease;
	 -webkit-animation: smallToBig 300ms ease;
	 -ms-animation: smallToBig 300ms ease;
	 -moz-animation: smallToBig 300ms ease;
	color:black;
	}

@-webkit-keyframes smallToBig{
    from {-webkit-transform: scaleY(0.3);}
    to {-webkit-transform: scaleY(1);}}
	
@-moz-keyframes smallToBig{
	from {-moz-transform: scale(0.3);}
    to {-moz-transform: scale(1);}}

@keyframes smallToBig{
	from {transform: scale(0.3);}
    to {transform: scale(1);}}
	
@-ms-keyframes smallToBig{
    from {-ms-transform: scale(0.3);}
    to {-ms-transform: scale(1);}}


/* ------------------------------------------ KUĆICE ----------------------------------------------- */

.houses {
	position:;
    padding:0;
    margin:480px auto;
    width: 950px;
	}
	
.houses li {
    width: 179px;
    height: 268px;
    overflow: hidden;
    position: relative;
    float:left;
	background:#fdfdfd;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 3px #999;
    margin-right: 10px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    transition: all 300ms ease;}

.houses li:hover {
    z-index:999;
    -webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);  
    -ms-transform: scale(1.1);   
    -o-transform: scale(1.1);   
    transform: scale(1.1);  
	background: -moz-linear-gradient(top, #008aeb 0%, #026bb5 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008aeb), color-stop(99%,#026bb5)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #008aeb 0%,#026bb5 99%); /* IE10+ */
	background: linear-gradient(to bottom, #008aeb 0%,#026bb5 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008aeb', endColorstr='#026bb5',GradientType=0 ); /* IE6-8 */}

.houses li:last-child{
    margin-right: 0px;}

.houses li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;}

.houses-svg {
    width:106px;
    height:75px;
	margin:auto;
	margin-top:40px;
    text-align: center;
	-webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;
	fill:url(#SVG-grad);}

.houses li:hover .houses-svg {
    fill:#FFF;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform:scale(1.2);
	margin-top:35px;}

.houses-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 56%;
    top: 31%;}

.houses-text{
    font-size: 22px;
    text-align: center;
	font-family:"light" ,"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:500;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;}

.houses li:hover .houses-text{
    color:#FFF;
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform:scale(1.1);}

.houses-subtext{
	font-family:"titillium", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-style:normal;
    text-align:center;
    font-size: 13px;
    color: #666;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0px;
    opacity: 0.8;
	letter-spacing:1px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    transition: all 400ms ease;}

.houses li:hover .houses-subtext{
    color:#FFF;
    -webkit-animation: moveFromBottom2 500ms ease;
    -moz-animation: moveFromBottom2 500ms ease;
    -ms-animation: moveFromBottom2 500ms ease;
	opacity:1;}

@-webkit-keyframes smallToBig2{
    from {-webkit-transform: scale(0.1);}
    to {-webkit-transform: scale(1.2); }}

@-moz-keyframes smallToBig2{
    from {-moz-transform: scale(0.1);}
    to {-moz-transform: scale(1.2); }}
	
@-ms-keyframes smallToBig2{
    from {-ms-transform: scale(0.1); }
    to {-ms-transform: scale(1.2); }}

@-webkit-keyframes moveFromBottom2 {
    from {-webkit-transform: translateY(100%); }
    to {-webkit-transform: translateY(0%); }}
	
@-moz-keyframes moveFromBottom2 {
    from {-moz-transform: translateY(100%);}
    to {-moz-transform: translateY(0%);}}
	
@-ms-keyframes moveFromBottom2 {
    from {-ms-transform: translateY(100%);}
    to {-ms-transform: translateY(0%);}}


/* ------------------------------------------ PODNOŽJE ----------------------------------------------- */

.footer-naslovnica {	
	padding:0;
    margin: auto;
	margin-top:800px;
	width:1000px;
	height:30px;
	border-top: solid 1px #026bb5;
	font-size:13px;
	color:#666;
	opacity:0.6;}

.footer-naslovnica  a{ text-decoration:underline;}

.footer-naslovnica a:hover  {text-decoration:none;}