/*FONT*/
@font-face {
    font-family: 'Conv_DINPro';
    src: url('../js/font/DINPro.eot');
    src: url('../js/font/DINPro.eot') format('embedded-opentype'),
         url('../js/font/DINPro.woff') format('woff'),
         url('../js/font/DINPro.ttf') format('truetype'),
         url('../js/font/DINPro.svg#Conv_DINPro') format('svg');
}

.f48-g{font-size:48px; color:#157b79;}
.f30-g{font-size:30px; color:#157b79; margin-top:5px;}

.f15-b{font-size:18px; color:#232323;}
.f13-b, .link-contact{font-size:15px; color:#232323; letter-spacing:0.2px;}
	.link-contact{margin-top:20px; margin-bottom:-15px;}
	.link-contact a{font-size:15px; color:#b6000b; letter-spacing:0.2px;}
.f11-b{font-size:11px; color:#232323;}

/*SPACE*/
.space-0{margin-top:5px;}
.space-1{margin-top:10px;}
.space-2{margin-top:20px;}
.space-3{margin-top:30px;}
.space-4{margin-top:40px;}
.space-6{margin-top:60px;}

/*	Resets
	------	*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;		
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video, div {
	display: block;
}
body, html {font-family: 'Conv_DINPro';}
*{outline:none;}
a {text-decoration:none; border:none; outline:0;}
img{border:none; outline:0;}
.cursor{cursor:pointer;}
textarea{resize: none;}
.clear{clear:both; height:0;}
.item {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
    color: white;
    background-position: center center;
    background-size: cover;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
}
	.item:hover:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.item.none:hover:after{background:none;}
.diamondswrap {
	text-align: center;
	padding: 40px 20px 120px 20px;
	margin-top:120px;
	position:relative;
}
.diamonds {
    text-align: center;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}

.diamond-row-wrap {
    text-align: center;
    position: relative;
    float: left;
    clear: both;
}
.diamond-row-upper, .diamond-row-lower {
    overflow: visible;
    clear: both;
    width: 100%;
}
.diamond-row-lower {
    position: absolute;
    bottom: 0;
}
    .diamond-row-lower .diamond-box {
        margin-left: 64.644660941%; /* 1 - 1 / sqrt(2) / 2 */
        margin-top: 64.644660941%;
    }

.diamond-box-wrap {
    float: left;
    width: 250px; /* Size of diamonds */
    height: 250px;
}

.diamond-box {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    overflow: hidden;
    
    position: relative;
    z-index: 1;
    
    width: 70.710678118%; /* x = sqrt(x^2 / 2) = 1 / sqrt(2) = 0.70710678118 */
    height: 70.710678118%;
    margin: 14.644660941%;
    
    border: 1px solid transparent;
}

.diamond-box-inner {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    
    width: 200px; /* sqrt(2) */
    height: 200px;
    margin: -24.7106781185% 0 0 -24.7106781185%; /* (1 - sqrt(2)) / 2 */
}
.cardWrapper{
  width:200px;
  height:200px;
  position:relative;
  /*background-color:#333;*/
  float:left;
  margin-right:10px;
  cursor:pointer;
  -webkit-font-smoothing:antialiased;
}

.cardFace{
  position:absolute;
  width:200px;
  height:200px;
  overflow:hidden;
  font-family: 'Conv_DINPro';
}

.front{
  background-color:#333; 
}

.back{
  background: url(../img/hover.png) no-repeat 0 0; background-size: 200px 200px; width: 200px; height: 199px;
}



.cardFace h1{
	font-weight: normal;
	font-size: 13px;
	text-transform: uppercase;
	padding:90px 0 0;
	text-align:center;	
  /*margin:0px;
  font-size:30px;
  padding:10px 0px 10px 10px;
  border-bottom:solid 6px #aaa;
  border-top:solid 6px #aaa;
  background-color:black;
  color:white;*/
}
a h1{color:#fff;}

.cardFace.back h1{
 /*border-color:#91e600;*/
}

.card img {
	width: 100%;
	height: auto;
}
.wr{min-height:100%; position:relative; padding-bottom:40px;}
.footer-content{position:absolute; bottom:20px; width:100%; z-index:20}

.logo-spasi{background: url(../img/logo-spasi.png) no-repeat 0 0; background-size: 196px 52px; width: 196px; height: 52px; margin:0 auto; margin-top:20px; display:block; position:absolute; z-index:8800; left:50%; margin-left:-95px; opacity: 0.8;}
	.logo-spasi:hover{opacity: 1; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out;}
.logo-spasi2{background: url(../img/logo-spasi2.png) no-repeat 0 0; width: 36px; height: 22px; margin-left:-6px; margin-top:5px; display:block;}
.logo-bg{background: url(../img/logo-bg.png) no-repeat 0 0; background-size: 91px 46px; width: 91px; height: 46px; top:0; left:0; position:absolute; z-index:8800;}
.logo{background: url(../img/logo.png) no-repeat; width: 91px; height: 46px; background-size: 278px 46px; float:right;}
.mail, .mail-hover{background: url(../img/icon-contact.png) no-repeat; width: 26px; height: 20px; float:right; cursor:pointer;}
	.mail{background-position: 0 -21px;}
	.mail-hover{background-position: 0 0;}
.plus, .plus-hover{background: url(../img/icon-plus.png) no-repeat; width: 19px; height: 19px; float:right; cursor:pointer;}
	.plus{background-position: 0 -21px;}
	.plus-hover{background-position: 0 0;}
	.mail:hover, .drop:hover, .plus:hover{-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
.footer{background: url(../img/firefly-footer.png) no-repeat 0 0; width: 341px; height: 19px; margin:0 auto; display:block; opacity: 0.9;}
	.footer:hover{ opacity: 1; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out;}
	
/*header*/
.header-r{position:absolute; z-index:8800; top:0; right:0;}

/*contact*/
/*textfield*/
.boxtxt{
	width: 268px;
	height: 20px;
	border: none;
	background:none;
	color: #525252;
	font-size:12px;
	padding:5px 10px 0 10px;
	outline:none;
	text-align:center;
}
#fieldtxt{	
	background: url(../img/field.png) no-repeat 0 0; background-size: 286px 31px; width: 286px; height: 31px;
	display:inline-block;
}
.boxarea{
	width: 280px;
	height: 90px;
	background:none;
	border: none;
	color: #525252;
	font-size:12px;
	padding:5px 0 0 8px;
	text-align:center;
}
#fieldarea{
	background: url(../img/area.png) no-repeat 0 0; background-size: 286px 99px; width: 286px; height: 99px;
	display:inline-block;
}
input[type="text"], textarea{font-family: 'Conv_DINPro';}
.send{cursor:pointer; border:none; background: url(../img/send.png) no-repeat top center; width: 100px; height: 55px;}
	.send:hover{background-position: bottom center;}
.close{display:inline-block; cursor:pointer; background: url(../img/close.png) no-repeat top center; width: 82px; height: 44px; margin:90px 0 0 0;}
	.close:hover{background-position:bottom center;}
.prev{background: url(../img/prev.png) no-repeat 0 0; background-size: 49px 98px; width: 48px; height: 48px; position:absolute; z-index:999; top:50%; left:50%; margin-left:-450px;}
	.prev:hover{background-position:0 -49px;}
.next{background: url(../img/next.png) no-repeat 0 0; background-size: 49px 98px; width: 48px; height: 48px; position:absolute; z-index:999; top:50%; left:50%; margin-left:400px;}
	.next:hover{background-position:0 -49px;}
.contact{position:relative; width:80%; margin:0 auto; padding-top:220px; text-align:center; font-family: 'Conv_DINPro';}
	.font-contact{background: url(../img/font-contact.png) no-repeat 0 0; width: 828px; height: 102px; margin:0 auto; margin-bottom:40px}
	.f13-b{margin-top:15px;}
		.f13-b p{padding-bottom:20px;}
	.contact .f11-b{font-weight:bold; padding:10px 0;}
	.contact .f13-b{padding:15px 0;}
	#contact-us{padding-top:30px;}

.detail{width:510px; margin:0 auto; text-align:center;}
	.font-why-us{background: url(../img/font-why-us.png) no-repeat 0 0; width: 396px; height: 237px; margin:0 auto; margin-bottom:40px;}
	.font-how-to{background: url(../img/font-how-to.png) no-repeat 0 0; width: 425px; height: 232px; margin-bottom:40px;}
		.font-how-it-works:hover{background-position:bottom center;}
	.detail .f13-b{text-align:justify; margin-top:25px;}

.screenshot{width:630px; text-align:center; margin:0 auto;}
	.screenshot img{margin-top:15px; margin-bottom:15px;}
	a.view-online{font-size:12px; color:#b6000b; font-family: 'Conv_DINPro'; font-weight:bold;}

.rotate{width:300px; margin:0 auto; text-align:center; padding-top:120px;}
	.rotate img{max-width:100%; padding-top:20px;}

/*flipper*/
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;

	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
		-moz-transform-style: preserve-3d; 
		-ms-transform-style: preserve-3d;
}
/* END: Accommodating for IE */

.flip-container, .fr, .bc {
	width: 22px;
	height: 32px;
	margin:0 auto;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;

	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.fr, .bc {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);

	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);

	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);

	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);

	position: absolute;
	top: 0;
	left: 0;
}

/* vertical */
.vertical.flip-container {
	position: relative;
}

	.vertical .bc {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-ms-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		-webkit-transform-origin: 100% 213.5px;
		-moz-transform-origin: 100% 213.5px;
		-ms-transform-origin: 100% 213.5px;
		transform-origin: 100% 213.5px;
	}

	/* START: Accommodating for IE */
	.vertical.flip-container:hover .bc, .vertical.flip-container.hover .bc {
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-o-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .fr, .vertical.flip-container.hover .fr {
		-webkit-transform: rotateX(180deg);
		-moz-transform: rotateX(180deg);
		-o-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}
	
header{width:100%; height:100%; margin:0 auto; background:#e0e0e0; position:fixed; z-index:90; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s;}
	.header-content{width:100%; position:relative;}
	header.large .main-0{display:block;}
	header.large .main-0s{display:none;}
	header.small{background:#ffffff; height: 40px; padding-top:8px;}
		header.small .main-0{display:none;}
		header.small .main-0s{display:block;}
		
.main-0{position:relative; width:100%; margin:0 auto; text-align:center; padding-top:120px;}
.main-0s{position:relative; width:100%; margin:0 auto;}
	.m-1{float:left; padding-left:40px;}
	.m-2{width:80px; position:absolute; z-index:2; left:0; right:0; margin:0 auto;}
	.m-3{float:right; padding-right:40px; padding-top:5px;}
	.firefly-scroll{padding:60px 0;}
	.firefly-text{padding-top:10px;}
.main-1{position:relative; width:80%; margin:0 auto; padding-top:240px; padding-bottom:60px; text-align:left;}
	.main-1-1{float:left; width:40%; padding-top:30px;}
		.main-1-1 img{max-width:100%;}
	.main-1-2{float:right; width:60%; padding-top:15px; line-height:28px;}
	.our-services{display:block; background:url(../img/our-services.png) no-repeat top center; width:72px; height:79px; margin:0 auto; margin-top:10px;}
		.our-services:hover{background-position:bottom center;}
.main-2{position:relative; width:80%; margin:0 auto; padding-top:100px; padding-bottom:60px; line-height:28px;}
	.main-2-1{float:right; width:35%; line-height:24px;}
	.main-2-2{float:right; width:65%; text-align:right; padding-top:15px;}
		.main-2-2 img{max-width:100%;}
	.our-clients{display:block; background:url(../img/our-clients.png) no-repeat top center; width:72px; height:79px; margin:0 auto; margin-top:60px;}
		.our-clients:hover{background-position:bottom center;}
	
	.contact-us{position:absolute; z-index:2; top:0px; left:0; right:0; display:block; background: url(../img/contact-us.png) no-repeat top center; width:72px; height:79px; margin:0 auto;}	
		.contact-us:hover{background-position:bottom center;}
.main-3{position:relative; width:80%; margin:0 auto; padding-top:80px; padding-bottom:60px; line-height:28px; text-align:center;}
	.main-3-1{padding-top:40px;}
		.main-3-1 p{padding:0; padding-bottom:5px;}
	.explore{display:block; background:url(../img/explore.png) no-repeat top center; width:72px; height:79px; margin:0 auto; margin-top:30px;}
		.explore:hover{background-position:bottom center;}
.contact-form{margin:0 auto; text-align:center; padding-bottom:20px;}
	.f-error{font-size:13px; color:#b6000b; text-align:center;}
	.f-success{font-size:13px; color:#000; text-align:center;}
	.contact-form .f11-b{padding:8px 0;}
	
.footer-content{margin:0 auto; text-align:center;}	
.btn-top{position: fixed; display:none; bottom: 10px; right:10px; z-index:99; background: url(../img/back-to-top.png) no-repeat center; width: 49px; height: 49px; opacity:1;}
	.btn-top:hover{opacity:0.8;}
	

/*mobile320*/
@media only screen and (min-width: 10px) and (max-width: 990px) {
	body{width:100%; margin:0 auto; padding:0; overflow-x:hidden;}
		
	.main-0{padding-top:60px;}		
	.main-1{width:92%; margin:0 auto; padding-top:180px; padding-bottom:0;}
		.main-1 img{max-width:100%;}
	.main-1-1, .main-1-2{float:none; display:inline-block; width:100%; margin:0 auto;}
		.main-1-1{width:100%; padding-top:10px;}
			.main-1-1 img{max-width:50%;}
		.main-1-2{margin-top:10px;}
		.m-1{float:left; padding-left:20px;}
		.m-2{width:80px; position:absolute; z-index:2; left:0; right:0; margin:0 auto;}
		.m-3{float:right; padding-right:20px; padding-top:5px;}
		img.firefly-logo{max-width:95%; height:auto;}
		img.firefly-text{max-width:50%; height:auto;}
		.firefly-text{padding-top:80px;}
		.our-services, .our-clients, .contact-us, .explore, .firefly-scroll{display:none;}
	
	.main-2{width:92%; margin:0 auto; padding-top:30px; padding-bottom:0;}
		.main-2 img{max-width:100%; height:auto;}
		.main-2-1, .main-2-2{width:100%; float:left; text-align:left;}
	
	.main-3{width:92%; margin:0 auto; padding-top:60px; padding-bottom:0;}
		.main-3 img{max-width:100%; height:auto;}
		
	.explore{margin-top:20px;}
	.contact{width:92%; margin:0 auto; padding:0;}
	#contact-us{padding-top:0px;}
		
	
	.prev{left:10px; margin-left:0px; display:none;}
	.next{right:10px; margin-left:100px; display:none;}
	
	.diamondswrap {padding: 0px 5px 0px 5px;}
			
	.detail{width:300px; margin-top:-80px;}
		.detail .f13-b{margin-top:20px;}
	
	.screenshot{width:300px;margin-top:0px;}
		.screenshot img{margin:0; width:auto; max-width:100%;}
	
	.footer-content{position:relative; bottom:0px; width:100%; margin-top:20px; padding-bottom:20px;  margin:0 auto; text-align:center;}
	.footer-content img{max-width:95%;}
	.m-no{display:none;}
}

/*mobile568*/
@media only screen and (min-width: 530px) and (max-width: 730px) {
	.main-0{padding-top:60px;}
		img.firefly-logo{max-width:40%; height:auto;}
		img.firefly-text{max-width:25%; height:auto; padding-top:40px;}
	
	.main-1{width:92%; margin:0 auto; padding-top:180px;}
		.main-1 img, .main-2 img, .main-3 img{max-width:80%; height:auto;}
		.main-1-1 img{max-width:30%;}
	
	.contact{top:40px;}	
	#contact-us img{max-width:40%; height:auto;}
	
	.screenshot{margin-top:-60px;}
}

/*mobile1024*/
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
	.main-0{padding-top:60px;}
		.firefly-scroll{padding:30px;}
}

/*mobile1440*/
@media only screen and (min-width: 1400px) and (max-width: 1500px) {
	.main-2{padding-top:120px; padding-bottom:80px;}
	.main-3{padding-top:120px;}
	.diamondswrap {padding-top:120px;}
	
	.our-services{margin-top:80px;}
	.our-clients{margin-top:100px;}
	.explore{margin-top:100px;}
	#contact-us{padding-top:100px;}
}