html,body{
   font-family: "Open Sans", Arial;
   font-size: 14px;
   line-height: 1.5em;
}

#background{
   background-color: hsl(200,50%,40%);
   background-image: url('/img/bg.jpg');
   background-position: 50% 0;
   background-size: cover;
   position: fixed;
   top: 0px;
   left: 0;
   right: 0;
   bottom: 0px;
   z-index: 0;
}

#content{ position: relative; z-index: 10; padding: 20px 0; }

#fertility_graph,
#average_age_graph,
#mortality_graph,
#life_expectancy,
.generic_graph{ height: 500px; margin: 90px 70px; }

#ecoact_graph{ height: 1000px; margin: 0 50px; }

#topLine{
   background: rgba(0,0,0,0.2);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 20;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   color: #fff;
   text-align: center;
}

#topLine .menu a{
   display: inline-block;
   color: rgba(255,255,255,0.7);
   text-decoration: none;
   padding: 0.8em 1em 1em 1em;
   font-size: 1.4em;
   transition: 0.6s;
   font-weight: 300;
   text-decoration: uppercase;
   letter-spacing: 0.02em;
   text-align: left;
   vertical-align: middle;
   line-height: 1.3em;
}

#topLine .menu a:hover{
   color: #fff;
   opacity: 1;
   transition: 0.05s;
}

#topLine .menu a:hover img{
   color: #fff;
   opacity: 1;
   transition: 0s;
}

#topLine .menu a.active img{ opacity: 1; }
#topLine .menu a img{ opacity: 0.7; }
#topLine .menu a.active{ color: #fff; opacity: 1; }

.menu img{ max-height: 16px; }

