html, body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}

.wrapper {
    width: 100vw;
  margin: 0px auto;
  padding: 0px;
  display: grid;
  border: none;
  
  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "wrapper-header"
    "wrapper-first"
    "wrapper-second"
    "wrapper-third"
    "wrapper-fourth"
    "wrapper-fifth"
    "wrapper-footer"
    ;
  }



  .wrapper-header {
    width: 100vw;
  margin: 0px auto;
  padding-top: 20vh;
  display: grid;
  border: none;
  background-image: linear-gradient(to bottom right, #80d0c7, #13547a);
  grid-template-columns: 4fr 4fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "info pic"

    ;
  }

  .pic{
   grid-area: pic;
   background: url("images/phones.png"); 
    padding: 0px;
    background-size: cover;
    width: 680px;
    height: 620px;
    margin: 20px;
    margin: 0px left;
  }

  .info{
  grid-area: info;
  padding: 0px;
    margin: 0px auto;
    color: #ffffff;
    text-align: center;
  }

  h1 {
  font-size: 7em;
  }
  h4 {
    font-size: 2em;
  }
  h5 {
    font-size: 1.5em;
  }
  h6 {
    font-size: 1.3em;
    margin-bottom: 10px;
  }
  a {
  	 font-size: 1em;
  	 color: #ffffff;
  	 text-decoration: none;
  }


 .wrapper-first {
  display: grid;
  border: none;
  /*background-image: linear-gradient(to bottom right, #868f96 , #596164);*/
 /* background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
 background-blend-mode: multiply,multiply; */
 background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  grid-template-columns: 4fr 4fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "measure text"
    ;
  }

  .wrapper-second {
  	display: grid;
 	 border: none;
  /*background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);*/
    background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 	background-blend-mode: screen;
  	grid-template-columns: 4fr 4fr;
    grid-column-gap: 0px;
	grid-row-gap: 20px;
  	grid-template-areas:
    "text monitor"
    ;
  }

    .wrapper-third {
  	display: grid;
 	 border: none;
 	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
    /*background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);*/
 	background-blend-mode: screen;
  	grid-template-columns: 4fr 4fr;
    grid-column-gap: 0px;
	grid-row-gap: 20px;
  	grid-template-areas:
    "pulse text"
    ;
  }

    .wrapper-fourth {
  	display: grid;
 	 border: none;
  /*background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);*/
    background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 	background-blend-mode: screen;
  	grid-template-columns: 4fr 4fr;
    grid-column-gap: 0px;
	grid-row-gap: 20px;
  	grid-template-areas:
    "text analyze"
    ;
  }

  .wrapper-fifth {
	  display: grid;
	  border: none;
	 /* background-image: linear-gradient(to right, #fdfcfb 10%, #ECE2DF); */
	  background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
	  grid-template-columns: 4fr 4fr;
   	  grid-column-gap: 0px;
	  grid-row-gap: 20px;
	  grid-template-areas:
	    "manage text"
	    ;
  }


   .text{
  grid-area: text;
  padding: 0 auto;
   background-size: cover;
    width: 776px;
    height: 380px;
    margin: auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    color: black;
    display: inline-block;
  vertical-align: middle;
  width: 35vw;
  font-size: 20px;
  }




.measure{
   grid-area: measure;
   background: url("images/measure.png"); 
    padding: 0px;
    background-size: cover;
    width: 414px;
    height: 746px;
    margin: 20px;
    margin: 0px auto;
  }



  .monitor{
   grid-area: monitor;
   background: url("images/monitor.png"); 
    padding: 0px;
    background-size: cover;
    width: 414px;
    height: 746px;
    margin: 20px;
    margin: 0px auto;
  }

  .pulse{
   grid-area: pulse;
   background: url("images/pulse.png"); 
    padding: 0px;
    background-size: cover;
    width: 414px;
    height: 746px;
    margin: 20px;
    margin: 0px auto;
  }

  .analyze{
   grid-area: analyze;
   background: url("images/analyze.png"); 
    padding: 0px;
    background-size: cover;
    width: 414px;
    height: 746px;
    margin: 20px;
    margin: 0px auto;
  }

  .manage{
   grid-area: manage;
   background: url("images/manage.png"); 
    padding: 0px;
    background-size: cover;
    width: 414px;
    height: 746px;
    margin: 20px;
    margin: 0px auto;
  }

  .wrapper-footer {
        width: 100vw;
        height: 20vh;
	  margin: 0px auto;
	  display: grid;
	  border: none;
	  background-image: linear-gradient(to bottom right, #80d0c7, #13547a);
	  grid-template-columns: 1fr;
	    grid-column-gap: 0px;
	  grid-row-gap: 20px;
	  grid-template-areas:
	    "footer"
    ;
  }

  .footer{
  grid-area: footer;
/*  background: url("images/title.png"); */
  padding: 0 auto;
    margin: auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    color: white;
    display: inline-block;
  vertical-align: middle;
  width: 50vw;
  font-size: 15px;
  }

  .link {
    font-size: 11px;
    color: white;
    font-weight: normal;
    text-decoration: none;
  }




/*---------------------------*/



  @media (max-width: 1200px) {

      .wrapper-header {
    margin: 0px auto;
    padding-top: 10vh;
    padding-bottom: 10vh;
    display: grid;
    border: none;
    background-image: linear-gradient(to bottom right, #80d0c7, #13547a);
    grid-template-columns: 1fr;
      grid-column-gap: 0px;
    grid-row-gap: 20px;
    grid-template-areas:
      "info"

      ;
    }

    .pic{
     grid-area: pic;
     display: none;
    }

    .info{
    grid-area: info;
    padding: 0px;
      margin: 0px auto;
      color: #ffffff;
      text-align: center;
    }

       .text{
  grid-area: text;
  padding: 0 auto;

    margin: auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    color: black;
    display: inline-block;
  vertical-align: middle;
  width: 30vw;
  font-size: 15px;
  }



  }

/*---------------------------*/


  @media (max-width: 550px) {

      html, body {
    margin: 0;
    height: 100vh;
    width: 100vw;
}


    .wrapper {
    width: 100vw;
  margin: 0px auto;
  padding: 0px;
  display: grid;
  border: none;
  
  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "wrapper-header"
    "wrapper-first"
    "wrapper-second"
    "wrapper-third"
    "wrapper-fourth"
    "wrapper-fifth"
    "wrapper-footer"
    ;
  }

h1 {
  font-size: 2em;
  }
  h4 {
    font-size: 1.2em;
  }
  h6 {
    font-size: 0.8em;
    margin-bottom: 10px;
  }
  a {
  	 font-size: 0.5em;
  	 color: #ffffff;
  	 text-decoration: none;
  }

  .wrapper-header {
  margin: 0px auto;
  padding-top: 10vh;
  padding-bottom: 10vh;
  display: grid;
  border: none;
  background-image: linear-gradient(to bottom right, #80d0c7, #13547a);
  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "info"

    ;
  }

  .pic{
   grid-area: pic;
   display: none;
  }

  .info{
  grid-area: info;
  padding: 0px;
    margin: 0px auto;
    color: #ffffff;
    text-align: center;
  }


  .wrapper-first {

  display: grid;
  border: none;
  /*background-image: linear-gradient(to bottom right, #868f96 , #596164);*/
 /* background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; 
 background-blend-mode: multiply,multiply; */
 background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "text"
    ;
  }

    .wrapper-second {

  display: grid;
  border: none;
  /*background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);*/
    background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: screen;

  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "text"
    ;
  }

    .wrapper-third {

  display: grid;
  border: none;
  background-image: linear-gradient(to right, #fdfcfb 10%, #ECE2DF);  
  grid-template-columns: 1fr;
    grid-column-gap: 0px;
  grid-row-gap: 20px;
  grid-template-areas:
    "text"
    ;
  }


   .text{
  grid-area: text;
  padding: 0 auto;

    margin: auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    color: black;
    display: inline-block;
  vertical-align: middle;
  width: 90vw;
  font-size: 15px;
  }




.measure{
   grid-area: measure;
   display: none;
  }

  .monitor{
   grid-area: monitor;
   display: none;
  }

  .pulse{
   grid-area: pulse;
   display: none;
  }

  .analyze{
   grid-area: analyze;
   display: none;
  }

  .manage{
   grid-area: manage;
   display: none;
  }

  .wrapper-footer {
        width: 100vw;
        height: 20vh;
	  margin: 0px auto;
	  display: grid;
	  border: none;
	  background-image: linear-gradient(to bottom right, #80d0c7, #13547a);
	  grid-template-columns: 1fr;
	    grid-column-gap: 0px;
	  grid-row-gap: 20px;
	  grid-template-areas:
	    "footer"
	    ;
  }

  .footer{
  grid-area: footer;
  padding: 0 auto;
    margin: auto;
    text-align: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    vertical-align: middle;
    color: white;
    display: inline-block;
  vertical-align: middle;
  width: 50vw;
  font-size: 15px;
  }

  .link {
    font-size: 11px;
    color: white;
    font-weight: normal;
    text-decoration: none;
  }

  }