@charset "utf-8";
/* CSS Document */

/*COMMON STYLES*/

.bg-gray{
    background-color: #e6e6e6;
}
.bg-l-gray{
    background-color: #f1f1f1;
    border-color: rgb(232, 232, 232);
}
.content-spacing{
    padding: 40px 0px 60px 0px;
}

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

.img-pos-top{
    object-position: top;
}
.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; 
}
.dv-led-landing .btn{
    width: 100%;
}
#applications-page .btn, #why-sharp-page .btn{
    margin-top: 15px;
    width: 100%;
}
#laser-nav{
    margin: 30px 0px;
}

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

.laser-nav-li{
    list-style: none;
    margin: 10px;
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
}

#laser-technology #laser-nav-ul li > a{
    /* border-bottom: 4px solid transparent;
    color: #000; */

    padding: 10px 15px;
    border-radius: 4px;
    background-color: #fff;
    color: #000;
    width: 100%;
    display: block;
}

#laser-technology #laser-nav-ul li.active > a{
    /* border-bottom: 4px solid rgb(207, 17, 45); */
    font-weight: bold;
    background-color: rgb(207, 17, 45);
    color: #fff;
}

#laser-technology #laser-nav-ul li > a:hover{
    /* border-bottom: 4px solid rgb(207, 17, 45); */
    background-color: rgb(207, 17, 45);
    color: #fff;
}

.tab-content{
    border: 0;
}

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

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




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

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

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

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

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

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

.dc-card-top{
    margin-top: 0px;
}


#lenses-title{
    margin-top: 60px;
}

#table-title{
    margin-top: 40px;
}

#table-sub{
    color: #444;
}

.table-bordered th{
    background-color: rgb(250, 250, 250);
}

.table-bordered > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
   background-color: white;
}

.table-bordered > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
    background-color: rgb(250, 250, 250);
}

.table-responsive{
    width: 100%;
    margin-bottom: 30px;
    overflow-y: hidden;
    border: 1px solid #dddddd;
}

.table{
    margin-bottom: 0px;
    border: none;
}

#sub-nav{
    width: 100%;
    text-align: center;
}

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

.sub-nav-item{
    list-style: none;
    color: black;    
    padding: 10px 15px;
    margin: 0px;
}

#sub-selected{
    background-color: #991B21;
      color: #fff;
    font-weight: bold;

}

#sub-nav #sub-nav-ul #sub-selected a{
    color: white;
    font-weight: bold;
}

#last-nav-item{
    border: 0;
}

#sub-nav #sub-nav-ul .sub-nav-item a{
    text-decoration: none;
    color: black;
}

#sub-nav #sub-nav-ul .sub-nav-item a:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* ----HERO BLOCK & NAV STYLES STYLES ----  */
#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;
}

/*
#applications-page #hero, #why-sharp-page #hero{
    height: 320px;
    background-image: linear-gradient(black, black);
    background-position: 50% 34%;
    background-size: cover;
    position: relative;
}
*/
/*#why-sharp-page #hero {background-position: 20% 58%;}*/

#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;
}

#dc-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%;
}


#dc-nav #nav-ul .nav-item a, #dc-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;
}
#dc-nav #nav-ul .nav-item a:hover {
      background-color: #e6000d;
    color: white;
    border: 2px solid #ffffff;
}
#dc-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;
}

#dc-nav #nav-ul .nav-item .no-a{
   /*    border: 4px solid white;*/
    padding: 6px 8px;
    background-color: #ffffff;
    color: #000000;
}

#displayFormsButtons {margin-top: 15px;}

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

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

    #laser-technology #laser-nav-ul li > a{
        width: auto;
    }

    #projection-room .btn{
        width: auto;
    }
	
	
	
    #dc-nav #nav-ul{
        flex-direction: row;
    }
    
   #dc-nav .nav-item{
/*        border-right: 1px solid white;    */
        border-bottom: 0;
        width: auto;
        padding: 2px 10px;
    } 
    
    .dv-led-landing .btn, #applications-page .btn, #why-sharp-page .btn{
        width: auto;
    }
	 
}
#foyer-nav, #concessions-nav{
    margin: 30px 0px;
}

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

.foyer-nav-li, .concessions-nav-li{
    list-style: none;
    margin: 10px;
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
}

#foyer-nav #foyer-nav-ul li > a, #concessions-nav #concessions-nav-ul li > a{
    /* border-bottom: 4px solid transparent;
    color: #000; */

    padding: 10px 15px;
    border-radius: 4px;
    background-color: #e6e6e6;
    color: #000;
    width: 100%;
    display: block;
}

