/*
*	www.parametrik.hr
*	10/11/2013
*/


/*----------------------------------------------------------------------

RESET / NORMALIZE

----------------------------------------------------------------------*/

	/* HTML5 */
	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
	audio, canvas, video { display: inline-block; }
	audio, canvas, img, video { vertical-align: middle; }
	audio:not([controls]) { display: none; height: 0; }
	[hidden], template { display: none; }

	/* Base */
	html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
	body { margin: 0; }

	/* Links */
	a { background: transparent; }
	:focus { outline: 0; }
	a:active, a:hover { outline: 0; }

	/* Typography */
	abbr[title] { border-bottom: 1px dotted; }
	b, strong { font-weight: bold; }
	dfn { font-style: italic; }
	hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
	mark { background: #ff0; color: #000; }
	code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
	pre { white-space: pre-wrap; }
	q { quotes: "\201C" "\201D" "\2018" "\2019"; }
	small { font-size: 80%; }
	sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }

	/* Embedded content */
	img { border: 0; }
	svg:not(:root) { overflow: hidden; }

	/* Figures */
	figure { margin: 0; }

	/* Forms */
	fieldset { border: 0; margin: 0; padding: 0; }
	legend {  border: 0; padding: 0; }
	button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; border: 0; }
	button, input { line-height: normal; }
	button, select { text-transform: none; }
	button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
	button[disabled], html input[disabled] { cursor: default; }
	input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
	input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
	input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
	button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
	textarea { overflow: auto; vertical-align: top; resize: vertical; }

	/* Tables */
	table { border-collapse: collapse; border-spacing: 0; resize: vertical; }


/*----------------------------------------------------------------------

GRID

----------------------------------------------------------------------*/

	body { text-align: center; }
	.container { display: inline-block; position: relative; width: 960px; padding: 0; text-align: left; }

	.span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12 { float: left; display: inline-block; margin-left: 10px; margin-right: 10px; position: relative; }

	.span-1.holder, .span-2.holder, .span-3.holder, .span-4.holder, .span-5.holder, .span-6.holder, .span-7.holder, .span-8.holder, .span-9.holder, .span-10.holder, .span-11.holder, .span-12.holder { margin: 0; }


	/* Base Grid */
	.span-1		{ width: 60px;  }				.span-1.holder		{ width: 80px;  }
	.span-2		{ width: 140px; }				.span-2.holder		{ width: 160px; }
	.span-3		{ width: 220px; }				.span-3.holder		{ width: 240px; }
	.span-4		{ width: 300px; }				.span-4.holder		{ width: 320px; }
	.span-5		{ width: 380px; }				.span-5.holder		{ width: 400px; }
	.span-6		{ width: 460px; }				.span-6.holder		{ width: 480px; }
	.span-7		{ width: 540px; }				.span-7.holder		{ width: 560px; }
	.span-8		{ width: 620px; }				.span-8.holder		{ width: 640px; }
	.span-9		{ width: 700px; }				.span-9.holder		{ width: 720px; }
	.span-10	{ width: 780px; }				.span-10.holder		{ width: 800px; }
	.span-11	{ width: 860px; }				.span-11.holder		{ width: 880px; }
	.span-12	{ width: 940px; }				.span-12.holder		{ width: 960px; }
               
	/* Offsets */  
	.offset-1	{ margin-left: 90px;  }			.offset-1.holder	{ margin-left: 70px;  }
	.offset-2	{ margin-left: 170px; }			.offset-2.holder	{ margin-left: 160px; }
	.offset-3	{ margin-left: 250px; }			.offset-3.holder	{ margin-left: 240px; }
	.offset-4	{ margin-left: 330px; }			.offset-4.holder	{ margin-left: 320px; }
	.offset-5	{ margin-left: 410px; }			.offset-5.holder	{ margin-left: 400px; }
	.offset-6	{ margin-left: 490px; }			.offset-6.holder	{ margin-left: 480px; }
	.offset-7	{ margin-left: 570px; }			.offset-7.holder	{ margin-left: 560px; }
	.offset-8	{ margin-left: 650px; }			.offset-8.holder	{ margin-left: 640px; }
	.offset-9	{ margin-left: 730px; }			.offset-9.holder	{ margin-left: 720px; }
	.offset-10	{ margin-left: 810px; }			.offset-10.holder	{ margin-left: 800px; }
	.offset-11	{ margin-left: 890px; }			.offset-11.holder	{ margin-left: 880px; }


