* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    
}

/** {border: 1px solid red} /*to test frame sizes */

.navbar{
    /*background-color: #00339b;*/
    background-color: #020e6c;   
    font-size: 0.7em;
    min-width: 360px;    
}
@media (min-width: 992px) {
    .navbar{
        /*background-color: #00339b;*/
        background-color: #020e6c;   
        font-size: 1.0em;    
    }
}

@media (max-width: 767.98px) {
    .navbar{
        /*background-color: #00339b;*/
        background-color: #020e6c;   
        font-size: 1.0em;    
    }    
}


.navbar-brand {
    min-height: 55px;
}

.navbar-default .navbar-nav li a {
    color: #ffffff
}

.navbar-default .navbar-nav li a:hover
{
    color: #f6b908;    
}

.navbar-default .navbar-nav li a.active{
    color: #00339b;
    background-color: #f6b908;
}

@keyframes slideInLeft {
    from {transform: translateX(500px);} 
    to {transform: translateX(-500px);} 
}


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

.truck img {
    display: table;
    position: relative;
    margin: auto;
    overflow: hidden;
    animation: fadeInAnimation ease 30s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;    
}

.truck { 
    position: fixed;
    bottom: 0;
    width: 100vw;  
    color: #f6b908;    
    min-height: 55px;
    line-height: 55px;
    text-align: center;
    vertical-align: bottom;  
    animation-name: slideInLeft;
    animation-duration: 30s; 
    animation-timing-function: ease-in-out; 
    animation-delay: 0s; 
    animation-iteration-count: infinite; 
    animation-direction: normal;
    animation-fill-mode: none; 
}


section {
    padding-top: 150px;
    /* background: linear-gradient(180deg, rgba(246,246,247,1) 0%, rgba(0,51,155,1) 100%, rgba(0,3,10,1) 100%); */
    /* background: linear-gradient(white 0%, #0015b0 45%, #030a42 100%); */
    background: linear-gradient(#030a42 0%, #0015b0 45%, white 100%);
    min-height: 100vh;
    max-width: 100vw;
    min-width: 360px;    
    z-index: 1;    
}

#home .container-fluid {    
    padding-top: 0px;   
    background-image: url(images/mosaicleftside3.png);
    background-repeat: no-repeat;  
    min-width: 360px;  
}

#home .lp {
    padding-top: 50px;
    padding-left: 100px;
    text-align: left;
    color: white; 
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b;
}

#home .land-image {
    margin-top: 250px;    
    margin-bottom: 0em;
    padding: 0px;
    padding-left: 60px;    
}

#home .card {
    position: relative;   
    width: 400px;       
    background: transparent;
    border: 0;    
}

#home .land-image img {      
    object-fit: cover;
    overflow: hidden;
}

@media (max-width: 1399.98px) {
    #home .land-image {
        margin-top: 350px; 
        margin-left: 0px;    
        padding-left: 0px;
    }   
    #home .card {         
        width: 320px;       
        background: transparent;    
    }    
}

@media (max-width: 991.98px) { 
    #home .land-image {
        margin-top: 0px;     
        margin-left: 400px;
        padding-left: 0px;
    }   
    #home .card {         
        width: 320px;       
        background: transparent;    
    }
}

@media (max-width: 767.98px) { 
    #home .land-image {
        margin-top: 0px;     
        margin-left: 0px;
        padding-left: 250px;
    }   
    #home .card {         
        width: 300px;       
        background: transparent;    
    }    
}

@media (max-width: 575.98px) { 
    #home .land-image {
        margin-top: 0px;     
        margin-left: 0px;
        padding-left: 100px;

    }   
    #home .card {         
        width: 250px;       
        background: transparent;    
    }   
}

#product h1 {
    color: #f6b908;
    padding: 20px 0px 0px 50px;
}

