main.css

body{
width:100%;
height:100%;
margin:0;
}
a{
	text-decoration:none;
	background-color:transparent;
	color:#ededed;
}
.inner-header
{
	width:80%;
	margin:auto;
}

@keyframes animationdem
{
	from{padding-left:0;
	font-size: 0px;}
	to{padding-left:20px;
	font-size: 20px;}
}
.content{
	min-height:600px;
}

.banner-content h1,p
{
	animation-name: animatezoom;
	animation-duration: 2s;
}
@media screen and (max-width:500px)
{
    .banner-content{
        position: relative;
        left:2%;
        background-color: rgba(0,0,0,0.7);
        max-width:270px;
        height:120px;
        padding:15px;
    }
    .banner-content h1
    {
        font-size: 20px;
        font-family: 'Architects Daughter';
    }
    .banner-content p
    {
        font-size:12px;
        padding-bottom: 10px;
         font-family: 'Aref Ruqaa';
    }
    footer{
		background-color:#1A237E;
		color:#fff;
		font-size:14px;
	}
    .container1{
		width:90%;
		margin:auto;
		overflow:hidden;
	}
   
    .button{
    color:#fff;
	background-color:#c9302c;
	border-color:#ac2925;
	box-shadow:inset 0 2px 4px rgba(0,0,0,0.125);
	padding:6px 8px;
	font-size:12px;
	border-radius:3px;
       
    }
.banner-image{
	padding-bottom:80px;
	margin-bottom:30px;
	text-align:center;
	color:#f8f8f8;
	height:70%;
	background:url("lll.jpg") no-repeat center;
	background-size:cover;
}
 .items{
	width:100%;
	display:block;
	padding:3px;
	margin-bottom:15px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:2px;
	float:left;
	margin-left:1%;
}
        .thumbnail{
	display:block;
	max-width:100%;
	height:auto;
}
.caption{
	color:#000;
	padding:0px 4px 4px;
	font-weight:bold;
	text-align:center;
	}
    .caption p
    {
        font-size: 12px;
    }
    .caption h2
    {
         font-family: 'Finger Paint';
        font-size:16px;
    }
   
#buttou
{
    position: absolute; left:8%; 
}
#butsell
{
  position:absolute; right:8%;
}
.container{
	width:70%;
	margin:auto;
	overflow:hidden;
	transition: all 1s;
}
    .inner-banner-image{
	padding-top:12%;
	width:80%;
	margin:auto;
        
}
    .inner-header
{
    display: flex;
	width:100%;

}
    .logo{
        flex: 2;

	height:30px;
        padding-top: 15px;
        padding-bottom:15px;
	font-size:20px;
	font-weight:bold;
	animation-name: animationdem;
	animation-duration: 2s;
         font-family: 'Josefin Sans';
}
   
    .header-link
{
    flex:1;
    margin-top:20px;
	float:right;
    margin-right:10px;
	font-size:12px;
	height:10px;
	padding:0px 0px;
	font-size:13px;
	font-weight:bold;
}
    
    #myBtn
    {
         
	float:right;
	font-size:12px;
	height:10px;
	padding:0px 0px;
	font-size:13px;
	font-weight:bold;

    }
      .locadisp {
    display: none; 
    position:fixed; 
    z-index: 1;
    padding-top: 50px;
          
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: #DCEDC8; 
    background-color: rgba(0,0,0,0.4); 
}
    #bababa
    {
        font-size:12px;
    }

.con-disp {
    background-color: #fefefe;
    margin: auto;
    padding: 10px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
    #saracont
    {
        display:flex;
        flex-direction: column;
    }
     #map
        {
            flex:2; order:2; margin-top:5%; margin-left: 40px;
            height:150px;
            width:70%;
            margin-bottom:10px;
           
            
        }
        #bababa
        {
        flex:1; order:1;
        }

}


@media screen and (min-width:501px)
    {
       
    .locadisp {
    display: none; 
    position: fixed; 
    z-index: 1;
    padding-top: 60px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: #DCEDC8; 
    background-color: rgba(0,0,0,0.4); 
}

.con-disp {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        .banner-content{
	position:relative;
	padding-top:3%;
	left:20%;
	padding-bottom:6%;
	overflow:hidden;
	margin-bottom:12%;
	background-color:rgba(0,0,0,0.7);
	max-width:660px;

}
        .banner-content h1
        {
             font-family: 'Architects Daughter';
        }
        .banner-content p
    {
       
         font-family: 'Aref Ruqaa';
    }
        .inner-banner-image{
	padding-top:12%;
	width:80%;
	margin:auto;
}
          footer{
		background-color:#1A237E;
		color:#fff;
		font-size:16px;
	}
    .container1{
		width:90%;
		margin:auto;
		overflow:hidden;
	}
         #saracont
    {
        display:flex;
   
    }
        .logo{
	float:left;
	height:50px;
/*padding:15px;*/
	font-size:20px;
	font-weight:bold;
	animation-name: animationdem;
	animation-duration: 2s;
             font-family: 'Josefin Sans';
}
        .logo img
        {
          height:50px;
        }
        #map
        {
            flex:2; order:2; margin-top:3%; margin-left: 20px;
            width:70%;
            height:300px;
        }
        #bababa
        {
        flex:1; order:1;
        }
        .header-link
{
	float:right;
	font-size:14px;
	height:50px;
	padding:15px 15px;
	font-size:16px;
	font-weight:bold;
}
        .banner-image{
	padding-bottom:30px;
	margin-bottom:10px;
	text-align:center;
	color:#f8f8f8;
	height:70%;
	background:url("lll.jpg") no-repeat center;
	background-size:cover;
	}

        .container{
	width:90%;
	margin:auto;
	overflow:hidden;
	transition: all 1s;
}
        .button,#sub{
	color:#fff;
	background-color:#c9302c;
	border-color:#ac2925;
	box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);
	padding:10px 16px;
	font-size:18px;
	border-radius:6px;
}
        .items{
	width:30%;
	display:block;
	padding:4px;
	margin-bottom:20px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:4px;
	float:left;
	margin-left:1%;
}
        .thumbnail{
	display:block;
	max-width:100%;
	height:auto;
}
.caption{
	color:#000;
	padding:0px 10px 10px;
	font-weight:bold;
	text-align:center;
	}
        .caption h2
        {
             font-family: 'Finger Paint';
        }
        
}
.animate 
{
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@keyframes animatezoom
{
	from {transform:scale(0)}
		to{transform: scale(1)}
}
.banner-content2
{
	position:relative;
	padding-top:6%;
	left:20%;
	padding-bottom:6%;
	overflow:hidden;
	margin-bottom:12%;
	background-color:rgba(0,0,0,0.7);
	max-width:660px;
	text-align:center;
	animation-name:example;
	animation-duration:1s;
}
.banner-content3
{
	position:relative;
	padding-top:6%;
	left:20%;
	padding-bottom:6%;
	overflow:hidden;
	margin-bottom:12%;
	background-color:rgba(0,0,0,0.7);
	max-width:660px;
	text-align:left;

	animation-name:example;
	animation-duration:1s;
}
form
{
	margin-left:20px;
}



 #baba
    {
       position:relative;
    }
#buttou
{
    position: absolute; left:8%;
}
#butsell
{
  position:absolute; right:8%;
}
.header
{
	background-color:#000;
	color:#fff;
	border-color:#080808;
	min-height:50px;
	border:1px solid transparent;
}

#username,#dob,#email
{
	width:30%;
	border:1px solid transparent;
	border-radius:4px;
}
@keyframes example
{
	from { font-size:0px;}
	to
    {
		font-size:20px;
	}
}
#butto
{
	position:absolute;
	top:0;
	right:0;
	background-color:black;
	color:white;
	border:1px solid transparent;
}
#login
{
	background-color:black;
	color:white;
	border:0.5px solid transparent;
}
.vbh
{
	animation-name:example;
	animation-duration:1s;
}
#txtHint
{
	position:absolute;
	left:300px;
	top:65px;
}