/*----------------------------------------------------------------------

HELPER CLASSES

----------------------------------------------------------------------*/
	
	.left		{ float: left; }
	.right		{ float: right; }
	.hidden		{ display: none !important; visibility: hidden; }
	.invisible	{ visibility: hidden; }
	.clear 		{ clear: both !important; }
	.strong		{ font-weight: bold !important; }
	.txt-center	{ text-align: center; }
	.txt-left	{ text-align: left; }
	.txt-up		{ text-transform: uppercase; }
	.absolute	{ position: absolute; }
	.relative	{ position: relative; }
	.m-0		{ margin: 0; }
	.mb-0		{ margin-bottom: 0 !important; }
	.mb-18		{ margin-bottom: 18px !important; }
	.mb-40		{ margin-bottom: 40px !important; }
	.mb-80		{ margin-bottom: 80px !important; }
	.mb-160		{ margin-bottom: 160px !important; }
	.ml-20		{ margin-left: 20px !important; }
	.l-h-1	 	{ line-height: 1 !important; }

	/* Image replacement */
	.ir 		{ background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; }
	.ir:before 	{ content: ""; display: block; width: 0; height: 150%; }

	/* Clearfix: contain floats */
	.clearfix:before, 
	.clearfix:after 	{ content: " "; display: table; }
	.clearfix:after		{ clear: both; }
	.clearfix 			{ *zoom: 1; }


