#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: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,0) 100%);
    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;
}

#collaboration-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);
	}
	
.app-card{
    padding: 0px;
    margin: 15px 0px;
}

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

/*
#collaboration-nav #last-nav-item, #collaboration-nav .nav-item:last-child{
    border-right: 0;
}
*/

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

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

#displayFormsButtons {margin-top: 15px;}

/*-------FEATURES SECTION STYLES------*/
#features {
	display: flex;
	width: 100%; 
	z-index: 1;
	min-height: 700px;
	scroll-margin-top: 112px;
}
#features h2 { text-align: center;}

/*#features h3 { color: #00826f; }*/
#features h4, #features p { /* [disabled]color: #ffffff;
*/ }

#features .featureBtns {
  display: flex;
}


@keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@-webkit-keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fade-in { 0% { opacity: 0;} 100% {opacity: 1;} }
@keyframes fade-in { 0% { opacity: 0;} 100% { opacity: 1;} }

#features .nav-tabs {
  margin: 0px auto 20px;
  text-align: center;
	border: none;
}
#features .nav-tabs > li > a {
  background: none;
  border: none;
  padding: 10px 15px;
	margin: 0;
  border-bottom: 2px solid #ffffff;
  cursor: pointer;
}
#features .nav-tabs li.active > a, #features .nav-tabs li > a:hover {
  border-bottom: 2px solid #e20022;
  background-color: transparent;
}

#features .nav-tabs a.active, #features .nav-tabs a.active a:hover {
  border-bottom: 2px solid #e20022;
  background-color: transparent;
}



#features .nav-tabs li.active > a {
	font-weight: bold;
}
#features .tab-content {
	border: none;
	padding: 0px;
}

#f-multi-purpose-application-img {
	background: url(/Portals/0/assets/images/aquos_feature_01.png) no-repeat;
	height: 500px;
	background-position: center;
	background-size: contain;
}
#f-spectacular-screen-size-img {
	background: url(/Portals/0/assets/images/aquos_feature_02-86-inch.png) no-repeat;
	height: 350px;
	background-position: center;
	background-size: contain;
}
#f-spectacular-image-quality-img {
	background: url(/Portals/0/assets/images/aquos_feature_03.png) no-repeat;
	height: 500px;
	background-position: center;
	background-size: contain;
}
#f-sharp-pen-software-img1 {
	background: url(/Portals/0/Images/pensoftware_buttons_pen.png) no-repeat;
	height: 250px;
	background-size: contain;
	background-position: center;
}
#f-sharp-pen-software-img2 {
	background: url(/Portals/0/Images/aquos_integratedTouchPanel.png) no-repeat;
	height: 250px;
	background-size: contain;
	background-position: center;
}
#f-mfp-connectivity-img {
	background: url(/portals/0/Images/aquos_MFP_Connectivity.png) no-repeat;
	height: 500px;
	background-size: contain;
	background-position: center;
}
#f-synappx-collaboration-hub-img {
	background: url(/Portals/0/Images/aquos_collaboration-hub.png) no-repeat;
	height: 435px;
	background-size: contain;
	background-position: center;
  border-radius: 6px;
}

/*

#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;
}
*/
/*-------CASE STUDY SECTION STYLES------*/

/*#case-studies, #featured-block, #additional-resources { background-color: #035C7A; scroll-margin-top: 112px;}*/
#additional-resources {padding-bottom: 25px}
#case-studies h2, #featured-block h2.h3 { text-align: center;}
#case-studies .doc-thumb:focus { width: auto; height: 130px; overflow: hidden;}
#case-studies .panel-body { min-height: 420px;}

#case-studies #education .panel-body { min-height: 460px;}

#case-studies h4 {
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 1px solid #dddddd;
    color: #999;
}


#sharp_container #case-studies .doc-thumb {
  width: 220px;
  border: 1px solid #DDDDDD;
  height: 150px;
  margin-top: 15px;
  margin-bottom: 15px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
}





/*-------STAR DIRECTORY SECTION STYLES------*/
#star_directory {
	width: 100%;
	z-index: 1;
	/*background: #fff url(/portals/0/assets/images/star_bg.jpg) no-repeat center center;
	background-size: cover;*/
	/*background-color: #016d5f;*/
}
.sa {
	background-repeat: no-repeat;
	background-position: bottom;
	overflow: hidden;
}

#sa_text {
	float: left;
	line-height: 20px;
	text-align: left;
	z-index: 5;
}
#star_video { float: left; }



#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: 600px;
}
/*------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;
    }
	
}

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

.collaboration-landing .btn{
    width: 100%;
}

/*----------Request  Info Syles------*/
#request {
  background-color: #E8E8E8;
}


#request iframe {
height: 1065px;
}


@media only screen and (min-width:767px) {
#request iframe {
height: 1075px;
}
}


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

    #collaboration-nav #nav-ul{
        flex-direction: row;
    }
    
   #collaboration-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;
    }

    .collaboration-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;
    }  
    
    .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;
    }
}

@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;
    }
*/
    
}