:root {
  --blue: #025591;
  --white: #ffffff;
  --orange:#f38244;
}

@font-face {
  font-family: Baamini;
  src: url('Baamini.ttf');
}
.site-col{color:var(--blue);}

.btn-primary{background-color:var(--blue);border-color:var(--blue);}

.topmenus{border-top: 5px solid #f38244;display: flex;background:var(--blue);}
.topmenus a, .footermenus a{width:24%;text-align:center;line-height:1;color:#fff;}
.topmenus a.active{color:var(--orange);}
.topmenus .svg-inline--fa, .footermenus .svg-inline--fa{color:#fff;} 
.topmenus a{width:24%;}
.topmenus .svg-inline--fa.active, .footermenus .svg-inline--fa.active{color:var(--orange);} 
.topmeus small,.footermenus small{font-size:60%;}
.footermenus{display:flex;position:fixed;bottom:0px;background:var(--blue);width:100%;}

.ham_men{position:relative;padding:8px 8px 8px 10px;color: white;background: var(--orange);}

.homes-img{width:50%;padding:2%;}
.homes-img img{width:100%;}

.extrass{color:var(--blue);position:absolute;right: 5%;top: 10px;font-size:20px;}

.go_back {font-size: 12px;color: #f38244;text-align: left;}

.sidepanel  {
  width: 0;
  position: absolute;
  z-index: 1;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--blue);
  overflow-x: hidden;
  transition: 0.5s;
  
  opacity:0.95;
}

.sidepanel a {
  padding: 20px 10px;
  text-decoration: none;
  font-size:14px;
  color: #fff;
  display: block;
  transition: 0.3s;
  border-bottom: 1px dashed #ccc;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel .closebtn {
  position: absolute;
  top: -5px;
  right: 5px;
  font-size: 24px;
  border:none;
}

.closetbtn{color: red;}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: var(--blue);
  color: white;
  padding: 10px 15px;
  border: none;
  position: absolute;
    left: 0;
}

.openbtn:hover {
  /*background-color:var(--blue);*/
}

.timeline-item {
    background: var(--blue);
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;
    margin: 0 auto;
    max-width: 472px;
    color:#fff;
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 50px;
    position: relative;
}

.timeline-wrapper {
    width: 33%;
    float: left;
    padding: 2%;
}