#tmpl-s5 {
	#solutionsMenu {
		margin: 30px -15px 20px -15px;
		width: calc(100% + 45px);
		box-sizing: border-box;

		.inner {
			display:flex;
			flex-wrap:wrap;

			.i {
				display:block;
				flex:0 0 calc(50% - 15px);
				background: var(--s5-bg-color-3);
				border:var(--s5-border);
				border-radius:5px;
				margin:0 15px 25px 0;
				padding:15px 15px 38px 15px;
				position:relative;
				min-height: 250px;
				box-sizing: border-box;

				.status-lbl {
					position:absolute;
					top:-10px;
					left:15px;
					font-size:.80rem;
					font-weight:500;
					background: var(--s5-bg-color);
					border:var(--s5-border);
					border-radius:6px;
					height:20px;
					width:auto;
					padding:0 6px;
					z-index:1;
					text-transform:uppercase;
				}
				&.is-active {
					border: 1px solid var(--s5-green-2);
					box-shadow: 0 0px 1px 3px var(--s5-green-1);
					.status-lbl {
						color:var(--s5-green-2);
						border: 1px solid var(--s5-green-2);
					}
				}
				&.is-avail .status-lbl {
					color:var(--s5-body);
				}
				&.has-req .status-lbl {
					color:var(--s5-red-2);
				}
				&.has-pad .icon img {
					padding:5px;
					width:34px;
				}
				&.is-soon, &.is-disabled {
					.status-lbl {
						color:var(--s5-gray-2);
					}
					.icon, .title {
						cursor:not-allowed;
					}
					.cta {
						color:var(--s5-gray-2);
						cursor:not-allowed;
					}
				}

				.title {
					font-size:1.3rem;
					font-weight:500;
					padding: 5px 0 0 59px;
					color:var(--s5-body);

					a, a:hover {
						color:var(--s5-body);
					}
				}
				.icon {
					display:block;
					margin:7px 0 10px 0;
					width:44px;
					height:auto;
					position: absolute;
					top: 15px;
					left: 15px;

					img {
						width:100%;
						box-shadow: var(--s5-shadow-3);
						border-radius: 27%;
						margin: 0;
						display: block;
						overflow:hidden;
					}
				}
				.sub {
					font-size:.85rem;
					color:var(--s5-gray-2);
					margin:0 0 10px 0;
					padding: 0px 0 0 59px;

					.sub__price {
						color:var(--s5-green-2);
						font-weight: 500;
					}
					.sub__info {
						color:var(--s5-gray-2);
					}

					.sub__progress {
						color:var(--s5-body);
						font-weight: 500;
					}
				}
				.desc {
					font-size:0.9rem;
					color:var(--s5-body);
					margin:0 0 15px 0;
					min-height:3.6rem;

					.desc__terms-sym {
						color:var(--s5-gray-2);
					}
					.desc__terms-val {
						color:var(--s5-gray-2);
						font-size:0.85rem;
						margin:15px 0 0 0;
					}
				}
				.cta {
					font-size:1rem;
					color:var(--s5-blue-2);
					font-weight:500;
					display:inline-block;
					position:absolute;
					bottom:0;
					left:0;
					border-top:var(--s5-border);
					height: 40px;
					line-height: 38px;
					width: 100%;
					text-align: center;
					border-radius: 0 0 5px 5px;

					&:hover {
						background-color:var(--s5-gray-1);
					}
				}
			}
		}
	}
	
	#solutionOptions {
		width: 100%;
		overflow:hidden;
		
		tr {
			th, td {
				border-bottom:var(--s5-border);
				padding:8px 4px 8px 4px;
				
				&.c-1 {
					text-align:left;
					padding:0;
					overflow:hidden;
					
					.acc-title {
						cursor:pointer;
						font-weight: 500;
						position:relative;
						padding:8px 34px 8px 15px;
						
						&::after {
							position:absolute;
							top:0;
							right:6px;
							font-size:1.5rem;
							vertical-align: top;
              display: inline-block;
              content: "›";
              width: 15px;
              height: 38px;
							line-height:32px;
              color: var(--s5-blue-2);
							text-align: center;
              transition: all 320ms;
						}
						
						&:hover {
							background:var(--s5-gray-1);
						}
						
						&.expanded {
							padding:8px 34px 2px 15px;
							
							&::after {
								color: var(--s5-red-2);
								transform: rotate(90deg);
								top:0;
								right:6px;
							}
							&:hover {
								background:transparent;
							}
						}
					}
					.acc-content {
						display:none;
						color:var(--s5-gray-2);
						padding:0 34px 8px 15px;
						font-size: .85rem;
						
						&.expanded {
							display:block;
						}
					}
				}
				&.c-5 {
					padding-right:15px;
				}
				
				.yes, .no {
					width:22px;
					height:22px;
					background-position:center center;
					background-repeat:no-repeat;
					background-size:20px auto;
					margin: 0 auto;
					font-size:0;
				}
				.yes {
					background-image:url(/tmpl/s5/icon/check.svg);
					filter:var(--s5-f-green-2);
				}
				.no {
					background-image:url(/tmpl/s5/icon/xmark.svg);
					filter:var(--s5-f-red-2);
				}
			}
			th {
				text-align:center;
				
				&.c-1 {
					padding:8px 4px 8px 15px;
				}
				&.h-5 {
					padding-right:15px;
				}
			}
			td {
				&.c-2, &.c-3, &.c-4, &.c-5 {
					text-align:center;
					width:82px;
				}
			}
		}
		
		tr:last-of-type {
			td {
				border-bottom:0;
				
				&.c-1 {
					.acc-title {
						border-radius:0 0 0 10px;
					}
				}
			}
		}
	}
	.s5-section {
		&.for-solution {
			position:relative;
			
			.tagline {
				position:absolute;
				bottom:-15px;
				left:50%;
				font-weight: 500;
				transform:translateX(-50%);
				padding: 4px 12px;
				background: var(--s5-purple-3);
				border-radius: 25px;
				color: white;
				display: inline-block;
				z-index: 1;
				position: relative;
				font-size: 1rem;
				text-transform: uppercase;
			}
			
			&.for-mylfp {
				border-bottom:1px solid var(--s5-blue-3);
				
				.tagline {
					background: var(--s5-blue-3);
				}
			}
		}
		&.s5-section--info {
			border-top:0;
		}
	}
	.s5-hero-solution {
			text-align:center;
			padding-top:2rem;

			.gallery-cover {
				display:block;
				width:160px;
				height:160px;
				margin: 0 auto 10px auto;
				overflow:hidden;
				border-radius:5px;
			}
			.cover {
				display:block;
				width:160px;
				height:auto;
				margin: 0;
				box-shadow: var(--s5-shadow-1);
				padding:0;
				transition: all 320ms;
			}

			.prod-icon {
				display:block;
				width:15vw;
				height:15vw;
				max-width:120px;
				max-height:120px;
				margin: 0 auto 10px auto;
				overflow:hidden;
					border-radius:27%;
					box-shadow: var(--s5-shadow-3);

					.icon {
						width:100%;
						margin: 0;
						box-shadow: none;
					}
			}

			h1 {
				font-size:2.4rem;
				margin:0;
				color:var(--s5-body-color);

				.tm {
					color:var(--s5-gray-2);
					font-weight:400;
					font-size: 1rem;
					vertical-align: super;
				}
			}
			p.lead {
				font-size:2rem;

				span {display:block;}
				sup {
					font-size: .8rem;
					vertical-align: top;
				}

				.tagline {
					position:relative;
					font-weight:500;
					margin:30px 0;
					display: block !important;

					&::before {
						display:block;
						position:absolute;

						width:100%;
						height:0;
						content:"";
						top:18px;
						left:0;
						border-bottom:1px solid var(--s5-purple-3);
					}

					.mid {
						padding: 4px 12px;
						background: var(--s5-purple-3);
						border-radius: 25px;
						color:white;
						border: 1px solid var(--s5-purple-2);
						display: inline-block;
						z-index: 1;
						position: relative;
						font-size: 1rem;
						text-transform: uppercase;
					}
				}
			}
			p.desc {
				font-size:1.5rem;
			}
			.cta {
				display:inline-block;
				font-size:1.5rem;
			}

			.prod-vid {
				margin-top:30px;
				border-radius:22px;
				border:var(--s5-border);
				overflow:hidden;
			}
		}
}

