html, body {margin: 0; padding: 0;}

@font-face {font-family: 'NeueAlte'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/neuealte-400.woff2') format('woff2'), url('../fonts/neuealte-400.woff') format('woff');
}
@font-face {font-family: 'NeueAlte'; font-style: normal; font-weight: 500; font-display: block;
  src: local(''), url('../fonts/neuealte-500.woff2') format('woff2'), url('../fonts/neuealte-500.woff') format('woff');
}
@font-face {font-family: 'NeueAlte'; font-style: normal; font-weight: 600; font-display: block;
  src: local(''), url('../fonts/neuealte-600.woff2') format('woff2'), url('../fonts/neuealte-600.woff') format('woff');
}
@font-face {font-family: 'YouTube'; font-style: normal; font-weight: 400; font-display: block;
  src: local(''), url('../fonts/youtube-logo.woff2') format('woff2'), url('../fonts/youtube-logo.woff') format('woff');
}

body {font-family: "NeueAlte", Arial, Helvetica, sans-serif; font-variant-ligatures: none !important;}

#width {position: fixed; top: 0; z-index: 500; padding: 0 3px; font-size: 11px; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; background-color: #FF0; color: #000; z-index: 100;}

img {border: 0; image-rendering: -webkit-optimize-contrast;} hr {height: 1px; border: 0px; margin: 15px 0;}
a, a:visited, a:hover {text-decoration: underline; outline: none; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}

*:hover {-webkit-tap-highlight-color: transparent;} a {transition: 0.25s; -webkit-transition: 0.25s;}

/*-----------------------------------------------*/

/*HEADER*/

