@import url("tisk.css") print;
/*

#0D5499 - tmavě modrá         rgb(13,84,153)  
- modrá z logo Tatranu
- nejtmavší barva designu
- okraje box, nadpis článku, ukazatel, odkaz    

#9eaecd - tmavší bledě modrá  rgb(158,174,205)
- střední barva designu
- hlavičky tabulek, aktualni den v kalendáři, okraj fotka člena 

#D8EBFC - bledě modrá         rgb(216,235,253)
- světlá barva designu
- pozadí buněk tabulek, pozadí krátce

#777777 - tmavá šedá             rgb(119,119,119)
- okraj článku, zápatí článku
#808080 - střední šedá           rgb(128,128,128)
- okraj tabulky, jinyden v kalendáři, tlačítko hover  
#F0F0F0 - světle šedá            rgb(240,240,240)
- pozadí tabulky

#faebd7 - světle béžová       rgb(250,235,215) 
- zpráva

white
- nadpis stránky, box, menu, ... text footer, okraje tlačítek
lightgray
- pozadí tlačítek
*/




body
{
  margin: 0px;
}


img
{
  border: none;
  /*max-width: 100%*/
}




form
{
  margin-top: 0px;
  margin-bottom: 0px;
}




/*---------------------------------------------------------------------------*/

 #header, #largetopmenu, #smalltopmenu, #body, #footercontent, #navcontainer
{
 /* max-width: 960px;  
  margin: 0px auto;
  position: relative;*/
}  

.fullwidthcontainer
{
  width: 100%;  
  margin: 0px auto;

}
.max960pxcontainer
{
  max-width: 960px;  
  width: 960px;  
    margin: 0px auto;
}

.max600pxcontainer
{
  max-width: 600px;  
  margin: 0px auto;
}

#zpravy 
{ 
  z-index: 999;
}           
#body
{
  min-height: 100%;
  width: 100%;
}
                                                         
#navcontainer
{
  position: relative;
}

.smalltopmenu
{
  z-index: 10000 !important;
}

#xsmallsubmenu>ul
{
  z-index: 1;
  /*max-height: 400px;*/
  width: 100%;
  margin-top: 40px;
  overflow: hidden;
}

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

.smallsubmenu
{
  z-index: 1;
  /*max-height: 400px;*/
  width: 100%;
  top: 40px;
  overflow: hidden;
}

}


                                                                                                                                                        
/* smalll navigation panes*/

#smallhome
{
  /*width: 130px !important;*/
  line-height: 20px !important;
  font-size: 1em !important;
}
#smallposition 
{
  overflow: hidden;
  text-overflow: ellipsis;
/*  position: absolute;
  left: 135px;
  right: 40px;  */
}

#smallsearch>span
{
  padding-right: 30px !important;
}

#smallsearchinput
{
  width:80%;
}
#largesearchinput
{
  width: 120px;
}
#mediumsearchinput
{
  width: 80%;
}

#smalltopmenupadding
{
  padding-top: 40px;
}

.smalltopmenu li
{
  line-height: 40px !important;
  max-height: 40px;
  white-space: nowrap;  
}

/*navigation styles*/

.verticalmenu, .horizontalmenu
{

  line-height: 30px;
  list-style-type:none;
  margin:0;
  padding:0;

}
.bottomverticalsubmenu
{
  left: 0px;
  top: 35px;
}
.leftverticalsubmenu
{
  left: 220px;
  top: 0px;
}

.verticalmenu>li
{
  width: 100%;
  text-align: left;
  border-top: solid 1px white;

  clear: both;
}







input
{
  vertical-align: middle;
}


.horizontalmenu li>a, .verticalmenu li>a, .verticalmenu li>span, .horizontalmenu li>span, .menubutton
{
  padding-left: 10px !important;
  padding-right: 10px !important;
  display: inline-block;  
  line-height: inherit !important;
  width: 100%;
}

.horizontalmenu li a, .verticalmenu li a , .verticalmenu td span
{
  position: relative;
  white-space: nowrap;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
}
.horizontalmenu-arrow
{
  position: absolute;
  right: 8px; 
  line-height: inherit !important;
}
.horizontalmenu-arrow:before
{
  content: "\f105" !important;
}
.opened>a>.horizontalmenu-arrow:before
{
  content: "\f107" !important;
}



.horizontalmenu li a:hover, .verticalmenu li a:hover
{
  text-decoration: none;
}

.w3-navbar-submenu 
{
  position: absolute;
/*top: 30px;
  left: 0px;

  padding-left:0px;
  margin-left:0px; */
  /*z-index:1000;*/
  width: 250px !important;
  box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.3)
}


