/* margin and padding  */
.no-padding {padding:0px;}
.no-margin {margin:0px;}


/* borders */
.border-bottom-dashed {border-top:0.1px ; border-left: 0px; border-right:0px; border-bottom: 01px ;  border-bottom-color:rgb(210,210,210); border-bottom-style:dashed;}
.border-bottom{border-top:0.1px ; border-left: 0px; border-right:0px; border-bottom: 0.3px ; border-color:rgb(210, 210, 210);border-style:solid;}

/* colors */
.background-darker2{background-color: rgb(147, 147, 147);}
.background-white {background-color:white;}
.color-bsg-green {color: #85af53; }

/* fonts  */
#home div, #home p, #home a, #home btn, #home li {font-size: 14px; line-height: 1.3;}
@media (max-width:992px) {
    #home div, #home p, #home a, #home btn, #home li {font-size: 12px; }
}
@media (max-width:767px) {
#home div, #home p, #home a, #home btn, #home li {font-size: 11px; }
  }

#home h1 {font-size: 24px; line-height: 1.2; margin-top: 40px;}
@media (max-width:992px) {
    #home h1 {font-size: 20px; line-height: 1.1}
}
@media (max-width:767px) {
#home h1 {font-size: 18; line-height: 1.1; margin-top: 30px ;}
  }
  @media (max-width:600px) {
  #home h1 { margin-top: 20px ;}
    }

#home h2 {font-size: 18px; line-height: 1.2; margin-top: 10px;}
@media (max-width:992px) {
    #home h2 {font-size: 16px; line-height: 1.1}
}
@media (max-width:767px) {
#home h2 {font-size: 14x; line-height: 1.1}
}


  a.text-decoration-none {text-decoration:none;}



/* block type 1: with floating-image */

.floating-image img{width:50%; }


/* left  */
.floating-image.left img {
    float:left; 
    /* margin-right:20px; */
    margin-bottom:0px;
}


.floating-image.left p, 
.floating-image.left h1, 
.floating-image.left h2, 
.floating-image.left div.wrap {
    /* margin-left: 40px; */
    overflow: hidden;
    padding-bottom:2px;
    /* padding-left: 40px; */
}

/* right  */

.floating-image.right img {
    float:right; 
    margin-left:20px;
}

.floating-image p, 
.floating-image h1, 
.floating-image h2, 
.floating-image div.wrap {
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom:2px;
    overflow: hidden;
}

div.paragraph-wrapper {
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom:2px;
}

@media (max-width:767px) {
    .floating-image p, 
    .floating-image h1, 
    .floating-image h2, 
    .floating-image div.wrap,
    div.paragraph-wrapper {
        padding-left: 30px;
    }
}
@media (max-width:600px) {
    .floating-image p, 
    .floating-image h1, 
    .floating-image h2, 
    .floating-image div.wrap,
    div.paragraph-wrapper   {
        padding-left: 20px;
    }
}


.floating-image span.paragraph-wrapper,
.floating-image span.paragraph-wrapper-fixed,  {
    overflow: auto;
    width: 100%;
    height: 100%;
}

/* block type 2: image to the side flipping to below or to the top*/
/* ********************************** */

/* see def of div.paragraph-wrapper above to handle margins and paddings */
/* the rest is handle with bootstrap grid */



/* block type 3: opage text blocks on top of image */
/* ********************************** */

.image-text-box-wrapper {
    margin-top: 30px; 
    margin-bottom: 0px;
    width:100%;
}
@media (max-width:992px) {}
@media (max-width:767px) {
        .image-text-box-wrapper { margin-top: 20px;  }
}


.image-text-box-wrapper.successor {
    margin-top: 0px; 
}

.image-text-box-wrapper.successor.detatched {
    margin-top: 20px; 
}

.image-text-box-wrapper.successor.auto-detatched {
    margin-top: 0px ; 
}
@media (max-width:600px) {
    .image-text-box-wrapper.successor.auto-detatched  { 
        margin-top: 20px;  }
}


.image-text-box-wrapper.successor.auto-detatched .image-text-box {
    padding-top:0px; 
}
@media (max-width:600px) {
    .image-text-box-wrapper.successor.auto-detatched .image-text-box { 
        padding-top: 20px;  }
}

.image-text-box {
    margin-right: 0px; 
    margin-left: 10px; 
    padding-left: 10px; 
    padding-top: 20px;
    padding-bottom: 10px; 
    padding-right: 10px; 
    width:100%;
}
@media (max-width:992px) {
    .image-text-box { 
        padding-top: 10px; 
        padding-bottom: 5px;  
    }
}
@media (max-width:767px) {
    .image-text-box { 
        padding-top: 7px; 
        padding-bottom: 1px; 
        margin-right: 15px; 
    }
}

.image-text-box.right {
    margin-right: 10px; 
    margin-left: 0px; 
}
@media (max-width:767px) {
    .image-text-box.right { 
        margin-left: 15px;
    }
}

/* opacity  */
.opacity-30{
    background-color:white;
    opacity: 0.7;
}
.opacity-20{
    background-color:white;
    opacity: 0.8;
}
.opacity-10{
    background-color:white;
    opacity: 0.9;
}
.opacity-0{
    background-color:white;
    opacity: 1.0 !important ;
}