html,
body
{
	margin: 0;
	padding: 0;
	font-size: 100%;
    font-family: 'Open Sans', sans-serif;
	color: #444;
	background: #fff;
	-webkit-text-size-adjust: 100%;
}

/* ELEMENTS */
a
{
	color: #2d81d7;
    transition: color 0.25s linear;
    outline: 0;
}

a:hover
{
	color: #0fa24f;
}

h1,
h2,
h3
{
	margin: 0;
	padding: 0;
}

h1
{
	font-size: 2.5em;
}

h2
{
	font-size: 2em;
}

h3
{
	font-size: 1.7em;
}

@media screen and (max-width: 950px)
{
	h2
	{
		font-size: 1.5em;
		line-height: 1.3;
	}

	h3
	{
		font-size: 1.2em;
		line-height: 1.3;
	}
}

li,
p
{
	font-size: 1em;
}

p
{
	line-height: 1.5;
}

input,
textarea,
select,
button
{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
}

/* CLASSES */
.content
{
	max-width: 1150px;
	margin: 0 auto;
}

@media screen and (max-width: 1150px)
{
	.content
	{
		padding: 0 20px;
	}
}

.ruler
{
	clear: both;
}

/* CONTENT REGISTRATION LINK */
.link-registration
{
	text-align: center;
}

.link-registration a
{
	display: inline-block;
	padding: 15px 25px;
	color: #fff;
	background: #589ada;
	border: solid #1d7fd9;
	border-width: 1px 1px 3px 1px;
	text-decoration: none;
	font-size: 1.5em;
	transition: background-color 0.25s linear, border-color 0.25s linear;
}

.link-registration a:hover
{
	background-color: #0fa24f;
	border-color: #00813d;
}

.link-registration a i.fa
{
	margin-right: 15px;
	font-size: 1.3em;
	vertical-align: -2px;
}

@media screen and (max-width: 950px)
{
	.link-registration a
	{
		padding: 10px 15px;
		font-size: 1.2em;
	}
}

/* GALLERY */
ul.gallery
{
	width: 100%;
	margin: 0;
	padding: 0;
}

