*{
			margin: 0;
			padding: 0;
		}
		.nav{
			height: 50px;
			background-color:blue;
			color: white;
			padding: 5px;
		}
		.nav ul{
			line-height: 50px;
		}
		.nav ul li{
			display: inline-block;
			background-color: red;
			padding: 0 10px;
			margin: 0 5px;
			position: relative;

		}
		.nav ul li ul li{
			display: block;
		}
		.nav li:hover{
			background-color: green;
			/*color: red;*/
		}
		.nav ul li:hover ul{
			display: block;
		}
		.nav ul li .dropdown{
			position: absolute;
			top:50px;
			left: -20px;
			width: 140%;
			display: none;
		}
		.nav li a{
			color: white;
			text-decoration: none;
			font-weight: bolder;
			text-transform: uppercase;
		}
		.slide{
			height: 400px;
			border: 1px solid red;
			animation: slides 3s infinite;
			background-position: center;
			background-size: cover;
		}
		@keyframes slides{
			0%{background-image: url("img/back1.avif");}
			33%{background-image: url("img/back2.jpg");}
			66%{background-image: url("img/back3.jpg");}
			100%{background-image: url("img/back1.avif");}


		}

		.card{
			float: left;
			position: relative;
			margin: 100px 8px;
			/*margin: 100px auto;*/
			height: 450px;
			width: 23%;
			/*background-color: red;*/
			/*border: 1px solid red;*/
		}
		.card img{
			border: 5px solid #c27303;
			position: absolute;
			top: 80px;
			left: 70px;
			height: 150px;
			width: 150px;
			border-radius: 50%;
			opacity: 0;
			transition: all 0.5s;
			z-index: 11;
		}
		.body{
			position: absolute;
			z-index: 10;
			height: 80%;
			width: 100%;
			background-color: blue;
		}
		.body .content{
			position: absolute;
			top: 200px;
			left: 75px;
			color: white;
			text-align: center;
			/*margin-top: 400px;*/
		}
		.content h1{
			color: #c27303;
		}
		.footer{
			position: absolute;
			bottom: 90px;
			left: 0px;
			height: 20%;
			width: 100%;
			background-color: #56e41e;
			transition: all 0.5s;
			z-index: 1;
		}
		.card:hover img{
			opacity: 1;
			top: -80px;
		}
		.card:hover .footer{
			bottom: 0px;
		}