@property --extra-orange {
  syntax: "<color>";
  inherits: false;
  initial-value: #f06f0a; /* #f58220 */
}

:root {
  --extra-font: "DM Sans", sans-serif;
}



#content img {
  background-color:#fff;
  -webkit-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.07);
  -box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.07);
  border: 0px solid #ebebeb;
  padding: 5px;
}

#content img.nahledovky {
  border: 1px solid #ebebeb;
  margin-right: 10px;
  margin-bottom: 10px;
  max-width: 333px;
} 


body {
  background-color:#FFF;
  font-family: var(--extra-font);
}


h1, h1.title {
  font-family: var(--extra-font);
  font-size:2.1em;
  text-transform:none;
}

h2 {
  font-size:1.6em;
  font-family: var(--extra-font);
}

h3 {
  font-size:1.4em;
  font-family: var(--extra-font);
}


#motto #motto-title{
  font-family: var(--extra-font);
  font-size: 3em;
  text-shadow: #000 0 0 5px,#000 0 0 5px,#000 0 0 5px;
}

#motto #motto-text{
  font-family: var(--extra-font);
  font-size: 1.5em;
  text-shadow: #000 0 0 5px,#000 0 0 5px,#000 0 0 5px;
}


a, .btn-link {color:var(--extra-orange);  transition:all 0.4s;}
a:hover, .btn-link:hover {color:#4C4848;}


#motive{  height: 220px;}



.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: var(--extra-orange);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: grey;
}


.navbar-default .navbar-toggle {
  background-color:var(--extra-orange);
}


.btn-primary {
  background-color:var(--extra-orange);
}


#topbar .btn-default{
  background-color:var(--extra-orange);
}