html, body 
 {height: 100%; padding: 0; margin: 0; border-style: none; font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4
 {font-family: 'Open Sans', serif; font-weight: normal; font-kerning: normal; color: #005685; }
h1, h2 {padding-bottom: .4em; }
p, li
 {font-family: 'Open Sans', sans-serif; font-size: 80%; color: #576991; padding: .3em .8em; }
p {line-height: 150%; text-indent: 2.4em; }
a {text-decoration: none; }
img
 {margin: auto; height: auto;
  vertical-align: middle;
  max-width: 100%;
 }
li {break-inside: avoid-column; }

.coltxt, .colimg {float: left; box-sizing: border-box; align-self: center; margin: auto; }
.coltxt {max-width: 30%; }
.colimg {max-width: 70%; }
.coltxt2 {width: 30vw; }
.colimg2 {width: 70vw; }
.spcs {margin-left: 5em; }
.dcol {column-gap: 2em; columns: 2; column-width: 12em; }
.umbra {box-shadow: 5px 4px 16px #123; }
#pbinf {display: none; transition: height 0.6s ease;}

#ccmap
 {height: 70vh; width: 100%; transition: 0.6s ease;}

td, th
 {font-family: "Open Sans", sans-serif; }
#tabap
 {font-family: "Open Sans", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 98%; margin: auto;
 }
td, th, #tabap2 td, #tabap2 th {font-size: 1.4vw; }
#tabap td, #tabap th, #tabap2 td, #tabap2 th {border: 1px solid #ddd; }
#tabap td, #tabap th {padding: .15em .6em; }
#tabap td, #tabap2 td {text-align: right; }
#tabap2 tr {float: left; display: table-column; }
#tabap2 td, #tabap2 th
 {display: block; padding: .3em 2em; }

.fl_c
 {display: flex; flex-wrap: wrap; justify-content: space-around; 
  margin: auto; max-width: 99%; padding: .5em; 
 }
.cas1
 {background-color: #0091ca; width: 15.5em; margin: 10px; color: #0f3270; 
  box-shadow:6px 4px 16px 3px #ccc; background: linear-gradient(#00abd1, #0091ca);
  display: flex; flex-flow: column nowrap; border-radius: 8px 4px; 
 }
.afpr
 {margin-top:auto; text-align: center; color: white; 
 }

.aicipoze
 {max-width: 90%;
  position: relative; margin: auto; top: 10px; 
 }

.prev, .next
 {cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 36px;
  margin-top: -60px;
  color: #bbb;
  font-weight: bold;
  font-size: 60px;
  transition: 0.6s ease;
  border-radius: 0 18px 18px 0;
}
.next
 {right: 0;
  border-radius: 18px 0 0 18px;
 }
.prev:hover, .next:hover
 {background-color: rgba(50,100,150,0.6);
 }
[class*="defilez"] {display: none}

[class*="dot"]
 {cursor: pointer;
  height: 25px;
  width: 25px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
 }

.prez, .dot:hover
 {background-color: #717171;
 }

.dispar
 {-webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
 }

.ccvand
 {text-align: right; font-weight: bold; color: red; }

@-webkit-keyframes fade
 {from {opacity: .2} 
  to {opacity: 1}
 }
@keyframes fade
 {from {opacity: .2} 
  to {opacity: 1}
 }

.casap
 {background-color: #eee;
  margin: .5em; padding: .5em;
 }
.casap:hover
 {opacity: 0.7;
  cursor: pointer;
  transition: 0.3s;
 }

.rubric
 {background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  margin: 9px 18px;
  width: 90%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
 }
.active, .rubric:hover {background-color: #ccc; }
.rubric:after
 {content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
 }
.active:after {content: "\2212"; }
.panel
 {padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
 }

#f_poza
 {display: none;
  position: fixed;
  z-index: 7;
  padding-top: 20px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(80,80,80);
  background-color: rgba(10,20,40,0.8);
 }

#img_tot
 {margin: auto;
  display: block;
  width: 90%;
  max-width: 95%;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

#img_tot:hover, #img_tot:focus
 {cursor: pointer;
 }

#img_tot
 {-webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
 }

@-webkit-keyframes zoom
 {from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
 }

@keyframes zoom
 {from {transform:scale(0)} 
  to {transform:scale(1)}
 }

.ascund {width: 0; display: none; }
[class*="cal"] {float: right; }

.afis2 {padding: 2em; display: flex; box-sizing: border-box; }
#cclogo
 {padding: 0; margin: 10px; 
  position: fixed; 
  top: 0; left: 0; 
  width: 25vw; max-width: 230px; min-width: 80px; 
  transition: 0.5s;
  z-index: 4;
 }
#sus
 {height: 60px; left: 0; top: 0; 
  background-color: #e0e5ed; color: #0f3270;
  background: linear-gradient(#0091ca, #00abd1);
  text-shadow: 1px 3px 5px #eee;
  padding: 10px; 
  padding-left: 240px; text-align: left; 
  font-family: 'Open Sans', cursive;
  font-size: 200%; 
 }
#sus::after {content: " – redefinim confortul!"; }

#jos
 {height: 0px; left: 0; bottom: 0; 
  background-color: #e0e5ed; color: #8cf;
  background: linear-gradient(rgba(0,86,133,0), rgba(0,86,133,.8), #02294a);
  padding: 2px 20px;
  text-align: left; font-family: 'Helvetica', SansSerif;
  font-size: 60%; 
  z-index: 2;
 }

#fmen, #meniu, #jos, #menmic
 {position: fixed; right: 0; 
  transition: 0.3s; 
 }
#fmen
 {height: 80px; top: 80px; 
  padding: 0; width: 100%; 
  background: linear-gradient(#00abd1, rgba(0,171,209,.9), rgba(0,171,209,.6), rgba(0,171,209,0));
  z-index: 3;
 }
#meniu
 {z-index: 5; display: flex;
  height: 40px; top: 72px; padding-bottom: 5px;
  width: 80%; ; text-align: left; 
  border-radius: 16px 0 0 16px;
  justify-content:space-around; 
  background-color: rgba(86,114,133,.2); 
 }
#menmic
 {z-index: 6;
  height: auto; margin-right: 10px; top: 10px; 
  padding: .5em 1em; 
  display: none;
  cursor: pointer; 
 }
#menmic, .butmen, .butmenx, .butplan
 {background-color: #414243; color: white; 
 }
.butmena, .butmen:hover, .butplan:hover {background-color: #576991; color: white; }
.butmen, .butmena, .butmenx, .butplan, #menmic
 {border-radius: 8px 4px; border: none;
  box-shadow: 3px 4px 12px #ccc;
 }
.butmen, .butmena, .butmenx, .butplan
 {text-decoration: none; text-align: center; 
  font-family: "Open Sans", sans-serif;
 }
.butmen, .butmena, .butmenx
 {padding: .3em 1.5vw; min-width: 50px; 
  font-size: 72%; font-family: "Open Sans", sans-serif;
 }
.butplan
 {padding: 1em 1.5vw; min-width: 7em; font-size: 80%; margin: 8px; cursor: pointer; 
 }
.butmen, .butmena, .butplan
 {max-width: 240px; 
 }
.butmenx
 {margin: 6px 0; 
  max-width: 180px; 
 }

#fbcont {position: relative; right: 0; float: right; top: 2px; transition: 0.5s;}
#fbtrim {position: absolute; right: 12px; float: right; top: 15px; transition: 0.5s;}
#mestel
 {position: absolute; right: 70px; float: right; top: 15px; transition: 0.5s;
  display: none; 
 }
.atarns {height: 32px; transition: .3s; }
.atarnj
 {flex-flow:column nowrap; position: relative; 
  font-size: 100%;
  padding: 10px 0; display: none;
 }
.atarns:hover .atarnj {display: flex; display: -webkit-flex; }
.atarns:hover {height: 210px; }

#ppp31, #ppp32, #ppp33 {position:absolute; left:0; top: 0; width: 100%; }
#ppp31 {animation:dec1 20s infinite; -webkit-animation:dec1 20s infinite; }
#ppp32 {animation:dec2 20s infinite; -webkit-animation:dec2 20s infinite; }
#ppp33 {animation:dec3 20s infinite; -webkit-animation:dec3 20s infinite; }

@keyframes dec1
 {0%    {opacity:1; display: inherit;}
  22%   {opacity:1; display: inherit;}
  32%   {opacity:0; display: inherit;}
  33%   {opacity:0; display: none;}
  88%   {opacity:0; display: none;}
  89%   {opacity:0; display: inherit;}
  100%  {opacity:1; display: inherit;}
 }
@keyframes dec2
 {0%    {opacity:0; display: none;}
  22%   {opacity:0; display: none;}
  23%   {opacity:0; display: inherit;}
  33%   {opacity:1; display: inherit;}
  55%   {opacity:1; display: inherit;}
  67%   {opacity:0; display: inherit;}
  68%   {opacity:0; display: none;}
  100%  {opacity:0; display: none;}
 }
@keyframes dec3
 {0%    {opacity:0; display: none;}
  55%   {opacity:0; display: none;}
  56%   {opacity:0; display: inherit;}
  67%   {opacity:1; display: inherit;}
  89%   {opacity:1; display: inherit;}
  99%   {opacity:0; display: inherit;}
  100%  {opacity:0; display: none;}
 }

@media screen and (max-width: 920px)
 {#sus {font-size: 7vw; padding-left: 30vw; }
  p, li {font-size: 80%; }
  #sus::after {content: none; }
  #meniu {top: 80px; width: 100%; ; }
  .afis2 {padding: 1em; flex-direction:column; }
  .butmen, .butmena {font-size: 70%; font-family: "Open Sans Condensed", sans-serif; }
  .aicipoze {max-width: 75%; }
  .colimg, .coltxt  {max-width: 100%; }
  .colimg2, .coltxt2  {width: 100vw; }
  .spcs {margin-left: 1em; margin-right: 1em; }
  .prev, .next {font-size: 30px; padding: 12px; margin-top: -20px; }
  #cclogo {margin: 5px; }
  #mestel {display: inherit; top: 20px; }
  #ccmap {height: 50vh; }
  #fbtrim {top: 20px; right: 15px; }
  td, th {font-size: 2vw; }
  #tabap2 td, #tabap2 th {font-size: 2.4vw; padding: .3em .6em; }
  #tr_pl {display: none; }
 }
@media screen and (max-width: 480px)
 {#sus, .separ {display: none; }
  p {font-size: 90%; margin: 0; }
  li {font-size: 85%; }
  #fmen {top: 0; }
  #meniu
   {right: 0; width: 0; 
    height: auto; 
    overflow: hidden; 
    flex-flow: column nowrap; 
   }
  .butmen, .butmena {font-family: "Open Sans", sans-serif; font-size: 80%; margin: 4px 0; }
  #fbtrim {position: fixed; right: 68px; top: 10px; z-index: 4;}
  #mestel {position: fixed; right: 120px; top: 10px; z-index: 4;}
  #menmic {display: inherit; height: 25px; }
  .atarns {height: 20px; }
  .aicipoze {max-width: 95%; }
  #ff0 {top:20px;}
  #tabap2 td, #tabap2 th {font-size: 2.8vw; }
  [class*="dot"] {height: 20px; width: 20px; }
 }