/* ----------- FOOTER ----------- */
/* ----------- FOOTER ----------- */
/* ----------- FOOTER ----------- */

.footerstyle {
    text-align: center;
    color: #ffffff;
}

.socialmediaicon {
    width: 25px;
    margin-left: 5px;
    margin-right: 5px;
}

.footerlinks {
	color: #39b3de;
	font-size: 12px;
} 

.footerlinks a {
    padding: 0px 5px 0px 5px;
    color: #ffffff;

}


.followsocialbox {
    text-align: center;
    border: 2px solid #ffffff;
    line-height: 0.1em;
    margin: 30px 0px;
    color: #0066a5;
    display: inline-block;
    width: 300px;
    border-radius: 10px;
}

    .followsocialbox span {
        background: #024ea4;
        padding: 0 20px;
        color: #ffffff;
    }

    .followsocialbox p {
        line-height: 20px;
        padding-top: 5px;
    }



/* ----------- CONTRAST SWITCH BUTTON ----------- */
.contrastbuttonbox {
	margin-top: 20px;
	text-align: center;
}

.contrastbutton {
	font-size: 12px;
	/*margin: 15px 5px 0px 0px;*/
	margin-top: 15px;
	margin-left: -40px;
}


/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 22px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	margin-left: 30px;
	width: 48px;
	height: 22px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 15px;
}

    .slider.round:before {
        border-radius: 50%;
    }




/* ----------- FOOTER ----------- */
/* ----------- FOOTER ----------- */
/* ----------- FOOTER ----------- */




/* ----------- HOME PAGE ----------- */
/* ----------- HOME PAGE ----------- */
/* ----------- HOME PAGE ----------- */

.bannerintro {
    width: 90%;
font-size: 17px;
}

.smallformulalineup {
    display: flex;
    justify-content: space-around;
    width: 90%;
    margin-top: 5px;
}

.smallformulalineup img {
    width: 90px;
}




/* ----------- BANNER SLIDESOW ON HOME PAGE ----------- */



.home-partner .home-partner-slide {
    position: relative;
    height: 290px;
}

    .home-partner .home-partner-slide .partner-logo {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        position: absolute;
        -webkit-transition: visibility 0s linear 800ms, opacity 800ms;
        -moz-transition: visibility 0s linear 800ms, opacity 800ms;
        -o-transition: visibility 0s linear 800ms, opacity 800ms;
        transition: visibility 0s linear 800ms, opacity 800ms;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        visibility: hidden;
    }

        .home-partner .home-partner-slide .partner-logo.opaque {
            opacity: 1;
            transition: visibility 0s linear 0s, opacity 800ms;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=1);
            visibility: visible;
        }

        .home-partner .home-partner-slide .partner-logo .logo-section div {
            width: 100%;
            height: 100%;
        }

	/*.home-partner .home-partner-slide .partner-slide-nav {
		position: absolute;
		bottom: -10px;
		right: 50%;
	}*/

	.home-partner .home-partner-slide .partner-slide-nav {
		position: absolute;
		bottom: -10px;
		width: 100%;
		text-align: center;
	}

        .home-partner .home-partner-slide .partner-slide-nav p {
            width: 12px;
            height: 12px;
            background-color: #09a2dc;
            display: inline-block;
            cursor: pointer;
            border-radius: 50%;
            margin: 0px 7px 0px 0px !important;
        }

            .home-partner .home-partner-slide .partner-slide-nav p:last-child {
                margin-right: 0px !important;
            }

            .home-partner .home-partner-slide .partner-slide-nav p.active {
                background-color: #ffffff;
            }






/* ----------- BANNER SLIDESOW ON HOME PAGE ----------- */






/* ----------- HOME PAGE ----------- */
/* ----------- HOME PAGE ----------- */
/* ----------- HOME PAGE ----------- */






/* ----------- FIND YOUR FORMULA ----------- */
/* ----------- FIND YOUR FORMULA ----------- */
/* ----------- FIND YOUR FORMULA ----------- */

#FindYourFormula {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    max-width: 800px;
}



.formulalist {
    padding: 20px;
    font-size: 16px;
    text-align: center;
    margin: 0px 10px 0px 10px;
    width: 22%;
}

    .formulalist img {
        width: 120px;
        display: block;
        padding-bottom: 5px;
        margin: auto;
    }

