.container-fluid {
  padding: 0%;
}
  
.navbar-expand-sm {
  background-color: #556dac;
  padding-left: 1.5%;
}
  
.nav-link {
  color: #4b4345;
}
  
h1 {
  font-family: "Pacifico", cursive;
  text-align: center;
  color: #f79b77;
  font-weight: bolder;
  margin: 0px;
}
  
#tips {
  font-family: "Pacifico", cursive;
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: 150%;
  color: #4b4b4b;
  font-weight: bolder;
  padding-left: 30%;
  padding-bottom: 5%;
}
  
video {
  padding-bottom: 5%;
}
  
/*button OK*/
  
.btn {
  background-color: #556dac;
  border-color: #755248;
}
  
/*formatting div for 2 buttons*/
  
#naturalHair {
  margin-left: 20%;
}
  
#coloredHair {
  margin-right: 10%;
}
  
/*buttons naturalHairButton & coloredHairButton*/
  
#naturalHairButton,
#coloredHairButton {
  background-color: #556dac;
  border-color: #755248;
  width: 70%;
}
  
/*formatting div for 3 buttons*/
  
#blondHair,
#brownHair,
#brunette {
  margin-left: 8%;
}
  
/*notes*/
  
.warning {
  margin-top: 3%;
  background-color: #f79b77;
  padding: 0.5%;
  text-align: center;
}
  
#note,
#note1,
#note2 {
  margin: 0px;
  font-size: 150%;
}
  
/*image tone*/
  
#tones {
  margin-left: 15%;
  width: 70%;
  height: 70%;
  margin-top: 2%;
  margin-bottom: 3%;
}
  
/*link*/
  
#clickLink:link,
#clickLinka:visited {
  background-color: #556dac;
  border: solid 1px #755248;
  border-radius: 5%;
  color: white;
  padding: 2px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
  
#clickLink:hover,
#clickLink:active {
  background-color: #556dac;
  color: white;
}
  
/*h2 of classification*/
  
#classification {
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: 120%;
  color: #4b4b4b;
  font-weight: bolder;
  padding-top: 1%;
  padding-bottom: 1%;
}
  
/*div with classification*/
  
#forClassification {
  font-family: "Roboto", sans-serif;
  text-align: left;
  font-size: 100%;
  color: #4b4b4b;
  padding-bottom: 0.5%;
  margin-left: 2%;
  margin-right: 2%;
}
  
#forStrong {
  font-family: "Roboto", sans-serif;
  text-align: left;
  font-size: 110%;
  color: #556dac;
  font-weight: bolder;
  padding-bottom: 0.5%;
}
  
/*Blond, brown, brunette 3 buttons in blond*/
  
#lighterBlondHairButton,
#brownNewHairButton,
#brunetteNewButton {
  background-color: #556dac;
  border-color: #755248;
  width: 80%;
}
  
/*formatting div for 2 buttons blond*/
  
#dyeHairDiv {
  margin-left: 20%;
}
  
#powderDiv {
  margin-right: 10%;
}
  
/*buttons hairDye & powder*/
  
#hairDye,
#bleachingPowder {
  background-color: #556dac;
  border-color: #755248;
  width: 90%;
}
  
/*formatting div for 2 buttons brown*/
  
#powderDivToBlond {
  margin-left: 20%;
}
  
#dyeDivToBrown {
  margin-right: 10%;
}
  
/*formatting div for 2 buttons from brown/brunette to blond*/
  
#dyeToBlond,
#dyeToBlondBrunette {
  margin-left: 20%;
}
  
#powderToBlond,
#powderToBlondBrunette {
  margin-right: 10%;
}
  
/*formatting div for 1 button blond/brown/brunette*/
  
#dyeHairOneButton,
#dyeBrownOneButton,
#dyeBrunetteOneButton {
  margin-left: 39%;
}
  
/*formating div for video2*/
  
#video2 {
  max-width: 33%;
  margin-top: 1.5%;
  text-align: center;
}

#videoForApi {
  width: 70% !important;
  height: auto !important;
}
  
/*formating div for API*/
  
#forApi {
  margin-right: 8%;
  margin-top: 1.5%;
  text-align: center;
}

/*formating form choose*/
  
#choose {
  background-color: #556dac;
  color: #4b4b4b;
  font-family: "Roboto", sans-serif;
}
  
/*formating form*/
  
.form {
  background-color: white;
  color: #4b4b4b;
  font-family: "Roboto", sans-serif;
}
  
/*formating after form*/
  
#afterForm {
  margin-top: 4%;
  color: #4b4b4b;
  font-family: "Roboto", sans-serif;
  font-size: 0.8em;
  text-align: center;
}
  
/*footer*/
  
footer {
  margin-top: 2%;
  background-color: #556dac;
  font-size: 0.8em;
  padding: 2%;
  text-align: center;
}
  
#footer:link,
#footer:visited {
  background-color: #556dac;
  color: #4b4b4b;
  padding: 0%;
  margin: 0%;
  text-decoration: none;
  display: inline-block;
}
  
#footer:hover,
#footer:active {
  background-color: #556dac;
  color: white;
  text-decoration: none;
  padding: 0%;
  margin: 0%;
}
  
.forFooter {
  margin: 0;
}

/* for button Try Again */
#tryAgain {
  background-color: #556dac;
  border-color: #755248;
}

#colForButton {
  text-align: center;
  margin-top: 15%;
  margin-bottom: 1%;
}