#foyer-nav #foyer-nav-ul li.active > a, #concessions-nav #concessions-nav-ul li.active > a{
    /* border-bottom: 4px solid rgb(207, 17, 45); */
    font-weight: bold;
    background-color: rgb(207, 17, 45);
    color: #fff;
}

#foyer-nav #foyer-nav-ul li > a:hover, #concessions-nav #concessions-nav-ul li > a:hover{
    /* border-bottom: 4px solid rgb(207, 17, 45); */
    background-color: rgb(207, 17, 45);
    color: #fff;
}

.tab-content{
    border: 0;
}

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

.foyer-content .panel-top, .concessions-content .panel-top{
    align-items: center;
    flex-direction: column;
}

.tiny-table{
    margin-top: 40px;
}
#foyer .btn, #concessions .btn{
    margin-top: 10px;
    width: 100%;
}
@media screen and (min-width: 992px){
	#hero, #hero-video{
        height: 400px;
    }
	.dc-card-img-left {
        position: absolute;
        top: 0;
        left: 0%;
    }

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

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

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

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

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



/*-------DVLED LANDING FEATURES BLOCK STYLES------*/

#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;
}





@media screen and (min-width: 992px){
	
    #feature-cards{
        flex-direction: row;
    }

    .feature-card-body{
        padding: 15px;
    }
    
    
}
.foyer-content .panel-top, .concessions-content .panel-top{
        flex-direction: row;
    }

/*----DVLED LANDING SIX POINTS SECTION----*/
#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;
}

/*-----DVLED RESOURCES----- */
#resources.content-spacing { padding: 15px 0px 60px 0px;}
#resources h2, #featured-block h2{
    text-align: center;
    margin-bottom: 5px;
}

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

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


@media screen and (min-width: 768px){
	
    #resources li {
        padding: 15px;
        text-align: center;
    }
	 #sub-nav-ul{
        flex-direction: row;
    }
    
    .sub-nav-item{
        width: auto;
    }    
	#projection-room .btn{
        width: auto;
    }
}
 #foyer-nav-ul, #concessions-nav-ul{
        flex-direction: row;
    }

    #foyer-nav #foyer-nav-ul li > a, #concessions-nav #concessions-nav-ul li > a{
        width: auto;
    }

    #foyer .btn, #concessions .btn{
        width: auto;
    }

/*------REQUEST FORM STYLES--------*/

#pardot-iframe{
    width: 100%;
    height: 600px;
}
#pardot-row{
    justify-content: center;
}

#pardot-card{
    width: 100%;
}

#pardot-iframe-container{
    align-items: center;
}

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

@media handheld, only screen and (min-width:768px) {
	    #pardot-card{
        width: fit-content;
    }
    
    #pardot-iframe{
        width: 700px;
        height: 950px;
    }
	
}

/*----DVLED APPLICATIONS PAGE STYLES----*/
.app-card{
    padding: 0px;
    margin: 15px 0px;
}

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

.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;
    border-radius: 4px 4px 0px 0px;
}

.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;
}
#what-info-h2{
    text-align: center;
    margin-bottom: 20px;
}

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



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

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

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

.what-card-img-left img, .what-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;
}

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

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

.what-top-text{
    margin-top: 0px;
}
#what-is-page .btn{
    margin-top: 15px;
    width: 100%;
}
@media screen and (min-width: 992px){ 
.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;
    }  
    
    .app-card-img-right img{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 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;
    }

}

/*----THE SHARP DIFFERENCE/WHY SHARP STYLES-----*/

.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;
}
.why-card-body-left{
    padding: 30px;
}

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

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

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

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

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

#consideration-row h2{
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: center;
}

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

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

@media screen and (min-width: 768px){
	
	#services-scope li{
        width: 50%;
    }
	#customized-div{
        gap: 30px;
    }

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

    #portfolio-page .btn{
        width: auto;
    }
	 #what-is-page .btn{
        width: auto;
    }
}
@media screen and (min-width: 992px){
	
	.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%;
    }

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

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

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

    .what-card-body-left{
        position: relative;
        right: 0%;
    }
    
    .what-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;
    }
	
}
/*----THE SHARP DIFFERENCE/WHY SHARP STYLES-----*/
#portfolio-btn{
    text-align: center;
}

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

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

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

.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;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-between;
    min-height: 300px;
}

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

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

.customized-item{
    width: 100%;
}
#portfolio-page .btn{
    margin-top: 15px;
    width: 100%;
}

@media screen and (min-width: 1200px){
	

    .port-card-img{
        position: absolute;
        top: 0;
        left: 50%;
    }
    
    .port-card-img img{
        height: 100%;
        width: 100%;
        border-radius: 0px 4px 4px 0px;
    }

    .port-card-row{
        min-height: 400px;
    }
    

    #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%;
    }
}