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

.section{
	float:left;
	position:relative;
	width:100%;	
}

.editBtn{
	float:right;
	position:relative;
	width:50px;
	height:25px;
	margin-top:0px;
	margin-left: 25px;
	background-color:red;	
}

.pEditBtn{
	position:relative;
	width:50px;
	height:25px;
	margin-top:0px;
	margin-left: 25px;
	background-color:red;	
}

h3{
	margin-top:50px;	
}

/*Personalize section--------------------------------------------*/
#personalizeWelcomeField{
	padding:100px;	
}
.personalizationField{
	width:100%;
	height:auto;
}
.personalizationField h3{
	margin-left:100px;	
}
.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/journeyMain/manualBtn_inactive.png');
}
#manualBtn:hover{
	
	background-image:url('../img/journeyMain/manualBtn_active.png');
}
#electricBtn{
	display:inline;
	width:100px;
	height:40px;
	margin-left:25px;
	border:none;
	background-color:transparent;
	background-image:url('../img/journeyMain/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{
	
}