* {
margin: 0;
padding: 0;
border: 0;
}

@font-face {
font-family: 'Headlines';
src: url('special/fonts/Kalam-Bold.ttf') format("truetype");
}

@font-face {
font-family: 'Text';
src: url('special/fonts/Kalam-Regular.ttf') format("truetype");
}


/*---------- ŠABLONA ----------*/ 

html {
height: 100%;
min-height: 100%;
background: #F4F7F7;
background: -webkit-linear-gradient(#126FCB, #F4F7F7);
background: -o-linear-gradient(#126FCB, #F4F7F7);
background: -moz-linear-gradient(#126FCB, #F4F7F7);
background: linear-gradient(#126FCB, #F4F7F7);
background-repeat: no-repeat;
background-attachment: fixed;
scroll-behavior: smooth;
}

body {
height: 100%;
min-height: 100%;
background: url('textpattern/txp_img/img/grass-summer.png') repeat no-repeat bottom center fixed, url('textpattern/txp_img/img/tree-summer.png') no-repeat bottom left fixed;
}

#web {
width: 1100px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.94);
border-left: 3px solid #B7D2EB;
border-right: 3px solid #B7D2EB;
position: relative;
}

#head {
display: block;
width: 100%;
height: 280px;
background: url('textpattern/txp_img/img/sun.png') no-repeat right top, url('textpattern/txp_img/img/cloud.png') no-repeat right bottom, url('textpattern/txp_img/img/pencils.png') no-repeat left top;
text-decoration: none;
}

#cloud {
position: absolute;
top: 90px;
left: 978px;
width: 200px;
height: 110px;
background: url('textpattern/txp_img/img/cloud2.png') no-repeat center center;
z-index: -1;
}

#interface a {
position: absolute;
top: 93px;
right: -80px;
width: 75px;
height: 104px;
color: transparent;
cursor: default;
}

html>body {
height: auto;
}

#head-title {
display: block;
padding: 30px 0 0 90px;
font-family: Headlines;
color: #884444;
font-size: 3.7em;
font-weight: bold;
text-shadow: -2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF, -4px 0 #884444, 0 4px #884444, 4px 0 #884444, 0 -4px #884444;
}

#sun {
color: #FEF002;
text-shadow: -2px 0 #000, 0 2px #000, 2px 0 #000, 0 -2px #000;
}

#city {
display: block;
margin: -25px 0 0 425px;
}


/*---------- MENU ----------*/

#menu {
float: left;
width: 220px;
}

#menu ul {
list-style-type: none;
margin: 10px 0 40px 20px;
font-size: 1.4em;
}

#menu li {
padding-top: 5px;
}

#menu li .pasive, #menu li .active {
display: block;
width: 150px;
font-family: Headlines;
color: #804040;
font-weight: bold;
text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF, -2px 0 #804040, 0 2px #804040, 2px 0 #804040, 0 -2px #804040;
text-decoration: none;
transition-duration: 0.5s;
border-bottom: 1px dashed #B7D2EB;
}

#menu li .pasive {
padding: 0 38px 0 10px;
}

#menu li .active {
padding: 0 10px 0 38px;
}

#menu li a:hover {
padding: 0 10px 0 38px;
transition-duration: 0.5s;
}

@keyframes animation-li-start {
0% {padding: 0 38px 0 10px;}
100% {padding: 0 10px 0 38px;}
}

.load-transform {
animation: animation-li-start 0.5s linear;
}

@keyframes animation-li-end {
0% {padding: 0 10px 0 38px;}
100% {padding: 0 38px 0 10px;}
}

.transform {
animation: animation-li-end 0.5s linear;
}


/*---------- OBSAH ----------*/ 

@keyframes fade-in {
0% {opacity: 0;}
20% {opacity: 0;}
100% {opacity: 1;}
}

#content {
float: right;
width: 810px;
padding: 10px 35px 30px 0;
color: #535353;
font-family: Text;
font-size: 1.1em;
font-weight: normal;
animation: fade-in 0.8s linear;
}

#center {
margin: 0 auto;
width: 820px;
}

