/*
Theme Name: Spolek pro vitalitu
Author: Jan Holpuch
Author URI: http://holpuch.cz/
Description: Originální šablona pro Spolek pro vitalitu
Version: 1.0
Text Domain: spolekprovitalitu
*/

.zelena {
  color: #30A835;
  color: rgb(48,168,53);
}
.modra {
  color: #75B1E5;
  color: rgb(117,177,229);
}
.svetlemodra {
  color: #CAE1F5;
}

body {
  font-family: 'Prompt', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.35em;
  color: rgb(120,120,120);
  background-color: white;
}
#bg-index {
  position: fixed;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
  z-index: -20;
  background: #75B1E5 url("img/background.jpg") no-repeat center bottom;
  background-size: cover;
}
#bg-page {
  position: fixed;
  top:0;
  bottom:0;
  left: 0;
  right: 69%;
  z-index: -20;
  background: #75B1E5 url("img/background-blur.jpg") no-repeat left bottom;
  background-size: cover;
}





/*------------------------------------------------------------------------------
  OBECNÉ DEFINICE
------------------------------------------------------------------------------*/
section{
}
h1, h2, h3, h4, h5, h6, p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.15em;
  padding: 0;
  margin: 0;
  text-transform: none;
}
p{
  margin-bottom: 15px;
  line-height: 1.35em;
}
h1{
  color: #CAE1F5;
  font-size: 50px;
  font-weight: 700;
  margin-bottom: 45px;
}
h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 15px;
}
h3{ /* nadpisy příspěvků v archivu */
  color: #75B1E5;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
}
h3 a {color: #75B1E5;}
h3 a:hover, h3 a:focus, a:hover h3, a:focus h3 {color: #CAE1F5;}
h4{
  font-size: 18px;
  font-weight: 700;
}
h5 {
  font-weight: 500;
}
a {
  color: silver;
  text-decoration: none;
}
a:hover, a:focus {
  color: #75B1E5;
  text-decoration: none;
}



p.meta {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}
h5.meta {
  font-weight: 500;
  margin: -20px 0 0 0;
}



.media {
  margin-bottom: 60px;
  padding-bottom: 10px;
}
.media-left img {
  margin-right: 30px;
  height: auto;
}
.media-body {
  vertical-align: middle;
  border-bottom: 2px solid #CAE1F5;
  padding-bottom: 10px;
}



article.archiv {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 2px solid #CAE1F5;
}
article.archiv img {
  max-width: 100%;
  height: auto;
}

article.index {
  position: relative;
  min-height: 500px;
}
article.index img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}





img.alignright{
  float: right;
  margin-left: 30px;
  max-width: 50%;
  height: auto;
}
img.alignleft{
  float: left;
  margin-right: 30px;
  max-width: 50%;
  height: auto;
}
img.alignnone{
  max-width: 100%;
  height: auto;
}
@media(max-width:767px) {
  img.alignright, img.alignleft{
   float: none;
   display: block;
   margin: 10px auto;
  max-width: 100%;
  }
}
.dohromady { white-space: nowrap;}
hr.clear {
  clear: both;
  height: 0;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
}
hr.odsazeni-mobil, hr.odsazeni-tablet {
  height: 30px;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
}
@media (min-width: 992px) {
  hr.odsazeni-tablet { display: none;}
}
@media (min-width: 768px) {
  hr.odsazeni-mobil { display: none;}
}



/*------------------------------------------------------------------------------
  NAVIGACE
------------------------------------------------------------------------------*/
.navbar {
  margin: 0;
  border: none;
}
.navbar-header {
  background-color: #30A835;
  margin: 0 -15px;
  padding: 0;
}
.navbar-collapse {
  padding: 0;
  border: none;
  max-height: none;
}
.navbar-nav {
  margin: 0;
}

/* -- odkazy -- */
.navbar-nav .fa{
  font-size: 1.5em;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 2em;
}
.navbar-nav li span{
  display: table-cell;
  vertical-align: middle;
  padding-left: 25px;
}
.navbar-nav > li > a {
  line-height: 1.25em;
  letter-spacing: 0px;
  padding: 0 0 0 15px;
  text-transform: none;
	text-shadow: none;
}
.navbar-nav > li > a,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:hover {
  color: white;
  background-color: transparent;
}
.navbar-nav > li > a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: rgba(0,0,0,.6);
}
.navbar-nav > li > a:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -webkit-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    background-color: #30A835;
}
.navbar-nav > li > a:hover:after,
.navbar-nav > li > a.active:after {
    width: 100%;
}
.navbar-nav > li.current-menu-item > a:before,
.navbar-nav > li.current_page_parent > a:before {
  background-color: rgba(48,168,53,.65);
}

