/*************************************************************
****	Colors
**************************************************************

	#ffffff - white
    #000000 - black
    #333333 - dark grey
    #4C4C4C - medium grey
    #878787 - light grey
    #bdbdbd - ultralight grey
    #FF4E4E - light red
    #73FFB8 - mint
    #FFE4E4 - salmon
    #E8FFF4 - light mint
    #51F3FF - blue
    #74A7FF - light purple
    #7F6AFF - purple
    #BF51FF - pink
*/


/*************************************************************
****	Default Styles
*************************************************************/


* {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}

body {
    font-family: "source-sans-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
	text-rendering: optimizeLegibility;
    background-color: #333333;
}

button, img {
	border: none;
}

button {
	cursor: pointer;
    background-color: #000;
}

img {
    vertical-align: top;
}

a:link, a:visited {
	color: #fff;
}

h1 {
    font-family: "source-sans-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 30px;
    color: #fff;
}

h2 {
    font-family: "source-sans-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 25px;
    color: #fff;
}

h3 {
    font-family: "source-sans-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    text-align: center;
}

h4 {
    font-family: "source-sans-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #fff;
}

/*header, main, footer {
    max-width: 1280px;
}*/

/*************************************************************
****	Animations
*************************************************************/

@keyframes logoSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes innerSpin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@keyframes fadeColor {
	0% {
		fill: #FFFFFF;
	}
    50% {
        fill: #333333;
    }
	100% {
		fill: #FFFFFF;
	}
}

@keyframes changeColor {
    0% {
		fill: #FF4E4E;
	}
    45% {
        fill: #FF4E4E;
    }
    50% {
        fill: #333333;
    }
    55% {
        fill: #73FFB8;
    }
    100% {
		fill: #73FFB8;
	}
}

@keyframes changeColorReverse {
	0% {
		fill: #73FFB8;
	}
    45% {
        fill: #73FFB8;
    }
    50% {
        fill: #333333;
    }
    55% {
        fill: #FF4E4E;
    }
    100% {
		fill: #FF4E4E;
	}
}

@keyframes changeBackColor {
    0% {
		background-color: #FF4E4E;
	}
    45% {
        background-color: #FF4E4E;
    }
    50% {
        background-color: #fff;
    }
    55% {
        background-color: #73FFB8;
    }
    100% {
		background-color: #73FFB8;
	}
}

@keyframes changeColorLite {
    0% {
		background-color: #FFE4E4;
	}
    45% {
        background-color: #FFE4E4;
    }
    50% {
        background-color: #fff;
    }
    55% {
        background-color: #E8FFF4;
    }
    100% {
		background-color: #E8FFF4;
	}
}

@keyframes flip {
    0% {
		transform: scaleY(1);
	}
    45% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
    55% {
        transform: scaleY(1);
    }
    100% {
		transform: scaleY(1);
	}
}

@keyframes fadeOut {
    0% {
		opacity: 1;
	}
    45% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 0;
    }
    100% {
		opacity: 0;
	}
}

@keyframes fadeIn {
    0% {
		opacity: 0;
	}
    45% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 1;
    }
    100% {
		opacity: 1;
	}
}


/*************************************************************
****	Header Area
*************************************************************/

header {
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 7;
}

#mobileHeader,
#headerNM {
    width: 100%;
    height: 43px;
    background-color: #333333;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

#headerNM {
    height: 80px;
    background-color: #fff;
    display: none;
    align-items: center;
    justify-content: space-between;
}

.logoContainer {
    width: 100px;
    display: flex;
    align-items: center;
}

#headerNM .logoContainer {
    width: 160px;
    margin-left: 30px;
}

#shopBtn {
    margin-right: 10px;
    position: relative;
    display: block;
    color: #878787;
    font-weight: 700;
    font-size: 16px;
}

#shopBtn, #shopIconContainer, #shopBtnLayer1, #shopBtnLayer2 {
    width: 60px;
    height: 35px;
    border-radius: 5px;
}

#shopIconContainer, #shopBtnLayer1, #shopBtnLayer2 {
    position: absolute;
    top: 0px;
    left: 0px;
}

#shopIconContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
}

#shopBtnLayer1 {
    background-color: #4C4C4C;
    opacity: .15;
    box-shadow: inset 2px 2px 3px rgb(255, 255, 255);
    z-index: 7;
}

#shopBtnLayer2 {
    background-color: #4C4C4C;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .5), 1px 1px 2px rgba(0, 0, 0, .16);
    z-index: 6;
}