.soycan img {
    width: 90px;
}

.hypocan img {
    width: 74px;
}

.blueoutline {
    border: 1px solid #306FAE;
}


/* ----------- FIND YOUR FORMULA ----------- */
/* ----------- FIND YOUR FORMULA ----------- */
/* ----------- FIND YOUR FORMULA ----------- */


/* ----------- FORMULA PAGES ----------- */
/* ----------- FORMULA PAGES ----------- */
/* ----------- FORMULA PAGES ----------- */

.formulapageformula {
    width: 200px;
}

.checkmarkbox {
    background-color: #f6f6f6;
    padding: 20px;
    display: inline-block;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    border: 1px solid #ededed;
}

.checkmarkbox li {
    padding: 10px 10px 10px 40px;
    list-style: none;
    background-image: url("../images/bluecheckmark.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px;
    color: #0066a5;
    display: inline-block;
    width: 100%;
}

.checkmarktitle {
    background-color: #ededed;
    padding: 10px;
    color: #024ea4;
    font-weight: bold;
}



 /* ----------- INGREDIENT TABLE ----------- */
.IngredientTable {
	border: 1px solid #f6f6f6;
	margin: auto;
	font-size: 12px;
	box-shadow: 0px 0px 10px #dddddd;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
	padding-left: 4%;
	padding-right: 4%;
	padding-bottom:10px;
}


.IngredientTableRow {
	display: flex;
	flex-direction: row;
}

.IngredientTableTop {
    align-items: flex-end;
}


.IngredientTableRow > :nth-child(1) {
    min-width: 20px;
}

.IngredientTableRow > :nth-child(2) {
width: 220px;
padding: 5px 15px 5px 15px;
			
}


/* Products Comparison Rows & Columns */
.IngredientTableRow > :nth-child(3),
.IngredientTableRow > :nth-child(4),
.IngredientTableRow > :nth-child(5) {
	width: 180px;
	text-align: center;
	border-bottom: 1px solid #eeeeee;
}


.IngredientTableRow > :nth-child(3) {
background-color: #f6f6f6;
}

.IngredientTableTop {
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid #09a2dd;
}

.IngredientTableHead {
color: #0066a5;
font-weight: bold;
font-size: 14px;
}

.IngredientTableHead img {
	width: 17px;
	margin-top: 20px;
					
}

.tableprice {
color: #0066a5;
}

.IngredientTable .image-responsive {
	max-width: 150px;
	height: auto;	
}



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


	/*Responsive font*/
	.IngredientTableRow {
		font-size: 100%;
	}

	.IngredientTable .image-responsive {
		max-width: 100%;
	}

}



/* ----------- INGREDIENT TABLE ----------- */





.FormulaPageSavings {
    display: flex;
    flex-direction: row;
}

.FormulaPageSavingsBrands {
    width: 30%;

}

.FormulaPageSavings p {
    margin: 8px;
}

.FormulaPageSavingsResults {
    width: 70%;
    border-bottom: 2px solid #39b3de;
    box-shadow: 0px 0px 10px #dddddd;
    padding: 20px;
}

.FormulaPageSavingsAmount {
	color: #f05f91;
	/*font-size: 32px;*/
	font-size: 28px;
	font-weight: bold;
	padding: 15px 0px 15px 0px;
	white-space: nowrap;
}

.FormulaPageSavingsUnderline {
    border-bottom: 2px solid #09a2dd;
    width: 80%;
}

.FormulaPageSavingsResults img {
    width: 200px;
    margin-top: 40px;
    float: right;
}

.FormulaPageCallout {
    padding: 0px 5px 20px 30px;
    display: block;
    width: 100%;
    margin-bottom: 3px;
    background-image: url("../images/icon-arrow-right.png");
    background-repeat: no-repeat;
    background-position: 0px 2px;
    background-size: 20px;
    margin: 10px 0px 0px 0px;
}

.SB-NB-label {
	color: #f05f91
}

/* ----------- FORMULA PAGES ----------- */
/* ----------- FORMULA PAGES ----------- */
/* ----------- FORMULA PAGES ----------- */