/*----------------------------------------------------------------------

TYPOGRAPHY / LINKS / BUTTONS / LISTS / FORMS / ICONS

----------------------------------------------------------------------*/
	
	/* Open Sans */
	@font-face {
		font-family: 'OpenSansLight';
		src: url('../fonts/OpenSans-Light-webfont.eot');
		src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
		     url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg'),
		     url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
		     url('../fonts/OpenSans-Light-webfont.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	}

	@font-face {
	    font-family: 'OpenSansRegular';
	    src: url('../fonts/OpenSans-Regular-webfont.eot');
	    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg'),
	         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
	         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'OpenSansItalic';
	    src: url('../fonts/OpenSans-Italic-webfont.eot');
	    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg'),
	         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
	         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'OpenSansSemibold';
	    src: url('../fonts/OpenSans-Semibold-webfont.eot');
	    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg'),
	         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
	         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'OpenSansBold';
	    src: url('../fonts/OpenSans-Bold-webfont.eot');
	    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'),
	         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
	         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal;
	}

	body	{ font-family: 'OpenSansLight', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
	.os-l	{ font-family: 'OpenSansLight', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }
	.os-r	{ font-family: 'OpenSansRegular', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }
	.os-sb	{ font-family: 'OpenSansSemibold', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }
	.os-b	{ font-family: 'OpenSansBold', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }

	/* Font Awsome ( custom, 15 icons ) */
	@font-face {
		font-family: 'fontawsome-min';
		src: url('../fonts/fontawsome-min.eot');
		src: url('../fonts/fontawsome-min.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/fontawsome-min.woff') format('woff'),
			 url('../fonts/fontawsome-min.ttf') format('truetype'),
			 url('../fonts/fontawsome-min.svg#fontawsome-min') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	 
	[class^="icon-"]:before, [class*=" icon-"]:before, .mobile-nav {
		font-family: 'fontawsome-min' !important;
		font-style: normal;
		font-weight: normal;
		speak: none;
		display: inline-block;
		text-decoration: inherit;
		/*width: 1em;*/
		margin-right: .2em;
		text-align: center;
		font-variant: normal;
		text-transform: none;
		line-height: 1;
	}
 
	.icon-mail:before 				{ content: '\e800'; }
	.icon-check:before 				{ content: '\e80a'; }
	.icon-user:before 				{ content: '\e808'; }
	.icon-ok-circled2:before 		{ content: '\e80f'; font-size: 1.2em; }
	.icon-cancel-circled2:before 	{ content: '\e810'; font-size: 1.2em; }
	.icon-info-circled:before 		{ content: '\e802'; }
	.icon-pencil:before 			{ content: '\e809'; }
	.icon-print:before 				{ content: '\e80b'; }
	.icon-mail-alt:before 			{ content: '\e801'; }
	.icon-phone:before 				{ content: '\e80d'; }
	.icon-menu:before 				{ content: '\e80e'; }
	.icon-down-dir:before 			{ content: '\e807'; }
	.icon-up-dir:before 			{ content: '\e803'; }
	.icon-right-dir:before 			{ content: '\e804'; }
	.icon-left-open:before 			{ content: '\e805'; }
	.icon-right-open:before 		{ content: '\e806'; }
	.icon-direction:before 			{ content: '\e80c'; }

	/* Font sizes and styles */
	html { font-size: 62.5%; } /* 10px = 1rem */
	h1, h2, h3, h4, h5, h6 { color: #00a99d; letter-spacing: 0; }
	h1 { font-size: 29px; line-height: 37px; font-size: 2.9rem; line-height: 3.7rem; }
	h2 { font-size: 29px; line-height: 37px; letter-spacing: 1.5px; font-size: 2.9rem; line-height: 3.7rem; letter-spacing: .15rem; }
	h3 { font-size: 48px; line-height: 58px; font-size: 4.8rem; line-height: 5.8rem; }
	h4 { font-size: 29px; line-height: 40px; font-size: 2.9rem; line-height: 4rem; }
	h5 { font-size: 27px; line-height: 37px; font-size: 2.7rem; line-height: 3.7rem; }
	h6 { font-size: 20px; line-height: 22px; font-size: 2rem; line-height: 2.2rem; }
	.lead { font-size: 27px; line-height: 34px; font-size: 2.7rem; line-height: 3.4rem; }
	p, ul, ol, dl, table, button, input, select, textarea { font-size: 18px; line-height: 22px; font-size: 1.8rem; line-height: 2.2rem; letter-spacing: 0; }
	dt { font-weight: bold; }

	/* Default spacing */
	h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote { margin: 10px 0; }

	/* Links */
	a, a:visited 		{ color: #d2d2d2; text-decoration: none; outline: 0; }
	a:hover, a:focus 	{ color: #00a99d; }
	a:active 			{ outline: none; }
	p a, p a:visited 	{ line-height: inherit; }

	/* Lists */
	ul, ol { margin: 0; padding: 0; }
	ul { list-style-type: none; }
	ul.symbol li { position: relative; margin-left: 1.7em; }
	ul.symbol i:before { 
		left: -1.7em;
	    position: absolute;
	    top: 0.142857em;
	    text-align: center;
	    width: 1em;
	}
	ul.arrow li { position: relative; margin-left: 0.833em; line-height: 1.2; }
	ul.arrow li:before { 
		display: inline-block;
		font-family: 'fontawsome-min' !important; 
		content: '\e804';
		position: absolute;
		left: -.833em;
		top: 0;
		line-height: 1.1;
		text-align: left;
		width: 0.833em;
	}

	/* Colors */
	.aquamar	{ color: #00a99d; }
	.deepsea	{ color: #042144; }
	.light		{ color: #d2d2d2; }
	.dark		{ color: #212121; }

	body *::selection 		{ background: #5DC4B6; }
	body *::-moz-selection 	{ background: #5DC4B6; }

	/* Forms */
	form, form p { font-size: 24px; line-height: 29px; letter-spacing: 1.5px; font-size: 2.4rem; line-height: 2.9rem; letter-spacing: .15rem; }
	input[type="text"],	input[type="email"], textarea {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		background: #d2d2d2; 
		color: #00a99d;
		border: 0;
		display: block;
		font-size: 24px; 
		font-size: 2.4rem; 
		letter-spacing: 1.5px; 
		letter-spacing: .15rem;
		line-height: 29px; 
		line-height: 2.9rem;
		padding: 10px 20px 10px 79px;
		width: 100%;
	}
	input[type="text"]:focus, input[type="email"]:focus, textarea:focus { }
	textarea { min-height: 60px; }
	label { display: block; cursor: text; line-height: 36px; line-height: 3.6rem; }

	/* placeholder */
	::-webkit-input-placeholder { color: #00a99d; }
	::-moz-placeholder 			{ color: #00a99d; }
	:-ms-input-placeholder 		{ color: #00a99d; }
	input:-moz-placeholder 		{ color: #00a99d; }

	/* Buttons */
	.button	{ -moz-box-sizing: border-box; box-sizing: border-box; background: #00a99d; color: #212121; padding: 10px 40px; font-size: 24px; line-height: 29px; font-size: 2.4rem; line-height: 2.9rem; }	
	.button:hover { background: #008279; }

	/* animation */
	.anim-1, .anim-1:before { 
		-webkit-transition: all .1s ease 0s; 
		-moz-transition: all .1s ease 0s; 
		-ms-transition: all .1s ease 0s; 
		-o-transition: all .1s ease 0s; 
		transition: all .1s ease 0s; 
	}
	.anim-2, .anim-2:before, .navigation.desktop li { 
		-webkit-transition: all .2s ease 0s; 
		-moz-transition: all .2s ease 0s; 
		-ms-transition: all .2s ease 0s; 
		-o-transition: all .2s ease 0s; 
		transition: all .2s ease 0s; 
	}
	.anim-3, .anim-3:before { 
		-webkit-transition: all .3s ease 0s; 
		-moz-transition: all .3s ease 0s; 
		-ms-transition: all .3s ease 0s; 
		-o-transition: all .3s ease 0s; 
		transition: all .3s ease 0s; 
	}
	.anim-5, .anim-5:before { 
		-webkit-transition: all .5s ease 0s; 
		-moz-transition: all .5s ease 0s; 
		-ms-transition: all .5s ease 0s; 
		-o-transition: all .5s ease 0s; 
		transition: all .5s ease 0s; 
	}
	.anim-top { 
		-webkit-transition: opacity .5s ease 0s, visibility .5s ease 0s;
		-moz-transition: opacity .5s ease 0s, visibility .5s ease 0s;
		-ms-transition: opacity .5s ease 0s, visibility .5s ease 0s;
		-o-transition: opacity .5s ease 0s, visibility .5s ease 0s;
		transition: opacity .5s ease 0s, visibility .5s ease 0s;
	}

	/* swipe */
	.swipe { overflow: hidden; visibility: hidden; position: relative; }
	.swipe-wrap { overflow: hidden; position: relative; }
	.swipe-wrap > li { float:left; width:100%; position: relative; }

	/*active state */
	a.is-active, li.is-active, span.is-active { color: #00a99d !important; }


/*----------------------------------------------------------------------

CONTENT

----------------------------------------------------------------------*/

	/* common */
	body { background: url(../img/bg-pattern.jpg) #212121; color: #d2d2d2; }
	.touch body, .lt-ie10 body { background-attachment: scroll !important; }
	.section-title { background: #d2d2d2; text-align: center; padding: 26px 0; margin: 0 0 150px; text-transform: uppercase; }
	.button-top { opacity: 0; visibility: hidden; width: 35px; height: 35px; background: url(../img/button-top-sprite.png) 0 0 #212121; position: fixed; bottom: 35px; right: 35px; }
	.button-top:hover { background-position: 0 -35px; }
	.button-top.show { opacity: 1; visibility: visible;  }

	/* Header */
	#header { height: 90px; background: #d2d2d2; position: fixed; top: -1px; left: 0; width: 100%; z-index: 100; }
	#header .logo { background: url(../img/logo.png) no-repeat 0 0; width: 220px; height: 45px; margin: 22px 0 0; display: inline-block; cursor: pointer; }
	.mobile-nav { display: none; }
	.navigation.mobile { display: none; }
	.navigation.desktop2 { float: right; margin-top: 25px; margin-right: -10px; }
	.navigation li { color: #212121; display: inline-block; padding: 12px; text-transform: uppercase; cursor: pointer; }
	.navigation li a{ color: #212121; display: inline-block; padding: 12px; text-transform: uppercase; cursor: pointer; }
	.navigation li a:hover { color: #00a99d; }

	/* Promo */
	#promo { background: #00a99d; padding: 95px 0 150px; }
	.logo-mono { background: url(../img/logo-mono.png) no-repeat 0 0; width: 336px; height: 69px; margin: 145px auto 50px; }
	.features { font-size: 30px; line-height: 36px; font-size: 3rem; line-height: 3.6rem; color: #042144; margin-bottom: 40px; text-transform: uppercase; }
	.features span { color: #d2d2d2; margin: 0 25px; }
	.slogan { font-size: 47px; line-height: 46px; font-size: 4.7rem; line-height: 4.6rem; margin-bottom: 50px; }
	#promo .button	{ background: #042144; color: #d2d2d2; padding: 18px 40px; font-size: 18px; line-height: 22px; font-size: 1.8rem; line-height: 2.2rem; }
	#promo .button:hover { background: #031933; }
	#promo .lang-switch { float: right; margin-right: 5px; }
	#promo .lang-switch li { display: inline-block; color: #042144; font-size: 14px; font-size: 1.4rem; }
	#promo .lang-switch a { color: #042144; }
	#promo .lang-switch a:hover, #promo .lang-switch .is-active a { text-decoration: underline; }

	/* Who we are? */
	#who-are-we { background: url("../img/car-wired.jpg") no-repeat 50% 70% rgba(0, 0, 0, 0); }

	/* Why parametrik? */
	#why-parametrik {}
	#why-parametrik h3 { margin-bottom: -8px; }

	#circle-mobile, #circle-no-anim, .touch #circle-container, .lt-ie10 #circle-container { display: none; }

	.touch #circle-no-anim, .lt-ie10 #circle-no-anim { display: block; }

	#circle-container { height: 5522px; position: relative; margin: 438px 0 420px; } 
	
	#circle-holder { width: 100%; height: 690px; position: absolute; top: 0; left: 50%; margin-left: -50%; }
	#gauge { position: absolute; top: 70px; left: 50%; margin-left: -232px; }

	#circle-holder .p-before { position: absolute; top: -264px; }
	#circle-holder .p-after { position: absolute; bottom: -400px; }

	.circle-full .circle-img { margin: 70px 0; position: relative; z-index: 10; }
	.circle-full .needle { position: absolute; top: 50%; margin-top: -85.5px; left: 50%; margin-left: -9.5px; transform: rotate(-120deg); z-index: 11;}
	.circle-full .wrapper .needle img { margin: 0; }
	.circle-full .wrapper { position: relative; }
	.circle-full .wrapper > span { position: absolute; font-size: 20px; font-size: 2em; z-index: 11; }
	.circle-full .wrapper span span { display: inline-block; margin: 0 5px; }
	.circle-full .wrapper span.is-active span { position: relative; z-index: 10; background: url(../img/circle-s-lines-sprite.png) no-repeat 0 50px; }
	.circle-full .s-1 { left: 34px;	top: 416px; }
	.circle-full .s-2 { left: 62px;	top: 96px; }
	.circle-full .s-3 { left: 408px; top: 15px; }
	.circle-full .s-4 { right: 110px; top: 63px; }
	.circle-full .s-5 { right: 88px; top: 132px; }
	.circle-full .s-6 { right: 17px; top: 234px; }
	.circle-full .s-7 { right: 1px;	top: 293px; }
	.circle-full .s-8 { right: 6px;	top: 397px; }
	.circle-full .s-1 span { width: 82px; height: 22px; background-position: 0 0 !important; top: -5px; }
	.circle-full .s-2 span { width: 72px; height: 33px; background-position: 0 -22px !important; top: 28px; }
	.circle-full .s-3 span { width: 10px; height: 40px; background-position: -72px -49px !important; position: absolute !important; top: 30px; left: 51px; }
	.circle-full .s-4 span { width: 72px; height: 34px; background-position: 0 -55px !important; top: 29px; }
	.circle-full .s-5 span { width: 81px; height: 21px; background-position: 0 -89px !important; top: 16px; }
	.circle-full .s-6 span { width: 81px; height: 21px; background-position: 0 -89px !important; top: 16px; }
	.circle-full .s-7 span { width: 81px; height: 21px; background-position: 0 -89px !important; top: 16px; }
	.circle-full .s-8 span { width: 81px; height: 23px; background-position: 0 -110px !important; top: -4px; }

	#graph-holder { font-size: 18px; font-size: 1.8rem; position: relative; height: 460px; }
	#graph-holder .graph-switch { display: inline-block; position: absolute; right: 0; top: 0; z-index: 1; }
	#graph-holder .graph-switch li { margin-bottom: 6px; }
	#graph-holder .graph { width: 780px; position: absolute; top: 0; left: 0; }
	#graph-holder .with { opacity: 0; z-index: -2; }
	#graph-holder .without { opacity: 1; z-index: 1; }
	#graph-holder .graph.without.anim-5.visible-graph { opacity: 1; z-index: 1; }
	#graph-holder .graph.with.anim-5.visible-graph { opacity: 1; z-index: 1; }
	#graph-holder .graph.without.anim-5.hidden-graph { opacity: 0; z-index: -2; }
	#graph-holder .graph.with.anim-5.hidden-graph { opacity: 0; z-index: -2; }
	#graph-holder.no-out .button-without { color: #00a99d;  }
	#graph-holder.no-out .button-with { color: #d2d2d2;  }
	#graph-holder .button-without { color: #d2d2d2;  }
	#graph-holder .button-with { color: #00a99d;  }
	#graph-holder svg { width: 100%; }
	
	.simulation-slider .os-b {display: inline-block; width: 80px; height: 35px; line-height: 35px;text-align: center; color: #fff;}
	.simulation-slider .os-b:hover {color: #fff;}
	.simulation-slider span{position: relative;display: inline-block; width: 35px; height: 35px; line-height: 35px; text-align: center; cursor:pointer; background: #a8a8a8; border-radius: 30px;z-index: 9;}
	.simulation-slider .os-b:hover span{color: #dcdcdc;}
	.simulation-slider .os-b.active span{background: #00a99d; color: #fff;}
	

	/* range od services */
	#range-of-service { display: block; }
	.photo-slider { display: inline-block; width: 100%; }
	.photo-slider .slide-buttons { height: 70px; position: absolute; top: 323px; z-index: 2; }
	.slide-prev .icon-left-open:before, .slide-next .icon-right-open:before { color: #00A99D; font-size: 49px; font-size: 4.9rem; }
	.photo-slider button { position: absolute; left: -20px; padding: 10px; background: none; }
	.photo-slider button.slide-next { left: auto; right: -30px; }
	.simulation-slider button { position: absolute; left: -20px; top: 200px; padding: 10px; background: none; z-index: 9;}
	.simulation-slider button.slide-next { left: auto; right: -30px; }
	.photo-slider button:hover .icon-left-open:before, .photo-slider button:hover .icon-right-open:before { color: #008279; }
	.simulation-slider button:hover .icon-left-open:before, .simulation-slider button:hover .icon-right-open:before { color: #008279; }
	.photo-slider .figure { display: inline-block; width: 940px; }
	.photo-slider .figcaption { float: none; height: 150px; }
	.photo-slider .gallery-img { display: inline-block; width: 481px; height: 368px; background-position: 0 -100%;}
	.photo-slider:hover .gallery-img { background-position: 0 0 !important;}
	.photo-slider .gallery-img.f-1 	{ background-image: url(../img/slide/01.png); }
	.photo-slider .gallery-img.f-1b 	{ background-image: url(../img/slide/01b.png); }
	.photo-slider .gallery-img.f-1c 	{ background-image: url(../img/slide/01c.png); }
	.photo-slider .gallery-img.f-1d 	{ background-image: url(../img/slide/01d.png); }
	.photo-slider .gallery-img.f-2 	{ background-image: url(../img/slide/02.png); }
	.photo-slider .gallery-img.f-3 	{ background-image: url(../img/slide/03.png); }
	.photo-slider .gallery-img.f-4 	{ background-image: url(../img/slide/04.png); }
	.photo-slider .gallery-img.f-5 	{ background-image: url(../img/slide/05.png); }
	.photo-slider .gallery-img.f-6 	{ background-image: url(../img/slide/06.png); }
	.photo-slider .gallery-img.f-7 	{ background-image: url(../img/slide/07.png); }
	.photo-slider .gallery-img.f-8 	{ background-image: url(../img/slide/08.png); }
	.photo-slider .gallery-img.f-8b	{ background-image: url(../img/slide/08b.png); }
	.photo-slider .gallery-img.f-9 	{ background-image: url(../img/slide/09.png); }
	.photo-slider .gallery-img.f-9b	{ background-image: url(../img/slide/09b.png); }
	.video-holder { height: 280px; overflow: hidden; margin-bottom: -40px; }
	.simulation-slider{height: 700px;}
	#scroll-video-1 { width: 500px; height: 281px; margin-top: 0; background-image: url(../img/video.png); background-repeat: no-repeat;margin-left: auto;margin-right: auto; }
	#scroll-video-2 { width: 500px; height: 350px; margin-top: 0; background-image: url(../img/video-2.png); background-repeat: no-repeat;margin-left: auto;margin-right: auto; background-size: 100%;}
	#scroll-video-3 { width: 550px; height: 288px; margin-top: 0; background-image: url(../img/video-3.png); background-repeat: no-repeat;margin-left: auto;margin-right: auto; }	
	#scroll-video-m {width: 100%; height: 100%; margin-top:0; background: url(../img/no-video.png);  background-size: cover; }
	#scroll-video-2-m {width: 100%; height: 100%; margin-top:0; background: url(../img/no-video-2.png);  background-size: cover;}
	#scroll-video-3-m { width: 100%; height: 100%; margin-top:0; background: url(../img/no-video-3.png);  background-size: cover; }	
	#scroll-mobile-container{display:none;}
	.simulation-2, .simulation-3{display: none;}
	.simulation-slider-indicators{display: block; width: 300px; height: 30px; font-size: 22px;}
	.simulation-slider-indicators .two, .simulation-slider-indicators .three{display: none;}

	/* contact */
	#contact {}
	#email-form {}
	.form-type { margin-left: -310px; }
	.form-type label { cursor: pointer; position: relative; }
	.form-type .icon-right-dir:before { text-align: left; width: .68em; position: absolute; left: -20px; top: 5px; }
	.form-type input[type="radio"] { opacity: 0; position: absolute; clip: rect(0,0,0,0); clip: rect(0 0 0 0); }
	.form-type label:hover .icon-right-dir:before,
	.form-type input[type="radio"]:checked + .icon-right-dir:before { color: #00a99d; }

	.form-content > div { margin-bottom: 20px; }
	.form-content .email-body { height: 345px; }
	.form-content i:before { -moz-box-sizing: border-box; box-sizing: border-box; background: #00A99D; color: #212121; height: 100%; position: absolute; width: 59px; font-size: 30px; font-size: 3rem; line-height: 52px; line-height: 5.2rem; line-height: 1.6; }

		/* for ie8 & below */
		.lt-ie9 #contact input[type="radio"] { visibility: hidden; }
		.lt-ie9 #contact .form-content i:before { line-height: 52px; }

	.contacts { position: absolute; bottom: 60px; left: 0; }
	.contacts li { margin-bottom: 18px; margin-bottom: 1.8rem; }
	.contacts i:before { color: #00A99D; }

	.contact-success{ font-size: 1.8rem;margin-top: 25px;text-align: center; }

	.g-map { margin: 160px 0 0; height: 300px; display: block; }
	.g-map iframe { width: 100%; height: 300px; border: 0; }
	.map {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);}
	#map-canvas {height: 100%;margin: 0px;padding: 0px;}


	/* footer */
	#footer { background: #00a99d; padding: 20px 0; width: 100%; display: block; }
	#footer p { color: #212121; font-size: 11px; font-size: 1.1rem; line-height: 1.2; text-align: center; }
	.designed-by-aplitap { margin: -65px 0px 0px 35px; float:left;opacity: 0.2;
		-webkit-transition: all .7s ease 0s; 
		-moz-transition: all .7s ease 0s; 
		-ms-transition: all .7s ease 0s; 
		-o-transition: all .7s ease 0s; 
		transition: all .7s ease 0s; 
	}
	.designed-by-aplitap:hover { opacity: 0.9; }
	.tekst-center{text-align: center;}


	/* HR specific */
	.lang-hr form, form p { font-size: 2.3rem; letter-spacing: 0; }
	.lang-hr .circle-full .s-1 { left: 6px; }
	.lang-hr .circle-full .s-2 { left: 50px; }
	.lang-hr .circle-full .s-4 { right: 104px; }
	.lang-hr .circle-full .s-5 { right: -24px; }
	.lang-hr .circle-full .s-6 { right: 5px; }
	.lang-hr .circle-full .s-7 { right: -14px; }
	.lang-hr .circle-full .s-8 { right: -40px; top: 384px; width: 230px; text-align: left; }
	.lang-hr .circle-full .s-8 span { top: 13px; display: block !important; left: -92px; }



/*----------------------------------------------------------------------

MEDIA QUERIES

----------------------------------------------------------------------*/

/* Tablet (Portrait) */

    @media only screen and (min-width: 768px) and (max-width: 959px) {

    	.container { width: 768px; }
        
		/* Base Grid */
		.span-1		{ width: 44px;  }				.span-1.holder		{ width: 64px;  }
		.span-2		{ width: 108px; }				.span-2.holder		{ width: 128px; }
		.span-3		{ width: 172px; }				.span-3.holder		{ width: 192px; }
		.span-4		{ width: 236px; }				.span-4.holder		{ width: 256px; }
		.span-5		{ width: 300px; }				.span-5.holder		{ width: 320px; }
		.span-6		{ width: 364px; }				.span-6.holder		{ width: 384px; }
		.span-7		{ width: 428px; }				.span-7.holder		{ width: 448px; }
		.span-8		{ width: 492px; }				.span-8.holder		{ width: 512px; }
		.span-9		{ width: 556px; }				.span-9.holder		{ width: 576px; }
		.span-10	{ width: 620px; }				.span-10.holder		{ width: 640px; }
		.span-11	{ width: 684px; }				.span-11.holder		{ width: 704px; }
		.span-12	{ width: 748px; }				.span-12.holder		{ width: 768px; }
	               
		/* Offsets */  
		.offset-1	{ margin-left: 74px;  }			.offset-1.holder	{ margin-left: 64px;  }
		.offset-2	{ margin-left: 138px; }			.offset-2.holder	{ margin-left: 138px; }
		.offset-3	{ margin-left: 202px; }			.offset-3.holder	{ margin-left: 192px; }
		.offset-4	{ margin-left: 266px; }			.offset-4.holder	{ margin-left: 256px; }
		.offset-5	{ margin-left: 330px; }			.offset-5.holder	{ margin-left: 320px; }
		.offset-6	{ margin-left: 394px; }			.offset-6.holder	{ margin-left: 384px; }
		.offset-7	{ margin-left: 458px; }			.offset-7.holder	{ margin-left: 448px; }
		.offset-8	{ margin-left: 522px; }			.offset-8.holder	{ margin-left: 512px; }
		.offset-9	{ margin-left: 586px; }			.offset-9.holder	{ margin-left: 576px; }
		.offset-10	{ margin-left: 650px; }			.offset-10.holder	{ margin-left: 640px; }
		.offset-11	{ margin-left: 714px; }			.offset-11.holder	{ margin-left: 704px; }


		.in-view, footer { overflow: hidden; }

		#header { height: 80px; }
		#header .logo { background-size: contain; width: 172px; margin-left: 4px; }
		.navigation.desktop { margin-right: -6px; margin-top: 18px;}
		.navigation li { font-size: 1.7rem; padding: 12px 6px; }

		#promo { padding-top: 85px; }
		.features { font-size: 2.7rem; }
		.slogan { font-size: 4.2rem; }

		#circle-container, .touch #circle-no-anim, .lt-ie10 #circle-no-anim { display: none; }
		#circle-mobile { display: block; }
		#circle-mobile img { margin: 40px 0;  }

		#graph-holder .graph { width: 748px; }
		#graph-holder .graph-switch { top: -20px;}

		.video-holder { height: 220px; }
		#scroll-video-1 {  margin: -40px auto 0px; }

		form, form p, input[type="text"], input[type="email"], textarea { font-size: 2rem; }
		.form-type { margin-left: -246px; }
		ul.symbol li { font-size: 1.6rem; }

		.photo-slider .figure { width: 748px; }
		.span-7 img { width: 100%; }

    }


/* Mobile (Portrait) */

    @media only screen and (max-width: 767px) {

        .container { width: 300px; }

        .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-1.holder, .span-2.holder, .span-3.holder, .span-4.holder, .span-5.holder, .span-6.holder, .span-7.holder, .span-8.holder, .span-9.holder, .span-10.holder, .span-11.holder, .span-12.holder  { margin: 0; width: 300px; clear: both; }

        .offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-1.holder, .offset-2.holder, .offset-3.holder, .offset-4.holder, .offset-5.holder, .offset-6.holder, .offset-7.holder, .offset-8.holder, .offset-9.holder, .offset-10.holder, .offset-11.holder { margin-left: 0; clear: both; }


        h3 { font-size: 4rem; line-height: 1.2; }
        .in-view, footer { overflow: hidden; }

        .section-title { margin-bottom: 70px; padding: 14px 0; font-size: 2rem; }
        .button-top { display: none; }
        .mb-160 { margin-bottom: 80px !important; }
        .mb-80 { margin-bottom: 40px !important; }
        .mb-40 { margin-bottom: 20px !important; }

        #header { height: 60px; }
        #header .logo { background-size: contain; width: 166px; margin-top: 14px; margin-left: 6px; }
        .mobile-nav { color: #212121; display: block; font-size: 2.8rem; position: absolute; right: 0; top: 6px; margin: 0; padding: 10px; cursor: pointer; }
        .navigation.desktop2 { display: none; }
        .navigation.mobile { background: #D2D2D2; display: block; margin: 0; padding: 10px 0; position: fixed; right: 0; top: -130px; width: 100%; z-index: 1; }
        .navigation.mobile li { display: block; margin: 0; padding: 10px 20px; }
        .open .navigation.mobile { -webkit-transform: translateY(180px); transform: translateY(180px) }
        .open .mobile-nav { color: #00A99D; }

        #promo { padding-top: 66px; padding-bottom: 80px; }

        .logo-mono { background-size: contain; height: 62px; margin-bottom: 20px; margin-top: 40px; }
        .features { font-size: 2.4rem; line-height: 2rem; margin-bottom: 20px; }
        .features span { display: block; margin: 10px 0; }
        .slogan { font-size: 2.2rem; line-height: 2.6rem; margin-bottom: 30px; }
        #promo .button { font-size: 1.4rem; line-height: 2rem; padding: 16px 36px; }

        .span-7 img, .logo-mono { width: 90%; }

        #circle-container, .touch #circle-no-anim, .lt-ie10 #circle-no-anim { display: none; }
		#circle-mobile { display: block; }
		#circle-mobile img { margin: 20px 0; width: 100%;  }

        #graph-holder { margin-top: 120px; height: 230px; }
        #graph-holder .graph { width: 300px; }
        #graph-holder .graph svg { height: 245px; }
        #graph-holder .graph-switch { top: -60px;}

        .photo-slider, .photo-slider .figure { width: 300px; }
        .photo-slider .figure .gallery-img  { width: 220px; height: 168px; background-size: cover; }
        .photo-slider .slide-buttons { top: 215px; }
        .slide-prev .icon-left-open:before, .slide-next .icon-right-open:before { font-size: 3.9rem; }

        .video-holder { height: 155px; }
		#scroll-video-1, #scroll-video-2, #scroll-video-3 { display: none !important; }
		#scroll-mobile-container{display:block;height: 300px;}
		.simulation-slider {  height: 500px;}
		.simulation-slider button { top: 130px; }
		
        #email-form { margin: 0 0 80px; }
        .form-content .email-body { height: 108px; }
        .form-type { margin-bottom: 40px !important; }
        .contacts { position: relative; bottom: auto; }

        .designed-by-aplitap {margin: 10px auto;float:none;}
    }


/* Mobile (Landscape) */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

        .container { width: 460px; }

        .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-1.holder, .span-2.holder, .span-3.holder, .span-4.holder, .span-5.holder, .span-6.holder, .span-7.holder, .span-8.holder, .span-9.holder, .span-10.holder, .span-11.holder, .span-12.holder  { margin: 0; width: 460px; }

        .logo-mono { background-position: 50% 0; height: 69px; }

         #graph-holder .graph { width: 460px; }
         #graph-holder .graph svg { height: 275px; }

        .photo-slider, .photo-slider .figure { width: 460px; }
        .photo-slider .figure .gallery-img  { width: 360px; height: 275px; }
        .photo-slider .slide-buttons { top: 280px; }
        .video-holder { height: 210px; }
	

    }
	@media only screen and (max-width : 480px){
		#scroll-mobile-container{height: 200px;}
	}

/*----------------------------------------------------------------------

PRINT STYLES

----------------------------------------------------------------------*/

	@media print {
		* { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
		a, a:visited { text-decoration: underline; }
		a[href]:after { content: " (" attr(href) ")"; }
		abbr[title]:after { content: " (" attr(title) ")"; }

		/* Don't show links for images, or javascript/internal links */
		.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }

		pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
		thead { display: table-header-group; }
		tr, img { page-break-inside: avoid; }
		img { max-width: 100% !important; }
		@page { margin: 0.5cm; }
		p, h2, h3 { orphans: 3; widows: 3; }
		h2, h3 { page-break-after: avoid; }
	}