/* Version: 2014.09.04 */
@font-face {
    font-family: "3MCircularTT-Bold";

    src: url("../fonts/3MCircularTT-Bold.eot");
    src: url("../fonts/3MCircularTT-Boldd41d.eot?#iefix") format("embedded-opentype"),
         url("../fonts/3MCircularTT-Bold.woff") format("woff"),
         url("../fonts/3MCircularTT-Bold.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "3MCircularTT-Book";
    src: url("../fonts/3MCircularTT-Book.eot");
    src: url("../fonts/3MCircularTT-Bookd41d.eot?#iefix") format("embedded-opentype"),
         url("../fonts/3MCircularTT-Book.woff") format("woff"),
         url("../fonts/3MCircularTT-Book.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "3MCircularTT-Light";
    src: url('../fonts/3MCircularTT-Light.ttf') format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Oswald";
    src: url('../fonts/Oswald-Light.ttf') format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Oswald";
    src: url('../fonts/Oswald-Regular.ttf') format("truetype");
    font-weight: 700;
}


body {
	margin:0;
	padding:0;
	font-family: "3MCircularTT-Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
	background-color:#ffffff;
	overflow:hidden;
	background-image: url('../img/repeating_meshed_grid.png');
	background-repeat: repeat;
}

a { color:black; }
a.pageJump { color:black; }

sup {line-height:0;font-size:60%}
#mainBody { max-width:1024px; }

#cacheStatus { display: inline; }

.leftLink { float:left; margin-top:0; font-size:1.2em; }
#infoNav a { color:black; }

#status {
	height:20px;
	background-color:#e6e7e8;
	position:absolute;
	left:0;
	top:0;
	right:0;
}

/* {{{ Side Swatch Container */
#sideSwatches {
	vertical-align:middle;
	text-align:center;
	text-transform:uppercase;
	height:49px;
	padding:9px 0 44px 0;
	z-index:50;
	background-color:#ffffff;
	-webkit-overflow-scrolling: touch;
	overflow-x: scroll;
	overflow-y: hidden!important;
	white-space:nowrap;
}
.sideSwatch img,
.customSwatches img {
	display:block;
	margin:0 auto;
	margin-bottom:3px;
}

@media only screen and (max-width:479px) {
	#sideSwatches {
		padding:9px 0 14px 0;
		height:66px;
	}
}
.sideSwatch, .customSwatches {
	display:inline-block;
	vertical-align:top;
	width:80px;
	height:58px;
	font-family:'Oswald';
	font-size:10px;
	margin:5px 0; /*2.5%*/
	border-style:none;
	outline-style:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
	font-weight:400;
}

/* }}} */

#contentArea {
	vertical-align:middle;
	/*text-align:center;
	background-color:white;*/
	position:absolute;
	/*left:20%;*/
	top:10px;
	bottom:70px;
	width:100%;
	overflow:hidden;
	overflow-y:scroll;
}

#logoContainer {
	width:90%;
	max-width:960px;
	margin:0 auto;
	background-color:transparent;
	overflow:hidden;
	position:relative;
	text-align:center;
	margin-top:60px;
	margin-bottom:10px;
}

#logoContainer p { width:100%;text-align:center;margin:0; }
#logoContainer a { text-decoration:none; }
#colourSmile {
	margin:0 auto;
	/*max-width:696px;*/
	width:90%;
	padding-top:35px;
}

#teeth {
	background: #52BAE7 url(../img/teeth_background.jpg) center center;
	background-size: 100% 100%;
	position:relative;
	width:100%
}

#display_teeth {
	position:relative;
	/*z-index:1;*/
	margin:0 auto;
	display:block;
	padding:0;
	width:90%;
	max-width:500px;
}

#homeBanners {
	width:100%;
	max-width:960px;
	margin:0 auto;
	padding:30px 0;
	display:block;
	background-color: transparent;
	padding-bottom:40px;
}

#homeBanners .favorite, #homeBanners .favorite:visited { width:31%;background-color:#00ae4d;padding:20px 30px;margin-right:3%;box-sizing:border-box;color:white;font-size:34px;float:left;text-decoration:none; }
#homeBanners .combinations, #homeBanners .combinations:visited { width:31%;background-color:#b2d235;padding:20px 30px;margin-right:3%;box-sizing:border-box;color:white;font-size:34px;float:left;text-decoration:none; }
#homeBanners .personality, #homeBanners .personality:visited { width:31%;background-color:#00bce6;padding:20px 30px;box-sizing:border-box;color:white;font-size:34px;float:left;text-decoration:none; }