#hamburger {
    margin-left: 10px;
    position: relative;
    display: block;
}

#hamburger, #hamburgerIconContainer, #hamburgerLayer1, #hamburgerLayer2 {
    width: 60px;
    height: 35px;
    border-radius: 5px;
}

#hamburgerIconContainer, #hamburgerLayer1, #hamburgerLayer2 {
    position: absolute;
    top: 0px;
    left: 0px;
}

#hamburgerIconContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    background-color: rgba(0, 0, 0, 0);
}

#hamburgerLayer1 {
    background-color: #4C4C4C;
    opacity: .15;
    box-shadow: inset 2px 2px 3px rgb(255, 255, 255);
    z-index: 7;
}

#hamburgerLayer2 {
    background-color: #4C4C4C;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .5), 1px 1px 2px rgba(0, 0, 0, .16);
    z-index: 6;
}

#menu {
    display: none;
    background-color: #4C4C4C;
    position: absolute;
    top: 43px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, .3);
    border-radius: 0px 0px 10px 0px;
}

#menu li {
    margin: 15px 32px;
}

#menu a {
    color: #73FFB8;
    font-weight: 700;
    border-bottom: 2px #878787 solid;
}

#menuNM {
    margin-right: 30px;
    display: flex;
    align-items: center;
}

#menuNM li {
    margin: 0px 15px;
}

#menuNM a {
    color: #6f6f6f;
    border-bottom: 2px #fff solid;
    transition: color .2s ease-out, border-bottom .2s ease-out;
}

#menuNM a:hover {
    color: #73FFB8;
    border-bottom: 2px #73FFB8 solid;
}

/*************************************************************
****	Main Area ("Intro" section)
*************************************************************/

.introBackground {
    width: 100%;
    padding-top: 73px;
    padding-bottom: 30px;
    background-color: #333333;
}

.introBlock {
    margin: 0px 5px 0px 5px;
    padding: 15px 20px 30px 20px;
    background-color: rgba(0, 0, 0, .25);
    border-radius: 10px;
}

.introBlock h1 {
    margin-bottom: 10px;
}

.introBlock h2 {
    margin-bottom: 15px;
}

.introBlock p {
    color: #fff;
}

#subTagline {
    font-size: 18px;
}

.buttonAndRing {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mainBtn {
    /*margin: 20px 0px 0px 0px;*/
    position: relative;
    display: block;
}

.mainBtn, .mainBtnLayer1, .mainBtnShadow {
    width: 190px;
    height: 47px;
    border-radius: 5px;
}

.mainBtnLayer1 {
    color: #333333;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .25), 1px 1px 2px rgba(0, 0, 0, .16);
    z-index: 4;
}

.mainBtnShadow {
    background-color: #FF4E4E;
    position: absolute;
    left: 5px;
    top: 5px;
    animation-name: changeBackColor;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.mainBtnLayer1 svg:first-child {
    margin-left: 8px;
}

#ringWrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ringContainer {
    width: 100px;
    height: 100px;
    /*margin: auto;*/
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ringContainer svg {
    position: absolute;
}

.ringLogo {
    animation-name: logoSpin;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.ringLogoPath {
    animation-name: fadeColor;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.ringPath {
    animation-name: fadeColor;
	animation-duration: 10s;
    animation-delay: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.ringInner {
    animation-name: innerSpin;
	animation-duration: 40s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.redPath {
    animation-name: changeColor;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.greenPath {
    animation-name: changeColorReverse;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.renderingContainer {
    position: relative;
}

.rendering, .anglePath1, .anglePath2 {
    width: 100%;
}

.anglePath1 {
    position: absolute;
    left: 0px;
    top: -2px;
    z-index: 2;
}

.anglePath2 {
    position: absolute;
    left: 0px;
    bottom: -2px;
    z-index: 2;
}


/*************************************************************
****	Main Area ("How it works" section)
*************************************************************/

main {
    width: 100%;
}

#howBackground {
    width: 100%;
    background-color: #333333;
    padding-top: 5px;
    padding-bottom: 30px;
    position: relative;
}

#howBackground h2  {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: 700;
}

#howBlock {
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(../images/jh-symbol.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#howCardShadow {
    display: none;
    background-color: #FF4E4E;
    width: 900px;
    height: 470px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: -20px;
    top: 310px;
    z-index: 4;
    border-radius: 10px;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .3);
    animation-name: changeBackColor;
    animation-direction: alternate;
    animation-duration: 7s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#demoContainer {
    background-color: #000;
    border-radius: 5px;
    margin: 0px 5px 0px 5px;
    padding: 10px 5px 5px 5px;
}

#demoContainer p {
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

#demo {
    padding: 20px 5px 20px 5px;
    background-color: #FFE4E4;
    border-radius: 5px;
    animation-name: changeColorLite;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#demoTextBlock {
    width: 250px;
    min-height: 50px;
    margin: auto;
    position: relative;
}

#demo p {
    color: #4C4C4C;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#demo p:first-child {
    opacity: 1;
    animation-name: fadeOut;
}

#demo p:last-child {
    opacity: 0;
    animation-name: fadeIn;
}

#band {
    width: 230px;
    height: 18px;
    margin: 5px auto 10px auto;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: inset -1px -1px 2px rgba(0, 0, 0, .16), 3px 3px 6px rgba(0, 0, 0, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    animation-name: flip;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#bandColorContainer {
    width: 64px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bandColorLayer1, #bandColorLayer2 {
    position: absolute;
    top: 0px;
    left: 0px;
    animation-name: changeBackColor;
    animation-direction: alternate;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

#bandColorLayer1 {
    width: 64px;
    height: 18px;
    background-color: #FF4E4E;
    border-radius: 3px;
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 1);
    opacity: .25;
    z-index: 3;
}

#bandColorLayer2 {
    width: 64px;
    height: 18px;
    background-color: #FF4E4E;
    border-radius: 3px;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .16), 1px 1px 2px rgba(0, 0, 0, .16);
    z-index: 2;
}

