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

/*Setup Header---------------------------------------------------------*/
#setupPageHeader{
	display:grid;
	grid-template-columns: auto;
    grid-template-rows: 1fr 1fr;
	justify-items:center;
}
#setupPageHeader h3{
	padding-top:100px;
}
#setupPageHeader img{
	margin-top:0px;
	background-color:transparent;
	width:650px;
	height:150px;	
}

/*Personalization question----------------------------------------------------------------*/
h2{
	/*padding-left:100px;*/
	text-align:center;	
}

.qestionBox{
	width:100%;
	height:auto;
	
}
.qestionBox h4{
	width:100%;
	margin-top:50px;
	text-align:center;	
}
#q1ImgFrame{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
	justify-items:center;
	align-items:center;
	margin-top:25px;
	background-color:transparent;
}

#q2ImgFrame{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
	justify-items:center;
	align-items:center;
	margin-top:25px;
	background-color:transparent;
}

#q3ImgFrame{
	display:grid;
	grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
	justify-items:center;
	align-items:center;
	margin-top:25px;
	background-color:transparent;
}

#q4ImgFrame{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
	grid-row-gap:25px;
	justify-items:center;
	align-items:center;
	margin-top:25px;
	background-color:transparent;
}

.aOpt{
	width: 150px;
	height:150px;
	background-color:transparent;
	border-radius:15px;
}
.aOpt img{
	width:140px;
	height:140px;
	margin-left:5px;
	margin-top:5px;
	background-color:transparent;
}
.aOpt img:hover{
	width:150px;
	height:150px;
	margin-left:0px;
	margin-top:0px;
}

/*Stage Buttons---------------------------------------------------------*/
#stageButtonsFrame{
	float:left;
	position:relative;	
	width:80%;
	height:auto;
	margin-left:10%;
	margin-top:100px;
}
#previousBtn{
	width:auto;
	height:auto;
	float:left;
	position:relative;
}
#previousBtn img{
	width:198px;
	height:48px;
	margin-top:1px;
	margin-left:1px;
	/*background-image:url('../img/orderGraphics/previousBtn.png');*/
}
#previousBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}
#nextBtn{
	width:auto;
	height:auto;
	float:right;
	position:relative;
}
#nextBtn img{
	width:198px;
	height:48px;
	margin-left:1px;
	margin-top:1px;
	/*background-image:url('../img/orderGraphics/nextBtn.png');*/

}
#nextBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}
#submitBtn{
	width:auto;
	height:auto;
	float:right;
	position:relative;
}
#submitBtn img{
	width:198px;
	height:48px;
	margin-left:1px;
	margin-top:1px;
	/*background-image:url('../img/orderGraphics/submitBtn.png');*/

}
#submitBtn img:hover{
	width:200px;
	height:50px;
	margin-left:0px;
	margin-top:0px;
}


/*Setup Section 2---------------------------------------------------------------------------------------*/

.personalizationField{
	width:100%;
	height:auto;
}
.personalizationField h3{
	margin-left:100px;
	padding-top:50px;	
}

.whtBG{
	background-color:#fff;
}
.clrBG{
	background-color:#E0E0E0;
}

#manualBtn{
	display:inline;
	width:100px;
	height:40px;
	margin-left:25px;
	border:none;
	background-color:transparent;
	background-image:url('../img/setupGraphics/manualBtn_inactive.png');
}
#manualBtn:hover{
	
	background-image:url('../img/setupGraphics/manualBtn_active.png');
}
#electricBtn{
	display:inline;
	width:100px;
	height:40px;
	margin-left:25px;
	border:none;
	background-color:transparent;
	background-image:url('../img/setupGraphics/electricBtn_active.png');
}
.prsnlzItemFrame{
	display:grid;
	grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: auto;
	justify-items:center;
	justify-content:space-evenly;
	background-color:transparent;
}
.prsnlzPropL{
	background-color:transparent;
	width:350px;
	height:auto;
}
.prsnlzImg{
	background-color:transparent;
	position:relative;
	float:left;
	width:200px;
	height:auto;
}
.prsnlzImg img{
	background-color:transparent;
	position:relative;
	float:left;
	width:200px;
	height:300px;
}
.afterImgSpacer{
	background-color:transparent;
	position:relative;
	float:left;
	width:200px;
	height:50px;
}
.prsnlzPropR{
	background-color:transparent;
	width:350px;
	height:auto;
}

