@import "kalkulator.css";

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url(fonts/Raleway-ExtraLight.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), url(fonts/Raleway.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: local('Raleway Medium'), local('Raleway-Medium'), url(fonts/Raleway-Medium.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(fonts/Raleway-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(fonts/Raleway-ExtraBold.woff) format('woff');
}




* {
	outline: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font: 400 13px 'Raleway', sans-serif;
	color: #6E6E6E;

	-webkit-text-size-adjust: none;
}

body {
    position: relative;
    height: auto;
    min-height: 100%;
}

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

input, select, textarea {
	font: 400 13px 'Raleway', sans-serif;
}

ul, ol, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.clear {
	clear: both;
}

.green {
    color: #0d9a2a;
}

.red {
    color: #c43336;
}

h1 {
	font-size: 20px;
	color: #FDB913;
}

h1 > b {
	font-weight: 600;
	color: #231F20;
}

div.line {
	height: 0;
	margin: 10px 0;
	font: 0/0 Arial;
	border-bottom: 2px solid #FDB913;
}



.valid {
    border-color: #0d9a2a !important;
	background-color: #7BF494;
}

.error {
    border-color: #c43336 !important;
	background-color: #E39395;
}

.lowercase {
	text-transform: lowercase;
}


input[type="submit"] {
	padding: 5px 10px;
	font: 600 16px 'Raleway', sans-serif;
	color: #FFF;
	cursor: pointer;
	border: 0;
	text-shadow: 1px 1px #444;
	background: #FDB913;
}





#header,
#home,
#infopage,
#login,
#footer_boxes,
#footer {
	min-width: 980px;
	max-width: 1012px;
	margin: 0 auto;
}

div.wrapper {
	position: relative;
	display: table;
	width: 980px;
	margin: 0 auto;
	padding: 0 5px;
}



#header {
	height: 132px;
	border-bottom: 4px solid #FDB913;
}

#header div.logo {
	float: left;
	margin: 18px 0 0 0;
}


/*************************
 * INFO
 *************************/

#header div.info {
	float: right;
	padding: 14px 20px 0 0;
	font-size: 13px;
	font-style: italic;
	text-align: right;
	line-height: 18px;
	color: #6e6e6e;
}

#header div.info b {
	padding: 0 0 0 10px;
	font-size: 18px;
	font-style: normal;
	color: #353535;
}




#header div.links {
	float: right;
	padding: 22px 22px 17px 22px;
	min-width: 286px;
	font-size: 18px;
	font-weight: 500;
	color: #FFF;
	background: #231F20;
	
	-moz-border-radius: 0 0px 20px 20px;
	-webkit-border-radius: 0 0px 20px 20px;
	border-radius: 0 0px 20px 20px;
}

#header div.links a {
	color: #FFF;
}

#header div.links a:hover {
	color: #FDB913;
}

#header div.links div.change {
	position: relative;
	display: inline-block;
	width: 55px;
	padding: 4px 0 10px 0;
	margin: -2px 10px -10px 0;
	cursor: pointer;
	background: url(../images/top_links_arrow.gif) 40px 10px no-repeat;
}

#header div.links div.change > img {
	width: 30px;
}

#header div.links div.change:hover #changeLang {
	display: block;
}


/*************************
 * LANGUAGE CHANGE
 *************************/

#changeLang {
	display: none;
	position: absolute;
	top: 45px;
	left: -20px;
	padding: 0 25px;
	border: 1px solid #D0D0D0;
	background: #FFF;
	z-index: 100;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#changeLang div.arrow {
	height: 12px;
	margin: -12px -25px 0 0;
	background: url(../images/top_change_arrow.png) no-repeat;
}

#changeLang a {
	display: table;
	width: 225px;
	padding: 17px 0;
	font-size: 12px;
	border-bottom: 1px solid #E1E4D9;
}

#changeLang b {
	color: #3E3E3E;
}

#changeLang a img {
	float: left;
	margin-right: 15px;
}

#changeLang b {
	display: block;
	padding-top: 8px;
	font-size: 13px;
}

#changeLang a:last-child {
	border: 0;
}

#changeLang a:hover {
	background: url(../images/top_change_circle.gif) right center no-repeat;
}

#changeLang a:hover b {
	color: #FDB913;
}


/*************************
 * MENU
 *************************/

#header ul.menu {
	position: absolute;
	top: 92px;
	right: 0;
}

