@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body{
    margin:0;
    padding:0;
}

.container{
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.atas{
    /*height:119px;*/
    width:100%;
    /*background:linear-gradient(to bottom, #F53E2D, #FF6633);;*/
    background:white;
}

.atas .tut_cari{
    height:119px;
    width:1280px;
    
    margin:auto;
    /*border:1px solid blue;*/
    
    display:flex;
    justify-content:center;
    align-items:center;
}

.atas .kot_cari{
    width:60vw;
    display:flex;
	justify-content:center;
	flex-direction:row;
	flex-wrap:wrap;
    /*border:1px solid green;*/
}

.atas .input_cari{
    width:70%;
    /*border:1px solid blue;*/
}

.atas input{
    width:100%;
    height:45px;
    /*border-radius:0;*/
    border-top-left-radius:2px;
    border-bottom-left-radius:2px;
    padding-left:15px;
    padding-right:20px;
    
    /*font-size:18px;*/
    font-size: .875rem;
    /*letter-spacing:1.2px;*/
    border:none;
    background:#EFF0F5;
}

.atas .tom_cari{
    /*border:3px solid white;*/
    border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    
}

.atas button{
    background:#F57224;
    height:45px;
    width:45px;
    border:none;
    border-radius:2px;
    cursor:pointer;
}

.atas button:hover{
    background:#FB6445;
}

.atas .tom_cari ion-icon{
    font-size:20px;
    color:white;
    font-weight:bold;
}

/*------------------------------------------------------------------------------------KONTEN---------------*/

.konten{
    padding:40px 0;
    background:#F5F5F5;
}

.tut_konten{
    width:1280px;
    margin:auto;
    /*border:1px solid grey;*/
    
    display:flex;
	justify-content:center;
	flex-direction:row;
	flex-wrap:wrap;
}

.konten a{
    text-decoration:none;
}

.konten .kotak_konten{
    background:white;
    width:189px;
    height:300px;
    /*border:2px solid transparent;*/
    border-radius:3px;
    /*text-align:center;*/
    /*border-bottom:2px solid #dae1ea;*/
    
    display:flex;
    justify-content:top;
    flex-direction:column;
    /*align-items:center;*/
    /*flex-wrap:wrap;*/
    
    transition: all .2s ease-in-out;
    margin:8px 5px;
}

.konten .kotak_konten:hover{
    /*border:2px solid #ee4d2d;*/
    box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.22);
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.22);
}

.konten .kotak_konten img{
    width:189px;
    height:189px;
    border-radius:2px;
    /*vertical-align:top;*/
    margin-bottom:6px;
}

.konten .produk{
    font-size: 1rem;
    color: rgba(0,0,0,.87);
}

.konten .produk2{
    font-size: 14px;
    height: 36px;
    line-height: 18px;
    color: #212121;
}

.konten .produk3{
    font-size: 12px;
    height: 36px;
    line-height: 18px;
    color: #212121;
}

.konten .harga{
    font-size: 1rem;
    color: #ee4d2d;
}

.konten .tut_teks{
    padding:0 3px;
    /*border:1px solid red;*/
}

/*------------------------------------------------------------------------------------BAWAH---------------*/

.bawah{
    width:100%;
    border-top:4px solid #FF6633;
    background:#FBFBFB;
    padding:20px 0;
}

.tut_bawah{
    width:1280px;
    margin:auto;
    /*border:1px solid grey;*/
    
 /*   display:flex;*/
	/*justify-content:center;*/
	/*flex-direction:row;*/
	/*flex-wrap:wrap;*/
}




@media only screen and (max-width: 1280px){
    .atas .tut_cari{
        width:100vw;
    }
    
    .tut_konten{
        width:100vw;
    }
    
    .tut_bawah{
        width:100vw;
    }
    
}

@media only screen and (max-width: 980px){
    .konten .kotak_konten{
        width:calc(50vw - 30px);
        height:calc(50vw + 72px);
        /*border:1px solid green;*/
    }
    
    .konten .kotak_konten img{
        width:calc(50vw - 30px);
        height:calc(50vw - 30px);
    }
}