/******************* VARIABLES, COLORS ********************************/
:root {
  --yellow: #f1c40f;
  --yellowHover: #f39c12;
  --blue: #00a8ff;
  --blueHover: #0097e6;
  
  --darkBlue: #0d7dba;
  --darkBlueHover: #2980b9;
  --green: #00ca65; /* flat: #2ecc71; */
  --greenHover: #00AB55; /* flat: #27ae60; */
  --orange: #f39c12;
  --orangeHover: #e67e22;
  --red: #e55043; 
  --red: #e74c3c; 
  --redHover: #c0392b;
  --violet: #9b59b6;
  --violetHover: #8e44ad;
  --lightGray: #ecf0f1;  
  --lightGray: #eff0f2;    /* TEPLEJSI */
  --lightGrayHover: #dfdfe1;
  --gray: #bdc3c7;
  --grayHover: #95a5a6;
  --black: #34495e;
  --blackHover: #2c3e50;

  --faintGray: #f3f6f9; /* f8f8f8 teplejsi */
  --faintGreen: #c8f8df;
  --faintBlue: #e3faff;
  --faintRed: #F7B7C0;
  --faintYellow: #f8efbc;  
  --faintOrange: #FEDEB4;
  
  --wrong: #ec7063;
  --correct: #2ecc71;

  /* FLAT UI BLUE */
  --blue: #3498db;
  --blueHover: #2980b9;

}
  
/******************* STRED PAS SPECIALITY ********************************/

.space{
  height: 60px;  
  display: block;
}

/******************* STRED PAS HTML ********************************/

h1,h2, h3{        
  line-height: 1.3em;
  font-weight: bold;
  display: block;
}

h1{ 
  font-size: 32px;   
  margin-top: 30px;
  margin-bottom: 30px;
}

h2{ 
  font-size: 22px;   
  margin-top: 30px;
  margin-bottom: 20px;
}

h3{ 
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
}

p{     
  font-size: 16px;
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-bottom: 25px;   /* driv bylo 5px, ale kvuli processing fluency zmeneno */
  font-weight: 300;
}

i{     
  font-size: 16px;
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-bottom: 25px;   /* driv bylo 5px, ale kvuli processing fluency zmeneno */
  font-weight: 300;
  font-style: italic;
}

p.nomargin,h1.nomargin,h2.nomargin,h3.nomargin{
  margin-top: 0px;
  margin-bottom: 0px;
}

p.margin5,h1.margin5,h2.margin5,h3.margin5{
  margin-top: 5px;
  margin-bottom: 5px;
}

a{  
  font-size: 16px;
  color: var(--blue); 
  text-decoration:none;  
  font-weight: 400; /* experiment 13.5.2020 */
}

a:hover{
  color: var(--blueHover); 
  text-decoration: underline;
}

a.green{ color: var(--green); }
a.green:hover{ color: var(--greenHover); }
a.blue{ color: var(--blue); }
a.blue:hover{ color: var(--blueHover); }
a.red{ color: var(--red); }
a.red:hover{ color: var(--redHover); }

ul{
  list-style-type:disc;
  margin-left:10px;  
  padding: 5px;
  padding-left: 10px;
  font-size: 16px;
}

ol{
  margin-left:10px;  
  padding: 5px;
  padding-left: 10px;
  font-size: 16px;
}

li{
  font-size: 16px;
  line-height: 1.2em;    
  line-height: 1.6em; /* driv bylo 1.4em, ale kvuli processing fluency zmeneno */   
  margin-top: 5px;  
  font-weight: 300;
}

button{ /* at nedela stiny */
  border:0px;
}

/******************* COLORS ********************************/

p.blue,h1.blue,h2.blue,h3.blue{ color: var(--blue); }
p.darkblue,h1.darkblue,h2.darkblue,h3.darkblue{ color: var(--darkBlue); }
p.green,h1.green,h2.green,h3.green{ color: var(--green); }
p.red,h1.red,h2.red,h3.red{ color: var(--red); }
p.violet,h1.violet,h2.violet,h3.violet{ color: var(--violet); }
p.gray,h1.gray,h2.gray,h3.gray{ color: var(--gray); }

