@charset "utf-8";
/* CSS Document */
#hero{
    position: relative;
    top: 0;
    left: 0;
    height: 320px;
}

#hero-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

#gradient{
    background-image: linear-gradient(to top, #000, rgba(0,0,0,0));
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
}

#hero-text{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 4%;
    z-index: 200;
}

#hero-text h1{
    color: #fff;
    margin-bottom: 0px;
	text-shadow: 2px 2px #000000;
}

#lfd-nav{
    width: 100%;
	background-color: #000000;
	padding: 0 0 15px 0;
}

#nav-ul{
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 0px;
    width: 100%;
}

ul.list-unstyled li.nav-item {
    color: #fff;
/*    border-bottom: 1px solid white;  */
/*    padding: 8px 10px;*/
	padding: 5px;
    margin: 0px;
    width: 95%;
}

.custom-card-footer {
    background: black;
    color: white;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    display: block;
}
.custom-card {
    transition: background 0.3s ease, color 0.3s ease;
	border-radius: 0;
    overflow: hidden;
}

a:hover .custom-card .custom-card-footer {
    background: white;
    color: #e6000d; 
}
a:focus .custom-card .custom-card-footer {
    background: #e6000d;
    color: white; 
}

a:hover .custom-card {
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.43);
-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.43);
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.43);}

main #resources ul a:link {
    text-decoration: none;
    color: inherit; 
}


.bg-l-gray {
    background-color: #f1f1f1;
    border-color: rgb(232, 232, 232);
	}
.bg-m-gray{
	background-color: #d9d9d9;
}
.app-card{
    padding: 0px;
    margin: 15px 0px;

}
.bg-gray .app-card {border: 1px solid #cacaca;}

.app-card-row{
    position: relative;
	min-height: 300px;
}

.app-card-img-left, .app-card-img-right{
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.app-card-img-left img, .app-card-img-right img{
    object-fit: cover;
	object-position: top;
    border-radius: 4px 4px 0px 0px;
}
.app-card-img-right img {object-position: center;}
.app-card-body-left{
    padding: 30px;
}

.app-card-body-right{
    padding: 30px;
}

.app-card h2{
    margin-top: 0px;
}

.app-card h3{
    margin-top: 0px;
}

.app-card-btn{
    margin-top: 30px;
}	

.key-features {padding: 20px 30px; border-top: 6px solid black; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;}

#lfd-me-series .key-features {border-top-color:#9D4815; }
#lfd-m-series .key-features {border-top-color:#007FA3; }
#lfd-ma-series .key-features {border-top-color:#658D1B; }
#lfd-e-series .key-features {border-top-color:#68478d; }


/*
#lfd-nav #last-nav-item{
    border-right: 0;
}
*/

#lfd-nav #nav-ul .nav-item a, #lfd-nav #nav-ul .nav-item .no-a{
    text-decoration: none;
    color: white;
    font-weight: bold;
    border: 2px solid transparent;
    border-radius: 7px;
    width: 100%;
    display: block;
    padding: 8px 10px;
}
#lfd-nav #nav-ul .nav-item a:hover {
    background-color: #e6000d;
    color: white;
    border: 2px solid #ffffff;
}
#lfd-nav #nav-ul .nav-item a:focus {
    background-color: #ffffff;
    color: #e6000d;
    outline: 4px solid white;
    padding: 2px 4px;
    border-radius: 1px;
    margin: 6px;
    width: calc(100% - 12px);
    border: 1px solid #000000;
}

#lfd-nav #nav-ul .nav-item .no-a{
    padding: 6px 8px;
    background-color: #ffffff;
    color: #000000;
}


#features h2{
    margin-top: 0px;
    text-align: center;
}

#features h3{
    text-align: center;
    margin-bottom: 10px;
}

#features p{
    margin-bottom: 30px;
}

#feature-cards{
    justify-content: center;
    flex-direction: column;
}

.feature-card{
    margin: 15px;
    padding: 0px;
}

.feature-card-img{
    justify-content: center;
}

.feature-card-body{
    padding: 0px 15px 5px 15px;
}

.feature-card-body p{
    color: #575757;
    font-size: 14px;
    text-align: center;
}

#applications h2{
    text-align: center;
    margin-bottom: 40px;
}

#tab-nav{
    margin-bottom: 30px;
}

#tab-nav-ul{
    flex-direction: column;
    justify-content: center;
    margin: 0px;
}

.tab-nav-li{
    list-style: none;
    margin: 10px;
    padding: 0px 5px;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
    font-size: 15px;
}

#tab-nav-section #tab-nav-ul li > a{
    border-bottom: 4px solid transparent;
    color: #000;
}

#tab-nav-section #tab-nav-ul li.active > a{
    border-bottom: 4px solid rgb(207, 17, 45);
    font-weight: bold;
}

