/*
Written on 3/5/2020
Author: Irakli Isakadze
Last updated on 11/3/2020

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
---DEFAULT settings customised for iPhone 5/SE size---
- - - - - - - - - - - - - - - - - - - - - - - - - - - -


* * * * *
* * usefull commands samples * *
  justify-self: center;
  align-self: center;
  display: grid;
  grid-gap: 10px;
  background-image: linear-gradient(#2f87c7, #153a63);

  .grid div:nth-child(even){
    background-color: red;
  }

  .grid div:nth-child(odd){
    background-color: green;
  }
* * * * *

*/



* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #580406; /* For browsers that do not support gradients */
  /*background-image: linear-gradient(#2f87c7, #153a63); /* Standard syntax (must be last)*/
}



/*---------------------------------------------*/
.wrapper {
  /* ---customised for iPhone 5/SE--- */
  /*background-color: yellow;*/
  max-width: 320px;
  margin: 0 auto 0 auto;
}

.text-01 {
  /*background-color: grey;*/
  width: 100%;
  text-align: center;
  padding: 20px 0 30px 0;
  line-height: 27px;
  /*display: block;
  margin: 0 auto 0 auto;*/
}

.text-02 {
  /*background-color: red;*/
  font-family: sans-serif;
  font-size: 14px;
  /* line-height: 20px; */
  color: #000000;
  text-align: center;
  padding: 10px 10px 40px 10px;
  font-weight: bold;
}