/******************* TABLES ********************************/

table{          
  border-spacing: 0px;
  border-collapse: separate;    
  margin: 20px 0px;
}

table.wide{
  width: 100%;  
}

td,th{
  font-size: 16px;
  line-height: 1.2em;    
  margin-top: 5px;  
  font-weight: 300;    
  padding:5px;
  padding-left:1px;
  border-bottom:1px solid var(--lightGrayHover);
}

th{
  font-weight: 600;
}

td.wide,th.wide{
  width: 100%;
}

td.padding10{    
  padding:10px;
}

td small,th small{
  display: block;
  font-size: 14px;
  padding-top:8px;
}
td small a{
  font-size: 14px;
}

.table.nomargin{  
  margin:0px;
}

table.hoverable tr:hover td{  
  background-color:var(--lightGray);
}

table.noborder td, table.noborder th{
  border:0px;
}

table.big td, table.big th{  
  padding:10px;
  font-size: 18px;
  text-align: left;  
}

table.medium td, table.medium th{  
  padding:5px;  
}

table.small td, table.small th{
  padding:2px;
  font-size: 14px;  
  text-align: left;  
  line-height: 22px;
}

table.small td img{
  display: inline-block;
  vertical-align: bottom;
  height: 26px;
  width: auto;
}

table.small tr.heading td{
  font-weight: bold;
  font-size: 16px;  
  line-height: 36px;
}

/******************* TLACITKA SYSTEM ********************************/

.tlacitko{  
  display: inline-block;
  color: white;
  cursor: pointer;
  border-radius: 6px;  
  border-radius: 3px;  /* 13.5.2020 */
}

a.tlacitko{ color:white; }

.tlacitko:hover{    
  color:white;    
  /*transition: all 0.15s ease-in-out 0s; */
  text-decoration: none;
}

.tlacitko.large{
  padding:10px 30px;
  font-size: 18px;  
  font-weight: 400;
}

.tlacitko.medium{
  padding: 6px 12px;  
  font-size: 16px;  
}

.tlacitko.small{
  padding: 2px 10px;
  line-height: 20px;
  font-size: 14px;  
}

.tlacitko.margin5{ margin: 5px; }
.tlacitko.margin10{ margin: 10px; }
.tlacitko.margin20{ margin: 20px; }
.tlacitko.tmargin20{ margin-top: 20px; }
.tlacitko.tmargin50{ margin-top: 50px; }
.tlacitko.rmargin10{ margin-right: 10px; }
.tlacitko.lmargin10{ margin-left: 10px; }
.tlacitko.marginLeft10{ margin-left: 10px; }

.tlacitko.nomargin{  
  margin:0px;
}

.tlacitko.wide{
  padding:10px 14px;  
  font-size: 16px;  
  display: inline-block;
  width: 100%;
  text-align: center;
}

