@font-face {
  font-family: Avenir-Medium;
  src: url(Font/Avenir\ LT\ Std\ 55\ Roman.otf);
}

@font-face {
  font-family: Avenir-Heavy;
  src: url(Font/Avenir\ LT\ Std\ 85\ Heavy.otf);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Avenir-Medium;
  color: #3c3c3c;
}

@media screen and (min-width: 600px) {


body{
  width: 100%;
  height: 256.51vw;

}

.container {
    display: grid;
    grid-template-rows: 1011fr 913fr 551fr 159fr 643fr 63fr 785fr 1178fr 786fr 63fr 640fr 1525fr 585fr 62fr 551fr 1656fr 545fr 62fr 578fr 1583fr 589fr 63fr 614fr 1507fr 630fr 62fr 3092fr;
    grid-template-columns: 1250fr 279fr 67fr 494fr 1359fr 277fr 239fr 36fr 277fr 2205fr 268fr 1250fr;
    width: 100%;
    height: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #ffffff;
     margin: 0 auto;
}

.container  h1, h2, h3{
  font-family: Avenir-Heavy;
  color: #C41230;
  font-size: 2vw;
  padding-bottom: 8%;
}

.container p {
  font-size: 1.5vw;
} 

.section-01-background {
  grid-area: 1 / 2 / 6 / 12;
  background-image: url(Img/purepower_img_01.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-01 {
  grid-area: 2 / 4 / 3 / 8;
}

.section-01 img {
  width: 100%;
  height: auto;
}

.section-02 {
  grid-area: 4 / 5 / 5 / 6;
}

.section-02 img {
  width: 100%;
  height: auto;
}

.section-03-background {
  grid-area: 7 / 2 / 10 / 12;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-03 {
  grid-area: 7 / 2 / 10 / 9;
}

.section-03 img {
  width: 100%;
  height: 100%;
}

.section-04 {
  grid-area: 8 / 10 / 9 / 11;
  text-align: center;
}

.section-05-background {
  grid-area: 11 / 2 / 14 / 12;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-05 {
  grid-area: 12 / 3 / 13 / 7;
  text-align: center;
}


.section-06 {
  grid-area: 11 / 9 / 14 / 12;
}

.section-06 img {
  width: 100%;
  height: 100%;
}

.section-07-background {
  grid-area: 15 / 2 / 18 / 12;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-07 {
  grid-area: 15 / 2 / 18 / 9;
}

.section-07 img {
  width: 100%;
  height: 100%;
}

.section-08 {
  grid-area: 16 / 10 / 17 / 11;
  text-align: center;
}

.section-09-background {
  grid-area: 19 / 2 / 22 / 12;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-09 {
  grid-area: 20 / 3 / 21 / 7;
  text-align: center;
}

.section-10 {
  grid-area: 19 / 9 / 22 / 12;
}

.section-10 img {
  width: 100%;
  height: 100%;
}

.section-11-background {
  grid-area: 23 / 2 / 26 / 12;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-11 {
  grid-area: 23 / 2 / 26 / 9;
}

.section-11 img {
  width: 100%;
  height: 100%;
}

.section-12 {
  grid-area: 24 / 10 / 25 / 11;
  text-align: center;
}

.section-13 {
  grid-area: 27 / 2 / 28 / 12;
}

.section-13 video{
  width: 100%;
  height: 100%;
}

.section-14,
.section-15,
.section-16,
.section-17,
.section-18,
.section-19,
.section-20,
.section-21,
.section-22,
.section-23,
.section-24,
.section-25,
.section-26{
  display: none;
}

}


@media screen and (max-width: 600px) {

.section-01,
.section-02,
.section-03,
.section-04,
.section-05,
.section-06,
.section-07,
.section-08,
.section-09,
.section-10,
.section-11,
.section-12,
.section-13{    
  display: none;
}

body {
  width: 100%;
  height: 969.72vw;

}

.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 425fr 268fr 180fr 54fr 449fr 63fr 1375fr 200fr 548fr 176fr 63fr 1375fr 197fr 674fr 195fr 61fr 1375fr 200fr 676fr 190fr 65fr 1373fr 202fr 200fr 85fr 382fr 198fr 59fr 1379fr 194fr 616fr 204fr 61fr 780fr;
  grid-template-columns: 62fr 75fr 133fr 450fr 113fr 604fr 63fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #ffffff;
}

.container  h1, h2, h3{
  font-family: Avenir-Heavy;
  font-weight: 740;
  color: #C41230;
  font-size: 6vw;
  padding: 0 10% 5%;
}

.container p {
  font-size: 4vw;
  padding: 0 7%;
} 

.section-14-background {
  grid-area: 1 / 2 / 6 / 7;
  background-image: url(Img/mobile_purepower_img_01.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}


.section-14 {
  grid-area: 2 / 3 / 3 / 6;
}

.section-14 img {
  width: 100%;
  height: auto;
}

.section-15 {
  grid-area: 4 / 4 / 5 / 5;
}

.section-15 img {
  width: 100%;
  height: auto;
}

.section-16-background {
  grid-area: 7 / 2 / 11 / 7;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}


.section-16 {
  grid-area: 7 / 2 / 8 / 7;
}

.section-16 img {
  width: 100%;
  height: 100%;
}

.section-17 {
  grid-area: 9 / 2 / 10 / 7;
  text-align: center;
}

.section-18-background {
  grid-area: 12 / 2 / 16 / 7;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-18 {
  grid-area: 12 / 2 / 13 / 7;
}

.section-18 img {
  width: 100%;
  height: 100%;
}

.section-19 {
  grid-area: 14 / 2 / 15 / 7;
  text-align: center;
}

.section-20-background {
  grid-area: 17 / 2 / 21 / 7;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-20 {
  grid-area: 17 / 2 / 18 / 7;
}

.section-20 img {
  width: 100%;
  height: 100%;
}

.section-21 {
  grid-area: 19 / 2 / 20 / 7;
  text-align: center;
}

.section-22-background {
  grid-area: 22 / 2 / 28 / 7;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-22 {
  grid-area: 22 / 2 / 23 / 7;
}

.section-22 img {
  width: 100%;
  height: 100%;
}

.section-23 {
  grid-area: 24 / 2 / 27 / 7;
  text-align: center;
}

.section-24-background {
  grid-area: 29 / 2 / 33 / 7;
  background-color: #f2f2f2;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.section-24 {
  grid-area: 29 / 2 / 30 / 7;
}

.section-24 img {
  width: 100%;
  height: 100%;
}

.section-25 {
  grid-area: 31 / 2 / 32 / 7;
  text-align: center;
}

.section-26 {
  grid-area: 34 / 2 / 35 / 7;
}

.section-26 video{
  width: 100%;
  height: 100%;
}


}