#headerback, #header {display: table; margin: auto; padding: 0; text-align: center; left: 0; right: 0; position: fixed; height: 40px; z-index: 1;}
#headerback {width: 100%; box-shadow: 0 1px 10px 0 #36221C; -webkit-box-shadow: 0 1px 10px 0 #36221C; -moz-box-shadow: 0 1px 10px 0 #36221C;}
#header {margin: auto; width: 98%;}
@media (min-width: 1801px) {#header {max-width: 1500px;}}
@media (max-width: 1800px) and (min-width: 1401px) {#header {max-width: 1200px;}}
@media (max-width: 1400px) and (min-width: 1151px) {#header {max-width: 1000px;}}
@media (max-width: 1150px) {#header {max-width: 900px;}}

/*-----------------------------------------------*/

/*MENU*/

#nav, #nav a {-webkit-tap-highlight-color:transparent;}
#nav {text-align: left; height: 100%;} #nav td {vertical-align: middle; text-align: center;}
#nav a {text-decoration: none; font-size: 20px; line-height: 1.2; font-weight: 400; display: inline-block; height: 30px; text-align: center !important; padding: 3px 10px 1px 10px;}
#nav a:hover {text-decoration: underline; background: none;}
#nav a.selected {cursor: text; -webkit-user-select: none; -webkit-touch-callout: none;} #nav a.selected:hover {text-decoration: none;}
@media (max-width: 315px) {#nav a {padding: 3px 7px 1px 7px;}}

/*-----------------------------------------------*/

/*Social Menu*/

a, *:hover {-webkit-tap-highlight-color: transparent;} #navcheck {display: none;}
.menu a {display: block; position: relative; cursor: pointer; vertical-align: middle;}

@media (min-width: 516px) {
.hamburger {display: none;} .menu {position: absolute; display: table; top: 0; right: 0; z-index: 50; height: 100%;}
.menu div, .menu a {display: table-cell; vertical-align: middle; white-space: nowrap;} .menu a {padding: 0 2px;}
}
@media (max-width: 515px) {
.menu {position: absolute; visibility: hidden; transition: .4s; height: auto; right: 0; width: 40px;}
.menu div {vertical-align: middle; height: 0; transition: .5s; border-bottom: 0;}
.menu a {padding: 0; transition: .5s; display: table; opacity: 0; text-align: center; margin: auto;}

#navcheck:checked ~ .menu {visibility: visible; padding-top: 10px;} #navcheck:checked ~ .menu div {height: 37px;}
#navcheck:checked ~ .menu a {opacity: 1;}

.hamburger {position: absolute; z-index: 1; top: 4px; right: 4px; padding: 0; display: table;}
.hamburger div {height: 32px; width: 32px; display: table;}
.hamburger div::before {content: "#"; color: #FFF; font-size: 28px; line-height: 1; border: 1px solid #FFF; border-radius: 50%; padding: 0; display: table-cell; vertical-align: middle;}

#navcheck:checked ~ .hamburger > div::before {-webkit-transform: rotateZ(360deg); transform: rotateZ(360deg);}
#navcheck:checked ~ .hamburger > div::after {-webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg);}

.hamburger:hover {cursor: pointer;}
.hamburger > div, .hamburger > div::before, .hamburger > div::after {-webkit-transition: 0.15s ease-in-out; transition: 0.15s ease-in-out; -webkit-transition: transform 0.2s ease-out; -webkit-transition: -webkit-transform 0.2s ease-out;}
}
.menu img, #socialbtm img {width: 30px; height: 30px; -webkit-transition: .25s; display: block;}
.menu img:hover, #socialbtm img:hover {-webkit-transform: scale(1.12);}
#socialbtm {margin-bottom: 5px;} #socialbtm a {display: inline-block;}

/*-----------------------------------------------*/

/*BODY AREA*/

.bodyarea {padding: 53px 0 35px 0; width: 95%; margin: 0px auto auto auto; max-width: 1500px;}
.bodyarea, h2 {font-size: 18.25px !important; line-height: 1.45 !important; font-weight: 400;}
@media (max-width: 630px) {.bodyarea {width: 93%;}}
@media (max-width: 413px) {.bodyarea, h2 {font-size: 19px !important;}}

#bodyhead, h1 {margin: 0; padding-top: 10px; text-align: center; font-family: 'NeueAlte', Arial, Helvetica, sans-serif; font-weight: 500;}

#bodyhead {font-size: 38px; line-height: 1.2;} h1 {font-size: 32px; line-height: 1.2;}
@media (max-width: 600px) {#bodyhead {font-size: 35px;} h1 {font-size: 30px;}}
@media (max-width: 399px) {#bodyhead {font-size: 32px;} h1 {font-size: 27px;}}

.heading {font-size: 20px; line-height: 23px; font-weight: 500; text-transform: uppercase;}

/*-----------------------------------------------*/

/*Brand links on search page*/

#brandtable {text-align: center; margin: 30px auto 0 auto;}
#brandtable a {display: inline-block; background-color: #777; color: #FFF !important; padding: 8px 12px; -webkit-transition: .15s; text-decoration: none; border-radius: 6px; margin: 4px 2px; font-size: 16px !important; line-height: 1.4;}
#brandtable a:hover {background-color: #30A5BF;}
@media (max-width: 480px) {#brandtable a {padding: 6px 10px; margin: 3px 1px;}}
@media (max-width: 380px) {#brandtable a {padding: 5px 8px; margin: 2px 0;}}

/*-----------------------------------------------*/

/*Scent Reviews*/

.reviewdate {font-size: 18px; font-weight: 500; text-align: center; margin-top: 5px;}
hr.hrrev {height: 1px; border: 0px; color: #F8A68A; background-color: #F8A68A; margin: 20px 0 15px 0;}
.viewmore, .viewmore a {text-align: center; font-weight: 500; font-size: 18px; margin-top: 5px;}

/*top pic/video*/
#toppic, #toppic img {margin: auto; text-align: center;} #toppic img {display: block; border-radius: 10px;}
#toppic img, .video, .video iframe {width: 100%; max-width: 700px;}
.video {position: relative; margin: 10px auto 25px auto; text-align: center;}
.video iframe {left: 0; right: 0; border: 1px solid #555; border-radius: 5px;}
.video .youtube {border-radius:5px; margin: auto; display: inline-block;}
.video .youtube:before {content: url(../webimgs/videoplay.png); cursor: pointer; position: absolute; left: 0; right: 0; top: 41%; margin: auto; text-align: center;}
.video .youtube:after {content:"YouTube"; font-family: 'YouTube', Arial, Helvetica, sans-serif; position: absolute; color: #FFF; font-size: 19px; font-weight: 400; letter-spacing: -.4px; right: 15px; bottom: 11px;}
.video .youtube:hover:before {color: #008FD2 !important;}

@media (min-width: 601px) {.video iframe {height: 400px;}} @media (max-width: 600px) {.video iframe {height: 350px;}}
@media (max-width: 500px) {.video iframe {height: 280px;}}
@media (max-width: 480px) {.video .youtube:before {top: 39%; transform: scale(.9);}} @media (max-width: 400px) {.video iframe {height: 230px;}}
@media (max-width: 350px) {.video iframe {height: 200px;} .video .youtube:before {top: 37%; transform: scale(.83);}}
@media (max-width: 300px) {.video iframe {height: 160px;}}


/*review*/

.scentreview {background-color: #F2F2ED; border-radius: 7px; -webkit-border-radius: 7px; margin: 30px auto;} /*FDF9D0*/
.scentreview p {margin-bottom: 0;}
.scentreview b {display: block; font-size: 21px; line-height: 1.3; font-weight: 500; padding: 6px 7px 6px 9px; margin-bottom: 15px; border-radius: 7px 7px 0 0; -webkit-border-radius: 7px 7px 0 0; background-color: #2F8092; color: #FFF;} /*F8A68A*/

.duoname {font-weight: 500; text-decoration: underline; padding-bottom: 5px;}
.duo {padding: 0 10px 20px 10px; border-bottom: 2px solid #F8A68A;}
@media (max-width: 413px) {.scentreview b {font-size: 21px;} .reviewpad {padding: 0 12px 10px 12px;}}

.reviewpad {padding: 0 15px 10px 15px;}
.notes, .descrip {margin: 10px 0; font-size: .9em; line-height: 1.4; color: #BA410C;}
.notes:before, .descrip:before {font-weight: 600; text-transform: uppercase;}
.notes:before {content: "Notes: ";} .descrip:before {content: "Description: ";} .stars:before {font-weight: 600; content: "Throw: ";}
.descrip span {font-weight: 500;}
.candle {margin-top: 10px; font-style: italic; color: #777; font-size: .9em;}

.myreview {margin-top: 10px; color: #444;} .myreview .notes, .myreview .descrip {padding-bottom: 15px;}


/*scores*/

.stars {position: relative; border: 1px solid #BBB; border-radius: 8px; margin: 15px 0 0 80px; width: 50px; height: 25px;}
.stars:before, [class^="score"], [class^="score"]:after {position: absolute;}

[class^="score"]:after {content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, .07); border-radius: 6px;}

.stars:before {content: "THROW"; line-height: 24px; left: -80px; font-size: 1em; font-weight: 600; color: #000;}

[class^="score"] {background-color: #6DFC06; filter: brightness(108%); /*z-index: -1;*/ height: 100%; /*width: 50px; height: 25px;*/ border-radius: 7px 0 0 7px;}
[class^="score"]:after {line-height: 25px; width: 50px; text-align: center; font-size: 1em; font-weight: 500;} /*#FCD601*/

.score1 {width: 0;} .score1:after {content: "1";} .score2 {width: 25%;} .score2:after {content: "2";}
.score3 {width: 50%;} .score3:after {content: "3";} .score4 {width: 75%;} .score4:after {content: "4";}
.score5 {width: 100%; border-radius: 6px;} .score5:after {content: "5";}


/*scores - used round colored orbs before 11/1/22

.score {margin: 20px 0 0 80px; line-height: .85; width: 93px; height: 17px; background: url("../webimgs/stars.png"); background-size: cover; display: inline-block;}
.score:before {background-color: #FAC7A6; border-radius: 50%; padding: 4px 12px 5px 12px; font-size: .95em; font-weight: 600; margin-left: -75px; line-height: 1; text-align: center;}
.score000 {background-position: 0 -2px;} .score000:before {content: "0.00";}
.score100 {background-position: 0 -22px;} .score100:before {content: "1.00";}
.score200 {background-position: 0 -42px;} .score200:before {content: "2.00";}
.score250 {background-position: 0 -62px;} .score250:before {content: "2.50";}
.score300 {background-position: 0 -82px;} .score300:before {content: "3.00";}
.score350 {background-position: 0 -102px;} .score350:before {content: "3.50";}
.score400 {background-position: 0 -122px;} .score400:before {content: "4.00";}
.score500 {background-position: 0 -142px;} .score500:before {content: "5.00";}
*/

/*findit*/
.findit {float: right; margin-top: -25px;}
.findit a {background-image: url("../webimgs/find.png"); background-size: 18px 18px; background-repeat: no-repeat; background-position: center; height: 18px; width: 18px; display: inline-block; vertical-align: middle; padding: 0 4px; text-align: center;}
.findit a {-webkit-transition: .25s;} .findit a:hover {-webkit-transform: scale(1.12);}
/*@media (max-width: 400px) {.findit {float: none; margin-top: 10px; text-align: right;}}*/

/*what people are saying about specific scents*/
.membcomments {font-size: 16px; line-height: 21px; font-style: italic; margin-top: 12px; padding-top: 10px; border-top: 1px solid #CCC;}
.membcomments span {color: #0059D3; font-weight: 600; text-transform: uppercase; text-decoration: underline; display: block; width: auto;}
.membcomments span:hover {color: #00F; font-style: normal;}
.membcomments div {margin-top: 8px; color: #000; font-weight: 600; text-transform: uppercase; text-decoration: underline; font-style: normal !important;}
.membcomments ul {margin-bottom: 0;}
.membcomments hr {margin: 7px 0; color: #FC0; background-color: #FB0;}
.scentreview input {display: none;}
.scentreview article {overflow: hidden; height: 0px; position: relative;}
.scentreview input:checked ~ article {height: auto;}
.scentreview label {display: block; position: relative; margin: 0; width: auto;}
.scentreview label:hover, .scentreview label:active {background: none !important; border: none !important;}
.scentreview input:checked + label::after {content: "\274C"; position: absolute; top: 0; right: 0; margin: 2px 7px 0 0; font-size: 16px; font-weight: 400; font-style: normal; color: #666;}
.scentreview label span, .scentreview input:checked + label {display: block !important; padding-right: 20px !important;}
.scentreview label, .scentreview input:checked + label {cursor: pointer;}


/*NEW SCORING AREA - Used once but didn't like

.starback {table-layout: fixed; margin: 20px 0 5px 0;}
.stars1 {display: inline-block; font-size: 20px; font-weight: 500; white-space: nowrap;} .stars1:nth-child(2) {margin: 0 30px;}
.stars1 span {padding: 5px 11px; font-size: 21px; font-weight: 500; line-height: 1; color: #2F8092; background-color: #FAC7A6; border-radius: 50%;}
.stars1:last-child span {font-size: 25px; font-weight: 600;}
@media (max-width: 640px) {.stars1 span {display: block;margin: auto; text-align: center;} .stars1:nth-child(2) {margin: 0 20px;}}
@media (max-width: 640px) and (min-width: 386px) {.stars1 {text-align: center; margin: auto;}}
@media (max-width: 415px) {.stars1:nth-child(2) {margin: 0 10px;}}
@media (max-width: 385px) {
.starback {margin-bottom: 12px;} .stars1 {position: relative; display: block; width: 152px;}
.stars1 span {position: absolute; float: right; top: 0; right: 0;}
.stars1:nth-child(2) {margin: 12px 0;} .stars1:nth-child(3) {font-size: 17px; padding-top: 4px; width: 158px;} 
}
.findit1 {float: right; margin-top: -25px;}
.findit1 a {background-image: url("../webimgs/find.png"); background-size: 18px 18px; background-repeat: no-repeat; background-position: center; height: 18px; width: 18px; display: inline-block; vertical-align: middle; padding: 0 4px; text-align: center;}
.findit1 a {-webkit-transition: .25s;} .findit1 a:hover {-webkit-transform: scale(1.12);}
@media (max-width: 400px) {.findit1 {margin-right: -7px;}}
*/

/*-----------------------------------------------*/

/*Help Pages*/

#faqmenu {text-align: center; margin: auto auto 20px auto;}
#faqmenu a {display: inline-block; padding: 8px 0 9px 0; margin: 3px 0; text-align: center; width: 130px; background-color: #2F8092; color: #FFF; -webkit-border-radius: 7px; font-size: 19px; line-height: 1.3; font-weight: 400; text-decoration: none;}
#faqmenu a:hover {background-color: #30A5BF; cursor: pointer;}
#faqmenu a.selected, #faqmenu a.selected:hover {background-color: #5D7479; cursor: text;}
@media (min-width: 481px) {#faqmenu span {display: block;}}
@media (max-width: 480px) {#faqmenu a {display: block; width: 190px; padding: 11px 0;}}

.question {font-size: 22px; font-weight: 500; color: #C00;}

.ac-container div {margin-top: 10px; border-radius: 6px; -webkit-border-radius: 6px; background-color: #F2F2EF;}
.ac-container label:hover, .ac-container label:active {background-color: #30A5BF !important;}
.ac-container label {display: block; position: relative; color: #FFF; font-weight: 400; font-size: 21px; line-height: 1.3; padding: 5px 0 5px 10px; margin: 0; width: auto; border: none !important; background-color: #15687A !important; text-align: left; text-transform: none; border-radius: 8px; -webkit-border-radius: 8px;}
.ac-container label span, .ac-container input:checked + label {display: block !important; padding-right: 20px !important;}
.ac-container label, .ac-container input:checked + label {cursor: pointer;}
.ac-container input + label {-webkit-transition: .25s;}
.ac-container input:checked + label::after {content: "\2A2F"; position: absolute; top: 0; right: 0; margin: -2px 7px 0 0; font-size: 34px; line-height: 1; font-weight: 400; color: #FFF;}
.ac-container input:checked + label,.ac-container input:checked + label:hover {font-size: 24px; transition: 0.25s; -webkit-transition: 0.25s; background-color: #30A5BF !important; border-radius: 6px 6px 0 0;}
.ac-container input{display: none;}
.ac-container article {overflow: hidden; height: 0px; position: relative;} .ac-container article p {padding: 20px 15px 15px 15px; margin: 0;}
.ac-container article p:not(.ac-container article p:first-child) {padding-top: 8px !important; padding-bottom: 8px !important;}
.ac-container input:checked ~ article {height: auto;}


/*-----------------------------------------------*/

/*BOTTOM AREA*/

#rvwsvc {display: none;}
#rvwsvc, #rvwsvc div {background-color: #624E52;}
#rvwsvc div {text-align: center; padding: 25px 0; width: 90%; margin: 0px auto auto auto; max-width: 1500px; color: #FFF;}
#rvwsvc a {color: #FFF !important; text-decoration: underline !important;}
@media (min-width: 491px) {#rvwsvc span:first-child {display: block; margin-top: 15px !important;} #rvwsvc div {line-height: 1.2 !important;}}
@media (max-width: 750px) and (min-width: 491px) {#rvwsvc span:last-child {display: block; margin-top: 5px;}}

#joinus {text-align: center; margin: 3px auto 15px auto;}
#joinus a {background-color: #3B5998; display: inline-block; width: 160px; padding: 10px; border-radius: 5px; font-weight: 400; font-size: 15px; text-decoration: none !important; transition: 0.25s; color: #FFF !important; border: 1px solid #7cbefb; white-space: nowrap;}
#joinus a:hover {cursor: pointer; background-color: #4387FF;}

#bottomarea {font-size: 12px; line-height: 20px; padding: 11px 0 8px 0; text-align: center;}
#btm_menu {font-size: 15px; padding: 10px 10px 20px 10px;}
#btm_menu a {text-transform: uppercase; text-decoration: none;} #btm_menu a:nth-child(3) {text-transform: none !important;}
#btm_menu a:hover {text-decoration: underline; color: #FFF !important;}

@media (min-width: 516px) {#btm_menu a {padding: 0 5px; margin: 0 5px; white-space: nowrap;}}
@media (max-width: 515px) {#btm_menu {line-height: 40px;} #btm_menu a {display: block; text-transform: uppercase;}}
@media (max-width: 420px) {#bottomarea {line-height: 18px;}}

#totop {position: fixed; right: 16px; bottom: 13px; font-size: 16px; border-radius: 35%; background-color: rgba(0, 0, 0, 0.35); padding: 8px; font-family: Arial, Helvetica, sans-serif; border: 2px solid #888;}
#totop img {width: 20px; height: 12px;} #totop:hover {-webkit-transform: scale(1.1);}
@media (min-width: 481px) {#totop {-webkit-transition: .25s;}}

/*-----------------------------------------------*/

/*More Reviews*/
#morereviews {display: table; text-align: center; margin: auto; padding: 0 10px;}
#morereviews, #morereviews a {font-size: 22px; line-height: 1.4; text-align: center; font-weight: 500;}
#morereviews a {display: table; text-decoration: none;} #morereviews a:hover {text-decoration: underline;}
#morereviews a:after {content:url('../webimgs/more.png'); display: block; margin: 15px auto 0 auto; text-align: center;}

/*-----------------------------------------------*/

/*Misc*/

#closed {margin: 30px auto 0 auto; text-align: center; font-size: 1.1em; line-height: 1.45em; font-weight: 500; background-color: #FF0;}

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

/*COLORS*/

body, .bodyarea {background-color: #ffe6a6; color: #111;}
a, a:visited {color: #2F8092;} /*a:hover, h1 a:hover {color: #008FD2 !important;}*/
hr {color: #b3a38a; background-color: #b3a38a;}
/*a, a:visited {color: #0059D3;} a:hover, h1 a:hover {color: #008FD2 !important;}*/
#bodyhead, h1 {color: #015899 !important;} /*red F24236*/ /*4D9DAC*/ /*366F93*/
#headerback, #header, .menu {background-color: #624E52; border-bottom: 1px solid #B57A7A;} /*red F24236, border FC877E*/
#nav a, #nav a:hover {color: #FFF !important;} #nav a.selected {color: #FCDD99 !important;}
.comments {background-color: #FCDD99;}
#bottomarea {background-color: #222;} #bottomarea, #bottomarea a {color: #FFF;}