@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,100i|Lobster');


/* face buttons */
.face{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 70vw;
  margin: 0 auto;
}
#forehead:hover {
  transform: scale(1.1);
}

#cheeks:hover {
  transform: scale(1.1);
}

#eyes:hover {
  transform: scale(1.1);
}

#nose:hover {
  transform: scale(1.1);
}

#chin:hover {
  transform: scale(1.1);
}





.content-forehead input{
  cursor: pointer;
}
.content-forehead input:active {

  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


#logo{
    display: grid;
    width: 95%;
    margin: 0 auto;
    margin-top: 10%;
    margin-bottom: 10%;

}

.forehead{
    width: 45%;
    position: absolute;
    top: 28%;
    left: 27%;
    opacity: .7;
}
.eyes{
    width: 46%;
    position: absolute;
    top: 49%;
    left: 28%;
    opacity: .7;
}
.nose{
    width: 11%;
    position: absolute;
    top: 46%;
    left: 46%;
    opacity: .7;
}

.chin{
    width: 20%;
    position: absolute;
    top: 77%;
    left: 41%;
    opacity: .7;
}
.cheeks{
    width: 45%;
    position: absolute;
    top: 56%;
    left: 28%;
    opacity: .7;
}

.face{
	position: relative;
	top: 10%;
}
.face_original {
    width: 90%;
    margin: 0 auto;
}

/* price selector*/

.price{
  color: black;
  font-family:'Roboto', sans-serif; 
  font-weight: lighter;
  font-size: 1.2em;
  letter-spacing: .1em;
  text-align: center;

}

.first-step,.third-step {
   text-align: center;
  margin-bottom: 5%;
 display: flex;
  justify-content: center;
  letter-spacing: .1em;
  margin: 1em 0 1em;
  color: black;
  font-family:'Roboto', sans-serif; 
  font-weight: lighter;
  font-size: 1.2em;
  
}
/*get products button*/
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 50vw;
  margin: 0 auto;
 
  /*min-height: 100vh;*/
}


.container button, .container input  {
  width: 50vw;
  margin: 0 auto;
 font-family:'Roboto', sans-serif; 
 font-weight: lighter;
font-size: 1.2em;
letter-spacing: .1em;
 flex: 1 1 auto;
  margin: .2em;
  padding: .5em;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  background-image: linear-gradient(to right, #94b5e8 0%, #b494e8 51%, #e894e3 100%);
cursor: pointer;
}

.container button:hover {
  background-position: right center; /* change the direction of the change here */
  cursor: pointer;
}
.container input:hover {
  background-position: right center; /* change the direction of the change here */
  cursor: pointer;
}


/*Footer*/

footer {
     z-index: 9; 
    position: fixed;
    margin-top: 5%;
    background-color:#DDF9F3 ;
    overflow: hidden;
    position: relative;
    bottom: 0;
   /* width: 100%;*/
    font-family:'Roboto', sans-serif; 
    
}

/* Style the links inside the navigation bar */
footer a {
    float: center;
    display: block;
    color: #FCBFF4  ;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
footer a:hover {
    background-color: #DBC2FA;
    color: #ddd;
}

/* Add a color to the active/current link */
footer a.active {
color: #CED5FA;
}



/* About Page*/

.title
 {
  text-align: center;
  text-transform: uppercase;
  font-size: 5em;
  font-family:'Roboto', sans-serif;
  color: #FCBFF4;
  letter-spacing: .085em;
  font-weight: lighter;
  /*margin: 4.5rem 0 1rem;*/
}

.tagline {
  text-align: center;
  text-transform: uppercase;
  display: block;
  letter-spacing: .3em;
  margin: 1em 0 2em;
  color: #aaa;
}


.whySMS {
  text-align: center;
  text-shadow: 2px 1px #211749;
  box-sizing: border-box;
  padding: .6em;
  font-size: 2em;
  font-family:'Roboto', sans-serif;
  font-weight: lighter;
  color: #FCBFF4;
  background: #F0F1F9;
}


.about-us-body {
  text-align: center;
  box-sizing: border-box;
  position: relative;
  padding: 3em;
  font-family:'Roboto', sans-serif;
  font-weight: lighter;
  font-size: 1.2em;
  color: #211749;
  background: #F0F1F9;
  margin:0 auto;
}

.about-us-body a:hover{ 
  text-decoration: underline;
}

#name {
font-family: 'Roboto', sans-serif;
}


.lucia-xinyi img{
 
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;

  overflow: hidden;
  width: 100%;
}


.foreheadCheck{
    opacity: 0;
}
/* if you change opacity to 1 you will see the checkbox*/

.products{
  font-size: 1.2em;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  font-weight: lighter;
  position: relative;
}
.products h3{
  color: black;
}
.products p{
  color: black;
}

.products a{
  position: relative;
}
.products a:hover{
  text-decoration: underline;
}
.products img{
  overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 5% auto;
  position: relative;
  width: 50%;
}

/*Skin guide page*/
.struggle {
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
  font-family: 'Roboto', sans-serif;
  color: #FCBFF4;
  letter-spacing: .085em;
  font-weight: lighter;
}

.struggle-tagline {
    text-align: center;
  text-transform: uppercase;
  display: block;
  letter-spacing: .3em;
  margin: 1em 0 4em;
  color: #aaa;
  font-family: 'Roboto', sans-serif;
}


.blackheads-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed
}


.blackheads {
  text-align: center;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}

.blackheads-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.whiteheads-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed
}

.whiteheads-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.whiteheads {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}

.dryness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: bold;
  color: #afffed
}

.dryness-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.dryness {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;

}

.oiliness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed
}

.oiliness-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.oiliness {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}


.redness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed
}

.redness-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.redness {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}

.puffiness-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed
}

.puffiness-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.puffiness {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}

.dark-circles-title {
  text-align: center;
  font-family: 'Lobster', cursive;
  text-shadow: 3px 1px #211749;
  font-size: 2em;
  font-weight: lighter;
  color: #afffed

}

.dark-circles-image {
    overflow:hidden;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}


.dark-circles {
  text-align: center;
  box-sizing: border-box;
  font-family:'Roboto', sans-serif;
  padding: 10px;
  font-size: 1em;
  font-weight: lighter;
  color: gray;
  background: #F0F1F9;
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    #logo{ 
    width: 35%;
    margin-top: 5%; 
    }

    .face{
      width: 40%;
      height: 40%;
    }

    .price{
       color: black;
       font-family:'Roboto', sans-serif; 
       font-weight: lighter;
       font-size: 1.2em;
       letter-spacing: .2em;
      text-align: center;
    }

    .container{
      width: 100%;
      margin:0 auto;
    }

    .buttons{
      width: 30%;
    }

    .products {
      width: 45%;
      margin: 0 auto;

    }

    .products img{
    overflow:hidden;
    display: flex;
    justify-content: center;
    margin: 5% auto;
    position: relative;
    }

    .lucia-xinyi img{
    display: flex;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    width: 50%;
  }

   footer{
    display: flex;
    justify-content: center;
    z-index: 0; 
    position: relative;
    }


}