
/*
	-------------------
		Imports
	-------------------
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500|Open+Sans:400,600|Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

/*
	--------------------
	  Utility classes
	--------------------
*/
.footer .box1{

			width:100%;
}
.hide {
	display: none!important;
}

.show {
	display: block!important;
}

.ic {
	padding: 30px 12%;
}

.jc {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tr {
	text-align: right;
}

.tl {
	text-align: left;
}

.full {
	width: 100%;
	display: flex;
}

/*
	---------------------------
		Nastavení scrolbaru
	---------------------------
*/

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


/*
	-----------------
		Styling
	-----------------

*/

html,body {
	padding: 0;
	margin: 0;
	background: #fafafa;
	font-family: 'Titillium Web', sans-serif!important;
	overflow-x: hidden;	
}
/* -- začátek hlavičky -- */
header {

}
/*  blbne pak editace
header .nav-fix{
	float: left;
	width: 100%;
	position:  fixed;
	padding: 15px 0px;
	z-index: 999;
}
*/
header .navbar{
	background-color: transparent!important;
	float: right;
}


header .nav-link {
	color: white!important;
	font-size: 18px;
	position: relative;
}

/* -- Hover efekt v menu --  */
header .nav-link::before {
	position: absolute;
    content: "";
    width: 0px;
    top: 0;
    right: 0;
    height: 1px;
    background: white;
    transition: .5s ease;
}

header .nav-link::after {
	position: absolute;
    content: "";
    width: 0px;
    bottom: 0;
    left: 0;
    height: 1px;
    background: white;
    transition: .5s ease;
}

header .nav-link:hover::before{
	width: 100%;
}
header .nav-link:hover::after{
	width: 100%;
}
/* -- Hover efekt v menu --  */

header #logo {
    color: white;
    font-size: 28px !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.big{
    font-size: 28px !important;
	white-space:nowrap;
}
a.big:hover{
	text-decoration:none;
}
.span{
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	display:inline;
}
	

header #logo span {
	font-family: 'Permanent Marker', cursive;
	color: white;
}


header .background {
	width: 100%;
	height: 400px;
	background: url("http://produktovastranka.cz/tomasjelinek2/images/tj-bg.jpg");
	background-size: cover;
	background-position: right;
	display: flex;
	justify-content: center;
	align-items: center;
}

header .background .text{
	text-align: center;
	color: white;
}

header .background h1, header .background p{
	display: none;
}

/* -- Konec hlavičky -- */

/* -- Začátek mainu -- */
main {
	padding: 30px 0px;
}

main .row.ic h2 {
    width: 100%;
    text-align: center;
    position: relative;
    padding-bottom: 5px;
}

main .row.ic h2::after{
	position: absolute;
	content: "";
	width: 5%;
	height: 1px;
	bottom: 0px;
	left: 47.5%;
	background: black;
}

main #zivotopis .col-lg-4{
	order: 2;
}

main .row.ic p {
	width: 100%;
	text-align: center;
}

main .row.ic:nth-child(even) {
	background: #fafafa;
}



main .row.ic #sln {
    height: unset;
    
    margin-top: 15px;
    margin-bottom: 15px;
    width: 238px;
    height: 120px;
    margin-left: auto;
}

main .row.ic #bsk {

}

main .row.ic .img-fluid {
	margin: 0 auto;
}

main #dalsi_informace ul li a {
	width: 100%;
}

/* -- konec mainu -- */

/* -- začátek footeru -- */

footer {
	background: #222;
	color: white;
	padding: 30px 0px;
}

footer p{
	color: #ccc;
}

footer .col-lg-4:last-child{
	text-align: right;
}

.subfooter {
	background: #111;
	color: #ccc;
	padding: 10px 0px;
}

.subfooter a{
	color: white;
	text-decoration: none;
}



/* -- konec footeru -- */


/* -- responsivní zobrazení -- */

@media only screen and (max-width: 991px){


	#logo span {
		font-size: 20px;
	}

	a.nav-link {
		font-size: 15px;
	}

	#zivotopis .col-lg-4{
		display: flex;
    	margin-bottom: 20px;
    	margin-top: 20px;
	}

	main .row.ic #bsk{
	}

	footer .col-lg-4{
		text-align: center!important;
		margin-bottom: 15px;
		padding: 15px 0px;
		border-bottom: 1px #ccc dashed;
	}

	footer .col-lg-4:last-child{
		border-bottom: 0px;
	}
	footer .col-lg-4{
		margin-bottom: 1px
	}

}

@media only screen and (max-width: 768px){

	.navbar-toggler:not(:disabled):not(.disabled) {
		position: absolute;
    	top: -35px;
    	right: 0;
	}

	.navbar{
		width: 100%;
		padding-left: 0px;
	}

	.navbar-light .navbar-toggler{
		border: none;
		outline: none;
	}

	a.nav-link::before{
		position: unset;
	}

	a.nav-link::after{
		height: .8px;
	}

	.navbar-nav{
		padding-left: 15px!important;
		padding-right: 15px!important;
		box-sizing: border-box;
		border-top: 1.5px white solid;
		border-bottom: 1.5px white solid;
	}



	#logo {
		margin-top: 20px;
		justify-content: left!important;
		margin-left: 10px;
	}

	#logo span {
		font-size: 25px;
	}

}

@media only screen and (max-width: 540px){

	#logo {
		justify-content: flex-start!important;
	}

	#logo span {
		margin-left: 15px;
	}

	.subfooter .col-sm-6{
		width: 50%;
	}

	#zivotopis .col-lg-4{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#typek{
		max-width: 80%;
	}

	#bsk{
		width: 322px;
		height: 207px;	
	}

	#sln{
		width: 141px;
		height: 90px!important;
		max-width: unset!important;
		margin-left: auto!important;
	}

	header .background{
		background: url("http://produktovastranka.cz/tomasjelinek2/images/tj-bg-small.jpg");
		background-position: bottom center;
	}

}

@media only screen and (max-width: 480px){

	#typek{
		max-width: 80%;
		max-height: 60%;
	}

	#zivotopis .col-lg-4{
		order: 2;
	}
	#zivotopis .col-lg-8{
		order: 1;
	}

}