* {
	box-sizing: border-box;
}


/*Hide the images by default*/
.mySlides {
	display: none;
}

/* Left and Right click arrow icons */
.arrow-left {
	width: 25px;
	height: 25px;
	margin-top: 90px;
	background-image: url('../images/arrow-icon-left-click_off_02.png');
	display: inline-block;
}

.arrow-right {
	width: 25px;
	height: 25px;
	margin-top: 90px;
	background-image: url('../images/arrow-icon-right-click_off_02.png');
	display: inline-block;
	
}

.arrow-left {
	/*margin-right: 35px;*/
	text-indent: -10000px; /*Hide the 'play video' button by moving it to the left 10000 pixels off the screen*/
}

.arrow-right {
	/*margin-left: 35px*/
	text-indent: -10000px; /*Hide the 'play video' button by moving it to the left 10000 pixels off the screen*/
}

.arrow-left.active,
.arrow-left:hover {
	background-image: url('../images/arrow-icon-left-click_on_02.png');
	cursor: pointer;
}

.arrow-right.active,
.arrow-right:hover {
	background-image: url('../images/arrow-icon-right-click_on_02.png');
	cursor: pointer;
}


/* Carousel container */
.dot {
	cursor: pointer;
	width: 130px;
	height: 146px;
	display: inline-block;
	transition: background-color 0.6s ease;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0px 0px;
}




/*Fading animation*/
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

@keyframes upVideo {
	0% {
		opacity: 0;
		bottom: -20px;
	}

	100% {
		opacity: 1;
		bottom: 0px;
	}
}


.carouselContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 10px;
    margin: 50px auto 20px auto;
    text-align: center;
    max-width: 850px;
}


.headshotscontainer {
    justify-content: center;
    margin: auto;
    overflow: hidden;
    border: 0px solid red;
    max-width: 750px;
}

.headshotscontent {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}


.formulas {
    position: relative;
    left: 250px;
    animation: 10s story-content-wrapper infinite;
    border: 0px solid red;
    /*-- POSITION LEFT SHIFTS EACH BOX OVER, SO THE ACTIVE BOX IS IN THE MIDDLE --*/
    /*-- BECAUSE OF RELATIVE POSITIONING, PUTTING A WIDTH ON THIS DOES NOTHING --*/
}


.formula-item {
    text-align: center;
    margin: 0px;
    padding-bottom: 10px;
    width: 250px;
    border: 0px solid red;
    /*-- BECAUSE OF RELATIVE POSITIONING ABOVE, USE THIS CLASS TO DEFINE WIDTH OF 250px --*/
}

.white-carousel-box {
    width: 220px;
    margin: auto;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    /*-- USE THIS CLASS TO FORMAT THE INSIDE WITH WHITE BACKGROUND, AND FIXED WIDTH TO SIMULATE PADDING --*/
}


.item-border-bottom {
    border-bottom: 3px solid #b1d0dc;
    padding-bottom: 5px;
    opacity: 0.4;
    /*-- THE INSIDE OF THE CAROUSEL BOX.  IT STARTS FADED OPACITY. --*/
}

.item-border-bottom a {
    display: block;
}

    .item-border-bottom:hover {
        opacity: 0.9;
        transition-duration: .2s;
    }


    .item-border-bottom.active {
        border-bottom: 3px solid #09a2dd;
        width: 220px;
        margin: auto;
        opacity: 1;
        transition-duration: .2s;
    }

.item-border-bottom img {
    width: 130px;
}



.formula-name {
    font-size: 14px;
    color: #0066a5;
    font-weight: bold;
    filter: Alpha(opacity=20); /* IE8 and earlier */
}

	.formula-name.active {
		
		filter: Alpha(opacity=100); /* IE8 and earlier */
	}

.no-style {
	font-size: 14px;
	color: #000;
	font-weight: normal;
	
}


.feature-products-carousel-block {
	margin-top: -80px;
    z-index: 2;
}


@media all and (max-width:800px) {

    .feature-products-carousel-block {
        margin-top: -200px;
    }

}


