/*
 Copyright © 2016 Alexander Karasev. All rights reserved.
 @link        http://karasevstudio.com
 @version     0.8
 @package     KarasevStudio LiveSmile
*/



#LiveSmile {
  position: relative;
  overflow: hidden;
  width: 40em;
  height: 29.714em;
  background-position: center;
  background-size: 110% 110%;
  background-repeat: no-repeat;
  background-image: url('all-smile-less.jpg');
  display: inline-block;
}

#LiveSmile div {
  position: absolute;
  overflow: visible;
  width: 44em;
  height: 32.686em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  top: -2em;
  left: -2em;
  -webkit-transition: all 1.1s ease;
  -moz-transition: all 1.1s ease;
  -o-transition: all 1.1s ease;
  transition: all 1.1s ease;
}

#LiveSmile div.teeth {
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

#LiveSmile div.inside {
  background-image: url('tongue.jpg');
  z-index: 1;
}

#LiveSmile div.lower.teeth {
  background-image: url('teeth-lower.png');
  z-index: 2;
}

#LiveSmile div.lower.lip {
  background-image: url('lip-lower.png');
  z-index: 3;
}

#LiveSmile div.upper.teeth {
  background-image: url('teeth-upper.png');
  z-index: 4;
}

#LiveSmile div.upper.condition {
  background-image: none;
  z-index: 5;
}

#LiveSmile div.upper.lip {
  background-image: url('lip-upper.png');
  z-index: 6;
}




#LiveSmile.small div.lip {
  background-size: 97% 118%;
}
#LiveSmile.small div.upper {
  background-position: 50% 10%;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}
#LiveSmile.small div.lower {
  background-position: 30% 75%;
}
#LiveSmile.small div.inside {
  background-position: 80% 20%;
}



#LiveSmile.wide div.lip {
  background-size: 106% 92%;
}
#LiveSmile.wide div.upper {
  background-position: 50% 45%;
  -webkit-transform: rotate(-0.5deg);
  -moz-transform: rotate(-0.5deg);
  -ms-transform: rotate(-0.5deg);
  -o-transform: rotate(-0.5deg);
  transform: rotate(-0.5deg);
}
#LiveSmile.wide div.lower {
  background-position: 57% 60%;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  transform: rotate(1deg);
}
#LiveSmile.wide div.inside {
  background-position: 100% 1%;
}



#LiveSmile.tight div.lip {
  background-size: 104% 92.3%;
}
#LiveSmile.tight div.upper {
  background-position: 50% 76%;
}
#LiveSmile.tight div.lower {
  background-position: 57% 51%;
}
#LiveSmile.tight div.inside {
  background-position: 100% 1%;
}




#LiveSmile.calculus div.upper.condition {
  background-image: url('teeth-upper-calculus-x.png');
  opacity: 0.6;
}
#LiveSmile.cavity div.upper.condition {
  background-image: url('teeth-upper-cavity-x.png');
}
#LiveSmile.chipped div.upper.condition {
  background-image: url('teeth-upper-chipped-x.png');
}
#LiveSmile.invisalign div.upper.condition {
  background-image: url('teeth-upper-invisalign-x.png');
}
#LiveSmile.crooked div.upper.teeth {
  background-image: url('teeth-upper-misaligned.png');
}
#LiveSmile.notched div.upper.condition {
  background-image: url('teeth-upper-notched-x.png');
}
#LiveSmile.worn div.upper.condition {
  background-image: url('teeth-upper-worn-x.png');
}
#LiveSmile.worn div.lower.teeth {
  background-image: url('teeth-lower-worn.png');
}
#LiveSmile.yellow div.upper.condition {
  background-image: url('teeth-upper-yellow-x.png');
  opacity: 0.8;
}
#LiveSmile.yellow div.lower.teeth {
  background-image: url('teeth-lower-yellow.png');
}




#LS-wrap {
	vertical-align: top;
}

#LS-wrap ul {
  list-style: none;
  display: inline-block;
}
#LS-wrap li {
  display: inline-block;
  border: thin blue solid;
  padding: 2em;
  line-height: 1.5em;

	/* float: left;
  line-height: 2.5em;
  padding: 0 0.7em; */
}




/* Small Screens */
@media screen and (max-device-width: 55em) and (max-width: 56em) {

#LiveSmile { /* 1050x780 */
  width: 22.6em;
  height: 16.789em;
}

#LiveSmile div {
  width: 24.87em;
  height: 18.467em;
  top: -1.13em;
  left: -1.13em;
}
}