@media only screen and (max-width: 769px) {
	#tmpl-s5 {
		
	
	#solutionsMenu {
		margin: 30px 0 20px 0;
    width: calc(100% + 0px);
		
		.inner {
			flex-direction:column;
			display:block;
			margin: 30px -20px 20px -20px;
    	width: calc(100% + 40px);
			
			.i {
				flex:0 0 100%;
				margin-right:0;
				margin-bottom:40px;
				
				border-left: 0 !important;
				border-right: 0 !important;
				border-radius: 0;
				
				.desc {
					min-height: 2.4rem;
				}
			}
		}
	} 
		
		.s5-section.s5-section--banner {
      padding-top:98px;
      
      &.s5-hero-solution {
        a.gallery-cover {
          width: 25%;
          height:auto;
          
          .cover,
          &:hover .cover {
            width:100%;
            height:auto;
            margin:0;
          }
        }
        h1 {
          font-size: 5vw;
        }
        p.lead {
					font-size: 4vw;
				}
        p.desc, .cta {font-size: 1rem;}
      }
    }
	}
}

@media only screen and (max-width: 561px) {
	#solutionsMenu {
		
	} 
}

@media only screen and (max-width: 480px) {
	#tmpl-s5 {
		.s5-hero-solution h1 {font-size:1.5rem !important;}
		.s5-hero-solution p.lead span {display:unset;font-size:1.1rem;}
	}
}