@charset "UTF-8";
/* CSS Document */


/*Desktop View*/

h1 {
	color: #0E473A;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	text-transform: capitalize;
	font-size: 100px;
	font-weight: 500;

}

.container {
  position: relative;
  width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

h2{
	align-content: right;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif';
	text-transform: capitalize;
	font-size: 55px;
}

body{
	background-color: #FFFFFF;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 100vh;
}
.logo{
	width: 20%;
	float: left;
}
.logo img{
	height: auto;
	widows: 80px;
	float: right;
}

h2{
	align: center;
	
	
	
}
.center {
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
 padding-top: 40px;
}

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

p6, p7{
	align-content: center;
	padding-left: 70px;
	padding-right: 70px;
}
.topnav{
	width: 75%;
	float: right;
	list-style: none;
	
}

.topnav li{
	background: #262626;
	width: 170px;
	border: 1px solid #fff;
	height: 50px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	float: left;
	line-height: 50px;
}
.topnav li a{
	text-decoration: none;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	color: #fff;
	text-transform: uppercase;
}

li:hover{
background: 000;
	
}
/*Tablet View*/

@media (max-width: 768px) {
	h1{	
	color:30E473A;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	text-transform: capitalize;
	font-size: 40px;
	font-weight: 500;
	}
}

img{
	margin-left: 80px;
	margin-right: 80px;
	margin-bottom: 30px;
	margin-top: 30px;
}
container {
text-align: center;
}

<div class="container">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
<img style="width: 172px; height: 122px;" alt="butterfly"
src="images/butterfly2.png">
</div>



/*Mobile View*/

@media (max-width: 400px) {
	h1{
	color:30E473A;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	text-transform: capitalize;
	font-size: 40px;
	font-weight: 500;
	}