.prop1L{
	margin-top:20px;	
}
.prop1R{
	margin-top:50px;	
}

.prop2{
	margin-top:20px;	
}

.propOptFrame{
	display:grid;
	grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
	width:350px;
	height:auto;
}
.propOption{
	background-color:transparent;
	width:auto;
	height:50px;
	color:#000;
	margin-top:10px;
	font-size:12px;
	text-align:center;
	line-height:50px;
	border-radius:15px;
}
.propOption:hover{
	background-color:#ef4042;
	color:#fff;

}

.optTitleFrameL{
	display:grid;
	grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
	justify-content:end;
	width:350px;
	height:40px;
}
.optTitleFrameR{
	display:grid;
	grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
	justify-content:start;
	width:350px;
	height:40px;
}
.optTitleL{
	width:150px;
	height:40px;
	text-align:right;
	padding-top:25px;
	font-size:15px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
}
.optTitleR{
	width:150px;
	height:40px;
	text-align:left;
	padding-top:25px;
	font-size:15px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
}
.optTitleBar{
	width:%;
	height:40px;
	border-bottom: 1px solid #222;
}

.colorOptionsFrameL{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
	margin-top:-45px;
	justify-items:center;
	width:350px;
	height:auto;
	background-color:transparent;
}
.colorOptionsFrameR{
	display:grid;
	grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
	margin-top:-45px;
	justify-items:center;
	width:350px;
	height:auto;
	background-color:transparent;
}
.clrOpt{
	width: 30px;
	height: 30px;
	margin-top:20px;
	background-color:transparent;
	border-radius:3px;
}
.clrOpt img{
	width: 26px;
	height: 26px;
	margin-top:2px;
	margin-left:2px;
	background-color:transparent;
	/*border: solid 2px #ef4042;*/
}
.clrOpt img:hover{
	width: 30px;
	height: 30px;
	margin-top:0px;
	margin-left:0px;
	/*border: solid 2px #ef4042;*/
}

/*Brush Head Options----------------------------------------------------------------*/
#brushHeadPropertiesL{
	
}
/*#brushHeadPropertiesL .propOptFrame{
	display:grid;
	grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
	width:350px;
	height:auto;
}*/
#brushHeadPropertiesL .propOptFrame .optTitleFrame{
	display:grid;
	grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
	justify-content:end;
	width:350px;
	height:40px;
}
#brushHeadPropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}


#brushHeadImg{
	
}
#brushHeadPropertiesR{
	
}
#brushHeadPropertiesR .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
/*Brush Handle Options----------------------------------------------------------------*/
#brushHandlePropertiesL{
	
}
#brushHandlePropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
#brushHandleImg{
	
}
#brushHandlePropertiesR{
	
}
#brushHandlePropertiesR .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}

/*Toothpaste Options----------------------------------------------------------------*/
#toothpastePropertiesL{
	
}
#toothpastePropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
#toothpasteImg{
	
}
#toothpastePropertiesR{
	
}
#toothpastePropertiesR .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}


/*Mouthwash Options----------------------------------------------------------------*/
#mouthwashPropertiesL{
	
}
#mouthwashPropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
#mouthwashImg{
	
}
#mouthwashPropertiesR{
	
}
#mouthwashPropertiesR .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}


/*Floss Options----------------------------------------------------------------*/
#flossPropertiesL{
	
}
#flossPropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
#flossImg{
	
}
#flossPropertiesR{
	
}


/*Dash Options----------------------------------------------------------------*/
#dashPropertiesL{
	
}
#dashPropertiesL .propOptFrame .optionsFrame{
	display:grid;
	grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-content:space-evenly;
	width:350px;
	height:50px;
}
#dashImg{
	
}
#dashPropertiesR{
	
}