#product .btn {
    padding-top: 40px;
    padding-bottom: 20px;
}
#product .btn:hover .image-fin{   
    background-color: #a9dbf6;
    opacity: 0.7;
}
#product .btn:active .image-fin{   
    background-color: #a9dbf6;
    opacity: 0.9;
}
#product .btn:hover .image-proc{   
    background-color: #f0ee6a;
    opacity: 0.7;
}
#product .btn:hover .image-prod{   
    background-color: #b6f6ad;
    opacity: 0.7;
}
#product .btn:hover .image-wh{   
    background-color: #f0b567;
    opacity: 0.7;
}
#product .btn:hover .image-sales{   
    background-color: #ddbcf5;
    opacity: 0.7;
}
#product .btn:hover .image-dist{   
    background-color: #b22227;
    opacity: 0.7;
}

#product .box {   
   display: flex;
   margin: auto;
   align-items: center;
   justify-content: center; /* not really needed with auto margin on img*/
 }
 #product .box img {   
   transition: 0.5s;
   animation: rotation 60s infinite linear; 
 }

#offcanvas1 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideFinance.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem;    
    min-width: auto;    
}
#product .offcanvas-head-fin {
    color: #00339b;
    background-color: #a9dbf6; 
    height: 80px;  
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-fin img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-fin h5{
   padding-top: 50px;
}
#product .offcanvas-body-fin {
    color: #00339b;
    margin: 0%;
    padding: 10px;    
}
#product .offcanvas-body-fin-pics img.pic1{
    max-width: 360px; 
    margin-top: 0rem;    
    padding-top: 0%;
    margin-left: 20px;    
}
@media (max-width: 575.98px) { 
    #product .offcanvas-body-fin-pics img.pic1{
        max-width: 280px;       
        padding-left: 0%; 
    }
}

#offcanvas2 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideProcure.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem;    
    min-width: auto;    
}
#product .offcanvas-head-proc {
    color: #00339b;
    background-color: #f0ee6a;
    height: 80px;   
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-proc img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-proc h5{
   padding-top: 50px;
}
#product .offcanvas-body-proc {
    color: #00339b;
    margin: 0%;
    padding: 10px;    
}
#product .offcanvas-body-proc-pics img.pic1{
    max-width: 360px; 
    margin-top: 0rem;    
    padding-top: 0%;
    margin-left: 20px;    
}
@media (max-width: 575.98px) { 
    #product .offcanvas-body-proc-pics img.pic1{
        max-width: 280px;       
        padding-left: 0%; 
    }
}

#offcanvas3 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideProd.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem; 
    min-width: auto;     
}

#product .offcanvas-head-prod {
    color: #00339b;
    background-color: #b6f6ad;
    height: 80px;   
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-prod img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-prod .tit1 h5{
    padding: 0%;
    padding-top: 30px;  
    margin: 0%;
}
#product .offcanvas-head-prod .tit2 h5{
    padding: 0%;
    margin: 0%;

 }
#product .offcanvas-body-prod {
    color: #00339b;
    margin: 0%;
    padding-left: 10px;    
}

#product .offcanvas-body-prod img{
    margin-left: 12rem;   
    margin-top: -13.0rem;   
    padding: 0%;     
    max-width: 200px;   
}
#product .offcanvas-body-prod-pics img.pic1{
    max-width: 360px; 
    margin-top: 0rem;    
    padding-top: 0%;
    margin-left: 20px;    
}

@media (max-width: 575.98px) { 
    #product .offcanvas-body-prod img{        
        max-width: 180px;   
    }
    #product .offcanvas-body-prod-pics img.pic1{
        max-width: 280px;      
        padding-left: 0%; 
    }    
}


#offcanvas4 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideStorage.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem; 
    min-width: auto;      
}

