@import url('https://fonts.googleapis.com/css?family=Montserrat:300,600,900');

*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html:lang(il) *, *::before, *::after { text-align: right!important; }

html { font-size: 62.5%; }

body { margin: 0; padding: 0; font-size: 1.6rem; font-family: "Montserrat", sans-serif; color: #040404; }

p,
li { font-size: 1.4rem; }

/* ATOMS */
.logo-title { font-size: 1.9rem; color: #22416d; font-weight: 900; text-transform: uppercase; }
.logo-subtitle { font-size: 1.9rem; color: #22416d; font-weight: 300; }

.nav-el { display: block; color: #466b97; font-size: 1.3rem; font-weight: 600; padding: 8px 16px; transition: background-color .3s ease, color .3s ease; }
.nav-el:hover { background-color: #466b97; color: white; text-decoration: none; }

.h1 { font-size: 2.7rem; color: #22416d; margin: 3.5rem 0; font-weight: 600; }

.product-name { color: #22416d; text-decoration: underline; font-size: 1.6rem; font-weight: 600; }

.p-thin-color { color: #466b97; font-weight: 300; font-size: 1.6rem; }
.p-thin-color .sm { font-size: 1rem; }
.p-thin-color.un:hover { text-decoration: underline; cursor: pointer; }

.cta { background: #466b97; color: white; padding: 10px 20px; font-weight: 600; font-size: 1.2rem; border-radius: 6px; border: 1px solid #466b97; transition: background .3s ease, color .3s ease; }
.cta:hover { background: white; color: #466b97; text-decoration: none; }

.p-w { font-weight: 600; }
.p-s-i { font-style: italic; }

.title-adx { font-weight: 600; font-size: 1.3rem; text-transform: uppercase; }

.comment-name { font-weight: 600; }

.add-time { color: #cdcdcd; font-size: 1.2rem; }

.answer { display: inline-block; color: #549cb2; font-size: 1.4rem; }
.answer:hover { color: #549cb2; cursor: pointer; text-decoration: underline; }

.separatingLine { background-color: #a7a7a7; height: 1px; width: 100%; margin: 4em 0; }

.see-all-testi { font-weight: 1.4rem; }

.title-opi { margin: 5rem 0 3rem; }

.styledInput,
.styledTextarea { display: block; border: none; background-color: white; color: #040404; padding: 8px 12px; width: 100%; margin-bottom: 1.5rem; font-size: 1.3rem; }
.styledInput::placeholder { color: #040404; font-style: italic; }

.styledTextarea { height: 135px; }

.btn-show-more-comments, 
.btn-show-less-comments { border: none; background: none; display: block; margin: 0 auto; padding: 0.4em 0; font-size: 0.8em; font-weight: 600; }
.btn-show-more-comments:hover,
.btn-show-less-comments:hover { text-decoration: underline; }
.btn-show-more-comments:active, .btn-show-more-comments:focus,
.btn-show-less-comments:active, .btn-show-less-comments:focus { outline: none; }
.btn-show-less-comments { display: none; }
.btn-show-more-comments.hide { display: none; }
.btn-show-less-comments.show { display: block; }

/* ========================= */

header,
footer { padding: 4em 0; }
header .logo img,
footer .logo img { width: 61px; height: 61px; margin-right: 1.5rem; background: #466b97; }

html:lang(il) header .logo img,
html:lang(il) footer .logo img { margin: 0 0 0 1.5rem; }

@media(max-width: 576px) {
  header,
  footer { padding: 2em 0; }
}

article { background: #eeeeee; }

nav { margin-bottom: 4em; }
nav ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; }

#main .hero-img { max-width: 720px; width: 100%; }


#main .frame { background-color: #e2e2e2; padding: 2.5rem 3rem; }
#main .frame ul { margin: 0; padding: 0; list-style: none; }


#main .wrapper--mini-ranking { background-color: white; padding: 5rem 3rem; }
#main .ranking--product { max-width: 20rem; width: 100%; display: block; margin: 0 auto; }


#main .rating-item { display: grid; grid-template-columns: 1fr 20rem 3rem; align-items: center; font-size: 14px; }
#main .rating-desc { margin: 0; padding: 0; font-weight: 600; }
#main .rating-box { background-color: #eeeeee; }
#main .rating-bar { position: relative; background: linear-gradient(to right, #7aa726 0%, #a2c46d 50%); width: 0%; height: 12px; }
#main .rating-bar.rating-bar-bg::after { content: ''; position: absolute; left: 0; top: 0; width: 20rem; height: 100%; background: #e8e8e8; z-index: -1; }
#main .rating-value { margin: 0; padding: 0; font-weight: 600; text-align: right; }

html:lang(il) #main .rating-item { grid-gap: 0 10px; }

@media screen and (min-width: 768px) {
  html:lang(es) #main .rating-item { grid-template-columns: 1fr 18rem 3rem; }
}

@media(max-width: 1200px) {
  .wrapper-rating { margin-bottom: 2em; }
}

@media(max-width: 440px) {
  
  #main .rating-item { grid-template-columns: 1fr 8rem 3rem; }
}


#main .big-ranking--item { background-color: white; padding: 5rem 3rem; margin-bottom: 6rem; }
#main .ingredient { display: grid; grid-template-columns: 14rem 1fr; grid-gap: 1.5rem; margin-bottom: 1.5rem; }

html:lang(il) #main .ingredient { grid-template-columns: 1fr 14rem; }

@media(max-width: 576px) {
  #main .ingredient,
  html:lang(il) #main .ingredient { grid-template-columns: 1fr; }
  #main .ingredient img { display: block; margin: 0 auto; }
  #main .ingredient p { text-align: justify; }
}

@media(max-width: 440px) {
  #main .wrapper--mini-ranking,
  #main .big-ranking--item { padding: 3rem 1rem; }
}

#main .opinion { border-top: 1px solid #a7a7a7; padding: 3rem 0; }
#main .opinion ul { padding: 0; margin: 0; list-style: none; }
#main .opinion ul li { position: relative; margin: 0 0 0 25px; }
#main .opinion ul li::before { content: ''; display: block; position: absolute; top: 0; left: 0; transform: translate(-25px, 6px); }
#main .opinion ul.ul-adv li::before { background: url(../img/good.jpg); width: 14px; height: 10px; }
#main .opinion ul.ul-disadv li::before { background: url(../img/bad.jpg); width: 11px; height: 11px; }

html:lang(il) #main .opinion ul li { margin: 0 25px 0 0; }
html:lang(il) #main .opinion ul li::before { left: auto; right: 0; transform: translate(25px, 6px); }


#from { background-color: #eeeeee; padding-bottom: 8rem; }
#from .form-title { font-weight: 600; margin-bottom: 1.6rem; }
#from .title-min { font-weight: 600; margin: 0 0 1.2rem 1.6rem; font-size: 1.4rem; text-transform: uppercase; }
#from .cta-form { background: #4c4c4c; color: white; text-transform: uppercase; font-weight: 600; padding: 7px 18px; border: 1px solid #4c4c4c; transition: background .3s ease, color .3s ease; }
#from .cta-form.add {  padding: 0 18px; height: 35px; line-height: 35px; }
#from .cta-form:hover { text-decoration: none; background: transparent; color: #4c4c4c; }
#from .wrapper-input { position: relative; }
#from .btn-add { position: absolute; top: 0; right: 0; background: white; color: #4c4c4c; border: none; font-weight: 600; font-size: 2.2rem; }



.asside-a:hover { text-decoration: none; }
.asside-product { background: white; width: 250px; padding: 15px; }
.asside-product .title { background: #466c93; color: white; font-size: 1.8rem; text-transform: uppercase; text-align: center; font-weight: 600; text-decoration: underline; padding: 6px 0; }
.asside-product .product-name { text-align: center; text-decoration: none; font-size: 2.2rem; }
.asside-product .product-name:hover { text-decoration: none; }
.asside-product .webside { color: #22416d; font-weight: 600; text-align: center; text-decoration: underline; }

html:lang(il) .asside-product .title,
html:lang(il) .asside-product .product-name,
html:lang(il) .asside-product .webside { text-align: center!important; }


#ftb-a { display: none; position: fixed; width: 100%; z-index: 999; cursor: pointer;  }
#ftb-a.active { display: block; animation: animateFTBshow .5s ease both; }
#ftb-a.inactive { display: block; animation: animateFTBhide .5s ease both; }
#ftb-a.bf.active { display: block; animation: animateFTBshowBF .5s ease both; }
#ftb-a.bf.inactive { display: block; animation: animateFTBhideBF .5s ease both; }
#ftb-a:hover { text-decoration: none; }
#floating-top-btn { background: #009a0c; text-align: center; color: white; font-weight: 700; text-transform: uppercase; padding: 15px 0; }

#ftb-a .black-friday { background-color: #f6314c; text-align: center; }

@media (min-width: 576px) {
    #ftb-a { display: none !important; }
}

@keyframes animateFTBshow { 
    0% { transform: translateY(-54px); }
    100% { transform: translateY(0); }
}
@keyframes animateFTBhide { 
    0% { transform: translateY(0); }
    100% { transform: translateY(-54px); }
}

@keyframes animateFTBshowBF { 
    0% { transform: translateY(-85px); }
    100% { transform: translateY(0); }
}
@keyframes animateFTBhideBF { 
    0% { transform: translateY(0); }
    100% { transform: translateY(-85px); }
}

#slm-btn { margin-top: 20px; }

@media screen and (max-width: 767px) {
  html:lang(sk) h1 br { display: none; }
  html:lang(it) .mini-ranking--item .row:nth-child(2) .p-thin-color,
  html:lang(nl) .mini-ranking--item .row:nth-child(2) .p-thin-color,
  html:lang(se) .mini-ranking--item .row:nth-child(2) .p-thin-color { width: 50%; }
}