/*Account Info Options----------------------------------------------------------------*/
#accountDetailsBox{
	margin-left:100px;
}

.inputField{
	width:300px;
	height:30px;
	font-size:15px;
	border-radius:8px;
	border:1px inset;
}

/*Avatar Options----------------------------------------------------------------*/
#avatarBox{
	width:100%;
	height:auto;
	margin-top:25px;
}
#avatarBox h3{
	padding-left:100px;	
}
#avatarImg{
	width:100%;
	height:auto;
	margin-top:50px;
	text-align:center;	
}
#avatarImg img{
	width:300px;
	height:300px;
	display:inline;	
}
.avatarOptionsFrame{
	display:grid;
	grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr;
	justify-content:space-evenly;
	justify-items:center;
	
}
.avatarOptionsFrame h4{
	margin-top:40px;	
}
.optionsBox{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
	grid-gap:20px;
	justify-content:space-evenly;
	margin-top:-10px;
}
.avatarOpt{
	width:150px;
	height:150px;
	background-color:transparent;
}
.avatarOpt img{
	width:140px;
	height:140px;
	background-color:transparent;
	margin-left:5px;
	margin-top:5px;
}
.avatarOpt img:hover{
	width:150px;
	height:150px;
	margin-left:0px;
	margin-top:0px;
}


/*Personalized Items--------------------------------------------*/
#personalizationField{
	float:left;
	position:relative;
	margin-top: 100px;
	/*margin-left: 100px;*/
	width:100%;
	height:auto;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	
}
#personalizationField h3{
	margin-left:100px;
}
#pItemsFrame1{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
	/*justify-items:center;*/
	background-color:transparent;
}
#pItemsFrame1 .pItemBox{
	margin-top:50px;
}
#pItemsFrame1 .pItemBox img{
	background-color:transparent;
	width:200px;
	height:600px;
}
#pItemsFrame1 .pItemBox .itemName{
	padding-top:10px;
	margin-top:10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:20px;
}
#pItemsFrame1 .pItemBox .propTitle{
	margin-top:10px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
	font-size:12px;	
}
#pItemsFrame1 .pItemBox .property{
	margin-top:-7px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:15px;	
}
#pItemsFrame2{
	display:grid;
	grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	justify-items:center;
	justify-content:space-evenly;
	background-color:transparent;
}
#pItemsFrame2 .pItemBox{
	float:left;
	position:relative;
	margin-top:50px;
	text-align:center;
}
#pItemsFrame2 .pItemBox img{
	background-color:transparent;
	width:200px;
	height:300px;
}
#pItemsFrame2 .pItemBox .itemName{
	padding-top:10px;
	margin-top:10px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:20px;
	text-align:center;
}
#pItemsFrame2 .pItemBox .propTitle{
	margin-top:10px;
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;
	font-size:12px;	
}
#pItemsFrame2 .pItemBox .property{
	margin-top:-7px;
	font-family:montserratReg, Arial, Helvetica, sans-serif;
	font-size:15px;	
}
.propTitle{
	font-family:montserratRegItal, Arial, Helvetica, sans-serif;	
}


/*Insight Section--------------------------------------------------------------*/
#insightBox{
	width:100%;
	height:auto;
	text-align:center;
	background-color:transparent;
}
#insightBox img{
	disply:inline;	
	width:600px;
	height:300px;
	background-color:transparent;
}


/*Delivery Info Section--------------------------------------------------------------*/
.setupBottom{
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:url('../img/setupGraphics/journeyRoad.jpg');
}
#deliveryInfo{
	width:100%;
	height:500px;
	text-align:center;
	margin-top:100px;
	color:#fff;
	text-shadow:2px 2px RGBA(0, 0, 0, 0.5);
}
#deliveryInfo h3{
	padding-top:100px;
}
#deliveryInfo h1{
	font-size:50px;
}
#deliveryInfo p{
	font-size:30px;
}