/* Note */

/*======================================
>>> GLobal styles
=======================================*/
*{
  margin: 0;
  padding: 0;  
}
body{
  background: #fff;  
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #4c4949;
  font-style: normal;
  line-height: 1.5625rem;
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
::selection {
  background-color: #3f54a0;
  color: #fff;
}
a{
  color: #3f54a0;
  text-decoration: none;
  position: relative;
}
a:hover, a:focus, a:visited{
  color: #3f54a0;
  text-decoration: none;
}
a.power3{
  z-index: 2;
}
a.power3:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #dbe2f7;
  display: block;
  z-index: -1;
  -webkit-transition: width 0.18s ease-in-out, height 0.18s 0.2s ease-in-out;
}
a.power3:hover:after{
  height: 50%;
  width: 100%;
}
a.link-underline{
  text-decoration: underline;
}
img{
  width: 100%;
  height: 100%;
  display: block
}
ul, li{
  margin: 0;
  padding: 0;
  list-style: none;
}
.fullwidth-img{
  max-width: 100% !important;
}
.btn-primary{
  background-color: #095099;
}
/*======================================
>>> Typography
=======================================*/
h1, h2{
  color: #4c4949;
  line-height: 1.5;
}
strong, h1, h2{
  font-weight: 700;
}
h1::selection, h2::selection, h4::selection{
  color: #fff;
  background-color: #37c221;
}
h1{
  font-size: 2.5rem;  
  line-height: 2.9375rem;
}
h2{
  font-size: 1.875rem;  
  line-height: 2.25rem;
}
h4{
  font-size: 1.25rem; /*20px*/
}
p{
  line-height: 1.5625rem;
  margin-bottom: 1.875rem
}
.txt-blue{
  color: #3f54a0;
}
.upcase{
  text-transform: uppercase
}
.bold{
  font-weight: 700
}
.txt-center{
  text-align: center;
}
/*======================================
>>> Header
=======================================*/
nav{
  border-bottom: 1px solid #e5e5e5
}
.logo {
  padding-top: 10px;
  display: block
}
.logo img{
  max-width: 286px;
}
.nav-list {
  float: right
}
.nav-list li{
  float: left;
  padding: 30px 22px;
  border-left: 1px solid #e5e5e5
}
.nav-list a{
  color: #4c4949;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}
/*======================================
>>> main content
=======================================*/
main{
  padding-top: 45px;
}
.post-intro p{
  margin-bottom: 49px;
}
#post-rating{
  position: relative;
  margin-top: 23px;
  margin-bottom: 49px;
  padding-left: 118px 
}
#post-rating::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 106px;
  height: 20px;
  background: url(../images/four_start.png) top left no-repeat;
  background-size: cover;
}
.post-intro span{
  text-align: center;
  margin-top: 20px;
  display: block
}
.checkes {
  padding: 41px 0 90px 0;
}
.checkes div{
  display: flex;
  width: 100%;
}
.checkes img{
  width: 100%;
  max-width: 50%
}
.checkes img:first-child{
  padding-right: 15px
}
.checkes img:last-child{
  padding-left: 15px
}
.video img{
  margin-bottom: 57px
}
.table-of-content{
  margin: 60px 0 90px 0;
  width: 100%;
  background-color: #f2f4f5
}
.table-of-content h4{
  background-color: #3f54a0;
  padding: 8px 0 8px 15px;
  color: #fff;
}
.table-of-content li{
  padding: 7px 0 7px 30px;
  border-bottom: 1px solid #ffffff;
  color: #8e8d8e;
  -webkit-transition: all 0.2s ease-in-out;
}
.table-of-content li:hover{
  background-color: #e9edef;
  border-bottom: 1px solid #d7e7ef
}
.table-of-content li:first-child{
  padding-top: 15px;
}
.table-of-content li:last-child{
  padding-bottom: 15px;
}
.points article{
  margin-bottom: 70px;
}
article h2:first-of-type{
  min-height: 52px;
}
article h2 span.number{
  width: 50px;
  height: 50px;
  background: #3f54a0;
  border-radius: 50px;
  display: block;
  float: left;
  text-align: center;
  line-height: 50px;
  color: #fff;
  margin-right: 20px;
  margin-top: 10px;
  vertical-align: middle;
}
.blue-cards .card{  
  float: left;
  max-width: 340px;
  width: 100%;
  border: none;
  margin-bottom: 39px;
}
.blue-cards .card:first-child{
  margin-right: 44px;
}
.blue-cards .card-title{
  border-radius: 18px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 22px 0 22px 36px;
  background: #3f54a0;
  color: #fff;
  font-weight: 700;
  margin-bottom: 0
}
.blue-cards .card-body{
  border: 1px solid #181719;
  border-top: none;
  color: #4c4949;
  padding: 22px 34px;
  border-radius: 18px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.blue-cards .card:first-of-type .card-body{
  padding-bottom: 72px;
}
.ingredients img{
  max-width: 600px;
}
.ingredients .table-of-content{
  margin-bottom: 20px;
}
.ingredients .table-of-content li{
  display: flex;
}
.ingredients .table-of-content li span{
  padding-left: 33px;
  color: #4c4949;
  position: relative;
  width: 50%;
}
.ingredients .table-of-content li span:before,
.arrow-list li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 11px;
  background: url(../images/blue-arrow.png) center no-repeat;
  background-size: cover;
}
.arrow-list {
  margin-top: 10px;
}
.arrow-list li{
  margin-bottom: 20px;
  padding-left: 30px;
  position: relative;
}
.arrow-list li::before{
  top: 5px;
}
.ing-1, .ing-2, .ing-3, .ing-4{
  margin-bottom: 60px;
}
.ingredients img:last-of-type{
  margin-bottom: 15px;
}
.suggest > h2 span.number, .pw-vs-ml > h2 span.number,
.pw-vs-qu > h2 span.number, .feedbacks > h2 span.number,
.where-to-bye > h2 span.number, .faq > h2 span.number {
  margin-top: -8px;
}
.serve-volume .box{
  padding: 24px 10px 15px 10px;
  background-color: #f2f4f5;
  max-width: 32.333%;
  float: left;
  min-height: 200px;
}
.serve-volume .box:nth-child(2){
  margin: 0 10px;
}
.serve-volume .box img{
  max-width: 190px;
  margin: 0 auto;
}
.serve-volume .box p{
  margin-bottom: 0;
  display: block;
  font-size: 14px;
  line-height: 1.3;
}
.serve-volume .box p strong{
  display: block;
}
.serve-volume .box img.one{
  max-width: 97px;
}
.quotes{
  padding: 30px 44px 38px 44px;
  margin-left: 52px;
  max-width: 572px;
  background-color: #f2f4f5;
  position: relative;
}
.quotes:before{
  content: '';
  position: absolute;
  top: 19px;
	left: -20px;
	width: 37px;
	height: 28px;
  background: url(../images/quote-mark.png) center no-repeat;
  background-size: cover;
}
.quotes p{
  margin: 0;
}
.quotes p:first-child{
  margin-bottom: 25px;
}
.customer{
  max-width: 670px;
}
.arrow-lables{
  max-width: 443px;
  margin-bottom: 30px;
}
.accordian {
  margin-bottom: 35px;
  padding-left: 58px;
  position: relative;
  margin-left: 6px;
}
.accordian:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: url(../images/plus-sign.png) center no-repeat;
  background-size: cover;
}
.accordian h4{
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}
#customer-rating h1, #customer-rating a, #customer-rating p{
  margin-bottom: 15px;
}
#customer-rating h4{
  margin-bottom: 0;
}
#customer-rating h4 + p{
  margin-bottom: 30px;
}
#customer-rating .five-star{
  max-width: 92px;
  display: inline;
  margin-left: 10px;
}
.btn-outline-dark{
  border-color: #b7b7b7;
  padding-left: 20px;
  padding-right: 20px;
}
.post-tags{
  margin-top: 80px;
  margin-bottom: 90px !important;
  padding: 22px 5px;
  border-top: 2px solid #e5e5e5;
  border-bottom:  2px solid #e5e5e5;
  color: #4c4949;
}
textarea.form-control{
  display: block;
  width: 100%;
  height: 94px;
  padding: 25px;
  border: 1px solid #b7b7b7;
  border-radius: 5px;
  margin-bottom: 19px;
}
input[type="text"], input[type="email"]{
  float: left;
  height: 48px;
  line-height: 48px;
  padding-left: 28px;
  max-width: 232px;
  margin-right: 16px;
  border-radius: 5px;
}
input#website{
  margin-right: 0;
}
.custom-checkbox{
  margin-top: 23px;
  margin-bottom: 35px;
}
.custom-control-label::before,
.custom-control-label::after{
  width: 2rem;
  height: 2rem;
}
.custom-control-label{
  padding-left: 2.1rem;
  line-height: 2.6rem;
}
form{
  margin-bottom: 168px;
}
/*======================================
>>> sidebar
=======================================*/
.sidebar .intro{
  margin-bottom: 80px
}
.sidebar h4{
  padding-bottom: 20px;
  margin-bottom: 30px;
  position: relative;
}
.sidebar h4:after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 5px;
  background-color: #3f54a0;
}
.sidebar p{
  color: #4c4949;
}
.sidebar img:first-of-type{
  margin-bottom: 77px
}
/*======================================
>>> Footer
=======================================*/
footer{
  padding: 80px 0;
  background: #414244;
}
footer h5{
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 29px;
}
footer a{
  color: #c2c2c3;
  font-weight: 600;
}
footer p{
  color: #bbbbbc;
}
footer .column-2 p{
  margin-right: 10px;
}
footer .column-3 p{
  margin-right: 20px;
}
footer .column-4 li{
  float: left;
  margin-right: 23px;
  max-width: 18px;
}
footer .column-4 li:nth-child(4){
  max-width: 21px;
}
footer .column-4 li:last-child{
  margin: 0;
}
/*======================================
>>> MediaQueries
=======================================*/
@media only screen and ( max-width: 1024px ){
  
}
@media only screen and ( max-width: 992px ){
  
}
@media only screen and ( max-width: 768px ){
  /* .nav-list{
    float: none;
    text-align: center;
  }
  .nav-list li{
    padding: 15px 22px 12px 22px;
    border: none;
  }
  .logo img{
    margin: 0 auto;
  }
  .nav-list li{
    float: none;
    display: inline-block;
  } */
  .nav-list li {
    padding: 22px 10px;
  }
  .logo{
    padding: 11px 0 15px 0;
  }
  .logo img {
    max-width: 228px;
  }
  .blue-cards .card{
    max-width: 100%;
    float: none;
    min-height: 100%;
  }
  .blue-cards .card:first-of-type .card-body{
    padding-bottom: 22px;
  }
  .serve-volume .box{
    max-width: 30%;
  }
  .serve-volume .box img{
    margin-bottom: 20px;
  }
  .feedbacks > h2 span.number{
    margin-top: 10px;
  }
  .quotes{
    margin-bottom: 35px;
  }
  input[type="text"], input[type="email"]{
    max-width: 100%;
    display: block;
    margin-bottom: 19px;
  }
  .custom-control-label{
    line-height: 1.5rem;
  }
  .custom-checkbox {
    margin-bottom: 20px;
  }
  .sidebar{
    padding-bottom: 50px;
  }
  .sidebar img{
    width: 50%;
    float: left;
    padding: 2%;
  }
  footer .column-1{
    margin-bottom: 25px;
  }
}
@media only screen and ( max-width: 567px ){
  .container{
    padding-left: 25px;
    padding-right: 25px;
  }
  .checkes img{
    max-width: 100%;
    padding: 10% !important;
    display: block;
    height: auto;
  }
  .checkes div{
    flex-direction: column;
  }
  .review h2 span.number, .ingredients h2 span.number, .tolerance h2 span.number{
    margin-bottom:50px;
  }
  .suggest > h2 span.number, .pw-vs-ml > h2 span.number, .feedbacks > h2 span.number, .where-to-bye > h2 span.number{
    margin-top: 10px;
  }
  .serve-volume .box{
    max-width: 100%;
    float: none;
    margin: 2%;
  }
  .quotes{
    margin-left: 22px;
  }
  form {
    margin-bottom: 50px;
  }
}
@media only screen and ( max-width: 425px ){
  .ingredients .table-of-content li{
    border: none;
    flex-direction: column;
    padding-left: 0;
  }
  .ingredients .table-of-content li span{
    width: 100%;
    border-bottom: 1px solid #fff;
    padding-left: 45px;
    padding: 8px 0 8px 45px;
  }
  .ingredients .table-of-content li span:before {    
    left: 18px;
    top: 15px;
  }
  article h2 span.number{
    display: block;
    float: none;
    margin-bottom: 20px !important;
  }
  nav div[class^='col-']{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .logo{
    padding-bottom: 0;
  }
  .logo img{
    margin: 0 auto;
  }
  .nav-list, .nav-list li{
    float: none;
    text-align: center;
  }
  .nav-list li{
    border: none;
    display: inline-block;
  }
}
@media only screen and ( max-width: 768px ){
  
}