@charset "UTF-8";

  body {
    background-color: #efefef;
  }

  #container {
  display: grid;
  box-sizing: border-box;
  padding: 30px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 20% auto;
  grid-gap: 16px;
  width: 800px;
  height: 800px;
  margin: 100px auto 25px auto;
  background-color: #fff;
}

#container>* {
  display: flex;
  /*font-size: 11px; original */

  font-size: 12px; /*12px = 9pt*/
 
  /*line-height: 12px; */
  /*color: #333; */
  color: black;
  flex-direction: column;
  /*background-color: #ff0;*/
}

.gillSans{
  font-family: "gillSans", serif;
}

.bellFont{
  font-family: "bell", sans-serif;
}

.franklin{
  font-family: "franklin", serif;
}

.footlight{
  font-family: "footlight", serif;
}

.italic{
  font-style: italic;
}

.bold{
  font-weight: bold;
}

.condensed{
  font-stretch: condensed;
}

.ptSize10{
  font-size: 13.3px;
}

.ptSize11{
  font-size: 14.67px;
}

.ptSize18{
  font-size: 24px;
}

.ptSize9{
  font-size: 12px;
}

.lead10d8{
  line-height: 14.4px;
}

.strongGrey{
  color: #333333;
}

.weakGrey{
  color: #666;
}

.rightAlign{
  text-align: right;
}

.centreAlign{
  text-align: center;
}

.leftAlign{
  text-align: left;
}

#upperDiv, #lowerDiv{
  grid-column: 1/7;
  display: grid;
  grid-template-columns: 45% auto;
  grid-gap: 16px;
}

#lowLeftDiv{
  display: grid;
  grid-gap: 12px;
  grid-template-rows: 65% 10% auto 12%;
}

#lowRightDiv{
  display: grid;
  grid-gap: 16px;
  grid-template-rows: 15% 12% 12% auto 15%;
}

#lowLeftDiv>*, #lowRightDiv>*{
  /*background-color:rgba(158, 32, 32, 0.685);*/
}

.flexBox{
  display: flex;
}

.spaceAround{
  justify-content:space-around;
}

#upDiv1{
  font-size: 12px; /*12px = 9pt*/
  text-align: center;
}

#logo{
  font-style: normal;
  font-weight: bold;
  font-size: 80px; /*=60pt*/

  line-height: 60px;
  color: #D90000;
}

#upDiv2{
  display: grid;
  grid-gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#weight, #calories{
  margin-top: 14.4px;
  text-align: center;
}

#weight{
  line-height: 20px;
}

#calories{
  line-height: 12px;
}

#kitKatSlogan{
  display: grid;
  grid-template-columns: 55% auto;
  grid-template-rows: 60% auto;
}

#kitKatThing{
  text-align: left;
  font-size: 32px;
}

#hashtags{
  margin-top: -10px;
  grid-column: 1/3;
  text-align: center;
}

#upDiv2>*{
  /*background-color: rgba(177, 61, 61, 0.523);*/
}

#kitKatSlogan{
  grid-column: 1/3;
}

#upperDiv>*{
  /*background-color:rgba(127, 255, 212, 0.676);*/
}

#dailyVal{
  line-height: 17.6px;
}

#nutritionals{
  display: grid;
  grid-row: 1/2;
  grid-template-columns: 60% auto auto;
  grid-gap: 16px;

  line-height: 18.67px;

}

#nutritionals>*{
  /*background-color:rgba(36, 125, 96, 0.454);*/
}

#saturated, #transFats{
  margin-left: 40%;
}

#preparedIn{
  line-height: 20px;
}

#prep{
  font-size: 16px;
}

#inCanada{
  font-size: 20px;
}

#bottomDivSplit{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#webLinks{
  font-size: 9.33px;
  line-height: 11.2px;
  letter-spacing: 0.27px; /*=30/1000 tracking*/
}

.cocoa{
  font-size: 18.67px;
  line-height: 16px;
  letter-spacing: 0.27px; /*=30/1000 tracking*/

}

.track90{
  letter-spacing: 0.809px;
}

.track40{
  letter-spacing: 0.36px;
}

.tabbed{
  margin-left: 10%;
}

#bottomRight{
  display: grid;
  grid-template-columns: 38% auto;
  grid-gap: 20px;
}

#goodFood{
  line-height: 17.33px;
}

#kidsPhone{
  line-height: 17.33px;
  margin-left: 30%;
}

#pt16{
  font-size:21.33px;
  margin-bottom: -10px;
}




#info {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
  color: #555;
  width: 800px;
  margin: 0 auto 100px auto;
}
/*
#container>#nutrition-info {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 13px 35px auto;
}

#container>#nutrition-info>#dv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  line-height: 18px;
}

#container>#nutrition-info>#dv>#right {
  text-align: right;
}


} */