.article, .others {
margin: 0 auto;
margin-top: 10px;
margin-botom: 10px;
padding: 10px 30px 10px 30px;
text-align: left;
border: 1px solid #B7D2EB;
border-radius: 12px;
background: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease-in-out;
}

.article:hover, .others:hover {
background: #FFF;
}

.others {
margin-top: 10px;
margin-bottom: 20px;
padding: 30px 40px 10px 40px;
}

#content p {
margin: 1em 0 1em 0;
line-height: 170%;
}

#content ul , #content ol{
margin: 1em 3em 1em 5em;
clear: both;
}

h2 {
font-family: Headlines;
font-size: 1.8em;
color: #814141;
text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF, -2px 0 #7C3F3F, 0 2px #7C3F3F, 2px 0 #7C3F3F, 0 -2px #7C3F3F;
}

#head-preview {
display: inline-block;
margin: 0 0 10px 30px;
padding-left: 50px;
}

#content a {
color: #00592D;
text-shadow: -1px 0 #93D3A1, 0 1px #93D3A1;
background: transparent;
transition: all 0.2s ease-in-out;
}

#content a:hover {
text-shadow: -1px 0 #44A85A, 0 1px #44A85A, 1px 0 #93D3A1, 0 -1px #93D3A1, 0 0 5px #000;
}

.error-stat {
margin-top: 2em;
}

.error-stat, .error-mess {
text-align: center;
color: #FF0000;
font-weight: bold;
}

#content .listing {
float: left;
margin: 10px;
width: 380px;
height: 15.5em;
border: 1px solid #B7D2EB;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}

#content .listing-class {
float: left;
margin: 10px;
width: 380px;
height: 15.5em;
border: 1px solid #95CE98;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}

#content .listing-actual, #content .listing-actual-noclick {
margin: 10px;
width: 780px;
border: 1px solid #FF9B9B;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}

#content .listing a, #content .listing a:hover, #content .listing-actual a, #content .listing-actual a:hover, #content .listing-class a, #content .listing-class a:hover, #content .listing-actual-noclick a {
text-shadow: none;
text-decoration: none;
color: #814141;
}

#content .listing-actual-noclick a {
cursor: not-allowed;
}

#content .listing-actual-noclick:hover {
background: #FFF;
}

#content .listing:hover, #content .listing-actual:hover, #content .listing-class:hover {
background: #FFF;
transform: scale(1.04);
transition: all 0.3s ease-in-out;
}

.listing-head {
padding: 20px 25px 15px 25px;
border-radius: 10px;
background-image: linear-gradient(#F7FAFD, transparent);
}

#headline-view {
float: left;
margin: 5px 15px 0 0;
width: 70px;
height: 70px;
}

.listing h3, .listing-actual h3, .listing-class h3,  #content .listing-actual-noclick h3 {
font-family: Headlines;
font-size: 1.1em;
}

.listing-info, .listing-info-view {
font-size: 0.8em;
color: #814141;
}

.more-words {
font-size: 0.8em;
}

#content .listing-info-view a {
color: #664342;
text-decoration: none;
text-shadow: none;
}

#content .listing-info-view a:hover {
color: #664342;
text-shadow: 0 0 #664342, 0 1px #664342, 1px 0 #664342, 0 0 #664342;
}

.listing-info-view {
padding: 0 0 10px 0;
}

#content .listing p, #content .listing-actual p, #content .listing-class p,  #content .listing-actual-noclick p {
margin: 0 0 0 0;
padding: 0 24px 0 24px;
color: #535353;
line-height: 150%;
}

#content .listing-actual-noclick p {
color: #535353;
}

#content .listing-high p {
height: 8em;
}

#content .listing-low p {
height: 6.18em;
}

.listing-subscribe {
padding: 3px 24px 15px 24px;
text-align: right;
font-size: 0.8em;
color: #664342;
}

#backstep {
position: relative;
top: 15px;
margin-right: 35px;
text-align: right;
font-size: 0.8em;
font-weight: bold;
clear: both;
}

#backstep a {
padding: 0 0 0 10px;
text-shadow: none;
color: #656868;
transition: all 0.4s ease-in-out;
}

