FEA_12_CLINIC/src/style/style.css

:root {
  --header-color: #d4d5d7;;
 --hover-color: #b1e8ca;
	--opacity-color: rgba(17,17,17,0.8);
}




@font-face {
  font-family: 'icomoon';
  src:  url('../assets/fonts/icomoon.eot?slshll');
  src:  url('../assets/fonts/icomoon.eot?slshll#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?slshll') format('truetype'),
    url('../assets/fonts/icomoon.woff?slshll') format('woff'),
    url('../assets/fonts/icomoon.svg?slshll#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dehaze:before {
  content: "\e903";
  display: none;
  color:  var(--header-color);
  font-size: 35px;
  position: relative;
  top: 15%;
 }
 @media (max-width: 768px) {
  .icon-dehaze:before  {
      display: block;	
  }
}

.icon-angle-left:before {
  content: "\f104";
  color:  var(--opacity-color);
  font-size: 1.7em;
  font-weight: 700;
}
.icon-angle-right:before {
  content: "\f105";
  color:  var(--opacity-color);
  font-size: 1.7em;
  font-weight: 700;
}
.icon-angle-down:before {
  content: "\f107";
  color:  var(--hover-color);
  position: absolute;
  right: 15px;
  top: 22%;
}
.icon-lens:before {
  content: "\e901";
  color:  var(--opacity-color);
  font-size: 1.6em;
  margin: 15px 0;

}
@media (max-width: 1024px) {
	.icon-lens:before {
		color:  var(--hover-color);
	}
}
@media (max-width: 414px) {
	.icon-lens:before {
    color:  var(--hover-color);
    font-size: 1em;
  }
}
@media (max-width: 375px) {
  .icon-lens:before {
    /* color:  var(--hover-color); */
    font-size: 0.9em;
  }
}  
@media (max-width: 320px) {
  .icon-lens:before {
    color:  var(--opacity-color);
    /* font-size: 0.9em; */
  }
}  

.icon-calendar:before {
  content: "\f073";
}
.icon-commenting-o:before {
  content: "\f27b";
}
.icon-phone:before {
  content: "\e942";
}
.icon-clock:before {
  content: "\e94e";
}
.icon-bubbles4:before {
  content: "\e970";
}
.icon-user:before {
  content: "\e971";
}
.icon-exit:before {
  content: "\ea14";
  color:  var(--opacity-color);
  font-size: 1.6em;
}
.icon-location:before {
  content: "\e947";
  font-size: 35px;
}
.icon-phone:before {
  content: "\e942";
  font-size: 35px;
}