@charset "UTF-8";
/* CSS Document */

body {
    /*font-family: 'Raleway';*/
	background: rgb(75, 41, 10);
}
h1,h2,h3,h4,p,ul,ol,li,body,menu {
	margin: 0;
	padding: 0;
}
/*.clearfix:after, .clearfix:before {
    content: "";
    display: block;
    clear: both;
}
*, *:after, *:before {
    box-sizing: border-box;
}*/
a {
    transition: all 0.3s ease-out;
}
a:hover { 
    transition: all 0.3s ease-out;
}
.container {
    margin: auto;
	width: 1000px;
	/*max-width: 90%;*/
}
/*@media screen and (max-width: 880px) {
.container {}
}*/
@media screen and (max-width: 420px) {
.container {width: 420px; max-width: 100%}
}
@media screen and (max-width: 720px) {
.container {width: 720px; max-width: 100%}
}
@media screen and (max-width: 1000px) {
.container {width: 1000px; max-width: 100%}
}
/*HEADER*/
.pozadi-spiraly {
	width: 100%;
    height: 450px;
	background: url(../images/spiraly4.jpg) bottom no-repeat;
    background-size: contain;
}
@media screen and (max-width: 359px) {
.pozadi-spiraly {max-height: 340px; background-size: contain; background-position: bottom;}
}
@media screen and (min-width: 360px) {
.pozadi-spiraly {max-height: 360px; background-size: contain; background-position: bottom;}
}
@media screen and (min-width: 420px) {
.pozadi-spiraly {max-height: 420px; background-size: contain; background-position: bottom;}
}
@media screen and (min-width: 850px) {
.pozadi-spiraly {max-height: 500px; background-size: contain; background-position: bottom;}
}
.topline {
	line-height: 40px;
	text-align: left;
	color: rgb(100, 153, 21);
	font-family: 'Krub';
	font-size: 1.9rem;
	font-weight: 200;
	letter-spacing: 3px;
	padding: 40px 0 0 50px;
}
.vinklarkova {
    /*line-height: 100px;*/
	height: 70px;
	padding: 30px 0 0 50px;
	text-align: left;
	color: rgb(255, 126, 41);
	font-family: 'Krub';
	font-weight: 300;
	font-size: 1.6rem;
	letter-spacing: 1px;
}
@media screen and (max-width: 550px) {
.topline {font-size: 1.6rem; text-align: center; padding: 7% 5% 0 5%;}
.vinklarkova {font-size: 1.3rem; text-align: center; padding: 5% 5% 0 5%;}
}
@media screen and (min-width: 551px) {
.topline {font-size: 1.7rem; text-align: left; padding: 50px 5% 0 5%;}
.vinklarkova {font-size: 1.4rem; text-align: left; padding: 30px 5% 0 5%;}
}
.polozky-menu {
	display: grid;
	grid-template-columns: repeat(6, auto);
	grid-template-rows: 60px;
	grid-gap: 1px;
	grid-template-areas:
		"uvod sluzby objednani cenik profil kontakty";
    background: rgb(75, 41, 9);
    text-align: center;
	list-style-type: none;
	box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 460px) {
.polozky-menu {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: repeat(6, 50px);
	grid-gap: 1px;
	grid-template-areas:
		"uvod"
		"sluzby"
		"objednani"
		"cenik"
		"profil"
		"kontakty";
}
}
@media screen and (min-width: 461px) {
.polozky-menu {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(2, 60px);
	grid-gap: 1px;
	grid-template-areas:
		"uvod sluzby objednani"
		"cenik profil kontakty";
}
}
@media screen and (min-width: 800px) {
.polozky-menu {
	display: grid;
	grid-template-columns: repeat(6, auto);
	grid-template-rows: 60px;
	grid-gap: 1px;
	grid-template-areas:
		"uvod sluzby objednani cenik profil kontakty";
    background: rgb(75, 41, 9);
    text-align: center;
	list-style-type: none;
	box-shadow: 0 0 80px rgba(0, 0, 0, 0.5);
}
}
.polozky-menu a {
    font-family: 'Krub';
	font-size: 17px;
	font-weight: 500;
	color: #3b2605;
    text-decoration: none;
	letter-spacing: 1px;
	line-height: 60px;
	background: rgb(236, 185, 0);
}
@media screen and (max-width: 460px) {
.polozky-menu a {
		line-height: 50px;}
}
.polozky-menu a:hover {
	background: rgb(247, 207, 61);
	text-decoration: underline;
	text-underline-position: under;
	text-decoration-color: #3b2605;
}
.polozky-menu a.b {
	background: rgb(247, 207, 61);
	text-decoration: none;
	text-underline-position: under;
	text-decoration-color: #3b2605;
}
/*.polozky-menu a.b::before {
	background-image: linear-gradient(to left,#ff8a00,#da1b60);
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 5px;
}
*/
/*SECTION*/
.container800 {
    margin: auto;
	width: 800px;
	margin-top: 70px;
}
@media screen and (max-width: 1000px) {
.container800 {width: 800px; max-width: 85%; margin-top: 40px;}
}
.clanek {
	background: rgb(255, 126, 41);
	border-top: 3px solid rgb(219, 88, 0, 0.5);
	text-align: left;
	padding-bottom: 50px;
	overflow: auto;
}
@media screen and (max-width: 420px) {
.clanek {border-top: 10px solid rgb(219, 88, 0, 0.5)}
}
.clanek h3 {
	font-family: 'Raleway';
	font-size: 26px;
	font-weight: 500;
	color: #3b2605;
	padding: 10px 0;
}
.linka {
    background: #3b2605;
    height: 1px;
    margin-bottom: 25px;
}
.clanek h4 {
	font-family: 'Raleway';
	font-size: 22px;
	font-weight: 700;
	color: #3b2605;
	padding: 10px 0;
}
.clanek p {
	font-family: 'Raleway';
	font-size: 18px;
	font-weight: 400;
	color: #3b2605;
	padding: 8px 0;
	text-align: justify;
	line-height: 27px;
}
/*Cenik page*/
.clanek ul {
	padding: 0 0 20px 20px;
}
.clanek li {
	font-family: 'Raleway';
	font-size: 18px;
	font-weight: 400;
	color: #3b2605;
	padding: 3px 0;
	text-align: left;
	line-height: 27px;
	list-style-type: disc;
}
.clanek div.cenik {
	font-family: 'Krub';
	font-size: 20px;
	font-weight: 400;
	color: #3b2605;
	line-height: 35px;
	min-width: 80%;
	max-width: 80%;
	margin: 10px 0;
}
.clanek table {
	font-family: 'Krub';
	font-size: 18px;
	font-weight: 400;
	color: #3b2605;
	margin: 0 0 30px 0;
	table-layout: fixed;
	border-spacing: 5px;
	border-collapse: collapse;
	min-width: 80%;
	max-width: 80%;
}
@media screen and (max-width: 760px) {
.clanek table { min-width: 100%; max-width: 100%;}
}
.clanek table caption {
	font-family: 'Krub';
	font-size: 18px;
	font-weight: 700;
	text-align: left;
	padding: 0 0 8px 3px;
}
.clanek table tr td {
	border: 1px solid #3b2605;
	padding: 7px;
}
.clanek table tr td.left {
	text-align: left;
	background-color: #7b4313;
	color: #f88b43;
}
.clanek table tr td.right {
	text-align: right;
	width: 80px;
	background-color: #ecb900;
}
table.cenik-psycho tr td.left {
	background-color: #ecb900;
	color: #3b2605;
}
/*Kontakty page*/
.kontakty-celek {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 120px 180px;
	grid-template-areas:
		"telefon pracoviste"
		"pracovni-doba dostupnost";
    text-align: center;
}
@media screen and (max-width: 680px) {
.kontakty-celek {
	display: grid;
	grid-template-columns: 80%;
	grid-template-rows: repeat(4, auto);
	grid-template-areas:
		"telefon"
		"pracovni-doba"
		"pracoviste"
		"dostupnost";
}
.telefon {grid-area: telefon; padding-bottom: 15px;}
.pracovni-doba {grid-area: pracovni-doba; padding-bottom: 15px;}
.pracoviste {grid-area: pracoviste; padding-bottom: 15px;}
.dostupnost {grid-area: dostupnost; padding-bottom: 25px;}
}
p.ic {
	font-family: 'Krub';
	padding-bottom: 20px;
}
.kontakty-celek p {
	font-family: 'Krub';
	text-align: left;
	padding: 0 0 3px 0;
}
.kontakty-celek p.b {
	padding: 0 0 0 32px;
}
.telefon p {
	padding: 2px 0;
	font-weight: 700;
}
.telefon p a {
	color: #253a7a;
	font-weight: 400;
}
.kontakty-celek span {
	width: 80px;
	display: inline-block;
	padding-left: 32px;
}
.kontakty-celek i {
	padding-right: 10px;
	font-size: 22px;
	color: #8a4211;
}
.dostupnost p {
	font-size: 16px;
	line-height: 23px;
	text-align: left;
}
.mapa {
	max-width: 100%;
	height: 320px;
	border: 5px solid rgba(75, 41, 10, 0.5);
}