.markdown{ color: rgba(255,255,255,0.8); max-width: 1000px; margin: 0 auto; padding: 0 40px; font-size: 17px; }
.markdown.big{ font-size: 24px; }
.markdown p{ margin: 1em 0; line-height: 1.8em; font-weight: 300; }
.markdown h1{ font-family: "Open Sans Condensed"; letter-spacing: 0.025em; color: rgba(255,255,255,0.95); font-size: 3em; line-height: 1.5em; font-weight: 300; }
.markdown h2{ font-family: "Open Sans Condensed"; color: rgba(255,255,255,0.95); margin: 1.5em 0 0 0; font-size: 1.5em; line-height: 1.5em; font-weight: 300; letter-spacing: 0.1em; }
.markdown h3{ font-family: "Open Sans Condensed"; color: rgba(255,255,255,0.8); margin: 1.5em 0 0 0; font-size: 1.1em; line-height: 1.5em; font-weight: 700; }
.markdown a{ color: #fff; text-decoration: none; font-weight: 600; }

.markdown h3 + p{ margin-top: 0; }

.markdown a:hover{ text-decoration: underline; }

.markdown ul{ list-style-type: disc; margin: 0 0 2em 2em; }
.markdown ul li{ line-height: 2rem; margin: 0.5em 0; }

#contentTopFix{ height: 1px; margin: 0 0 150px 0; }
#contentBotFix{ height: 1px; margin: 80px 0 0 0; }

#flow_window1{  }

.flow_window,
.pomocne_okienko{ border-radius: 2px; color: #fff; font-size: 0.8em; line-height: 1.75em; width: 180px; border: 1px solid rgba(255,255,255,0.3); text-align: center; }
.flow_window .h1{ font-family: "Open Sans Condensed"; font-size: 1.5em; font-weight: 700; background: rgba(255,255,255,0.1);
padding: 10px 20px; display: block; color: #fff; text-decoration: none; }
.flow_window .i{ padding: 10px 20px 15px 20px; }
.flow_window ul{ list-style-type: disc; }



.tooltip-help:hover{ cursor: help; }
.tooltip-data{ display: none; }
#tooltip-hovered{
   z-index: 10000;
   max-width: 500px;
   background: rgba(50,50,50,0.95);
   position: absolute;
   color: #fff;
   cursor: pointer;
   display: inline-block;
   font-size: 0.9em;
   font-weight: normal;
   margin: 0;
   outline: none;
   padding: 0.1em 1.5em;
   text-align: left;
   text-decoration: none;
   line-height: 1.75em;
   border-width: 0;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   -ms-border-radius: 2px;
   -o-border-radius: 2px;
   border-radius: 2px;
}

#tooltip-hovered p{ margin: 1em 0em; }
#tooltip-hovered ul{ list-style-type: disc; margin: 1em 0 1em 2em; }
#tooltip-hovered h2{ margin: 1em 0 0em 0; font-size: 1.2em; font-weight: 700; }
#tooltip-hovered h2 + p{ margin-top: 0.5em; }

.flow_mini_window{
   padding: 0.5em 0;
   text-transform: uppercase;
   width: 180px; color: rgba(255,255,255,0.8); text-align: center;
}

.flow_mini_window .h1{ font-weight: 800; -webkit-animation: bounce 2s ease infinite alternate; }

#flow_area{ position: relative; min-width: 920px; margin: 0 50px; }
.flow_entry{ position: absolute; }

.flow_join{ width: 2px; height: 50px; background: #fff; position: absolute; }


.pomocne_okienko{ height: 20px; border: 1px solid rgba(255,255,255,0.0); }

.flow_join:after{
   top: 100%;
   left: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(136, 183, 213, 0);
   border-top-color: #fff;
   border-width: 5px;
   margin-left: -5px;
}

.flow_join.noarrow:after,
.flow_join.rightarrow.noarrow:after,
.flow_join.leftarrow.noarrow:after{ display: none; }

.flow_join.rightarrow:after{
   left: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(136, 183, 213, 0);
   border-left-color: #fff;
   border-width: 5px;
   margin-top:  -5px;
}

.flow_join.leftarrow:after{
   left: 100%;
   top: 50%;
   border: solid transparent;
   content: " ";
   height: 0;
   width: 0;
   position: absolute;
   pointer-events: none;
   border-color: rgba(136, 183, 213, 0);
   border-left-color: #fff;
   border-width: 5px;
   margin-top:  -5px;

}

.flow_join.leftarrow{transform: rotate(180deg);}

/* ANIMATION */
@-webkit-keyframes bounce {
   25% { text-shadow:  -3px -2px 4px rgba(255,255,255,0.15); }
   50% { text-shadow:   3px 2px  4px rgba(255,255,255,0.15); }
   75% { text-shadow:  -3px 2px  4px rgba(255,255,255,0.15); }
   100% { text-shadow:  3px -2px 4px rgba(255,255,255,0.15); }
}

code{ border: 1px solid rgba(255,255,255,0.2); padding: 0.15em 0.4em; border-radius: 4px; background: rgba(0,0,0,0.1); }

.button{ display: inline-block; border: 2px solid white; font-size: 1.3rem; text-align: center; color: #fff;
border-radius: 4px; box-sizing: border-box; line-height: 1.5em; padding: 1em 1em; font-weight: 400; transition: 0.3s; vertical-align: top; }

.button:hover{
   background: #fff;
   transition: 0.05s;
   color: hsl(200,70%,40%);
   cursor: pointer;
   text-decoration: none;
}

.markdown a.button:hover{ text-decoration: none; }

.fb.button{ height: 95px; width: 95px; background-image: url('/img/fb.png'); background-size: 24px; background-repeat: no-repeat; background-position: 50%; }
.fb.button:hover{ background-image: url('/img/fb-hover.png'); }

.buttons{ font-size: 0; text-align: center; }
.three.buttons > .button{ width: 31%; margin: 1%; }
.two.buttons > .button{ width: 33%; margin: 2%; }
.any.buttons > .button{ margin: 2%; }
.any.home.buttons > .button:nth-child(1),
.any.home.buttons > .button:nth-child(3){ width: 260px; }

.author{ width: 25%; min-width: 300px; max-width: 500px; min-height: 500px; vertical-align: top; display: inline-block;  color: #fff; padding: 40px 50px; margin: 20px; box-sizing: border-box; overflow: hidden; }

.author h2{ font-size: 2.5em; line-height: 1.3em; text-align: center; font-family: "Open Sans Condensed";
font-weight: 700; height: 120px; }

.author p{ min-height: 300px; transition: 0.4s; line-height: 2em; }

.authors{ text-align: center; }

.author .txt{ position: relative; z-index: 50; }
.author .bg{ position: absolute; z-index: 10; height: 500px; width: 500px; margin: -40px 0 0 -50px; }

.author .bg > .blur,
.author .bg > .normal{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: 50%; transition: 0.4s; border: 1px solid rgba(255,255,255,0.7); }

.author .bg > .normal{ opacity: 0; }

.author.jozef .bg > .blur{ background-image: url('/img/autori/jozef-blur.jpg'); }
.author.frantisek .bg > .blur{ background-image: url('/img/autori/frantisek-blur.jpg'); }

.author.jozef .bg > .normal{ background-image: url('/img/autori/jozef.jpg'); }
.author.frantisek .bg > .normal{ background-image: url('/img/autori/frantisek.jpg'); }

.author:hover p{ opacity: 0; }
.author:hover .blur{ opacity: 0.3;  }
.author:hover .normal{ opacity: 1;  }
.author:hover h2{ text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.author:hover .button{ background: rgba(255,255,255,0.8); color: #000; }
.author:hover .button:hover{ background: #fff; }

.author p a{ color: #fff; text-decoration: none; font-weight: 800; }

.button{ text-decoration: none; }

.author.locked .blur{ background: rgba(0,0,0,0.8); }
.author.locked .normal{ background: rgba(0,0,0,0.5); }

#on_uz_vsetko_vie_uz_moze_ist_k_Dzurindovi_robit_do_kancelarie{ position: fixed; top: 48%; left: -55px; z-index: 1000;

     -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
       -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);

   color: #fff;
   text-decoration: none;

   background: rgba(0,0,0,0.2);

   padding: 40px 20px 20px 20px;

   border-radius: 3px;

   text-align: center;

   width: 100px;

   transition: 1s;

}

#on_uz_vsetko_vie_uz_moze_ist_k_Dzurindovi_robit_do_kancelarie .more{ display: none; }
#on_uz_vsetko_vie_uz_moze_ist_k_Dzurindovi_robit_do_kancelarie:hover .more{ display: block; }
#on_uz_vsetko_vie_uz_moze_ist_k_Dzurindovi_robit_do_kancelarie:hover .less{ display: none; }
#on_uz_vsetko_vie_uz_moze_ist_k_Dzurindovi_robit_do_kancelarie:hover{ left: -48px; transition: 0.2s; background: rgba(255,255,255,0.1); box-shadow: 0 2px 20px rgba(0,0,0,0.1); }

.sprava-list{ max-width: 1000px; margin: 2em auto; color: #fff; border: 1px solid rgba(255,255,255,0.03); border-radius: 3px;
padding: 1em; }
.sprava-list .when{ vertical-align: middle; display: inline-block; width: 120px; font-family: "Open Sans Condensed"; font-weight: 700; color: rgba(255,255,255,0.7); }
.sprava-list a{ vertical-align: middle; display: inline-block; color: #fff; text-decoration: none; font-size: 1.5em; font-weight: 300; color: rgba(255,255,255,0.9); transition: 0.4s; max-width: 600px; line-height: 1.5em; }

.sprava-list a:hover{ color: #fff; transition: 0.1s; text-decoration: underline; }

h1.center{ text-align: center; }

.markdown table{ margin: 1.5em 0; font-size: 0.9em; }

.markdown table thead th{ font-weight: 600; }

.markdown table thead th,
.markdown table tbody td{ padding: 0.75em 1em; }
.markdown table thead th{ background: rgba(0,0,0,0.1); }

.markdown table tbody td{ border: 1px solid rgba(255,255,255,0.05); }
.markdown table tbody tr:first-child td{ border-top: 0; }