@charset "UTF-8";
/* CSS Document */

html 
{
	font-family: "Open Sans",sans-serif;
	box-sizing: border-box;
    font-size: 16px;
}

html,body { text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }

*, *:before, *:after {box-sizing: inherit;}

body 
{ 
	margin:0; 
	padding:0; 
	color:#000; 
}

p {
    font-size: 1.5rem;
    color: #484949;
}

sup {
    font-size: .5rem;
}

.flex 
{ 
	display: flex; 
}


#branding img.logo{display:none;}
#branding img.logo.show{display:flex;}

.contain 
{ 
	display: none; 
	overflow:hidden; 
	padding-left:1rem; 
	padding-right:1rem;
    background: white;
    padding-bottom: 225px;
}

.contain .selecttext {
    text-align: center;
}



.brandmodeltext p {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0px;
    padding-top: 30px;
}

.contain.show {
    display: block;
    width: fit-content;
}

.hero
{
	width: 100%;
    height: auto;
    position: absolute;
    background: white;
	position: relative;
	z-index: 1;
	transition: all 1s;
    padding-top: 30px;
}

.hero .wrap 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2vh;
    transition: all 1s;
}

.wrap {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    position: relative;
}

.arrow1, .arrow2, .kaarrow, .mtarrow, .amarrow {
    display: none;
    position: absolute;
    left: 20px;
    top: 25px;
    cursor: pointer;
}

.arrow1.show, .arrow2.show, .kaarrow.show, .mtarrow.show, .amarrow.show {
    display: block;
}

.hero-text
{
	font-family: "Nunito Sans",sans-serif;
    color: #484949;
    font-size: 4rem;
    text-transform: uppercase;
	margin: 10px;
}

