body {
padding: 0;
margin: 0;
font: 20px/1.5 'Lora', serif;
color: #000;
background-color: #fff;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora1-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora1-italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora1-bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora1-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}


@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-medium.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto-bolditalic.woff') format('woff');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'Icomoon';
src: url('../fonts/icomoon.woff') format('woff');
font-weight: normal;
font-style: normal;
}



a {
text-decoration: none;
outline: none;
color: #ca0202;
}
a:hover,
a:focus {
color: #000;
}

a.photo:hover {
background-color: #00AAD5;
}
a.photo {
display: inline-block;
margin: 20px 0;
padding: 10px 18px;
font: 500 14px/14px 'Roboto', sans-serif;
text-transform: uppercase;
color: #fff;
background-color: #ca0202;
border-radius: 3px;
}
img {
display: block;
border: none;
}
.clear:after {
content: "";
display: block;
height: 0;
vidibility: hidden;
clear: both;
}
.lining {
padding: 40px 20px;
}


#hero {
width: 100%;
height: 460px;
background: #f4f4f4 url(../img/zaglavlje09.jpg) no-repeat center center;
background-size: cover;
}
#hero .lining {
position: relative;
max-width: 728px;
padding: 0 20px;
height: 460px;
margin: 0 auto;
}
#logo {
position: absolute;
width: 85px;
/*height: 42px;*/
left: 20px;
top: -62px;
}
#logo:before {
content: "\e600";
font: normal 42px/42px "Icomoon", sans-serif;
color: #ca0202;
}

#head {
position: absolute;
left: 0;
bottom: 0;
width: 768px;
padding: 20px 0;
background: url(../img/bg_wh75.png);
}
h1 {
font: 400 46px/1.5 'Lora', serif;
margin: 0;
padding: 0 20px 5px;
}
.subtitle {
font: 25px/normal 'Lora', serif;
margin: 0;
padding: 0 20px 10px;
}
.desc {
font: 20px/normal 'Lora', serif;
margin: 0;
padding: 0 20px;
}
.desc span {
display: block;
}




/***  navmain  ***/

#navmain {
background-color: #fff;
}
#nav {
list-style: none;
max-width: 768px;
margin: 0 auto;
padding: 0;
}
#nav li {
display: block;
float: left;
padding: 20px;
font: 500 18px/18px 'Roboto', sans-serif;
text-transform: uppercase;
}
#nav a {
color: #000;
}
#nav a:hover {
color: #ca0202;
}

/***  end navmain  ***/






#outerwrap {
position: relative;
width: 100%;
min-height: 500px;
background-color: #fff;
}
#contentwrap {
width: 768px;
margin: 0 auto;
}
h2 {
margin: 0 0 20px;
font: 400 36px/normal 'Lora', serif;
}
h3 {
margin: 0 0 20px;
font: 400 26px/normal 'Lora', serif;
}
.section {
margin: 0 0 20px;
font: 500 15px/15px 'Roboto', sans-serif;
text-transform: uppercase;
color: #666;
}
.section:before {
content: "\e0e6";
font: normal 15px/15px "Icomoon", sans-serif;
padding-right: 4px;
}
.author {
font: bold 18px/normal 'Lora', serif;
}
.participants {
display: table;
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.entry {
display: table-row;
}
.name, .title {
display: table-cell;
vertical-align: top;
border-bottom: 1px dotted #999;}
.name {
padding: 10px 10px 10px 0;
}
.title {
padding: 10px 0 10px 10px;
}
.title a {
display: block;
padding-left: 30px;
color: #000;
}
.title a:before {
display: block;
float: left;
margin-left: -30px;
content: "\e0e6";
font: normal 24px/24px "Icomoon", sans-serif;
color: #ca0202;
}
.title a:hover {
color: #ca0202;
}

.imageset_left {
float: left;
margin: 8px 30px 10px 0;
padding: 9px;
border: 1px solid #dadada;
}
.imageset_left img {
width: 100%;
}


#timetable {
padding-bottom: 40px;
}
#timetable h3 {
margin: 30px 0;
padding: 6px 12px;
font: 700 20px/normal 'Roboto', sans-serif;
font-variant: small-caps;
color: #fff;
background-color: #0084D6;
}
#timetable h4 {
margin: 30px 0;
font: 700 20px/normal 'Roboto', sans-serif;
font-variant: small-caps;
color: #0084D6;
}
#timetable p {
margin: 0;
padding: 10px 0 10px 140px;
border-bottom: 1px dotted #999;
}
#timetable p.first {
border-top: 1px dotted #999;
}
#timetable p.outdent {
padding: 10px 0 10px 0;
border-bottom: 1px dotted #999;
}
#timetable p.outdent.note {
margin: 20px 0;
padding: 0;
border-bottom: none;
}
#timetable b {
display: block;
width: 130px;
float: left;
margin-left: -140px;
font-size: 18px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}