#bandColorContainer img {
    width: 20px;
    position: relative;
    z-index: 4;
}

#mainPhotoContainer {
    position: relative;
}

#mainPhotoNM {
    display: none;
}

#mainPhoto,
#mainPhotoNM {
    max-height: 450px;
    object-fit: cover;
}

#mainPhoto, #mainPhotoNM, #curvePath1, #curvPath2 {
    width: 100%;
}

#curvePath1, #curvePath2, #roundPath {
    position: absolute;
    left: 0px;
}

#curvePath1 {
    top: -2px;
    z-index: 4;
}

#curvePath2 {
    top: -2px;
    z-index: 3;
    display: none;
}

#roundPath {
    bottom: -2px;
    z-index: 3;
}

#mainPhotoFilter {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #fff;
    opacity: 40%;
    z-index: 2;
}

/*#subTagline {
    padding-bottom: 20px;
}*/


/*************************************************************
****	Main Area ("Benefits" section)
*************************************************************/

#benefitsSection {
    padding-top: 20px;
    background-color: #fff;
}

#benefitsBlock {
    max-width: 700px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(../images/jh-symbol3.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#benefitsBlock h2 {
    color: #878787;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: 700;
}

#benefitsBlockText {
    color: #878787;
    font-size: 18px;
    margin: 0px 10px 40px 10px;
    text-align: center;
    position: relative;
    top: -10px;
}

#cards {
    max-width: 1500px;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.benefitCard {
    max-width: 400px;
    margin: 0px 5px 30px 5px;
    padding: 5px 0px;
    border-radius: 25px;
    
    /*box-shadow: 3px 3px 6px rgba(0, 0, 0, .4);*/
}

#goingOutCard {
    background: linear-gradient(90deg, rgba(115, 255, 184, 1), rgba(81, 243, 255, .1));
}

#gymCard {
    background: linear-gradient(90deg, rgba(81, 243, 255, 1), rgba(116, 167, 255, .1));
}

#workCard {
    background: linear-gradient(90deg, rgba(116, 167, 255, 1), rgba(127, 106, 255, .1));
}

#travelCard {
    background: linear-gradient(90deg, rgba(127, 106, 255, 1), rgba(191, 81, 255, .1));
}

#datingCard {
    background: linear-gradient(90deg, rgba(191, 81, 255, 1), rgba(255, 78, 78, .1));
}

#celebrityCard {
    background: linear-gradient(90deg, rgba(255, 78, 78, 1), rgba(255, 130, 78, .1));
}

.benefitCardInner {
    margin: 0px 5px;
    padding-bottom: 30px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, .4);
    border-radius: 20px;
}

#goingOutCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(115, 255, 184), rgb(81, 243, 255));
}

#gymCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(81, 243, 255), rgb(116, 167, 255));
}

#workCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(116, 167, 255), rgb(127, 106, 255));
}

#travelCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(127, 106, 255), rgb(191, 81, 255));
}

#datingCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(191, 81, 255), rgb(255, 78, 78));
}

#celebrityCard .benefitCardInner {
    background: linear-gradient(90deg, rgb(255, 78, 78), rgb(255, 130, 78));
}

.benefitImgContainer {
    position: relative;
}

.benefitImgContainer img {
    max-width: 100%;
    border-radius: 20px 20px 0px 0px;
}

.benefitImgOverlay {
    width: 100%;
    height: 100%;
    position:absolute;
    top: 0px;
    left: 0px;
    border-radius: 20px 20px 0px 0px;
    z-index: 2;
}

.benefitImgHeadingContainer {
    width: fit-content;
    margin: 0px auto;
    padding: 0px 10px;
    position: absolute;
    bottom: 20px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 5px;
    z-index: 3;
}

#goingOutCard .benefitImgOverlay {
    background: linear-gradient( rgba(115, 255, 184, .6), rgba(0, 0, 0, .4));
}

#gymCard .benefitImgOverlay {
    background: linear-gradient( rgba(81, 243, 255, .6), rgba(0, 0, 0, .4));
}

#workCard .benefitImgOverlay {
    background: linear-gradient( rgba(116, 167, 255, .6), rgba(0, 0, 0, .4));
}

#travelCard .benefitImgOverlay {
    background: linear-gradient( rgba(127, 106, 255, .6), rgba(0, 0, 0, .4));
}

#datingCard .benefitImgOverlay {
    background: linear-gradient( rgba(191, 81, 255, .6), rgba(0, 0, 0, .4));
}

#celebrityCard .benefitImgOverlay {
    background: linear-gradient( rgba(255, 78, 78, .6), rgba(0, 0, 0, .4));
}

#goingOutCard .benefitImgHeadingContainer h3 {
    color: #73FFB8;
}

#gymCard .benefitImgHeadingContainer h3 {
    color: #51F3FF;
}

#workCard .benefitImgHeadingContainer h3 {
    color: #74A7FF;
}

#travelCard .benefitImgHeadingContainer h3 {
    color: #7F6AFF;
}

#datingCard .benefitImgHeadingContainer h3 {
    color: #BF51FF;
}

#celebrityCard .benefitImgHeadingContainer h3 {
    color: #FF4E4E;
}

.flavorText {
    padding: 20px;
    background-color: #333333;
}

.flavorText p {
    color: #bdbdbd;
    margin-bottom: 20px;
}

#finalCall {
    margin-top: 20px;
    margin-bottom: 10px;
    color:#333333;
    text-align: center;
    font-weight: 700;
}

.centerBtn {
    margin: auto;
}

#roundPath2 {
    margin-top: 50px;
    position: relative;
    top: 10px;
    left: 0px;
}


/*************************************************************
****	Main Area ("About" section)
*************************************************************/


.aboutSection {
    padding-top: 20px;
    padding-bottom: 50px;
    background-color: #333333;
}

.aboutBlock {
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(../images/jh-symbol.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.aboutBlock h2  {
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-weight: 700;
}

.aboutSection p {
    margin: 20px auto;
    padding-left: 20px;
    padding-right: 20px;
    color: #bdbdbd;
    max-width: 1300px;
}

.highlighted {
    font-weight: 700;
    color: #73FFB8;
}

/*************************************************************
****	Main Area ("Contact" section)
*************************************************************/

#contactSection {
    text-align: center;
    background-color: #fff;
    padding-bottom: 50px;
}

#contactSection h2 {
  color: #000;
  margin: 20px 10px;
  text-align: center;
  font-weight: 700;
}

#contactSection p,
#contactSection a {
    color: #4C4C4C;
}

#contactSection a {
    color: #000;
    display: block;
    font-weight: 700;
}

.contactBlock {
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-image: url(../images/envelope-solid.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}



/*************************************************************
****	Footer
*************************************************************/

footer {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #73FFB8;
}

footer p {
    text-align: center;
    color: #4C4C4C;
    font-size: 14px;
    font-weight: 700;
}

#footerBtnContainer {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerBtn, .footerBtnLayer1, .footerBtnLayer2 {
    width: 80px;
    height: 35px;
    border-radius: 5px;
}

.footerBtnLayer1, .footerBtnLayer2 {
    position: absolute;
    top: 0px;
    left: 0px;
}