#homeBanners .favorite:hover { background-color:#007b36; }
#homeBanners .combinations:hover { background-color:#7f9626; }
#homeBanners .personality:hover { background-color:#018aa7; }

#homeBanners .cali { width:48%;box-sizing:border-box;float:left;text-decoration:none;margin-right:3%;background-color:black; }
#homeBanners .live { width:48%;box-sizing:border-box;float:left;text-decoration:none;background-color:black; }

#homeBanners .cali img, #homeBanners .live img { width:100%;display:block; }
#homeBanners .cali img:hover, #homeBanners .live img:hover { opacity: 0.7;filter: alpha(opacity=70); }

@media only screen and (max-width:840px) {
  #homeBanners .favorite, #homeBanners .favorite:visited, #homeBanners .combinations, #homeBanners .combinations:visited, #homeBanners .personality, #homeBanners .personality:visited { display:block;width:100%;padding:10px;margin-right:0;float:none; }
}

@media only screen and (max-width:720px) {
  #homeBanners .live, #homeBanners .cali { width:100%;float:none;margin-right:0; }
}

#description {
	width:100%;
	min-height: 50%;
	position:relative;
	padding-bottom:80px;
}

#customizeDescription { float:left;width:30%;margin-right:3%;margin-top:30px;min-width:230px; }
#customizeDescription div { width:100%;background-color:#00bce6;padding:20px 35px 25px 20px;box-sizing:border-box;color:white;font-size:34px;text-decoration:none;font-family: "3MCircularTT-Bold"; }
#customizeDescription p { font-size:17px;font-family: "3MCircularTT-Book"; }

