/* Import font from Google - Go to fonts.google.com, select a font and look for the import command */

@import url('https://fonts.googleapis.com/css2?family=Georama:wght@100&display=swap');


:root {

    --cassiopeia-color-primary: #b30d2d;
    --cassiopeia-color-link: #0000ff;
    --cassiopeia-color-hover: #ff0000;
  
    --cassiopeia-font-family-body: "Roboto", sans-serif;
    --cassiopeia-font-family-headings: "Roboto", sans-serif;
    --cassiopeia-font-weight-headings: 700;
    --cassiopeia-font-weight-normal: 400;
    
}

.btn-info {
    --btn-bg: #b30d2d;
    --btn-border-color: #470513;
    --btn-hover-bg: #d51038;
    --btn-hover-border-color: #77091f;  
}

/* The page header of Cassiopeia has the class "header" so you control it with .header */
.container-topbar {
  background-color: #f2f2f2;
}

.container-header {
  z-index: 10;
  background-color: var(--cassiopeia-color-primary);
  background-image: linear-gradient(135deg,var(--cassiopeia-color-primary)0%,var(--cassiopeia-color-hover)100%);
  position: relative;
  box-shadow: inset 0 5px 5px #00000008;
}

.header {
/*    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
}
  
/*
Smaller banner
*/
.container-banner .banner-overlay {
    height: 40vh;
}

.container-banner {
    padding: 15px;
}

/* Color the dropdown menu in the menu with the class .metismenu.mod-menu .mm-collapse */

.metismenu.mod-menu .mm-collapse {
    background: #475BAF;
}

/* The links in the dropdown menu you have to adress them individually */

.metismenu.mod-menu .mm-collapse .metismenu-item a {
    color: #fff;
}



  
/* Modules have the class card, so you control them with .card - if you want to control only a specific module, you can give the module its own CSS class in the settings and then control it with that */

.card {
    box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 12px 4px 18px 0px rgba(0, 0, 0, 0.35);
}

/* Modules are on different module positions in the Cassiopeia template then the modules get in addition to card also the position as class name, for example main-top - so if you want to change all modules to main top you take .main-top.card */

.main-top.card {
  padding: 20px;
}

/* Headings are html elements, the main heading is an h1, then comes h2, h3, h4 and so on. You control an html element by simply writing the name in front of it */

h2, h3 {
    color: #b50d2e;
}
  
h1 {
    text-shadow: 1px 1px 4px rgba(119, 9, 31, 1);
    font-weight: bold;
    color: #b50d2e;
}

  
/* In Joomla most buttons have the class btn-primary - in the element inspector you can check if the button you want to color really has this color.
*/

.btn-primary {
    background: rgba(119, 9, 121, 1);
}

/* If you want to color something, only if you move the mouse over it then write :hover after it
*/

.btn-primary:hover {
    background: rgba(0, 212, 255, 1);
}

/* In Joomla all article images have the class item-image, if you want to control only a specific image, then you have to give the image inside the article its own CSS class.
*/

.item-image {
    border: 2px solid #ff0000;
}


/*If you run into icons on the website, you can color them individually*/

.icon-user {
    color: #403678;

}

/* or you color all icons with this special statement*/

.fa, .fas, [class*=" icon-"], [class^="icon-"] {
    color: #403678;
}

/* The page footer of Cassiopeia has the class "footer" so you control it with .footer  */
.footer {
    background: rgb(230, 230, 230);
    color: #8b8b8b;
    height: auto;
    /*background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%); */
}

.footer h1 h2 h3 {
   color: #8b8b8b;
}  

.footer h3 {
  font-size: 1.3rem;
}    

/* line 151, ../../scss/_default.scss */
.float-left {
  float: left;
}

/* line 154, ../../scss/_default.scss */
.float-right {
  float: right;
}

/* line 157, ../../scss/_default.scss */
.clear {
  clear: both;
}

/* header topbar */
.container-nav .grid-child {
  align-items: flex-start;
  row-gap: 2rem;
}
@media (width <= 991.98px) {
  .container-nav .grid-child {
    flex-direction: unset;
  }
  .container-nav .logo {
  margin-bottom: 2px;
  }  
  .container-nav .sign-up {
  margin-bottom: 2px;
  }   
}  
.container-nav .row {
  display: flex;
  justify-content: space-between;
} 

.container-nav .logo {
  flex: 50%;
}  

.container-nav .sign-up {
  justify-content: flex-end;
}  


  
.container-nav .button {
  display: inline-block;
  background:#b30d2d;
  border:1px solid #b30d2d;
  border-radius:3px;
  color: #fff;
  height: 29px;
  line-height: 29px;
  padding:0 12px;
  text-decoration:none;
  cursor: pointer;
}
  
.container-topbar .phone {
  display: inline-block;
  float: left;
  line-height: 30px;
  height: 30px;
  padding:0 12px 0 12px;
  border:1px solid #dedede;
  color: #8b8b8b;
  border-radius:4px;
  font-size: 16px;
  background-color: #f0f0f0;
  margin:0 15px 0 0;
  position: relative;
}

.phone a {
  text-decoration: none;
  }

.phone a:hover, a:active {
  color: #4d4d4d;
  font-weight: bold;
}  

/* Footer roomservice */  
.footer .grid-child {
  align-items: flex-start;
  row-gap: 2rem;
}

@media (width <= 991.98px) {
  .footer .grid-child {
    flex-direction: unset;
  }
}

.footer .row {
  display: flex;
}

.footer .column {
  flex: 50%;
}  

.sidebar-right .card-header {
  margin: 15px 0;
}  
.sidebar-right h3 {
  color: #8b8b8b;
  font-family: Helvetica;
  font-weight: normal !important;
  font-size: 18px;
}
.sidebar-right ul {
  list-style: none;
  color: #606060;
}


.sidebar-right ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background-image: url('/images/sprite.png');
  background-repeat: no-repeat;
  background-size: 700px 700px;
  background-position: -265px -65px;
}