#header ul.menu > li {
	float: left;
	position: relative;
}

#header ul.menu > li > a {
	display: block;
	padding: 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: #231F20;
}

#header ul.menu > li > a:hover,
#header ul.menu > li:hover > a,
#header ul.menu > li.active > a {
	color: #FDB913;
}

#header ul.menu > li:last-child > a {
	padding-right: 0;
}


/*************************
 * HOME
 *************************/

#home {
	padding: 13px 0;
}

#home div.left {
	float: left;
	width: 490px;
}

#home div.left div.slogan {
	padding: 20px 0 0 0;
	font-size: 18px;
	font-style: italic;
	color: #6E6E6E;
}

#home div.left div.slogan b {
	font-size: 23px;
	font-style: normal;
	color: #353535;
}

#home div.right {
	float: right;
	width: 478px;
}


/*************************
 * HOME - SLIDER
 *************************/

#slider {
	position: relative;
	width: 490px;
	height: 360px;
	overflow: hidden;
}

#slider div.box {
	width: 490px;
	height: 360px;
	overflow: hidden;
}

#slider div.box div.image {
	height: 360px;
}

#slider div.nav {
	position: absolute;
	bottom: 13px;
	right: 16px;
	z-index: 1000;
}

#slider div.nav a {
	display: inline-block;
	width: 11px;
	height: 11px;
	margin: 0 0 0 5px;
	font: 0/0 Arial;
	background: url(../images/slider_nav.png) no-repeat;
}

#slider div.nav a.activeSlide {
	background-position: left bottom;
}


/*************************
 * HOME - PRODUCTS
 *************************/

#home ul.products,
#home ul.products li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#home ul.products {
	display: table;
}

#home ul.products li {
	float: left;
	width: 238px;

}

#home ul.products a {
	display: block;
	padding: 0 0 13px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	color: #353535;
	min-height:220px;
}

#home ul.products a img {
	margin: 0 0 4px 0;
	border: 1px solid #CCCCCC;
	padding: 10px 32px;
}

#home ul.products a:hover {
	color: #FDB913;
}

#home ul.products a:hover img {
	border: 1px solid #FDB913;
}


#home ul.products li:nth-child(3n) {
	margin-right: 0;
}


/*************************
 * FOOTER BOXES
 *************************/

#footer_boxes {
	padding-bottom: 18px;
	border-top: 4px solid #FDB913;
}

#footer_boxes ul {
	display: table;
}

#footer_boxes li {
	position: relative;	
	float: left;
	width: 235px;
	margin: 12px 13px 12px 0;
}

#footer_boxes li a {
	display: block;
	text-align: center;
	text-decoration: none;
}

#footer_boxes li a:hover {
	opacity: 0.8;
}

#footer_boxes li span.image {
	display: block;
	width: 235px;
	height: 129px;
	font: 0/0 Arial;
}

#footer_boxes li img {
	width: 235px;
}

#footer_boxes li span.title {
	display: block;
	padding: 7px 0 2px 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: -0.2px;
	color: #353535;
}

#footer_boxes li span.title b {
	color: #FDB913;
}

#footer_boxes li:nth-child(4n) {
	margin-right: 0;
}


/*************************
 * FOOTER
 *************************/

#footer {
	padding: 21px 0;
	font-size: 12px;
	color: #a3a3a3;
	border-top: 1px solid #D6D6D6;
}

#footer a {
	color: #a3a3a3;
}

#footer a:hover,
#footer b {
	color: #7B7B7B;
}

#footer div.left {
	float: left;
}

#footer div.right {
	float: right;
}


/*************************
 * INFOPAGE
 *************************/

#infopage {
	padding: 13px 0;
}

#infopage li {
	padding: 3px 0 4px 45px;
	background: url(../images/check_icon.gif) 0 5px no-repeat;
}

#infopage div.image {
	float: left;
}

#infopage div.description {
	float: right;
	width: 715px;
	line-height: 20px;
	text-align: justify;
}

#infopage div.description h1 {
	margin: 0;
	font-size: 30px;
	line-height: 30px;
}

#infopage div.description h2 {
	margin: 0;
	font-size: 30px;
	font-weight: 500;
	color: #000;
}

#infopage {
	line-height: 20px;
}



/*************************
 * LOGIN
 *************************/

#login {
	padding: 13px 0 30px 0;
	min-height: 350px;
}