/* STARA MODRA */
.tlacitko.blue{ background-color: #0AB9F3; border-bottom:1px solid #007ebc; }
.tlacitko.blue:hover{ background-color: #089DCE; color:white; }


.tlacitko.blue{ background-color: var(--blue); border-bottom:1px solid var(--blueHover); }
.tlacitko.blue:hover{ background-color: var(--blueHover); color:white; }
.tlacitko.darkBlue{ background-color: var(--darkBlue); border-bottom:1px solid var(--darkBlueHover); }
.tlacitko.darkBlue:hover{ background-color: var(--darkBlueHover); color:white; }
.tlacitko.green{ background-color:var(--green); border-bottom:1px solid var(--greenHover); }
.tlacitko.green:hover{ background-color: var(--greenHover); color:white; }
.tlacitko.orange{ background-color: var(--orange); border-bottom:1px solid var(--orangeHover); }
.tlacitko.orange:hover{ background-color: var(--orangeHover); color:white; }
.tlacitko.red{ background-color: var(--red); border-bottom:1px solid var(--redHover); }
.tlacitko.red:hover{ background-color: var(--redHover); color:white; }
.tlacitko.violet{ background-color:var(--violet); border-bottom:1px solid var(--violetHover); }
.tlacitko.violet:hover{ background-color: var(--violetHover); color:white; }
.tlacitko.gray{ background-color: var(--gray); border-bottom:1px solid var(--grayHover); }
.tlacitko.gray:hover{ background-color: var(--grayHover); color:white; }
.tlacitko.yellow{ background-color: var(--yellow); border-bottom:1px solid var(--yellowHover); }
.tlacitko.yellow:hover{ background-color: var(--yellowHover); color:white; }



.tlacitko.gray-green,.tlacitko.gray-blue,.tlacitko.gray-orange,.tlacitko.gray-red,.tlacitko.gray-violet,.tlacitko.gray-black{ background-color: var(--lightGrayHover); } /* #dfe6e9; */
.tlacitko.gray-green:hover,.tlacitko.gray-blue:hover,.tlacitko.gray-orange:hover,.tlacitko.gray-red:hover,.tlacitko.gray-violet:hover,.tlacitko.gray-black:hover{ background-color: #ced6e0; }
.tlacitko.gray-green{ color: var(--green); }
.tlacitko.gray-blue{ color: var(--blue); }
.tlacitko.gray-orange{ color: var(--orange); }
.tlacitko.gray-red{ color: var(--red); }
.tlacitko.gray-violet{ color: var(--violet); }
.tlacitko.gray-black{ color: var(--black); }



.tlacitko.facebook{
  background-position: left 20px center;
  background-repeat: no-repeat;  
  background-image: url('../img/facebook.png');
  background-color: #3D589F;  
  border-bottom:2px solid #293B60;
}

.tlacitko.facebook:hover{
  background-color: #36497E;
  cursor: pointer;
  background-image: url('../img/facebook-hover.png');    
}

.tlacitko.google{
  background-position: left 20px center;
  background-repeat: no-repeat;  
  background-image: url('../img/google.png');
  background-color: #006FEA;  
  border-bottom:2px solid #074490;  
}

.tlacitko.google:hover{
  background-color: #095BB6;
  cursor: pointer;
  background-image: url('../img/google-hover.png');  
}


/******************* LABELY ********************************/

.label{ 
  display:inline-block;
  color: var(--gray);
  border-radius:6px;
}

.label.big{  
  margin:5px;
  font-size: 18px;
  padding: 7px 20px;
}

.label.medium{
  padding: 0 0px;
  line-height: 26px;
  font-size: 16px;
  margin:0px;
}

.label.small{
  padding: 0 0px;
  line-height: 20px;
  font-size: 14px;
  margin:0px;
}

.label.black{ color: var(--black); }
.label.green{ color: var(--green); }
.label.blue{ color: var(--blue); }
.label.red{ color: var(--red); }
.label.violet{ color:var(--violet); }
.label.orange{ color: var(--orange); }
.label.yellow{ color: var(--yellow); }
.label.gray{ color: var(--gray); }

/********************************** BANNER **********************************/
.banner{    
  display: none;
  background-color: var(--red);
  color:white;
  font-size: 16px;
  text-align: center;
  line-height: 2.0em;  
  width: 100%; 
}

.banner.blue{
  background-color: var(--blue);  
}

.banner.orange{
  background-color: var(--orange);  
}

.banner a{
  color: white;  
  text-decoration: underline;
}

.banner a:hover{
  color: #C0392B;
  text-decoration: underline;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version, currently
                                not supported by any browser */
}


/********************** MOBILNI VERZE *****************************/

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

  h1{ 
    font-size: 26px;   
    margin-top: 20px;
    margin-bottom: 20px;
  }

  h2{ 
    margin-top: 20px;    
  }

  h3{     
    margin-top: 20px;    
  }

}