/* Browse by range */

.section-content { overflow:hidden; }

.browse-by-range-day { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer; z-index:2; }

.browse-by-range-night { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer; z-index:2; }

.browse-by-range-otonaplus { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer; }

.browse-by-range-vitamin { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer;  z-index:2;}

.browse-by-range-medical { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer;  z-index:2;}

.day-mask-background, .night-mask-background, .otonaplus-mask-background, .medical-mask-background, .vitamin-mask-background { transition:0.6s; opacity:1; }

.day-mask { position:absolute; left:20%; bottom:80px; transition:0.6s; }

.night-mask { position:absolute; right:20%; bottom:90px; transition:0.6s; }

.otonaplus-mask { position:absolute; left:20%; bottom:120px; transition:0.6s; width:200px; height:157px;}

.vitamin-mask { position:absolute; left:20%; bottom:143px; transition:0.6s; width:270px; height:119px;}

.medical-mask { position:absolute; right:60px; bottom:60px; transition:0.6s; width:180px; height:234px; }

.browse-by-range-day:hover .day-mask-background { filter: brightness(120%);}

.browse-by-range-day:hover  .day-mask { transform: rotate(15deg); }

.browse-by-range-night:hover .night-mask-background { filter: brightness(120%);}

.browse-by-range-night:hover  .night-mask { transform: rotate(-15deg); }

.browse-by-range-otonaplus:hover .otonaplus-mask-background { filter: brightness(110%);}

.browse-by-range-otonaplus:hover  .otonaplus-mask { transform: rotate(-15deg); }

.browse-by-range-vitamin:hover .vitamin-mask-background { filter: brightness(110%);}

.browse-by-range-vitamin:hover  .vitamin-mask { transform: rotate(-15deg); }

.browse-by-range-medical:hover .medical-mask-background { filter: brightness(110%);}

.browse-by-range-medical:hover  .medical-mask { transform: rotate(15deg); }


.browse-by-range-day-text { 
font-size:30px; 
color:#000; 

position:absolute; 
right:40px; 
width:240px; 
bottom:60px; 
z-index:1;
}

.browse-by-range-night-text { 
font-size:30px; 
color:#000; 

position:absolute; 
left:40px; 
width:240px; 
top:140px; 
z-index:1; 
    
}

.browse-by-range-otonaplus-text { 
font-size:30px; 
color:#fff; 

position:absolute; 
right:5%; 
width:36%;  
top:150px; 
z-index:1; 
    
}

.browse-by-range-vitamin-text { 
font-size:30px; 
color:#000; 

position:absolute; 
right:40px; 
width:240px; 
top:145px; 
z-index:1; 
    
}

.browse-by-range-medical-text { 
font-size:30px; 
color:#000; 

position:absolute; 
left:40px; 
width:240px; 
bottom:40px;  
z-index:1; 
    
}

/* Concept */

.concept { width:1060px; margin:0 auto; padding:60px 30px 40px 30px; text-align:left; }

.concept p {font-size:18px; margin-bottom:20px;}

/* Reviews */

