seznamovak-it/weby/it/css/main.css

@font-face {
	font-family: myFirstFont;
	src: url('../fonts/megrim2.ttf')  format('truetype');

}

* { box-sizing: border-box }

html { scroll-behavior: smooth }
body { font-family: 'Titillium Web', sans-serif }

.menu{
	text-align: center;
	font-family: myFirstFont;
	font-size: 50px;
}
.menu a {
	 color:inherit;
	 text-decoration: none;
}


.logo { display: none }

ul.leaf {
	list-style-image: url('../img/troj-modry-maly.png');
}

.menu-1, .logo, .logo-mob, .menu-2 {
	margin: auto;
	width: 90%
}
.logo-mob img{
	 width: 90%;
}

#header {
	text-align: center;
	/*   border-bottom: 6px solid grey;
	 border-bottom-style:inset;*/
}

hr.header{
	height: 12px;
	border: 0;
	box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
	width: 100%;
}

hr.footer{
	 border: 0;
	 height: 0;
	 box-shadow: 0 0 10px 1px black;
	 margin: 3em 0;
}
hr.footer:after { /* Not really supposed to work, but does */ content: "\00a0"; /* Prevent margin collapse */ }

.footer {
	text-align: center;
	font-size: 13px;
	line-height: 1;
}

/* Clear floats after the columns */

.row:after {
	content: "";
	display: table;
	clear: both;

}

.column {
	width: 100%;
	/*height: 300px;  Should be removed. Only for demonstration */
	padding: 1%;
	text-align: justify;

	 /*
	 top: 50%;
	 transform: translateY(-50%);*/

}
	 /*.column p {
	 padding-left: 10px;
	 padding-right: 10px;
}*/

.carusell {
	 /*  background: LightGreen;*/
	margin-top: 5px;

}


.title {
display: block;
	font-size: 30px;
	text-align: left;
	font-weight: 700;
}

.column-img {
	max-width: 100%;
	width: 100%;
	height: auto;
	text-align: center;
	 display: block;
	margin-left: auto;
	margin-right: auto;

}

p {
	text-align: justify;
}

.troj {
	width:25px;
}

h3 {
	margin-bottom: 0px;
}
.todo:before {
	content: "TODO";
}
.todo {
	/*background-color: yellow;*/
	color: red;
}


/* RESPONSIVITY */

@media screen and (max-width: 999px){
	.desktop-block {
		display: none;
	}
}
@media screen and (min-width: 1000px) {
	.container{
		  margin: 0 auto;
		  width: 80%;
		  max-width: 1000px;
	}
	.menu-1, .menu-2 {
		border-width: 0px;
		width: 7%;
		display: inline-block;
	}
	.logo {
	/* min-width: 200px;*/
	   border-width: 0px;
		width: 30%;
		display: inline-block;
	}
	.menu{
		text-align: center;
		font-family: myFirstFont;
		font-size: 20px;
	}
	.menu:hover a{
		font-weight:bold;
	}
	.menuspace{
		height: 105px;
	}

	/*offset kotvy*/
	:target:before {
		content: "";
		display: block;
		height: 120px;
		margin: -120px 0 0;
	}

	.menu-container{
		text-align: center;
		position: fixed;
		background-color: white;
		width: 100%;
		/*margin-left: -21%;*/
		margin-top: -10px;
		z-index: 100;
	}

	.logo img{
		width: 300px;
		margin-bottom: -15px;
	}

	.logo-mob {display: none;}

	.menu-1 {border-color: red}
	.logo {border-color: green}
	.menu-2 {border-color: blue}


	.column {
		float: left;
		width: 50%;
	}


	.normal-column {
		width: 46%;
		margin: 2%;
	}

	.column-big {
		float: left;
		width: 100%;
	}


	.title {
		display: block;
		text-align: right;
		font-weight: 700;
		text-transform:uppercase;
	}


	.profil-left {
		 clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
	}

	.profil-right {
		 clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
	}

	.row {
		 display: flex;
		/* flex-direction: column;*/
		align-items: center;
		/* justify-content: center;*/
		margin-bottom: 20px;
	}


	.mobile-block { display: none }
}