/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container,
	.container-fluid {
		max-width:978px;
		width:95.5%;
	}
	
	/* GENERAL STYLES */
	h1 {
		font-size: 35px;
		line-height: 45px;
	}
	h2 {
		font-size: 30px;
		line-height: 40px;
		margin-bottom: 30px;
	}
	h2 span.script {
		font-size: 42px;
	}
	h3 {
		font-size: 20px;
		line-height: 30px;
	}
	h4 {
		font-size: 20px;
		margin-bottom: 4px;
	}
	p {
		font-size: 15px;
		margin-bottom: 20px;
	}

	/* NAVIGATION */
	nav .nav-link {
		font-size: 16px;
	}

	/* BANNER AREA */
	.banner {
		height: 600px;
		margin-top: 56px;
	}
	.banner .container {
		max-width: 978px;
	}
	.banner .container .banner-text {
		max-width: 65.644171779141104%;
		top: 400px;
	}
	.banner-text span.script {
		font-size: 60px;
	}

	/* INTRO SECTION */
	#intro {
		padding: 100px 0;
	}
	.intro-text {
		font-size: 16px;
		line-height: 28px;
		width: 65.644171779141104%;
	}

	/* DEFINITIONS SECTION */
	.definition-cards {
		display: flex;
	}
	.card {
		padding: 40px 35px;
		width: 48.466257668711656%;
	}
	.card:first-of-type {
		margin-right: 30px;
	}
	.card h2 {
		margin-bottom: 20px;
	}
	.card p,
	.card ul {
		font-size: 15px;
		line-height: 25px;
	}

	/* TESTIMONIAL SLIDER */
	#testimonials {
		padding: 100px;
	}
	.slick-slide {
      margin: 0px 15px;
    }
	.testimonial {
		padding: 30px 100px 40px 60px;
		width: 642px;
		/* NOTE: The testimonials have to be a pixel width otherwise the entire slider breaks */
	}
	.testimonial:before {
		font-size: 60px;
	}
	.testimonial p.story {
		padding:  10px 0 0 40px;
	}
	.slick-slide {
		min-height: 375px !important;
	}

	/* FORM SECTION */
	#form {
		padding: 100px 0;
	}
	#form .form-intro {
		width: 65.644171779141104%;
		margin-bottom: 50px;
		font-size: 15px;
		line-height: 25px;
	}
	#form label {
		font-size: 15px;
	}
	#form .field {
		width: 27.407407407407407%;
		margin: 0 30px 20px 0;
	}
	#form .field p {
		font-size: 15px;
		margin-bottom: 5px;
	}
	#form input[type="text"],
	#form input[type="email"] {
		font-size: 15px;
	}
	#form .step-container {
		height: 375px;
		/* NOTE: I have to have a set height on this element so the screen height stays the same size as you click through the steps and the pagination stays in the same spot. */
	}
	#form .progress-container {
		padding-left: 84px;
	}
	.slide-step {
		margin-bottom: 40px;
	}
	#form .slide-6 .mb-60 {
		margin-bottom: 60px;
	}
	#form .slide-6 .message {
		width: 90%;
	}

	/* FOOTER */
	footer .footer-container {
		display: flex;
		align-items: center;
	}
	footer .footer-container .footer-heading {
		font-size: 34px;
	}
	footer p {
		font-size: 15px;
		margin: 0;
	}
	footer .footer-flex {
		display: flex;
		width: 65.644171779141104%;
		flex-basis: auto;
		align-items: center;
	}
	footer .share-desc {
		flex-basis: 45%;
		padding: 0 5% 0 0;
	}
	footer form {
		flex-basis: 50%;
		align-items: center;
	}
	footer form .form-field-group {
		align-items: flex-end;
		display: flex;
	}
	footer form .form-field-group .field {
		margin-right: 20px;
		flex-grow: 1;
	}
	input#shareEmail {
		width: 100%;
	}
	.sending-share-email {
		width: 50%;
	}
	.sending-share-email .loading {
		margin: 0px 0 0 -20px;
	}
	.share-email-confirmation .flex {
		align-items: center;
	}
	.share-email-confirmation p {
		margin: 0 20px 0 0;
	}
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){
	.container,
	.container-fluid {
		width: 93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
		max-width: 93.75%;
		margin: 0 auto;
	}

	/* GENERAL STYLES */
	h1 {
		font-size: 28px;
		line-height: 38px;
	}
	h2 {
		font-size: 25px;
		line-height: 40px;
		margin-bottom: 30px;
	}
	h2 span.script {
		font-size: 35px;
		line-height: 35px;
	}
	h3 {
		font-size: 18px;
		line-height: 24px;
	}
	h4 {
		font-size: 20px;
	}
	p {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.padding-heading {
		width: 82.777777777777778%;
		margin: 0 auto;
	}

	/* NAVIGATION */
	nav .nav-link {
		font-size: 15px;
	}

	/* BANNER AREA */
	.banner {
		background-image: url(../images/banner-img-t.jpg);
		background-position: 75% center;
		height: 400px;
		margin-top: 54px;
	}
	.banner .container {
		margin: 0 auto;
		width: 82.777777777777778%;
	}
	.banner .container .banner-text {
		max-width: 61.458333333333333%;
		top: 250px;
	}
	.banner-text span.script {
		font-size: 50px;
		line-height: 60px;
	}

	/* INTRO SECTION */
	#intro {
		padding: 70px 0;
	}
	.intro-text {
		font-size: 15px;
		line-height: 26px;
		width: 77.604166666666667%;
	}

	/* DEFINITIONS SECTION */
	#definitions {
		padding: 70px 0;
	}
	.definition-cards {
		display: flex;
	}
	.card {
		padding: 30px 25px;
		width: 48.333333333333333%;
	}
	.card:first-of-type {
		margin-right: 30px;
	}
	.card h2 {
		margin-bottom: 15px;
	}
	.card p,
	.card ul {
		font-size: 15px;
		line-height: 25px;
	}

	/* TESTIMONIAL SLIDER */
	#testimonials {
		padding: 70px 0;
	}
	.slick-slide {
		margin: 0px 12px;
	}
	.slick-slider {
		width: 93.75% !important;
		margin: 0 auto !important;
	}
	.slick-list {
		padding: 45px 50px !important;
	}
	.slick-prev {
	    top: 102% !important;
	}
	.slick-next {
	    top: 102% !important;
	}
	.slick-dots {
		bottom: -15px !important;
	}
	.testimonial {
		padding: 20px 62px 35px 38px;
		width: 596px;
		/* NOTE: The testimonials have to be a pixel width otherwise the entire slider breaks */
	}
	.testimonial:before {
		font-size: 55px;
	}
	.testimonial p.story {
		padding: 10px 0 0 24px;
	}
	.slick-slide {
		min-height: 350px !important;
	}

	/* FORM SECTION */
	#form {
		padding: 70px 0;
	}
	#form .form-intro {
		width: 74.166666666666667%;
		margin-bottom: 50px;
		font-size: 15px;
		line-height: 25px;
	}
	#form label {
		font-size: 15px;
	}
	#form .field {
		width: 27.333%;
		margin: 0 24px 20px 0;
	}
	#form .field p {
		font-size: 15px;
		margin-bottom: 5px;
	}
	#form input[type="text"],
	#form input[type="email"] {
		font-size: 15px;
	}
	#form .step-container {
		height: 395px;
		/* NOTE: I have to have a set height on this element so the screen height stays the same size as you click through the steps and the pagination stays in the same spot. */
	}
	#form .progress-container {
		padding-left: 0px;
		width: 82.777777777777778%;
		margin: 0 auto;
	}
	.slide-step {
		margin-bottom: 40px;
	}
	.slide {
		padding: 40px 0;
		width: 82.777777777777778%;
		margin: 0 auto;
	}
	#form .slide-6 .mb-60 {
		margin-bottom: 60px;
	}
	#form .slide-6 .message {
		width: 100%;
	}

	/* FOOTER */
	footer .footer-container {
		display: flex;
		align-items: center;
	}
	footer .footer-container .footer-heading {
		font-size: 30px;
	}
	footer p {
		font-size: 15px;
	}
	footer .footer-flex {
		display: block;
		width: 65.555555555555556%;
	}
	footer .share-desc {
		padding: 0;
		margin-bottom: 10px;
	}
	footer .share-desc p {
		margin-bottom: 0;
	}
	footer form .form-field-group {
		align-items: flex-end;
		display: flex;
	}
	footer form .form-field-group .field {
		margin-right: 20px;
		flex-grow: 1;
	}
	footer form .form-field-group .field p {
		margin-bottom: 5px;
	}
	input#shareEmail {
		width: 100%;
	}
	.sending-share-email {
		width: 100%;
	}
	.sending-share-email .loading {
		margin: 20px 0 0 -20px;
	}
	.share-email-confirmation {
		padding-top: 20px;
	}
	.share-email-confirmation .flex {
		align-items: center;
	}
	.share-email-confirmation p {
		margin: 0 20px 0 0;
	}
}