.reviews { 
 
 background-image: url("../img/reviews-background.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-color: #efecc3;
 width:100%;
   
}

.review-text { background:#fff; border-radius:20px; padding:30px; margin:20px; position:relative; }

.review-text::before { content:" "; position:absolute; background-image: url("../img/review-top.png"); width:25px; height:19px; top:-10px; left:-6px; }

.review-text::after { content:" "; position:absolute; background-image: url("../img/review-bottom.png"); width:25px; height:19px; bottom:-10px; right:-6px; }

.review-name { font-size:20px; margin-bottom:10px; }

.review-date { font-size:14px; color:#aaa; margin-bottom:20px; }

.review-info { font-size:16px; margin-bottom:10px; }

.review-message { font-size:16px; margin-top:30px; margin-bottom:10px; }

/* Saborino Stories */

.saborino-stories-left { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer;}

.saborino-stories-right { float:left; position:relative; width:50%; transition:0.6s; opacity:1; cursor:pointer;}

.saborino-stories-left:hover, .saborino-stories-right:hover { opacity:0.6; }

.saborino-stories-left-text { 
font-size:26px; 
color:#000; 
text-transform:uppercase; 
position:absolute; 
left:0; 
width:50%; 
bottom:60px; 
z-index:1;
background-color:rgba(255,255,255,0.8);
padding:20px;
}

.saborino-stories-right-text { 
font-size:26px; 
color:#000; 
text-transform:uppercase; 
position:absolute; 
right:0; 
width:50%;  
bottom:60px; 
z-index:1; 
background-color:rgba(255,255,255,0.8);
padding:20px;
    
}

/* Instagram */

.instagram { padding:30px; font-size:40px; background:#fef9da;}

.instagram-section { background:#faf8e9; padding:60px 30px 40px 30px; }

.ig-post { display:inline-block; margin-right:5px; margin-bottom:5px; transition:0.3s; opacity:1; width:250px; height:250px;}

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

/* Responsive for browse by range and saborino stories sections */

@media only screen and (min-width: 1100px) and (max-width: 1300px) {
    
    .day-mask { bottom:50px; width:200px; height:107px; }
    .night-mask { bottom:50px; width:200px; height:104px;  }
    .otonaplus-mask { bottom:10px; left:50%; margin-left:-119px; width:140px; height:110px; }
    .vitamin-mask { bottom:10px; left:50%; margin-left:-119px; width:226px; height:100px; }
    .medical-mask { bottom:30px; width:120px; height:156px; }
    
    .browse-by-range-day-text { 
        font-size:24px; 
        right:5px; 
        width:220px; 
        bottom:60px; 
        z-index:1;
 
    }
    
   .browse-by-range-night-text { 
        font-size:24px; 
        left:20px; 
        width:220px; 
        top:100px; 
        z-index:1;
 
    }
    
    .browse-by-range-otonaplus-text { 
        font-size:24px; 
        left:20%; 
        width:50%; 
        top:70px;

    }
    
    .browse-by-range-medical-text { 
        font-size:24px; 
     

    }
    
    .browse-by-range-vitamin-text { 
        font-size:24px; 
        right:5px; 
     

    }

    .saborino-stories-left-text, .saborino-stories-right-text {
        font-size:18px; 
        line-height:20px;
        width:60%;
        bottom:0; 
        
    }
}

@media only screen and (min-width: 1301px) and (max-width: 1651px) {
    
    .day-mask { bottom:50px; width:200px; height:107px; }
    .night-mask { bottom:50px; width:200px; height:104px;  }

    .otonaplus-mask { bottom:60px; width:180px; height:141px;  }
    .vitamin-mask { bottom:60px; width:271px; height:120px;  }
    .medical-mask { bottom:30px;  width:150px; height:195px;}

    
    .saborino-stories-left-text, .saborino-stories-right-text {
        font-size:20px; 
        width:60%;
        bottom:0; 
        
    }
    
    
}

/* Normal responsive */

@media only screen and (max-width: 1099px) {
    
/* Browse by range mobile */

.browse-by-range-day { float:none; position:relative; width:100%; display:block; margin-top:20px;  }

.browse-by-range-night { float:none; position:relative; width:100%; margin:0 auto;  }

.browse-by-range-otonaplus { float:none; position:relative; width:100%;  margin:0 auto; }

.browse-by-range-vitamin { float:none; position:relative; width:100%;  margin:0 auto; }

.browse-by-range-medical { float:none; position:relative; width:100%;  margin:0 auto;}

.day-mask-background, .night-mask-background { transition:0.6s; opacity:1; }

.day-mask { position:absolute; left:20%; bottom:40px; width:40%; transition:0.6s; }

.night-mask { position:absolute; right:20%; bottom:40px; width:40%; transition:0.6s; }

.otonaplus-mask { position:absolute; left:50%; bottom:30px; width:120px; height:94px; transition:0.6s;  margin-left:-75px;}

.vitamin-mask { position:absolute; left:50%; bottom:50px; transition:0.6s; width:190px; height:84px; margin-left:-75px;}

.medical-mask { position:absolute; left:50%; bottom:20px; width:90px; height:117px; transition:0.6s;  margin-left:-60px; }

.browse-by-range-day-text { 
font-size:22px;
line-height:24px;


position:absolute; 
left:20%; 
width:60%; 
bottom:10px; 
z-index:1;
}

.browse-by-range-night-text { 
font-size:22px;
line-height:24px;


position:absolute; 
left:20%; 
width:60%; 
top:auto;
bottom:10px; 
z-index:1; 
    
}

.browse-by-range-otonaplus-text { 
font-size:22px;
line-height:24px;
color:#000; 

position:absolute; 
right:20%; 
width:60%;  
top:20px; 
z-index:1; 
    
}

.browse-by-range-medical-text { 
font-size:22px;
line-height:24px;
color:#000; 

position:absolute; 
left:20%; 
width:60%; 
top:auto;
bottom:10px; 
z-index:1; 
    
}

.browse-by-range-vitamin-text { 
font-size:22px;
line-height:24px;
color:#000; 

position:absolute; 
left:20%; 
width:60%; 
top:auto;
bottom:10px; 
z-index:1; 
    
}

/* Concept */

.concept { width:100%; margin:0 auto; padding:30px; text-align:left; }

.concept p {font-size:18px; margin-bottom:20px;}
    

/* Reviews */


.review-text { background:#fff; border-radius:20px; padding:30px; margin:0 auto; position:relative; }


/* Saborino Stories */

.saborino-stories-left { float:none; position:relative; width:100%; transition:0.6s; margin-bottom:30px;}

.saborino-stories-right { float:none; position:relative; width:100%; transition:0.6s; margin-bottom:30px; }

.saborino-stories-left-text { 
font-size:20px; 
color:#000; 
text-transform:uppercase; 
position:absolute; 
left:0; 
width:86%; 
bottom:0; 
z-index:1;
background-color:rgba(255,255,255,0.8);
padding:20px;
}

.saborino-stories-right-text { 
font-size:20px; 
color:#000; 
text-transform:uppercase; 
position:absolute; 
right:0; 
width:86%;  
bottom:0; 
z-index:1; 
background-color:rgba(255,255,255,0.8);
padding:20px;
    
}

/* Instagram */

.instagram { padding:30px; font-size:40px; background:#fef9da;}

.instagram-section { background:#faf8e9; padding:60px 30px 40px 30px; }

.ig-post { display:inline-block; margin-right:5px; margin-bottom:5px; transition:0.3s; opacity:1; width:250px; height:250px;}

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

}

@media only screen and (max-width: 1400px) {
    
/* For smaller screen */

.review-spacing { margin-top:20px; }

.review-text { margin-bottom:30px; }

}


/* Mobile only */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 
 /* Browse by range mobile */

.browse-by-range-day { float:none; position:relative; width:100%; display:block; margin-top:20px;  }

.browse-by-range-night { float:none; position:relative; width:100%; margin:0 auto;  }

.browse-by-range-otonaplus { float:none; position:relative; width:100%;  margin:0 auto; }

.browse-by-range-vitamin { float:none; position:relative; width:100%;  margin:0 auto; }

.browse-by-range-medical { float:none; position:relative; width:100%;  margin:0 auto;}

.day-mask-background, .night-mask-background { transition:0.6s; opacity:1; }

.day-mask { position:absolute; left:20%; bottom:40px; width:31%; transition:0.6s; }

.night-mask { position:absolute; right:20%; bottom:40px; width:31%; transition:0.6s; }

.otonaplus-mask { position:absolute; left:50%; bottom:20px; width:95px; height:74px; transition:0.6s;  margin-left:-75px;}

.vitamin-mask { position:absolute; left:50%; bottom:20px; transition:0.6s;  margin-left:-75px;}

.medical-mask { position:absolute; left:50%; bottom:20px; width:70px; height:91px; transition:0.6s;  margin-left:-60px; }


.browse-by-range-otonaplus-text { 
font-size:20px;
line-height:20px;
color:#fff; 

position:absolute; 
right:20%; 
width:60%;  
top:20px; 
z-index:1; 
    
}

.browse-by-range-medical-text { 
font-size:20px;
line-height:20px;
color:#000; 

position:absolute; 
right:20%; 
left:auto;
width:60%;  
top:20px; 
z-index:1; 
    
}
    
}



/* Large Desktops */

@media only screen and (min-width: 1920px) {

.section-content { width:1600px; margin:0 auto;}
.browse-by-range-day { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer; z-index:2; }

.browse-by-range-night { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer; z-index:2; }

.browse-by-range-otonaplus { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer;  z-index:1;}

.browse-by-range-vitamin { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer;  z-index:1;}

.browse-by-range-medical { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer;  z-index:1;}

.saborino-stories-container { width:1600px!important; margin:0 auto; }

.saborino-stories-left { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer;}

.saborino-stories-right { float:left; position:relative; width:800px; transition:0.6s; opacity:1; cursor:pointer;}
    
}