@font-face {
    font-family: "f1";
    src: url(./fonts/f1.woff2);
}
@font-face {
    font-family: "f2";
    src: url(./fonts/f2.woff2);
}
@font-face {
    font-family: "f3";
    src: url(./fonts/f3.woff2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-family: 'Roboto Condensed', sans-serif;
    line-height: 1.1;
    box-sizing: border-box;
}
.probiotics {
    width: 100%;
    background: #F2F2F2;
    min-height: 100vh;
}
.container {
    width: 1150px;
    margin: 0 auto 15px;
    background: white;
    padding: 10px;
}
blockquote,
p.news {
    padding: 8px 35px 8px 14px;
    margin-bottom: 12px;
    color: #c09853;
    text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
blockquote {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    margin-bottom: 30px;
    font-size: 19px;
    color: #111;
    font-weight: 600;
}
.sec1 .sec1_logo {
    width: 250px;
    height: 48px;
    background: url(./images/logo.png) no-repeat;
    background-size: contain;
    border: none;
    margin: 0 auto;
}
.content {
    padding: 30px 50px;
}
.sec1 h5 {
    font-style: normal;
    font-weight: bold;
    font-family: 'f1', sans-serif;
    font-size: 25px;
    line-height: 29px;
    margin-bottom: 22px;
    color: #F72210;
}
.sec1 h2 {
    font-family: 'f1', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 40px;
    line-height: 47px;
    color: #000000;
}
.sec1 h4 {
    font-family: 'f2', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 35px;
    margin: 11px 0;
    color: #000000;
}
p.sec1_date {
    font-family: 'f3', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 17px;
    line-height: 31px;
    position: relative;
    padding: 0 7px;
    display: inline-block;
    text-transform: uppercase;
    color: #000000;
}
p.sec1_date:before {
    content: " ";
    height: 14px;
    width: 0;
    border-left: 0.75px solid #000000;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
p.sec1_date:after {
    content: " ";
    height: 14px;
    width: 0;
    border-right: 0.75px solid #000000;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}
ul.thumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}
ul.thumb li {
    background: #C0C0C0;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: 0.15em;
    padding: 5px 14px;
    color: #FFFFFF;
    margin-right: 13px;
    margin-bottom: 5px;
    list-style-type: none;
    text-transform: uppercase;
}
ul.thumb li.current {
    background: #F72210;
}
.sec1 ul {
    padding-left: 20px;

}
.sec1 li {
    font-family: 'f3', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 2;
    color: #000000;
}
.sec1 p {
    font-family: 'f3', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 29px;
    margin-bottom: 15px;
    color: #000000;
    margin-top: 10px;
}
figure {
    margin: 0 auto;
}
h3 {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    line-height: 46px;
    margin: 35px 0;
    padding-left: 30px;
    color: #000000;
    position: relative;
    border-left: 7px solid #F72210;
}
h3 a,
p a {
    cursor: pointer;
    color: #F72210;
    text-decoration: underline;
    font-size: 1em;
}
p em {
    display: block;
    font-style: normal;
    font-size: 1em;
    font-family: 'f3', sans-serif;
}
b.red {
    color: red;
}
a.btn {
    box-shadow: 0 0 0 0 rgb(232 76 61 / 70%);
    border-radius: 20px;
    animation: pulse 1.25s infinite cubic-bezier(0.66,0,0,1);
    display: block;
    background: rgb(222, 116, 116);
    background: -moz-linear-gradient(180deg, rgba(222, 116, 116, 1) 0%, rgba(247, 34, 16, 1) 60%);
    background: -webkit-linear-gradient(180deg, rgba(222, 116, 116, 1) 0%, rgba(247, 34, 16, 1) 60%);
    background: linear-gradient(180deg, rgba(222, 116, 116, 1) 0%, rgba(247, 34, 16, 1) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#de7474", endColorstr="#f72210", GradientType=1);
    text-align: center;
    width: 80%;
    text-align: center;
    margin: 35px auto;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 30px;
    line-height: 54px;
    text-decoration: none;
    border-radius: 10px;
    padding: 20px 15px;
    color: #fff;
}
.sec1_comment {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 15px;
}
.sec1_comment .sec1_comment {
    border: none;
    margin-bottom: 5px;
}
.sec1_comment figure {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
.sec1_comment h5 {
    font-size: 14px;
    color: black;
    line-height: 18px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}
.sec1_comment p {
    font-size: 14px;
    line-height: 18px;
    color: black;
}
.sec1_comment div {
    flex: 1;
}
.user0 {
    background:url(./images/user0.jpg) no-repeat;
    background-size: contain;
}
.user1 {
    background:url(./images/user1.jpg) no-repeat;
    background-size: contain;
}
.user2 {
    background:url(./images/user2.jpg) no-repeat;
    background-size: contain;
}
.user3 {
    background:url(./images/user3.jpg) no-repeat;
    background-size: contain;
}
.user4 {
    background:url(./images/user4.jpg) no-repeat;
    background-size: contain;
}
.user5 {
    background:url(./images/user5.jpg) no-repeat;
    background-size: contain;
}
.user6 {
    background:url(./images/user6.jpg) no-repeat;
    background-size: contain;
}
.user7 {
    background:url(./images/user7.jpg) no-repeat;
    background-size: contain;
}
.user8 {
    background:url(./images/user8.jpg) no-repeat;
    background-size: contain;
}
.user9 {
    background:url(./images/user9.jpg) no-repeat;
    background-size: contain;
}
.user10 {
    background:url(./images/user10.jpg) no-repeat;
    background-size: contain;
}
.user11 {
    background:url(./images/user11.jpg) no-repeat;
    background-size: contain;
}
.user12 {
    background:url(./images/user12.jpg) no-repeat;
    background-size: contain;
}
.user13 {
    background:url(./images/user13.jpg) no-repeat;
    background-size: contain;
}
.user14 {
    background:url(./images/user14.jpg) no-repeat;
    background-size: contain;
}
.user15 {
    background:url(./images/user15.jpg) no-repeat;
    background-size: contain;
}
.user16 {
    background:url(./images/user16.jpg) no-repeat;
    background-size: contain;
}
.user17 {
    background:url(./images/user17.jpg) no-repeat;
    background-size: contain;
}
.user18 {
    background:url(./images/user18.jpg) no-repeat;
    background-size: contain;
}
video {
    width: 80%;
    margin: 10px auto;
    display: block;
}
video.vid2 {
    width: 80%;
}
.sec1_fig1 {
    background:url(./images/1.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 500px;   
    display: block;
    margin: 0 auto;
}
.sec1_fig2 {
    background:url(./images/2.jpg) center no-repeat;
    background-size: contain;
    width: 100%;
    height: 500px;   
    display: block;
    margin: 0 auto;
}
.sec1_fig3 {
    background:url(./images/3.jpg)  center no-repeat;
    background-size: contain;
    width: 100%;
    height: 500px;   
    display: block;
    margin: 0 auto;
}
.sec1_fig4 {
    background:url(./images/4.jpg)  center no-repeat;
    background-size: contain;
    width: 100%;
    height: 500px;   
    display: block;
    margin: 0 auto;
}
.sec1_fig5 {
    background:url(./images/5.jpg)  center no-repeat;
    background-size: contain;
    width: 100%;
    height: 500px;   
    display: block;
    margin: 0 auto;
}



@keyframes pulse{to{box-shadow:0 0 0 45px rgba(232,76,61,0)}}

@media(max-width: 480px){
    .probiotics {
        overflow: hidden;
    }
    .container {
        width: 100%;
        padding: 0 10px;
    }
    .sec1 .container:first-of-type {
        padding: 10px 0;
    }
    .sec1 figure {
        max-width: 100%;
        margin: 10px auto;
        float: initial;
        background-position: center;
        background-size: contain;
    }
    figure.sec1_fig2  {
        height: 226px;
    }
    figure.sec1_fig3  {
        height: 210px;
    }
    figure.sec1_fig4  {
        height: 230px;
    }
    figure.sec1_fig5  {
        height: 203px;
    }
    .sec1_comment figure {
        max-width: 40px;
        max-height: 40px;
        margin-right: 15px;
    }

}

.citations {
    padding-top: 20px;
}

.citations ul {
    list-style: decimal;
    margin: 0;
    padding: 0 0 0 20px;
}

.citations ul li {
    font-size: 14px;
    line-height: 1.5em;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.citations ul li:last-child {
    padding-bottom: 0;
}

.citations h4 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 10px;
    line-height: 1em;
} 
.sec1_box {
    margin-top: 20px;
    padding: 20px;
    text-align: left;
    background-color: rgb(237, 249, 255);
    font-size: 20px;
    border: solid 2px rgb(225, 93, 58);
}
p.small {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}
p.small b {
    font-weight: 500;
    color: #396;
}
p.small s {
    color: brown;
    font-weight: 500;
}
@media (max-width: 480px) {
    .citations li {
        font-size: 12px;
    }
    a.btn {
        font-size: 12px;
        padding: 0;
        margin: 20px auto 0;
    }
    p.small {
        font-size: 9px;
    }
}