/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	.container,
	.container-fluid {
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
		max-width: 87.5%;
		margin: 0 auto;
	}

	/* GENERAL STYLES */
	h1 {
		font-size: 24px;
		line-height: 32px;
	}
	h2 {
		font-size: 25px;
		line-height: 40px;
		margin-bottom: 30px;
	}
	h2 span.script {
		font-size: 35px;
		line-height: 35px;
	}
	h3 {
		font-size: 18px;
		line-height: 24px;
	}
	p {
		font-size: 14px;
		margin-bottom: 20px;
	}
	.padding-heading {
		width: 100%;
		margin: 0 auto;
	}

	/* NAVIGATION */
	nav .nav-link {
		font-size: 15px;
	}
	.navbar-dark .navbar-toggler {
		border: none !important;
	}
	.navbar-toggler {
		padding: 0;
	}
	#navbarSupportedContent {
		padding: 40px 0;
	}

	#navbarSupportedContent ul li {
		padding: 20px 0;
	}
	#navbarSupportedContent .nav-link {
		padding: 0;
		text-align: right;
		font-size: 16px;
	}
	.navbar-toggler-icon {
		background-image: none !important;
		width: auto !important;
		height: auto !important;
	}
	.navbar-toggler-icon:before {
		font-family: "Font Awesome 5 Free";
    	font-weight: 900;
    	color: #fff;
		content: "\f0c9";
		font-size: 20px;
		transition: .25s all ease-in-out;
	}
	.navbar-toggler-icon:hover:before {
		color: #7ec7e4;
		transition: .25s all ease-in-out;
	}
	.navbar-collapse {
		padding: 40px 0;
	}
	.collapsing {
		height: 0 !important;
		padding: 0 !important;
	}

	/* BANNER AREA */
	.banner {
		background-image: url(../images/banner-img-m.jpg);
		height: 400px;
		margin-top: 46px;
	}
	.banner .container {
		margin: 0 auto;
		width: 87.5%;
	}
	.banner .container .banner-text {
		max-width: 87.5%;
		top: 280px;
	}
	.banner-text span.script {
		font-size: 45px;
		line-height: 55px;
	}

	/* INTRO SECTION */
	#intro {
		padding: 50px 0;
	}
	.intro-text {
		font-size: 15px;
		line-height: 26px;
		width: 77.604166666666667%;
	}

	/* DEFINITIONS SECTION */
	#definitions {
		padding: 100px 0;
		background-position: 64% center;
	}
	.definition-cards {
		display: block;
	}
	.card {
		padding: 30px 25px;
		width: 100%;
	}
	.card:first-of-type {
		margin: 0 0 30px;
	}
	.card h2 {
		margin-bottom: 15px;
		text-align: center;
	}
	.card p,
	.card ul {
		font-size: 14px;
		line-height: 25px;
	}

	/* TESTIMONIAL SLIDER */
	#testimonials {
		padding: 50px 0;
	}
	.slick-slide {
		margin: 0px 12px;
		min-height: 410px !important;
	}
	.slick-slider {
		width: 93.75% !important;
		margin: 0 auto !important;
	}
	.slick-list {
		padding: 45px 50px !important;
	}
	.slick-prev {
	    top: 99.5% !important;
	}
	.slick-next {
	    top: 99.5% !important;
	}
	.slick-dots {
		bottom: -5px !important;
	}
	.testimonial {
		padding: 20px 62px 35px 38px;
		width: 400px;
		/* NOTE: The testimonials have to be a pixel width otherwise the entire slider breaks */
	}
	.testimonial:before {
		font-size: 55px;
	}
	.testimonial p.story {
		padding: 10px 0 0 24px;
	}

	/* FORM SECTION */
	#form {
		padding: 50px 0;
	}
	#form .form-intro {
		width: 100%;
		margin-bottom: 50px;
		font-size: 14px;
		line-height: 24px;
	}
	#form label {
		font-size: 14px;
	}
	#form .field {
		width: 100%;
		margin: 0 24px 20px 0;
	}
	#form .field p {
		font-size: 14px;
		margin-bottom: 5px;
	}
	#form input[type="text"],
	#form input[type="email"] {
		font-size: 14px;
	}
	#form .step-container {
		height: auto;
	}
	#form .progress-container {
		padding-left: 0px;
		width: 87.5%;
		margin: 0 auto;
	}
	#form .progress {
		width: 100%;
	}
	.slide-step {
		margin-bottom: 40px;
	}
	.slide-0 {
		padding: 40px 0;
		margin: 0 auto;
	}
	.slide-1,
	.slide-2,
	.slide-3,
	.slide-4,
	.slide-5,
	.slide-6 {
		padding: 40px 0;
		width: 87.5%;
		margin: 0 auto;
	}
	#form .slide-6 .form-field-group .field {
		margin-bottom: 30px;
	}
	#form .slide-6 .mb-60 {
		margin: 0 0 30px 0;
	}
	#form .slide-6 .message {
		width: 100%;
	}

	/* FOOTER */
	footer .footer-container {
		display: block;
	}
	footer .footer-container .footer-heading {
		font-size: 38px;
		text-align: center;
		margin-bottom: 15px;
	}
	footer p {
		font-size: 14px;
	}
	footer .footer-flex {
		display: block;
		width: 75%;
		margin: 0 auto;
	}
	footer .share-desc {
		padding: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	footer .share-desc p {
		margin-bottom: 0;
	}
	footer form {
		flex-basis: 50%;
		align-items: center;
	}
	footer form .form-field-group {
		align-items: flex-end;
		display: flex;
	}
	footer form .form-field-group .field {
		margin-right: 20px;
		flex-grow: 1;
	}
	footer form .form-field-group .field p {
		margin-bottom: 5px;
	}
	input#shareEmail {
		width: 100%;
	}
	.sending-share-email {
		width: 100%;
	}
	.sending-share-email .loading {
		margin: 20px 0 0 -20px;
	}
	.share-email-confirmation {
		padding-top: 20px;
	}
	.share-email-confirmation .flex {
		align-items: center;
		justify-content: center;
	}
	.share-email-confirmation p {
		margin: 0 20px 0 0;
	}
}

@media only screen and (max-width: 620px){
	.card .row {
		display: block;
	}
}

@media only screen and (max-width: 520px){
	footer .footer-flex {
		display: block;
		width: 100%;
	}
}

@media only screen and (max-width: 404px){
	.banner .container .banner-text {
		top: 210px;
	}
	.testimonial {
		width: 280px;
	}
	.slick-slide {
		min-height: 550px !important;
	}
	footer form .form-field-group {
		display: block;
	}
	footer form .form-field-group .field {
		margin: 0 0 20px;
	}
	footer form .form-field-group .btn {
		margin: 0 auto;
	}
}