@media all and (max-width:800px) {

	.formulas {
		left: -111px;
	}

	.sliderImageNav {
        width: 90%;
        top: 0;
        bottom: 0;
    }

	.carouselContainer {
        overflow-x: auto;
        margin-top: 170px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0px;
        text-align: center;
        width: 300px;
        justify-content: center;
    }

    .formula-item {
        position: relative;
    }

	.arrow-left {
		position: relative;
	}

	.arrow-right {
		position: relative;
		right: auto;
	}

    .headshotscontainer {
        justify-content: center;
        margin: auto;
        overflow: hidden;
    }

    .headshotscontent {
    }

}





    /* --- WIDTH OF CONTAINER IS 750PX --- */
    /* --- SINCE THERE ARE 3 BOXS IN EACH CONTAINER --- */
    /* --- EACH CLICK ANIMATES BY 250PX --- */

    .animatemove1 {
        margin-left: 0px;
        animation-duration: 0.5s;
        animation-name: moveslide1;
        animation-timing-function: ease-out;
    }
    .animatemove1b {
        margin-left: 0px;
        animation-duration: 0.5s;
        animation-name: moveslide1b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #0 -- */
    .animatemove2 {
        margin-left: -250px;
        animation-duration: 0.5s;
        animation-name: moveslide2;
        animation-timing-function: ease-out;
    }
    .animatemove2b {
        margin-left: -250px;
        animation-duration: 0.5s;
        animation-name: moveslide2b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #1 -- */
    .animatemove3 {
        margin-left: -500px;
        animation-duration: 0.5s;
        animation-name: moveslide3;
        animation-timing-function: ease-out;
    }
    .animatemove3b {
        margin-left: -500px;
        animation-duration: 0.5s;
        animation-name: moveslide3b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #2 -- */
    .animatemove4 {
        margin-left: -750px;
        animation-duration: 0.5s;
        animation-name: moveslide4;
        animation-timing-function: ease-out;
    }
    .animatemove4b {
        margin-left: -750px;
        animation-duration: 0.5s;
        animation-name: moveslide4b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #3 -- */
    .animatemove5 {
        margin-left: -1000px;
        animation-duration: 0.5s;
        animation-name: moveslide5;
        animation-timing-function: ease-out;
    }
    .animatemove5b {
        margin-left: -1000px;
        animation-duration: 0.5s;
        animation-name: moveslide5b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #4 -- */
    .animatemove6 {
        margin-left: -1250px;
        animation-duration: 0.5s;
        animation-name: moveslide6;
        animation-timing-function: ease-out;
    }
    .animatemove6b {
        margin-left: -1250px;
        animation-duration: 0.5s;
        animation-name: moveslide6b;
        animation-timing-function: ease-out;
    }

    /* -- FORMULA #5 -- */
    .animatemove7 {
        margin-left: -1500px;
        animation-duration: 0.5s;
        animation-name: moveslide7;
        animation-timing-function: ease-out;
    }
    .animatemove7b {
        margin-left: -1500px;
        animation-duration: 0.5s;
        animation-name: moveslide7b;
        animation-timing-function: ease-out;
    }


    /* -- FORMULA #6 -- */
    .animatemove8 {
        margin-left: -1750px;
        animation-duration: 0.5s;
        animation-name: moveslide8;
        animation-timing-function: ease-out;
    }

    .animatemove8b {
        margin-left: -1750px;
        animation-duration: 0.5s;
        animation-name: moveslide8b;
        animation-timing-function: ease-out;
    }



    /* -- FORMULA #7 -- */
    .animatemove9 {
        margin-left: -2000px;
        animation-duration: 0.5s;
        animation-name: moveslide9;
        animation-timing-function: ease-out;
    }

    .animatemove9b {
        margin-left: -2000px;
        animation-duration: 0.5s;
        animation-name: moveslide9b;
        animation-timing-function: ease-out;
    }


    /* -- FORMULA #8 -- */
    .animatemove10 {
        margin-left: -2250px;
        animation-duration: 0.5s;
        animation-name: moveslide10;
        animation-timing-function: ease-out;
    }

    .animatemove10b {
        margin-left: -2250px;
        animation-duration: 0.5s;
        animation-name: moveslide10b;
        animation-timing-function: ease-out;
    }







    @keyframes moveslide1 {
        from {margin-left: 250px;}
        to {margin-left: 0px;}
    }
    @keyframes moveslide1b {
        from {margin-left: -250px;}
        to {margin-left: 0px;}
    }


    @keyframes moveslide2 {
        from {margin-left: 0px;} /* Start at 0px left */ /* Right clicks arrow slider */
        to {margin-left: -250px;} /* End at -250px left */ /* Right clicks arrow slider */
    }
    @keyframes moveslide2b {
        from {margin-left: -500px;} /* Start at -500px left */ /* Left clicks arrow slider */
        to { margin-left: -250px;} /* End at -250px left */ /* Left clicks arrow slider */
    }


    @keyframes moveslide3 {
        from {margin-left: -250px;}
        to {margin-left: -500px;}
    }
    @keyframes moveslide3b {
        from {margin-left: -750px;}
        to {margin-left: -500px;}
    }


    @keyframes moveslide4 {
        from {margin-left: -500px;}
        to {margin-left: -750px;}
    }
    @keyframes moveslide4b {
        from {margin-left: -1000px;}
        to {margin-left: -750px;}
    }


    @keyframes moveslide5 {
        from {margin-left: -750px;}
        to {margin-left: -1000px;}
    }
    @keyframes moveslide5b {
        from {margin-left: -1250px;}
        to {margin-left: -1000px}
    }


    @keyframes moveslide6 {
        from {margin-left: -1000px;}
        to {margin-left: -1250px;}
    }
    @keyframes moveslide6b {
        from {margin-left: -1500px;}
        to {margin-left: -1250px;}
    }



    @keyframes moveslide7 {
        from {margin-left: -1250px;}
        to {margin-left: -1500px;}
    }
    @keyframes moveslide7b {
        from {margin-left: -1750px;}
        to {margin-left: -1500px;}
    }



    @keyframes moveslide8 {
        from {margin-left: -1500px;}
        to {margin-left: -1750px;}
    }
    @keyframes moveslide8b {
        from {margin-left: -2000px;}
        to {margin-left: -1750px;}
    }



    @keyframes moveslide9 {
        from {margin-left: -1750px;}
        to {margin-left: -2000px;}
    }
    @keyframes moveslide9b {
        from {margin-left: -2250px;}
        to {margin-left: -2000px;}
    }



    @keyframes moveslide10 {
        from {margin-left: -2000px;}
        to {margin-left: -2250px;}
    }
    @keyframes moveslide10b {
        from {margin-left: -2500px;}
        to {margin-left: -2250px;}
    }











    @media all and (max-width:800px) {
        /*--- FOR MOBILE, MOVE EACH OVER BY 250px ---*/
        /*--- 140, 390, 640, 890, 1140, 1390, 1640, 1890, 2140, 2390, 2640 ---*/


        .animatemove1 {
            margin-left: 110px;
            animation-duration: 0.5s;
            animation-name: moveslide1;
            animation-timing-function: ease-out;
        }
        .animatemove1b {
            margin-left: 110px;
            animation-duration: 0.5s;
            animation-name: moveslide1b;
            animation-timing-function: ease-out;
        }

 
        .animatemove2 {
            margin-left: -140px;
            animation-duration: 0.5s;
            animation-name: moveslide2;
            animation-timing-function: ease-out;
        }
        .animatemove2b {
            margin-left: -140px;
            animation-duration: 0.5s;
            animation-name: moveslide2b;
            animation-timing-function: ease-out;
        }


        .animatemove3 {
            margin-left: -390px;
            animation-duration: 0.5s;
            animation-name: moveslide3;
            animation-timing-function: ease-out;
        }
        .animatemove3b {
            margin-left: -390px;
            animation-duration: 0.5s;
            animation-name: moveslide3b;
            animation-timing-function: ease-out;
        }


        .animatemove4 {
            margin-left: -640px;
            animation-duration: 0.5s;
            animation-name: moveslide4;
            animation-timing-function: ease-out;
        }
        .animatemove4b {
            margin-left: -640px;
            animation-duration: 0.5s;
            animation-name: moveslide4b;
            animation-timing-function: ease-out;
        }


        .animatemove5 {
            margin-left: -890px;
            animation-duration: 0.5s;
            animation-name: moveslide5;
            animation-timing-function: ease-out;
        }
        .animatemove5b {
            margin-left: -890px;
            animation-duration: 0.5s;
            animation-name: moveslide5b;
            animation-timing-function: ease-out;
        }

 
        .animatemove6 {
            margin-left: -1140px;
            animation-duration: 0.5s;
            animation-name: moveslide6;
            animation-timing-function: ease-out;
        }
        .animatemove6b {
            margin-left: -1140px;
            animation-duration: 0.5s;
            animation-name: moveslide6b;
            animation-timing-function: ease-out;
        }


        .animatemove7 {
            margin-left: -1390px;
            animation-duration: 0.5s;
            animation-name: moveslide7;
            animation-timing-function: ease-out;
        }
        .animatemove7b {
            margin-left: -1390px;
            animation-duration: 0.5s;
            animation-name: moveslide7b;
            animation-timing-function: ease-out;
        }


        .animatemove8 {
            margin-left: -1640px;
            animation-duration: 0.5s;
            animation-name: moveslide8;
            animation-timing-function: ease-out;
        }
        .animatemove8b {
            margin-left: -1640px;
            animation-duration: 0.5s;
            animation-name: moveslide8b;
            animation-timing-function: ease-out;
        }


        .animatemove9 {
            margin-left: -1890px;
            animation-duration: 0.5s;
            animation-name: moveslide9;
            animation-timing-function: ease-out;
        }
        .animatemove9b {
            margin-left: -1890px;
            animation-duration: 0.5s;
            animation-name: moveslide9b;
            animation-timing-function: ease-out;
        }


        .animatemove10 {
            margin-left: -2140px;
            animation-duration: 0.5s;
            animation-name: moveslide10;
            animation-timing-function: ease-out;
        }
        .animatemove10b {
            margin-left: -2140px;
            animation-duration: 0.5s;
            animation-name: moveslide10b;
            animation-timing-function: ease-out;
        }





        @keyframes moveslide1 {
            from {margin-left: 175px;}
            to {margin-left: 55px;}
        }
        @keyframes moveslide1b {
            from {margin-left: -140px;}
            to {margin-left: 55px;}
        }

        @keyframes moveslide2 {
            from {margin-left: 55px;}
            to {margin-left: -140px;}
        }
        @keyframes moveslide2b {
            from {margin-left: -390px;}
            to {margin-left: -140px;}
        }

        @keyframes moveslide3 {
            from {margin-left: -140px;}
            to {margin-left: -390px;}
        }
        @keyframes moveslide3b {
            from {margin-left: -640px;}
            to {margin-left: -390px;}
        }


        @keyframes moveslide4 {
            from {margin-left: -390px;}
            to {margin-left: -640px;}
        }
        @keyframes moveslide4b {
            from {margin-left: -890px;}
            to {margin-left: -640px;}
        }


        @keyframes moveslide5 {
            from {margin-left: -640px;}
            to {margin-left: -890px;}
        }
        @keyframes moveslide5b {
            from {margin-left: -1140px;}
            to {margin-left: -890px;}
        }


        @keyframes moveslide6 {
            from {margin-left: -890px;}
            to {margin-left: -1140px;}
        }
        @keyframes moveslide6b {
            from {margin-left: -1390px;}
            to {margin-left: -1140px;}
        }


        @keyframes moveslide7 {
            from {margin-left: -1140px;}
            to {margin-left: -1390px;}
        }
        @keyframes moveslide7b {
            from {margin-left: -1640px;}
            to {margin-left: -1390px;}
        }


        @keyframes moveslide8 {
            from {margin-left: -1390px;}
            to {margin-left: -1640px;}
        }
        @keyframes moveslide8b {
            from {margin-left: -1890px;}
            to {margin-left: -1640px;}
        }


        @keyframes moveslide9 {
            from {margin-left: -1640px;}
            to {margin-left: -1890px;}
        }
        @keyframes moveslide9b {
            from {margin-left: -2140px;}
            to {margin-left: -1890px;}
        }


        @keyframes moveslide10 {
            from {margin-left: -1890px;}
            to {margin-left: -2140px;}
        }
        @keyframes moveslide10b {
            from {margin-left: -2390px;}
            to {margin-left: -2140px;}
        }







    }