/*
Written on 3/10/2021
Author: Irakli Isakadze
Last updated on 3/22/2021

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
---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;
  }
* * * * *

*/



/*---------------------------------------------*/
/* @font-face {
	font-family: fontFamily001;
	src: url(https://www.info.sendsationaltext.com/-dataSource/fonts/microbrew-soft-one.otf);
} */
/*---------------------------------------------*/



/*---------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	font-family: Arial;
}

body {
	background-color: cadetblue; /* 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;
}
/*---------------------------------------------*/



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

/*.title {
  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 {
	/* background-color: green; */
	color: #000000;
	text-align: center;
	mso-height-rule: exactly;
	padding: 25px 0 20px 0;
	/* font-family: sans-serif;
	font-size: 10px;
	font-style: italic; 
	line-height: 20px; */
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.text-s1 {
	/* background-color: darkkhaki; */
	color: white;
	display: block;
	/* font-family: sans-serif; */
	/* font-weight: bold; */
	text-align: center;
	line-height: 22px;
	margin: 0 auto 0 auto;
	padding: 15px 0 15px 0;
	width: 100%;
	/* text-decoration: none; */
	font-size: 12px;
}

.text-s2 {
	/* background-color: blueviolet; */
	text-decoration: none;
	/* color: white; */
	/* text-transform: uppercase; */
	font-stretch: condensed;
}

.text-s3 {
	/* background-color: cadetblue; */
	text-decoration: none;
	/* color: white; */
	/* text-transform: uppercase; */
	font-stretch: condensed;
	font-size: 16px;
}

.text-s4 {
	/* background-color: darkkhaki; */
	/* color: #000000; */
	display: block;
	/* font-family: sans-serif; */
	/* font-weight: bold; */
	text-align: center;
	line-height: 22px;
	margin: 0 auto 0 auto;
	padding: 15px 0 15px 0;
	width: 60%;
	text-decoration: none;
	font-size: 12px;
}

.text-s5 {
	/* background-color: coral; */
	/* text-decoration: none; */
	/* color: white; */
	/* text-transform: uppercase; */
	font-stretch: condensed;
	/* font-size: 16px; */
}

.text-s6 {
	font-size: 11px;
}
/*---------------------------------------------*/



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

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

.img-socialMedia {
/* --used for social media icons-- */
	
	/* background-color: aqua; */
	width: 10%;
	padding: 0 10px;
}

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



/*---------------------------------------------*/
.button-s1 {
/* button style #1 */
	
	width: 100%;
	text-align: center;
	padding: 6px 0;
}

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

.button-s3 {
/* button style #3 */
	
	display: block;
	width: 50%;

	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 {
/* button style #4 */
	
	display: block;
	width: 55%;

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

	color: #71243b;
	font-family: Arial;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	/* text-transform: uppercase; */
}

.button-s5 {
/* button style #5 */

	width: 100%;
	padding: 0;
}

.button-s6 {
/* button style #4 */
	
	display: block;
	width: 55%;

	padding: 10px 0px 10px 0px;
	border-radius: 3px;
	border: 1px solid #ffffff;
	margin: 0 auto 0 auto;
	/* background-color: #ffffff; */

	color: #ffffff;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	/* text-transform: uppercase; */
}

.button-sms {
/* button style SMS */
	/* background-color: goldenrod; */
	
	display: block;
	width: 100%;

	/* padding: 0 0 0 0;
	border-radius: 3px; 
	border: 2px solid #ffffff;*/ 
	margin: 0 auto 0 auto;

	color: #ffffff;
	/* font-family: Arial; */
	font-size: 22px;
	font-weight: bold;
	/* line-height: 1.1; */
	text-align: center;
	/* text-decoration: none; */
	text-transform: uppercase;
}
/*---------------------------------------------*/



/*---------------------------------------------*/
.sms-body {
/* part of SMS box where text is contained */
	
	/* background-color: red; */
	/* font-size: 12px;
	line-height: 20px; */
	color: #ffffff;
	text-align: center;
	padding: 20px 20px 20px 20px;
}

.sms-body-p1 {
	/* background-color: blueviolet; */
	display: block;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 10px 0 10px 0;
	font-size: 15px;
	line-height: 20px;
}

.sms-body-p2 {
	/* background-color: chocolate; */
	display: block;
	width: 100%;
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	font-size: 22px;
}

.sms-body-p3 {
	/* background-color: burlywood; */
	display: block;
	width: 100%;
	margin: 0 auto 0 auto;
	font-size: 11px;
	padding: 30px 0 0 0;
	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: 362px){
  /* ---iPhone 6/7/8/X  &  Galaxy S5  SIZE--- */
	
	
	.wrapper {
		max-width: 375px;
	}
	
	.footer {
		padding: 40px 0 30px 0;
	}
	
	.text-s1 {
		font-size: 100%;
		line-height: 25px;
	}
	
	.text-s2 {
		font-size: 90%;
	}
	
	.text-s3 {
		font-size: 115%;
	}
	
	.sms-body-p1 {
		font-size: 18px;
	}

	.sms-body-p2 {
		font-size: 25px;
	}

	.sms-body-p3 {
		font-size: 13px;
	}
	
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/





/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/* 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;
	}
	
	
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/





/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/
/* 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: 10px 15px 0px 15px;
	}
	
	.footer {
		padding: 65px 0 45px 0;
	}
	
	.img-logo {
		width: 70%;
	}
	
	.button-s1 {
		padding: 14px 0;
	}
	
	.button-s4 {
		width: 45%;
		font-size: 20px;
	}
	
	.button-s6 {
		font-size: 18px;
	}
	
	.button-sms {
		font-size: 30px;
	}
	
	.text-s1 {
		line-height: 32px;
		padding: 20px 0 25px 0;
	}
	
	.text-s2 {
		font-size: 120%;
	}
	
	.text-s3 {
		font-size: 170%;
	}
	
	.text-s5 {
		font-size: 120%;
	}
	
	.text-s6 {
		font-size: 120%;
	}
	
	.img-menu {
		width: 80%;
		padding: 0 10% 0 10%;
	}
	
	.sms-body-p1 {
		font-size: 22px;
		line-height: 25px;
	}

	.sms-body-p2 {
		font-size: 30px;
	}

	.sms-body-p3 {
		width: 80%;
		font-size: 17px;
		padding: 40px 0 0 0;
	}
	
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/





/* */