/* CSS for Model Locator pages */

/* **************************
	COLORS / UTILITIES
*****************************/
.ge-blue {
	color: #0a2c74;
}
.white-text {
	color: #fff !important;
}
.small-p {
	font-size: .8rem;
}

/* **************************
	GENERAL
*****************************/
body {
	background: #ededed;
	font-family: effra, 'Arial', 'Helvetica', sans-serif;
	font-size: 1rem;
	padding-top: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-family: effra, 'Arial', 'Helvetica', sans-serif;
	font-style: normal;
}
#mnl-header {
	padding: 1em 0 1em;
	background: #0a2c74;
}
#mnl-content {
	padding-bottom: 1.5em;
	background: #fff;
}
#mnl-content h1 {
	margin-bottom: 0;
	padding-top: .5em;
	padding-bottom: .5em;
}

/* **************************
	HELPFUL-HINT AREA
*****************************/
/* COMMON PAGES */
.helpful-hint-wrapper {
	margin-top: 1.5em;
}

/* special columns for helpful hint area - common pages ***** */
.column.hint-lightbulb {
	width: 10%;
}

.column.hint-title {
   width: 55%;
}

.column.hint-content {
   width: 100%;
}

.column.hint-qrtag {
	width: 35%;
	float: right;
}
/* End special columns *************************************** */

#titleHint {
	background: #ededed;
	padding: 1.2em 0 2em;
}

.helpful-hint {
	background: #fff;
	padding: 1.5em 1em .5em;
	margin: 1em 0;
}

.fa.fa-lightbulb-o {
	font-size: 3.2em;
}

.hint-title p {
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1em;
	padding-top: 5px;
}

.hint-content {
	margin-top: .5em;
}

.qr-tag {
	margin-top: -.6em;
	float: right;
	width: 75%;
}

@media all and (min-width: 600px) {
	/* common pages */
	.helpful-hint-wrapper {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
	.column.hint-lightbulb {
		width: 5%;
    }
   	.column.hint-title {
		width: 17%;
   	}
  	.column.hint-content {
		width: 61%;
  	}
   	.column.hint-qrtag {
		width: 17%;
	}
	.fa.fa-lightbulb-o {
		font-size: 3em;
	}
	.hint-title p {
		font-size: 1.1rem;
	}
	.hint-content {
		margin-top: 0;
	}
	.qr-tag {
		margin-top: -1em;
		width: 100%;
	}
}

@media all and (min-width: 960px) {
	/* common pages */
	.column.hint-lightbulb {
		width: 4%;
  	}
  	.column.hint-title {
		width: 14%;
  	}
  	.column.hint-content {
		width: 67%;
 	}
  	.column.hint-qrtag {
		width: 15%;
	}
}

/* **************************
	TAG EXAMPLE SECTION - currently only on gas and electric ranges page
*****************************/
.label-examples {
	background: #fff;
	padding: 1.5em 1em;
	margin: 1em 0;
}
@media all and (min-width: 600px) {
	.label-examples-wrapper {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}
/* **************************
	LANDING PAGE
*****************************/
/* flexbox setup for landing in HINT-MONOGRAM area */
#landingHintContainer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	flex-direction:row;
}
.landing-hint-mono {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	flex-basis: auto;
	margin-bottom: .5em;
	padding: 1em 1em 0;
}

@media all and (min-width: 600px) {
	#landingHintContainer {
		padding-left: 1.2em;
		padding-right: 1.2em;
	}
	.landing-hint-mono {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 49%;
	}
}

.landing-hint-mono h6, .landing-hint-mono p, .landing-hint-mono img {
	display: inline-block;
}
/* end flexbox wrapper area */

/* contents in the flex hint monogram WRAPPER - landing */
.landing-helpful-hint {
	background: #eaf8f8;
	border: 1px solid #0a2c74;
	color: #0a2c74;
}

.landing-helpful-hint h3 {
	font-weight: 700;
}

.landing-monogram-link {
	background: #1b1d1c;
	border: 1px solid #000;
	color: #fff !important;
}

.landing-monogram-link img {
	margin-right: 1em;
	margin-bottom: .9em;
}

.landing-hint-mono h6 {
	font-size: 1rem;
	margin-bottom: .25em;
}

.landing-hint-mono p {
	padding-bottom: 0;
}

.landing-monogram-link i {
	margin-left: .5em;
}

.monogram-anchor, .monogram-anchor:focus, .monogram-anchor:active, .monogram-anchor:visited {
	color: #fff;
	text-decoration: none;
	transition: .3s;
}

