.section-browse-by-range {
    width:1100px;
    margin:-60px auto 0 auto;
    padding:20px 30px;
    height:100px;
    background: rgba(252,229,237,1);
    background: -moz-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -webkit-gradient(left, color-stop(0%, rgba(252,229,237,1)), color-stop(50%, rgba(255,254,239,1)), color-stop(100%, rgba(229,252,253,1)));
    background: -webkit-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -o-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce5ed', endColorstr='#e5fcfd', GradientType=1 );
}

.browse-by-range-overall-container { width:1100px; margin:20px auto; }
.browse-by-range-overall-container-bodywash { width:690px; margin:20px auto; }
.browse-by-range-column { width:220px; float:left; }

.browse-by-range { font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; width:1100px; position:absolute; top:-25px; margin-left:-550px; left:50%; top:-25px; font-size:36px; color:#000; text-align:center;  }


.browse-by-range-container { position:relative; }

.browse-by-range-perfect-beauty, .browse-by-range-hellodiane, .browse-by-range-be-true, .browse-by-range-bonheur, .browse-by-range-botanical, .browse-by-range-body, .browse-by-range-be-true-body, .browse-by-range-protect-bodywash { position:relative; margin:0; padding:0; }

.perfect-beauty-overlay, .hellodiane-overlay, .be-true-overlay, .bonheur-overlay, .botanical-overlay, .body-overlay, .be-true-body-overlay, .protect-bodywash-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: rgba(255,255,255,0.8);
}

.browse-by-range-overlay-container {  position:relative; top:15px; width:190px; margin:0 auto; }


