style.css

@media only screen and (max-width:450px) {
	
	.footer{
		width:50%;
		height:50%;
		
	}
	
	
}

@media only screen and (max-width:450px) {
  /* For mobile phones: */
 .aa,.sea , .ab , .mein, .rew ,.celumn, .centent ,.shew,.bten{
padding-left:-4%;
 width:50%;
 }
}
@media only screen and (max-width:450px) {
  /* For mobile phones: */
.mein, .rew ,.celumn, .centent ,.shew,.bten,.at , .at2 , .at3 {
padding-left:-4%;
 width:50%;
margin-left:-40%;
 }
}


body {
  padding: 20px;
  font-family: Arial;
}

/* Center website */
.mein {
  max-width: 1000px;
  margin: auto;
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.rew {
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.rew,
.rew > .celumn {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.celumn {
  float: left;
  width: 33.33%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.rew:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.centent {
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.shew {
  display: block;
}

/* Style the buttons */
.bten {
  margin-left:15%;
  background-color: white;
  cursor: pointer;
}
.at{
border:1px solid gray;
padding:1%;
margin-left:50.5%;

}

.at2{
border:1px solid gray;
padding:1%;
margin-left:-12.7%
}

.at3{
border:1px solid gray;
padding:1%;
margin-left:-11.7%;

}
.bten:hover {
  background-color: gray;
}

.bten.active {
  color: black;
}
  .vid{
	 	 
	 max-width: 100%;
  height: auto;
	  
  }

 .add{
	
	width:47%;
	height:50%;
	float:right;
	margin-right:1%;
}
 .dot {
  height: 40px;
  width: 50px;
  background-color: black;
  border-radius: 50%;
  color:white;
  display: inline-block;

}
 
 .foinput , select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color:black;
  color:white;
}

.fosub {
  width: 50%;
  background-color: #404040;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  
}

.fosub:hover {
  background-color: #45a049;
}
.sea{
  width: 40%;
  box-sizing: border-box;
  border: 1px solid gray;
  border-radius: 4px;
  font-size: 16px;
  margin-top:-13%;
  margin-right:2%;
  float:right;
  background-color: white;
  background-image: url('s.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 8px 10px 8px 20px;
}
.header{
	margin-top:-1%;
	margin-left:-1%;
	background-color:black;
	padding:2%;
}

.footer {
   margin-left:-1%;
   left: 0;
   bottom: 0;
   width: 100%;
   height:45%;
   background-color: black;
   color: white;
   text-align: center;
}
.fa {
  padding: 10px;
  font-size: 30px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  
  color: white;
}
.fa-instagram {
   color: white;
}
.btc{
	border-style:ridge;
width:100px;
height:30px;
border-radius: 5px;
background-color:white;
padding:0%;
}

.aw{
margin-left:35%;
}
.div1{
margin-left:2px;
padding:0px;
float:left;
border-bottom:solid 1px gray;
border-top:solid 1px gray;
border-left:solid 1px gray;
border-right:solid 1px gray;
border-style:solid ;
width:20%;
height:7%;
}
li{
float:left;
 display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul{
	border-bottom:normal;
 list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.ai{
	margin-left:-20%;
	padding-left:5%;
}
.k{
	padding-top:-55%;
	width:-10%;
	height:-10%;
}
.aa{
	margin-top:-1.9%;
	font-family:Impact, Charcoal, sans-serif;
	letter-spacing:2px;
	word-spacing:10px;
	padding-left:43%;
}
.aq{
	padding-left:17%;
	
}
.ab{
	margin-top:-1.9%;
	padding-left:30%;
}
.ao{
	
}
.ac{
	margin-top:46%;
	padding-left:0%;
}
h3 {
	font-family:Lucida Sans Unicode;
	padding-left:12%;
    display: flex;
    width: 90%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h3:before,
h3:after {
	content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}

h3:after {
    margin: 0 0 0 20px;
}
.rate{
	font-family:"Courier New", Courier, monospace;
	font-size:30px;
	margin-top:0%;
	padding-top:0%;
	text-align:center;
	padding-left:5%;
}
.desc{
	font-family:"Courier New", Courier, monospace;
	margin-top:0%;
	padding-top:0%;
	text-align:center;
	padding-left:25%;
}
.am{
	
	padding-left:1%;
	float:left;
	margin-top:-1%;
	margin-left:1%;
}

.zoom {
  padding: 5px;
  transition: transform .2s;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.zoom:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.05); 
}




/* env */
body {
    background: white;
    min-height: 100vh;
}

h2 {
    margin: 30px 0;
    font: 700 2em/1.4 'Avenir', sans-serif;
    color: black;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.navbar1 {
  overflow: hidden;
  background-color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar1 a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}

.navbar1 a:hover, .dropdown:hover .dropbtn {
	text-decoration:underline;
  background-color: underline;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #white;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content .header {
  background: white;
  padding: 10px;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: white;
  height: 250px;
}

.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.column a:hover {
  background-color: #ddd;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

html,body{
	
width:100%;
height:40%;
padding:0;
margin:5px;
}

slider{
display:block;
width:100%;
height:100%;
background-color: #1f1f1f;
overflow:hidden;
position:absolute;
}

slider > * {
position:absolute;
display:block;
width:100%;
height:100%;
background:#1f1f1f;
animation:slide 12s infinite;
overflow:hidden;
}

slide:nth-child(1){
left:0%;
animation-delay:-1s;
background-image:url(1.jpg);
background-size:cover;
background-position:center;
}

slide:nth-child(4){
animation-delay:2s;
background-image:url(4.jpg);
background-size:cover;
background-position:center;
}

slide:nth-child(3){
animation-delay:5s;
background-image:url(3.jpg);
background-size:cover;
background-position:center;
}

slide:nth-child(2){
animation-delay:10s;
background-image:url(2.jpg);
background-size:cover;
background-position:center;
}

slide p {
font-family:Comfortaa;
font-size :70px;
text-align:center;
display:inline-block;
width:100%;
margin-top:50px;
color:#fff;
}

@keyframes slide{
0% {left:100%; width:100%}
5%{left:0%;}
25%{left:0%;}
30%{left:-100%; width:100%;}
50%{left:-50%; width:0%;}
100%{left:100%; width:0%;}

}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
}

}