/* -- hamburger menu -- */
.navbar-brand {
  height: inherit;
  padding: 20px 30px;
}
.navbar-toggle {
  border: none;
  border-radius: 6px;
  margin: 30px;
  padding: 12px 10px;
}
.navbar-toggle:hover {
    background-color: rgba(255,255,255,.2);
}
.navbar-toggle .icon-bar {
    background-color: white;
}



/* vertikálmí menu - tablety */ 
@media (min-width: 768px) {
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
    max-width: 350px;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li:last-child {
    margin-bottom: 0;
  }
}





/*------------------------------------------------------------------------------
  VYHLEDÁVAČ
------------------------------------------------------------------------------*/
.search-form {
	position: relative;
  max-width: 240px;
}

input[type="search"].search-field {
	width: -webkit-calc(100% - 42px);
	width: calc(100% - 42px);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.search-submit {
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 40px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #30A835;
  border-color: #30A835;
}
.search-submit:hover, .search-submit:focus {
  background-color: #CAE1F5;
  border-color: #CAE1F5;
}
.search-submit:before {
  content: "\f002";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}





/*------------------------------------------------------------------------------
  STRÁNKOVÁNÍ
------------------------------------------------------------------------------*/
#strankovani{
  padding-top: 60px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  display: block;
}
#strankovani a {
  padding: 5px 12px;
  display: inline-block !important; 
}
#strankovani a:hover {
  color: white !important;
  background-color: #CAE1F5;
}
#strankovani .current {
  padding: 5px 12px;
  color: white;
  background-color: #30A835;
  display: inline-block;
}
#strankovani .prev:before, #strankovani .next:after {
  font-family: 'FontAwesome';
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#strankovani .prev:before {
  content: "\f060";
  padding-right: 10px;
}
#strankovani .next:after {
  content: "\f061";
  padding-left: 10px;
}





/*------------------------------------------------------------------------------
  HLAVIČKA
------------------------------------------------------------------------------*/
#hlavicka {
  text-align: right;
}
#logo {
  padding: 40px 15px 30px 45px;
  display: inline-block;
  border: 1px dotted white;
  border-top: none;
  position: relative;
  background: #30A835 url("img/logo-back.png") no-repeat right bottom;
}
#logo:after {
  position: absolute;
  bottom: 15px;
  right: 10px;
  z-index: -1;
  height: 20%;
  max-height: 100px;
  max-width: 460px;
  width: 60%;
  content: "";
  opacity: 0.7;
  box-shadow: 0 17px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
}





/*------------------------------------------------------------------------------
  TĚLO
------------------------------------------------------------------------------*/
#telo {
  padding-top: 0;
  padding-bottom: 30px;
}
@media(max-width:767px) {
  #telo {
    padding-top: 0;
  }
}





/*------------------------------------------------------------------------------
  OBSAH
------------------------------------------------------------------------------*/
#obsah {
  position: relative;
  min-height: 1000px;
}
.motto {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.motto h1{
  color: white;
  font-size: 60px;
  margin: 0;
}
.motto h2 {
  color: white;
  font-size: 22px;
  font-weight: 100;
  margin-bottom: 1em;
}
.motto img {
  margin: 0 auto;
}





/*------------------------------------------------------------------------------
  PAGE
------------------------------------------------------------------------------*/
#page {}





/*------------------------------------------------------------------------------
  KONTAKT
------------------------------------------------------------------------------*/
#kontakt {
  padding-bottom: 0;
}
.gmap{
  height: 350px;
  width: 100%;
  margin-top: 70px;
  border-top: 1px solid rgb(220,220,220);
}