.browse-by-range-overlay-container span {margin:0 auto; font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; font-size:24px; display:block; color:#000; }

.browse-by-range-overlay-container p { margin:0 auto;  font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; margin-top:15px;color:#000; }

.browse-by-range-perfect-beauty:hover .perfect-beauty-overlay, .browse-by-range-hellodiane:hover .hellodiane-overlay, .browse-by-range-be-true:hover .be-true-overlay, .browse-by-range-bonheur:hover .bonheur-overlay, .browse-by-range-botanical:hover .botanical-overlay, .browse-by-range-body:hover .body-overlay, .browse-by-range-be-true-body:hover .be-true-body-overlay, .browse-by-range-protect-bodywash:hover .protect-bodywash-overlay {
  opacity: 1;
}


.browse-by-range-button {background:#000; color:#fff; font-family: 'Apercu Pro', sans-serif; font-size:14px;  margin-top:10px; padding:10px 18px; letter-spacing:2px; text-transform:uppercase;  display:inline-block; transition:0.6s; }


.browse-by-range-button:hover {  padding:10px 22px; }

.section-blog {
    width:1100px;
    margin:-60px auto 0 auto;
    padding:20px 30px;
    height:100px;
    background: rgba(252,229,237,1);
    background: -moz-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -webkit-gradient(left, color-stop(0%, rgba(252,229,237,1)), color-stop(50%, rgba(255,254,239,1)), color-stop(100%, rgba(229,252,253,1)));
    background: -webkit-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -o-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce5ed', endColorstr='#e5fcfd', GradientType=1 );
}

.section-blog-title { font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; width:1100px; position:absolute; top:-25px; margin-left:-550px; left:50%; top:-25px; font-size:36px; color:#000; text-align:center;  }

.section-instagram {
    width:1100px;
    margin:-60px auto 0 auto;
    padding:46px 30px;
    height:90px;
    background: rgba(252,229,237,1);
    background: -moz-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -webkit-gradient(left, color-stop(0%, rgba(252,229,237,1)), color-stop(50%, rgba(255,254,239,1)), color-stop(100%, rgba(229,252,253,1)));
    background: -webkit-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -o-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce5ed', endColorstr='#e5fcfd', GradientType=1 );
}

.section-instagram-title { font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; width:1100px; position:absolute; top:-25px; margin-left:-550px; left:50%; top:-25px; font-size:36px; color:#000; text-align:center;  }


.instagram-link { margin-top:10px; }

.category { margin-bottom:60px; }

.text { padding:5%;
font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:22px;
color:#000; }

.category-link { border:1px solid #ccc; padding:5px 40px 5px 15px; color:#333; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:20px; margin-top:20px; transition: 0.6s; display:inline-block; }

.category-link:hover { padding:5px 45px 5px 20px; }

.view-link { background:#000; padding:5px 20px; color:#fff; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:14px; line-height:26px; margin-top:15px; transition: 0.3s; display:inline-block; text-transform:uppercase;}

.view-link:hover { padding:5px 25px; }

.top { padding-top:66px; }

.view-products { position:absolute;padding-top:-1px;padding-left:5px; }

.blog-container { width:1100px; margin:0 auto; position:absolute; top:40px; }

.blog-container-box-left img, .blog-container-box-right img { width:360px; height:240px; }

.blog-container .blog-container-box-left:hover, .blog-container .blog-container-box-right:hover { opacity:0.8; }

.blog-container span { color:#000; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:20px; margin:10px auto 0 auto; display:block; padding:0 20px;}


.blog-container-box-left { float:left;width:450px; height:340px; margin-left:50px; margin-right:60px; background: rgba(255,222,224,0.8); padding:30px 10px; display:inline-block; opacity:1; transition: 0.6s;}

.blog-container-box-right { float:left;width:450px; height:340px; background: rgba(255,222,224,0.8); padding:30px 10px; display:inline-block; opacity:1; transition: 0.6s;}

.blog-page-title { }

.img-hover {opacity:1; }
.img-hover:hover {opacity:0.6;}



/* The Modal (background) */
.ig-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 
}

/* Modal Content */
.ig-modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  width: 1100px;
  height:600px;
   transition:0.6s;
}

/* The Close Button */
.close {
  color: #000;
  float: right;
  font-size: 40px;
  font-weight: bold;
  transition:0.3s;
  opacity:1;
  text-decoration: none;
  cursor: pointer;
}

.close:hover,
.close:focus {
  opacity:0.8;
}

.ig-post-thumbnail { float:left;  transition:0.3s; opacity:1; cursor:pointer;}

.ig-post-thumbnail:hover { opacity:0.6; }

.ig-post-img-column { float:left; margin-right:60px; width:600px; }

.ig-post-text-column { float:left; width:400px; height:600px; }

.ig-wrap { width:100%; }

.splide__pagination { bottom:-25px!important; }

.splide__pagination__page.is-active { background:#aaa!important; }

@media only screen and (max-width: 1099px) {


.browse-by-range-overall-container, .browse-by-range-overall-container-bodywash { width:90%; margin:20px auto; }
.browse-by-range-column { width:90%; float:none; max-width:320px; margin:20px auto; }

.top { padding-top:52px; }

.category {  width:100%;}

.text { padding:20px;
font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:20px;
color:#000; }

.browse-by-range-overlay-container {  position:relative; top:25%; bottom:0; width:86.5%; margin:0 auto;  background-color: rgba(255,255,255,0.6); padding:20px;}

.perfect-beauty-overlay, .hellodiane-overlay, .be-true-overlay, .bonheur-overlay, .botanical-overlay, .body-overlay, .be-true-body-overlay, .protect-bodywash-overlay {
  position: absolute;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
  height: 100%;
  padding:0;
  width: 100%;
  opacity: 1;
  transition: 0.5s ease;
  background: none;
}

.browse-by-range-overlay-container span {margin:0; font-family: 'Apercu Pro', sans-serif; font-weight: bold; font-style: normal; font-size:22px; display:block; color:#000; }

.browse-by-range-overlay-container p { margin:0;  font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:16px; margin-top:10px;color:#000; }

.browse-by-range-button { margin-top:10px;  font-size:12px;}

.category-link { border:1px solid #ccc; padding:5px 10px 5px 10px; color:#333; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:26px; margin-top:20px; transition: 0.6s; display:inline-block; }

.category-link:hover { padding:5px 15px 5px 15px; }

.view-products { position:relative;padding-top:0px;padding-left:5px; float:right; }

.blog-container { width:100%; margin:0 auto; }

.blog-container span { color:#000; font-family: 'Apercu Pro', sans-serif; font-weight: normal; font-style: normal; font-size:18px; line-height:20px; margin:10px auto 0 auto; display:block; padding:0 20px;}


.blog-container-box-left { float:none;width:100%; height:auto; margin-left:0; margin-right:0; margin-bottom:20px; margin-top:-10px; padding:30px 0; display:block;}

.blog-container-box-right {float:none;width:100%; height:auto; margin-left:0; margin-right:0; padding:30px 0; display:block;}


.instagram-link { margin-top:0; position:absolute; bottom:-460px; width:300px; left:50%; margin-left:-150px;}

.section-browse-by-range {
    width:100%;
    margin:-20px auto 120px auto;
    padding:20px 0;
    height:30px;
    background: none;
}

.section-blog {
    width:100%;
    margin:-60px auto 0 auto;
    padding:20px 0 20px 0;
    background: rgba(252,229,237,1);
    background: -moz-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -webt-gradient(left, color-stop(0%, rgba(252,229,237,1)), color-stop(50%, rgba(255,254,239,1)), color-stop(100%, rgba(229,252,253,1)));
    background: -webkit-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -o-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce5ed', endColorstr='#e5fcfd', GradientType=1 );
}

.section-blog-title { width:100%; position:absolute; top:-25px; margin-left:-0; left:0; top:-20px; font-size:30px; color:#000; text-align:center;  }

.section-instagram {
    width:100%;
    margin:0 auto;
    padding:30px 0 20px 0;
    height:30px;
    background: rgba(252,229,237,1);
    background: -moz-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -webkit-gradient(left, color-stop(0%, rgba(252,229,237,1)), color-stop(50%, rgba(255,254,239,1)), color-stop(100%, rgba(229,252,253,1)));
    background: -webkit-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -o-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    background: linear-gradient(left, rgba(252,229,237,1) 0%, rgba(255,254,239,1) 50%, rgba(229,252,253,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce5ed', endColorstr='#e5fcfd', GradientType=1 );
}

.section-instagram-title { width:100%; position:absolute; top:-25px; margin-left:-0; left:0; top:-20px; font-size:30px; color:#000; text-align:center;  }

.ig-wrap { width:310px; left:50%; margin-left:-155px; position:absolute; }



.browse-by-range { width:100%; position:absolute; margin-left:-0; left:0;  font-size:30px; color:#000; text-align:center;  }


/* The Modal (background) */
.ig-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 70px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.ig-modal-content {
  background-color: #fff;
  margin: auto;
  border: 1px solid #ccc;
  width: 80%;
  height:80%;
  overflow:auto;
}

/* The Close Button */
.close {
  color: #000;
  font-size: 40px;
  font-weight: bold;
  transition:0.3s;
  opacity:1;
  text-decoration: none;
  float:none;
  position:fixed;
  margin:0;
  right:25px;
  top:81px;
  background:rgba(255,255,255,0.8);
  padding:0 5px;
 
}

.close:hover,
.close:focus {
  opacity:0.8;
}

.ig-post-thumbnail { float:left; width:150px; transition:0.3s; opacity:1; }


.ig-post-img-column { float:none; margin-right:0; width:100%; display:block; margin-bottom:10px; }

.ig-post-text-column { float:none; width:80%; margin:0 auto; padding:20px; height:auto; display: block;
  justify-content: top;
  align-items: top; }

}

/* 1100px width - 1400px width  */

@media only screen and (min-width : 1100px) and (max-width : 1400px) {
 
header .item .cover .header-content .miracleshine-logo {
 padding-top:60px;
 padding-left:210px;
  width:200px;
  height: 78px; 
  margin-bottom:30px;
}
header .item .cover .header-content .miracleshine-copy {
  padding-left:180px;
  width:250px;
  height:166px;
  margin-bottom:40px;
  
}
header .item .cover .header-content .miracleshine-product {
  padding-left:220px;
  width:160px;
  height:185px;
}

header .item .cover .header-content .miracleyou-logo {
  padding-top:70px;
  padding-left:150px;
  margin-bottom:20px;
  width:160px;
  height: 147px; 
}

header .item .cover .header-content .miracleyou-product {
   width:360px;
   height:246px;
   padding-left:50px;
}

}

/* 481px width - 700 px width  */

@media only screen and (min-width : 481px) and (max-width : 700px) {
 
header .item .cover .header-content .miracleshine-logo {
 padding-top:20px;
 padding-left:60px;
  width:90px;
  height:34px;
  margin-bottom:10px;
}
header .item .cover .header-content .miracleshine-copy {
  padding-left:50px;
  width:120px;
  height:81px;
  margin-bottom:10px;
  
}
header .item .cover .header-content .miracleshine-product {
  padding-left:70px;
  width:80px;
  height:92px;
}

header .item .cover .header-content .miracleyou-logo {
  padding-top:20px;
  padding-left:50px;
  margin-bottom:10px;
  width:100px;
  height: 91px; 
}

header .item .cover .header-content .miracleyou-product {
   width:150px;
   height:102px;
   padding-left:20px;
}

}

/* Mobile only */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    
header .item .cover .header-content .miracleshine-logo {
 padding-top:12px;
 padding-left:60px;
  width:60px;
  height:23px;
  margin-bottom:10px;
}
header .item .cover .header-content .miracleshine-copy {
  padding-left:50px;
  width:80px;
  height:54px;
  margin-bottom:10px;
  
}
header .item .cover .header-content .miracleshine-product {
  padding-left:70px;
  width:46px;
  height:53px;
}

header .item .cover .header-content .miracleyou-logo {
  padding-top:20px;
  padding-left:30px;
  margin-bottom:10px;
  width:70px;
  height: 64px; 
}

header .item .cover .header-content .miracleyou-product {
   width:100px;
   height:68px;
   padding-left:20px;
}

}

/* Category 5 Columns */

@media only screen and (min-width : 1100px) {
  .five-columns > .col-md-2 {
    width: 20%;
  }
}

@media only screen and (max-width : 1099px) {
  .five-columns > .col-md-2 {
    width: 100%;
  }
}

/* Category responsive */

@media only screen and (min-width : 1100px) and (max-width : 1300px) {
 

.browse-by-range-button { margin-top:10px; padding:10px 20px;  } 
    
}

@media only screen and (min-width : 1301px) and (max-width : 1499px) {
 


.browse-by-range-button { margin-top:10px; padding:10px 20px;  } 
    
}

@media only screen and (min-width : 1500px) and (max-width : 1600px) {
 

.browse-by-range-button { margin-top:10px; padding:10px 20px;  } 
    
}