/* CSS specific to the bs4/main template */
body {
	background-color: #E4F0FB;
}

.main-layout {
	position: relative;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
}

.msb-top-navbar {
	max-width: 1440px !important;
}

/* Custom Text */
.sm-header {
	color: #2474B7;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.75px;
}
@media (min-width: 768px) {
	.sm-header { font-size: 0.9rem; letter-spacing: 0.94px;}
}
.md-header {
	/* This barely passes WCAG!!! */
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 1px;
}
.p-2-5 { padding: 0.75rem !important; }


.swish-area {
	background-color: #f5f9fb;
	padding: 0;
	background-image: url('../../shared/images/bg/bg-992-white-swish.png');
	background-position: left top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
@media (min-width: 992px) {
	.swish-area {
		background-image: url('../../shared/images/bg/bg-1440-white-swish.png');
	}
}

/* Style for smallest device first!
   section-1 - top hero section */
.section-1 {
	background-color: #f5f9fb;
	background-image: url('../main/images/bg/bg-phone-top.jpg');
	background-position: center bottom;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.section-1 { min-height: 500px; }
.section-1-content { padding-left: 5vw; padding-top: 2rem; } /*border: 1px solid lime;*/
.section-1 h1 { font-size: 2.5rem; font-weight: 300 !important; }
.section-1-text { font-size: 1rem; } /*border: 1px solid red; */
.section-1-options .btn, .section-1-options { font-size: 0.8rem; }

/* Show at [lg] and above*/
.apps-section {
	font-size: 0.9rem;

	/* section-1 (parent) must be position-relative */
	position: absolute;
	left: 2rem;
	bottom: 3.5rem;
}
.apps-section .section-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: #2D2D2D;
}
.apps-section .section-body {
	color: #2474B7;
	font-size: 0.9rem;
	font-weight: 700;
}
.apps-section .media-title {
	font-size: 0.8rem;
	font-weight: 600;
}
.apps-section .badge {
	font-size: 1rem;
	padding: 0.75rem;
}

@media (min-width: 375px) {
	.section-1 { min-height: 600px; }
	.section-1-content { padding-left: 7vw; padding-top: 2rem; }
	.section-1-header { width: 100%; max-width: 75vw; }
	.section-1 h1 { font-size: 3.25rem; }
	.section-1-text { font-size: 1.25rem; }
	.section-1-options .btn, .section-1-options { font-size: 1rem; }
}
@media (min-width: 400px) {
	.section-1-content { padding-left: 0; margin-left: 10vw; max-width: 70vw;  }
}
@media (min-width: 576px) {
	.section-1 {
		background-image: url('../main/images/bg/bg-768-top.jpg');
	    background-position: center top;
	    background-size: 768px 440px;
	    background-repeat: no-repeat;

	    min-height: 440px;
	}
	.section-1-content { max-width: 50%; padding-left: 0; margin-left: 2rem; padding-top: 2rem; }
	.section-1 h1 { font-size: 2.75rem; }
	.section-1-text { font-size: 1rem; max-width: 85%; }
	.section-1-options .btn, .section-1-options { font-size: 0.9rem; }
}
@media (min-width: 768px) {
	.section-1 {
		background-image: url('../main/images/bg/bg-992-top.jpg');
	    background-position: right top;
	    background-size: 992px 568px;
	    background-repeat: no-repeat;

	    min-height: 568px;
	}
	.section-1-content { max-width: 50%; margin-left: 1rem; padding-top: 2rem; }
	.section-1 h1 { font-size: 3rem; }
	.section-1-text { max-width: 75%; }
}
@media (min-width: 800px) {
	.section-1-content { max-width: 50%; margin-left: 1rem; padding-top: 2rem; }
	.section-1 h1 { font-size: 3.5rem; }
	.section-1-text { max-width: 75%; }
}
@media (min-width: 950px) {
	.section-1-content { max-width: 40%; margin-left: 2rem; }
}
@media (min-width: 992px) {
	.section-1 {
		background-image: url('../main/images/bg/bg-1200-top.jpg');
	    background-position: right top;
	    background-size: 1200px 688px;
	    background-repeat: no-repeat;

	    min-height: 688px;
	}
	.section-1-content { max-width: 45%; margin-left: 1rem; padding-top: 3rem; }
	.section-1 h1 { font-size: 4rem; }
	.section-1-text { max-width: 80%; }
	.section-1-options .btn, .section-1-options { font-size: 1rem; }

	.apps-section { left: 0.65rem; bottom: 6rem; }
	.apps-section .section-body { font-size: 1rem; }
}
@media (min-width: 1200px) {
	.section-1 {
		background-image: url('../main/images/bg/bg-1440-top.jpg');
	    background-position: right top;
	    background-size: 1440px 825px;
	    background-repeat: no-repeat;

	    min-height: 825px;
	}
	.section-1-content { max-width: 40%; margin-left: 5vw; padding-top: 4rem;  }
	.section-1 h1 { font-size: 4.5rem; }
	.section-1-text { font-size: 1.15rem; max-width: 80%; }

	.apps-section { left: 3rem; bottom: 9rem; }
}
@media (min-width: 1300px) {
	.apps-section { left: 4rem; bottom: 8rem; }
}
@media (min-width: 1440px) {
	.section-1-content { max-width: 35%; margin-left: 8vw; padding-top: 4rem; }
}
@media (min-width: 1500px) {
	.apps-section { left: 8rem; bottom: 7rem; }
}

/* section-2 - stacked blue area */
.section-2 {
	background-color: #2979BD;
	background-image: url('../../shared/images/bg/bg-phone-blue.jpg');
	background-position: center top;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	min-height: 1050px;

	font-size: 1rem;
}
.section-2 h1 { font-size: 1.85rem; font-weight: 300 !important; }
.section-2 h2 { font-size: 1.25rem; font-weight: 500; }
.section-2 .card-text { font-size: 1rem; max-width: 85%; }
.section-2 a { font-size: 1rem; font-weight: 600; }
@media (min-width: 375px) {
	.section-2 { padding-top: 2rem; }
	.section-2 h1 { font-size: 2rem; }
}
@media (min-width: 576px) {
	.section-2 { font-size: 1.25rem; min-height: 1150px; }
	.section-2 h1 { font-size: 2.15rem; }
	.section-2 h2 { font-size: 1.75rem; }
}
@media (min-width: 768px) {
	.section-2 {
		background-position: center top;
		background-size: 100% 100%;
		min-height: 800px;
		padding-top: 3rem;
	}
	.section-2 h1 { font-size: 2.5rem; }
}
@media (min-width: 992px) {
	.section-2 {
		background-image: url('../../shared/images/bg/bg-1200-blue.jpg');
		background-size: 100% 100%;
		min-height: 750px;
	}
}
@media (min-width: 1200px) {
	.section-2 .card-text {max-width: 75%; }
}

/* section-3 - Go mobile... area */
.section-3 h1 { font-size: 2.5rem; }
@media (min-width: 992px) {
	.section-3 { font-size: 1.15rem; }
	.section-3 h1 { font-size: 3rem; }
}
@media (min-width: 992px) {
	.section-3 h1 { max-width: 75%; }
}

/* section-4 - More To Love Area */
.section-4 {
	padding-top: 6rem;
	padding-bottom: 6rem;
	font-size: 1.15em;
}
.section-4 h1 { font-size: 2rem; font-weight: 300 !important; }
.section-4 h2 { font-size: 1.5rem; font-weight: 500 !important; }
@media (min-width: 768px) {
	.section-4 { padding-top: 15rem; }
	.section-4 h1 { font-size: 3rem; }
}
@media (min-width: 992px) {
	.section-4 h1 { max-width: 50%; }
}

/* section-5 - Quotes Area */
.section-5 {
	font-size: 1.15rem;
	background-color: #f5f9fb;
	background-image: url('../../shared/images/bg/bg-1200-top-white-curve.png');
	background-position: center bottom;
	background-size: 100%;
	background-repeat: no-repeat;
}
.quote-container {
	margin-left: auto;
	margin-right: auto;
	padding: 4rem 1rem 2rem 1rem;
	background-color: #ffffff;

	border-top: 5px solid #2474B7 !important;
	border-top: 5px solid var(--primary) !important;
	border-radius: 0.2rem !important;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
/* Quotes Carousel */
.quote-carousel .carousel-item p {
	min-height: 215px;
	color: #777;
	padding-bottom: 3rem;
	font-size: 1rem;
	line-height: 1.5;
}
.quote-carousel {
	text-align: center;
}
.quote-carousel .carousel-indicators li {
	background-color: #BED8E4;
	width: 12px;
	height: 12px;
	margin-right: 10px;
	border-radius: 50%;
}
.quote-carousel .carousel-indicators li.active {
	background-color: #2474B7;
	background-color: var(--primary);
}
@media (min-width: 576px) {
	quote-carousel .carousel-item p {
		min-height: 250px;
	}
}
@media (min-width: 768px) {
	.section-5 { font-size: 1.25rem; padding-bottom: 6rem; }
	.quote-carousel .carousel-item p {
		min-height: 250px;
		font-size: 1.5rem;
	}
}
@media (min-width: 992px) {
	.quote-container {
		max-width: 75%;
		padding: 4rem 5rem 2rem 5rem;
	}
}


/* section-6 - blog */
.section-6 {
	font-size: 1em;
	font-weight: 500;

	background-color: #ffffff;

	padding-top: 4rem;
	padding-bottom: 4rem;
}

/* section-7 - Get Started Area */
.section-7 {
	font-size: 1rem;

	background-color: #2979BD;
	background-image: url('../../shared/images/bg/bg-768-top-blue-curve.png');
	background-position: left top;
	background-size: 100%;
	background-repeat: no-repeat;

	padding-top: 8rem;
	padding-bottom: 2rem;
}
.section-7 h1 { font-size: 2.25rem; font-weight: 300 !important; }
.section-7 h2 { font-size: 1.5rem; font-weight: 500; }
.section-7 .card-text { font-size: 1.15rem; font-weight: 300; }

@media (min-width: 768px) {
	.section-7 h1 { font-size: 2.5rem; }
	.section-7 h2 { font-size: 1.5rem; }
	.section-7 { padding-top: 10rem; }
	.section-7 .card-text { font-size: 1rem; font-weight: 400; max-width: 75%; }
	.section-7 .btn { background-color: transparent; }
}
@media (min-width: 992px) {
	.section-7 {
		background-image: url('../../shared/images/bg/bg-1440-top-blue-curve.png');
		font-size: 1.25rem;
		padding-top: 12rem;
	}
}


/* Custom Cards */
.card.card-salmon {
	border-left: 5px solid #FFBDBD !important;
}
.card.card-purple {
	border-left: 5px solid #DEC4FB !important;
}
.card.card-yellow {
	border-left: 5px solid #FFD98F !important;
}
.card.card-blue {
	color: #ffffff;
	background-color: transparent;
	border: 7px solid rgba(175,208,234,0.11); }
	.card.card-blue:hover, .card.card-blue:focus {
		color: #2474B7;
		background-color: #ffffff;
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	}
	.card.card-blue .card-icon {  padding: 0.75rem; }
	.card.card-blue:hover .card-icon, .card.card-blue:focus .card-icon {
		color: #ffffff;
		background-color: #2474B7;
		border-radius: 50%;
	}
	.card.card-blue a { color: #ffffff; }
	.card.card-blue:hover a, .card.card-blue:focus a { color: #2474B7; }
	.card.card-blue:hover a:hover, .card.card-blue:focus a:focus { color: #174b77; }
	.card.card-blue .btn-outline-primary { color: #2474B7; background-color: #ffffff; }
	.card.card-blue:hover .btn-outline-primary:hover { color: #fff; background-color: #2474B7; }

/* Custom Badges */
.badge-light-blue {
	letter-spacing: -1px;
	color: #2474B7;
	background-color: #EBF7FE;
	border: 1px solid #EBF7FE;
	border-radius: 6px; }
	a.badge-light-blue:hover, a.badge-light-blue:focus {
		background-color: #277FC2; }
	a.badge-light-blue:focus, a.badge-light-blue.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #277FC2; }

.badge-steel-blue {
	background-color: #B7D6EE;
	border: 1px solid #B7D6EE;
	border-radius: 6px; }
	a.badge-steel-blue:hover, a.badge-steel-blue:focus {
		background-color: #B0C4DE; }
	a.badge-steel-blue:focus, a.badge-steel-blue.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #B0C4DE; }

.badge-light-green {
	background-color: #BCEBC2;
	border: 1px solid #BCEBC2;
	border-radius: 6px; }
	a.badge-light-green:hover, a.badge-light-green:focus {
		background-color: #89DC94; }
	a.badge-light-green:focus, a.badge-light-green.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #89DC94; }

.badge-salmon {
	background-color: #FFBDBD;
	border: 1px solid #FFBDBD;
	border-radius: 6px; }
	a.badge-salmon:hover, a.badge-salmon:focus {
		background-color: #FF7777; }
	a.badge-salmon:focus, a.badge-salmon.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #FF7777; }

.badge-purple {
	background-color: #E8CEFF;
	border: 1px solid #E8CEFF;
	border-radius: 6px; }
	a.badge-purple:hover, a.badge-purple:focus {
		background-color: #C482FF; }
	a.badge-purple:focus, a.badge-purple.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #C482FF; }

.badge-yellow {
	background-color: #FFD98F;
	border: 1px solid #FFD98F;
	border-radius: 6px; }
	a.badge-yellow:hover, a.badge-yellow:focus {
		background-color: #FFB62F; }
	a.badge-yellow:focus, a.badge-yellow.focus {
		outline: 0;
		box-shadow: 0 0 0 0.2rem #FFB62F; }


/* Particles */
.particle-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}