*{
	margin:0;
	padding:0;
	list-style: none;
	text-decoration: none;
}	

/* ============================== */
/* ALL PAGES */
/* ============================== */

/* Define background colour */

body {
	width:100vw;
	height:100vh;
	background: linear-gradient(grey,beige,white);
}


/* Define button box */
.button_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	height: 90px;

}

/* Define button style */
button{
	width: 150px;
	height: 50px;
	background-color: lime;
	font-size: 18px;
	border-radius: 10px;
	margin: 1em 1em 1em auto;
	border: none;
	}

button a{
	color: black;
	font-weight: bold;
	animation: button 1.7s alternate infinite;
	
}

button a:hover{
	animation-play-state: paused;
}

button:hover{
	background: white;
	cursor: pointer;
}

/* button animation */

@keyframes button {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes title {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Define header style */

.header_container{
	width: 100%;
	height: 13vh;
	display: table;
	background-color: #101010;
}

.inner_header{
	width: 90%;
	margin: 0 auto;
}


/* Define logo style */

.logo_container{
	height: 100%;
	float: left;
}

.logo_container h1{
	height: 100%;
	padding-top: 10px;
	display: grid;
	color: red;
	font-family: "Arial Black";
	font-size: 28px;
	text-align: left;
}

.logo_container span{
	font-size: 20px;
	font-family: "Segoe Script";
	text-align: right;
	color: blue;

}

/* Define nav bar style */
.navigation{
	height:100%;
	float:right;
	padding-top: 30px;
}


.navigation a{
	height: 100%;
	float: left;
	padding: 0px 20px;

}

.navigation a:last-child{
	padding-right: 0;
}

.navigation a li{
	height: 100%;
	color: white;
	font-family:sans-serif;
	font-size: 18px;
	text-transform:uppercase;
}

.navigation a li:hover{
	background-color: grey;
	color: blue;

}

.navigation a li.active{
	background-color: white;
	color: black;
}

/* ============================== */
/* INDEX PAGE */
/* ============================== */

/* Define background image style */

.bg-image{
	background-image: linear-gradient(rgba(0,0,0,0.8), rgba(255,255,255,0.8)), url(../images/ledger-1428230_640.jpg);
	background-size: cover;
	background-position: center;
	width: 100vw;
	height: 100vh;
	
}

/* Define badge box */
.text_container{
	display: flex;
	flex-wrap: wrap;
}

.text_area{
	width: 100vw;
	margin: 10px;
}

.text_area h1 li{
	text-indent: 20px;
	line-height: 50px;
	color: white;
	font-family: arial;
}

.text_area p{
	font-style: italic;
	font-family: arial;
	font-size: 35px;
	text-align: center;
	font-weight: bold;
	color: black;
}

/* Define badge box */
.badge_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;

}

.imageboxes{
	width: 90px;
	margin: 10px;
}

.image{
	width: 80px;
}

/* ============================== */
/* CONTACT PAGE */
/* ============================== */


/* contact page: define contact title style */
.contact-title{
	margin-top: 2em;
	text-transform: uppercase;
	text-align: center;
	font-family: sans-serif;
}

.contact-title h1{
	font-size: 28px;
	color: #E10600;
	animation: title 1.5s alternate infinite;
}

.contact-title h2{
	font-size: 16px;
	color: black;

}

/* contact page: define message form style */
form{
	text-align: center;

}

.form-control{
	margin: 0 auto;
	box-shadow: 0px 0px 5px grey;
	background-color: white;
	width: 25em;
	color: black;
	font-size: 18px;
}

.form-control::placeholder{
	color: grey;
	font-size: 14px;
}

input{
	height: 2em;
}

textarea{
	resize: none;
	height: 10em;
}

form .submit{
	background:blue;
	border-color: transparent;
	border-radius: 6px;
	color: white;
	font-family: sans-serif;
	font-size: 1em;
	font-weight: bold;
	height: 2em;
	width: 5em;
	margin-top: 1em;
}

form .submit:hover{
	background:green;
	cursor: pointer;
}

/* contact page: define phone style */
.phone{
	margin-top: 2em;
	color: black;
	text-align: center;
	font-family: sans-serif;
}

.address{
	margin-top: 1em;
	color: black;
	text-align: center;
	font-family: sans-serif;
}


/* ============================== */
/* SERVCES PAGE */
/* ============================== */

/* Container 1: Text Box; */
.container1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	font-family: arial;
	margin-top: 10px;
	margin-bottom: 10px;

}

.flexboxes{
	width: 250px;
	margin: 10px;
	border: 3px solid;	
	background-color: none;
	min-height: 200px;

}

.flexboxes h2{
	text-align: center;
	background-color: grey;
	color: white;

}

.flexboxes li{
	color: black;
	padding: 5px;
	list-style: none;
}

/* \27B2-arrow, \2752-box \2756-star \27A1=arrow \2705-check, \2705-bold check */
.flexboxes li:before{
	content: "\2756"; 
	color: blue;
	margin-right: 10px;
}

.text-blocks4 {
	text-indent: 100px;
	background-color: none;
	color: black;
	line-height: 50px;
}

/* ============================== */
/* PRICING PAGE */
/* ============================== */

/* Container 2: Text Box; */
.container2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	font-family: arial;
	margin-top: 10px;
	margin-bottom: 10px;

}

.prices{
	width: 250px;
	margin: 10px;
	border: 3px solid;	
	background-color: none;
	min-height: 200px;

}

.prices h2{
	text-align: center;
	background-color: grey;
	color: white;

}

.prices h1{
	text-align: center;

}

.prices li{
	color: black;
	padding: 5px;
	list-style: none;
}

/* \27B2-arrow, \2752-box \2756-star \27A1=arrow \2705-check, \2705-bold check */
.prices li:before{
	content: "\2756"; 
	color: blue;
	margin-right: 10px;
}