.monogram-anchor:hover {
	color: #6d9ba0;
	text-decoration: none;
}

/* END HINT MONOGRAM AREA */

.product-row-container {
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	align-content: flex-start;
	width: 100%;
	margin-top: 3em;
}

.product-row-item {
	width: 98%;
	margin-bottom: 2em;
}

.product-img-wrap {
	position: relative;
	height: 15vh;
}

.product-img {
	width: auto;
	max-height: 15vh;
	margin-bottom: 1em;
	position: absolute;
	bottom: 0;
}

.product-img.cleaning-img {
	max-height: 15vh;
}

@media all and (min-width: 600px) {
	.landing-hint-mono h6 {
		font-size: .95rem;
	}
	.product-row-container {
		margin-top: 3.5em;
	}
	.product-row-item {
		width: 30%;
	}
	.product-img-wrap {
		height: 20vh;
	}
	.product-img {
		max-height: 20vh;
	}
	.product-img.cleaning-img  {
		max-height: 15vh;
	}
	.product-img.water-img  {
		max-height: 19vh;
	}
}

@media all and (min-width: 960px) {
	/* landing page */
	.landing-hint-mono h6 {
		font-size: .9rem;
	}
	.product-row-item {
		width: 31%;
	}
	.product-img-wrap {
		height: 25vh;
	}
	.product-img {
		max-height: 25vh;
	}
	.product-img.cleaning-img  {
		max-height: 20vh;
	}
	.product-img.water-img  {
		max-height: 23vh;
	}
}

/* SPECIAL - DEVICE SPECIFIC BREAKS needed for landing */
/* ipad mini portrait - chrome */
@media all and (device-width: 768px) and (device-height: 1024px) {
	.product-row-item {
		width: 30%;
		margin-bottom: .5em;
	}
	.product-img-wrap {
		height: 18vh;
	}
	.product-img {
		max-height: 18vh;
	}
	.product-img.cleaning-img  {
		max-height: 15vh;
	}
	.product-img.water-img  {
		max-height: 15vh;
	}
}
/* ipad pro portrait - firefox  */
@media all and (device-width: 1024px) and (device-height: 1336px) {
	.product-row-item {
		width: 30%;
		margin-bottom: .5em;
	}
	.product-img-wrap {
		height: 18vh;
	}
	.product-img {
		max-height: 18vh;
	}
	.product-img.cleaning-img  {
		max-height: 13vh;
	}
	.product-img.water-img  {
		max-height: 15vh;
	}
}
/* ipad pro portrait - chrome */
@media all and (device-width: 1024px) and (device-height: 1366px) {
	.product-row-item {
		width: 30%;
		margin-bottom: .5em;
	}
	.product-img-wrap {
		height: 18vh;
	}
	.product-img {
		max-height: 18vh;
	}
	.product-img.cleaning-img  {
		max-height: 13vh;
	}
	.product-img.water-img  {
		max-height: 15vh;
	}
}

/* **************************
	FOOTER
*****************************/
#mnl-footer {
	background: #ededed;
	padding: 1.4285714285714285714285714285714em 0;
}

#mnl-footer p {
	font-size: 12px;
	font-family: Arial;
}

#mnl-footer a {color: #666; font-size: 12px;}

/* **************************
	LISTS
*****************************/
#localInstructions {
	padding-top: 1em;
}

.numbered-list-orange {
    counter-reset: li; 
    padding:0;
	margin: 0 0 1em;
}

.numbered-list-orange ol li {
    background: #ed8000;
}

.numbered-list-orange > li {
	position: relative;
	padding: 1.4285714285714285714285714285714em 1em 1.4285714285714285714285714285714em 3em;
    margin:0 0 6px 1.3em; 
    padding:4px 8px; 
    list-style:none; 
}

.numbered-list-orange > li:before {
    content: counter(li); 
    counter-increment:li; 
	background: #ed8000;
	border-radius: 50px;
    height: 23px;
    width: 23px;	
	position: absolute;
	top: 11%;
	left: -20px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;  
}

@media all and (min-width: 600px) {
	.list-instructions {
		padding-left: 2em;
	}
	#mnl-footer p {
		font-size: 13px;
	}
	#mnl-footer a {font-size: 13px;}
	.list-vertical-brd-black > li + li::before {
		font-size: 13px;
	}
	.numbered-list-orange { 
		padding:2em 0 0 0;
	}
}