.colourContent { background:transparent;padding-top:30px;font-family:"3MCircularTT-Book";	}
.colourContent .intro { width:25%;min-width:286px;background-color:#00ae4d;padding:20px 35px 45px 20px;margin-right:3%;box-sizing:border-box;color:white;font-size:38px;float:left;text-decoration:none;font-family: "3MCircularTT-Bold"; }
.colourContent .introFr { width:30%;min-width:286px;background-color:#00ae4d;padding:20px 35px 45px 20px;margin-right:3%;box-sizing:border-box;color:white;font-size:38px;float:left;text-decoration:none;font-family: "3MCircularTT-Bold"; }

.comboContent { background:transparent;margin-top:30px;font-family: "3MCircularTT-Book"; }
.comboContent .intro { width:30%;min-width:286px;background-color:#b2d235;padding:20px 35px 45px 20px;margin-right:3%;box-sizing:border-box;color:white;font-size:38px;float:left;text-decoration:none;font-family: "3MCircularTT-Bold"; }
.comboContent .introFr { width:32%;min-width:286px;background-color:#b2d235;padding:20px 35px 45px 20px;margin-right:3%;box-sizing:border-box;color:white;font-size:38px;float:left;text-decoration:none;font-family: "3MCircularTT-Bold"; }

@media only screen and (max-width:690px) {
  .comboContent .intro, .comboContent .introFr, .colourContent .intro, .colourContent .introFr, #customizeDescription {  float:none;width:100%; }
  #customizeDescription div {  padding:10px; }
}

.mainContent {
	max-width:1024px;
	box-sizing: border-box;
	font-size:1em;
	color:black;
	font-family:"Oswald";
	margin:0 auto 0;
	padding:1px 10px;
}

.rainbowText {
	color:white;
	float:left;
	margin:25px auto;
	font-size:2em;
	padding: 0 5%;
    width: 50%;
}

.customBanner { text-align: left;margin:10px;font-size:1.3em; }

@media only screen and (max-width:479px) {
	#customizeDescription #text {
		padding:20px 10px 0;
	}
}

.popinfo { transition: all .1s ease-in-out; }

.popinfo:hover {
transform: scale(0.85);
-ms-transform: scale(0.85);
-webkit-transform: scale(0.85);
}

.transButton, .transButton:visited {
 padding:4px 10px;
 border:2px solid black;
 color:black;
 text-align:center;
 width:100px;
 font-size:13px;
 font-weight:bold;
 text-decoration:none;
}

.transButton:hover {
 background-color:#EEEEEE;

}

.rainbowSelectContainer {
	text-align:left;
	padding-bottom: 40px;
  width:60%;
	float:left;
	margin-top:20px;
}

@media only screen and (max-width:690px) {
.rainbowSelectContainer {
	text-align:center;
  width:100%;
	float:none;
	margin-top:10px;
}
}

.rainbowSelect {
	max-width:1024px;
	margin:0 auto;
	padding-bottom:12px;
	font-size:1rem;
	height:38%;
}

#colorHead { display: none; color: white; margin:0 10px; padding-top:10px; text-transform: uppercase; font-weight:700; }
.colourDesc { margin:10px; font-size:1.3em;}
@media only screen and (max-width:767px) { .colourDesc { font-size:1.1em;} }

.orthodontistText {
	font-size:1.5em;
	margin-top:20px;
	font-weight:500;
}


#teeth ul { width:90%; margin:0 auto; border:0; position:absolute; z-index:10; top:20px; padding-left:5%; }
#teeth li { list-style-type:none; display:inline-block; margin-right:5px; width:15px; height:20px; background-color:grey; }

.colorChip { position:absolute; background-color:#CFB9AC; width:20px; height:20px; /*top:60px; left:100px; z-index:0;*/ }

/* individual chip positions */
#top1{ top:23%; left:3.5%; width:4%; height:20%; border-bottom-left-radius: 20px;}
#top2{ top:28%; left:7%; width:5%; height: 19%; }
#top3{ top:28%; left:13%; width:7%; height: 20%;}
#top4{ top:31%; left:25%; width:8%; height:22%; }
#top5{ top:29%; left:40%; width:12%; height:25%; }
#top6{ top:30%; left:58%; width:12%; height:25%; }
#top7{ top:32%; left:75%; width:10%; height:22%; }
#top8{ top:30%; left:88%; width:7%; height: 20%}
#top9{ top:26%; left:95%; width:4%; height:19%; }
#top10 {top:25.5%; left:98.75%; width:3.65%; height:17%;
		border-bottom-right-radius: 20px;border-top-right-radius: 16px;}

#bottom1{ top:52%; left:8%; width:4%; height:20%; }
#bottom2{ top:52%; left:12%; width:5%; height:25%; }
#bottom3{ top:56%; left:21%; width:8%; height:25%;}
#bottom4{ top:62%; left:32%; width:9%; height:25%; }
#bottom5{ top:62%; left:43%; width:9%; height:25%; }
#bottom6{ top:62%; left:55%; width:9%; height:25%; }
#bottom7{ top:58%; left:66.5%; width:8%; height:25%;}
#bottom8{ top:58%; left:77%; width:9%; height:25%;}
#bottom9{ top:54%; left:88%; width:7%; height:25% }
#bottom10{ top:50%; left:93%; width:4%; height:20%; }


#centerChips { position:absolute; display:block; top:0; width:80%; max-width:445px; height:100%;  margin:0 auto; left:0; right:0; }

#imgShowOff {
	position:absolute;
	right:20px;
	top:40px;
	width:22%;
	max-width:228px;
}

.subSelect { width:24%; text-align:center; display:inline-block; padding-top:25px; position:relative; cursor:pointer; }
.subSelect img { width:45%; max-width: 55px; }
.subSelect p { margin-top:5px; }

.centerButton { margin-left:10%; margin-right:10%; }
.addAfter:after { content:"+"; position:absolute; top:22%; left:95%; font-size:2em; font-weight:700; }

.createSection {
	width:90%;
	border:1px solid #000000;
	margin:0 auto;
	font-size:26px;
	padding:14px 10px 8px 10px;
	font-family:"3MCircularTT-Bold";
	margin-top:30px;
}

.socIcons img {
	cursor:pointer;
	width:6.2%;
	height:auto;
	display:inline-block;
	margin-right:11px;
	vertical-align:middle;
}
.twitterB { padding-top:6px; }

.createSection. p { width:60%;margin:0;padding:0; }

.createSection .shareText {  margin:0;padding:0;display:inline-block; padding:4px 0 4px 0; font-size:1em; font-weight:700; }
.createSection .shareTextFr { margin:0;padding:0;display:inline-block; padding:4px 0 4px 0;font-size:0.8em; font-weight:700; }

/* {{{ Footer */
.footer {
	width:100%;
	height:70px;
	text-align:center;
	position:fixed;
	bottom:0;
	background-color:transparent;
}

.footerInner {
	width:100%;
	max-height:70px;
	max-width:1400px;
	margin:0 auto;
}

.footerText { display:inline-block;margin:0;padding:0;width:45%;padding-left:2%;font-family:"3MCircularTT-Light", Arial;font-size:11px;margin-bottom:8px;box-sizing:border-box; }
.easytotie { width:10%;display:inline-block;padding-left:2%;margin-bottom:2px; }
.clarity {display:inline-block;padding-left:2%;width:17%;margin-bottom:8px; }
.uniteklogo {margin-bottom:8px;width:16%;display:inline-block;text-align:right; }
.mobile_logo3m { display:none; }

@media only screen and (max-width:720px) {
  .footer { position:static; }

  .footerText {display:block;width:96%;clear:both; }

  .easytotie { width:23%;display:block;float:left;padding-left:0;padding-right:6%; }
  .clarity {  width:40%;display:block;float:left;padding-left:0;padding-right:10%;padding-top:8px; }
	.mmmlogo { width:100%;display:block;float:left;}
	.mobile_logo3m { width:16%;display:block;float:left;padding-left:0;text-align:left;padding-right:2%;  }
	.desktop_logo3m { display:none; }

  .nospace { display:none;line-height:0;}

	#contentArea {
    padding-bottom:20px;
    position:relative;
    overflow:hidden;
  }

  #mainBody { 	overflow:hidden;overflow-y:scroll;}

  #homeBanners { padding-bottom:0px; }
}
/* }}} Footer */

#helpPopup {
	width:100%;
	max-width:500px;
	padding:10px;
	box-sizing:border-box;
	display:none;
	border-radius:8px;
	color:#fefefe;
	background: #ff534e no-repeat right bottom;
}