.article-image img {
  max-width: 100%;
  height: auto;  
  display: block; 
  margin-left: auto; 
  margin-right: auto;"
  }


/* Responsive columns blocks: https://dev.to/afif/build-your-responsive-website-without-media-query-omj */
.container {
  /* first breakpoint*/
  --w1:1200px;
  --n:3;
  /* second breakpoint*/
  --w2:800px;
  --m:2;
  /* third breakpoint*/
  --w3:400px;
  --p:1;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(clamp(  
            100%/(var(--n) + 1) + 0.1%,
              (var(--w1) - 100vw)*1000,
            100%/(var(--m) + 1) + 0.1%), 
              (var(--w2) - 100vw)*1000,
            100%/(var(--p) + 1) + 0.1%), 
              (var(--w3) - 100vw)*1000,
            100%), 1fr));
  gap:10px;
}
.container > div {
  background: #f2f2f2;
  border-radius: 15px;
  padding: 10px;
}  
/* END Responsive columns blocks */  


.article-image img {
    border-radius: 15px;
}


/* OS responsive css for footer module not loaded without the page */  
.row-fluid{width:100%;zoom:1;}
.row-fluid [class*=span]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.0744680846383%;}
.row-fluid .span12{width:99.946808500638%;}
.row-fluid .span11{width:91.436170203638%;}
.row-fluid .span10{width:82.925531906638%;}
.row-fluid .span9{width:74.414893609638%;}
.row-fluid .span8{width:65.904255312638%;}
.row-fluid .span7{width:57.393617015638%;}
.row-fluid .span6{width:48.882978718638%;}
.row-fluid .span5{width:40.372340421638%;}
.row-fluid .span4{width:31.861702124638%;}
.row-fluid .span3{width:23.351063827638%;}
.row-fluid .span2{width:14.840425530638%;}
.row-fluid .span1{width:6.3297872336383%;}
/* END OS responsive css for footer module not loaded without the page */