/* ----------- HOW TO PREPARE ----------- */
/* ----------- HOW TO PREPARE ----------- */
/* ----------- HOW TO PREPARE ----------- */

.howtopreparedo, .howtopreparedont {
    border-bottom: 2px solid #09a2dd;
    box-shadow: 0px 0px 10px #dddddd;
    padding: 5px 20px 5px 20px;
    width: 45%;
    margin-bottom: 10px;
}

.howtopreparedo li {
    padding: 5px 10px 5px 40px;
    list-style: none;
    background-image: url("../images/bluecheckmark.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 25px;
    color: #0066a5;
    display: inline-block;
    width: 100%;
    margin-left: -20px;
    margin-bottom: 10px;
}

    .howtopreparedont li {
        padding: 5px 10px 5px 40px;
        list-style: none;
        background-image: url("../images/redx.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 25px;
        color: #0066a5;
        display: inline-block;
        width: 100%;
        margin-left: -20px;
        margin-bottom: 10px;
    }



    /* ----------- HOW TO PREPARE ----------- */
    /* ----------- HOW TO PREPARE ----------- */
    /* ----------- HOW TO PREPARE ----------- */






    /* ----------- EXPERTS PAGE ----------- */
    /* ----------- EXPERTS PAGE ----------- */
    /* ----------- EXPERTS PAGE ----------- */


    .panelexpert {
        border-bottom: 2px solid #09a2dd;
        padding: 10px 20px 10px 20px;
        border-top: 1px solid #e8e8e8;
        border-left: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        width: 90%;
        margin-bottom: 20px;
    }

    .expertname {
        color: #024ea4;
        font-size: 20px;
        font-weight: bold;
        margin-top: 8px;
    }

    .experttitle {
        color: #39b3de;
        font-size: 14px;
        font-weight: bold;
    }

    .expertcard {
        display: flex;
        flex-direction: row;
    }

    .expertphoto img {
        width: 150px;
        border: 0px solid #272727;
        margin-top: 10px;
    }

    .expertbio {
        margin-left: 20px;
    }




    /* ----------- EXPERTS PAGE ----------- */
    /* ----------- EXPERTS PAGE ----------- */
    /* ----------- EXPERTS PAGE ----------- */




    /* ----------- WHATS IN FORMULA ----------- */
    /* ----------- WHATS IN FORMULA ----------- */
    /* ----------- WHATS IN FORMULA ----------- */


        .booktablerow {
            border-style: solid;
            border-width: 0px 1px 1px 1px;
            border-color: #8c8b8e;
            display: flex;
        }

        .booktablerowtop {
            border-top-style: solid;
            border-top-width: 1px;
            border-top-color: #8c8b8e;
            font-weight: normal;
            background-color: #316fae;
            color: #ffffff;
            font-weight: bold;
        }

        .booktablecol1 {
            width: 30%;
            padding: 1%;
            background-color: #e8e8e8;
            font-weight: bold;
        }

        .booktablecol2 {
            width: 70%;
            padding: 1%;
        }

        .booktablefullrow {
            width: 100%;
            padding: 1%;
            text-align: center;
            background-color: #024ea4;
            color: #ffffff;
            font-weight: bold;
        }



    /* ----------- WHATS IN FORMULA ----------- */
    /* ----------- WHATS IN FORMULA ----------- */
    /* ----------- WHATS IN FORMULA ----------- */





    /* ----------- IN THE NEWS ----------- */
    /* ----------- IN THE NEWS ----------- */
    /* ----------- IN THE NEWS ----------- */

.inthenews {
    margin: 10px 0px 10px 5px;
    padding: 5px 10px 15px 60px;
    list-style: none;

    color: #0066a5;
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
}

.newsdate {
    color: #39b3de;
    font-style: italic;
}

.newsitem {
    font-size: 16px;
}


.itemnewspaper {
    background-image: url("../images/icon-newspaper.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
}

.itemspeech {
    background-image: url("../images/icon-speechbubble.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
}

.itemvideo {
    background-image: url("../images/icon-newsvideo.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
}

.itemnewssite {
    background-image: url("../images/icon-newssite.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
}

    /* ----------- IN THE NEWS ----------- */
    /* ----------- IN THE NEWS ----------- */
    /* ----------- IN THE NEWS ----------- */





    /* ----------- FORMULA FINDER ----------- */
    /* ----------- FORMULA FINDER ----------- */
    /* ----------- FORMULA FINDER ----------- */

.finderpage {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

    .findercritera {
        box-shadow: 0px 0px 10px #dddddd;
        padding: 0px 20px 10px 20px;
        width: 40%;
      
    }

    
.findercritera p {
    font-weight: bold;
}

.findercritera hr {
    margin-top: 15px;
}

.finderformulas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 55%;
    justify-content: space-between;
}

.finderformula {
    width: 30%;
    text-align: center;
}

.finderformula img {
    width: 100px;
    display: block;
    margin: auto;
}

.findercan {
    width: 70px;
}

.divoff {
    opacity: 0.2;
    animation-name: turndivoff;
    animation-duration: .5s;
}

.divon {
    opacity: 1;
    animation-name: turndivon;
    animation-duration: .5s;
}

@keyframes turndivoff {
    0% {opacity: 1;}
    100% {opacity: 0.2;}
}
@keyframes turndivon {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}




.checkcontainer {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
    .checkcontainer input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
    border: 1px solid #ccc;
}

/* On mouse-over, add a grey background color */
.checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkcontainer input:checked ~ .checkmark {
    background-color: #39b3de;
    border: 1px solid #024ea4;
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.3);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkcontainer:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
/*.checkcontainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}*/




/* ----------- FORMULA FINDER ----------- */
/* ----------- FORMULA FINDER ----------- */
/* ----------- FORMULA FINDER ----------- */



/* ----------- ARTICLES ----------- */
/* ----------- ARTICLES ----------- */
/* ----------- ARTICLES ----------- */

.storyarticle {
    margin-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
    padding: 5px 10px 15px 60px;
}


.articlesexperts .storyarticle {
    background-image: url("../images/icon-advice.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
}

.articlesbabytips .storyarticle {
    background-image: url("../images/icon-carriage.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
}

.articlesparents .storyarticle {
    background-image: url("../images/icon-newmom.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
}

.articleshealth .storyarticle {
    background-image: url("../images/icon-happybaby.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
}

.articlesmoney .storyarticle {
    background-image: url("../images/icon-piggybank.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
}



.storyauthor {
    color: #39b3de;
    font-style: italic;
    font-weight: normal;
}


.articlespage {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}


.articletypes {
    width: 35%;
    background-color: #e8e8e8;
    padding: 0px 15px 0px 15px;
}

.articlelist {
    width: 60%;
    display: block;
    overflow: hidden;
}



.articletypes img
{
    width: 40px;
    margin-right: 10px;
}

.articlecategory {
    display: flex;
    margin-top: 15px;
    font-weight: bold;
    color: #024ea4;
    align-items: center;

}

    .articlecategory:hover {
        cursor: pointer;
    }

.articlecategoryoff {
    display: flex;
    align-items: center;
    margin-top: 15px;
    color: #272727;
    font-weight: normal;
    cursor: pointer;
    opacity: .6;
}

.articlesshow {
    animation-name: showarticles;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    display: block;
}

.articleshide {
    display: none;
}



@keyframes showarticles  {
    0% {opacity: 0;
        margin-top: -400px;
    }
    50% {
        margin-top: 0px;
    }
    100% {
        opacity: 1;
    }
}





.AboutAuthor {
    width: 90%;
    margin: 40px auto 20px auto;
    box-shadow: 0px 0px 10px #dddddd;
    padding: 0px 20px 10px 20px;
    border-bottom: 2px solid #39b3de;
}

    .AboutAuthor h3 {
        color: #024ea4;
    }

.AboutAuthor img {
    width: 150px;
    margin-top: 20px;
}


.sidebar {
    float: right;
    display: block;
    margin: 10px 0px 20px 25px;
    box-shadow: 0px 0px 10px #dddddd;
    padding: 10px 30px 10px 30px;
}


    /* ----------- ARTICLES ----------- */
    /* ----------- ARTICLES ----------- */
    /* ----------- ARTICLES ----------- */






    /* ----------- FAQ VIDEOS ----------- */
    /* ----------- FAQ VIDEOS ----------- */
    /* ----------- FAQ VIDEOS ----------- */

    .FAQquestion {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom: 1px solid #e8e8e8;
    }

    .FAQheader {
        display: flex;
        margin-bottom: 20px;
    }

    .FAQquestion img {
        max-width: 80px;
        max-height: 80px;
        margin-top: 10px;
    }

    .FAQquestion .video-wrapper {
        border: 1px solid #515a59;
        margin-bottom: 10px;
    }

    .FAQicon {
        width: 120px;
    }

    .FAQquest {
        width: 100%
    }

    .FAQvideo {
        margin-left: 100px;
        border: 0px solid red;
    }


    /* ----------- FAQ VIDEOS ----------- */
    /* ----------- FAQ VIDEOS ----------- */
    /* ----------- FAQ VIDEOS ----------- */






/* ----------- SAVINGS CALCULATOR ----------- */
/* ----------- SAVINGS CALCULATOR ----------- */
/* ----------- SAVINGS CALCULATOR ----------- */


.CalculatorChooser {
    /*box-shadow: 0px 0px 10px #dddddd;
    padding: 10px 20px 10px 20px;*/
    display: flex;
    justify-content: space-around;
}

    .CalculatorChooser h3 {
        color: #024ea4;
        border-bottom: 1px solid #024ea4;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

.CalculatorChooser > div {
    width: 30%;
}


    .CalculatorChooser > div > div {
        margin-top: 8px;
        padding: 3px;
        display: flex;
        align-items: center;
        font-weight: bold;
    }

    .CalculatorChooser > div > div:hover {
        cursor: pointer;
    }


.CalculatorStoreBrand > div, .CalculatorEnfamil > div, .CalculatorSimilac > div {
    border: 1px solid #39b3de;
}

    .CalculatorStoreBrand > div:hover, .CalculatorEnfamil > div:hover, .CalculatorSimilac > div:hover {
        border: 1px solid #ee5a9a;
    }

.CalculatorChooser img {
    width: 28px;
    margin-right: 5px;
}


.CalculatorSavings {
       display: none;
}

.CalcYouCanSave {
    background-color: #024ea4;
    color: #ffffff;
    margin-top: 30px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.CalcSavingsBox {
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 2px solid #39b9de;
    padding: 0px 20px 10px 20px;
    margin-top: 0px;
}

.CalcReturn {
    font-size: 12px;
    font-weight: normal;
    padding: 5px;
    text-align: right;
}

.CalcReturnButton {
    background-color: #024ea4;
    color: #ffffff;
    width: 200px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
    padding: 7px;
    text-align: center;
    font-size: 12px;
}

.CalcReturn:hover, .CalcReturnButton:hover {
    cursor: pointer;
}

.CalcContainer {
    margin-top: 0px;
    height: 500px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #dddddd;
    padding: 10px 20px 10px 20px;
}


.animaterollup {
    display: block;
    animation-name: rollupdiv;
    animation-duration: 1.5s;
    animation-delay: 0s;
    overflow: hidden;
    animation-fill-mode: forwards;
}
.animaterolldown {
    display: block;
    animation-name: rolldowndiv;
    animation-duration: 1.5s;
    animation-delay: 0s;
    overflow: hidden;
    animation-fill-mode: forwards;
}

@keyframes rollupdiv  {
    0% {max-height: 800px;}
    60% {max-height: 0px;}
    100% {max-height: 0px;
          opacity: 0;
    }
}

@keyframes rolldowndiv {
    0% {
        max-height: 0px;
        opacity: 0;
    }
    30% {max-height: 0px}
    100% {max-height: 800px;}
}







/* ----------- SAVINGS CALCULATOR ----------- */
/* ----------- SAVINGS CALCULATOR ----------- */
/* ----------- SAVINGS CALCULATOR ----------- */






/* ----------- NEWSLETTER ----------- */
/* ----------- NEWSLETTER ----------- */
/* ----------- NEWSLETTER ----------- */

.SignUpForm {
    box-shadow: 0px 0px 10px #dddddd;
    padding: 20px 30px 20px 30px;
    width: 60%;
}

.SignUpTextBox {
    border: 1px solid #cccccc;
    padding: 5px;
    margin-top: 5px;
    width: 250px;
}

.SignUpLine {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dddddd;
}

.SignUpButton {
    background-color: #024ea4;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 25px 5px 25px;
}


.SignUpStructure{
    display: flex;
}

.SignUpImage  {
    margin-top: -10px;
    margin-left: 45px;
    width: 35%;
}

.SignUpImage img {
    width: 200px;
}

    .SignUpImage li {
        background-image: url("../images/lightbluecheckmark.png");
        background-repeat: no-repeat;
        background-position: left 5px;
        background-size: 15px;
        padding-left: 25px;
        margin-left: -25px;
        list-style: none;
        margin-bottom: 15px;
    }

/* ----------- NEWSLETTER ----------- */
/* ----------- NEWSLETTER ----------- */
/* ----------- NEWSLETTER ----------- */






/* ------------- E-BOOK ------------- */
/* ------------- E-BOOK ------------- */
/* ------------- E-BOOK ------------- */

.ebookfeature {
    display: flex;
    flex-direction: row;
    margin: 10px 0px 10px 0px;
    justify-content: center;
}

    .ebookfeature div {
        padding: 10px;
        text-align: center;
        margin-bottom: 15px;
    }

/* ------------- E-BOOK ------------- */
/* ------------- E-BOOK ------------- */
/* ------------- E-BOOK ------------- */




/* ------------- LIGHT TABLE ------------- */
/* ------------- LIGHT TABLE ------------- */
/* ------------- LIGHT TABLE ------------- */

.lighttable {
    width: 100%;
    max-width: 300px;
    background-color: #cfe7f1;
    border-collapse: separate;
    border-spacing: 0px;
    margin-left: 20px;
}

.lighttable tr:nth-child(even) {
    background-color: #eeeeee;
}

    .lighttable td {
        padding: 6px;
    }

.listextraspacing li {
    margin-bottom: 12px;
}

/* ------------- LIGHT TABLE ------------- */
/* ------------- LIGHT TABLE ------------- */
/* ------------- LIGHT TABLE ------------- */



/* ------------- SNAP ------------- */
/* ------------- SNAP ------------- */
/* ------------- SNAP ------------- */

.snapbluetable {
	display: flex;
	background-color: #024ea4;
	color: #ffffff;
}

.snapbluetable h1 {color: #ffffff;}

.snapbluetable div:first-child {
background-color: #17a3dd;
padding: 25px;
font-size: 16px;
}


@media all and (max-width:700px) {
    .snapbluetable {
        flex-direction: column;
    }
}

/* ------------- SNAP ------------- */
/* ------------- SNAP ------------- */
/* ------------- SNAP ------------- */






/* ----------- HYPOALLERGENIC ----------- */
/* ----------- HYPOALLERGENIC ----------- */
/* ----------- HYPOALLERGENIC ----------- */



.HypoChart {
    width: 50%;
    border: 1px solid #ccc;
    margin: auto;
    text-align: center;
    font-size: 12px; 
    font-weight: bold;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.ChartBar {
    display: flex;
    flex-direction: row;
}


    .ChartBar > div {
        width: 50%;
        text-align: center;
        margin-top: 10px;
    }

        .ChartBar > div > div {
            border-bottom: 1px solid #ccc;
            margin-bottom: 5px;
        }

            .ChartBar > div > div > div {
                width: 55%;
                background-color: #024ea4;
                border: 1px solid #333;
                height: 130px;
                margin: auto;
            }


.HypoChart2 {
    margin-top: 20px;
    margin-bottom: 10px;
}

   .HypoChart2Row {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    line-height: 13px;
    font-weight: bold;
    align-items: stretch;
    width: 90%;
    margin: auto;
}

    .HypoChart2Row img {
        width: 20px;
        padding: 4% 0;
    }

    .HypoChart2Row > div {
        width: 28%;
        border: 1px solid #fff;
        padding: 6px 10px 6px 10px;
        
    }

        .HypoChart2Row > div:nth-child(n+2) {
            text-align: center;
            width: 24%;
        }


.BuyOnlineFormulas 
{
	margin: 10px auto;
	border-radius: 10px;
	border: 2px solid lightgray;
    	max-width: 800px;
	text-align: center;
	width: 90%;
}


.BuyOnlineFormulas h2
{
	margin-top: -21px;
	margin-left: 30px;
	position: absolute;
	background-color: #ffffff;
	padding: 8px;

}

.BuyOnlineBlock
{
	display: flex;
	justify-content: space-evenly;
flex-wrap: wrap;
}

.BuyOnlineBlock div
{
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 16px;
}

.BuyOnlineBlock img 
{
	width: 150px;
	display: block;
	margin: auto;
	margin-bottom: 5px;
}



/* ----------- HYPOALLERGENIC ----------- */
/* ----------- HYPOALLERGENIC ----------- */
/* ----------- HYPOALLERGENIC ----------- */



/* ----------- SPANISH ----------- */
/* ----------- SPANISH ----------- */
/* ----------- SPANISH ----------- */


.espanol-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.espanol-list  a {
    text-align: center;
    border: 1px solid #FFFFFF;
    margin: 10px;
    padding: 20px;
    display: block;
    border-radius: 5px;
}

    .espanol-list a:hover {
        background-color: #EFEFEF;
        border: 1px solid #DDDDDD;

    }

    .espanol-list img {
        width: 150px;
    }

/* ----------- SPANISH ----------- */
/* ----------- SPANISH ----------- */
/* ----------- SPANISH ----------- */




/* ----------- INSTRUCTIONS ----------- */
/* --------------- FOR ---------------- */
/* ------------- SPANISH -------------- */
.intllabelsteps {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
    width: 80%;
    margin: auto;
}

    .intllabelsteps p {
        padding: 10px;
        width: 80%;
    }

.intllabeltable {
    border: solid 0px #000000;
    margin-top: 5px;
    border-spacing: 0px;
    border-collapse: separate;
}

    .intllabeltable td {
        padding: 8px;
        border: solid 1px #000000;
    }

        .intllabeltable tr:first-child td {
        border-top: solid 2px #000000;
        }
        .intllabeltable tr td:first-child {
        border-left: solid 2px #000000;
        }
        .intllabeltable tr td:last-child {
        border-right: solid 2px #000000;
        }
        .intllabeltable tr:last-child td {
        border-bottom: solid 2px #000000;
        }
        .intllabeltable tr:first-child td:first-child {
        border-radius: 10px 0px 0px 0px;
        }
        .intllabeltable tr:first-child td:last-child {
        border-radius: 0px 10px 0px 0px;
        }
        .intllabeltable tr:last-child td:last-child {
        border-radius: 0px 0px 10px 0px;
        }
        .intllabeltable tr:last-child td:first-child{
        border-radius: 0px 0px 0px 10px;
        }




.intllabelborder {
    border: 2px solid #000000;
    border-radius: 5px;
    padding: 8px;
    text-align: center;
}


.intlnutrition {
width: 80%;
margin-left: 0px;

margin-bottom: 30px;
}


.intllabelnutritionhead {
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
    padding-bottom: 10px;
    padding-top: 0px;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;

}

.intllabelrow {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
    border-bottom: 2px dotted #000000;
    margin-left: auto;
    margin-right: auto;
}

    .intllabelrow > div {
        margin-top: 5px;
        margin-bottom: -5px;
        align-items: flex-end;
    }

    .intllabelrow > div:nth-child(1) {
        width: 70%;
    }

        .intllabelrow > div:nth-child(2) {
            text-align: right;
            width: 31%;
        }

        .intllabelrow > div > span {
            padding-left: 5px;
            padding-right: 5px;
            background-color: #FFFFFF;
        }


.intllabelrowtitle {
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0px;
    border: 0px;




.intlcheckmarkbox {
    background-color: #f6f6f6;
    padding: 20px;
    display: inline-block;
    border: 1px solid #ededed;
}

    .intlcheckmarkbox li {
        padding: 10px 10px 10px 40px;
        list-style: none;
        background-image: url("../images/bluecheckmark.png");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: 25px;
        color: #0066a5;
        display: inline-block;
        width: 100%;
    }


/* ----------- INSTRUCTIONS ----------- */
/* --------------- FOR ---------------- */
/* ------------- SPANISH -------------- */