.footerBtn {
    margin: 0px 10px;
    position: relative;
    display: block;
}

.footerBtnLayer1 {
    background-color: #4C4C4C;
    opacity: .15;
    box-shadow: inset 2px 2px 3px rgb(255, 255, 255);
    z-index: 7;
}

.footerBtnLayer2 {
    font-size: 14px;
    font-weight: 700;
    color: #73FFB8;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4C4C4C;
    box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .5), 1px 1px 2px rgba(0, 0, 0, .16);
    z-index: 6;
}


/*************************************************************
****	Non-Mobile Styles
*************************************************************/


#introSectionNM {
    display: none;
}

#introBlockWrapperNM {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


/*************************************************************
****	Media Queries
*************************************************************/

@media (max-width: 340px) {
    #ringContainer {
        display: none;
    }
}

@media (min-width: 340px) {
    .ringContainer {
        margin-left: 50px;
    }
}

@media (min-width: 520px) {
    #demoContainer {
        max-width: 500px;
        margin: 0px auto;
    }
}

@media (min-width: 700px) {
   #introSection {
		display: none;
	}

    #introSectionNM {
        display: block;
    }

    .introBlock {
        width: 100%;
        margin-left: 30px;
    }

    .mainBtn {
        margin-top: 30px;
    }

    .ringContainer {
        width: 200px;
        height: 200px;
        margin-right: 50px;
    }

    .anglePath1 {
        display: none;
    }
    
    #howBackground h2,
    #benefitsBlock h2,
    .aboutBlock h2,
    #contactSection h2,
    #finalCall {
        font-size: 25px;
    }

    .aboutSection p {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 820px) {
    .ringContainer {
        width: 260px;
        height: 260px;
        margin-right: 50px;
    }

    .benefitCard {
        margin: 0px 15px 30px 15px;
    }
}

@media (min-width: 860px) {
    .aboutSection p,
    #contactSection p,
    #contactSection a {
        font-size: 20px;
    }

    .flavorText {
        min-height: 226px;
    }
}

@media (min-width: 900px) {
    .introBlock h1 {
        font-size: 45px;
    }

    .introBlock h2 {
        font-size: 30px;
    }

    .introBlock p {
        font-size: 20px;
    }

    .mainBtn, .mainBtnLayer1, .mainBtnShadow {
        width: 240px;
    }

    .mainBtnLayer1 {
        font-size: 20px;
    }

    .ringContainer {
        width: 350px;
        height: 350px;
    }

    .aboutBlock {
        margin-bottom: 50px;
    }

    #howBackground h2,
    #benefitsBlock h2,
    .aboutBlock h2,
    #contactSection h2,
    #finalCall {
        font-size: 45px;
    }

    #howBlock h2 {
        font-size: 30px;
    }

    #demoContainer p {
        font-size: 20px;
    }

    #demoTextBlock {
        width: 300px;
        min-height: 70px;
    }

    #benefitsBlockText {
        font-size: 30px;
    }

    #contactSection {
        padding-bottom: 100px;
    }

    .contactBlock {
        margin-top: 50px;
    }
}

@media (min-width: 1020px) {
    #introBlockWrapperNM {
        justify-content: space-between;
    }
}

@media (min-width: 1300px) {
    #mobileHeader {
		display: none;
	}

    #headerNM {
        display: flex;
    }

    .introBackground {
        padding-top: 110px;
    }

    .introBlock {
        margin-bottom: 0px;
        padding: 40px 70px 70px 70px;
    }

    #howBackground {
        padding: 0px;
    }

    #howCard {
        background-color: #333;
        width: 900px;
        padding-top: 50px;
        padding-bottom: 50px;
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 300px;
        z-index: 5;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .16);
        border-radius: 10px;
    }

    #howBlock {
        background-image: url(../images/jh-symbol.svg);
    }

    #howBlock h2 {
        color: #fff;
    }

    #howCardShadow {
        display: block;
    }

    .rendering,
    .anglePath2 {
        display: none;
    }

    #mainPhoto {
        display: none;
    }

    #mainPhotoNM {
        display: block;
    }

    #mainPhotoFilter {
        /*display: none;*/
        background-color: #000;
        opacity: 40%;
    }

    #curvePath1 {
        z-index: 6;
        transform: scaleX(-1);
        display: none;
    }

    #curvePath2 {
        display: block;
    }

    #benefitsSection {
        padding-top: 350px;
    }
}