/* you can add your own custom css here if you don't want to worry about SASS/SCSS */
 h2 { text-transform: capitalize;}

 .section img {
    width: 100%;
    max-width: max-content;
 }
 
 .com-content-article {
     padding-bottom: 40px; 
 }
 
 .logo {
         float: left;
    clear: both;
    height: 40px;
 }
 .navbar .container-fluid {
     background: #0d9347;
 }
 
                                   
.navbar-expand-lg .navbar-collapse {
    margin-left: 40%;
    margin-top: 7px;  
}
 .container {
     margin: 0 auto !important; 
 }

.navbar>.container, .navbar>.container-fluid, .navbar>.container-sm, .navbar>.container-md, .navbar>.container-lg, .navbar>.container-xl, .navbar>.container-xxl {
    max-height: 10vh; 
    background: transparent !important; 
}
.bg-dark { background: transparent !important; }

.home .mainBackgroundVideo {
    width: calc(100vw - 17px);
    height: 70vh;
    overflow: hidden;
    background: #000; 
}

.mainBackgroundVideo {
    width: calc(100vw - 17px);
    height: 40vh;
    overflow: hidden;    
}
.noVideo {
     background-attachment: fixed;
     background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
}
/**
.videoClip {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%);
}

.clipRL, .angleRL {
-webkit-clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 89%);
clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 89%);

   
}
.clipLR, .angleLR {
-webkit-clip-path: polygon(0 11%, 100% 0, 100% 89%, 0% 100%);
clip-path: polygon(0 11%, 100% 0, 100% 89%, 0% 100%);
}
**/

.containbg .noVideo {
     background-size: contain; 
  background-position: top;
}


.mainBackgroundVideo video {
    width: 100vw;
    height: 100vh;
    object-fit: cover; 
}
.home .mainBackgroundVideo .headerVideoBox { opacity: 0.65; }
                                       
.mainBackgroundVideo .imagefloater img {
    max-width: 50vw;
    margin: 0 auto;
    display: flex;

}
.mainBackgroundVideo .imagefloater {
    top: -5%; 
        animation: fadeInAnimation ease 3s
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    -webkit-animation: fadeInAnimation ease 3s
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards; 
}

.breadcrumb { 
    margin-top: 18px;
    font-size: 14px;
    background: rgba(0,0,0,0.03);
}
.breadcrumb-item a { color: #0D9347; }


-webkit-@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.row, main, .row>* { margin: 0 !important; }


.section h2 { 
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 16px;
    margin-bottom: 16px;    
}
.section.withBackground h2 { 
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 16px;
    margin-bottom: 16px;
    margin-top: 10px; 
}
    
.section { 
    padding: 75px 0; 
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.section:nth-of-type(1) {
    padding: 40px 0 75px 0;
}
.section.withBackground .container {
    margin: 75px auto; 
}
.section.withBackground h2, .section.withBackground h5, .section.withBackground li.section.withBackground p, .section.withBackground {
    color: #fff;                                                                    
}
.section li {
    margin: 10px 0; 
}
.twoBoxes {
    display: inline-block;
    width: 100%;
}
.twoBoxes > div {
    width: 48%;
    overflow: hidden;  

}
.twoBoxes.alignLeft > div {
    float: left; 
    margin: 1% 2% 0% 0%
}
.section.withBackground .twoBoxes.alignLeft > div:nth-of-type(2) {
    background: rgba(0,0,0,0.4);
    padding: 1% 2% 3% 2%;
}
.twoBoxes.alignRight > div {
    float: right; 
    margin: 1% 0 0 2%
}
.section.withBackground .twoBoxes.alignRight > div:nth-of-type(2) {
    background: rgba(0,0,0,0.4);
    padding: 1% 2% 3% 2%;
}


.threeBoxes {
    display: inline-block;
    width: 100%;
}
.threeBoxes > div {
width: 32%;
    margin: 0.6%;
    overflow: hidden;
    float: left;
    background: rgba(0,0,0,0.03);
}
.threeBoxes > div > div {
    padding: 2%; 
}
.productTable {
    width: 100%; 
}

.footer {
    background: #0d9347;
    padding: 0 0 100px 0; 
}
.footer label {
    color: #fff !important; 
}
.footer h2 {
text-align: center;
    padding-top: 30px;
    margin-bottom: 15px;
    font-size: 50px;
}

.loading { 
    width:100%; 
    height: 1000px;
    background: rgba(0,0,0,0.4);
    position: absolute;
    z-index: 1000;
    display: none;   
}


/*** Menu CSS ***/
.mod-menu__sub {
    display: none; 
}
.nav-link.deeper:hover .mod-menu__sub {
display: block;
    max-width: 200px;
    width: 100%;
    position: absolute;
    padding-top: 17px;   
}
.nav-link.deeper:hover .mod-menu__sub li {
    background: #602615;
}

.nav-link.deeper:hover .mod-menu__sub li a {
    border: none;
}
.nav-link.deeper:hover .mod-menu__sub li a:hover {
    border: none; 
}
.nav-link.deeper:hover .mod-menu__sub li {
    height: auto; 
    padding: 10px 0 10px 4px;
}
.nav-link.deeper:hover .mod-menu__sub li:hover {
    background: #0d9347;
}

.navbar {
    background: #0d9347 !important; 
    position: relative;
    z-index: 100; 
}
.navbar a { 
    color: #fff; 
    text-decoration: none;
}
li.nav-link { padding: 0; margin: 0; height: 24px; }
li.nav-link a { border: 1px solid transparent; padding: 5px 6px 8px; }                  
li.nav-link a:hover { border: 1px solid #fff; } 
.home > .siteBody.container {
    max-width: 100%; 
    padding: 0; 
}