@font-face{font-family: Open Sans; src: url('font.woff2') format('woff2'); font-style: normal; font-display: swap}

:root{
	--primary-color: #ffa010; 
	--second-color: #222f3f;
	--third-color: #eaf8ff;
	--fourth-color: #f0f0f0;
	--fifth-color: #f2efec;
	--border-color: #c0c0c0;
	--border-dark-color: #808080;
}

/* https://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca */
HTML{-webkit-text-size-adjust: 100%}
BODY{margin: 0px; padding: 0px; position: relative; background: #fff}
BODY:has(DIV.modal--active){overflow: hidden}

H1,H2,H3,H4,H5,H6,DIV,P,A,SPAN,IMG,UL,LI,FORM,FIELDSET,INPUT,TEXTAREA,TABLE,TR,TD,SELECT,OPTION,IFRAME{color: #000; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 24px; font-weight: normal; font-smooth: always; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0px; padding: 0px; list-style-type: none}
FIELDSET, LEGEND, IMG{border: none}
IMG{line-height: 0px}
TABLE{border-spacing: 0px; border-collapse: collapse}
SELECT, OPTION{font: -moz-pull-down-menu}
INPUT::placeholder, TEXTAREA::placeholder{color: #000; opacity: 1}
P{text-wrap: pretty}

* STRONG{font-synthesis: style}



/* FONTS */
H1, H1 *, H2, H2 *, H3, H3 *, H4, H4 *, H4 A{font-size: 40px; line-height: 46px; letter-spacing: -2px; text-wrap: pretty; padding: 20px 0px 30px 0px}
H1{padding-top: 0px}
H1.border{margin: 0px 0px 40px 0px; position: relative}
H1.border::after{content: ' '; width: 100px; height: 5px; position: absolute; left: 0px; bottom: 0px; background: var(--primary-color)}


H2, H2 *{font-size: 32px; line-height: 40px; letter-spacing: -1px}
H2{padding-bottom: 25px}
H2 SPAN.italic{font-style: italic}
H2.border{margin: 0px 0px 40px 0px; position: relative}
H2.border::after{content: ' '; width: 70px; height: 3px; position: absolute; left: 0px; bottom: 0px; background: var(--primary-color)}

H3, H3 SPAN{font-size: 22px; line-height: 28px; letter-spacing: -0.5px}
H3{padding: 15px 0px 20px 0px}
H3.no-padding-top{padding-top: 0px}

H4, H4 *{font-size: 16px; line-height: 24px; letter-spacing: 0px; font-weight: 600; font-synthesis: style}
H4, H4 A{padding: 15px 0px 10px 0px}

P.intro, P.intro *, P.intro-border{font-size: 20px; line-height: 30px; letter-spacing: -0.5px}
P.intro SPAN.italic{font-style: italic}
P.intro{padding: 0px 0px 30px 0px}
P.intro-border{margin-bottom: 30px; padding-bottom: 30px; border-bottom: solid 1px var(--border-color)}
P.intro STRONG{color: #303030; font-weight: 700}

P.main, P.main *{}
P.main SPAN.italic{font-style: italic}
P.main STRONG{color: #303030; font-weight: 700}
P.main{padding: 0px 0px 25px 0px}

P STRONG, P B{font-synthesis: style}




/* CONTAINER */
.container, ARTICLE, .container--900, .container--1000, .container--1100{width: 90%; max-width: 1200px; margin: 0px auto; padding: 0px; position: relative}
.container--900, ARTICLE{max-width: 900px}
.container--1000{max-width: 1000px}
.container--1100{max-width: 1100px}





/* TOP STRIP -- FIXED -- ALL FOUR CATEGORIES */
.top-strip-fixed{width: 100%; height: 0px; position: fixed; left: 0px; top: 0px; z-index: 100; overflow: hidden; transition: 0.25s; background: var(--second-color)}
.top-strip-fixed--active{height: 50px; overflow: visible}

.top-strip-fixed__container{width: 90%; max-width: 1200px; height: 50px; display: flex; justify-content: space-between; align-items: center}
.top-strip-fixed__right{justify-content: flex-end; display: flex; align-items: center}

P.top-strip-fixed__product-name{color: #fff; font-size: 19px; line-height: 1; font-weight: 600; letter-spacing: -0.5px; font-synthesis: style}
P.top-strip-fixed__button-blue, A.top-strip-fixed__button-blue{color: #fff; font-size: 14px; line-height: 1; font-weight: 700; font-synthesis: style; text-align: center; text-decoration: none; width: 80px; padding: 6px 0px; border-radius: 5px; cursor: pointer; background: #0066cc}
P.top-strip-fixed__button-blue-configure, A.top-strip-fixed__button-blue-configure{width: 160px}

P.top-strip-fixed__link{color: #e0e0e0; font-size: 14px; line-height: 1; margin: 0px 25px 0px 0px; padding: 0px 25px 0px 0px; position: relative; cursor: pointer}
P.top-strip-fixed__link::after{content: " "; width: 1px; height: 12px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); background: #e0e0e0}

@media screen and (max-width: 1000px)
{
	.top-strip-fixed__container{justify-content: flex-end}
	P.top-strip-fixed__product-name, P.top-strip-fixed_link-responsive{display: none}
}





/* HEADER + LOGO */
#header{height: 74px; padding: 0px}
.header__logo{width: 365px; height: 53px; display: block; position: absolute; left: 0%; top: 10px; background-image: url(../images/header.png); background-size: cover}

@media screen and (max-width: 750px)
{
	#header{height: 65px}
	.header__logo{width: 121px; height: 44px; top: 15px; background-image: url(../images/header-small.png)}
}





/* HEADER ICONS */
#icon-section{height: 40px; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 18px; right: 0px}
.icon-section{cursor: pointer; position: relative}
.icon-section__divider{width: 1px; height: 16px; margin: 0px 25px; border-left: solid 1px #888}
.icon-section__responsive, .icon-section__divider-responsive{display: none}

@media screen and (max-width: 900px)
{		
	.icon-section__responsive, .icon-section__divider-responsive{display: block}	
}


/* HEADER: Icon Search */
.icon-section__search{width: 29px; height: 40px}
.icon-section__search *{position: absolute; transition: .5s ease-in-out}
.icon-search__2{width: 20px; height: 20px; border: solid 1px var(--second-color); border-radius: 50%; left: 0px; top: 7px; background: #fff}
.icon-search__1{width: 15px; height: 1px; left: 14px; top: 28px; transform: rotate(45deg); background: var(--second-color)}
	
.icon-section__search:hover .icon-search__2, .icon-section__search--active .icon-search__2{border: solid 1px #ff7010}
.icon-section__search:hover .icon-search__1, .icon-section__search--active .icon-search__1{background: #ff7010}
	
@media screen and (max-width: 750px)
{	
	#icon-section{top: 15px}
	.icon-section__search, .icon-section__divider-search{display: none}
	.icon-section__divider{margin: 0px 20px}
}


/* HEADER: Icon My Account */
.icon-section__my-account{width: 24px; height: 24px; background: url(https://www.9001simplified.com/images/icons/icon-account.png)}	
	
	
/* HEADER: Icon Cart */
.icon-section__cart{width: 26px; height: 40px; margin: -4px 0px 0px -5px}
.icon-section__cart *{position: absolute; transition: all .3s ease-in-out; background: #686868}

.cart-1{width: 6px; height: 1px; left: 0px; top: 9px}
.cart-2{width: 1px; height: 4px; left: 5px; top: 10px}
.cart-3{width: 21px; height: 1px; left: 6px; top: 13px}
.cart-4{width: 10px; height: 1px; left: 3px; top: 17px; transform: rotate(65deg)}
.cart-5, .cart-6, .cart-7, .cart-8, .cart-9{height: 1px; transform: rotate(295deg)}
.cart-5{width: 6px; left: 7px; top: 16px}
.cart-6{width: 10px; left: 8px; top: 17px}
.cart-7{width: 10px; left: 12px; top: 17px}
.cart-8{width: 10px; left: 16px; top: 17px}
.cart-9{width: 10px; left: 20px; top: 17px}
.cart-10{width: 15px; height: 1px; left: 9px; top: 22px}
.cart-11{width: 1px; height: 3px; left: 10px; top: 22px}
.cart-12{width: 13px; height: 1px; left: 10px; top: 25px}
.cart-13, .cart-14{width: 5px; height: 5px; border-radius: 50%; left: 10px; top: 27px}
.cart-14{left: 18px}
.cart-15{width: 22px; height: 1px; left: 6px; top: 12px}

.icon-section__cart .cart-15{background: #fff}
.icon-section__cart:hover *{background: var(--primary-color)}


/* HEADER: Icon Menu */
.icon-section__menu{width: 26px; height: 20px; margin-top: -2px; cursor: pointer; position: relative; z-index: 11}
.icon-section__menu *{width: 26px; height: 2px; position: absolute; left: 0px; top: 0px; transition: .2s ease-in-out; background: #484848}
.icon-section__menu .icon-menu__2{top: 9px}
.icon-section__menu .icon-menu__3{top: 18px}

.icon-section__menu--active{position: fixed}
.icon-section__menu--active *{top: 11px; background: #ff0000}
.icon-section__menu--active .icon-menu__1{top: 10px; transform: rotate(45deg)}
.icon-section__menu--active .icon-menu__2{width: 0px; height: 0px; left: 13px}
.icon-section__menu--active .icon-menu__3{top: 10px; transform: rotate(-45deg)}





/* NAV */
.main-nav{z-index: 10; background: var(--second-color)}
.main-nav__container{max-width: 1210px}
#nav{display: flex; justify-content: space-between; align-items: center} 

P.top-nav, A.top-nav{color: #fff; font-size: 16px; line-height: 1; text-decoration: none; padding: 12px 40px 12px 20px; cursor: pointer; position: relative; white-space: nowrap; display: block; z-index: 1; transition: all .3s ease-in-out}
A.top-nav{padding-right: 20px}
P.top-nav::after{content: " "; border-width: 5px; border-style: solid; border-color: #e0e0e0 transparent transparent transparent; position: absolute; right: 20px; top: 18px}
P.top-nav:hover, A.top-nav:hover{background: #405060}





/* DROPDOWNS */
.dropdown{width: 450px; max-height: 0px; overflow: hidden; position: absolute; z-index: 100; background: var(--second-color)}
.dropdown--active{max-height: 1000px; border-bottom: 1px solid #506070; overflow: visible; transition: all .3s ease-in-out}
.dropdown-inner-4{margin-left: -312px}

A.menu-item{text-decoration: none; padding: 25px; border-top: solid 1px #506070; display: block; transition: all .3s ease-in-out; position: relative}
A.menu-item-bg{background: url(../images/icons/icon-cart.png) no-repeat 95% center}
A.menu-item:hover{background-color: #506070}

P.menu-item-header{color: #fff; font-size: 16px; line-height: 24px; font-weight: normal}
P.menu-item-description{color: #fff; font-size: 14px; line-height: 20px; padding: 10px 0px 0px 15px}

@media only screen and (min-width: 900px)
{	
	LI.nav:hover DIV.dropdown{max-height: 1000px; border-bottom: 1px solid #506070; overflow: auto}
}





/* SEARCH */
.search-box{text-align: center; height: 0px; overflow: hidden; transition: all .3s ease-in-out; background: #f6f6f6}
.search-box--active{height: 250px; border-bottom: solid 1px var(--border-color)}
	
.search-box H2{padding: 60px 0px 0px 0px}
.search-box__form{width: 60%; max-width: 600px; height: 50px; margin: 40px auto 0px; display: flex; justify-content: space-between}
.search-box__form *{box-sizing: border-box}

.search-box__input{color: #404040; font-size: 24px; line-height: 1; letter-spacing: -1px; width: calc(100% - 90px); height: 50px; padding: 25px 10px; border: solid 1px #888; border-right: none; outline: none; background: #fff}
.search-box__input::placeholder{color: #888; opacity: 1}
.search-box__submit{color: #fff; font-size: 18px; line-height: 18px; text-align: center; width: 90px; height: 50px; padding: 15px 0px 15px 0px; border: none; cursor: pointer; transition: all 0.5s; background: var(--second-color)}
.search-box__submit:hover{background: var(--primary-color)}

@media screen and (max-width: 750px)
{
	.search-box--active{height: 200px}
	.search-box H2{display: none}
}





/* SUB-MENU */
#sub-menu{margin: 0px 0px 55px 0px; padding: 15px 0px 12px 0px; border-bottom: solid 1px var(--border-color)}
#sub-menu DIV.container{padding: 0px}
#sub-menu P, #sub-menu A{font-size: 10px; line-height: 16px; text-transform: uppercase; word-spacing: 2px}
#sub-menu P{color: #181818; text-align: right}

@media screen and (max-width: 750px)
{
	#sub-menu{display: none}
}





/* MODAL / POPUPS */
#modal{width: 100%; position: fixed; z-index: 199; display: flex; justify-content: center; align-items: center; transition: opacity 0.3s ease-in-out}
.modal--inactive{height: 0%; overflow: hidden; opacity: 0}
.modal--active{height: 100%; overflow: visible; opacity: 1; background-color: rgba(0,0,0,0.8)}
.modal--calendar{height: 100%; opacity: 1; backdrop-filter: blur(5px); background-color: rgba(255,255,255,0.65)}

#popup{line-height: 0px; width: 95%; max-height: 90%; overflow: auto}
DIV.popup-standard{max-width: 900px; background: #fff}
DIV.popup-video{max-width: 1200px; background: #000}
DIV.popup-pdf{max-width: 1200px; background: #fff}

DIV.popup-image{text-align: center; max-width: 1800px}
DIV.popup-image IMG{max-width: 100%; height: auto}

#popup-close{width: 34px; height: 34px; position: absolute; right: 10px; top: 10px; z-index: 1001; cursor: pointer; background: #fff}
#popup-close.popup-close-button--hidden{display: none}

#popup-close DIV{width: 2px; height: 22px; position: absolute; left: 16px; top: 6px; background: var(--second-color)}
#popup-close DIV.close-1{transform: rotate(45deg)}
#popup-close DIV.close-2{transform: rotate(135deg)}	

DIV.popup-text{display: none}
#popup DIV.popup-text{width: 100%; height: 100%; overflow: auto; display: block}
#popup P.popup-header{font-size: 28px; line-height: 34px; font-weight: 300; text-align: center; padding: 50px 30px 25px 30px}
#popup P.popup-text{font-size: 16px; line-height: 24px; padding: 0px 50px 40px 50px}
#popup IMG.popup-product-sample, #popup IMG.certificate{width: 100%; height: auto}

#popup #popup-iframe-outer{width: calc(100% - 6px); height: calc(100% - 6px); padding: 3px; background: #fff url(../images/throbber-big.gif) no-repeat center center}
#popup IFRAME{width: 99%; height: 99%; display: block; transition: all 0.3s ease-in-out; background: #000}
#popup IFRAME.inactive{opacity: 0}
#popup IFRAME.active{opacity: 1}	
		
#popup DIV.popup-info{max-width: 400px; margin: 0px auto}
#popup DIV.popup-info P.popup-header{text-align: left; padding: 50px 30px 25px 30px}
#popup DIV.popup-info P.popup-text-bulleted{font-size: 16px; line-height: 28px; text-align: left; padding: 0px 30px 40px 30px}

@media screen and (max-width: 900px){#popup{width: 90%}}
@media screen and (max-width: 750px){#modal{max-width: 500px}}





/* FOOTER MAIN */
FOOTER{width: 100%; padding: 70px 0px 60px 0px; border-top: solid 1px var(--border-color); background: #fff}
.footer__container{display: flex; justify-content: space-between}

.footer-col-a{width: 27%}
.footer-col-b{width: calc(53% - 40px); padding: 0px 20px; display: flex; justify-content: space-between}
.footer-col-c{width: 55%}
.footer-col-d{width: 45%}
.footer-col-e{width: 20%}

.footer-header{font-size: 14px; line-height: 20px; font-weight: bold; font-synthesis: style; padding: 0px 0px 5px 0px}
.footer-header-spacing{padding-top: 40px}
.footer-link{margin: 0px; padding: 6px 0px 0px 0px}

FOOTER A{font-size: 14px; line-height: 20px; text-decoration: none; border-bottom: solid 1px #fff; transition: all .3s ease-in-out}
FOOTER A:hover{border-bottom: solid 1px #000}

.footer-placeholder{width: 32px; height: 32px; padding-top: 20px; position: relative}
.footer-placeholder A, .footer-placeholder A:hover{color: #fff; font-size: 22px; line-height: 22px; font-weight: bold; font-synthesis: style; text-align: center; text-decoration: none; width: 24px; height: 24px; padding: 4px; overflow: hidden; border: none; display: block; position: absolute; left: 0px; top: 20px; transition: .3s ease-in-out}
.footer-placeholder A.f{background: #4f73a7}
.footer-placeholder A.t{left: 42px; background: #00aced}
.footer-placeholder A.l{left: 84px; background: #5babcb}

.footer-placeholder A.rss{left: 126px; background: #ff9000}
.footer-placeholder A.rss DIV.clip{width: 24px; height: 24px; position: relative; overflow: hidden}
.footer-placeholder A.rss DIV.circle{width: 7px; height: 7px; border-radius: 50%; position: absolute; left: 0px; bottom: 0px; background: #fff}
.footer-placeholder A.rss DIV.curve{width: 40px; height: 40px; border: solid 4px #fff; border-radius: 50%; position: absolute}
.footer-placeholder A.rss DIV.curve-big{left: -24px; bottom: -24px}
.footer-placeholder A.rss DIV.curve-small{width: 36px; height: 36px; border-radius: 40%; left: -27px; bottom: -27px}
.footer-placeholder A:hover{background: #607088}

/* FOOTER MISCELLANEOUS */
#misc-links{text-align: center; padding: 45px 0px 30px 0px; position: relative; border-top: solid 1px var(--border-color); background: #fff}
#misc-links P.seals{text-align: center; height: 40px; padding: 0px}
#misc-links P.misc, #misc-links A.misc, #misc-links SPAN.misc{font-size: 14px; line-height: 20px; text-decoration: none}
#misc-links P.misc{padding: 30px 0px 10px 0px}
#misc-links A.misc:hover{text-decoration: underline}
#misc-links SPAN.misc{padding: 0px 5px 0px 5px}

/* FOOTER: REGION / CURRENCY */
.region-currency{position: relative; display: inline-block}
P.region-currency{font-size: 14px; line-height: 1; padding: 10px 20px 10px 45px; cursor: pointer; position: relative; display: inline-block}
P.region-currency::after{content: " "; border-width: 7px; border-style: solid; border-color: #000 transparent transparent transparent; position: absolute; right: 0px; top: 13px}
P.region-currency:hover{text-decoration: underline}

P.region-currency--USD{background: url(../images/icons/flag-usa.png) no-repeat left center}
P.region-currency--CAD{background: url(../images/icons/flag-canada.png) no-repeat left center}
P.region-currency--GBP{background: url(../images/icons/flag-uk.png) no-repeat left center}
P.region-currency--ZAR{background: url(../images/icons/flag-africa.png) no-repeat left center}
P.region-currency--EUR{background: url(../images/icons/flag-eu.png) no-repeat left center}
P.region-currency--AUD{background: url(../images/icons/flag-asia-pacific.png) no-repeat left center}

/* FOOTER: REGION / CURRENCY POPUP */
.region-currency-popup{width: 450px; max-height: 0px; padding-left: 20px; padding-right: 20px; box-sizing: border-box; border: solid 1px #fff; border-top: none; border-bottom: none; overflow: hidden; position: absolute; right: 0px; bottom: 55px; z-index: 99; transition: 0.25s; background: #fff}
.region-currency-popup--active{max-height: 400px; padding-top: 20px; padding-bottom: 25px; border: solid 1px var(--border-dark-color); overflow: visible}

.region-currency-popup__close{width: 26px; height: 26px; cursor: pointer; position: absolute; right: 20px; top: 18px; transition: 0.25s; background: #0066cc}
.region-currency-popup__close:hover{background: var(--primary-color)}
.region-currency-popup__close::before, .region-currency-popup__close::after{content: ""; width: 2px; height: 14px; position: absolute; left: 12px; top: 6px; background: #fff}
.region-currency-popup__close::before{transform: rotate(45deg)}
.region-currency-popup__close::after{transform: rotate(135deg)}	

P.region-currency-popup__header{font-size: 16px; line-height: 1.3; font-weight: 600; font-synthesis: style; padding: 0px 40px 0px 0px}
.region-currency-popup__select{font-size: 16px; line-height: 1; width: 190px; margin: 20px 0px; padding: 8px 80px 8px 10px; border: solid 1px var(--border-dark-color); box-sizing: border-box; cursor: pointer; -webkit-appearance: none; appearance: none; background: #fff url(../images/backgrounds/select.png) no-repeat right center}
.region-currency-popup__select-currency{margin-right: 20px}
.region-currency-popup__button-submit{color: #fff; font-size: 16px; line-height: 1; text-align: center; width: 190px; margin: 0px; padding: 10px 0px; border: none; display: block; cursor: pointer; transition: 0.25s; background: var(--second-color)}	
.region-currency-popup__button-submit:hover{background: var(--primary-color)}

@media screen and (max-width: 900px)
{
	.footer-col-a{width: 37%}
	.footer-col-b{width: calc(38% - 40px); display: block}
	.footer-col-c{width: 100%}
	.footer-col-d{width: 100%; padding-top: 40px}
	.footer-col-e{width: 25%}
	#footer-responsive{display: none}
}

@media screen and (max-width: 750px)
{
	FOOTER{padding: 0px; border-top: solid 1px var(--second-color)}
	.footer__container{display: block}
	.footer-col-a{width: 100%}
	.footer-col-b{width: 100%; padding: 0px}
	.footer-col-d{padding: 0px}
	.footer-col-e{width: 100%}
	
	.footer-header{padding: 15px 0px; border-bottom: solid 1px var(--second-color); cursor: pointer; position: relative}
	.footer-header--active{padding-bottom: 5px; border-bottom: none}
	.footer-header::before, .footer-header::after{content: ""; width: 2px; height: 8px; border: none; position: absolute; right: 5px; top: 20px; transform: rotate(45deg); background: #000}
	.footer-header::before{right: 10px; transform: rotate(-45deg)}
	
	.footer-header__region-currency{padding-bottom: 0px; border: none; cursor: text}
	.footer-header__region-currency::before, .footer-header__region-currency::after{display: none}

	.footer-link{display: none}
	.footer-link--active{display: block}
	.footer-link--active-margin-bottom{margin-bottom: 20px}
	
	#misc-links{text-align: left; padding-top: 15px; border: none}
	#misc-links P.seals{height: auto; padding-top: 20px; border-top: solid 1px var(--second-color)}
	#misc-links P.seals IMG{width: 100%; max-width: 566px; height: auto}
	#misc-links P.misc{padding: 15px 0px}
	#misc-links A.misc{font-size: 14px; line-height: 24px}
	#misc-links A.misc:last-child{display: block}
	#misc-links SPAN.misc__responsive{display: none}
	
	.region-currency-popup{width: 280px; left: 0px; right: none; bottom: 48px}
	.region-currency-popup--active{max-height: 500px}
	.region-currency-popup__select{width: 100%; margin: 30px 0px 0px 0px}
	.region-currency-popup__select-currency{margin-right: 0px}
	.region-currency-popup__select-region{margin-bottom: 30px}
}	

@media screen and (max-width: 500px)
{
	.region-currency-popup{width: 100%} 
}





/* CHAT */
#chat-button{width: 42px; height: 30px; padding: 16px 10px; border-radius: 50%; border: solid 4px #fff; position: fixed; right: 20px; bottom: 20px; z-index: 90; cursor: pointer; transition: all .3s ease-in-out}
DIV.chat--inactive{background: #888}
DIV.chat--active{background: var(--primary-color)}

DIV.chat--inactive DIV.rectangle{width: 38px; height: 26px; border: solid 2px #e0e0e0; border-radius: 12px; position: relative; transition: all .3s ease-in-out}
DIV.chat--inactive DIV.square{width: 15px; height: 15px; position: absolute; left: 0px; bottom: 0px; transition: all .3s ease-in-out; background: #888}
DIV.chat--inactive DIV.circle{width: 4px; height: 4px; border: solid 1px #fff; border-radius: 50%;  position: absolute; left: 6px; top: 10px}
DIV.chat--inactive DIV.circle-2{left: 16px}
DIV.chat--inactive DIV.circle-3{left: 26px}

DIV.chat--inactive DIV.vertical{width: 2px; height: 18px; position: absolute; left: 10px; bottom: 16px; transition: all .3s ease-in-out; background: #e0e0e0}
DIV.chat--inactive DIV.horizontal{width: 18px; height: 2px; position: absolute; left: 10px; bottom: 16px; transition: all .3s ease-in-out; background: #e0e0e0}

DIV.chat--active DIV.rectangle{opacity: 0}
DIV.chat--active DIV.vertical{height: 30px; left: 30px; bottom: 16px; transform: rotate(135deg); background: #fff}
DIV.chat--active DIV.horizontal{width: 30px; left: 16px; bottom: 30px; transform: rotate(135deg); background: #fff}		

#chat-widget{width: 350px; border-radius: 10px; position: fixed; bottom: 110px; transition: all .5s ease-in-out; z-index: 90; background: var(--second-color) url(../images/logo-widget.png) no-repeat center 20px}
DIV.chat-widget--inactive{right: -350px; opacity: 0}
DIV.chat-widget--active{right: 20px; opacity: 1}

#chat-widget-inner{display: none; padding: 70px 30px 40px 30px; position: relative}		
P.widget-header{color: #fff; font-size: 16px; line-height: 24px; font-weight: 300; text-align: center; margin: 0px 0px 25px 0px; padding: 0px 0px 15px 0px; border-bottom: solid 1px #686868}		
#chat-widget INPUT, #chat-widget TEXTAREA{font-size: 16px; line-height: 1; width: calc(100% - 20px); padding: 7px 10px; border: none; background: #fff}
#chat-widget TEXTAREA{line-height: 22px; height: 80px}

P.widget-error{color: #fff; font-size: 12px; line-height: 12px; font-weight: bold; font-synthesis: style; padding: 5px 0px 5px 0px; visibility: hidden; transition: all .3s ease-in-out}
P.widget-error--active{padding: 10px 0px 15px 0px; visibility: visible}

DIV.button-widget{width: 200px; height: 37px; cursor: pointer; display: flex; justify-content: center; align-items: center; background: #fff}
DIV.button-widget P{font-size: 14px; line-height: 14px; text-align: center; width: 200px}	
DIV.button-widget--active{background: #fff url(../images/throbber.gif) no-repeat center center}
DIV.button-widget--active P{display: none}
#widget-success{color: #fff; font-size: 20px; line-height: 28px; text-align: center; font-weight: 300; padding: 0px 30px; position: absolute; left: 0px; top: 45%; display: none}

#prompt-inner{text-align: center; padding: 80px 30px 40px 30px}
P.prompt{color: #e8e8e8; font-size: 14px; text-align: center; margin-top: -15px; padding-bottom: 30px}	
P.button-prompt{color: var(--fourth-color); font-size: 14px; line-height: 14px; width: 100px; margin: 0px 10px; padding: 8px 0px; border: solid 1px #c0c0c0; border-radius: 5px; cursor: pointer; display: inline-block; vertical-align: middle; transition: all .3s ease-in-out; background: transparent}
P.button-prompt:hover{background: #606060}	

@media screen and (max-width: 750px)
{
	#chat-button, #chat-widget{display: none}
}





/* MEDIA: VIDEO */
.media-video{width: 100%; margin: 20px 0px 40px 0px; padding-top: 56.8%; position: relative}

.media-video + H2, .media-video + H3{padding-top: 5px}
P.intro + .media-video{margin-top: 15px}
	
VIDEO{width: 100%; height: auto}
.media-video VIDEO{position: absolute; left: 0px; top: 0px}

#video-cover{position: absolute; left: 0px; top: 0px}
#video-cover P.duration{color: #fff; font-size: 20px; line-height: 20px; font-weight: 300; text-align: right; padding: 0px; z-index: 10; position: absolute; right: 15px; bottom: 15px}
#video-cover IMG.gradient{width: 100%; height: 80px; opacity: 0.7; position: absolute; left: 0%; bottom: 0%}
#video-cover IMG.video-cover{width: 100%; height: auto}

#play-button-circle{width: 80px; height: 80px; border-radius: 50%; border: solid 2px #fff; position: absolute; left: 50%; top: 50%; z-index: 5; cursor: pointer; transform: translate(-50%, -50%); transition: all .2s ease; background: var(--primary-color)}
#play-button-circle:hover{width: 85px; height: 85px}
#play-button-arrow{width: 0px; height: 0px; margin-left: -10px; border-top: 20px solid transparent; border-left: 30px solid #fff; border-bottom: 20px solid transparent; position: absolute; left: 50%; top: 50%; transform: translateY(-50%)}	

@media screen and (max-width: 750px)
{
	P.intro + .media-video{margin-top: 10px}
	P.main + .media-video{margin-top: 15px}
}

@media screen and (max-width: 500px)
{
	#play-button-circle{width: 60px; height: 60px}
	#play-button-circle:hover{width: 65px; height: 65px}
	#play-button-arrow{margin-left: -8px; border-top: 15px solid transparent; border-left: 20px solid #fff; border-bottom: 15px solid transparent}
}





/* PAGE LOADER */
.loader{width: 160px; height: 160px; margin: -80px 0px 0px -80px; border-radius: 50%; animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; position: absolute; top: 50%; left: 50%; background: conic-gradient(var(--primary-color) 0deg 90deg, var(--second-color) 90deg 180deg, var(--primary-color) 180deg 270deg, var(--second-color) 270deg 360deg)}
.loader__inner{width: 120px; height: 120px; border-radius: 50%; position: absolute; left: 20px; top: 20px; background: #000}
@keyframes rotate{from{transform: rotate(-360deg)} to{transform: rotate(360deg)}}





/* REVIEWS / ENROLLMENT / CONFIGURATION POPUP */
.reviews-enrollment-popup{width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 99; display: none; overflow: hidden}
.reviews-enrollment-popup::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; opacity: 0; background: url(../images/backgrounds/enrollment-form.webp) no-repeat center bottom; background-size: cover}
.reviews-enrollment-popup *{box-sizing: border-box}
.reviews-enrollment-popup--pending{display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.9)}
.reviews-enrollment-popup--active{display: block; background: #fff}
.reviews-enrollment-popup--active::before{opacity: 0.5}
.reviews-enrollment-popup--active .loader{display: none}
BODY:has(.reviews-enrollment-popup--active){overflow: hidden}

.reviews-enrollment{width: 90%; max-width: 750px; margin: 0px auto; border-top: solid 66px #212e40; display: none; position: relative; background: #fff}
.reviews-enrollment-popup--active .reviews-enrollment{display: block}
.reviews-enrollment__logo{width: 275px; height: auto; position: absolute; left: 38px; top: -50px; z-index: 99}	
.reviews-enrollment__button-close{width: 36px; height: 36px; position: absolute; right: 15px; top: -51px; cursor: pointer; overflow: hidden; z-index: 99; background: #fff}
.reviews-enrollment__button-close::before, .reviews-enrollment__button-close::after{content: " "; width: 24px; height: 2px; transform: rotate(45deg); position: absolute; left: 6px; top: 17px; background: #212e40}
.reviews-enrollment__button-close::after{transform: rotate(-45deg)}
.reviews-enrollment__inner{padding: 0px 40px; overflow-y: auto}
.reviews-enrollment__inner > *{height: calc(100vh - 66px); height: calc(100svh - 66px); padding: 35px 0px 0px 0px}

@media screen and (max-width: 750px)
{
	.reviews-enrollment-popup::before{background: #fff}
	.reviews-enrollment-popup--active{padding-top: 66px; background: #fff}
	.reviews-enrollment-popup--active::after{content: ""; width: 100%; height: 66px; position: absolute; left: 0px; top: 0px; background: #212e40}	

	.reviews-enrollment{width: 100%; border: none}
	.reviews-enrollment__logo{left: 5%}	
	.reviews-enrollment__button-close{right: 5%}
	.reviews-enrollment__inner{padding-left: 5%; padding-right: 5%}
}

@media screen and (max-width: 500px)
{
	.reviews-enrollment__logo{width: 200px; top: -45px}
}





/* PRODUCT REVIEWS */
.product-reviews{display: none}
.product-reviews--active{display: block}
.product-review{margin-bottom: 25px; padding: 10px 0px 35px 45px; border-bottom: solid 1px var(--border-color); background: url(../images/icons/user.png) no-repeat 0px 10px}
.product-review:last-child{border: none}
.product-review__stars-name-date{font-size: 14px; line-height: 20px}	
.product-review__verified-purchase{color: #386498; font-size: 12px; line-height: 1; font-weight: bold; font-synthesis: style; padding: 10px 0px 15px 0px}	
.product-review__review{font-size: 14px; line-height: 22px; padding: 0px}





/* MEDIA: BULLET LISTS */
.media-bullet-list{padding: 0px 0px 30px 0px}
.media-bullet-list--padding-bottom-zero{padding-bottom: 0px}
.media-bullet-list--padding-top-zero{padding-top: 0px}	

.media-bullet-list P{margin-top: 10px}
.media-bullet-list P:first-child{margin-top: 0px}

P.bullet, P.bullet *, P.bullet-indent, P.bullet-indent *, P.indent, P.indent *, P.bullet-paragraph, P.bullet-paragraph *{font-size: 14px; line-height: 22px; position: relative}
P.bullet{padding-left: 20px}
P.bullet-indent, P.indent{padding-left: 40px}
/*P.indent{padding-bottom: 25px}*/
P.bullet-paragraph{margin-left: 20px}
P.bullet::before, P.bullet-indent::before{content: ''; line-height: 0px; width: 6px; height: 6px; position: absolute; left: 0px; top: 8px; background: var(--primary-color)}
P.bullet SPAN.italic{font-style: italic}

.media-bullet-list + H2{padding-top: 10px}
.media-bullet-list + H3{padding-top: 5px}

.media-bullet-list--tick P{margin-top: 5px; padding: 10px 0px 0px 45px; position: relative}
.media-bullet-list--tick P::after{content: ""; width: 20px; height: 20px; position: absolute; left: 0px; top: 14px; opacity: 0.9; background-image: url(../images/icons/registrar-tick.png); background-repeat: no-repeat; background-position: center center; background-size: cover}
.media-bullet-list--tick P STRONG{font-weight: 600; font-synthesis: style}





/* MEDIA: TOC */
.media-toc{max-width: 450px; margin: 5px 0px 40px 0px; border-bottom: solid 1px #c8c8c8; counter-reset: list-number}
.media-toc >*{color: #202020; font-size: 16px; line-height: 1; font-weight: 600; padding: 12px 0px; border-top: solid 1px #c8c8c8; position: relative; overflow: hidden}
.media-toc >*::before{color: var(--primary-color); font-size: 16px; line-height: 1; font-weight: 700; font-synthesis: style; height: 20px; margin: 0px 20px 0px 5px; display: inline-flex; align-items: center; counter-increment: list-number; content: counter(list-number)}
.media-toc .scroll{cursor: pointer}
.media-toc .scroll::after{content: ""; width: 450px; height: 50px; position: absolute; left: 0px; top: 0px; z-index: -1; transform: translateX(-100%); transition: transform .25s cubic-bezier(0, .99, 0, 0.99); background: var(--third-color)}
.media-toc .scroll:hover::after{transform: translateX(0%); transition: transform 1s cubic-bezier(0, .99, 0, 0.99)}

.media-toc + H2{padding-top: 10px}
.media-toc + H3{padding-top: 5px}





/* MEDIA: INFOGRAPHICS */
.infographic{line-height: 0px; margin: 15px 0px 40px 0px}
.infographic IMG{width: 100%; height: auto}
.infographic IMG.responsive{display: none}

.infographic + H2, .infographic + H3{padding-top: 5px}

@media screen and (max-width: 750px)
{
	.infographic{margin: 10px 0px 35px 0px}
}





/* MEDIA: STOCK PHOTOS */
.media-stock-img{width: 100%; height: auto; margin: 15px 0px 40px 0px; display: block}
.media-stock-img *{width: 100%; height: auto}
.media-stock-img--border{width: calc(100% - 2px); border: solid 1px #e0e0e0}
.media-stock-img--caption{margin-bottom: 0px}
P.media-stock-img--caption{font-size: 14px; line-height: 22px; font-style: italic; padding: 10px 0px 35px 0px}

.media-stock-img + H2{padding-top: 5px}
.media-stock-img + H3{padding-top: 0px}
P.intro + .media-stock-img{margin-top: 10px}

@media screen and (max-width: 750px)
{
	.media-stock-img{margin: 10px 0px 35px 0px}	
	.media-stock-img--caption{margin-bottom: 0px}
	.media-stock-img + H3{padding-top: 0px}
	P.intro + .media-stock-img{margin-top: 5px}
}





/* MEDIA: FLOWCHARTS */
.media-flowchart{margin: 25px 0px 35px 0px; overflow: hidden}
.media-flowchart IMG{max-width: calc(100% - 2px); height: auto; border: solid 1px var(--border-color)}





/* MEDIA: FULL WIDTH QUOTES */
.media-quote-full-width{margin: 25px 0px 45px 0px; border: solid 1px #e8e8e8; border-left: none; border-right: none; display: flex; background: var(--fifth-color)}
.quote-left{width: 45%; padding-left: 5%} 
.quote-left-inner{width: calc(100% - 50px); max-width: 550px; padding: 115px 50px 70px 0px; float: right; background: var(--fifth-color) url(../images/icons/quote.png) no-repeat 0px 50px}	
.quote-left-inner P{color: #484848; font-size: 40px; line-height: 52px; letter-spacing: -2px; font-weight: 300}
.quote-right{width: 50%}

.media-quote-full-width + DIV H2:first-child, .media-quote-full-width + ARTICLE H2:first-child,
.media-quote-full-width + DIV H3:first-child, .media-quote-full-width + ARTICLE H3:first-child{padding-top: 5px}

@media screen and (min-width: 1200px)
{		
	.quote-left-inner{padding: 170px 50px 120px 0px; background: var(--fifth-color) url(../images/icons/quote.png) no-repeat 0px 100px}
}

@media screen and (max-width: 1060px)
{
	.media-quote-full-width{display: block}
	.quote-left{width: 90%; padding-left: 5%; padding-right: 5%}
	.quote-left-inner{width: 100%; max-width: 100%; padding: 115px 0px 50px 0px; float: none}	
	.quote-right{width: 100%; height: 450px}				
}

@media screen and (max-width: 750px)
{
	.media-quote-full-width{margin: 25px 0px 40px 0px}
	.quote-left-inner{padding: 110px 0px 45px 0px; background: var(--fifth-color) url(../images/icons/quote.png) no-repeat 0px 45px}
	.quote-left-inner P{color: #303030; font-size: 28px; line-height: 36px; letter-spacing: -1px}
	.quote-right{height: 400px}
}





/* MEDIA: QUOTES */
.media-quote{max-width: calc(1000px - 60px); margin: 20px 0px 45px 0px; padding: 30px 30px 50px 30px; background: var(--fifth-color) url(../images/icons/quote.png) no-repeat 30px 40px}
.media-quote__text, .media-quote__text *{color: #484848; font-size: 40px; line-height: 54px; letter-spacing: -2px; font-weight: 300; padding-top: 70px}	
.media-quote__attribution{color: #383838; font-size: 20px; line-height: 26px; font-weight: bold; font-synthesis: style; letter-spacing: -1px; padding: 50px 0px 0px 0px}
.media-quote__case-study{color: #383838; font-size: 16px; line-height: 22px; padding-top: 20px}

.media-quote +H3, .media-quote +H2{padding-top: 0px}

@media screen and (max-width: 750px)
{
	.media-quote{margin: 15px 0px 35px 0px; padding: 25px 25px 40px 25px; background: var(--fifth-color) url(../images/icons/quote.png) no-repeat 25px 40px}
	.media-quote__text, .media-quote__text *{color: #000; font-size: 24px; line-height: 32px; letter-spacing: -1px}	
	.media-quote__attribution{padding-top: 40px}
}





/* MEDIA: RELATED TOPICS */
.media-related{margin: 15px 0px 40px 0px; padding: 30px 35px 30px 35px; border: solid 1px #d8e0e0; background: var(--third-color)}
.media-related H2:first-child, .media-related H3:first-child, .media-related H4{margin-top: 0px; padding-top: 0px; padding-bottom: 25px}	
.media-related H4{padding-bottom: 20px}
.media-related DIV:last-child, .media-related P:last-child{margin-bottom: 0px; padding-bottom: 0px}

.media-related + H2{padding-top: 10px}
.media-related + H3{padding-top: 5px}

@media screen and (max-width: 750px)
{
	.media-related{margin-bottom: 35px; padding: 25px 20px 25px 20px}	
}





/* SELECT -- TRAINING RECOMMENDATIONS / INFORMATION / ALL PRODUCTS */
SELECT.large, SELECT.large OPTION{font-size: 16px; line-height: 20px}	
SELECT.large{padding: 15px 80px 15px 10px; border: solid 1px var(--border-color); cursor: pointer; -webkit-appearance: none; appearance: none; background: #fff url(../images/backgrounds/select.png) no-repeat right center}
SELECT.large OPTION{padding: 5px 70px 5px 10px}

@media screen and (max-width: 750px)
{
	SELECT.large{max-width: 100%}		
}





/* PRODUCT LISTINGS */
.product-listing-page{max-width: 1100px}
.product-listing-page H2{padding: 30px 0px 20px 0px} 
.product-listing-page P.intro{padding: 0px; max-width: 1000px}

.product-listing-wrapper{padding: 50px 0px 20px 0px; border-bottom: solid 1px var(--border-color)}
.product-listing-wrapper--first-of-more-than-one{margin-bottom: 20px}
.product-listing-wrapper__container{max-width: 1100px; display: flex; justify-content: space-between; flex-wrap: wrap}
.product-listing{text-decoration: none; width: calc(50% - 30px); margin: 0px 0px 50px 0px; padding-bottom: 45px; border-bottom: solid 1px #a0a0a0; display: flex; flex-direction: column; transition: .5s ease-in-out; background: #fff}

.product-listing__last-multiple-of-2n,
.product-listing__penultimate-multiple-of-2n,
.product-listing__last-multiple-of-2n-plus-1{margin-bottom: 0px; border: none}

.product-listing__image{width: 100%; height: auto; border-bottom: solid 1px #e0e0e0}
.product-listing__title, .product-listing__title *{font-size: 20px; line-height: 1.35; font-weight: 700; font-synthesis: style; letter-spacing: -0.5px}
.product-listing__title *{font-style: italic}
.product-listing__title{padding: 30px 0px 20px 0px}
.product-listing__description{font-size: 16px; line-height: 22px; height: 66px; position: relative; overflow: hidden}
.product-listing__description::after{content: ""; width: 150px; height: 22px; position: absolute; right: 0px; bottom: 0px; background-image: url(../images/backgrounds/transparent.png); background-repeat: no-repeat; background-size: cover}

.product-listing__price-rating{margin-top: auto; padding: 30px 0px 0px 0px; display: flex; justify-content: space-between; align-items: flex-start}
.product-listing__price{font-size: 16px; line-height: 1; margin: 0px; padding: 0px}

.product-listing__ratings{display: flex; justify-content: flex-end; align-items: center}
.product-listing__ratings *{color: #0645ad; font-size: 14px; line-height: 1}
.product-listing__star-rating{width: 70px; height: auto; margin: 0px 10px 0px 10px}

.product-listing-summary__container, .product-lisiting-faq__container{max-width: 1100px}
.product-listing-summary__container H2, .product-lisiting-faq__container H2{max-width: 800px}
.product-listing-summary__container H2:first-child, .product-lisiting-faq__container H2:first-child{padding-top: 0px}
.product-listing-summary__container P, .product-lisiting-faq__container P{max-width: 800px}

.product-listing-summary-section{padding: 55px 0px 30px 0px}
#product-lisiting-faq-section{padding: 55px 0px 65px 0px; background: var(--fourth-color)}
#product-lisiting-faq-section__wrapper{display: flex; justify-content: space-between; flex-wrap: wrap}
#product-lisiting-faq-section__wrapper UL{width: calc(50% - 10px)}
#product-lisiting-faq-section__wrapper LI{margin: 0px 0px 10px 0px; border: none}
.product-listing__image-section{width: 100%; height: 400px; border-top: solid 1px var(--border-color); background-repeat: no-repeat; background-position: center center; background-size: cover}

@media screen and (max-width: 1200px)
{
	.product-listing{width: calc(50% - 15px)}		
}

@media only screen and (max-width: 900px)
{
	#product-lisiting-faq-section__wrapper{display: block}
	#product-lisiting-faq-section__wrapper UL{width: 100%}
}

@media screen and (max-width: 750px)
{
	.product-listing{width: 100%; margin: 0px 0px 45px 0px; border-bottom: solid 1px #a0a0a0}
	.product-listing:last-child{margin-bottom: 0px; border: none}
	.product-listing__image-section{height: 280px}
}





/* PRODUCT INTRO SECTION [intro text / product image] */
#product-intro{min-height: 350px; margin-top: -55px; padding: 55px 0px 70px 400px; box-sizing: border-box; background: url(../images/backgrounds/products.png) no-repeat 85px 0px}
#product-intro *:last-child{margin-bottom: 0px}
#product-intro P.main:last-child{padding-bottom: 0px}

.product-image{width: 310px; border: solid 1px var(--border-color); position: absolute; left: 0px; top: 60px}
.product-image, .product-image *{line-height: 1; height: auto; display: block}
.product-image *{width: 100%}

H1 + .product-intro__tagline{margin-top: -20px}
H2.product-intro__tagline{font-size: 16px; line-height: 24px; font-weight: bold; font-synthesis: style; letter-spacing: 0px; padding: 0px 0px 30px 0px}
.product-intro__price, .product-intro__price SPAN{font-size: 28px; line-height: 1; font-weight: 300; font-synthesis: style; letter-spacing: -1px}
.product-intro__price SPAN{font-size: 20px; letter-spacing: 0px; padding-right: 10px}
.product-intro__price{padding-top: 15px}

@media screen and (max-width: 1000px)
{	
	#product-intro{padding-left: 280px; background-position: -25px 0px}
	.product-image{width: 210px}
}

@media screen and (max-width: 800px)
{	
	#product-intro{margin-top: 0px; padding: 0px 0px 60px 0px; background: transparent}
	.product-image{width: 100%; margin: 10px 0px 30px 0px; border: none; position: static; top: 0px}
}




	
/* PRODUCT INTRO SECTION [ratings]  */
.product-ratings-section{margin: 50px 0px; padding: 40px 0px; border: solid 1px var(--border-color); border-left: none; border-right: none}

.ratings-reviews__header-and-button{padding: 0px 0px 35px 0px; display: flex; justify-content: space-between; align-items: center}
.ratings-reviews__header{font-size: 20px; line-height: 1; font-weight: bold; font-synthesis: style; letter-spacing: -0.5px}
.ratings-reviews__button{color: #0066cc; font-size: 16px; line-height: 1; font-weight: bold; font-synthesis: style; cursor: pointer}
	
.ratings_reviews__content-wrapper{display: flex; justify-content: space-between; align-items: flex-end}
.ratings-reviews__average-and-number{width: 115px}
.ratings-reviews__average-rating{color: #282828; font-size: 70px; line-height: 1; font-weight: 300; letter-spacing: -5px; padding: 0px 0px 5px 0px}
.ratings-reviews__number-ratings{color: #888; font-size: 14px; line-height: 1; font-weight: bold; font-synthesis: style; padding-bottom: 1px}

.ratings-reviews__ratings-table-wrapper{width: calc(100% - 115px)}
.ratings-reviews__ratings-table{display: flex; justify-content: space-between; align-items: flex-end}
.ratings-reviews__ratings-table >*{margin-top: 8px}
.ratings-reviews__rating-bar{line-height: 1; width: calc(100% - 140px); height: 8px; background: #e0e0e0}
.ratings-reviews__rating-bar-inner{width: var(--rating-bar-inner-width); height: 100%; background: var(--primary-color)}
.ratings-reviews__rating-stars{line-height: 1; width: 80px; height: auto; margin: 0px 15px 0px 15px}
.ratings-reviews__rating-count{font-size: 14px; line-height: 1; width: 35px}	

@media screen and (max-width: 750px)
{
	.product-ratings-section{margin: 45px 0px 50px 0px; padding: 45px 0px}
	.ratings-reviews__header{font-size: 18px}
	.ratings-reviews__average-and-number{width: 100px}
	.ratings-reviews__average-rating{font-size: 60px; letter-spacing: -4px}
	.ratings-reviews__ratings-table-wrapper{width: calc(100% - 100px)}
	.ratings-reviews__rating-bar{width: calc(100% - 80px)}
	.ratings-reviews__rating-stars{width: 70px; margin: 0px 0px 0px 10px}
	.ratings-reviews__rating-count{display: none}	
}





/* PRODUCT INTRO SECTION [buy / configure / add-to-cart] */
.buy-configure{display: flex; align-items: center}

.buy-configure__button{color: #fff; font-size: 18px; line-height: 0.5; text-decoration: none; text-align: center; width: 160px; height: 40px; cursor: pointer; transition: all .3s ease; background: var(--second-color)}
.buy-configure__button:hover{background: var(--primary-color)}

.buy-configure__button-configure{width: 220px; height: auto; padding: 15px 0px}
.buy-configure__button-submit{width: 200px; height: auto; padding: 15px 0px; border: none}

.button-add-to-cart{width: 180px; height: 42px; margin: 40px 0px 0px 0px; cursor: pointer; display: flex; justify-content: center; align-items: center; user-select: none; outline: none; transition: 0.25s; background: var(--second-color)}
.button-add-to-cart:hover{background: var(--primary-color)}
.button-add-to-cart__text{color: #fff; font-size: 18px; line-height: 1.25}
.button-add-to-cart__loader{font-size: 10px;  text-align: left; width: 40px; height: 30px; display: none}
.button-add-to-cart--active P{display: none}
.button-add-to-cart--active .button-add-to-cart__loader{display: block}

.button-add-to-cart__loader *{width: 4px; height: 100%; margin: 0px 2px; display: inline-block; animation: stretchdelay 1.2s infinite ease-in-out; background: #fff}
.button-add-to-cart__loader .rect2{animation-delay: -1.1s}
.button-add-to-cart__loader .rect3{animation-delay: -1.0s}
.button-add-to-cart__loader .rect4{animation-delay: -0.9s}
.button-add-to-cart__loader .rect5{animation-delay: -0.8s}

@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4)} 20%{transform: scaleY(1.0)}}

@media screen and (max-width: 750px)
{
	.buy-configure__button-submit{width: 140px}
}





/* PRODUCT DESCRIPTION SECTION [classes for headers and individual sections with background colors and borders]  */
#product-description-section{padding-top: 30px}
#product-description-section H2{padding-bottom: 25px}
#product-description-section H3{font-size: 18px; line-height: 26px; font-weight: bold; font-synthesis: style; padding-bottom: 10px}

.product-section--grey-dark{background: var(--fourth-color)} 
.product-section--white{background: #fff}
.product-section--grey--white + .product-section--white{border-top: solid 1px var(--border-color)}

.button-included-documents{color: var(--second-color); font-size: 18px; line-height: 1; text-align: center; width: 275px; margin: 40px 0px 0px 0px; padding: 12px 0px; cursor: pointer; transition: all .3s ease; border: solid 1px var(--second-color)}
.button-included-documents:hover{color: #fff; border: solid 1px var(--primary-color); background: var(--primary-color)}

.media-bullet-list:has(+ .button-included-documents), 
P:has(+ .button-included-documents), 
H2:has(+ .button-included-documents), 
H3:has(+ .button-included-documents){margin-bottom: 0px; padding-bottom: 25px}

.button-included-documents + H2, .button-included-documents + H3, .button-included-documents + P{padding-top: 50px}

@media screen and (max-width: 800px)
{
	.media-bullet-list:has(+ .button-included-documents), 
	P:has(+ .button-included-documents), 
	H2:has(+ .button-included-documents), 
	H3:has(+ .button-included-documents){margin-bottom: 0px; padding-bottom: 15px}
}

@media screen and (max-width: 500px)
{
	.media-bullet-list:has(+ .button-included-documents), 
	P:has(+ .button-included-documents), 
	H2:has(+ .button-included-documents), 
	H3:has(+ .button-included-documents){margin-bottom: 0px; padding-bottom: 10px}
}





#product-video-section{padding: 70px 0px}
#product-video-section .container{text-align: right; display: flex; align-items: center}
#video-text{width: 330px; padding-right: 70px}
#video{width: calc(100% - 400px); position: relative}

#video-text H2{font-weight: 500; letter-spacing: -2px; padding: 0px 0px 25px 0px}
#video-text P{font-size: 18px; line-height: 26px; padding-bottom: 0px}





#product-easy-to-use-section{padding: 70px 0px}
.easy-to-use__container{display: flex}
.easy-to-use__left{width: 330px; padding-right: 70px}
.easy-to-use__right{width: calc(100% - 400px); padding-top: 10px}	

.easy-to-use__left *{text-align: right}
.easy-to-use__left H2, .easy-to-use__left H2 *{color: #505050; font-size: 46px; line-height: 1.1; font-weight: 600; font-synthesis: style; letter-spacing: -3px}
.easy-to-use__left H2 *{color: var(--primary-color)}
.easy-to-use__left H2{padding: 0px}
.easy-to-use__left P.intro{font-size: 26px; line-height: 34px; letter-spacing: -1.5px; padding: 25px 0px 0px 0px}			

.easy-to-use__right P{padding-bottom: 35px}
.easy-to-use__right P:last-child{padding: 0px}
.easy-to-use__right P STRONG{font-size: 18px; line-height: 30px; display: block}




#product-samples-section{padding: 70px 0px}
#product-samples-left, #product-samples-right{display: inline-block; vertical-align: top}
#product-samples-left{text-align: right; width: 330px; padding-right: 70px}
#product-samples-right{width: calc(100% - 400px)}

#product-samples-section A{text-decoration: none; margin: 35px 0px 0px 0px; padding: 20px 0px 20px 20px; display: block; cursor: pointer; position: relative}
#product-samples-section A:first-child{margin-top: 0px}

#product-samples-section A::before, #product-samples-section A::after{content: ""; width: 80%; height: 2px; position: absolute; left: 0px; bottom: 0px; transition: all .3s ease; background: #c0c0c0}
#product-samples-section A::after{width: 2px; height: calc(100% - 20px)}	
#product-samples-section A:hover::before, #product-samples-section A:hover::after{background: #000}

#product-samples-section H2{color: #202020; font-weight: 500; padding: 10px 0px 25px 0px}
#product-samples-section H3{font-size: 16px; line-height: 24px; font-weight: bold; font-synthesis: style; letter-spacing: 0px; padding: 0px 0px 5px 0px}

#product-samples-section P.main{padding: 0px}
#product-samples-section P.sample{font-size: 14px; line-height: 22px; padding: 0px}

#samples-show-more{color: var(--second-color); font-size: 18px; line-height: 1; text-align: center; width: 240px; margin: 55px 0px 0px 0px; padding: 12px 0px; cursor: pointer; transition: all .3s ease; border: solid 1px var(--second-color)}
#samples-show-more:hover{color: #fff; border: solid 1px var(--primary-color); background: var(--primary-color)}
.samples-hidden{max-height: 0px; overflow: hidden; transition: .25s}
.samples-hidden--active{max-height: 1000px; padding-top: 30px}





#product-schedule-section{padding: 60px 0px 70px 0px}
.schedule-section__container{padding-left: 400px; box-sizing: border-box}
.schedule-section__container H2{padding: 30px 0px 25px 0px}
.schedule-section__container H2:first-child{padding-top: 0px}
.schedule-section__container H3{padding-top: 15px}
.schedule-section__container H2 + H3{padding-top: 0px}
.schedule-section__container P:last-child{padding: 0px}





#product-quality-section{padding: 0px 0px 70px 0px; border: none}
#product-quality-section DIV.container{max-width: 1600px; display: flex; justify-content: space-between; flex-wrap: wrap}
DIV.product-quality{width: calc(33.33% - 20px)}
DIV.product-quality IMG{width: calc(100% - 2px); height: auto; border: solid 1px #e0e0e0}
DIV.product-quality H3{color: #282828; font-size: 20px; line-height: 28px; font-weight: 600; font-synthesis: style; padding: 25px 0px 15px 0px}
DIV.product-quality P{padding: 0px}





#product-consultants-section{padding: 65px 0px 75px 0px}
#product-consultants-section H2{font-size: 38px; line-height: 1.2; letter-spacing: -2px; text-align: center; padding: 0px}
.product-consultants__container{max-width: 1600px; display: flex; justify-content: flex-start; flex-wrap: wrap}
	
.product-consultant{width: calc(25% - 15px); margin: 60px 15px 0px 0px; transition: all 0.5s}
.product-consultant--hidden{display: none}

.product-consultant .img{width: 100%; height: auto; filter: grayscale(100%); opacity: 1; transition: all 0.5s}
.product-consultant .img--active{filter: grayscale(0%)}
.product-consultant P.name{font-size: 20px; line-height: 1; font-weight: 600; font-synthesis: style; letter-spacing: -0.5px; padding: 25px 0px 15px 0px}
.product-consultant P.bio{color: #202020; font-size: 14px; line-height: 22px; max-height: 66px; padding: 0px; overflow: hidden; position: relative; transition: 1s}
.product-consultant P.bio--active{max-height: 750px}
.product-consultant P.bio::after{content: ""; width: 150px; height: 22px; position: absolute; right: 0px; bottom: 0px; background-image: url(../images/backgrounds/transparent.png); background-repeat: no-repeat; background-size: cover}
.product-consultant P.bio--active::after{display: none}

.product-consultant SPAN{color: #0066cc; font-size: 14px; line-height: 1; font-weight: bold; font-synthesis: style; cursor: pointer; z-index: 10; position: absolute; right: 10px; bottom: 5px}
.product-consultant SPAN:first-letter{text-transform: uppercase}
.product-consultant SPAN.bio-link--hidden{display: none}
.product-consultant--active IMG{filter: grayscale(0%)}

.button-consultants__show-more{color: var(--second-color); font-size: 18px; line-height: 1; text-align: center; width: 300px; margin: 60px auto 0px; padding: 12px 0px; cursor: pointer; transition: all .3s ease; border: solid 1px var(--second-color)}
.button-consultants__show-more:hover{color: #fff; border: solid 1px var(--primary-color); background: var(--primary-color)}
.button-consultants__show-more--inactive{display: none}
	




#product-partners-section{text-align: center; padding: 65px 0px 70px 0px}
#product-partners-section DIV.container{max-width: 900px}
#product-partners-section H2{font-size: 30px; line-height: 1; font-weight: 600; padding: 0px 0px 25px 0px}
#product-partners-section .partners-section__wrapper{margin-top: 15px; display: flex; justify-content: space-between; flex-wrap: wrap}
#product-partners-section IMG{width: calc(33.33% - 5px); height: auto; margin: 5px 0px; padding: 40px; border: solid 1px var(--border-color); box-sizing: border-box; opacity: .8; background: #fff}





#product-summary-section{padding: 50px 0px 50px 0px; background: var(--second-color)}
.product-summary__container{max-width: 1150px; display: flex; justify-content: space-between}
.product-summary__container .summary{width: calc(50% - 30px)}
.product-summary__container P.icon{color: #fff; font-size: 14px; line-height: 24px; padding: 25px 0px 30px 110px; background-position: 0px 35px; background-repeat: no-repeat}
.product-summary__container P.icon *{color: #fff; font-size: 14px; line-height: 24px}
.product-summary__container P.icon-included{background-image: url(../images/icons/products-included.png)}
.product-summary__container P.icon-shipping{background-image: url(../images/icons/products-shipping.png)}
.product-summary__container P.icon-free-shipping{background-image: url(../images/icons/products-free-shipping.png)}
.product-summary__container P.icon-requirements{background-image: url(../images/icons/products-requirements.png)}
.product-summary__container P.icon-certificate{background-image: url(../images/icons/products-certificate.png)}
.product-summary__container P.icon-duration{background-image: url(../images/icons/products-duration.png)}
.product-summary__container P.icon-os{background-image: url(../images/icons/products-operating-system.png)}
.product-summary__container P.icon-pages{background-image: url(../images/icons/products-pages.png)}
.product-summary__container P.icon-print{background-image: url(../images/icons/products-print.png)}
.product-summary__container P.icon-easy{background-image: url(../images/icons/products-easy-to-use.png)}
.product-summary__container P.icon-download{background-image: url(../images/icons/products-instant-download.png)}
.product-summary__container P.icon-design{background-image: url(../images/icons/products-design.png)}
.product-summary__container P.icon-ms-word{background-image: url(../images/icons/products-ms-word.png)}
.product-summary__container P.icon-support{background-image: url(../images/icons/products-customer-support.png)}
.product-summary__container P.icon-free-updates{background-image: url(../images/icons/products-free-updates.png)}
.product-summary__container P.icon-guarantee{background-image: url(../images/icons/products-guarantee.png)}
.product-summary__container P.icon-facilities{background-image: url(../images/icons/products-screen.png)}
.product-summary__container P.icon-access{background-image: url(../images/icons/products-access.png)}
.product-summary__container P.icon-version{background-image: url(../images/icons/products-version.png)}





.product-clients-section{padding: 65px 0px 80px 0px; background: #fff}
.product-clients__container{max-width: 800px}
.clients__header{padding-bottom: 40px}
.clients__header H2, .clients__header H2 *{font-weight: 400; padding: 0px} 
.clients__listings{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap}
.clients__img{width: calc(33.33% - 52px - 5px); height: auto; margin-bottom: 10px; padding: 0px 25px; border: solid 1px #b0b0b0; opacity: 1; transition: opacity 1.25s; background: #fff}		
.clients__img--hidden{height: 0px; margin: 0px; padding: 0px; border: none; overflow: hidden; opacity: 0}
.clients__load-more{color: #0066cc; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -1px; width: 100%; padding-top: 35px; cursor: pointer}
.clients__load-more--hidden{display: none}

.clients__loader{width: 100%; height: 20px; margin-top: 35px; position: relative; overflow: hidden; display: none}
.clients__loader--active{display: block}
.clients__loader--active::after{content: ""; width: 100%; height: 4px; position: absolute; left: 0px; top: 7px; animation: 0.75s loading infinite; background: #0066cc}

@keyframes loading{from{transform: translateX(-100%)}to{transform: translateX(100%)}}	

@media screen and (min-width: 1100px) 
{
	.clients__header H2, .clients__header H2 *{color: #404040; line-height: 1.15}
	.clients__header H2 *{color: #000; font-size: 80px; letter-spacing: -5px; font-weight: 300; -webkit-text-stroke: 0.5px #fff; margin-left: -4px; display: block}	
}





#product-faq-section{padding: 65px 0px; background: var(--fourth-color)}
#product-faq-section DIV.container{max-width: 800px} 
#product-faq-section H2{padding: 0px 0px 45px 0px} 
#product-faq-section H2:nth-of-type(2){padding-top: 55px}
#product-faq-section UL{margin: 0px}
#product-faq-section LI{width: calc(100% - 90px); margin: 0px 0px 4px 0px; border: none; border-radius: 5px}

#article-faq-section{padding: 50px 0px; background: var(--fourth-color); margin-top: 40px}
#article-faq-section DIV.container{max-width: 900px} 
#article-faq-section H2{padding: 0px 0px 45px 0px} 
#article-faq-section H2:nth-of-type(2){padding-top: 55px}
#article-faq-section UL{margin: 0px}
#article-faq-section LI{width: calc(100% - 90px); margin: 0px 0px 4px 0px; border: none; border-radius: 5px}



@media screen and (max-width: 1000px)
{
	#video-text{width: 220px; padding-right: 60px}
	#video{width: calc(100% - 280px)}	
	
	#product-easy-to-use-section{padding: 65px 0px}
	.easy-to-use__left{width: 220px; padding-right: 60px}
	.easy-to-use__right{width: calc(100% - 280px)}	

	#product-samples-left, #product-samples-right{}
	#product-samples-left{text-align: right; width: 220px; padding-right: 60px}
	#product-samples-right{width: calc(100% - 280px)}
	
	#product-schedule-section{padding: 50px 0px 60px 0px}
	.schedule-section__container{padding-left: 280px}
	
	#product-quality-section{padding-bottom: 60px}
	DIV.product-quality{width: calc(33.33% - 10px)}

	#product-consultants-section{padding: 60px 0px 65px 0px}
	.product-consultants__container{justify-content: space-between}
	.product-consultant{width: calc(50% - 10px); margin: 60px 0px 0px 0px}
}

@media screen and (max-width: 800px)
{
	#product-video-section{padding: 50px 0px 0px 0px; background: var(--second-color)}
	#product-video-section .container{text-align: left; width: 100%; display: block}
	#video-text{width: 90%; padding: 0px 5% 50px 5%}
	#video-text H2{color: #f0f0f0; font-size: 30px; font-weight: 500; font-synthesis: style; letter-spacing: -1px}
	#video-text P{color: #fff; font-size: 16px; line-height: 24px}
	#video{width: 90%; padding: 0% 5%}
	#video::after{content:""; width: 100%; height: 50%; position: absolute; left: 0px; top: 50%; z-index: 1}
	#video.small-width-overflow-fourth-color::after{background: var(--fourth-color)}
	#video.small-width-overflow-white::after{background: #fff}
	#video VIDEO, #video #video-cover{border: solid 1px #585858; z-index: 2}
	#video VIDEO{width: 100%; position: relative}
	#video #video-cover{width: 90%; left: 5%}

	#product-easy-to-use-section{padding: 50px 0px}
	.easy-to-use__container{display: block}
	.easy-to-use__left, .easy-to-use__right{width: 100%}
	.easy-to-use__left{padding-right: 0px}
	.easy-to-use__left *{text-align: left}
	.easy-to-use__right{padding-top: 35px}
	
	.easy-to-use__left H2, .easy-to-use__left H2 *{font-size: 36px; line-height: 1; letter-spacing: -2px}
	.easy-to-use__left P.intro{font-size: 22px; line-height: 30px; letter-spacing: -1px}	
	
	#product-samples-section{padding: 60px 0px}
	#product-samples-section H2{padding-top: 0px}
	#product-samples-section P.main{padding-bottom: 25px}
	#product-samples-section A.product-sample:first-child{margin-top: 10px}
	#product-samples-section A.product-sample::before{width: 100%}
	
	#product-samples-left, #product-samples-right{text-align: left; width: 100%; padding: 0px; display: block}
	#product-samples-right{padding-bottom: 10px}
	
	#product-schedule-section{padding: 50px 0px 55px 0px}
	.schedule-section__container{padding-left: 0px}
	
	DIV.product-quality{width: 100%; margin: 0px 0px 50px 0px}
	DIV.product-quality:last-child{margin: 0px}
	DIV.product-quality IMG{border-color: solid 1px #c0c0c0}
	DIV.product-quality H3{padding-top: 20px}
	
	#product-consultants-section{padding: 50px 0px 55px 0px}
	#product-consultants-section H2{font-size: 32px; letter-spacing: -1.5px; text-align: left; padding-left: 5%; padding-right: 5%}	
	
	#product-summary-section{padding: 55px 0px}
	.product-summary__container{display: block}
	.product-summary__container .summary{width: 100%}
	.product-summary__container P.icon{padding-left: 120px}
	
	#product-faq-section{padding: 60px 0px}
	
	#article-faq-section{padding: 50px 0px}
	
	.product-clients-section{padding: 55px 0px 70px 0px; background: #fff}
	.clients__img{width: calc(50% - 12px - 5px); padding: 5px}
	.clients__img:nth-child(9), .clients__img:nth-child(18){display: none}
	.clients__load-more{padding-top: 0px}
	.clients__loader{margin-top: 0px}	
}	

@media screen and (max-width: 750px)
{
	#product-description-section H2{padding-top: 15px}
	#product-description-section + H2{padding-top: 40px}
	#product-description-section .button-included-documents + H2{padding-top: 50px}
	
	#product-consultants-section H2{margin-bottom: -15px}
	#product-consultants-section .product-consultant{width: 100%}
	#product-consultants-section .button-consultants__show-more{font-size: 16px; width: 250px; margin: 50px 0px 0px 5%}
	
	#product-partners-section{padding: 55px 0px}
	#product-partners-section * {text-align: left}
	#product-partners-section IMG{width: calc(50% - 5px); padding: 10px}	
	
	#product-consultants-section + #product-partners-section{padding-top: 0px; border-top: none; background: #fff}
	
	#product-summary-section{padding: 40px 0px}
	#product-summary-section P.icon, #product-summary-section P.icon SPAN{font-size: 14px; line-height: 22px}		
	#product-summary-section P.icon{padding-left: 110px}
	
	#product-faq-section{padding: 55px 0px 60px 0px}
	#product-faq-section H2{padding-bottom: 40px} 
	
	#article-faq-section{padding: 40px 0px 60px 0px}
	#article-faq-section H2{padding-bottom: 40px} 
}

@media screen and (max-width: 500px)
{
	.clients__img{width: calc(50% - 5px); padding: 5px 0px}
}





/* LEARNING CENTER */
.learning-center__right-inner, .learning-center__right-inner--active{min-height: 200px; display: flex; justify-content: space-between; flex-wrap: wrap; transition: all .5s ease; background: #fff}
.learning-center__right-inner--active{opacity: 0}
.learning-center__item{text-decoration: none; width: calc(50% - 15px); margin: 0px 0px 50px 0px; transition: width 0.25s}
.learning-center__img{width: 100%; height: auto}
.learning-center__title{color: #505050; font-size: 18px; line-height: 26px; font-weight: 600; margin-top: 20px; padding: 20px 0px 15px 0px; position: relative}
.learning-center__title::before{content: ' '; width: 70px; height: 3px; position: absolute; left: 0px; top: 0px; background: var(--primary-color)}
.learning-center__date{color: #888; font-size: 12px; line-height: 1; font-weight: 700; font-synthesis: style; padding: 0px 0px 25px 0px}
.learning-center__summary{font-size: 14px; line-height: 24px; padding: 0px}

@media screen and (max-width: 900px)
{	
	.learning-center__item{width: 100%}
}

@media screen and (max-width: 750px)
{
	.learning-center__item{width: calc(50% - 10px); margin: 0px 0px 40px 0px}
}

@media screen and (max-width: 600px)
{	
	.learning-center__item{width: 100%}
}





/* FREE DOWNLOADS */
.free-downloads__container{}
.free-downloads__inner{display: flex; justify-content: space-between; flex-wrap: wrap; transition: all .5s ease; background: #fff}





/* ARTICLES */
BODY:has(ARTICLE){.subscribe .container, .share-buttons{max-width: 900px}}

ARTICLE H1.two-lines{font-size: 40px; line-height: 1.25}
ARTICLE H1.two-lines{margin-bottom: 25px; padding-bottom: 22px; font-weight: 500; font-synthesis: style; border-bottom: none 1px #303030}
ARTICLE H1.two-lines SPAN{color: #808080; font-size: 28px; line-height: 1.2; font-weight: 500; font-synthesis: style; letter-spacing: -1px; padding: 5px 0px 0px 0px; display: block}

ARTICLE H2.underline, ARTICLE H2.underline *{font-size: 22px; line-height: 1.2}
ARTICLE H2.underline{margin-bottom: 25px; padding-bottom: 22px; font-weight: 500; font-synthesis: style; border-bottom: solid 1px #303030}
ARTICLE H2.underline SPAN{color: #808080; font-size: 28px; line-height: 1.2; font-weight: 500; font-synthesis: style; letter-spacing: -1px; text-transform: uppercase; padding: 5px 0px 0px 0px; display: block}

ARTICLE H2.two-lines, ARTICLE H2.two-lines *{font-size: 28px; line-height: 1.25}
ARTICLE H2.two-lines{margin-bottom: 25px; padding-bottom: 22px; border-bottom: solid 0px #303030; color: #808080; font-size: 22px; line-height: 1.2; font-weight: 500; font-synthesis: style; letter-spacing: -1px; text-transform: uppercase}
ARTICLE H2.two-lines SPAN{font-weight: 500; font-synthesis: style; letter-spacing: 0px; text-transform: none; padding: 5px 0px 0px 0px; display: block}



ARTICLE H2.underline{margin-bottom: 25px; padding-bottom: 22px; font-weight: 500; font-synthesis: style; border-bottom: solid 1px #303030}
ARTICLE H2.underline SPAN{color: #808080; font-size: 22px; line-height: 1.2; font-weight: 500; font-synthesis: style; letter-spacing: -1px; text-transform: uppercase; padding: 5px 0px 0px 0px; display: block}

.article-date{color: #ff9010; font-size: 16px; line-height: 1; font-weight: bold; font-synthesis: style; margin: -10px 0px 25px 0px; padding: 0px}
.article-bio__container{text-align: center; margin: 30px auto 65px}
.article-bio__img{width: 120px; height: auto; border-radius: 50%}
.article-bio__info{max-width: 600px; margin: 0px auto; padding: 25px 0px 0px 0px}
.article-bio__name{font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -0.5px}
.article-bio__title{color: #909090; font-size: 14px; line-height: 1; font-weight: 600; padding: 10px 0px 20px 0px}
.article-bio__bio{font-size: 14px; line-height: 1.3; padding: 0px}
	
.article-bio__container::before, .article-bio__container::after{content: ""; width: calc((100% - 120px - 50px)/2); height: 2px; position: absolute; top: 60px; background: #d0d0d0}
.article-bio__container::before{left: 0px}
.article-bio__container::after{right: 0px}
	
@media screen and (max-width: 750px)
{
	.article-bio__container{margin: 25px auto 50px}
}	





.recommended-products{padding: 60px 0px 70px 0px; border-top: solid 1px var(--border-color)}
.recommended-products	.container{max-width: 940px}
.recommended-products H2{font-size: 36px; line-height: 44px; padding: 0px 0px 25px 20px}
.recommended-products .recommended-products-text{font-size: 18px; line-height: 26px; max-width: 700px; padding: 0px 0px 50px 20px}
.recommended-products .product-listing-wrapper__container{justify-content: center}
.recommended-products .product-listing{width: calc(50% - 40px); margin: 0px 20px; padding: 0px; border: none}
.recommended-products .product-listing__description{height: 88px}

@media screen and (max-width: 750px)
{
	.recommended-products{padding: 45px 0px 10px 0px}
	.recommended-products H2{text-align: left; font-size: 32px; line-height: 38px; padding-left: 0px}
	.recommended-products .recommended-products-text{text-align: left; max-width: 900px; padding: 0px 0px 45px 0px}
	.recommended-products .product-listing-wrapper__container{display: block}
	.recommended-products .product-listing{width: 100%; margin: 0px 0px 50px 0px}
}



/* SUBSCRIBE */
.subscribe{padding: 60px 0px; background: #e0e0e0}
.subscribe .container{padding: 25px 25px 25px 25px; box-sizing: border-box; background: #fff}

P.subscribe__header{font-size: 24px; line-height: 30px; padding: 0px 0px 25px 0px}
P.subscribe__main{margin-top: -10px; padding: 0px 0px 25px 0px}
P.subscribe__opt-out{color: #505050; font-size: 12px; font-size: 12px; font-style: italic; padding: 20px 0px 0px 0px}

.subscribe__inputs{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap}
.subscribe__inputs--success{display: block}
.subscribe__inputs >*{height: 44px; margin-right: 20px; padding: 0px 10px; border: solid 1px #c0c0c0; box-sizing: border-box}
.subscribe__inputs--success >*{color: #ff0000; font-size: 20px; line-height: 26px; font-weight: bold; font-synthesis: style; height: auto; padding: 0px; border: none}
.subscribe__submit{width: 140px; margin: 0px; padding: 0px 0px; border: none; display: flex; justify-content: center; align-items: center; cursor: pointer; background: var(--second-color)}
.subscribe__submit-text{color: #fff; line-height: 1; text-align: center}

.subscribe__submit-loader{font-size: 6px; width: 40px; height: 18px; display: none}
.subscribe__submit-loader DIV{width: 4px; height: 100%; margin: 0px 2px; display: inline-block; animation: stretch 1.2s infinite ease-in-out; background: #fff}
.subscribe__submit-loader .rect2{animation-delay: -1.1s}
.subscribe__submit-loader .rect3{animation-delay: -1.0s}
.subscribe__submit-loader .rect4{animation-delay: -0.9s}
.subscribe__submit-loader .rect5{animation-delay: -0.8s}
@keyframes stretch{0%, 40%, 100% {transform: scaleY(0.4)} 20%{ transform: scaleY(1.0)}}

.subscribe__submit--active .subscribe__submit-text{display: none}
.subscribe__submit--active .subscribe__submit-loader{display: block}

@media screen and (max-width: 750px)
{
	.subscribe{padding: 5vw 0px}
	.subscribe__inputs >*{width: 100%; margin: 0px 0px 20px 0px}
	.subscribe__submit{margin: 0px}	
}





/* SHARE */
.share-buttons{padding: 50px 0px}
.share-buttons-list{overflow: hidden}
.share-buttons-list LI{margin: 0px 10px 0px 0px; float: left}
.share-buttons-list IMG, .share-buttons-list A{font-size: 0px; line-height: 0px; text-decoration: none; margin: 0px; cursor: pointer; overflow: hidden}





/* CASE STUDIES */
.case-studies__container{max-width: 1050px; padding-bottom: 30px}
.case-studies{padding: 30px 0px 0px 0px; display: flex; justify-content: space-between; flex-wrap: wrap}

.case-study__item{text-decoration: none; width: calc(50% - 20px); margin: 0px 0px 45px 0px; padding: 0px 0px 30px 0px; border: solid 1px var(--border-color); display: flex; flex-direction: column; transition: .3s ease-in-out} 
.case-study__item:hover IMG{opacity: .7}
.case-study__img{width: 100%; height: auto; transition: .3s ease-in-out}
.case-study__title{color: #000; font-size: 30px; line-height: 1; font-weight: 400; letter-spacing: -1.5px; margin-bottom: 25px; padding: 25px 20px 15px 20px; position: relative}
.case-study__title::after{content: ""; width: 70px; height: 3px; position: absolute; left: 20px; bottom: 0px; background: var(--primary-color)}
.case-study__date-sector{padding: 0px 20px; display: flex; justify-content: space-between; flex-wrap: wrap}
.case-study__date{color: #686868; font-size: 14px; line-height: 1; font-weight: 600; padding: 0px}	
.case-study__sector{color: #202020; font-size: 14px; line-height: 1; font-weight: 700; padding: 0px}	
.case-study__summary{font-size: 16px; line-height: 24px; padding: 20px 20px 35px 20px}
.case-study__link{color: #0066cc; line-height: 1; font-weight: 600; letter-spacing: -0.5px; margin-top: auto; margin-left: 20px}

@media only screen and (max-width: 900px)
{
	.case-study__date-sector{padding-bottom: 10px; display: block}
	.case-study__sector{padding-top: 10px}
}

@media only screen and (max-width: 900px)
{
	.case-studies__container{padding-bottom: 50px}
	.case-study__item{width: calc(50% - 10px); margin-bottom: 20px}
}	

@media only screen and (max-width: 750px)
{
	.case-studies-main-page{padding-bottom: 20px}
	.case-studies{display: block}
	.case-study__item{width: calc(100% - 2px); margin-bottom: 50px; display: block}
	.case-study__title{padding-bottom: 15px}
	.case-study__description{padding-bottom: 30px}
}





/* FREE DOWNLOADS -- INDIVIDUAL DOWNLOADS */
P.resource-download{font-size: 24px; line-height: 30px; padding: 15px 0px 15px 0px}	
P.subscribe-opt-in{color: #606060; font-size: 14px; line-height: 22px; padding: 0px 0px 35px 0px}	
P.subscribe-opt-out{color: #606060; font-size: 12px; line-height: 12px; font-style: italic; padding: 20px 0px 50px 0px}





/* FREE DOWNLOADS [action=download] */	
#free-download-confirmed A.download{color: #fff; font-size: 16px; line-height: 1.25; text-decoration: none; text-align: center; width: 220px; padding: 12px 0px 12px 0px; margin: 10px 10px 10px 0px; display: inline-block; transition: all .25s ease; background: var(--second-color)}
#free-download-confirmed A.download:hover{background: var(--primary-color)}

#free-download-confirmed-border{margin-top: 45px; padding: 30px 0px 10px 0px; border-top: solid 1px var(--border-color)}





/* FAQ */
.faq-page UL{margin-top: 5px}
.faq-qa{margin: 0px 0px -1px 0px; padding: 30px 25px 10px 70px; border: solid 1px var(--border-color); border-left: none; border-right: none; cursor: pointer; position: relative; user-select: none; outline: none; -webkit-tap-highlight-color: transparent; background: #fff}

.faq-button{width: 36px; height: 36px; border-radius: 50%; position: absolute; left: 15px; top: 25px; background: var(--third-color)}
.faq-button::before, .faq-button::after{content: ""; position: absolute; background: #000}
.faq-button::before{width: 14px; height: 2px; left: 11px; top: 17px}
.faq-button::after{width: 2px; height: 14px; left: 17px; top: 50%; transform: translateY(-50%); transition: 0.5s}
.faq-button--active::after{height: 0px}

H3.faq-question{font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0px; padding: 0px 0px 20px 0px}

.faq-answer{max-height: 0px; box-sizing: content-box; transition: .25s cubic-bezier(0, .99, 0, 0.99); overflow: hidden}
.faq-answer--active{max-height: var(--faq-answer-height); transition: .35s cubic-bezier(0.5, 0.2, 0.35, 0.9)}
.faq-answer IMG{width: auto; max-width: 100%; height: auto; margin: 5px 0px 25px 0px}

P.faq-answer_text, P.faq-answer_text *{font-size: 14px; line-height: 22px}
P.faq-answer_text SPAN.italic{font-style: italic}
P.faq-answer__text{padding: 0px 0px 25px 0px}

.faq-page P.faq-back-to-top{color: #fff; text-align: center; width: 200px; margin: 55px 0px 0px 0px; padding: 8px 0px 8px 0px; cursor: pointer; transition: .3s ease-in-out; background: var(--primary-color)}
.faq-page P.faq-back-to-top:hover{background: var(--second-color)}





/* PRIVACY / TERMS */
DIV.refund-request-form-terms{padding-left: 40px}





/* COMMON CLASSES */
BODY P.border, BODY A.border, BODY SPAN.border{color: #0048b0; text-decoration: none; border: none; cursor: pointer; transition: background-size .3s; background: linear-gradient(to bottom, #b0d0f0 0%, #b0d0f0 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px}
BODY P.border:hover, BODY A.border:hover, BODY SPAN.border:hover{background-size: 4px 26px}
BODY P.border-dark, BODY A.border-dark, BODY SPAN.border-dark{color: #fff; background: linear-gradient(to bottom, #fff 0%, #fff 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 1px 1px}
BODY P.border-dark:hover, BODY A.border-dark:hover, BODY SPAN.border-dark:hover{color: #000}
BODY .padding-bottom-zero{margin-bottom: 0px; padding-bottom: 0px}




@media screen and (min-width: 900px)
{	
	LI.nav:hover DIV.dropdown{max-height: 1000px; border-bottom: 1px solid #506070; overflow: auto}
}

@media screen and (max-width: 900px)
{	
	/* HEADER + LOGO */
	#header{width: 100%; border-bottom: solid 1px var(--border-color)}
	.header__logo{left: 5%}
	#icon-section{right: 5%}		
		
	.main-nav{width: 0px; height: 0px; overflow: hidden; position: absolute; left: 0px; top: 0px; opacity: 0; transition: width .25s, opacity .5s cubic-bezier(0, .99, 0, 0.99)}
	.main-nav--slide{width: 100%; height: 100vh; height: 100svh; padding: 100px 0px 100px 0px; overflow-y: scroll; opacity: 1; background: #fff}
	.main-nav--slide #nav{min-height: 750px; padding-bottom: 50px; display: block}

	LI.nav{width: 100%; display: block; position: relative; overflow: hidden} 
	P.top-nav, A.top-nav{color: #000; font-size: 18px; line-height: 1; font-weight: 600; margin: 0px; padding: 20px 0px; border-bottom: solid 1px var(--second-color); display: block}
	P.top-nav::after, P.top-nav::before{content: ""; width: 2px; height: 8px; border: none; position: absolute; right: 9px; top: 25px; transform: rotate(45deg); background: #000}
	P.top-nav::before{right: 14px; transform: rotate(-45deg)}
	P.top-nav:hover, A.top-nav:hover{background: #fff}
	
	/* DROPDOWNS */
	DIV.dropdown{width: 100%; margin: 0px; border: none; position: relative; left: 0%; transition: 0.15s; background: #fff}
	DIV.dropdown--active{max-height: 250px; margin-top: -1px; padding: 0px 0px 10px 0px; transition: 0.5s} 
	DIV.dropdown A.menu-item, DIV.dropdown A.menu-item *{color: #000; font-size: 18px; line-height: 1}
	DIV.dropdown A.menu-item{padding: 12px 0px; border: none; background: #fff}
	DIV.dropdown P.menu-item-description{display: none}


	/*****************  INNER  ***************/

	/* RELATED PRODUCTS */
	#related-products H2, #related-products P.intro{padding-left: 0px}
	DIV.related-product{padding: 0px}
	A.related-product-content{width: calc(100% - 130px); padding-right: 130px}
	DIV.related-product-icon{right: 0px}
}

@media screen and (max-width: 750px)
{
	:root{--border-color: #a8a8a8}
	BODY{max-width: 600px; margin: 0px auto}
	
	H1, H1 *{font-size: 36px; line-height: 44px}
	H1{padding-top: 45px}
	H2, H2 *{font-size: 28px; line-height: 36px}
	H2.border{margin-bottom: 35px}	
	
	
	/*****************  INNER  ***************/
	
	/* RELATED PRODUCTS */
	#related-products{margin-top: 0px}
	#related-products H2{font-size: 32px; line-height: 40px}
	A.related-product-content{width: 100%; padding-right: 0px}
	DIV.related-product-icon{display: none}
}