.treatmentAreas {position: relative;}
.treatmentArea {
    position: absolute;
    bottom: auto; right: auto;
    width: 28px; height: 28px;
    background:transparent url(../img/target-area.png) no-repeat center center;
	background-size: 100% auto;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
    transition: all 0.2s;
}
.treatmentArea:hover {
    background:transparent url(../img/target-area-hover.png) no-repeat center center;
	background-size: 100% auto;
    transform: scale(1.15);
}
.area-1 {top: 24.43%; left: 7.4%;}
.area-2 {top: 40.29%; left: 12.3%;}
.area-3 {top: 35.71%; left: 60.1%;}
.area-4 {top: 30.43%; left: 82.2%;}
.area-5 {top: 35.86%; left: 29.2%;}
.sectionAppAreas h2, .sectionWhatIsAlgeness h2 {text-align: center; color: #4f5564; font-family: fontAlgness, sans-serif; font-size: 6rem; line-height: 1;}
.sectionAppAreas p, .sectionWhatIsAlgeness p {line-height: 1.5rem}
h3.wysiwyg, h3.natural {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 3px;
    position: absolute;
}
h3.wysiwyg {
    padding: 10px;
    border: 1px solid #000000;
    border-radius: 6px;
    top: 25%;
    left: 30%;   
}
h3.wysiwyg span {font-weight: 900;}
h3.natural {
    color: #ffffff;
    padding: 25px 15px;
    background-color: rgba(79, 152, 184, 0.3);
    bottom: 22%;
    left: 56%;
    line-height: 1.5;
    font-weight: 500;
}
.sectionWhatIsAlgeness .carousel {margin-bottom: 25px; height: 325px;}

.appAreas {padding: 35px 0 50px;}
.correctionZone {
	overflow:hidden;
	width: 20%;
	float: left;
	position: relative;
}
.correctionZone img{
	-moz-transition: all 0.25s linear 0s;
  	-o-transition: all 0.25s linear 0s;
  	-webkit-transition: all 0.25s linear 0s;
	transition: all 0.25s linear 0s;
}
.correctionZone:hover img {transform: scale(1.2)!important; transition-delay: 0s!important;}
.correctionZone .inner {
	background-color: #4f5564;
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-moz-transition: all 0.5s linear 0s;
  	-o-transition: all 0.5s linear 0s;
  	-webkit-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
	text-align: center;
}
.correctionZone:hover .inner {opacity:0.85;}
.correctionZone .inner div {
	position:absolute;
	bottom: 20%;
	width: 100%;
}
.correctionZone h3 {
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 3px;
    font-size: 1rem;
    font-weight: 600;
    position: absolute;
    top: 48.5%;
    left: 0; right: 0;
    text-align: center;
}
.home .sectionBeforeAfter, .home .sectionAppAreas, .home .sectionWhatIsAlgeness {padding-bottom: 50px;}
.home h1 {text-align: center; letter-spacing: 3px; text-transform: uppercase; font-size: 1.25rem; margin: 75px 0 50px;}
.home .questionsAnswers {padding: 5% 12% 2%!important;}
.home .banner {padding-top: 20%;}
.home .questionsAnswers h3 {color: #4f5564; font-size: 1.15rem; font-weight: 600; margin: 20px 0 10px;}
.home .questionsAnswers p {line-height: 22px; font-weight: lighter;}
.correctionZone span.btnCircle, .correctionZone span.btnCircle:link, .correctionZone span.btnCircle:focus {
	color: #40454d;
	background-color: #ffffff;
}
.correctionZone span.btnCircle:hover {
	color: #40454d;
	background-color: #d4d1d1;
}
.interrogationPoint {position: absolute; top: 0; right: 0; left: 0;}    
@media (min-width: 1px) and (max-width: 575px) { /* XS */
	.sectionAppAreas h2, .sectionWhatIsAlgeness h2 {font-size: 3.5rem;}
	.home .banner {padding-top: 55%; min-height: 250px;}
	.home h1 {font-size: 1.05rem; margin: 35px 0 25px;}
	.correctionZone {width: 100%;}
	.correctionZone .inner div {bottom: 15%;}
	h3.wysiwyg, h3.natural {font-size: 0.75rem;}
    h3.wysiwyg {top: 13%; left: 3%;}
    h3.natural {bottom: 0%; left: 45%; padding: 15px 10px;}
	.area-1 {top: 21.43%; left: 4.4%;}
	.area-2 {top: 36.29%; left: 10.3%;}
	.area-3 {top: 30.71%; left: 56.1%;}
	.area-4 {top: 28.43%; left: 79.2%;}
	.area-5 {top: 32.86%; left: 27.2%;}
}
@media (min-width: 576px) and (max-width: 767px) { /* SM */
    .sectionAppAreas h2, .sectionWhatIsAlgeness h2 {font-size: 4.5rem;}
	.home .banner {min-height: 350px;}
    .home h1 {font-size: 1.15rem; margin: 45px 0 35px;}
	.correctionZone {width: 50%;}
	.correctionZone .inner div {bottom: 15%;}
	h3.wysiwyg, h3.natural {font-size: 0.85rem;}
    h3.wysiwyg {top: 13%; left: 11%;}
    h3.natural {bottom: 5%; left: 60%; padding: 20px 13px;}
}
@media (min-width: 768px) and (max-width: 991px) { /* MD */
    .sectionAppAreas h2, .sectionWhatIsAlgeness h2 {font-size: 5.25rem;}
	.home .banner {min-height: 450px;}
    .home h1 {font-size: 1.25rem; margin: 75px 0 50px;}
	.correctionZone {width: 33.333333333%;}
	.correctionZone .inner div {bottom: 17.5%;}
	h3.wysiwyg, h3.natural {font-size: 0.95rem;}
    h3.wysiwyg {top: 18%; left: 14%;}
    h3.natural {bottom: 7%; left: 58%; padding: 20px 13px;}
}
@media (min-width: 992px) and (max-width: 1199px) { /* LG */
	.correctionZone {width: 33.333333333%;}
	.correctionZone .inner div {bottom: 17.5%;}
	h3.wysiwyg, h3.natural {font-size: 1rem;}
    h3.wysiwyg {top: 25%; left: 20%;}
    h3.natural {bottom: 20%; left: 50%; padding: 25px 15px;}
}
@media (min-width: 1200px) and (max-width: 1400px) {/* EXTRA */
    h3.wysiwyg, h3.natural {font-size: 1rem;}
    h3.wysiwyg {top: 25%; left: 22%;}
    h3.natural {bottom: 20%; left: 50%; padding: 25px 15px;}
}
.headband {background-color: #ece9e9;}
.headband .contentHead {
	position: absolute; left: 0; right: 0; margin: 0;
	top: -webkit-calc(50% - 110px);
	top: -moz-calc(50% - 110px);
	top: calc(50% - 110px);
	z-index: 5;
}
.headband .contentHead h1 {text-align: center; color: #4f5564; font-family: fontAlgness, sans-serif; line-height: 1; text-transform: inherit; font-size: 6rem; margin: 0 0 25px;}
.headband .contentHead button {display: block}
.headband .contentHead .btnRectangle, .headband .contentHead .btnRectangle:link {
    padding: 9px 15px 8px;
    border: none;
    color: #ffffff;
    margin: 0;
	background-color: rgba(0, 0, 0, 0.35);
	letter-spacing: 3px;
}
.headband .contentHead .btnRectangle:hover {
    border: none;
    color: #ffffff;
    background-color: #4f5564;
}
@media (min-width: 1px) and (max-width: 575px) { /* XS */
    .headband .contentHead h1 {
        font-size: 2.25rem;
	}
	.headband .contentHead {
        top: -webkit-calc(50% - 40px);
        top: -moz-calc(50% - 40px);
        top: calc(50% - 40px);
    }	
}
@media (min-width: 576px) and (max-width: 767px) { /* SM */
    .headband .contentHead h1 {
        font-size: 3.5rem;
	}
	.headband .contentHead {
        top: -webkit-calc(50% - 62px);
        top: -moz-calc(50% - 62px);
        top: calc(50% - 62px);
    }
}
@media (min-width: 768px) and (max-width: 991px) { /* MD */
    .headband .contentHead h1 {
        font-size: 4.5rem;
	}
	.headband .contentHead {
        top: -webkit-calc(50% - 110px);
        top: -moz-calc(50% - 110px);
        top: calc(50% - 110px);
    }
}
@media (min-width: 992px) and (max-width: 1199px) { /* LG */
    .headband .contentHead h1 {
        font-size: 4rem;
	}
	.headband .contentHead {
        top: -webkit-calc(50% - 70px);
        top: -moz-calc(50% - 70px);
        top: calc(50% - 70px);
    }
}
@media (min-width: 1200px) and (max-width: 1400px) { /* XL */
    .headband .contentHead h1 {
        font-size: 5rem;
	}
	.headband .contentHead {
        top: -webkit-calc(50% - 110px);
        top: -moz-calc(50% - 110px);
        top: calc(50% - 110px);
    }
}
.blockBeforeAfter {margin-bottom: 25px;}
.ba-slider {height: 310px;}
@media (min-width: 1px) and (max-width: 575px) { /* XS */
	.blockBeforeAfter {margin-bottom: 35px;}
	.ba-slider {height: auto;}
}
@media (min-width: 576px) and (max-width: 767px) { /* SM */
	.blockBeforeAfter {margin-bottom: 35px;}
	.ba-slider {height: 294px;}
}
@media (min-width: 768px) and (max-width: 991px) { /* MD */
	.blockBeforeAfter {margin-bottom: 25px;}
	.ba-slider {height: 295px;}
}
@media (min-width: 992px) and (max-width: 1199px) { /* LG */
	.ba-slider {height: 310px;}
}