ul.gallery li
{
	float: left;
	position: relative;
	list-style: none;
	width: 370px;
	height: 300px;
	overflow: hidden;
	margin: 20px 20px 0 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

ul.gallery li:nth-child(1),
ul.gallery li:nth-child(2),
ul.gallery li:nth-child(3)
{
	margin-top: 0;
}

ul.gallery li:nth-child(3n+3)
{
	margin-right: 0;
}

ul.gallery li a
{
	border: 10px solid #fff;
	border-radius: 10px;
	background-color: #000;
	transition: border-color 0.25s linear;
}

ul.gallery li a:hover
{
	border-color: #0fa24f;
}

ul.gallery li a img
{
	float: left;
	max-width: 350px;
}

@media screen and (max-width: 1170px)
{
	ul.gallery li
	{
		display: block;
		width: calc(50% - 10px);
		height: auto;
		margin: 0;
		padding-top: 20px;
	}

	ul.gallery li:nth-child(2n+1)
	{
		margin-right: 20px;
	}

	ul.gallery li a
	{
		float: left;
		background-color: #fff;
	}

	ul.gallery li a img
	{
		width: 100%;
		max-width: 100%;
		opacity: 1;
	}
}

@media screen and (max-width: 950px)
{
	ul.gallery li
	{
		float: none;
		display: block;
		width: 100%;
		height: auto;
		margin: 20px 0 0 0 !important;
	}

	ul.gallery li a
	{
		float: left;
		background-color: #fff;
	}

	ul.gallery li a img
	{
		width: 100%;
		max-width: 100%;
		opacity: 1;
	}
}

/* HEADER */
header
{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	height: 100px;
	background: rgba(55, 55, 55, 0.95);
	z-index: 100;
}

header h1
{
	position: absolute;
	left: 25px;
	top: 0;
	bottom: 0;
	padding-left: 45px;
	line-height: 90px;
	color: #fff;
	background: url('/web/assets/img/fakturovac-50.png') left center no-repeat;
	font-weight: normal;
}

header h1 span.f
{
	display: none;
}

header h1 span.dot-tld
{
	color: #7a7a7a;
}

header a.menu-toggle
{
	position: fixed;
	right: 10px;
	top: 10px;
	width: 40px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.8em;
	text-decoration: none;
	z-index: 150;
}

header a.menu-toggle.active
{
	color: #0fa24f;
}

@media screen and (max-width: 1300px)
{
	header h1
	{
		font-size: 2em;
	}
}

@media screen and (max-width: 950px)
{
	header
	{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 60px;
		background: rgba(55, 55, 55, 0.98);
		z-index: 100;
	}

	header h1
	{
		left: 10px;
		line-height: 56px;
		background-size: 40px;
		padding-left: 35px;
	}

	header a.menu-toggle
	{
		display: flex;
	}
}

/* NAVIGATION */
nav
{
	position: fixed;
	top: 0;
	right: 0;
	left: 320px;
	height: 100px;
	z-index: 101;
}

nav ul
{
	height: 100px;
	margin: 20px;
	padding: 0;
}

nav ul li
{
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 1300px)
{
	nav
	{
		left: 270px;
	}
}

@media screen and (max-width: 950px)
{
	nav
	{
		display: none;
	}

	nav.visible
	{
		display: block;
		top: 60px;
		left: 0;
		bottom: 0;
		height: auto;
		background: rgba(55, 55, 55, 0.98);
		border-top: 1px solid #fff;
	}
}

/* NAV - MAIN */
nav ul.main
{
	float: left;
}

nav ul.main li
{
	float: left;
	height: 60px;
	margin-left: 20px;
	font-size: 1.3em;
}

nav ul.main li:nth-child(1)
{
	margin-left: 0;
}

nav ul.main li a
{
	position: relative;
	display: block;
	height: 60px;
	line-height: 60px;
	color: #fff;
	text-decoration: none;
}

nav ul.main li a:hover,
nav ul.main li a.active
{
	color: #0fa24f;
}

nav ul.main li a:after
{
	content: '';
	position: absolute;
	left: 0;
	bottom: 7px;
	width: 0;
	height: 3px;
	background-color: #0fa24f;
	transition: width 0.25s linear;
}

nav ul.main li a.active:after
{
	width: 100%;
}

@media screen and (max-width: 1300px)
{
	nav ul.main li
	{
		font-size: 1.1em;
	}
}

@media screen and (max-width: 950px)
{
	nav ul.main
	{
		clear: both;
		float: none;
		width: calc(100% - 40px);
		height: auto;
		padding-top: 10px;
	}

	nav ul.main li
	{
		float: none;
		margin: 0;
		padding: 0;
		text-align: center;
	}

	nav ul.main li a
	{
		display: inline-block;
		margin: 0;
	}
}

/* NAV - LOGIN / REGISTRATION */
nav ul.login-registration
{
	float: right;
}

nav ul.login-registration li
{
	position: relative;
	width: 180px;
	height: 60px;
}

nav ul.login-registration li:nth-child(1)
{
	margin-right: 20px;
}

nav ul.login-registration li a
{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	border-width: 1px 1px 3px 1px;
	text-decoration: none;
	color: #fff;
	font-size: 1.3em;
    transition: color 0.25s linear, background-color 0.25s linear, border-color 0.25s linear;
}

nav ul.login-registration li a i.fa
{
	margin-right: 8px;
	font-size: 1.3em;				
}

nav ul.login-registration li a.login
{
	background-color: #0fa24f;
	border-color: #00813d;
}

nav ul.login-registration li a.registration
{
	background-color: #589ada;
	border-color: #1d7fd9;
}

nav ul.login-registration li a:hover
{
	color: #373737;
	background-color: #fff;
	border-color: #f0f0f0;
}

@media screen and (max-width: 1300px)
{
	nav ul.login-registration li
	{
		width: 150px;
	}

	nav ul.login-registration li a
	{
		font-size: 1.1em;
	}
}

@media screen and (max-width: 1150px)
{
	nav ul.login-registration li
	{
		width: 60px;
	}

	nav ul.login-registration li a i.fa
	{
		margin-right: 0;
	}

	nav ul.login-registration li a span
	{
		display: none;
	}
}

@media screen and (max-width: 950px)
{
	nav ul.login-registration
	{
		float: none;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}

	nav ul.login-registration li
	{
		height: 50px;
	}

	nav ul.login-registration li:nth-child(1)
	{
		float: left;
		width: 50%;
		margin: 0;
	}

	nav ul.login-registration li:nth-child(2)
	{
		float: right;
		width: 50%;
		margin: 0;
	}

	nav ul.login-registration li a
	{
		font-size: 1.1em;
	}

	nav ul.login-registration li a i.fa
	{
		margin-right: 8px;
	}

	nav ul.login-registration li a span
	{
		display: inline;
	}
}

/* HOME */
article#home
{
	position: relative;
	width: 100%;
	min-height: calc(100vh - 100px);
	padding-top: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

article#home .home-motto h2
{
	margin: 0;
	padding: 25px 0 0 0;
	text-align: center;
}

article#home .home-image
{
	padding: 25px 0;
	text-align: center;
}

article#home .home-image img
{
	max-width: 100%;
	max-height: 50vh;
}

article#home .home-text
{
	padding: 0 0 45px 0;
	text-align: center;
}

article#home .home-text p
{
	margin: 0;
	padding: 5px 0;
	font-size: 1.3em;
}

article#home .home-text p.home-text-title
{
	font-size: 1.5em;
	font-weight: bold;
}

@media screen and (max-width: 950px)
{
	article#home
	{
		padding-top: 60px;
	}

	article#home .home-text p
	{
		font-size: 1.1em;
	}

	article#home .home-text p.home-text-title
	{
		font-size: 1.3em;
	}
}

/* #o-fakturovaci */
article#o-fakturovaci
{
	padding: 120px 0;
	color: #fff;
	background: #0fa24f;
}

article#o-fakturovaci p.image
{
	text-align: center;
}

article#o-fakturovaci p.image img
{
	width: calc(100% - 20px);
	max-width: 1100px;
	border: 10px solid #fff;
	border-radius: 10px;
}

article#o-fakturovaci .link-registration
{
	padding: 35px 0 0 0;
}

article#o-fakturovaci .link-registration a:hover
{
	color: #373737;
	background-color: #fff;
	border-color: #f0f0f0;
}

@media screen and (max-width: 950px)
{
	article#o-fakturovaci
	{
		padding: 70px 0;
	}
}

/* #jak-funguje */
article#jak-funguje
{
	padding: 120px 0;
	background: #ececec;
}

@media screen and (max-width: 950px)
{
	article#jak-funguje
	{
		padding: 70px 0;
	}
}

/* #co-umi */
article#co-umi
{
	padding: 120px 0;
}

article#co-umi h3
{
	margin: 0;
	padding: 25px 0 0 0;
}

article#co-umi h3 i
{
	margin-right: 10px;
}

article#co-umi ul
{
	margin: 15px 0 25px 0;
	padding: 0;
	border: 10px solid #ececec;
	border-radius: 10px;
}

article#co-umi ul li
{
	list-style: none;
	margin: 0;
	padding: 20px;
	line-height: 1.5;
	transition: background-color 0.25s linear;
}

article#co-umi ul li:hover
{
	background-color: #efefef;
}

article#co-umi ul li b.function-title
{
	color: #0fa24f;
	font-size: 1.2em;
}

article#co-umi ul li.bank-logos img.bank-logo
{
    height: 30px;
    margin-top: 20px;
    margin-right: 20px;
}

article#co-umi .link-registration
{
	padding: 35px 0 0 0;
}

@media screen and (max-width: 950px)
{
	article#co-umi
	{
		padding: 70px 0;
	}

	article#co-umi h3
	{
		padding-top: 15px;
	}

	article#co-umi ul
	{
		margin: 15px 0;
	}

	article#co-umi ul li
	{
		padding: 10px 15px;
	}

	article#co-umi ul li b.function-title
	{
		font-size: 1.1em;
	}
}

/* #autor */
article#autor
{
	padding: 120px 0;
	color: #fff;
	background: #151515;
}

article#autor .author-wrap
{
    margin-top: 25px;
}

article#autor .author-heading
{
    width: 100px;
    float: left;
}

article#autor .author-photo
{
    width: 98px;
    height: 98px;
    overflow: hidden;
    border: 1px solid #fff;
    border-radius: 50px;
}

article#autor .author-photo img
{
    max-width: 100%;
}

article#autor .author-name
{
    margin: 0;
    padding: 0;
    width: 100px;
    line-height: 35px;
    text-align: center;
}

article#autor .author-text
{
    margin-left: 130px;
}

article#autor .author-text p.author-statement
{
    margin: 0;
    padding: 0;
    line-height: 25px;
    font-size: 1.1em;
}

article#autor .author-text p.author-contact
{
    margin: 0;
    padding: 0;
    line-height: 35px;
    text-align: right;
}

article#autor .author-text p a
{
	color: #fff;
}

article#autor .author-text p a:hover
{
	color: #0fa24f;
}

article#autor .author-ruler
{
    clear: both;
}

@media screen and (max-width: 950px)
{
	article#autor
	{
		padding: 70px 0;
	}

	article#autor .author-heading
	{
		width: 100%;
		float: none;
	}

	article#autor .author-photo
	{
		margin: 0 auto;
	}

	article#autor .author-name
	{
		width: 100%;
		text-align: center;
	}

	article#autor .author-text
	{
		margin: 15px 0 0 0;
		padding: 0;
	}
}

/* #kontakt */
article#kontakt
{
	padding: 120px 0;
	color: #fff;
    background: #589ada;
}

article#kontakt form
{
    margin: 0;
    padding: 0;
}

article#kontakt form fieldset
{
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

article#kontakt form fieldset .form-loader
{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(88, 154, 218, 0.9);
    display: none;
    justify-content: center;
}

article#kontakt form fieldset .form-loader.visible
{
    display: flex;
}

article#kontakt form fieldset .form-loader .fa
{
    font-size: 500%;
}

article#kontakt form fieldset .form-loader span.form-loader-text
{
    display: block;
    margin-top: 25px;
    font-size: 120%;
}

article#kontakt form fieldset legend
{
    display: none;
}

article#kontakt .form-row
{
    padding: 25px;
    background-color: #fff;
    border: solid #ececec;
    border-width: 10px 10px 0 10px;
    transition: background-color 0.25s linear;
}

article#kontakt .form-row:hover
{
    background-color: #efefef;
}

article#kontakt .form-row-first
{
	border-radius: 10px 10px 0 0;
}

article#kontakt .form-row-last
{
    margin-bottom: 0;
	border: 10px solid #ececec;
	border-radius: 0 0 10px 10px;
}

article#kontakt .form-row label
{
    display: block;
    cursor: pointer;
    color: #444;
}

article#kontakt .form-row label div
{
    padding-bottom: 5px;
    font-size: 90%;
    text-transform: uppercase;
    font-weight: bold;
}

article#kontakt .form-row label div span
{
    padding-left: 5px;
    font-weight: normal;
    color: #c00;
}

article#kontakt .form-row input[type="email"],
article#kontakt .form-row input[type="text"],
article#kontakt .form-row textarea
{
    width: calc(100% - 22px);
    margin: 0;
    padding: 10px;
    font-size: 120%;
    color: #000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-transition: color 250ms linear, border-color 250ms linear, box-shadow 250ms linear;
    -moz-transition: color 250ms linear, border-color 250ms linear, box-shadow 250ms linear;
    -o-transition: color 250ms linear, border-color 250ms linear, box-shadow 250ms linear;
    transition: color 250ms linear, border-color 250ms linear, box-shadow 250ms linear;
}

article#kontakt .form-row textarea
{
    height: 180px;
}

article#kontakt .form-row label:hover input[type="email"],
article#kontakt .form-row label:hover input[type="text"],
article#kontakt .form-row label:hover textarea,
article#kontakt .form-row input[type="email"]:focus,
article#kontakt .form-row input[type="text"]:focus,
article#kontakt .form-row textarea:focus
{
    color: #00813d;
    border-color: #0fa24f;
    box-shadow: 0 0 5px rgba(97, 189, 109, 0.3);
}

article#kontakt .form-submit
{
    padding-top: 20px;
}

article#kontakt .form-submit .ruler
{
    clear: both;
}

article#kontakt .form-submit button
{
    margin: 0;
    padding: 20px 25px 17px 25px;
    color: #fff;
    border-style: solid;
    border-width: 1px 1px 3px 1px;
    font-size: 120%;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.25s linear, background-color 0.25s linear, border-color 0.25s linear;
}

article#kontakt .form-submit button[type="submit"]
{
    float: left;
    background-color: #0fa24f;
    border-color: #00813d;
}

article#kontakt .form-submit button[type="submit"]:hover
{
	color: #373737;
	background-color: #fff;
	border-color: #f0f0f0;
}

article#kontakt .form-submit button[type="reset"]
{
    float: right;
    background-color: #a00;
    border-color: #700000;
}

article#kontakt .form-submit button[type="reset"]:hover
{
	color: #373737;
	background-color: #fff;
	border-color: #f0f0f0;
}

article#kontakt .form-result .msg-error
{
    padding: 25px;
    color: #fff;
    background: #a00;
    border: solid #700000;
    border-width: 1px 1px 3px 1px;
}

article#kontakt .form-result .msg-info
{
    padding: 25px;
    color: #fff;
    background: #0fa24f;
    border: solid #00813d;
    border-width: 1px 1px 3px 1px;
}

article#kontakt ul
{
    margin: 25px 0;
    padding: 0;
    border: 10px solid #ececec;
    border-radius: 10px;
}

article#kontakt ul li
{
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    border-top: 10px solid #ececec;
}

article#kontakt ul li:nth-child(1)
{
    border-top: 0;
}

article#kontakt ul li:nth-child(1) i.fa
{
	vertical-align: 4px;
}

article#kontakt ul li a
{
    display: block;
    position: relative;
    height: 100px;
    line-height: 106px;
    padding-left: 120px;
    background: #fff;
    text-decoration: none;
    font-size: 150%;
    transition: color 0.25s linear, background-color 0.25s linear;
}

article#kontakt ul li a:hover
{
    background: #fbfbfb;
}

article#kontakt ul li a span.icon
{
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 100px;
    font-size: 200%;
    text-align: center;
}

article#kontakt ul li a span.description
{
	padding-left: 15px;
	font-size: 70%;
	vertical-align: 3px;
}

@media screen and (max-width: 950px)
{
	article#kontakt
	{
		padding: 70px 0;
	}
}

@media screen and (max-width: 640px)
{
    article#kontakt ul li a
    {
        height: 60px;
        line-height: 66px;
        padding-left: 60px;
        font-size: 100%;
    }

    article#kontakt ul li a span.icon
    {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
        height: 60px;
        font-size: 150%;
        text-align: center;
    }
}

@media screen and (max-width: 500px)
{
    article#kontakt .form-submit button[type="submit"],
    article#kontakt .form-submit button[type="reset"]
    {
        float: none;
        width: calc(100% - 2px);
    }

    article#kontakt .form-submit button[type="submit"]
    {
        margin-bottom: 20px;
    }
}

/* FOOTER */
footer
{
	padding: 100px 0;
}

footer p
{
	text-align: center;
	font-size: .8em;
}

footer p.operator
{
	font-size: .7em;
	color: #999;
}

@media screen and (max-width: 950px)
{
	footer
	{
		padding: 50px 0;
	}
}