/*------------------------------------------------------------------------------
  PATIČKA
------------------------------------------------------------------------------*/
#paticka {
  color: white;
  background-color: rgba(0,0,0,.55);
  padding-top: 30px;
  padding-bottom: 60px;
}
#paticka h3{
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  color: inherit;
  margin-top: 60px;
}
#paticka p{
  font-size: 14px;
}
#paticka ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
#paticka li{
  font-size: 14px;
  padding: 10px 0;
  border-top: 1px dotted gray;
}
#paticka li:first-child{
  padding-top: 0;
  border-top: none;
}
#paticka a{
  color: rgb(220,220,220);
}
#paticka b{
  font-weight: 500;
}





/*------------------------------------------------------------------------------
  COPYRIGHT
------------------------------------------------------------------------------*/
#copyright {
  color: white ;
  background-color: black;
  border-top: 1px dotted white;
}
#copyright p{
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 15px 0;
  margin: 0;
}
#copyright a{
  color: rgb(220,220,220);
}










/*------------------------------------------------------------------------------
  RESPONSIVE DESIGN
------------------------------------------------------------------------------*/

/* -- big desktop -- */
@media(min-width:1440px) {
  #hlavicka {padding-right: 70px;}
  #obsah {padding-right: 25px;}
  #logo {max-width: 250px;}

  .sidebar-nav {padding-left: 70px;}
  .navbar-nav .fa{height: 65px;}
  .navbar-nav > li > a {font-size: 18px;}
  .navbar-nav > li {margin-bottom: 10px;}

  .motto h1 {font-size: 60px;}
  .motto h2 {font-size: 40px;}
}



/* -- medium desktop desktop -- */
@media(max-width:1439px) {
  #hlavicka {padding-right: 40px;}
  #obsah {padding-right: 25px;}
  #logo {max-width: 220px;}

  .sidebar-nav {padding-left: 40px;}
  .navbar-nav .fa{height: 55px;}
  .navbar-nav > li > a {font-size: 16px;}
  .navbar-nav > li {margin-bottom: 7px;}

  .motto h1 {font-size: 50px;}
  .motto h2 {font-size: 35px;}
  .motto img {width: 450px;}

  #bg-page {right: 67%;}
}



/* -- small desktop -- */
@media(max-width:1199px) {
  #hlavicka {padding-right: 25px;}
  #obsah {padding-right: 25px;}
  #logo {max-width: 190px;}

  .sidebar-nav {padding-left: 25px;}
  .navbar-nav .fa{height: 55px;}
  .navbar-nav > li > a {font-size: 16px;}
  .navbar-nav > li {margin-bottom: 5px;}

  h1{ font-size: 40px;}
  .media-left img {width: 90px;}
  .media { border-bottom: 2px solid #CAE1F5;}
  .media-body { border-bottom: none;}
}



/* -- tablety -- */
@media(max-width:991px) {
  .sidebar-nav {padding-left: 15px;}
  .navbar-nav .fa{height: 50px;}
  .navbar-nav > li > a {font-size: 14px;}
  .navbar-nav > li {margin-bottom: 5px;}

  .motto h1 {font-size: 45px;}
  .motto h2 {font-size: 30px;}
  .motto img {width: 375px;}

  h1{ font-size: 35px;}
  h3{ font-size: 22px;}
}



/* -- smartphony -- */
@media(max-width:767px) {
  #obsah {padding-right: 0;}
  #page {
    margin: 30px 15px 0 15px;
    padding: 25px;
    background-color: white;
  }

  .navbar-collapse {margin: 0 -15px;}
  .navbar-nav .fa{height: 50px; padding-left: 20px;}
  .navbar-nav > li > a {border-bottom: 1px dotted gray;}
  .navbar-nav > li {margin-bottom: 0;}

  .motto h1 {font-size: 40px;}
  .motto h2 {font-size: 28px;}
  .motto img {width: 350px;}

  #bg-index {
    background: #75B1E5 url("img/background_s.jpg") no-repeat center bottom;
    background-size: cover;
   }
  #bg-page {right: 0;}

  h1{ font-size: 40px; text-align: center;}
  .media h1{ font-size: 26px; text-align: inherit;}
  h5.meta {font-size: 14px;}
  .media-left img { margin-right: 10px;}
  article.index {
    min-height: inherit;
    margin-bottom: 50px;
  }
  #copyright p {padding: 30px 0;}
}



/* -- mobily -- */
@media(max-width:479px) {
  .motto h1 {font-size: 30px;}
  .motto h2 {font-size: 22px;}
  .motto img {width: 275px;}
}