#backstep a:hover {
padding: 0 10px 0 0;
text-shadow: none;
color: #656868;
transition: all 0.4s ease-in-out;
}

#new-old {
padding-top: 10px;
text-align: center;
font-size: 0.9em;
font-weight: bold;
clear: both;
}

#new a, #old a {
color: #656868;
text-shadow: none;
transition: all 0.4s ease-in-out;
}

#new a {
padding: 0 10px 0 20px;
}

#old a {
padding: 0 20px 0 10px;
}

#new a:hover {
padding: 0 20px 0 10px;
}

#old a:hover {
padding: 0 10px 0 20px;
}

#new a:hover, #old a:hover {
text-shadow: none;
color: #656868;
transition: all 0.4s ease-in-out;
}

.flag {
background: url('textpattern/txp_img/img/flag.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.projects {
background: url('textpattern/txp_img/img/projects.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.activity {
background: url('textpattern/txp_img/img/activity.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.elephant {
background: url('textpattern/txp_img/img/elephant.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.elephant-class {
background: url('textpattern/txp_img/img/elephant-class.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.leon {
background: url('textpattern/txp_img/img/leon.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.leon-class {
background: url('textpattern/txp_img/img/leon-class.png') no-repeat right top, linear-gradient(#FCFDFE, transparent);
}

.bear {
background: url('textpattern/txp_img/img/bear.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.bear-class {
background: url('textpattern/txp_img/img/bear-class.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.food {
background: url('textpattern/txp_img/img/food.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.phone {
background: url('textpattern/txp_img/img/phone.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.team {
background: url('textpattern/txp_img/img/team.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.about {
background: url('textpattern/txp_img/img/about.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

.documents {
background: url('textpattern/txp_img/img/documents.png') no-repeat right top, linear-gradient(#FFF, transparent);
}

#page-contact iframe {
margin: 0 20px 20px 20px;
border: 1px solid #B7D2EB;
background: #FFF;
}

.menu {
margin: 0 0 20px 0;
}

.menu object {
border-bottom: 10px solid #474747;
}

.menu .menu-title {
padding: 0 20px 5px 20px;
font-weight: bold;
}

.fieldset-title {
display: inline-block;
padding: 0 5px 20px 40px;
font-family: Headlines;
font-size: 1.4em;
}

.others-title {
font-family: Headlines;
font-size: 1.4em;
}

#map-form iframe {
margin-left: 100px;
}

@keyframes mail-result {
0% {padding-left: 30px;}
20% {padding-left: 20px;}
40% {padding-left: 40px;}
60% {padding-left: 20px;}
80% {padding-left: 40px;}
100% {padding-left: 30px;}
}

#error-messages {
padding-left: 30px;
color: #B90000;
font-weight: bold;
animation: mail-result 0.8s linear;
}

#error-messages-res {
font-size: 1.1em;
}

@keyframes mail-success {
0% {padding: 15px 0 0 140px;}
20% {padding: 15px 0 0 130px;}
40% {padding: 15px 0 0 150px;}
60% {padding: 15px 0 0 130px;}
80% {padding: 15px 0 0 150px;}
100% {padding: 15px 0 0 140px;}
}

#success-send {
padding: 15px 0 0 140px;
color: #006600;
font-size: 1.1em;
font-weight: bold;
animation: mail-success 0.8s linear;
}

.red {
font-weight: normal;
font-size: 1.2em;
color: #B90000;
}

.article {
overflow: hidden;
}

.article img {
padding: 14px;
border: 1px solid #E5E5E5;
background: #FFF;
transition: all 0.3s ease-in-out;
}

.article doprava {
display: block;
text-align: right;
}

.article doprostřed {
display: block;
text-align: center;
}

.article obtéct-zprava {
float: left;
margin-right: 1em;
}

.article obtéct-zleva {
float: right;
margin-left: 1em;
}

.article table {
border: 2px solid #B7D2EB;
border-collapse: collapse;
}

.article table th, .article table td {
padding: 2px 10px 2px 10px;
border: 1px solid #B2B2B2;
font-size: 0.9em;
}

.article table th {
background: #FCFCFC;
}

.article table td {
background: #FFF;
color: #636367;
}

.alert-script {
position: absolute;
}

.article h1 {
padding: 1em 0 0 0;
font-family: Headlines;
font-size: 1.6em;
color: #814141;
clear: both;
}

.article h2 {
padding: 1em 0 0 0;
font-family: Headlines;
font-size: 1.4em;
color: #814141;
clear: both;
}

.article h3 {
padding: 1em 0 0 0;
font-family: Headlines;
font-size: 1.2em;
color: #814141;
clear: both;
}

.article h4 {
padding: 1em 0 0 0;
font-family: Headlines;
font-size: 1em;
color: #814141;
clear: both;
}

blockquote {
padding: 0 10px 0 60px;
font-weight: bold;
font-style: italic;
color: #634343;
border: 1px solid #C8DEF2;
border-radius: 12px;
background-color: rgba(213, 229, 246, 0.5);
background-image: url('textpattern/txp_img/img/blockquote.png');
background-repeat: no-repeat;
background-position: bottom 20% left;
clear: both;
}

cite {
font-family: Courier New;
color: #000;
}

/*---------- GALERIE ----------*/

#gallery {
margin: 0 auto;
margin-top: 15px;
display: inline-block;
text-align: center;
}

.article #gallery img {
padding: 0 0 0 0;
}

#gallery a, #gallery a:hover {
text-shadow: none;
font-size: 0.9em;
color: #804040;
}

.img-road {
display: inline-block;
margin: 6px 2px 6px 2px;
padding: 14px 14px 8px 14px;
background: #FFF;
border: 1px solid #FFF;
transition: all 0.2s;
}

.img-road:hover {
background: #FFF;
border: 1px solid #FFF;
transform: scale(1.04);
transition: all 0.2s;
}

.img-label {
display: block;
}

.box-counter {
padding: 0 1em 0 0.5em;
font-size: 0.9em;
font-weight: bold;
}

/*---------- KOMENTÁŘE ----------*/

@keyframes comment-result {
0% {padding: 10px 40px 0 0;}
20% {padding: 10px 40px 0 20px;}
40% {padding: 10px 60px 0 0;}
60% {padding: 10px 40px 0 20px;}
80% {padding: 10px 60px 0 0}
100% {padding: 10px 40px 0 0;}
}

.form-area p {
text-align: center;
padding: 10px 40px 0 0;
font-size: 1.1em;
font-weight: bold;
color: #006600;
animation: comment-result 0.7s linear;
}

.form-area #cpreview p {
text-align: left;
padding: 0 0 0 0;
font-size: 1em;
font-weight: normal;
color: #535353;
animation: none !important;
}

fieldset {
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
padding: 30px 0 30px 0;
text-align: left;
border: 1px solid #C8CACE;
border-radius: 12px;
background: rgba(255, 255, 255, 0.5);
}

#comments-form {
margin-top: 30px;
margin-bottom: 50px;
}

#comments-form table, #mailer-form table {
margin: 0 0 0 30px;
border-collapse: collapse;
}

#comments-form td, #mailer-form td {
padding: 3px 6px 3px 6px;
}

.comments-label {
text-align: right;
font-size: 0.9em;
font-weight: bold;
color: #814141;
}

.comments-input input, .comments-input textarea {
padding: 1px 6px 1px 6px;
font-size: 0.9em;
font-family: Text;
color: #535353;
border: 1px solid #B7D2EB;
border-radius: 6px;
}

.comments-input textarea {
padding: 10px 6px 10px 6px;
}

.comments-textarea {
width: 530px;
}

.comments-textarea textarea {
width: 100%;
}

#comments-form .button, .disabled, #mailer-form .button {
padding: 1px 6px 1px 6px;
font-family: Text;
}

#comments-form .button, #mailer-form .button {
color: #814141;
font-weight: bold;
border: 1px solid #B7D2EB;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

#comments-form #txpCommentSubmit, #mailer-form #txpMailerSubmit {
font-size: 1em;
color: #814141;
transition: all 0.2s ease-in-out;
}

#comments-form .button:hover, #comments-form #txpCommentSubmit:hover, #mailer-form .button:hover, #mailer-form #txpMailerSubmit:hover {
background: #FFF;
color: #961714;
transition: all 0.2s ease-in-out;
}