h2.popupTitle {
	text-align:center;
	font-size:16px;
	text-transform:uppercase;
	font-family: "Oswald", Verdana, Arial;
}

.right_arrow {
	float:right;
	position:absolute;
	right:1%;
	top:35%;
	width:6%;
	opacity: 0.5;
}

.left_arrow {
	float:left;
	position:absolute;
	left:1%;
	top:35%;
	width:6%;
	opacity: 0.5;
}

#progressbar .ui-progressbar-value {
	background-color: #ccc;
}

#imgNote {
	display:none;
}

#infonav {
	position:absolute;
	top:10px;
	left:0;
	width:100%;
	box-sizing:border-box;
	padding: 0 15px;
	white-space: nowrap;
	z-index:99;
}
#infonav img {
	width:25%;
	padding:0 5px;
}

#infonav div {
  width:100%;
	float:right;
	display:inline-block;
	max-width:120px;
}

.legal {
	padding:8px 0 25px;
	font-size:.9em;
	width:100%;
	height:14%;
	margin:20px 10px;
	color: white;
}
.rainbowSelect .legal {
	color: black;
}


/* Use clearfix class on parent to clear nested columns */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.clearfix:after {  clear: both; }
.clearfix { zoom: 1; }



/*
.formErr {
	color:#fe0000;
}
.formRow {
	clear:both;
	min-height:30px;
	margin-bottom:10px;
}
.formRow label {
	 float:left;
	width:150px;
	padding-right:10px;
	text-align:right;

	font-weight:bold;
	margin-top: 8px;
}

.formRow select,
.formRow input[type=url],
.formRow input[type=text],
.formRow input[type=email],
.formRow input[type=password] {
	 width: 200px;
	box-sizing: border-box;
	width: 90%;
	padding:2px 5px;
	margin-bottom:10px;
}

@media only screen and (min-width:768px) {
	.formRow {
		clear:none;
		float:left;
		width:50%;
	}
}
.contestOr {
	text-align: center;
	font-size:1.3em;
}
.alignCenter {
	text-align: center;
	font-size:1.1em;
}

*/