@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic');
@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed&display=swap');

* {
    transition: ease all 0.5s;
}
@media (min-width: 401px) {
    .scroll-text{
        height: 300px;
    }
}
@media (min-width: 1px) and (max-width: 400px) {
    .scroll-text{
        height: 200px;
    }
}


.sofia{
    font-family: 'Sofia Sans Condensed', sans-serif;
    letter-spacing: .3em;
    
    font-size: 2em;
}
html {
    scroll-behavior: smooth;

}

body {
    color: #666666;
    font-family: 'Sofia Sans Condensed', Lato;
    font-weight: normal;
    letter-spacing: .3em;
    background-image: url(../images/pageback.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
	background-color: #fafafa;
}
.bodyOverlay{
    background-color: #DDD3;

}
footer{
    font-size: xx-small;
    color: #ddd;
}
.bg-whiteish{
    background-color: #fafafa77;
}
.wide-text{
    letter-spacing: .6em;
    transition: ease all 3s;
}

.card-header{
    background-color: #fff0 !important;
    /* background-color: #fedde245 !important; */
}
.card{
    background-color: #fff0 !important;
}

a {
    color: #666;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
a:hover {
    color: #666;
    background-color: #fedde280;
    text-decoration: none;
}

.scroll-text {
    text-transform: uppercase;
    /* height: 200px;	 */
    overflow: hidden;
    position: relative;
    background-image: url(../images/mainbanner.jpg);
    /* background-attachment: fixed; */
    background-size: cover;
    background-repeat: no-repeat;
}
.scroll-text h1 {
   font-size: 6em;
   color: #fafaff;
   letter-spacing: .4em;
   text-shadow: #1f1f1f 1px 1px;
   position: absolute;
   /* width: 100%; */
   height: 100%;
   margin: 0;
   text-align: center;
   white-space: nowrap;
   /* Starting position */
   -moz-transform:translateX(100%);
   -webkit-transform:translateX(100%);	
   transform:translateX(100%);
   /* Apply animation to this element */	
   -moz-animation: example1 20s linear infinite;
   -webkit-animation: example1 20s linear infinite;
   animation: example1 30s linear infinite;
  }
  /* Move it (define the animation) */
  @-moz-keyframes example1 {
   0%   { -moz-transform: translateX(100%); }
   100% { -moz-transform: translateX(-100%); }
  }
  @-webkit-keyframes example1 {
   0%   { -webkit-transform: translateX(100%); }
   100% { -webkit-transform: translateX(-100%); }
  }
  @keyframes example1 {
   0%   { 
   -moz-transform: translateX(100%); /* Firefox bug fix */
   -webkit-transform: translateX(100%); /* Firefox bug fix */
   transform: translateX(100%); 		
   }
   100% { 
   -moz-transform: translateX(-100%); /* Firefox bug fix */
   -webkit-transform: translateX(-100%); /* Firefox bug fix */
   transform: translateX(-100%); 
   }
}
.iconHair{
  background-image: url('../images/s3.png');
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: top;
  display: inline-block;
  height: 150px;
  width: 100px;
}
.iconColor{
    background-image: url('../images/s1.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: top;
    display: inline-block;
    height: 150px;
    width: 100px;
 }
 .iconFlat{
    background-image: url('../images/s2.png');
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: top;
    display: inline-block;
    height: 100px;
    width: 100px;
 }
.services{
    background-image: url('../images/services.webp');
    background-size: contain;
    background-repeat: no-repeat;
}

.review1{
    background-image: url('../images/review1.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    min-height: 150px;
}