#footerwrap {
width: 100%;
height: 360px;
background: #f4f4f4 url(../img/podnozje.jpg) no-repeat center center;
background-size: cover;
}
#footer {
width: 768px;
margin: 0 auto;
background: url(../img/bg_wh85.png);
}
#footer h4 {
margin: 0;
padding: 30px 20px 0;
font: 400 23px/23px 'Lora', serif;
}
#footer .listing {
display: table;
width: 100%;
font-size: 17px;
}
#footer .col {
display: table-cell;
width: 50%;
padding: 20px;
}
#footer p {
margin: 0;
}
#footer a {
color: #000;
}
#footer a:hover {
color: #ca0202;
}

#bottomlink {
display: block;
padding: 10px 20px 35px;
font: 500 15px/15px 'Roboto', sans-serif;
text-transform: uppercase;
}
#bottomlink:before {
content: "\e204";
font: normal 15px/15px "Icomoon", sans-serif;
padding-right: 3px;
}




/*** page navigation ***/

.pagenav {
margin: 40px 0;
padding-top: 20px;
border-top: 1px dotted #999;
}
.pagenav a {
display: block;
float: left;
margin-right: 30px;
font: normal 28px/28px "Icomoon", sans-serif;
color: #444;
}
.pagenav a:hover {
color: #ca0202;
}
.pagenav a.prev:before {
content: "\e606";
}
.pagenav a.next:before {
content: "\e607";
}





/******* to top *******/
.fixed {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
}
#to_top {
display: block;
text-align: center;
color: #FFCC00;
}
#to_top:hover {
color: #0CF;
}

#to_top:before {
content: "\f139";
font: normal 34px/34px "Icomoon", sans-serif;
}
/******* end to top *******/










/************* od 1024 px naniže *************/

@media screen and (max-width: 1025px), screen and (max-height: 900px) {

#hero, #hero .lining {
height: 360px;
}

}


/************* od 768 px naniže *************/

@media screen and (max-width: 768px), screen and (max-height: 600px) {

#hero, #hero .lining {
height: 280px;
}
#head, #contentwrap, #footer {
width: 100%;
}
h1 {
font: 400 38px/normal 'Lora', serif;
}
.subtitle {
font: 22px/normal 'Lora', serif;
}
.desc {
font: 17px/normal 'Lora', serif;
}


}

/************* od 568 px naniže *************/

@media screen and (max-width: 569px) {
body {
font: 15px/23px 'Lora', serif;
}
#hero, #hero .lining {
height: 380px;
}
#head {
color: #fff;
background: #1459A5 url(none);
}
#logo {
top: -82px;
text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.75);}

#logo:before {
font: normal 62px/62px "Icomoon", sans-serif;
color: #fff;
}

h1 {
font: 400 30px/normal 'Lora', serif;
}
.subtitle {
font: 20px/normal 'Lora', serif;
padding: 0 20px 5px;
}
.desc span {
display: inline;
}
h2 {
margin: 0 0 20px;
font: 400 28px/normal 'Lora', serif;
}
h3 {
font: 400 26px/normal 'Lora', serif;
}
.author {
font: bold 17px/normal 'Lora', serif;
}
#footerwrap, #footer {
color: #fff;
background: #1459A5 url(none);
}
#footer .listing {
display: block;
width: auto;
padding: 20px;
}
#footer .col {
display: block;
width: auto;
padding: 0;
}
#footer a {
color: #fff;
}
#footer a:hover {
color: #0CF;
}
.imageset_left {
width: 160px;
margin: 8px 20px 10px 0;
}



}





/************* od 380 px naniže *************/

@media screen and (max-width: 381px) {

h1 {
font-size: 28px;
}
.subtitle {
font-size: 17px;
}
.desc {
font-size: 15px;
line-height: normal;
}
.name, .title {
display: block;
border-bottom: none;
}
.name {
padding: 10px 0 0 0;
}
.title {
padding: 5px 0 10px 0;
border-bottom: 1px dotted #999;
}
h2 {
font-size: 26px;
}
h3 {
font: 400 22px/normal 'Lora', serif;
}
.imageset_left {
float: none;
width: 200px;
margin: 20px auto;
}



}






/************* od 360 px naniže *************/

@media screen and (max-width: 359px) {

#footer h4 {
padding: 30px 20px 0;
font: 400 20px/normal 'Lora', serif;
}


}