@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&subset=latin-ext');
/* Reseter */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
	margin: 0;
	padding: 0;
	text-align: left;
	font-size: 16px;
	min-height: 100vh;
	background: aliceblue url(background.png) no-repeat bottom right;
	background-attachment: fixed;
	background-size: auto 50% ;
	font-family: 'Montserrat', sans-serif;
}
strong {
	font-weight: 700;
}
.calculator-wrapper {
	padding-bottom: 80px 0;
}
.calculator-box {
	position: relative;
	display: table;
	padding: 0;
	padding-bottom: 25px;
	background: #fff;
	margin: 80px auto;
	border-radius: 3px;
	box-shadow: 6px 7px 24px 2px rgba(0,0,0,.2);
}
/* Bootstrap alternative */
.clearfix:after,
.row:after {
	content: "";
	display: table;
	clear: both;
}
.col-md-4,.col-md-8,.col-sm-6 {
	width: 100%;
	float: left;
}
@media(min-width: 601px){
	.col-sm-6{
		width: 50%;
	}
}
/*
@media(min-width: 992px){
	.col-md-6 {
		width: 50%;
	}
	.col-md-4 {
		width: 33.3333332%;
	}
	.col-md-8 {
		width: 66.6666665%;
	}
}
*/
.calculator-box input {
	border: none;
	padding: 0 0 0 4px;
	position: absolute;
	top: 0;
	left: 0;
	background: #eee;
	width: 100%;
	height: 100%;
}
.calculator-box input:focus {
	outline: none;
}
.form-grup {
	position: relative;
	border-bottom: 1px solid #eee;
	margin: 3px 15px;
	padding: 15px 15px 15px 4px;
	max-width: 100%;
	width: 210px;
	max-width: 100%;
	border-bottom: 1px solid #eee;
}
p.small-label {
	padding: 11px 0;
	font-size: 12px;
	text-align: right;
}
.form-grup:before {
	content: '';
	display: block;
	position: absolute;
	height: 2px;
	width: 0;
	bottom: 0;
	left: 0;
	background: #0033a1;
	transition: all 280ms ease-in-out;
	z-index: 2;
}
.form-grup.focused:before {
	width: 100%;
}
.form-grup label{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 280ms ease-in-out;
}
.form-grup.focused label{
	font-size: .7em;
	-webkit-transform: translate(0, -90%);
	-moz-transform: translate(0, -90%);
	-ms-transform: translate(0, -90%);
	-o-transform: translate(0, -90%);
	transform: translate(0, -90%);
}
.tab {
	border: none;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border-top: 1px solid #e0e0e0;
}
.tab button {
	position: relative;
	padding: 25px 16px;
	transition: 0.3s;
	width: 230px;
	flex-grow: 1;
	outline: none;
	background: #eee;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
}
.tab button:hover {
	background-color: rgba(0, 51, 161, 0.29);
}
.tab button.active {
	background-color: #0033a1;
	color: #fff;
}
.tab button.active:before {
	content: " ";
	position: absolute;
	top: 100%;
	left: calc(50% - 8px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 12px 0 12px;
	border-color: #0033a1 transparent transparent transparent;

}
.tabcontent {
	display: none;
	padding: 6px 12px;
	border-top: none;
}
.header {
	padding: 25px;
	border-bottom: 1px solid #eee;
	margin-bottom: 0px;
}
.tab-content {
	margin-bottom: 25px;
	min-height: 196px;
}
h3 {
	font-size: 18px;
	padding: 8px;
	color: #fff;
	background: #0033a1;
	text-transform: uppercase;
	margin: 15px 0;
}
/* Intro */
.intro {
	padding: 40px 20px;
	background: #81bd00;
	margin: -6px -12px 15px;
	position: relative;
}
.intro h2{
	color: #fff;
	font-weight: 700;
	text-align: center;
	font-size: 26px;
}
img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}
h2.result {
	font-size: 50px;
	text-align: right;
	font-weight: 700;
	color: #81bd00;
}
h2.result_s {
	text-align: right;
	color: #81bd00;	
	font-size: 18px;
}
span.small-lab {
	float: left;
}
@media(max-width: 600px){
	p.small-label {
		text-align: left;
		margin: 3px 15px;
	}
	.calculator-box {
		margin: auto;
	}
	.form-grup {
		width: calc(100% - 65px);
	}
	h2.result {
		font-size: 30px;
	}
	p.small-label {
		padding-bottom: 0;
		font-size: 14px;
	}
}
.big-button {
	background-color: #0033a1;
	box-shadow: 0 3px 2px 1px #2a2c2b;
	color: #fff !important;
	padding: 15px 30px;
	border-radius: 4px;
	display: inline-block;
	text-align: center;
	width: 240px;
	margin: auto;
	border: none;
	cursor: pointer;
	outline: none !important;
	transition: all 280ms ease-in-out;
}
.big-button.active {
	box-shadow: inset 0 4px 13px 1px #2a2c2b;
	background: #2850a6;

}
.button-group {
	text-align: center;
	margin-bottom: 25px;
}
.fixed {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - 24px);
	z-index: 10;
	background: #fff;
}
div#trigger {
	position: relative;
	width: 100%;
}
/* Number spinners */
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
	top: 0;
	right: 0;
	/*opacity: .3;*/
	padding: 10px 4px;
	font-size: 8px;
	width: 1em;
	height: 1em;
	display: inline-block;
}
/* Provizní tabulka */
table {
	margin: 40px auto 0;
}
table th,
table td {
	padding: 19px 8px;
	border-bottom: 1px solid #ddd;
	text-align: right;
	vertical-align: middle;
	position: relative;
}
table td:first-child {
		background: #eee;
}
table th {
	font-weight: 700;
	border-bottom: 2px solid #ddd;
	color: #81bd00;
}
table td:nth-child(2),
table td:nth-child(4),
table td:nth-child(3) {
	font-weight: 700;
}
a.small-desc {
	    font-size: 0.6em;
    position: absolute;
    display: block;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border: 1px solid #d0d0d0;
    text-align: center;
    border-radius: 50%;
    top: 2px;
    right: -2px;
    cursor: help;
	font-weight: 400;
}
.form-grup.input-big {
	margin: 10px 0;
	width: calc(100% - 60px);
	padding: 24px 10px;
}
.form-grup.input-big input{
	background: transparent;
	font-size: 22px;
	padding: 0;
	text-align: center;
	border-bottom: 1px solid #999;
	box-shadow: -3px 4px 10px -5px rgba(0, 0, 0, 0.54);
}
/*
.main {
	opacity: 0;
}
.replace {
    pointer-events: none;
}*/
button.change-button {    
	position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 16px;
    background: transparent;
    border: none;
    /* font-weight: 700; */
    color: #fff;
    opacity: .7;
    outline: none;
    cursor: pointer;
    transition: all 280ms ease-in-out;
}
button.change-button:hover {
	opacity: 1;
}
.hidden-title {
    position: absolute;
    right: 9px;
    top: -1px;
    padding-bottom: 0px;
    width: 13em;
    text-align: right;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #d0d0d0;
    border-right: 0;
    background: #fff;
    white-space: nowrap;
    max-width: 0px;
    opacity: 0;
    /* max-width: 400px; */
    overflow: hidden;
    transition: all 280ms ease-out;
 }
a.small-desc:hover .hidden-title {
	max-width: 1000px;
    padding-right: 6px;
    opacity: 1;
}