:root{
    --primary-color:red;
    --primary-color-hover:#424242;
  }
  .btn-primary-custom{
    background-color:var(--primary-color);
    color: #fff;

  }

  .btn-primary-custom:hover, .btn-primary-custom:active, .btn-primary-custom:focus{
    background-color:var(--primary-color-hover);
    color: #fff;
  }
  .bg-primary-custom{
    background:var(--primary-color);
  }

  .bg-primary-customs{
    background:var(--primary-color-hover);
  }

  .text-primary-custom{
    color:var(--primary-color);
  }
  .acl{
    color: #fff !important;
  }
body{
    padding: 0;
    margin: 0;
}
.logo{
  max-width: 300px;
}

.cd-headline {
  font-size: 3rem;
  line-height: 1.2;
}

.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}

.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}

.cd-words-wrapper b.is-visible {
  position: relative;
}

.no-js .cd-words-wrapper b {
  opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

/* xclip */
.cd-headline.clip span {
  display: inline-block;
  padding: .2em 0;
}

.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}

.cd-headline.clip .cd-words-wrapper::after {
  /* line */
  content: '';
  position: absolute;
  top: 10%;
  right: 0;
  width: 2px;
  height: 70%;
  background-color: #aebcb9;
}

.cd-headline.clip b {
  opacity: 0;
}

.cd-headline b.is-visible {
  opacity: 1;
  font-weight: 900;
}

  .content {

background-image: url('../img/bg.gif');
height: 450px;
overflow: hidden;
justify-content: left;
width:100%;
color:#fff

} 
  
.content h1{
  margin-top: 180px;
}

.cirx{
  border-radius: 10%;
  height: 100%;
  width: 100%;
}

.cirx i{
  font-size: 80px;
  color: #fff;
}

.card{
  -webkit-box-shadow: 2px 2px 5px 3px #D6D6D6;
box-shadow: 2px 2px 5px 3px #D6D6D6;
}

.card:hover{
  -webkit-box-shadow: 3px 3px 8px 5px #B8B8B8;
box-shadow: 3px 3px 8px 5px #B8B8B8;
}

.card a{
  color: var(--primary-color-hover);
}
.card a:hover{
  color: var(--primary-color);
}

.icos i{
  font-size: larger;
  display: inline-block;

}

.icos i:hover{
  font-size: larger;
  color: var(--primary-color-hover);

}
footer a:hover{
color: var(--primary-color-hover) !important;
text-decoration: none;
}
footer ul{
  list-style: none;
}