a {
    text-decoration: none;
    color: inherit;
}

    a:hover {
        text-decoration: none;
        color: inherit;
    }

.top-links a {
    font-size: 18px;
    margin: 0 10px;
    color: inherit;
    text-decoration: none;
}

.pointer {
    cursor: pointer;
}

.fs-6b {
    font-size: 14px;
}
.fs-7 {
    font-size: 12px;
}

.text-u {text-decoration:underline !important;}


.no-wrp {
    white-space: nowrap;
}

.circle-tag {
    border: solid 2px #4BB3D2;
    padding: 3px;
    background-clip: content-box; /* support: IE9+ */
    background-color: #4BB3D2;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: auto;
    line-height: 60px;
    color: #fff;
    margin-bottom: 5px;
}

    .circle-tag i {
        font-size: 25px;
    }

.max-w-200 {
    max-width: 200px;
}

.field:hover .circle-tag {
    border: solid 2px #87AB66;
    background-color: #87AB66;
}

.m-menu {
    background: #fff;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.home-prod {
    cursor: pointer;
    max-width: 180px;
    border: solid 1px #ccc;
    padding: 3px;
    border-radius: 10px;
}

    .home-prod.img {
        width: 100%;
        max-width: 155px;
    }

    .home-prod:hover {
        background: #efefef;
    }


.bg000 {
    background-image: url('../images/deco_01b.png');
    background-position-x: right;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 150%, 1220px) auto;
}

.bg000_h {
    background-image: url('../images/deco_01.jpg');
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 150%, 1220px) auto;
}

.bg06_h {
    background-image: url('../images/deco_04.png');
    background-position-x: right;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 150%, 367px) auto;
}
.bg06_e {
    background-image: url('../images/deco_04b.png');
    background-position-x: left;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 150%, 367px) auto;
}

.bg005 {
    background-image: url('../images/deco_01b.png');
    background-position-x: right;
    background-repeat: no-repeat;
    background-size: cover;    
    margin-bottom: 1em;
    background-size: clamp(100px, 150%, 1220px) auto;
    height:200px;

}

.bg001 {
    background-image: url('../images/deco_03b.png');
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 50%, 588px) auto;
}


.bg001_h {
    background-image: url('../images/deco_03.png');
    background-repeat: no-repeat;
    background-position: left top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 50%, 588px) auto;
}

.bg002 {
    background-image: url('../images/deco_03.png');
    background-repeat: no-repeat;
    background-position: left top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 70%, 588px) auto;
}
.bg002_h {
    background-image: url('../images/deco_03b.png');
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 70%, 588px) auto;
}

.bg003 {
    background-image: url('../images/deco_04.png');
    background-repeat: no-repeat;
    background-position: right top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 70%, 367px) auto;
}
.bg003_h {
    background-image: url('../images/deco_04b.png');
    background-repeat: no-repeat;
    background-position: left top;
    min-height: 80vh;
    margin-bottom: 1em;
    background-size: clamp(100px, 70%, 367px) auto;
}

    /*

css function called clamp which can define size with min & max values: 
clamp(<min-size>, <expected-size>, <max-size>)

width: clamp(100px, 10vw, 500px);
and yes my friend you can use that for background-size too.

background-size: clamp(1000px, 80%, 1500px) auto;
*IE support is questionable as always.
https://stackoverflow.com/questions/4055598/max-size-for-background-image-css

*/


.index-about-spacer {
    height: 150px;
}
.index-areas-spacer {
    height: 130px;
}

.index-products-spacer {
    height: 50px;
}

.index-contact-spacer {
    height: 150px;
}


.mb-6 {
    margin-bottom: 4rem !important;
}





 .list-group-item-bg {background: #EBF6F9;}










.m-fix-01 {
}



/* ====================== */
/*        MOBILE          */
/* ====================== */
/* ====================== */
/*    MEDIA QUERIES       */
/* ====================== */
/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
   

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
   

}
/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 990px to 1024px
*/
@media (min-width: 990px) and (max-width: 1024px) {
   

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 990px
*/
@media (min-width: 768px) and (max-width: 990px) {
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 990px) and (orientation: landscape) {
   
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
   
}


/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (min-width: 481px) and (max-width: 550px) {
    .bg000 {
        background-position-y: -100px;
        background-size: clamp(100px, 200%, 1220px) auto;
    }

    .bg000_h {
        background-position-y: -100px;
        background-size: clamp(100px, 200%, 1220px) auto;
    }


    .m-fix-01 {
        margin-top: 250px;
        width: 100% !important;
    }

    

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
@media (max-width: 480px) {

    .bg000 {
        background-position-y: -30px;
        background-size: clamp(100px, 200%, 1220px) auto;
    }

    .bg000_h {
        background-position-y: -30px;
        background-size: clamp(100px, 200%, 1220px) auto;
    }


    .m-fix-01 {
        margin-top: 250px;
        width: 100% !important;
    }

    .home-prod {       
        max-width: 132px;       
        margin: 0.5rem !important;
    }

}



@media (max-width: 380px) {

    .bg000 {        
        background-position-y: -30px;       
        background-size: clamp(100px, 200%, 1220px) auto;
    }

    .bg000_h {        
        background-position-y: -30px;        
        background-size: clamp(100px, 200%, 1220px) auto;
    }


    .m-fix-01 {
        margin-top:200px;
        width:100% !important;
    }

    .home-prod {
        max-width: 132px;
        margin: 0.5rem !important;
    }

}