#login div.left {
	float: left;
	width: 410px;
}

#login div.left form p {
	padding: 15px 0 5px 0;
}

#login div.left form label {
	display: table;
	width: 410px;
	padding: 11px 0;
}

#login div.left form label span {
	display: inline-block;
	width: 70px;
	padding: 7px 0 0 0;
	font-weight: bold;
}

#login div.left form label input,
#login div.left form label textarea {
	float: right;
    width: 288px;
    height: 32px;
	margin: 0;
    padding: 0 25px;
	font-weight: 500;
	line-height: 28px;
	color: #000;
	border: 1px solid #CCC;
}

#login div.left form label textarea {
    width: 313px;
    height: 150px;
    padding-right: 0;
	line-height: 18px;
}

#login div.left form div.submit {
	margin: 3px 0 -5px 0;
	text-align: right;
}

/*
#login div.left form div.submit input {
	padding: 0;
	font: 600 16px 'Raleway', sans-serif;
	color: #FDB913;
	cursor: pointer;
	border: 0;
	background: none;
}
*/

#login div.left form div.links {
	padding: 0 0 0 64px;
	line-height: 24px;
}

#login div.left form div.links a {
	color: #FDB913;
}



#login div.right {
	float: right;
	width: 460px;
}

#login div.right ul,
#login div.right li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#login div.right ul {
	padding: 15px 0 0 0;
}

#login div.right li {
	padding: 3px 0 4px 45px;
	background: url(../images/check_icon.gif) 0 5px no-repeat;
}

#login div.right div.register {
	padding: 10px 0 0 45px; 
	font-size: 16px;
	font-weight: bold;
}

#login div.right div.register a {
	color: #353535;
}


/*************************
 * REGISTER
 *************************/

#register {
	padding: 13px 0 30px 0;
}

#register div.left {
	float: left;
	width: 410px;
}

#register form label {
	display: table;
	width: 410px;
	padding: 11px 0;
}

#register form label span {
	display: inline-block;
	width: 104px;
	padding: 7px 0 0 0;
	font-weight: bold;
}

#register form label input[type="text"],
#register form label input[type="password"] {
	float: right;
    width: 254px;
    height: 32px;
	margin: 0;
    padding: 0 25px;
	font-weight: 500;
	line-height: 28px;
	color: #000;
	border: 1px solid #CCC;
}

#register form label select {
	float: right;
    width: 306px;
    height: 32px;
	margin: 0;
    padding: 5px 5px 5px 25px;
	font-weight: 500;
	line-height: 28px;
	color: #000;
	border: 1px solid #CCC;
}

#register div.left form div.submit {
	margin: 3px 0 -5px 0;
	text-align: right;
}

#register div.submit {
	margin: 3px 0 -5px 0;
	text-align: right;
}

#register .links_underline a {
	text-decoration: underline;
}





#intro {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.83);
	z-index: 9999;
}

#intro > div {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 277px;
	margin: -182.5px 0 0 -138.5px;
}

#intro > div > img {
	height: 159px;
}

#intro #changeLang {
	display: block;
	position: static;
	padding: 0 25px;
	border: 1px solid #D0D0D0;
	background: #FFF;
	z-index: 100;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}




#login div.center {
	width: 610px;
	margin-left: 185px;
}

#login div.center form label {
	width: 610px;
}

#login div.center form label span {
	width: 170px;
}

#login div.center form label input {
    width: 388px;
}

#login div.center form label textarea {
    width: 413px;
}











.custom-select, .custom-select-label {
	float: right;
	position: relative;
	display: block;
	width: 303px;
	height: 32px;
	line-height: 32px;
	cursor: pointer;
	color: #000;
	overflow: hidden;
}

.custom-select {
	margin-bottom: -32px;
	z-index: 2;
	opacity: 0;
	-webkit-appearance: none; /* Done because Webkit hates letting you style select boxes */
}

.custom-select-label {
	width: 251px;
	padding: 0 30px 0 20px;
	font-size: 15px;
	background: #FFF;
	margin: 0;
	border: 1px solid #CCC;
}

.custom-select-label:after {
	content: '';
	display: block;
	border: 6px solid transparent;
	position: absolute;
	top: 50%;
	right: 0.5em;
	margin-top: -7px;
	
	border-width: 0 15px 15px 0;
	border-image: url('../images/select_arrow.png');
}