.text-03 {
  /*background-color: red;*/
  font-family: sans-serif;
  font-size: 14px;
  /* line-height: 20px; */
  color: #000000;
  text-align: center;
  /* padding: 10px 10px 40px 10px; */
  font-weight: bold;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.grid-01 {
  display: grid;
  padding: 20px 0 20px 0;
  grid-template-columns: 1fr 1fr;
  /*grid-template-rows: 1fr 1fr 1fr 1fr;  not needed, will auto populate*/
  /*grid-gap: 10px;*/
  grid-template-areas:
  "content-r1-gr1 content-r2-gr1";
}
.content-r1-gr1 {
  grid-area: content-r1-gr1;

  /*background-color: green;*/
  /*justify-self: center;*/
  text-align: center;
  padding: 0 0 0 0;
}
.content-r2-gr1 {
  grid-area: content-r2-gr1;

  /*background-color: red;*/
  /*justify-self: center;*/
  text-align: center;
  padding: 0 0 0 0;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.grid-02 {
  display: grid;
  /*background-color: #78e3de;*/
  padding: 0 0 0 0;
  width: 100%;
  grid-template-columns: 1fr;
  /*width: 100%;
  text-align: center;*/
  grid-template-areas:
  "sms-img"
  "sms-body";
}
.sms-img {
  grid-area: sms-img;

  /*background-color: purple;*/
  width: 100%;
  text-align: center;
  padding: 20px 0 10px 0;
}
.sms-body {
  grid-area: sms-body;

  /*background-color: red;*/
  font-family: sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #ffffff;
  text-align: center;
  padding: 10px 10px 40px 10px;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.img-logo {
  /* ---used for LOGO image controls--- */
  /*background-color: #f5ad42;*/
  width: 48%;
  text-align: center;
  /*justify-self: center;
  display: block;
  margin: 0 auto 0 auto;
  padding: 10px 0 20px 0;*/
}
.img-header2 {
  /* ---used for LOGO image controls--- */
  /*background-color: #f5ad42;*/
  width: 85%;
  text-align: center;
  /*justify-self: center;
  display: block;
  margin: 0 auto 0 auto;
  padding: 10px 0 20px 0;*/
}

.img-button {
  /* ---use only for image controls--- */
  /*background-color: #d1cec9;*/
  width: 72%;
  border-radius: 0;
}

.img-sms {
  /* ---use only for SMS image controls--- */
  /*background-color: #db9ecb;*/
  width: 150px;
}

.img-menu {
  width: 100%;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.button-s1 {
  width: 100%;
  padding: 0;
}

.button-s2 {
  /*background-color: grey;*/
  width: 100%;
  text-align: center;
  padding: 0px 0 20px 0;
  /*display: block;
  margin: 0 auto 0 auto;*/
}

.button-s3 {
  display: block;
  width: 80%;

  /*padding: 0 0 0 0;
  border-radius: 3px;
  border: 15px solid #153a63;*/
  margin: 0 auto 0 auto;
  /*background-color: #153a63;*/

  color: #ffffff;
  font-family: sans-serif;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.button-s4 {
  display: block;
  width: 70%;

  padding: 15px 0px 15px 0px;
  border-radius: 3px;
  border: 2px solid #ffffff;
  margin: 0 auto 0 auto;
  background-color: #000000;

  color: #ffffff;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.button-s5 {
  /*background-color: grey;*/
  width: 100%;
  text-align: center;

  /*display: block;
  margin: 0 auto 0 auto;*/
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.header{
  grid-area: header;

  /*background-color: pink;*/
  text-align: center;
  padding: 30px 25px 0px 25px;
}
.header2{
  grid-area: header;

  /*background-color: pink;*/
  text-align: center;
  padding: 20px 25px 25px 25px;
}

.title {
  grid-area: title;

  /*  grid-column: 1 / 3;  */
  /*grid-column-start: 1;
  grid-column-end: 3;*/
  /*grid-column-end: span 1;
  grid-row-end: span 2;*/

  background-color: #714c19;
  text-align: center;
  padding: 15px;
  font-family: sans-serif;
  font-size: 20px;
  mso-height-rule: exactly;
  line-height: 1.1;
  color: #ffffff;
}

.footer {
  grid-area: footer;

  /* background-color: #714c19; */
  color: #ffffff;
  text-align: center;
  mso-height-rule: exactly;
  padding: 20px;
  font-family: sans-serif;
  font-size: 12px;
  font-style: italic;
  line-height: 20px;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/* only run code {} if the statment is TRUE */
/* only rules that need to be owervritten needs to be mentioned
everything else DEFAULT setting take over */
@media only screen and (min-width: 360px){
  /* ---iPhone 6/7/8/X  &  Galaxy S5  SIZE--- */

  .wrapper {
    max-width: 375px;
  }

  .title {
    font-size: 23px;
  }

  .text-02 {
    font-size: 18px;
  }

  .text-03 {
    font-size: 17px;
  }

  .footer {
    font-size: 15px;
  }
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/



/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/* only run code {} if the statment is TRUE */
/* only rules that need to be owervritten needs to be mentioned
everything else DEFAULT setting take over */
@media only screen and (min-width: 400px){
  /* ---iPhone 6/7/8/X Plus  &  Pixel 2  SIZE--- */

  .wrapper {
    max-width: 430px;
  }

  .title {
    font-size: 23px;
  }

  .img-logo {
      width: 48%;
  }

  .text-02 {
    font-size: 19px;
  }

  .text-03 {
    font-size: 17px;
  }

  .footer {
    font-size: 15px;
  }
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/



/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/* only run code {} if the statment is TRUE */
/* only rules that need to be owervritten needs to be mentioned
everything else DEFAULT setting take over */
@media only screen and (min-width: 650px){
  /* ---iPad  SIZE--- */

  .wrapper {
    max-width: 650px;
  }

  .header{
    padding: 30px 15px 0px 15px;
  }

  .title {
    font-size: 30px;
    padding: 30px;
  }

  .img-logo {
      width: 48%;
  }

  .img-button {
    /* ---use only for image controls--- */
    /*background-color: #d1cec9;*/
    width: 72%;
  }

  .button-s4 {
    width: 55%;
    font-size: 17px;
  }

  .text-02 {
    font-size: 25px;
  }

  .text-03 {
    font-size: 30px;
  }

  .button-s5 {
    padding: 10px 0 10px 0;
  }

  .footer {
    font-size: 20px;
  }
  /*---------------------------------------------*/
  .grid-02 {
    padding: 0 0 0 0;
    grid-template-columns: 35% 65%;
    grid-template-areas:
    "sms-img sms-body";
  }
  .sms-img {
    text-align: center;
    padding: 20px 0 20px 0;
    margin: auto 0 auto 0;
  }
  .sms-body {
    font-family: sans-serif;
    font-size: 17px;
    line-height: 20px;
    text-align: left;
    padding: 30px 20px 30px 10px;
  }
  /*---------------------------------------------*/

}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/







/* */