style.css

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	line-height: 1.6em;
	background-color:#f4f4f4;
	margin:0;
	padding:0;
}

/*Landing page*/

	#landpage{
		background-image:url('images/landing2.jpg');
		background-size: cover;
		background-position: center;
		height:100vh;
		display:flex;
		flex-direction: column;
		justify-content: center;
		color:#fff;
		align-items:center;
		text-align: center;
		padding: 0 40px;
	}

	#landpage h1 {
		font-size:70px;
		line-height: 1.2em;
		margin:0;
	}

	#landpage p {

		font-size:20px;
		color:#fff;
		margin-bottom: 20px

	}

	#landpage a {
		font-size:20px;
		text-decoration: none;

	}

	 .button2 {
	 	color: blue;
	 	border: #f4f4f4 solid 1px;
	 	padding:10px 40px;
	 	border-radius: 10px;
	 	color:#fff;
	}
	#landpage .button2:hover{
		background:#f4f4f4;
		color:#003366;

	}

/*End of Landing Page*/

.background{
	background-color:#35424a;
	color:#fff;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.container{
	width:80%;
	margin:auto;
	overflow:hidden;
}


header{
	background-color:#0E2F44;
	color:white;

}

header #branding{
	float: left;
}

header{
	border-bottom: 1px #f4f4f4 solid;
}

nav {
	float: right;
	margin-top:5px;
}

.current{
	color:#00CED1;
}

header ul{
	padding:0;

}
header li{
	list-style: none;
	display: inline;

}

#mainnav {
	margin-top: 8px;
}
header a{
	text-decoration: none;
	color:#fff;
	padding-right:20px;
}


#show-case{
	min-height: 300px;
	background-image: url('images/showcase.jpg');

	background-size:cover;
	background-position: center;
	text-align: center;

	color:#fff;

}
#show-case h1{
	line-height: 1.2em;
	font-size: 40px;
}

#newsletter{
	background-color:#35424a;
	color:#fff;

}

#newsletter h1{
	float:left;
	width:60%;
	margin-bottom:10px;

}
#newsletter form{
	float:right;
	width:40%;
	margin-bottom: 30px;

}

#newsletter input[type="email"]{
	margin-top:20px;
	width:140px;
	height: 25px;
	border-radius: 5px;

}

.button{
	height:30px;
	background:#FF7F50;
	border:0;
	color:#fff;
	padding: 0 15px 0 16px;
	border: 1px #f4f4f4 solid;
	border-radius: 5px

}


button:hover{
	font-weight: bold;
	background-color:#DAA520;
}

header a:hover{
	color:#f4f4f4;
	font-weight: bold;
}

.boxes {
	margin-top:30px;
}

.boxes .box{
	float:left;
	width:30%;
	text-align: center;
	padding:10px;
}

.boxes .box img{
	width:100px;
}


#mainbody{
	float:left;
	width:65%;
}

#sidebar{
	float:right;
	width:30%;
	margin-top:10px;
}

#services {
	padding:0;
}

#services li {

	border: 1px solid #ccc;
	background:#eee;
	margin-bottom: 10px;
	list-style:none;
	padding: 0 10px 0 10px;
}


#services{
	float: left;
	width:65%;

}

#sidequote{
	float: right;
	width: 30%;

	margin-top:15px;
}

#sidequote input, textarea{

	width:160px;
	height:25px;
}

#sidequote button {
	padding: 0 30px 0 30px;
}



footer{
	background-color:#0E2F44;
	padding:10px;
	text-align: center;
	color:#fff;
	margin-top: 100px;
}

#about-footer, #pricing-footer {
	margin-top: 230px;
}




/*Pricing page*/

#pricing-body {
	background-color:#001414;
}

#pricing-body h2 {
	color:#d3d3d3;
	text-align: center;
	margin-bottom: 0;
}

.columm {
	float:left;
	width:33.3%;
	box-sizing:border-box;
	list-style:none;
	padding:8px;


}

.columm li{
	font-size: 14px;
	background-color:#ddd;
	padding:12px;
	border:none;
	text-align:center;
	border-bottom: 1px solid #c0c0c0;
	transition: 0.3s;

}

.columm a{
	text-decoration:none;
	color:#fff;
}

.container .emph{
	background-color:#ccc;
}

.button {
	border:none;
	padding:10px 15px 10px 15px;
	background-color: #6dc066;
}

/*
.columm:hover  {
	box-shadow: 0 10px 15px 0 #000;
}
*/

.columm .head-item{
	font-size:18px;
	background-color:#3f3f3f;
	text-align:center;
	color:#fff;
}

.columm .head-item.blue-item{
	background-color:#6dc066;
	color:#fff;
}

.pricing-footer {
	margin-top:135px;
}


/*End of pricing page*/


@media(max-width: 768px){
	#services, #sidequote, .boxes .box, header #branding, header #mainnav, #newsletter h1, #newsletter form, #mainbody, #sidebar, .main #services, .main #sidequote{
		float:none;
		width:100%;
		text-align: center;
	}
	.boxes .box img{
	width:160px;
	}

	#sidequote input, #sidequote textarea, #sidequote button{
		margin-bottom:20px;
		width:300px;
		height:40px;
	}


/* Pricing*/
	.columm {
		float:none;
		width:100%;
	}

	.columm li {
		padding: 20px 0px;
		font-size:18px;
	}

	.columm .head-item {
		font-size: 24px;
	}
/* Ed=nd of Pricing*/


}/*End of media querieh*/