.subheader {
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.hero.splash
{
	height: 100vh;
	position: absolute;
}

.hero.splash .wrap 
{
	padding-top: 35vh;
}

.hero.splash img.logo {
    height: 7rem; 
}

.hero img.logo {
    height: 5rem;
    transition: all 1s;
}

img.logo:is(.amana, .kitchenaid, .maytag) {
    padding: 1.25rem;
}

.instructions {
    margin: auto;
    max-width: 90%;
    text-align: center;
    padding: 30px 0px;
	color: #484949;
    display: none;
    text-transform: uppercase;
}

nav ul.pill-container{
    display:flex;
	width:fit-content;
    justify-content:center;
	list-style-type:none;
	padding:0;
    border-radius: 34px;
	margin:0 auto 50px auto;
	background:#DEE0E3;
}

nav ul.pill-container li{background:#DEE0E3; color:#707070; padding:7px 30px; margin:0; display:inline-block;}
nav ul.pill-container li.active{background:#1E4268; border-radius:34px; color:#FFF;}
nav ul.pill-container li:last-of-type{border-radius:0 34px 34px 0;}

.nav-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.nav-screen.show {
	display: flex;
}

.nav-screen .nav {
    display: flex;
    flex-direction: column;
}

.nav-screen.show p {
    color: #484949;
    font-size: 2.5rem;
}

.nav-screen .nav a {
    padding: 46px 0px;
    border-bottom:2px solid #D1D3D4;
    display: flex;
}

.nav-screen .nav a:last-child {
    border-bottom: none;
}

.nav-screen .nav a img {
    margin: auto;
    width: 100%;
}

.nav a:hover {
    background: #cccccc2e;
    border-radius: 10px;
}

.navscreen1 .nav {
    padding-top: 46px;
}

.whirlpoolnav .nav a:hover img, .kitchenaidnav .nav a:hover img, .maytagnav .nav a:hover img, .amananav .nav a:hover img{
    transform: scale(1.1);
}

.whirlpoolnav, .kitchenaidnav, .maytagnav, .amananav{
	display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
}

.whirlpoolnav.show, .kitchenaidnav.show, .maytagnav.show, .amananav.show{
	display: flex;
}

.whirlpoolnav .nav, .kitchenaidnav .nav, .maytagnav .nav, .amananav .nav{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 850px;
    justify-content: center;
}

.whirlpoolnav .nav a, .kitchenaidnav .nav a, .maytagnav .nav a, .amananav .nav a{
    width: 33.3%;
    display: flex;
    flex-direction: column;
    padding: 4%;
    align-items: center;
	text-decoration: none;
    color: #484949;
	text-align:center;
}

.whirlpoolnav .nav a span, .kitchenaidnav .nav a span, .maytagnav .nav a span, .amananav .nav a span{
	padding-top: 10px;
    margin-top: auto;
    font-size: 1.5rem;
}

/*.whirlpoolnav .nav a:nth-child(1), .kitchenaidnav .nav a:nth-child(1) {
    border: solid 1px #d1d3d4;
    border-top: none;
	border-left: none;
}

.whirlpoolnav .nav a:nth-child(2),.kitchenaidnav .nav a:nth-child(2) {
    border: solid 1px #d1d3d4;
    border-top: none;
}

.whirlpoolnav .nav a:nth-child(3), .kitchenaidnav .nav a:nth-child(3) {
    border: solid 1px #d1d3d4;
    border-top: none;
	border-right: none;
}

.whirlpoolnav .nav a:nth-child(4), .kitchenaidnav .nav a:nth-child(4) {
    border: solid 1px #d1d3d4;
	border-left: none;
}

.whirlpoolnav .nav a:nth-child(5), .kitchenaidnav .nav a:nth-child(5) {
    border: solid 1px #d1d3d4;
}

.whirlpoolnav .nav a:nth-child(6), .kitchenaidnav .nav a:nth-child(6){
    border: solid 1px #d1d3d4;
	border-right: none;
}

.whirlpoolnav .nav a:nth-child(7), .kitchenaidnav .nav a:nth-child(7) {
    border: solid 1px #d1d3d4;
	border-left: none;
	border-bottom: none;
}

.whirlpoolnav .nav a:nth-child(8), .kitchenaidnav .nav a:nth-child(8){
    border: solid 1px #d1d3d4;
	border-bottom: none;
}

.whirlpoolnav .nav a:nth-child(9), .kitchenaidnav .nav a:nth-child(9){
    border: solid 1px #d1d3d4;
	border-right: none;
	border-bottom: none;
}*/

#bluebar 
{
	background-color:#0D436B;
	width:100%;
	height:6rem;	
}


/*************************************/
.contain{width:fit-content;}

.bluebar{background-color:#0D436B; width:100%; height:6rem;}

.modelnumber{margin-top:2rem; display:flex; justify-content:center;}

.modelnumber span{font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:6rem; letter-spacing:0; padding:0 5px;}
.modelnumber span:hover{color:#7F7F7F; cursor:pointer;}
.modelnumber span.active, .modelnumber span.active:hover{background-color:#EEB111; color:#FFF;}

.bluebar div{display:none; color:#FFF; font-family: "Nunito Sans",sans-serif; font-size:2rem; padding:1rem; text-align:center; text-transform:uppercase; font-weight:700;}

.more-info ul{display:none; color:#000; font-family:"Nunito Sans", sans-serif; font-weight:500; font-size:1.2rem; padding:1rem;}

.brand, .platform, .subplatform, .suitelevel, .featureset, .capacity, .year, .color{font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:7.5rem;}
.brand:hover, .platform:hover, .subplatform:hover, .suitelevel:hover, .featureset:hover, .capacity:hover, .year:hover, .color:hover{color:#7F7F7F; cursor:pointer;}

.brand-bartitle, .platform-bartitle, .subplatform-bartitle, .suitelevel-bartitle, .featureset-bartitle, .capacity-bartitle, .year-bartitle, .color-bartitle{display:none; color:#FFF; font-family: "Nunito Sans",sans-serif; font-size:2rem; padding:1rem; text-align:center; text-transform:uppercase; font-weight:700;}



.more-info ul{list-style-type:none; margin:0; padding:1rem;}
.more-info ul li{list-style-type:none;}

/*************************************/


.whirlpool .bluebar
{
	background-color:#EEB111;
	color:#FFF;
}

.kitchenaid #bluebar, .kitchenaid .bluebar
{
	background-color:#C41230;
	color:#FFF;
}

.kitchenaid .modelnumber span.active, .kitchenaid .modelnumber span.active:hover{background-color:#C41230; color:#FFF;}

.maytag .bluebar, .maytag .modelnumber span.active, .maytag .modelnumber span.active:hover
{
	background-color:#002E5F;
	color:#FFF;
}

.amana .bluebar, .amana .modelnumber span.active, .amana .modelnumber span.active:hover
{
	background-color:#F42434;
	color:#FFF;
}




li {
    list-style-type: none;
}

.disclaimer {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 75%;
    left: 50%;
    margin-left: -37%;
}

.disclaimer p {
    font-size: .9rem;
    color: #a2a2a2;
}

/* .download {
    position: absolute;
    width: 400px;
    background-color: #989898;
    color: white;
    padding: 20px;
    border-radius: 40px;
    text-align: center;
    left: 50%;
    margin-left: -200px;
    z-index: 1;
    opacity: 0;
    bottom: -200px;
    transition: all 1s ease;
}

.download.splash {
    transition: all 1s ease;
    opacity: 1;
    bottom: 32px;
}

.download p {
    color: white;
}

.download::after {
    content: '';
    background: #989898;
    position: absolute;
    width: 2em;
    height: 2em;
    bottom: -0.9em;
    left: 50%;
    margin-left: -1em;
    -webkit-transform: scaleX(0.9) rotate(45deg);
    transform: scaleX(0.9) rotate(45deg);
    box-shadow: 0.2em 0.2em 0 #d1d1d1;
} */


@media (min-width: 1000px) {
    html {
        font-size: 16px;
    }
	.nav-screen .nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav-screen .nav a {
        width: 50%;
        border: none;
    }

    .whirlpoolnav .nav, .kitchenaidnav .nav, .maytagnav .nav, .amananav .nav {
        justify-content: center;
    }

    .whirlpoolnav .nav a, .kitchenaidnav .nav a, .maytagnav .nav a, .amananav .nav a {
        width: 20%;
        border: none!important;
    }

    img.num-icon {
        width: 60px;
    }
   

    .arrow1, .arrow2, .kaarrow, .mtarrow, .amarrow {
        top: 20px;
    }
    .arrow1 img, .arrow2 img, .kaarrow img, .mtarrow img, .amarrow img {
        width: 20px;
    }

    .whirlpoolnav .nav a span, .kitchenaidnav .nav a span, .maytagnav .nav a span, .amananav .nav a span{
        font-size: 1rem;
    }

    .nav-screen .nav a img {
        margin: auto;
        width: auto;
    }

    .nav-screen.show p {
        font-size: 1.5rem;
    }

    
}

@media (max-width: 1000px) {
    .navscreen1 .nav img {
        width: 100%;
        max-width: 100px;
    }

    .selecttext p, .navscreen1.show p {
        font-size: 2em;
    }

    img.num-icon {
        width: 100px;
        height: 100px;
    }

    .disclaimer p {
        font-size: 1.2rem;
    }

    .more-info ul {
        font-size: 2rem;
    }

    .whirlpoolnav .nav a span, .kitchenaidnav .nav a span, .maytagnav .nav a span, .amananav .nav a span {
        font-size: 1.8rem;
    }
}