@keyframes comment-preview {
0% {padding: 10px 0 0 0;}
20% {padding: 10px 0 0 20px;}
40% {padding: 10px 20px 0 0;}
60% {padding: 10px 0 0 20px;}
80% {padding: 10px 20px 0 0;}
100% {padding: 10px 0 0 0;}
}

#cpreview {
padding: 10px 0 0 0;
animation: comment-preview 0.7s linear;
}

.comment-container {
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
width: 620px;
text-align: left;
padding-bottom: 32px;
background: url('textpattern/txp_img/img/clipping-top.png') no-repeat top center, url('textpattern/txp_img/img/clipping-bottom.png') no-repeat bottom center;
}

.comment-content {
padding: 0 30px 0 30px;
background: url('textpattern/txp_img/img/clipping-middle.png') repeat-y center top;
}

.comment-content p {
margin: 0;
line-height: 140%;
}

.comment-info {
display: inline-block;
margin: 0 25px 0 25px;
padding: 20px 5px 8px 5px;
font-size: 0.8em;
font-weight: bold;
color: #814141;
border-bottom: 1px solid #814141;
}

.comment-confirm, .comment-confirm-err {
padding-right: 10px;
text-align: center;
font-size: 1.1em;
font-weight: bold;
color: #7C3F3F;
}

