html{
    height: 100%;
}
body{
    position: relative;
}
#d1{

    float: right;
    text-align: right;
    width: 700%;
    margin-top: -7px;
    
}
.c1{
width: 100px;    
}
img{
height: 180px;
margin-right: 5px;
margin-bottom: -50px;
margin-top: -50px;

}
.h1{
    position: absolute;
    margin-top: 60px;
    width: 120px;
    right: 150px;
    color: black;
}
.h1:hover{
    color: rgb(17, 155, 201);
}
.h2{
    position: absolute;
    margin-top: 40px;
    width: 120px;
    right: 200px; 
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.f1{
    position: absolute;
    height: 40px;
    margin-top: 40px;
    right: 95px;   
}
.f1:hover{
    transform: scale(1.1);
}
.f2{
    position: absolute;
    height: 40px;
    margin-top: 40px;
    right: 265px;   
}
.f3{
    position: absolute;
    height: 55px;
    margin-top: 35px;
    right: 30px;   
}
.f3:hover{
    transform: scale(1.1);
    
}
.e1{ 
    position: absolute;
    margin: -70px;
    left: 220px;
    width: 85%;
    height: 100px;
    text-align: right;
    background-color: orangered;
    border-radius: 20px;
    
    
}
#kategori{
    width: 250px;
    height: 280px;

}


footer {
    color: #fff;
    background-attachment: fixed;
    background-color:rgb(58, 52, 52);
    border: -1px solid #302c2c;
    bottom: 0;
    height: 205%;
    position: relative;
    width: 100%;   
}
#d2{
    color: #ccc;
    margin: 100px;
}
.p1{
    float: right;
    margin-top: 0%;
}

.l1:hover,.l2:hover,.l3:hover{
color:  rgb(17, 155, 201);



}
.l4:hover,.l5:hover,.l6:hover,.l7:hover{
    color: rgb(17, 155, 201);
    
    
}
.l8:hover,.l9:hover,.l10:hover,.l11:hover{
    color: rgb(17, 155, 201);
    

}
.l12:hover,.l13:hover{
    color: rgb(17, 155, 201);
    
}
.a1:hover,.a2:hover,.a3:hover{
        color: rgb(17, 155, 201);
    }
    .a1,.a2,.a3{
        color: black;
    }
.m1{
    color: azure;
}
.div3{
    width: 140px;

}
.l1,.l2,.l3,.l4,.l5,.l6,.l7,.l8,.l9,.l10,.l11,.l12,.l13{
    color: rgb(0, 0, 0);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.m1,.m2,.m3,.m4,.m5,.m6,.m7{
    color: white;
}
.m1:hover,.m2:hover,.m3:hover,.m4:hover,.m5:hover,.m6:hover,.m7:hover{
    color: white;
    color: rgb(17, 155, 201);
}
.z1{
    text-align: left;
}
.s1{
    border-style: solid;
    color: red;
}
.o1{
    color: whitesmoke;
    
}
.o1:hover{
    color: rgb(17, 155, 201);
}
#form{
    position: absolute;
    left: 260px;
    margin-top: 50px;
    
}

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 15px;
  font-size: 15px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
.y1{
    position: absolute;
    right: -10px;;
}