/* side menu  */


/*
.w3-navbar-submenu li
{  
  width: 250px !important;
  list-style: none;
} */

.topmenuitem.iconitem
{
  width: 40px !important;
  min-width: 40px !important;
  clear: none !important;
}     

.topmenuitem.iconitem>a>.menuitemcaption
{
  display: none;
}




/* header */
#header
{
  height: 200px;
  margin-top: 0px; 
}
#headerleft
{
  height: 200px;
}

#headerposter, .indextitle, #headerposterimg, #smallindexpagetitleimg
{
  background-size: cover;
  height: 200px;
  position:relative;
  background-position-x: center;
  background-position-y: top;
  background-repeat: no-repeat;
}
#headerposter, .indextitle
{
  border-bottom: solid 10px transparent; 
}
#headerposterimg, #smallindexpagetitleimg
{
  border-bottom: solid -10px transparent; 
}


#headerposterimg, #smallindexpagetitleimg
{
  position:absolute;
  left:0;top:0;width:100%;height:100%;
}

.indextitle
{
text-align:center;
}




#headersubtitle, #headersubtitle a 
{
  line-height: 35px;
	text-align: center;
  color: #0D5499;
  font-size: 1.4em;
  font-weight: bold;
  text-decoration: none;
}
#headertitle 
{
  line-height: 55px;
  text-align: right;
  padding-right: 1em;
  position:relative;
  z-index: 1000;
}

#headertitle a  
{
  color: white;
  font-size: 3em;
  font-weight: bold;
  text-shadow: 3px 3px #404040;
	letter-spacing: 2px;
  text-decoration: none;
}
/* body */

.maincontainer 
{
  /*min-height: 100%;*/
  display:flex;
  flex: 1 0 auto;
}

/*---------------------------------------------------------------------------*/

.zprava {
    /* text-align: center; */
    font-weight: bold;
    margin-bottom: 0px;
    line-height: 25px;
    padding-left: 1em;
    padding-right: 1em;
}

/* content */
#content
{
  padding: 10px;
  overflow: hidden;
  min-height: 100%;
  position: relative;
}

.pagecontentnav
{
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.stretch-height
{
    position: absolute;
    bottom: 0px;
    top: 0px;
    overflow-y: auto !important;
}

.stretch-width
{
    position: absolute;
    left: 0px;
    right: 0px;
    overflow-x: auto !important;
}

.dock-bottom
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right:0
}

/* left */
#left
{
  padding: 10px;
}
/* footer */
.footer
{
  
  line-height: 1.5;
}
.footercontent
{
  min-height: 120px;
  padding: 5px;
}



#footercopy
{
  margin-top: 10px;  
}

#footeroddilymenu
{
  margin-top: 10px;
  text-align: right;
  font-size: larger;
}

/* clanky */
/* clanek styles */ 

.external-link::after{content:' \f35d';}