/*FOOTER*/
.paticka {
	background: rgb(75, 41, 10);
	color: rgb(255, 126, 41);
	font-family: 'Krub';
	font-weight: 400;
	font-size: 18px;
	display: grid;
	grid-template-columns: 1fr 180px 1fr;
	grid-template-rows: 100px 100px 50px 100px;
	grid-template-areas:
		"kontakt kontakt kontakt"
		"adresa mobil email"
		"mapa volat psat"
		"copy copy copy"
}
@media screen and (max-width: 630px) {
.paticka {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 60px 90px 50px 70px 50px 70px 60px;
	grid-template-areas:
		"kontakt"
		"adresa"
		"mapa"
		"mobil"
		"volat"
		"email"
		"psat"
		"copy";
	overflow: scroll;}
}
@media screen and (max-width: 600px) {
div.copy {
	display: none;}
}
.paticka h4 {
	grid-area: kontakt;
	font-family: 'Krub';
	font-weight: 300;
	font-size: 22px;
	text-align: center;
	letter-spacing: 5px;
	line-height: 100px;
	/*padding-top: 0px;*/
}
@media screen and (max-width: 600px) {
.paticka h4 {
	grid-area: kontakt;
	line-height: 60px;
}
}
.paticka a {
	color: rgb(100, 153, 21);
	text-decoration: underline;
	text-underline-position: under;
	text-align: center;
}
.paticka a:hover {
	color: rgb(190, 238, 118);
}
.adresa {
	grid-area: adresa;
	text-align: center;
}
.paticka p {
	padding-bottom: 10px;
}
.mobil {
	grid-area: mobil;
	text-align: center;
}
.email {
	grid-area: email;
	text-align: center;
}
.copy {
	grid-area: copy;
	border-top: 1px solid rgba(219, 88, 0, 0.3);
	text-align: center;
	font-size: 15px;
	padding-top: 10px;
}
.paticka .fas {
	font-size: 20px;
	padding-bottom: 10px;
	padding-right: 10px;
}