#product .offcanvas-head-wh {
    color: #00339b;
    background-color: #f0b567;
    height: 80px;  
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-wh img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-wh h5{
   padding-top: 50px;
}
#product .offcanvas-body-wh {
    color: #00339b;
    margin: 0%;
    padding: 0px;    
}
#product .offcanvas-body-wh .wh1{    
    padding: 10px 10px 0px 10px; 
    margin: 0%;   
}
#product .offcanvas-body-wh .wh2{    
    padding: 0%;
    margin: 0%;    
}
#product .offcanvas-body-wh-pics img.pic1{
    max-width: 360px; 
    margin-top: 0rem;    
    padding-top: 0%;
    margin-left: 20px;    
}
@media (max-width: 575.98px) { 
    #product .offcanvas-body-wh-pics img.pic1{
        max-width: 280px;      
        padding-left: 0%; 
    }    
}

#offcanvas5 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideSales.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem; 
    min-width: auto;     
}
#product .offcanvas-head-sales {
    color: #00339b;
    background-color: #ddbcf5;
    height: 80px;   
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-sales img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-sales h5{
   padding-top: 50px;
}
#product .offcanvas-body-sales {
    color: #00339b;
    margin: 0%;
    padding: 10px;    
}
#product .offcanvas-body-sales-pics img.pic1{
    max-width: 360px; 
    margin-top: 0rem;    
    padding-top: 0%;
    margin-left: 20px;    
}
@media (max-width: 575.98px) { 
    #product .offcanvas-body-sales-pics img.pic1{
        max-width: 280px;       
        padding-left: 0%; 
    }    
}

#offcanvas6 {
    margin: auto;
    height: auto;
    padding-top: 20px;   
    background-image: url(images/mosaicrightsideDist.png);
    background-repeat: no-repeat;
    background-position-x: -4rem; 
    background-position-y: 5rem; 
    min-width: auto;     
}
#product .offcanvas-head-dist {
    color: #00339b;
    background-color: #b22227;
    height: 80px;   
    margin: 0%;
    padding: 0%;
}
#product .offcanvas-head-dist img{
    height: 80px;
    padding: 0px;
}
#product .offcanvas-head-dist .tit1 h5{
    padding: 0%;
    padding-top: 30px;  
    margin: 0%;
}
#product .offcanvas-head-dist .tit2 h5{
    padding: 0%;
    margin: 0%;
 }
#product .offcanvas-body-dist {
    color: #00339b;
    margin: 0%;
    padding: 10px;    
}

 @media (max-width: 991.98px) { 
    #product .btn {
        padding: 0px;
    } 
    #product .box {        
        max-width: 500px;
        max-width: 500px;
    }  
}
@media (max-width: 767.98px) { 
    #product .box {        
        max-width: 400px;
        max-width: 400px;
    }  
}
@media (max-width: 575.98px) {
    #product .box {
        max-width: 280px;
        max-width: 280px;
    }  
}
@media (max-width: 375.98px) {
    #product .box {        
        max-width: 200px;
        max-width: 200px;
    }  
}

 @keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }


#industry h1 {
    color: #f6b908;
    padding: 20px 0px 0px 50px;
}
#industry .container-fluid {    
    padding-top: 0px;   
    background-image: url(images/IndustryBG5.png);
    background-repeat: no-repeat;
    background-position-x: 1rem; 
    background-position-y: 5rem;     
    min-width: 360px; 
    min-height: 100vh;    
}

#industry .lp {
    padding-top: 10px;
    padding-left: 100px;
    text-align: left;
    color: white; 
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b;    
    max-width: 1400px;
}