.clanek-text 
{
  padding-top: 4px;
  padding-bottom: 7px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.clanek-fotky
{
  display:flex;
}

.clanek-info
{

  clear: none;
}
.clanek-image
{
  float: left;
  margin: 3px  8px 8px 0px;
  text-align: left;
  width: 33%;
}
.clanek-fotka
{
  float: left;
  margin: 3px;
  text-align: left;
  width: 30%;
}

.clanek-image div, .clanek-fotka div
{
  padding-bottom: 66.66%;
}
.clanek-image img, .clanek-fotka img
{
  object-fit: contain;
  object-position: top;
}

/* boxes */
.pozvanky
{
  overflow: auto;
  /*max-height: 150px;*/
  
}
#promo
{
 /* min-height: 150px;*/  
}

.kratce
{
  overflow: auto;
  max-height: 400px;
  
  padding:4px;
  
}



div.zpravavmediich
{
  display: inline-block;

}
.zpravavmediich-text 
{
  /*padding-top: 4px;*/
  padding-bottom: 7px;
  padding-left: 65px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.zpravavmediich-image 
{
  position: absolute;
  margin: 3px  8px 8px 0px;
  text-align: center;
}
.zpravavmediich-image img
{
  width: 80px;
}




div.zpravavmediichvycet
{
  width: 605px;
  overflow: hidden;
  display: inline-block;
}
div.zpravavmediichvycet div.zpravavmediich-nadpis
{
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  padding-top: 0px;
  padding-bottom: 0px;
}
div.zpravavmediichvycet div.zpravavmediich-info
{
  overflow: hidden;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div.zpravavmediichvycet div
{
  display: inline-block;
}

.vice-link
{
  display: inline-block;
  text-align: right;
  width: 70px;
  overflow: hidden;
  white-space: nowrap;
}


 /* content styles*/
 
 #content table.contentmenu
{
  border-spacing: 2px;
  background-color: transparent;
  border: 0px;
  /*display:inline-table;*/
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
#content .contentmenu td
{
  text-align: center;
      white-space: nowrap;
   /* overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 100%;
   */
  
}
/*
#content div.contentmenu
{
  border-spacing: 2px;
  background-color: transparent;
  border: 0px;
  text-align: center;
  display:inline-block;
   
}
#content .contentmenu>div
{
  margin-left:1px;
  padding: 3px;
  padding-left:5px;
  padding-right:6px;
  background-color: #D8EBFC; 
  display:table-cell;
}
  */
/* .box styles*/

.box
{

  /*padding-bottom: 5px;*/
  padding: 1px;
  margin-bottom: 1em;
}
.boxplain
{
  padding: 0px;
  margin-bottom: 1em;
  text-align:center;
}
.boxtitle
{
  display: block;
  padding-bottom: 1px;
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 0px;
  text-indent: 15px;
  line-height: 35px;
  /*padding-left: 4px;
  padding-bottom: 0px;
  padding-top: 2px;
  margin-bottom: 0px;
  display: block;
  color: White;
  font-weight: bold;
  font-size: 1.1em;
  height: inherit;
  width: inherit;
  text-align: center;*/   
}
.boxbody
{

  /*border: 1px solid #0D5499;*/
  /*padding: 0px;
  margin-top: 0px;
  text-align:center;
  border: 1px solid #0D5499; 
  border-right: 1px solid #0D5499;*/ 
  overflow: overlay;
}

.boxinline
{
  padding: 4px;
}


.boxbody table.plain
{
  border-spacing: 2px;
  background-color: transparent;
}
.boxbody table.plain td, .boxbody table.plain th
{
  background-color: transparent;
}



/*  old styles */
.ukazatel
{
  display: block;
  font-size: 0;
  height: 6px;
  background: #0D5499; 
}
.ukazatel-okraj
{
  display:block; 
  border: solid 1px #0D5499; 
}
.anketa
{
  text-align:left;
}

.formtable
{
  border-spacing: 0px;
  /*overflow: scroll;*/
  word-wrap:break-word;
  max-width: 100%;  
}

table.anketa, .anketa table
{
  border-spacing: 0px;  
}

/* kalendáře */

.calendar td
{
  text-align: center;
  padding: 3px 5px 3px 5px;
}


.smaller.calendar td
{
  text-align: center;
  padding: 0px;
}

. 
.smaller
{
  font-size:0.9em;
}
/*
.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center; }
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
.w3-button:hover{color:#000!important;background-color:#ccc!important}
  */

xinput.action
{
  padding-left: 3px;
  padding-right: 3px;
  min-width:25px;
  line-height:1 !important;
}

.action, input[type=submit], input[type=button]
{
  padding:8px 8px;
  margin: 0px 3px 8px 3px;
  display:inline-block; 
 /* font-weight: bold;*/
  min-width:25px;
  line-height:1 !important;
  
  cursor:pointer;
  white-space:nowrap;  
  vertical-align:middle;
  overflow:hidden;
  text-decoration:none;
  text-align:center;
  transition:opacity 0s;
}







.action.hidden
{
  display: none;    
}


                        

A.toolbarbutton
{

  display:inline-block;
  /*min-width:25px;
  min-height:25px;
  line-height:23px;
  padding: 1px;   */
}


.fullscreen
{
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;

 z-index:1000;
}

.fullscreen .textareacontainer
{
 margin: 0 auto;
  position: absolute;
  left: 5px; 
  top: 30px;
  right: 5px; 
  bottom: 5px;
}

.fullscreen .textareacontainer textarea
{
 font-size: 1.375em;
 padding: 0.5em;
 resize: none;
  width: 100% !important;
  height: 100% !important;
  margin: 0; /* don't want to add to container size */
}

/* fanshop*/
.zbozi-nadpis, table.feed th
{
  color: #0D5499; 
  padding-top: 2px;
  padding-bottom: 4px;
  font-size: 1.1em;
  font-weight: bold;
  background-image: linear-gradient(to right, red 0%,transparent 100%);/*url('/images/design/clanek-cara-hazena.png');*/
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 2px;
}

.zbozi-nadpis A, table.feed th A
{
  color: #0D5499; 
}

.zbozi-text 
{
  padding-top: 4px;
  padding-bottom: 7px;
  margin-top: 0px;
  margin-bottom: 0px;
}
.zbozi-cena
{
  color: red; 
  font-size: 1.3em;
  font-weight: bold;

}

.zbozi-dostupnost
{
  color: green; 
  font-weight: bold;
}

#smallhome::after {
content:''; 
width:0; 
height:0 !important; 
float:right !important;
border-style:solid; 
border-width:1.3em 0 1.3em 1em !important; 
}

#smallposition
{
 border-left:0px;
 overflow: hidden;
 text-overflow: ellipsis;
 position: absolute;
 left: 175px;
 right: 0px;
}
}
@media only screen and (min-height:200px){
.two-cols-item
{
  width: 32.5% !important; 
  display: inline-block;
  /*height: 40px;*/
}
}

@media only screen and (min-height:400px){
.two-cols-item
{
  width: 49.1% !important; 
  display: inline-block;
  /*height: 40px;*/
}
}

.verticalmenu .ruler
{
  line-height: 10px !important;

} 

.selected
{
  font-weight: bold;
}

.loadoverlay
{
  background: transparent; 
  left:0; 
  top:0;
  width:100%; 
  height: 100%;
  position: fixed; 
  z-index: 10000;
}
.loadoverlayinfo
{
  background: transparent !important; 
  opacity: 0.9 !important; 
  filter: alpha(opacity=90) !important; 
  color:black;
  height: 3em;
  position: fixed; 
  z-index: 10001;
  text-align: center;
  font-weight: bold;
}

.loadoverlayvisibled
{
  background: white !important; 
  opacity: 0.6 !important; 
  filter: alpha(opacity=60) !important; 
}

.modaloverlay
{
  background: black; 
  opacity: 0.6; 
  filter:alpha(opacity=60); 
  left:0; 
  top:0;
  width:100%; 
  height: 100%;
  position: fixed; 
  z-index: 1000;
}

.modalwindow
{
  
  position: fixed !important; 
  z-index: 1001;
}

.modalwindowcontentcontainer
{
  position: absolute;
  margin: 5px;
  margin-top: 25px;
  top:0;left:0;right:0;bottom:0;
}

.modalwindowcontentcontainer-stretch
{
  position: absolute;
  margin: 0px;
  margin-top: 0px;
  top:0;left:0;right:0;bottom:0;
}


.modalwindowcontent
{
  border:0;
  width: 100%; 
  height: 100%;
}

.modalwindowheader
{
  text-align: center;
  font-weight: bold;
  height:25px;
  line-height:15px;
  padding:5px;
}


table.vert-center td
{
  vertical-align: center;
}

tr > td + td, tr > th + th {
  border-left-width: 2px;
}

tr + tr > td, tr + tr > th {
  border-top-width: 2px;
}

/* table*/
table, .table
{

  overflow-x:auto;
  border-collapse: collapse;
  /*border-collapse:separate;*/
  /*border-spacing: 2px;*/
  display:table;  
}
tr, .tr
{                 
   display:table-row;
}
td, .td
{

  padding: 3px 3px 3px 3px;
  display:table-cell;
  border: 0px solid transparent;
  background-clip: padding-box;

}
th, .th
{
  padding: 3px 3px 3px 3px;
  display:table-cell;
  position: sticky;
  top: 0px;
  border: 0px solid transparent;
  background-clip: padding-box;
}


/* plain table*/
table.plain, table.plaintable, .plain table, table.feed 
{
  border: 0px !important;
  border-spacing: 0px !important;
  background-color: transparent !important;
  color: inherit;
  border-collapse: collapse;
}
.plain th, .plain td, .plaintable th, .plaintable td, .feed th, .feed td  
{
  background-color: transparent !important;
  padding: 2px !important;
  color: inherit;
}

.plain th a, plaintable th a,  .feed th a  
{
  color: inherit !important;
}

.tooltip
{
    display: block;
    position: absolute;
    top: 0px;
    right: 100%;
    width: 150px;
    z-index: 1000;
    padding: 2px;
 }





.w3-keep-aspect-ratio
{
 position: relative;   
}
.w3-keep-aspect-ratio > *:first-child
{
    position: absolute !important;
    top: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    width:100% !important;
    height:100% !important;
}    


.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 100%;
}

.text-banner
{

   width:100%;
   height:100%;
   position:relative; 
}



/* hot */

.topkategorie
{

  background-size: cover;
  padding: 1em 1em; 
}

.topkategorie-tym-domaci
{
  text-align:left !important;
  float:left !important;
}

.topkategorie-tym-hoste
{
  float:right !important;
    text-align:right !important;
  
}
.topkategorie-tym-logo
{
max-width: 100%;
max-height:45px;
display: block;  
}
.topkategorie-tym-hoste .topkategorie-tym-logo
{
  float:right !important;
}

.topkategorie-vysledek-soutez, topkategorie-vysledek-online, topkategorie-vysledek-skore, .topkategorie-vysledek-skore-zaklad, .topkategorie-vysledek-skore-detail
{
  display: block;
}

.topkategorie-vysledek-skore-zaklad
{
  text-wrap: nowrap;
}

.topkategorie-tym-text
{
font-size: 1.2em; 
font-weight: bold;
display: block;
padding-top: 3px;  
/*white-space: nowrap;*/
}
.topkategorie-tym-hoste .topkategorie-tym-text
{
  text-align:right !important;
  float:right !important;

}

.topkategorie-vysledek-soutez
{
font-weight: bold;
}

.topkategorie-vysledek
{
 padding: 0;
}
.topkategorie-vysledek-online
{
font-weight: bold;
}
.topkategorie-vysledek-skore
{
font-weight: bold;
}
.topkategorie-vysledek-skore-zaklad
{
font-size: 1.5em; 
}


.hot
{    
 width: 100%;
 position: relative;
 overflow: hidden;
 display: inline-flex;
}
.hot-item
{   
  display: inline-block;
  position: relative;
  border-right: 3px solid transparent; 
  aspect-ratio: 3/2;
}    

.hot-itemlabel
{
  position: absolute;
  bottom: 0px;
  width: 100%;
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: none;
  padding: 0.5em;
  max-height: 22%;
  overflow: hidden;
}

.hot-itemimage
{
   object-fit:contain;
   object-position: top;
   width: 100%;
   height: 100%;
}
.hot-itemcontent
{
width:100%;
max-height:calc(100% - 36px);
}
.hot-itemcontent > div, .hot-itemcontent > table
{
width:100%;
}

.scroll-y
{
  overflow-y:overlay;
  overflow-x:hidden;
}

.hot-arrow
{
  position:absolute; 
  height: 30px;
  width: 32px;
  background:black; 
  top:105px; 
  z-index: 100; 
  opacity:0.5;
  visibility:hidden;
}
.hot:hover .hot-arrow
{
  visibility: visible;
}
.hot-arrow:before 
{
   background: url('/images/spolecne/default-skin.png') 0 0 no-repeat;
   content: '';
   height: 30px;
   width: 32px;
   position: absolute;
}
.hot-arrow-left
{
left:0;
}
.hot-arrow-right
{
right:0;
}
.hot-arrow-left:before
{
background-position: -138px -44px; 
}
.hot-arrow-right:before 
{
background-position: -94px -44px; 
}

.inputenabled
{
  background-color: white;
  color: black;
}

input.inputenabled, input.inputdisabled
{
    border: 1px solid #838383;
    margin: 1px;
    border-radius: 2px;
}

.inputenabled a
{
  color: black;
}


.inputdisabled 
{
  background: #eeeeee;
  color: gray;
}

.inputdisabled a 
{
  color: gray;
}

input:readonly, select:disabled, input[type="checkbox"]:disabled 
{
  background: #eeeeee;
  color: gray;
}




h3 a.action
{
  max-height: 1.5 em;
  font-weight: normal;
  padding-top: 4px;
  padding-bottom: 4px;
  margin: 1px  
}
.no-wrap
{
  white-space: nowrap;
  text-wrap: nowrap;
  xxxword-wrap:break-word;
}

.formtabletoolbar
{
  width:100%;
  text-align: center;
}



/* sticky footer*/
html, body
{
height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
#headerandcontent {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#footer {
  flex-shrink: 0;
}

#zpravy
{
    position: fixed;
    width: 560px;
    max-width: 100%;
    padding-right: 20px;
    bottom: 10px;
}

[inert] > * 
   {
       opacity: 0.3;
   }
   
input.filterinput:not(:placeholder-shown) 
{
    background-color : #ECFFDC;
}   
   
option
{
    color:black;
}

input, select 
{
  font-family: inherit;
}

    .filtertooltip {
      position: absolute;
      top: auto;
    bottom: calc(100% + 8px);
      left: 0;
      min-width: 160px;
      padding: 8px 10px;
      border-radius: 6px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      background: #222;
      color: #fff;
      font-size: 14px;
      line-height: 1.3;
      display: none; /* skryté, dokud není aktivní */
      z-index: 20;
    }

    .filtertooltip.visible {
      display: block;
      animation: fadeIn 0.12s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }

.fade-out 
{
    opacity: 0;
    transition: opacity 2s ease;
}