:root {
  --yellow: #FFC422;
  --brown: rgb(51, 51, 51);
  --grey: #8b8a8f;
  --blue: #002265;
  --grey2: 153, 153, 153;
  --light-grey: 112, 112, 112;
  --light-blue: #3076b3;
}

main a[class*='btn'] {
    text-decoration:none!important;
}
main a.bt-blue-bg {
  text-decoration:none!important;  
}
body {
    font-family: Arial;
}

.programFocus ul li svg {
	max-width: 100px;
	height: 100px;
    width: auto!important;
    color: white;
}

.topHeader {
    width: 100%;
    padding: 5px;
}
.topHeader p {font-size: 16px; text-decoration: underline; padding: 0; line-height: 32px; margin: 0; font-weight: bold;}
.topHeader p a{color: var(--brown);}
.yellowBg {
  background-color: var(--yellow);
}

.headerMiddle {
    background-color: var(--brown);
    padding: 8px;
}
.headerRight {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    align-items: center;
}
.headerRight p{ color: #fff; margin: 0 7px;}
.headerRight p.btn-blue {
    background-color: var(--blue);
    border: 1px solid #fff;
    margin-right: .5em;
    margin-bottom: 2px;
    font-weight: bold;
    border-radius: 10px;p
    padding: 4px 10px 5px 10px;
}
.headerRight p.btn-blue:hover {background-color: #fff;}
.headerRight p.btn-blue:hover a{color: var(--blue);}
.headerRight p.btn-blue a{color: #fff; text-decoration: none;}
.topMenu {border-bottom: 1px solid #eee; padding-top: 7px; padding-bottom: 7px;}
.topMenu .leftSideContent{display: flex; flex-flow: row wrap;}
.topMenu .leftSideContent .searchArea{ max-width: 63%; flex: 0 0 63%;}
.topMenu .leftSideContent .searchArea > input {max-width: 75%;}
.topMenu .leftSideContent .searchArea > button {margin-left: 0; background-color: rgba(var(--grey2), 1); color: #fff; border: 1px solid var(--grey);}
.topMenu .leftSideContent .topSocialIcons{ max-width: 37%; flex: 0 0 37%;}
.topMenu .leftSideContent .topSocialIcons ul {display: flex; flex-flow: row wrap; list-style: none; padding: 0; margin: 0;}
.topMenu .leftSideContent .topSocialIcons ul li {background-color: #000; border-radius: 50%; width: 20px; height: 20px; margin: 0 2px; text-align: center;}
.topMenu .leftSideContent .topSocialIcons ul li a{color: #fff;}
.topMenu .leftSideContent .topSocialIcons ul li:first-child{background-color: var(--blue);}
.topMenu .leftSideContent .topSocialIcons ul li:nth-child(2){background-color: #50a0eb;}
.topMenu .leftSideContent .topSocialIcons ul li:nth-child(3){background-color: #e73323;}
.topMenu .leftSideContent .topSocialIcons ul li:nth-child(4){background-color: #e1538e;}
.topMenu .navbar{min-height: auto; margin: 0;}
.topMenu .navbar-nav li{border-right: solid 1px #d8d8d8;}
.topMenu .navbar-nav li:last-child{border-right-width: 0;}
.topMenu .navbar-nav li:hover a{background-color: transparent; text-decoration: underline;}
.topMenu .navbar-nav li a{color: var(--blue); padding-top: 0; padding-bottom: 0;}

.main-header {background-color: var(--blue); margin-top: 15px; position: relative; z-index: 1;}
.main-header .navbar {margin-bottom: 0;}
.main-header .navbar-brand{max-width: 200px; padding: 0;}
.main-header .navbar .navbar-nav{margin-top: 10px;}
.main-header .navbar .navbar-nav li a {color: #fff; background-color: transparent; display: block; padding: 0 15px 0; margin-top: 5px;}
.main-header .navbar .navbar-nav li a:hover {text-decoration: underline;}

.HomeBannerSection {position: relative;}
.HomeBannerSection .bannerContent {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--blue);
    padding: 15px 90px 30px 90px;
}
.HomeBannerSection .bannerContent h3 {font-size: 160px;color: #fff; line-height: 184px; border-bottom: 1px solid #fff;}
.HomeBannerSection .bannerContent p {color: #fff; padding-top: 20px; text-align: center; font-size: 18px; line-height: 21px;} 
.HomeBannerSection .bannerContent p span{ color: var(--yellow); text-decoration: none;}
.HomeBannerSection .bannerContent p a {text-decoration: none; color: #fff; position: relative; padding-right: 20px;}
.HomeBannerSection .bannerContent p a::after {position: absolute; content: "/"; top: 0; right: 5px;}

.subMenuContainer {background-color: rgba(var(--light-grey), .3); padding: 35px 0;}
.subMenuContainer ul {display: flex; flex-flow: row wrap; list-style: none; justify-content: center;}
.subMenuContainer ul li {border-right: 1px solid var(--blue); font-size: 18px;  padding: 0 20px;}
.subMenuContainer ul li:last-child{border-right-width: 0;}
.subMenuContainer ul li a {color: var(--blue);}

.advancedProgram { text-align: center; margin-top: 70px;}
.advancedProgram h3 {font: normal normal bold 43px/49px Arial; color: var(--brown);}
.advancedProgram p {font: normal normal normal 16px/30px Arial; color: var(--brown); max-width: 800px; margin: 0 auto;}
.advancedProgram .btn-blue-arrow{margin-top: 45px;    display: inline-block;}
.btn-blue-arrow{background-color: var(--blue); padding: 12px 25px; font-size: 30px; color: #fff; text-decoration: none;}
.btn-blue-arrow .pointer{
   width: 15px; height: 18px; display: inline-block;
}
.btn-blue-arrow:hover {color: #fff; text-decoration: none;}

.btn-blue-arrow .pointer .hoverState {display: none;}
.btn-blue-arrow:hover .pointer .hoverState {display: inline-block;}
.btn-blue-arrow:hover .pointer .normalState {display: none;}

.videoOverview{background-color: var(--blue); margin-top: 100px;}
.videoOverview h3 {text-align: center; color: #fff; font-size: 43px; padding-top: 80px; padding-bottom: 35px;}
.videoOverview p {text-align: center; color: #fff; font-size: 16px; padding-top: 35px; padding-bottom: 35px;}
.videoImage {position: relative;}
.videoImage p {color: #fff; font-size: 33px;    position: absolute; bottom: 0; left: 15px;}
.playButton {width: 90px; height: 90px; background-color: rgba(0, 34, 101, 0.6); border-radius: 50%!important; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%;    text-align: left;}
.playButton svg {  color: #fff;font-size: 6rem;position: relative; top: 50%; transform: translate(-50%, -50%); left: 55%;}
.animationSlider {margin-top: 75px;}
.animationSlider h3 {font-size: 43px; color: var(--brown); font-weight: bold; text-align: center;}
.animationSlider ul {display: flex; list-style: none; flex-flow: row wrap; margin: 50px -45px 0;}
.animationSlider ul li{max-width: 20%; flex: 0 0 20%; padding:0 45px;}
.animationSlider ul li .sliderIconImage {
    width: 150px;
    border-radius: 50%;
    border: 4px solid rgba(var(--grey2), 1);
    height: 150px;
    position: relative;
}
.animationSlider ul li .sliderIconImage svg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.animationSlider ul li p{color: var(--brown); text-align: center; font-size: 16px; font-weight: bold; margin-top: 12px;}

.contentArea {margin-top: 35px;}
.contentArea .contentPart {max-width: 800px; margin: 0 auto; text-align: center;}
.contentArea .contentPart p{margin-bottom: 55px; font-size: 16px; line-height: 30px;}

.CareerProgram {background-color: var(--blue); padding: 75px 0;text-align: center; margin-top: 75px;}
.CareerProgram h3{text-align: center; font-size: 43px; color: #fff;}
.CareerProgram p{text-align: center; font-size: 16px; line-height: 30px; color: #fff;}
.CareerProgram ul{ display: flex; flex-flow: row wrap; list-style: none; margin-bottom: 75px; margin-top: 40px;}
.CareerProgram  ul li {max-width: 20%; flex: 0 0 20%; text-align: center;}
.CareerProgram  ul li span {color: #fff; font-size: 16px; margin-top: 20px; display: block;}
.CareerProgram  ul li .careerSVG{width: 75px; height: 75px; margin: 0 auto;}
.btn-blue-arrow.white-bg {background-color: #fff; color: var(--blue);}

.hireImageList {list-style: none;}
.hireImageList li {margin-top: 50px;}
.hireImageList li img {max-width: 200px; margin: 0 auto;}

.hireContentWrapper {background-color: rgba(var(--light-grey), 1); padding: 55px 0; } 
.hireContentWrapper .contentArea{ max-width: 520px; margin: 0 auto;} 
.hireContentWrapper .contentArea h3 {color: #fff; font-size: 43px;}
.hireContentWrapper .contentArea p {color: #fff; font-size: 16px; line-height: 30px;}

.messageFaculty {position: relative; margin-top: 80px; text-align: center;margin-bottom: 150px;}
.messageFaculty h3 {color: var(--brown); font-size: 43px; text-align: center;}
.messageFaculty .btn-blue-arrow {margin-top: 48px;    display: inline-block;}
/*
.pre-footer {
    font-size: 16px;
    color: #b0b0b0;
    background-color: var(--grey);
   
}
.footer-logo-bar {
    background-image: url(../images/footer-pattern.jpg);
    background-color: #fff;
    width: 100%;
    height: 30px;
}

.footer-logo-bar-img {
    margin: 0 auto;
    text-align: center;
    float: left;
    margin-top: -66px;
    display: table;
    width: 100%;
}
.footer-logo-bar-img > img {
    max-width: 175px;
}
.footer-list-unstyled ul li {
    padding: 10px 0;
    font-weight: normal;
    color: #ffffff;
}
.footer-list-unstyled ul li a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: bold;
}

.footer-center-campus {
    margin: 0 auto;
    display: table;
}

*/
.text-align-reverse {
    text-align: right;
}
.white {
    color: #fff;
}

/*.footer {
    background: var(--blue);
    color: #fff;
    font-size: 11px;
    padding: 5px 0;
}
.footer a {
    color: #fff;
    text-decoration: underline;
} */
.padding-top-10 {
    padding-top: 10px;
}
/*
.footer ul.social-footer a {
    opacity: 0.5;
}
.footer ul.social-footer {
    font-size: 18px;
    padding-top: 5px;
}
*/

.m-0 {margin-top: 0;}
/* .videoContainer {display: none;} */

.HomeBannerSectionOver {
    clear:both;
}

.HomeBannerSectionOver {position: relative;}
.HomeBannerSectionOver::after {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 34, 101, .5);
    mix-blend-mode: multiply;

}
.HomeBannerSectionOver .bannerContent {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    padding: 15px 32px 30px 25px;
    z-index: 1;
    width: 100%;
}
.HomeBannerSectionOver .bannerContent h3, .HomeBannerSectionOver .bannerContent .bannerTitle {font-size: 160px;color: #fff; line-height: 184px; border-bottom: 1px solid #fff; text-align: center;margin: 0 auto;max-width: 700px;}
.HomeBannerSectionOver .bannerContent .cbc-title  {color: #fff; padding-top: 20px; text-align: center; font-size: 47px; line-height: 1;} 

.subMenuContainer.darkGrey {background-color: var(--brown); padding-top: 20px; padding-bottom: 20px;}
.subMenuContainer.darkGrey ul {    justify-content: flex-end; margin-bottom: 0;}
.subMenuContainer.darkGrey ul li {border-color: #fff; font-size: 16px;}
.subMenuContainer.darkGrey ul li a {color: #fff;}
.breadcrum2{float: left;}
.breadcrum2 ul{display: flex; list-style: none; margin: 0;}
.breadcrum2 ul li{font-size: 16px; font-weight: bold;color: #fff; border: none;}
.breadcrum2 ul li a{ font-weight: normal; color: #fff; position: relative;}
.breadcrum2 ul li a::after {position: absolute; content: "/"; top: 0; right: -22px;}
.applySection {margin-top: 95px; text-align: center;}
.applySection h2 {font-size: 36px; line-height: 42px; color: var(--blue); margin-bottom: 50px;}
.greyBG {
    background-color: rgba(var(--grey2), .4);
}
.whiteBG .playButton{
    background-color: #fff;
    color: #000;
}
.whiteBG p {color: #fff;}
.whiteBG .playButton svg {color: #000;}
.whyAMpSection {margin-top: 40px;}
.whyAMpSection .contentPart{max-width: 800px; margin:  0 auto;}
.whyAMpSection .contentPart h2{font-size: 43px; color: var(--brown);}
.whyAmpList {max-width: 580px; margin: 45px auto 0;}
.whyAmpList li {color: var(--blue); text-align: left; font-weight: bold; line-height: 30px;}
.mt-2 {margin-top: 25px;}

.programFocus{
    background-image: url(https://grayson.edu/Pathways/advanced-manufacturing/files/bannerImage.jpg);
    background-size: cover;
    margin-top: 30px;
    position: relative;
}
.programFocus--ems {background-image: url(https://grayson.edu/Pathways/EMS/files/program_focus.jpg);}
.programFocus--hart {background-image: url(https://grayson.edu/Pathways/hart/files/close_up_AC-hvac.jpg);}
.programFocus--viti {background-image: url(https://grayson.edu/Pathways/viticulture-and-enology/images/distillery-inside.jpg);}
.programFocus--bsn {background-image: url(https://grayson.edu/Pathways/RN to BSN/files/bannerimage.jpg);}
.programFocus--electrical {
     background-image: url(https://grayson.edu/Pathways/electrical-technology/electrical2.jpg);
}
.programFocus--pa {
	background-image: url(https://grayson.edu/TRPA/files/hand-to-hand.jpg);
	background-position:top;
}
.programFocus--cyber {
    background-image: url(https://grayson.edu/Pathways/cyber-security/files/computers.jpg);
}
.programFocus--dental {
    background-image: url(https://www.grayson.edu/Pathways/Dental%20Assisting/dental-assisting-3.jpg);
}
.programFocus--culinary {
    background-image:url(https://www.grayson.edu/Pathways/culinary-arts/691.jpg);
}
.programFocus--ag {
    background-image:url(https://www.grayson.edu/Pathways/programs/stem/agricultural-sciences/files/flowers.jpg);
}
.programFocus--music {
    background-image:url(https://www.grayson.edu/Music/cruce-stark-sized.jpg);
}
.programFocus--mlab {
    background-image:url(https://www.grayson.edu/Pathways/MLT%20Department/bloodsamples.jpg);
}

.programFocus::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 34, 101, .7);
    mix-blend-mode: multiply;
}
.programFocus .container {
    position: relative;
    z-index: 1;
    padding-top: 60px;
    padding-bottom: 60px;
    text-align: center;
}
.programFocus h2 {
    color: #fff;
    font-size: 43px;
    font-weight: bold;
}

.programFocus p {
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
}
.programFocus ul {
    display: flex;
    flex-flow: row wrap;
    max-width: 800px;
    margin: 80px auto;
    list-style: none;
    padding-left:0;
}
.programFocus .fas {
    width:100px;
    size:5rem;
    color:white;
}

.programFocus ul li {
    max-width: 25%;
    flex: 0 0 25%;
}
.programFocus ul li span {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    margin-top: 25px;
}
.btn-white-normal{
    border: 3px solid #fff;
    color: var(--blue);
    font-size: 16px;
    padding: 10px 20px;
    text-decoration: none;
    background-color: #FFFFFF;
}
.btn-white-normal:hover {
    background-color: transparent;
    color: #fff;
    text-decoration: none;
}
.serviceSection {
    margin-bottom: 50px;
    margin-top: 110px;
}
.serviceSection h3 {
    color: var(--brown);
    font-size: 43px;
    font-weight: bold;
    margin-top: 0;
}
.serviceSection p {
    color: var(--brown);
    font-size: 16px;   
    line-height: 30px;
}
.serviceSection .whiteBG p{color: #fff;}
.serviceSection .serviceImage figure {
    position: relative;
}
.serviceSection .serviceImage figure figcaption {
    position: absolute;
    bottom: 10px;
    left: 20px;
    color: #fff;
    font-size: 20px;
}
.bt-blue-bg {
    background-color: var(--blue);
    border: 3px solid var(--blue);
    font-size: 16px;
    padding: 15px 35px;
    color: #fff;
    display: inline-block;
}
.bt-blue-bg:hover{
    background-color: transparent;e
    color: var(--blue);
    text-decoration: none;
}
.mt-20 {
    margin-top: 20px;
}

.careerSections {
    background-color: rgba(51, 51, 51, 0.1);
    padding: 50px 0;
    margin-top: 100px;
}
.careerSections h3 {
    font-size: 43px;
    font-weight: bold;
    margin-bottom: 30px;
}
.careerSections p {
    font-size: 16px;
    line-height: 30px;
    color: var(--brown);
}
.careerSections ul {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin-top: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.careerSections ul li {
    flex: 0 0 25%;
    max-width: 25%;
}
.careerSections ul li span {
    display: block;
    font-size: 16px;
    margin-top: 20px;
    color: var(--brown);
}
.logoInline {
    list-style: none;
    flex-flow: row wrap;
    display: flex;
    justify-content: space-evenly;
    padding: 0;
    align-items: center;
}
.logoInline li {
    max-width: 200px;
    flex: 1 0 auto;
    padding: 15px;
}
/*.logoInline li img {
    max-width: 200px;
}*/
.applyTodayBlue {
    background-color: var(--blue);
    padding: 50px 0 100px;
}
.applyTodayBlue h3 {
    color: #fff;
    font-size: 43px;
    font-weight: bold;
}
.applyTodayBlue p{
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 60px;
}

.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
}
.topMenu .navbar-toggle  {
    margin-top: -32px;
    left: 17px;
}
.topMenu .navbar-toggle .icon-bar {
    background-color: #000;
    
}



@media screen and (max-width: 767px) {
    .breadcrum2 {
        width: 100%;
    }
    .subMenuContainer.darkGrey ul {
        line-height: 2;
        padding: 0;
        width: 100%;
    }
    .serviceSection {
        text-align: center;
    }
    .serviceSection p {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    .serviceImage {
        max-width: 500px;
        margin: 35px auto ;
    }
    .programFocus ul li {
        max-width: 50%;
        flex: 0 0 50%;
    }
    .careerSections ul li {
        max-width: 50%;
        flex: 0 0 50%;
    }
    .programFocus ul {
        padding: 0;
    }
    .careerSections ul {
        padding: 0;
    }
    .HomeBannerSection .bannerContent h3 {
        font-size: 80px;
        line-height: 120px;
    }
    .animationSlider ul li {
        max-width: 50%;
        flex: 0 0 50%;
    }
    .HomeBannerSection {
        margin-top: 80px;
    }
    .HomeBannerSection > img {
        height: 400px;
        object-fit: cover;
        object-position: center;
    }
    .animationSlider ul {
        padding: 0;
    } 
    .CareerProgram ul {
        padding: 0;
    }
    .CareerProgram ul li{
        max-width: 50%;
        flex: 0 0 50%;
    }
    .btn-blue-arrow {
        font-size: 19px;
    }
    .hiresGraduates .container-fluid {
        padding: 0;
    }
    .hiresGraduates .container-fluid .row {
        margin: 0;
    }
    .hiresGraduates .container-fluid .row .col-sm-7, .hiresGraduates .container-fluid .row .col-sm-5 {padding: 0;}
    .hireImageList {padding: 0;}
    .animationSlider ul {
        margin-left: 0;
        margin-right: 0;
    }
    .animationSlider ul li {
        padding-left: 0;
        padding-right: 0;
    }
    .subMenuContainer ul {
        padding: 0;
    }
    .HomeBannerSection .bannerContent {
        position: relative;
        top: 0;
        transform: translateY(0);
        padding: 15px 40px 30px 40px;
    }
    .animationSlider h3 {
        font-size: 34px;
    }
    .animationSlider {margin-top: 35px;}
}
@media screen and (max-width: 600px) {
    .HomeBannerSectionOver .bannerContent h3 {font-size: 80px; line-height: 100px;}
    .HomeBannerSectionOver .bannerContent p {font-size: 28px;}
    .HomeBannerSectionOver .bannerContent {
        position: relative;
        top: 0;
        transform: translate(0);
        left: 0;
    }
    .videoOverview.py-60 {
        padding: 0;
    }
    .headerRight > p {width: 100%;}
    .headerRight p.btn-blue {max-width: max-content; display: inline-block;} 
    .hireContentWrapper{padding-left: 15px; padding-right: 15px;}
}