body
{
	 margin: 0;
 background-color: lightgray;
background-image:url(wallpaper2you_38698.jpg);
    background-size: cover;
 display:inherit
  	 font-family:Century Gothic;
	 font-style:bold;
}
::placeholder
{
	color:white;
}
.main-nav
{
	float:right;
	list-style:none;
	margin-top:-95px;
	margin-right:25px;
}
.main-nav li
{
 display:inline-block;
}
.main-nav li a
{
	color:white;
	text-decoration: none;
	padding: 5px 20px;
	font-family:"sans script",sans-serif;
	font-size: 12px;
}
 .main-nav li.active a
 {
	 border: 1px solid white;
 }
 .main-nav li a:hover
 {
	border:1px solid white;
	 background-color: lime;
	transition: all 0.1s ease-in;
 }
 .row
 {
	 max-width: 1300px;
	 margin-left:12px;
	 margin-right:1px;
 }
  .dropdown
 {
	 position:relative;
	 display:inline-block;
	 float:right;
	 list-style:none;
	 margin-top:6px;	
 }
  .dropdown .dropdtn
  {
	  font-size:14px;
	  border:1px solid white;
	  outline:none;
	  color:white;
	  padding:5px 15px;
	  background-color:gostwhite;
	  font-family:"sans script",sans-serif;
	  margin:0;
  }
  hr{
	  margin-top:-30px;
	  margin-right:350px;
	  margin-left:30px;
  }
   .logo img
 {
	 width:150px;
	 height:auto;
	 float:left;
	 margin-top:-100px;
 }
  .main-nav a:hover
  {
	  border:1px solid white;
    background-color: lime;
	transition: all 0.1s ease-in;
 }
  .dropdown:hover .dropdtn
  {
    background-color: #ddd;
	transition: all 0.1s ease-in;
  }
  .dropdown-content
  {
	  display: none;
	  position: absolute;
	  background-color: gostwhite;
	  min-width: 120px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index:1;
  }
  .dropdown-content a
  {
	  color: white;
	  padding:5px 15px;
	  text-decoration: none;
	  display:inline-block;
	  background-color:transparent;
	  font-size: 12px;
  }
 .dropdown:hover .dropdown-content
 {
 display: block;
 } 
.qur 
{
	margin-top:5px;
	margin-right:2px;
	margin-left:10px;
	font-size:30px;
	font-family:Mistral;
	color:#fff;
}
::placeholder
 {
	 color:white;
 }
 .dropdown-content a:hover
 {
	 background-color: red;
 }
 .logo img
 {
	 width:150px;
	 height:auto;
	 float:left;
 }
.login-box 
{ 
 margin-top:50px;
 font-weight:none;
 width: 320px;
 height: 350px;
 background: transparent;
 color: ghostwhite ;
 top:  50%;
 left: 50%;
 position: absolute;
 transform: translate(-50%,-50%);
 box-sizing: border-box;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6);
 padding: 30px 30px;
 margin-left:500px;
}

.UI
{
	border-bottom: 2.2px solid #fff;
	margin-top:-49px;
}
 button
 {
	cursor:pointer;
	border-bottom: 2.2px solid #fff;
	margin-top:-53px;
	margin-left:210;
	background:transparent;
	border-color: transparent  transparent mintcream transparent;
}
#cd
{
	margin-top:60px;
	margin-left:200	px;
	margin-right:30px;    
}
h1
{
	margin: 0;
	padding: 0 0 0;
	text-align: center;
	font-size: 20px;
}
html
{
	min-height:100%;
	overflow:hidden;
}
#text {display:none;color:red;font-size:.9em;}
.avatar
{
  width: 190px;
  height: 140px:
  border-radius: 50%;
  position: absolute;
  top: -100px;
  left: calc(45% - 80px);
}
.login-box  p
{
	margin: 0;
	padding: 0;
	font-weight: bold;
}
#username
{
	margin-left:35px;
	margin-top:15px;
	width:88%
}
#psw
{
	margin-top:15px;
	width:79.5%
}
.login-box  input
{
	margin-top:2px;
	width: 100%;
	margin-bottom: 15px;
}
.login-box  input[type="text"],input[type="password"]
{
	border: none;
	border-bottom: 2.2px solid #fff;
	background: transparent;
	outline: none;
	height: 27px;
	color: #fff;
	font-size: 13px;
}
.login-box  input[type="submit"]
{
	display: inline-block;
	border: 2.9px solid white;
	height: 40px;
	background: transparent;
	color: gray;
	font-size: 16px;
}
.login-box  input[type="submit"]:hover
{
	cursor: pointer;
	background: transparent;
	color: white;
}
.login-box  a
{
	text-decoration: number;
	font-size: 15px;
	color: #fff;
}
.login-box  a:hover
{
	color: #39dc79;
}
.ID
 {
	 color:#fff;
	 font-weight:bold;					
 }
#message-box
{
	display:none;
	background:#f1f1f1;
	color:#000;
	position: relative;
	padding:20px;
	margin-top: 10px;
}
#message-box p
{
	padding:10px 35px;
	font-size:10px;
}
.valid
{
	color:green;
}
.valid:before
{
	position: relative;
	left:-35px;
	content:"✔";
}
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}
#snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
span
{
 color:white;
font-size:12px;
cursor:pointer;
text-decoration: none;
padding: 5px 20px;
font-family:"sans script",sans-serif;
 display:inline-block;
}
.overlay span{
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.overlay span:hover, span:focus{
    color: #f1f1f1;
}

.contact-title
{
	margin-top: 100px;
	color:#fff;
	text-transform: uppercase;
	transition : all 4s ease-in-out;
}
.contact-title h1
{
	font-size:30px;
	line-height:10px;
}
.contact-title h2
{
	font-size: 16px;
}
form
{
	transition:all 4s ease-in-out;
}
.form
{
	width: 500px;
	background: transparent;
	border: none;
	outline: none;
	border-bottom: 1px solid gray;
	color: #fff;
	font-size:19px;
}
#myNav1 input
{
	height: 45px;
}

form .S
{
	background:#ff5722;
	border-color:transparent;
	color:#fff;
	font-weight:bold;
	letter-spacing:2px;
	height:50px;
	font-size:16px;
	margin-top: 2px;
}
form .S:hover
{
	background-color: orange;
    cursor:pointer;	
}
 .main-nav li span:hover
 {
	border:1px solid white;
	 background-color: lime;
	transition: all 0.1s ease-in;
 }
@keyframes foot {
  20% {
    transform: translate3d(34px, -16px, 34px) rotate(4deg);
  } 
  26% {
      transform: translate3d(34px, -10px, 4) rotate(0deg);
  }
  40% {
      transform: translate3d(56px, -6px, 56px) rotate(6deg);
  }
  44% {
      transform: translate3d(56px, 0, 0) rotate(0deg);
  }
   
}
@keyframes body {
  25% {
    transform: translateY(5px);
    transform: translateX(15px);
  }
  50% {
    transform: translateY(0);
    transform: translateX(30);
  }
  75% {
    transform: translateY(5px);
    transform: translateX(15px);
  }
}

@keyframes feet {
  25% {
    transform: translateY(5px);
    transform: translateX(15px);
  }
  50% {
    transform: translateY(0);
    transform: translateX(1);
  }
  75% {
    transform: translateY(5px);
    transform: translateX(15px);
  }
}
.man {
  width: 200px;
  margin-top: 90px;
  height: 360px;
  margin-left:600px;
}