#content .comment-content ul {
margin: 0 0 0 0;
padding: 10px 30px 10px 20px;
color: #B70000;
}

.comment-confirm-err {
color: #B70000;
}

.discussion {
text-align: center;
color: #814141;
font-family: Headlines; font-size: 1.5em;
text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF, -2px 0 #814141, 0 2px #814141, 2px 0 #814141, 0 -2px #814141;
}

.live {
text-align: center;
}

button {
margin: 20px 40px 0 0;
cursor: pointer;
background: none;
}

.live .schovat div {
display: none;
}

.live button span:before {
content: ".";
color: transparent;
text-shadow: none;
display: inline-block;
padding-left: 75px;
height: 40px;
background: url('textpattern/txp_img/img/book-close.png') no-repeat left center;
}

.live button span.skryt:before {
content: ".";
color: transparent;
text-shadow: none;
display: inline-block;
padding-left: 75px;
height: 40px;
background: url('textpattern/txp_img/img/book-open.png') no-repeat left center;
}

.live .schovat .skryt {
display: none;
}

.live .ukazat .zobrazit {
display: none;
}


/*---------- PATIČKA ----------*/ 

#foot {
clear: both;
padding: 17px 70px 23px 20px;
text-align: right;
font-family: Headlines;
font-size: 0.9em;
color: #656565;
border-top: 3px dashed #B7D2EB;
position: relative;
}

#foot a {
color: #656565;
text-decoration: none;
transition: all 0.2s ease-in-out;
}

#foot a:hover {
text-decoration: underline;
text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 -1px #999, 0 0 5px #999;
transition: all 0.2s ease-in-out;
}

.hidden {
display: none;
position: relative;
}

#ladybug {
position: absolute;
bottom: 0;
right: -65px;
width: 100px;
height: 137px;
background: url('textpattern/txp_img/img/ladybug.png') no-repeat center center;
}

#ladybug:hover {
background: url('textpattern/txp_img/img/ladybug2.png') no-repeat center center;
}

/*---------- OSTATNÍ ----------*/ 

.preload {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
z-index: -5;
}

#filter {
float: right;
margin: 10px 15px 0 0;
}

#filter form {
display: inline-block;
}

#filter select {
font-family: Text;
color: #314757;
font-size: 0.9em;
font-weight: normal;
border: 1px solid #B7D2EB;
border-radius: 4px;
background: #FBFCFE;
cursor: pointer;
}

#filter option {
padding: 0 5px 0 3px;
border: none;
}