/*
 Theme Name:	Norwex Training
 Author:		Norwex USA, Inc
 Description:	Custom Bootstrap Wordpress Theme
 Version:		0.0.6
 Requires at least: 6.9
 Tested up to: 7.1
 Requires PHP: 8.0
 Text Domain: norwex_training
*/

@font-face {
    font-family: 'Proxima-Nova';
    src: url("../../assets/fonts/proximanovaregular-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovaregular-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-T';
    src: url("../../assets/fonts/proximanovathin-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovathin-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-TI';
    src: url("../../assets/fonts/proximanovathinitalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovathinitalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-L';
    src: url("../../assets/fonts/proximanovalight-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovalight-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-LI';
    src: url("../../assets/fonts/proximanovalightitalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovalightitalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-I';
    src: url("../../assets/fonts/proximanovaregularitalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovaregularitalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-SB';
    src: url("../../assets/fonts/proximanovasemibold-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovasemibold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-SBI';
    src: url("../../assets/fonts/proximanovasemibolditalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovasemibolditalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-B';
    src: url("../../assets/fonts/proximanovabold-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovabold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-BI';
    src: url("../../assets/fonts/proximanovabolditalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovabolditalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-EB';
    src: url("../../assets/fonts/proximanovaextrabold-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovaextrabold-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Proxima-Nova-EBI';
    src: url("../../assets/fonts/proximanovaextrabolditalic-webfont.woff2") format("woff2"), url("../../assets/fonts/proximanovaextrabolditalic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

section {
    display: table;
    position: relative;
    clear: both;
    float: none;
    width: 100%;
    padding: 4rem 0;
    text-align: center
}
@media screen and (max-width: 1024px) {
    section {
        padding: 2.5rem 0
    }
}

body {
    color: #5c6f7c;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
}
@media screen and (max-width: 1024px) {
    body {
        font-size: 15px
    }
}
@media screen and (max-width: 680px) {
    body {
        font-size: 15px
    }
	.navbar-brand {
		margin: 0 auto !important;
	}
}
p {
    font-size: 1.125em;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 300;
    line-height: 140%;
    margin-bottom: 1.25rem
}
p.text-large {
    font-size: 1.5rem
}
strong {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 700;
}
strong em {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 700;
}
em {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 300;
}
em strong {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 700;
}

blockquote {
    color: #00b5bf;
    padding: 0 20px;
    margin: 0;
    font-style: italic;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.31em;
    line-height: 1.6;
    border: 0
}
.section {
    padding: 30px 0 30px 0
}
header {
    display: table;
    position: relative;
    clear: both;
    float: none;
    width: 100%;
    z-index: 1000;
    border-top: 2px solid #abbdb1;
}
.surheader {
    display: table;
    position: relative;
    clear: both;
    float: none;
    width: 100%;
    background-color: rgba(92, 111, 124, 0.85);
    color: #fff;
    height:36px
}

h1,
h2,
h3,
h4 {
    display: inline-block;
    position: relative;
    clear: both;
    float: none;
    width: 100%;
    line-height: 120%;
    margin-bottom: 1rem
}

h1 {
    color: #46555f;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 3em;
    font-weight: 300;
}
@media screen and (max-width: 680px) {
    h1 {
        font-size: 2.4em
    }
}
@media screen and (max-width: 680px) {
    h1 {
        font-size: 1.75em
    }
}
h1.thick {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 700;
}
h2 {
    color: #00b5bf;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 2.5em;
    line-height: 110%
}
@media screen and (max-width: 1024px) {
    h2 {
        font-size: 2em
    }
}
@media screen and (max-width: 680px) {
    h2 {
        font-size: 1.75em
    }
}
h3 {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 2.25em;
    font-weight: 300;
}
@media screen and (max-width: 1024px) {
    h3 {
        font-size: 2em
    }
}
@media screen and (max-width: 680px) {
    h3 {
        font-size: 1.35em
    }
}
h4 {
    display: inline-block;
    position: relative;
    background-color: #fff;
    font-size: 1.75em;
    margin-bottom: .75rem;
    z-index: 1
}
h5 {
    display: inline-block;
    position: relative;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 120%;
    margin-bottom: .75rem
}
@media screen and (max-width: 1024px) {
    h5 {
        font-size: 1.4em
    }
}
@media screen and (max-width: 680px) {
    h5 {
        font-size: 1.2em
    }
}
.sub-heading {
    color: #5c6f7c;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1.375em;
    font-weight: 300;
    line-height: 140%;
    margin: 0 auto 1.25rem;
    max-width: 800px
}
@media screen and (max-width: 1024px) {
    .sub-heading {
        font-size: 1.25em;
        width: 80%
    }
}
@media screen and (max-width: 680px) {
    .sub-heading {
        font-size: 1em;
        width: 90%
    }
}

h1.proxima-nova,
h2.proxima-nova,
h3.proxima-nova,
h4.proxima-nova,
h5.proxima-nova,
p.proxima-nova {
    font-family: 'Proxima-Nova' !important
}
h1.proxima-nova-l,
h2.proxima-nova-l,
h3.proxima-nova-l,
h4.proxima-nova-l,
h5.proxima-nova-l,
p.proxima-nova-l {
    font-family: 'Proxima-Nova-L' !important
}
h1.proxima-nova-sb,
h2.proxima-nova-sb,
h3.proxima-nova-sb,
h4.proxima-nova-sb,
h5.proxima-nova-sb,
p.proxima-nova-sb {
    font-family: 'Proxima-Nova-SB' !important
}
h1.proxima-nova-b,
h2.proxima-nova-b,
h3.proxima-nova-b,
h4.proxima-nova-b,
h5.proxima-nova-b,
p.proxima-nova-b {
    font-family: 'Proxima-Nova-B' !important
}
.hero {
    overflow: hidden;
    position: relative;
    height: 400px;
    width: 100%
}
.hero__image {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 120%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}
.hero__image--home {
    background-image: url("../../assets/images/products-new.jpg");
}
.hero__image--fresh-start {
    background-image: url(../../assets/images/wondering-where-to-start-heading.png)
}
.hero__image--houses {
    background-image: url(../../assets/images/herobg/hero-white-floating-houses.png)
}
.hero__image--shop {
    background-image: url(../../assets/images/herobg/blue-shop-hero.png)
}
.hero__image--droplets {
    background-image: url(../../assets/images/herobg/blue-droplets-hero.png)
}
.hero__image--lightbulbs {
    background-image: url(../../assets/images/herobg/lightbulbs-bg.png)
}
.hero__square-copy-box {
    display: inline-block;
    background-color: #00b5bf;
    padding: 1rem;
    position: absolute;
    top: 6rem;
    width: 100%;
    text-align: center
}
@media screen and (max-width: 40em) {
    .hero__square-copy-box {
        opacity: 0.85;
    }
}
@media screen and (min-width: 40em) {
    .hero__square-copy-box {
        right: 5rem;
        top: 7rem;
        width: 415px
    }
}
@media screen and (min-width: 64em) {
    .hero__square-copy-box {
        right: 7rem;
        top: 7em;
        width: 475px;
    }
}
.hero__square-copy-box .heading {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 110%;
}
@media screen and (min-width: 40em) {
    .hero__square-copy-box .heading {
        font-size: 2rem
    }
}
@media screen and (min-width: 64em) {
    .hero__square-copy-box .heading {
        font-size: 2.6rem
    }
}
.hero__square-copy-box .summary {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 120%;
    margin: 0.5rem 0
}
@media screen and (min-width: 40em) {
    .hero__square-copy-box .summary {
        font-size: 1.75rem
    }
}
@media screen and (min-width: 64em) {
    .hero__square-copy-box .summary {
        font-size: 2rem
    }
}
.hero__round-copy-box {
    display: inline-block;
    position: relative;
    background-color: #00b5bf;
    padding: 2rem;
    position: absolute;
    top: 6.5rem;
    width: 250px;
    height: 250px;
    left: 50%;
    text-align: center;
    border-radius: 100%;
    transform: translateX(-50%)
}
@media screen and (min-width: 40em) {
    .hero__round-copy-box {
        width: 350px;
        height: 350px;
        top: 10rem
    }
}
@media screen and (min-width: 64em) {
    .hero__round-copy-box {
        top: 10.5rem
    }
}
.hero__round-copy-box .copy-box-wrap {
    transform: translatey(-50%);
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%
}
.hero__round-copy-box h1 {
    margin: 0
}
.hero__round-copy-box .heading {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 110%;
    text-transform: uppercase;
    max-width: 80%;
    margin: .5rem auto 0
}
@media screen and (min-width: 40em) {
    .hero__round-copy-box .heading {
        max-width: 90%;
        font-size: 2.25rem
    }
}
.hero__round-copy-box .summary {
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 120%;
    margin: 0.5rem auto 0;
    max-width: 80%
}
@media screen and (min-width: 40em) {
    .hero__round-copy-box .summary {
        max-width: 90%;
        font-size: 1.6rem
    }
}
.hero__introduction, .hero__introduction_spruce {
    text-align: center;
    width: 100%;
}
@media screen and (min-width: 40em) {
    .hero__introduction {
        padding-top: 100px;
        top: 45%;
    }
}
.hero__introduction h1 {
    color: white;
    text-transform: uppercase;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-weight: 700;
    margin: 0.4em auto 0;
    font-size: 1.3em;
    padding: 0 1rem;
    max-width: 400px
}
.hero__introduction_spruce h1 {
    color: #f8ede5;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: "Proxima-Nova-B";
    margin: 0.4em auto 0;
    font-size: 1.3em;
    padding: 20px 1rem;
    max-width: 700px
}
@media screen and (min-width: 40em) {
    .hero__introduction h1 {
        margin-top: 0.4em;
        font-size: 1.9em;
    }
}

.hero__square-copy-box h1,
.hero__round-copy-box h1 {
    color: white
}
.hero__square-copy-box span,
.hero__round-copy-box span {
    display: block;
    color: white
}
.hero__square-copy-box .icon-wrap,
.hero__round-copy-box .icon-wrap {
    display: inline-block;
    position: relative;
    padding: 0 1rem;
    text-align: center;
    height: 2.813em;
    margin: 0 auto 1rem;
    width: 4.5rem
}
.hero__square-copy-box .icon-wrap:before,
.hero__square-copy-box .icon-wrap:after,
.hero__round-copy-box .icon-wrap:before,
.hero__round-copy-box .icon-wrap:after {
    background-color: #fff;
    content: "";
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    width: 0.25em
}
.hero__square-copy-box .icon-wrap:before,
.hero__round-copy-box .icon-wrap:before {
    left: 0
}
.hero__square-copy-box .icon-wrap:after,
.hero__round-copy-box .icon-wrap:after {
    right: 0
}
.hero__square-copy-box .icon-wrap .icon,
.hero__round-copy-box .icon-wrap .icon {
    color: white;
    font-size: 2rem
}
@media screen and (min-width: 40em) {
    .hero__square-copy-box .icon-wrap .icon,
    .hero__round-copy-box .icon-wrap .icon {
        font-size: 3rem
    }
}
.hero__square-copy-box .intro-wrap,
.hero__round-copy-box .intro-wrap {
    display: inline-block;
    position: relative;
    padding: 0 1rem;
    text-align: center;
    height: auto;
    margin: 0 auto;
    width: auto
}
.hero__square-copy-box .intro-wrap:before,
.hero__square-copy-box .intro-wrap:after,
.hero__round-copy-box .intro-wrap:before,
.hero__round-copy-box .intro-wrap:after {
    background-color: #fff;
    content: "";
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    width: 0.25em
}
.hero__square-copy-box .intro-wrap:before,
.hero__round-copy-box .intro-wrap:before {
    left: 0
}
.hero__square-copy-box .intro-wrap:after,
.hero__round-copy-box .intro-wrap:after {
    right: 0
}
.hero__square-copy-box .intro-wrap span,
.hero__round-copy-box .intro-wrap span {
    color: white;
    font-family: objektiv-mk2, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    text-transform: uppercase
}
@media screen and (min-width: 40em) {
    .hero__square-copy-box .intro-wrap span,
    .hero__round-copy-box .intro-wrap span {
        font-size: 2rem
    }
}
.hero--short {
    height: 175px
}
@media screen and (min-width: 40em) {
    .hero--short {
        height: 250px
    }

}

.hero--spruce-bg {
    min-height: 90px;
    max-height: 160px;
    height: auto;
}
    
.hero--green-bg {
    background-color: #77c025
}
.hero--blue-bg {
    background-color: #00b5bf
}
.hero--spruce-bg {
    background-color: #89b1b9
}
.hero--purple-bg {
    background-color: #939ac6
}
.hero--yellow-bg {
    background-color: #ffd24f
}
.hero--black-bg {
    background-color: #ffd24f
}
.hero--step1-bg {
    background-color: #0075BC
}
.hero--step2-bg {
    background-color: #00B5BF
}
.hero--step3-bg {
    background-color: #333092
}
.hero--step4-bg {
    background-color: #62BB46
}
.hero--step5-bg {
    background-color: #7E81BE
}
/*Footer Styles*/
#footer {
    background-color: #EDF1F2;
    padding-top: 20px;
    /* ADD */
    padding-bottom: 40px;
    border-top: 6px solid #C2D1D4;
    font-size: 0.875em;
    min-height: 200px;
}


#footer.row.footer-area {
    padding-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1195px;
}

#footer .container {
    background-color: rgba(0, 51, 102, 0) !important;
}

#footer a {
    cursor: pointer;   
}

.footer-logo img {
    margin-left: 0px;
    position: absolute;
}

#footer .logo {
    float: left;   
}

#footer li a {
    font-style: normal;
    text-transform: uppercase;   
}

#footer p {
    font-style: normal;
    margin-bottom: 0;   
}
/*********************************/
a.whiteLink {
	color:#fff;
	text-decoration:none;
}
a:hover.whiteLink {
	color:#fff;
	text-decoration:none;
}
.greyBox {
	background: #eeeeee;
	border: 2px solid #cccccc;
	margin-bottom: 1rem;
	padding: 10px;
}
.greenBox {
	background-color: #e7efbb;
	padding: 10px;
	margin: 20px 0;
}
.orangeBox {
	background-color: #ff6600;
	border: 2px solid #993300;
	padding: 10px;
	margin: 20px 0;
}
.orangeBox p {
	font-weight: bold;
	font-size:1.5em;
	color:#FFF;
	margin-bottom:0 !important;
}
.orangeBox a {
	color:#FFF;
}
.blueBox {
	background-color: #F9F9F9;
	margin: 20px 0;	
}
.blueBoxTitle {
	background-color: #2b5797;
	color:#fff;
	padding:10px;
}
.blueBox a {
	color:#0056b3;
}
.blueBox a:hover {
	color:#007bff
;
}
.lightBlue {
	border: 2px solid #a0d8d9;
	background-color:#e4f4f4;
}
.goalText {
	color: #fff;
	padding:10px;
	text-align:center;
	min-height: 13rem;
}
.linkNoUnderline {
	text-decoration:none !important;
}
.goalBlue {
	background-color: #00b5bf;
}
.goalYellow {
	background-color: #ffd24f;
}
.goalPurple {
	background-color: #b6b1d8;
}
.goalGreen {
	background-color: #62bb46;
}
blockquote {
	color:#fff;
	padding: 20px;
	margin-top:20px;
	margin-bottom:20px;
	border-radius: 10px;
}
blockquote.yellow {
	background-color: #fdcf2b;
}
blockquote.green {
	background-color:#7cbc00;
}
blockquote.orange {
	background-color:#f48024;
}
blockquote.blue {
	background-color:#0075bc;
}
blockquote.purple {
	background-color:#bfb5e5;
}
cite {
	font-style:italic;
	font-size:0.8em;
	display:block;
	padding-top:10px;
}
cite:before {
	content:" — ";
}
/*********************************/
@media only screen and (max-width: 2500px) {
.frameHandler {
	height:1600px;
  }
}
@media only screen and (max-width: 1344px) {
.frameHandler {
	height:1450px;
  }
}
@media only screen and (max-width: 420px) {
.frameHandler {
	height:1500px;
  }
}
@media only screen and (max-width: 380px) {
.frameHandler {
	height:1550px;
  }
}
/***********************************************/
.bigCenterTitle {
	font-family: museo-slab, serif;
	font-style: normal;
	font-weight: 700;
	font-size:2.5rem;
/* 	font-weight:bold; */
	text-align:center;
	color:#0075BC;	
}
.bigCenterTitle a {
	color:#0BBBD4;		
}
.bigCenterTitle a:hover {
	color:#0BBBD4;		
}


/*********************************/

span.resource {
	max-width:200px;
	font-size:0.7em;
}
.list-group a {
	color:#6c757d;
}
.list-group a:hover {
	color:#0056b3;
}
@media screen and (min-width: 680px) {
.list-scroll {
	max-height: 413px;
    overflow-y: scroll;
    border-bottom: 1px solid #ccc;
	}
}
.tip {
	color:#fff;
	font-size:16px;
	background:#333092;
	padding: 20px 20px 10px;
}