/* -- -- */
/* -- -- */
/* ------------------------  ---------------------- */
/* ------------------------  ---------------------- */
/* -- header banner -- */

#headerContainer{
width:100%;
float:left;
}

#headerBanner{
width:100%;
}

.headerBannerDektop{
display:block;
}

.headerBannerResponsive{
display:none;
}
/* -- header banner -- */


#banner{
width:80%;
}
/* ************************************************************************ */
/* ------------------------ MEDIA QUERY BREAK POINT ---------------------- */
/* ************************************************************************ */
@media screen and (min-width: 576px) and (max-width: 992px){
/* -- header banner -- */
#headerBanner{
width:100%;
}
    
.headerBannerDektop{
display:block;
}
    
.headerBannerResponsive{
display:none;
}
/* -- header banner -- */

#banner{
width:80%;
}
}

/* -- ******************************************************** -- */
/* -- ********************** MEDIA QUERY ********************* -- */
@media screen and (max-width: 575px){
/* -- header banner -- */
#headerBanner{
width:100%;
}
    
.headerBannerDektop{
display:none;
}
    
.headerBannerResponsive{
display:block;
}
/* -- header banner -- */

#banner{
width:80%;
}
}