section {
    margin-bottom: 0
}

#sub-nav {
    display: none;
}
.hero-standard .flexslider {
    margin-bottom: 0;
    overflow: hidden;
    /*  background-color: black */
}
.hero-standard .slides>li>.carousel-media {
    -webkit-filter: brightness(70%);
    -moz-filter: brightness(70%);
    -ms-filter: brightness(70%);
    -o-filter: brightness(70%);
    filter: brightness(70%)
}
.hero-standard .slides>li {
    position: relative;
    min-height: 150px
}
.hero-standard .slides .caption {
    color: white;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px 50px;
    /* background-color: rgba(0, 0, 0, .5) */
}
.hero-standard .caption .title {
    font-weight: 800;
    font-size: 16px
}
.hero-standard .caption .subtitle {
    font-weight: 400;
    font-size: 14px
}
.hero-standard .caption .body {
    display: none
}
.hero-standard .flex-control-paging {
    display: none
}
.hero-standard .flex-direction-nav a:before {
    color: white
}
@media screen and (min-width: 769px) {
    /* .hero-standard .slides .caption:before {
        content: "";
        background-image:url("/media/hcc-redesign/style-assets/images/img/quote-yellow.png");
        background-size: cover;
        display: inline-block;
        height: 40px;
        width: 50px
    } */
    .hero-standard .caption .title {
        font-size: 28px
    }
    .hero-standard .caption .subtitle {
        font-size: 16px;
        font-weight: 700
    }
}
@media screen and (max-width: 768px) {
    /* .hero-standard .slides .caption:before {
        content: "";
        background-image:url("/media/hcc-redesign/style-assets/images/img/quote-yellow.png");
        background-size: cover;
        display: inline-block;
        height: 40px;
        width: 50px
    } */
    .hero-standard .caption .title {
        font-size: 16px
    }
    .hero-standard .caption .subtitle {
        display:none;
    }
}
@media screen and (min-width: 1001px) {
    .hero-standard .slides .caption:before {
        height: 80px;
        width: 100px
    }
    .hero-standard .slides .caption {
        background-color: transparent
    }
    .hero-standard .caption .title {
        font-size: 43px
    }
    .hero-standard .caption .subtitle {
        font-size: 24px
    }
    .hero-standard .caption .body {
        display: block;
        font-size: 15px;
        font-weight: 700
    }
}
.program-feature {
    background-color: #FFB819;
    text-align: center
}
.dot-wrapper {
    display: none
}
.program-feature .program-feature-header {
    padding: 20px 0
}
.program-feature .program-feature-header h2 {
    line-height: 1.6;
    margin-bottom: 0
}
.program-feature .program-tile-group {
    width: 100%;
    text-align: center
}
.program-feature-header p:not(.dot) {
    font-weight: 700;
    font-size: 18px
}
.program-feature .program-tile-group .tile {
    text-align: center;
    display: inline-block;
    width: 60%;
    padding: 10px 0 0 0;
    border-bottom: 2px solid white
}
.program-feature .program-tile-group .tile:last-child {
    border-bottom: none
}
.program-feature .program-tile-group .tile img {
    display: none
}
.program-feature .program-tile-group .tile .title {
    line-height: 1.6;
    padding: 0 10px;
    font-size: 17px;
    font-weight: 700
}
.program-feature .program-tile-group .tile .title svg {
    height: 15px;
    width: 15px
}
.program-feature .cta {
    margin: 20px 0
}
.discover-accent-wrapper {
    display: none
}
img.discover-accent {
    display: none
}
@media screen and (min-width: 769px) {
    .program-feature .program-feature-header {
        padding: 40px 0;
        position: relative
    }
    .discover-accent-wrapper {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0
    }
    img.discover-accent {
        display: block;
        width: 80%;
        max-width: 960px;
        margin: 0 auto
    }
    .program-feature-header p:not(.dot) {
        font-weight: 700;
        font-size: 36px
    }
    .program-feature .program-tile-group {
        background-color: black;
        border: 10px solid #E3AA14
    }
    .program-feature .program-tile-group .tile {
        position: relative;
        text-align: center;
        display: block;
        float: left;
        width: 25%;
        border-bottom: none;
        padding: 0;
        /* min-height: 185px */
    }
    .program-feature .program-tile-group .tile img {
        width: 100%;
        height: auto;
        display: block;
        -webkit-filter: brightness(80%);
        -moz-filter: brightness(80%);
        -ms-filter: brightness(80%);
        -o-filter: brightness(80%);
        filter: brightness(80%)
    }
    .program-feature .program-tile-group .tile:hover img {
        -webkit-filter: brightness(70%);
        -moz-filter: brightness(70%);
        -ms-filter: brightness(70%);
        -o-filter: brightness(70%);
        filter: brightness(70%)
    }
    .program-feature .program-tile-group .tile .title {
        position: absolute;
        color: white;
        width: 100%;
        font-size: 20px;
        line-height: 1.2;
        top: 50%;
        transform: perspective(1px) translateY(-50%)
    }
    .program-feature .program-tile-group .tile .title svg path {
        fill: white
    }
    .program-feature .cta {
        margin: 40px 0
    }
}
@media screen and (min-width: 1001px) {
    .discover-accent-wrapper {
        display: none;
        bottom: -150px
    }
    .dot-wrapper {
        display: block
    }
    .dot-wrapper .dot:before {
        content: "."
    }
    .dot-wrapper .dot {
        line-height: 0
    }
    .dot.white {
        color: white
    }
    .program-feature .program-feature-header {
        padding-top: 0;
        /* margin-top: -15px */
    }
    .program-feature .program-tile-group-wrapper {
        margin: 0 40px
    }
    .program-feature .program-tile-group .tile {
        display: none
    }
    .program-feature .program-tile-group .tile .title {
        font-size: 30px
    }
    .program-feature .program-tile-group .tile .title svg {
        height: 20px;
        width: 20px
    }
    .program-feature .cta {
        opacity: 0
    }
}
.cta-feature-block-group {
    position: relative
}
.cta-feature-block {
    padding: 30px 35px;
    text-align: center
}
.cta-feature-block:first-child {
    background-color: #F5F5F5
}
.cta-feature-block img {
    height: 75px;
    width: auto
}
@media screen and (min-width: 769px) {
    .cta-feature-block {
        width: 50%;
        display: table-cell
    }
}
@media screen and (min-width: 1001px) {
    .cta-feature-block {
        padding: 70px;
        opacity: 0
    }
    .cta-feature-block.hingeTop {
        opacity: 1
    }
    .cta-feature-text {
        opacity: 0;
        display: inline-block
    }
}
.arrow-up-map {
    margin: 0 auto;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-bottom: 22px solid #5D5E63;
    position: relative;
    bottom: -1px;
    z-index: 1
}
.two-by-two-by-two {
    margin-top: -22px
}
.two-by-two-by-two .has-background {
    border: 0 solid black;
    border-bottom-width: 10px;
    padding: 30px 20px
}
.two-by-two-by-two .text-group {
    text-align: center;
    transform: none
}
.two-by-two-by-two .text-group h3 {
    line-height: 1.2;
    margin-bottom: 10px
}
.two-by-two-by-two img {
    width: 100%;
    height: 200px;
    object-fit: cover
}
.two-by-two-by-two .group1 .has-background {
    color: white;
    background-color: #5D5E63;
    border-color: #515256
}
.two-by-two-by-two .group2 .has-background {
    background-color: #F5F5F5;
    border-color: #C9C9C9
}
.two-by-two-by-two .group2 {
    margin-top: -6px
}
@media screen and (min-width: 769px) {
    .two-by-two-by-two .text-group {
        transform: perspective(1px) translateY(-50%)
    }
    .two-by-two-by-two .group1 {
        height: 250px
    }
    .two-by-two-by-two .group2 {
        height: 300px
    }
    .two-by-two-by-two .has-background {
        width: 65%;
        height: 100%;
        float: left;
        padding: 45px 35px 25px;
        border-bottom: none
    }
    .two-by-two-by-two img {
        width: 35%;
        height: 100%;
        float: left
    }
    .two-by-two-by-two .group1 .has-background {
        border-right-width: 10px
    }
    .two-by-two-by-two .group2 .has-background {
        float: right;
        border-left-width: 10px
    }
    .two-by-two-by-two .group2 img {
        float: right
    }
}
@media screen and (min-width: 1001px) {
    .arrow-up-wrapper {
        display: none
    }
    .arrow-up-map {
        border-left-width: 45px;
        border-right-width: 45px;
        border-bottom-width: 45px
    }
    .two-by-two-by-two {
        margin-top: -45px
    }
    .two-by-two-by-two .has-background {
        padding: 20px 100px
    }
    .two-by-two-by-two .group1,
    .two-by-two-by-two .group2 {
        height: 440px;
        opacity: 0
    }
}
.header-with-bar {
    text-align: center
}
.header-with-bar>* {
    display: inline-block
}
.header-with-bar .colored-bar {
    border: 2px solid #C9C9C9;
    width: 24%;
    vertical-align: super;
    margin: 0 5px
}
.header-with-bar img {
    height: 27px;
    width: 27px;
    vertical-align: middle;
    content:url("/media/hcc-redesign/style-assets/images/img/blue-arrow.png");
    background-image:url("/media/hcc-redesign/style-assets/images/img/blue-arrow.png");
    background-size:contain;
}
.header-with-bar:hover img {
    content:url("/media/hcc-redesign/style-assets/images/img/blue-arrow-hover.png");
    background-image:url("/media/hcc-redesign/style-assets/images/img/blue-arrow-hover.png");
}
.carousel.hcc-connect .slides a {
    text-transform: capitalize
}
.carousel.hcc-connect .slides h4 {
    line-height: 1.2;
    margin: 10px 0
}
.carousel.hcc-connect .slides .body {
    display: none
}
.carousel.hcc-connect .slides svg {
    height: 15px;
    width: 15px
}
@media screen and (min-width: 769px) {
    .header-with-bar .colored-bar {
        width: 38%
    }
}
@media screen and (min-width: 1001px) {
    .header-with-bar .colored-bar {
        width: 39%
    }
    .carousel.hcc-connect .slides .body {
        display: block
    }
    .carousel.hcc-connect .slides>li.animated {
        opacity: 0
    }
}
.carousel.news h2 {
    text-align: center;
    margin-top: 30px
}
.carousel.news .slides>li {
    padding: 0
}
.carousel.news .slides>li div:not(.media-wrapper) {
    padding-left: 10px;
    padding-right: 10px
}
.carousel.news .media-wrapper {
    overflow: hidden
}
@media screen and (min-width: 769px) {
    .carousel.news h2 {
        margin-top: 20px
    }
    .carousel.news .slides>li div:not(.media-wrapper) {
        padding-left: 20px;
        padding-right: 20px
    }
}
@media screen and (min-width: 1001px) {
    .carousel.news h2 {
        margin-top: 40px
    }
    .carousel.news .slides>li img {
        -webkit-transition: all 100ms ease-in;
        -moz-transition: all 100ms ease-in;
        -ms-transition: all 100ms ease-in;
        -o-transition: all 100ms ease-in;
        transition: all 100ms ease-in
    }
    .carousel.news .slides>li:hover img {
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        transform: scale(1.05)
    }
}
.carousel.events .slides>li {
    background-color: #FAFAFA;
    min-height: 300px
}
.carousel.events .center-this {
    text-align: center
}
.carousel.events .event-month {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase
}
.carousel.events .event-day {
    font-size: 34px;
    border-bottom: 4px solid #FFB819;
    display: inline-block;
    margin-bottom: 10px
}
.carousel.events .subtitle {
    font-size: 12px;
    font-weight: 500
}
.carousel.events .event-time {
    display: inline-block
}
.carousel.events .event-location {
    display: inline-block
}
.carousel.events .event-audience {
    font-size: 12px
}
@media screen and (min-width: 1001px) {
    .carousel.events .event-day {
        font-size: 43px
    }
    .carousel.events .event-month {
        font-size: 14px
    }
    .carousel.events .subtitle {
        font-size: 16px
    }
    .carousel.events .event-audience {
        font-size: 16px
    }
    .carousel.events .slides>li {
        padding: 40px 30px;
        min-height: 380px
    }
}
.twitter-feed {
    background-color: #DEF1FF;
    text-align: center;
    padding-top: 40px
}
.twitter-feed h3 img {
    height: 27px;
    width: 27px;
    vertical-align: middle;
    content:url("/media/hcc-redesign/style-assets/images/img/blue-arrow.png");
    background-image:url("/media/hcc-redesign/style-assets/images/img/blue-arrow.png");
    background-size:contain;
}
.twitter-feed h3:hover img {
    content:url("/media/hcc-redesign/style-assets/images/img/blue-arrow-hover.png");
    background-image:url("/media/hcc-redesign/style-assets/images/img/blue-arrow-hover.png");
}
.twitter-feed svg {
    height: 80px;
    width: 90px;
    position: relative;
    bottom: -15px
}
.twitter-feed svg path {
    fill: white
}
#twitter-feed-destination li:before {
    content: "";
    margin-right: 0
}
#twitter-feed-destination li {
    padding: 40px;
    text-align: left;
    display: none;
    text-indent: 0
}
#twitter-feed-destination li:nth-of-type(1) {
    display: block
}
#twitter-feed-destination .tweet {
    font-size: 18px;
    word-break: break-word
}
#twitter-feed-destination .tweet a {
    color: #0075C9;
    font-weight: 700
}
#twitter-feed-destination .tweet a:hover {
    color: black
}
#twitter-feed-destination .timePosted {
    font-weight: 500;
    font-size: 13px
}
@media screen and (min-width: 769px) {
    #twitter-feed-destination li {
        width: 50%;
        float: left
    }
    #twitter-feed-destination li:nth-of-type(2) {
        display: block
    }
    #twitter-feed-destination .timePosted {
        font-size: 16px
    }
}
@media screen and (min-width: 1001px) {
    .twitter-feed svg {
        height: 120px;
        width: 150px
    }
    .twitter-feed-icon {
        opacity: 0
    }
    #twitter-feed-destination li {
        width: 33%;
        opacity: 0
    }
    #twitter-feed-destination li:nth-of-type(3) {
        display: block
    }
    #twitter-feed-destination .tweet {
        font-size: 20px
    }
}
.yellow-accent-block div.background-image {
    height: 160px;
    text-align: center;
    background-size: cover;
    background-position: center center
}
@media screen and (min-width: 769px) {
    .yellow-accent-block div.background-image {
        height: 220px
    }
}
@media screen and (min-width: 1001px) {
    .yellow-accent-block div.background-image {
        height: 370px
    }
}