#tab-nav-section #tab-nav-ul li > a:hover{
    border-bottom: 4px solid rgb(207, 17, 45);
}


.tab-content{
    border: 0;
}

.tab-content > .active{
    display: flex;
}


.app-content{
    align-items: center;
    flex-direction: column;
}



#difference h2{
    text-align: center;
}

#difference h3{
    text-align: center;
    margin-bottom: 60px;
    margin-top: 10px;
}

#why-1-row{
    flex-wrap: wrap;
}

#why-1-row div{
    margin-bottom: 30px;
}

.why-card{
    padding: 0px;
    margin: 15px 0px;
}

.why-card-row{
    position: relative;
}

.why-card-img-left, .why-card-img-right{
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.why-card-img-left img, .why-card-img-right img{
    object-fit: cover;
    border-radius: 4px 4px 0px 0px;
}

.img-pos-left{
    object-position: left;
}

.img-pos-top{
    object-position: top;
}

.why-card-body-left{
    padding: 30px;
}

.why-card-body-right{
    padding: 30px;
}

.why-top-h4{
    margin-top: 0px;
}

.why-card-btn{
    margin-top: 30px;
}

#wow-btn{
    margin-bottom: 30px;
}

#wow-btn a{
    white-space: pre-wrap;
    max-width: 100%;
}

#services-scope{
    flex-wrap: wrap;
}

#services-scope li{
    width: 100%;
}

#consideration-row h3{
    margin-top: 30px;
    margin-bottom: 15px;
}

#consideration-row p{
    text-align: center;
}

#contact-row h3{
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
}

#pardot-iframe{
    width: 100%;
    height: 1300px;
}


#portfolio-title, #portfolio-btn{
    text-align: center;
}

#portfolio-btn{
    margin-bottom: 20px;
}

.port-card{
    padding: 0px;
    margin: 15px 0px;
}

.port-card-row{
    position: relative;
}

.port-card-img{
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.port-card-img img{
    object-fit: cover;
    border-radius: 4px 4px 0px 0px;
}

.port-card-body{
    padding: 30px;

    position: relative;
    right: 0;
}

.port-card h3{
    margin-top: 0px;
}

.port-card-btn{
    margin-top: 30px;
}

#customized-div{
    flex-wrap: wrap;
}

.customized-item{
    width: 100%;
}



#what-is h2{
    text-align: center;
    margin-bottom: 20px;
}

#what-info-p{
    margin-bottom: 30px;
}

.what-content-static{
    margin-bottom: 30px;
}

#pixel-btn{
    margin-top: 30px;
}

#what-nav{
    margin-top: 80px;
    margin-bottom: 30px;
}

#what-nav-ul{
    flex-direction: column;
    justify-content: center;
    margin: 0px;
}

.what-nav-li{
    list-style: none;
    margin: 10px;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    font-weight: 1000;
    font-size: 20px;
}

#what-is #what-nav-ul li > a{
    border-bottom: 4px solid transparent;
    color: #000;
}

#what-is #what-nav-ul li.active > a{
    border-bottom: 4px solid rgb(207, 17, 45);
    font-weight: bold;
}

#what-is #what-nav-ul li > a:hover{
    border-bottom: 4px solid rgb(207, 17, 45);
}


.what-content{
    flex-direction: column;
}

.what-img{
    padding: 0px;
    overflow: clip;
}

.img-left img{
    border-radius: 4px 4px 0px 0px;
}

.img-right img{
    border-radius: 4px 4px 0px 0px;
}

.what-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.what-body{
    padding: 30px;
}

.what-body h3{
    margin-top: 0px;
}



#six-img{
    justify-content: center;
}

.six-row{
    align-items: stretch;
    flex-wrap: wrap;
}

#six-1{
    border-bottom: 4px solid rgb(218, 55, 66);
}

#six-2{
    border-bottom: 4px solid rgb(53, 68, 82);
}

#six-3{
    border-bottom: 4px solid rgb(87, 172, 203);
}

#six-4{
    border-bottom: 4px solid rgb(178, 194, 194);
}

#six-5{
    border-bottom: 4px solid rgb(150, 145, 147);
}

#six-6{
    border-bottom: 4px solid rgb(36, 90, 165);
}

#six-btn-row{
    justify-content: center;
}

#six-btn{
    margin-top: 30px;
}


#resources h2{
    text-align: center;
    margin-bottom: 20px;
}

#resources h3{
    text-align: center;
    margin-top: 15px;
    margin-bottom: 30px; 
    text-decoration: underline;
}

#resources img{
    width: 100%;
}
#resources .h3 {
    margin-top: 15px;
}

.bg-gray{
    background-color: #e6e6e6;
}