@media (max-width: 1250px) {
    #industry .container-fluid {    
        padding-top: 0px;   
        background-image: url(images/IndustryBG4.png);
        background-repeat: no-repeat;
        background-position-x: 1rem; 
        background-position-y: 5rem;     
        min-width: 360px; 
        min-height: 120vh;    
    }
    #industry .lp {
        padding-top: 5px;
        padding-left: 10px;
    }     
}
@media (max-width: 991.98px) {
    #industry .container-fluid {    
        padding-top: 0px;   
        background-image: url(images/IndustryBG3.png);
        background-repeat: no-repeat;
        background-position-x: 1rem; 
        background-position-y: 6rem;     
        min-width: 360px; 
        min-height: 150vh;    
    }
    #industry .lp {
        padding-top: 5px;
        padding-left: 10px;
    }    
}
@media (max-width: 705px) {
    #industry .container-fluid {    
        padding-top: 0px;   
        background-image: url(images/IndustryBG2.png);
        background-repeat: no-repeat;
        background-position-x: 0.2rem; 
        background-position-y: 11rem;     
        min-width: 360px; 
        min-height: 120vh;    
    }
    #industry .lp {
        padding-top: 5px;
        padding-left: 10px;
        max-width: 340px;
    } 
    
}

#partner h1 {
    color: #f6b908;
    padding: 20px 0px 0px 50px;
}
#partner .container-fluid {    
    padding-top: 0px;
    position: relative; 
    text-align: auto;  
    color: white; 
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b; 
    background-image: url(images/mosaicleftside3.png);
    background-repeat: no-repeat;  
    min-width: 360px; 
    min-height: 100vh;    
}
#partner .container-fluid img{
    margin-top: auto;
}

#partner .lp {
  position: absolute;
  top: 8px;
  left: 0px;
  padding-top: 8rem;
  padding-left: 2rem;
  padding-right: 60%;  
}
#partner .top-left {
    max-width: 10%;
    position: absolute;    
    top: 1px;   
    left: 16px
}
@media (max-width: 1585px) {      
    #partner .lp {
        padding-top: 6rem;
        padding-left: 2rem;
        padding-right: 60%; 
    }  
}
@media (max-width: 991.98px) {
    #partner .top-left {        
        max-width: 20%;        
    }   
    #partner .lp {
        position: relative;
        padding-top: 0rem;
        padding-left: 0rem;
        padding-right: 0rem; 
    } 
}                   



#mobile h1 {
    color: #f6b908;
    padding: 20px 0px 0px 50px;
}

#mobile .col-lg-6 {    
    min-width: 345px;
    margin: 1px;
    padding: 0px;
    align-items: center;
    justify-content: center;    
    text-align:center;
    color: white;  
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b;
    line-height: 120%;
    background-color: #020e6c; 
}
#mobile .col-lg-6 p {
    padding-top: 10px;   
}

#mobile .col-lg-3 {    
    min-height: 500px;
    margin: auto;
    padding-top: 35px;
    padding-bottom: 35px;     
    align-items: center;
    justify-content: center;    
    background-color: #020e6c; 
}


#mobile .col-lg-auto {     
    margin: auto;
    padding-top: 30px;
    padding-bottom: 70px;
    align-items: center;
    justify-content: center;
    text-align:center;
    color: white;  
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b;
    line-height: 120%;    
    background-color: #020e6c;
}
#mobile .col-lg-auto p {
    padding-top: 30px;   
}



#contact {
  padding: 50px;
  padding-top: 50px;  
}

#contact h1 {
    color: #f6b908;
    padding: 120px 0px 30px 0px;
}

#contact .col-body {
    padding-left: 50px;
    text-align:left;
    color: white; 
    text-shadow: 0 0 10px #030a42, 0 0 10px #00339b;
    line-height: 98%;
}
#contact .google {
    color: #ffffff;
    text-decoration: none;
}
#contact .tel {
    padding-top: 20px;
}

@media (min-width: 992px) { 
    #contact .col-body { 
        padding: 50px;       
        padding-top: 0px;
    }   
    
}


/*#home {
    background: url(images/WebsiteLandingPageMozaicBG.jpg) no-repeat center center fixed;
    height: 100%;
    position: relative;
    width: 100%;
    background-size: cover;
    padding-top: 120px;
}*/

/*#products {
    padding-top: 250px;
}*/