

.color-tool-buttons {
  position: absolute;
  top: 65%;
  left: 23.5%;
}
.btn-colorsmart {
    position: absolute;
    top: 75%;
    left: 63%;
}

.color-tools .color-tools-hero {
  position: relative;
  top: 0px;
}
.color-tools .color-tools-hero > img {
  margin: auto;
}

.color-tools .color-tools-hero .figure-caption > h4 {
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}
.color-tools .color-tools-hero .figure-caption {
  position: absolute;
  top: 60%;
  left: 31%;
  width: 38%;
}

.color-tools .color-tools-hero .figure-caption .btn {
  position: relative;
  right: 0;
  left: 0;
  margin: auto;
  display: block;
}


.color-tools-info > div:nth-child(even) > div:first-child {
  padding-right: 6% !important;
}


.color-tools .color-tools-hero .figure-caption > p {
  max-width: 460px;
  font-size: 14px;
}


.color-tools-info .btn {
  width: fit-content;
}
.colortoolsh4 {
  font-size: 24px;
  font-weight: 700;	
}	
.color-tools-info h4 {
  font-size: 24px;
  font-weight: 600;
}
.color-tools-info h5 {
  font-size: 18px;
  font-weight: 600;
}
.color-tools-info p {
  font-size: 14px;
  font-weight: 400;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.btn-colorsmart {
		left: 68%;
	}
}
@media screen and (max-width: 991px) {  
  .color-tools .color-tools-hero .figure-caption > h4 {
    font-size: 16px;
    margin: 0;
  }
  .color-tools .color-tools-hero .figure-caption > p {
    font-size: 10px;
    margin-bottom: 5px;
  }
  
  .color-tool-buttons {
    top: 50%;
    left: 9%;
    width: 46%;
  }
  
  .color-tools-info {
    overflow: hidden;
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
  }
  .color-tools-info img {
    max-width: 112%;
    margin-left: -6%;    
  }
}

@media screen and (min-width: 992px) {
  .tools {
    -moz-box-shadow: inset 0px -30px 50px -25px #e0e0e0;
    -webkit-box-shadow: inset 0px -30px 50px -25px #e0e0e0;
    box-shadow: inset 0px -30px 50px -25px #e0e0e0;
    padding-bottom: 100px !important;
    padding-top: 75px !important;    
  }
  .color-tools-info > div:nth-child(odd) > div:last-child {
    padding-left: 6% !important;
  }
}


@media screen and (min-width: 992px) and (max-width: 1450px) {
	.color-tool-buttons {		
		-webkit-box-orient: vertical!important;
		-webkit-box-direction: normal!important;
		-ms-flex-direction: column!important;
		flex-direction: column!important;
	}
}



.scroll-tools .oi {
  color: #f2695b;
}
.scroll-tools .oi:last-child {
  position: relative;
  top: -10px;
  opacity: 0.5;
}