.content-spacing{
    padding: 40px 0px 60px 0px;
}
#resources.content-spacing { padding: 15px 0px 60px 0px;}
#featured-block h2 {text-align: center; }
#dv-led-landing .btn{
    width: 100%;
}

@media screen and (min-width: 768px){
	#hero, #hero-video{
        height: 360px;
    }

    #lfd-nav #nav-ul{
        flex-direction: row;
    }
    
   #lfd-nav .nav-item{
/*        border-right: 1px solid white;    */
        border-bottom: 0;
        width: auto;
        padding: 2px 10px;
    } 
    #tab-nav-ul{
        flex-direction: row;
    }

    .tab-nav-li{
        margin: 0px 10px;
    }

    #customized-div{
        gap: 30px;
    }

    .customized-item{
        width: calc(50% - 15px);
    }

    #what-nav-ul{
        flex-direction: row;
    }

    .what-nav-li{
        margin: 0px 10px;
    }

    #dv-led-landing .btn{
        width: auto;
    }

    #resources li {
        padding: 15px;
        text-align: center;
    }
}

@media screen and (min-width: 992px){
	#hero, #hero-video{

        height: 400px;
    }

    #feature-cards{
        flex-direction: row;
    }

    .feature-card-body{
        padding: 15px;
    }
    
    .app-content{
        flex-direction: row;
    }

    .why-card-img-left {
        position: absolute;
        top: 0;
        left: 0%;
    }

    .why-card-img-right {
        position: absolute;
        top: 0;
        left: 50%;
    }

    .why-card-img-left img{
        height: 100%;
        width: 100%;
        border-radius: 4px 0px 0px 4px;
    }  
    
    .why-card-img-right img{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 0px;
    }  

    .why-card-body-left{
        position: relative;
        right: 0%;
    }
    
    .why-card-body-right{
        position: relative;
        left: 50%;
    }

    #services-scope li{
        width: 50%;
    }

    .what-content{
        flex-direction: row;
    }

    .img-left img{
        border-radius: 4px 0px 0px 4px;
    }
    
    .img-right img{
        border-radius: 0px 4px 4px 0px;
    }
	.app-card-img-left {
        position: absolute;
        top: 0;
        left: 0%;
    }

    .app-card-img-right {
        position: absolute;
        top: 0;
        left: 50%;
    }

    .app-card-img-left img{
        height: 100%;
        width: 100%;
        border-radius: 4px 0px 0px 4px;
    }  
.features-below.app-card-img-left img {
		 border-radius: 4px 0px 0px 0px;
	}
    .app-card-img-right img{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 0px;
    }  
	.features-below.app-card-img-right img {
		 border-radius: 0px 4px 0px 0px;
	}
    .app-card-body-left{
        position: relative;
        right: 0%;
    }
    
    .app-card-body-right{
        position: relative;
        left: 50%;
    }

    .img-left img{
        border-radius: 4px 0px 0px 4px;
    }
    
    .img-right img{
        border-radius: 0px 4px 4px 0px;
    }   
}

@media screen and (min-width: 1200px){
	#hero, #hero-video{
        height: 460px;
    }
    
    .port-card-img{
        position: absolute;
        top: 0;
        left: 50%;
    }
    
    .port-card-img img{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 0px;
    }
    

    #fc{
        object-position: 50% 50%;
    }
    
    #e{
        object-position: 5% 50%;
    }
    
    #fe{
        object-position: 70% 50%;
    }
    
    #fa{
        object-position: 20% 50%;
    }

    #cs{
        object-position: 70% 50%;
    }
}
@media handheld, only screen and (min-width:768px) {
  ul.two-column-list {
    columns: 2;
    column-gap: 30px;
  }
  ul.three-column-list {
    columns: 3;
    column-gap: 30px;
  }
    ul.four-column-list {
    columns: 4;
    column-gap: 30px;
  }

    
/*
    ul.two-column-list:has(> :last-child:nth-child(5)) li:nth-child(3) {
      break-after: column;

  }
    
  ul.two-column-list:has(:last-child:nth-child(> 7)) li:nth-child(5) {
      break-after: column;

  }
*/
    
    /*
  ul.two-column-list:has(> :nth-child(7)) {
    column-gap: 30px;
    display: grid;
    grid-template-columns: minmax(150px, 50%) repeat(2, auto);
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
  }
  ul.two-column-list:has(> :nth-child(9)) {
    column-gap: 30px;
    display: grid;
    grid-template-columns: minmax(150px, 50%) repeat(2, auto);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
  }
  ul.two-column-list:has(> :nth-child(11)) {
    column-gap: 30px;
    display: grid;
    grid-template-columns: minmax(150px, 50%) repeat(2, auto);
    grid-template-rows: repeat(7, auto);
    grid-auto-flow: column;
  }
  .content-spacing .row {
    display: flex;
    align-items: center; /* Centers content vertically */
}