.spectral-extralight {font-family: "Spectral", serif; font-weight: 200; font-style: normal;}
.spectral-light {font-family: "Spectral", serif; font-weight: 300; font-style: normal;}
.spectral-regular {font-family: "Spectral", serif; font-weight: 400; font-style: normal;}
.spectral-medium {font-family: "Spectral", serif; font-weight: 500; font-style: normal;}
.spectral-semibold {font-family: "Spectral", serif; font-weight: 600; font-style: normal;}
.spectral-bold {font-family: "Spectral", serif; font-weight: 700; font-style: normal;}
.spectral-extrabold {font-family: "Spectral", serif; font-weight: 800; font-style: normal;}
.spectral-extralight-italic {font-family: "Spectral", serif; font-weight: 200; font-style: italic;}
.spectral-light-italic {font-family: "Spectral", serif; font-weight: 300; font-style: italic;}
.spectral-regular-italic {font-family: "Spectral", serif; font-weight: 400; font-style: italic;}
.spectral-medium-italic {font-family: "Spectral", serif; font-weight: 500; font-style: italic;}
.spectral-semibold-italic {font-family: "Spectral", serif; font-weight: 600; font-style: italic;}
.spectral-bold-italic {font-family: "Spectral", serif; font-weight: 700; font-style: italic;}
.spectral-extrabold-italic {font-family: "Spectral", serif; font-weight: 800; font-style: italic;}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.raleway-<uniquifier> {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

html, body{font-family: "Raleway", sans-serif; font-size: 1.1rem; line-height: 1.6; font-weight: 500; color: #333; background:#ffffff;}
body.doNotScroll{overflow:hidden; height:100vh;}
*:focus {outline: none;}
h1, .h1{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 40px; line-height: 1;}
h2, .h2{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 30px; line-height: 1;}
h3, .h3{margin: 0 0 30px 0; padding: 0; font-weight: 700; font-size: 26px; line-height: 1;}
a{text-decoration:none; color:inherit; outline:none;}
a:hover{color: inherit;}
img{height: auto; width: 100%;}
p{margin:0 0 20px 0;}
p:last-child{margin:0;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
.nonMobile{display: none;}
.mobile {display:inherit;}
.text-center{text-align: center;}
.image404{width: 300px;}

#menuToggle{position: absolute; top: -42px; right: 0; z-index: 11; display: block;}
#menuToggle span{display: block; width: 24px; height: 2px; margin-bottom: 5px; position: relative; background: #fc7642; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child{transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle.active span{transform: rotate(-39deg) translate(-1px, -2px);}
#menuToggle.active span:nth-last-child(3){opacity: 1; transform: rotate(39deg) translate(0px, -1px);}
#menuToggle.active span:nth-last-child(2){opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}

.topLine{display: block; width: 100%; height: 10px;}
header{border-bottom: 1px solid #eee;}
header .header{background: url(../img/header-banner.png); background-repeat: no-repeat; background-position: center; background-size: contain; min-height: 70px; background-color: #44bb97; display: block;}
header .header .content{padding-top: 40px; padding-bottom: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap;}

header .header .content .headerRightArea{display: flex; gap: 15px; align-items: center; color: #000; font-size: 30px; order: 2; margin-left: 20px;}
header .header .content .headerRightArea #searchButton{}
header .header .content .headerRightArea #userButton{}
header .header .content .headerRightArea #cartButton{position: relative;}
header .header .content .headerRightArea #cartButton i{}
header .header .content .headerRightArea #cartButton .number{position: absolute; display: flex; line-height: 1; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; font-size: 13px; top: 0; right: -5px;}
header .headerBottom{border-top: 1px solid #eee;}
header .headerBottom .content .headerMenuWrapper{position: relative; width: 100%;}
header .headerBottom .content .headerMenuWrapper .headerMenuParent{position: absolute; top: 16px; left: 0; width: 100%; background-color: #fff; z-index: 15; padding: 10px 16px; -webkit-box-shadow: 0 26px 48px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 26px 48px 0 rgba(0, 0, 0, 0.15); display: none;}
header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu{margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;}
header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu li{position: relative;}
header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu li:not(:last-child){border-bottom: 1px solid #eee;}
header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu li a{padding: 15px; font-size: 15px; font-weight: 600; display: block;}

main{padding:50px 0;}

.storiesWrapper{display: flex; flex-direction: column; gap: 30px;}
.storiesWrapper .item{flex: 1; display: flex; flex-direction: column; gap: 10px;}
.storiesWrapper .item .title{margin: 0; font-size: 22px;}
.storiesWrapper .item .date{margin: 0; line-height: 1; font-size: 14px; font-weight: 600;}
.storiesWrapper .item .text{margin: 0; font-size: 14px; font-weight: 600;}
.storiesWrapper .item img{width: 80%; margin: 0 auto; border-radius: 10px;}
.storiesWrapper .item .short{margin: 0; font-size: 14px;}
.storiesWrapper .item .button{font-size: 14px; font-weight: 600; display: block; padding: 0; height: auto;}

main .button{height: 50px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; font-weight: 600; width: auto;}

footer{border-top: 40px solid #003e69; padding: 0 0 50px 0;}
footer .buttonsWrapper{display: flex; gap: 20px; padding: 20px 0 40px 0; justify-content: center;}
footer .buttonsWrapper .button{height: 50px; padding: 0 20px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-weight: 600;}
footer .content{display: flex; gap: 30px; flex-direction: column;}
footer .content .item{flex: 1; text-align: center;}
footer .footerLogo{display: block; width: 220px; margin: 0 auto 20px auto;}
footer .footerTitle{margin: 0 0 10px 0; font-weight: 600; text-transform: uppercase; font-size: 16px;}
footer .footerLinks{font-size: 15px; list-style: none; padding: 0;}
footer .footerLinks li{}
footer .copy{font-size: 11px; text-align: center;}

#backToTop{bottom: 20px; right: 20px; cursor: pointer; display: none; height: 60px; position: fixed; width: 60px; border-radius: 50%; font-size: 20px; line-height: 50px; text-align: center; z-index: 100; color: #fff; border: 5px solid #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;}

@media (min-width: 768px) {
	#menuToggle{display: none;}
	header .header{min-height: 160px;}
	header .header .content{gap: 60px;}
	header .headerBottom .content .headerMenuWrapper .headerMenuParent{position: relative; top: auto; left: auto; width: auto; padding: 0; box-shadow: none; display: block;}
	header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu{flex-direction: row; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 20px 0;}
	header .headerBottom .content .headerMenuWrapper .headerMenuParent .headerMenu li a{height: 40px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: #fff; padding: 0 20px; border-radius: 25px; background-color: #44bb97;}
	.storiesWrapper{flex-direction: row;}
	.storiesWrapper .item{}
	.storiesWrapper .item .title{}
	.storiesWrapper .item .date{}
	.storiesWrapper .item .text{}
	.storiesWrapper .item img{margin: 0 auto 0 0;}
	.storiesWrapper .item .short{}
	footer .content{flex-direction: row;}
	footer .content .item{text-align: left;}
	footer .footerLinks{padding: 0 0 0 20px; list-style: disc;}
	footer .footerLogo{margin: 0 0 20px 0;}
}

@media (min-width: 1024px) {
}

@media (min-width: 1440px) {
}

@media (min-width: 768px) and (max-width: 991px) and (orientation: landscape) {
}

@media (min-width: 992px) {
	.nonMobile{display: inherit;}
	.mobile {display:none;}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

.bgYellow{background: #fdd31e !important;}
.bgGreen{background: #44bb97 !important;}
.bgWhite{background: #ffffff !important;}
.bgOrange{background: #fc7642 !important;}
.bgDarkBlue{background: #003e69 !important;}

.colorWhite{color: #ffffff !important;}
.colorYellow{color: #fdd31e !important;}
.colorGreen{color: #44bb97 !important;}
.colorOrange{color: #fc7642 !important;}
.colorDarkBlue{color: #003e69 !important;}