/* Centers of Excellenec Grid */

div.centerofexcellencewrapper {
	float: left;
	position: relative;
}
div.centerofexcellencedescription {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: black;
	color: white;
	opacity: 0.7;
	filter: alpha(opacity=70);
	text-align: center;
    vertical-align:  middle;
}
div.centerofexcellencedescription a {
	color: #FFB819;
}
div.centerofexcellencedescription:hover {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: #FFB819;
	color: black;
	opacity: 1;
	filter: alpha(opacity=100);
	text-align: center;
    vertical-align:  middle;
}
div.centerofexcellencedescription:hover a {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: #FFB819;
	color: black;
    vertical-align:  middle;
}
p.centerofexcellencedescription_content {
	padding: 10px;
	text-align: center;
}
p.centerofexcellencedescription_content:hover {
	padding: 10px;
	text-align: center;
}
td.centerofexcellence {
	width: 200px;
	height: 200px;
	vertical-align: top;
	text-align:  center;
	padding: 10px;
}
tr.centerofexcellence {
	padding: 10px;
	margin: 0px;
}
table.centerofexcellence {
	width: 880px;
	height:  660px;
}
div.coreacademic {
	padding: 0px;
	width: 200px;
	height: 200px;
    max-width: 200px;
	max-height: 200px;
	text-align: center;
	vertical-align:middle;
	background-color: #FFB819;
	color: black;

}
div.coreacademic:hover {
	padding: 0px;
	width: 200px;
	height: 200px;
    max-width: 200px;
	max-height: 200px;
	text-align: center;
	vertical-align:middle;
	background-color:  black;
	color: #FFB819;

}
td.coreacademic {
	padding: 0px;
	width: 200px;
	height: 200px;
    max-width: 200px;
	max-height: 200px;
	text-align: center;
	vertical-align:middle;
	background-color: #FFB819;
	color: black;

}
td.coreacademic:hover {
	padding: 0px;
	width: 200px;
	height: 200px;
    max-width: 200px;
	max-height: 200px;
	text-align: center;
	vertical-align:middle;
	background-color:  black;
	color: #FFB819;

}
td.coreacademic a{
color:black;
  text-align: center;
	vertical-align:middle;
}
td.coreacademic:hover a{
color:#FFB819;
  text-align: center;
	vertical-align:middle;
}
/*Bond Projects Grid */
div.bondwrapper {
	float: left;
	position: relative;
}
div.bonddescription {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: black;
	color: white;
	opacity: 0.7;
	filter: alpha(opacity=70);
	text-align: center;
}
div.bonddescription a {
	color: #FFB819;
}
div.bonddescription:hover {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: #FFB819;
	color: black;
	opacity: 1;
	filter: alpha(opacity=100);
	text-align: center;
}
div.bonddescription:hover a {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
    min-height:  50px;
	background-color: #FFB819;
	color: black;
}
p.bonddescription_content {
	padding: 10px;
	text-align: center;
}
p.bonddescription_content:hover {
	padding: 10px;
	text-align: center;
}
div.bondcenterbutton {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: #FFB819;
	color: black;
	text-align: center;
	line-height: 160px
}
div.bondcenterbutton a {
	color: black;
}
div.bondcenterbutton:hover {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: #2e3031;
	color: #FFB819;
	text-align: center;
	line-height: 160px
}
div.bondcenterbutton:hover a {
	position: absolute;
	bottom: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background-color: #2e3031;
	color: #FFB819;
}
p.bondcenterbutton_content {
	padding: 10px;
	text-align: center;
}
p.bondcenterbutton_content:hover {
	padding: 10px;
	text-align: center;
}
td.bond {
	width: 160px;
	height: 160px;
	v-align: top;
	text-align:  center;
}
/*Updated photo grid*/
#grid {
    max-width:880px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    
}
#grid li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:25%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* The wrapper for each item */
.grid-cell {
    margin:10px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);
    display:block;
    position: relative;
    overflow:hidden;
}
        
/* If have the image layer */
.grid-img {
    display:block;
    width: 100%;
	position: relative;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
}

#grid li:hover .grid-img {
    transform:scale(1.05);
}
        
/* If have the overlay layer */
.grid-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.4);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    filter:alpha(opacity=0.4);/*For IE6 - IE8*/
    transition:all 0.6s;
	
}
#grid li:hover .grid-overlay {
    opacity:0.9;
	filter:alpha(opacity=0.9);
	background: #FFB819 url(img/link.png) no-repeat center 20%;
}

/* If have captions */
.grid-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    font-weight:bold!important;
	top:40%;
    color:#FFB819;
	transform:translateY(0px);
    transition:all .3s;
	
	
}
#grid li:hover .grid-text {
    transform:translateY(0px);
	color:black;
}

@media (max-width: 9000px) {
    #grid li {
        width:25%;
    }
}

@media (max-width: 700px) {
    #grid li {
        width:33.33%;
    }
}

@media (max-width: 550px) {
    #grid li {
        width:50%;
    }
}