/*/
/* CSS Overrides (AI)          */
/*/

/* Global */

    h1.nonBackground {text-align: center !important;}
    
    #bannerFull .caption[class*="align"] .container {/*background:transparent; padding: 30px 20px 0px 0px !important;*/  border-radius: 10px; margin: 20px !important;}
    #bannerFull .captionwrap {font-size:1em; padding: 3px 6px !important;}
    
    @media only screen and (max-width: 767px) {
        .title2 br, /* remove awkward breaks on mobile */
        .title3 br {display:none;}
    }

/* Homepage */

    .homepage #bannerFull {border-bottom: 60px solid #00b2e2;}
    .homepage #bannerFull {z-index: -1 !important;}
    .homepage #bannerFull .caption[class*="align"] .container {padding:0px !important;}
    .homepage #bannerFull .item {background:#0a233f}
    @media only screen and (max-width: 767px) {
        .homepage #bannerFull .caption[class*="align"] .container {margin:5px 20px !important}
        .homepage #bannerFull .captionwrap {font-size:.85em} 
        .homepage #bannerFull .captionwrap strong {font-weight:normal}
    }
    .homepage #tier1 {margin-top:-100px; margin-bottom:40px; z-index: 1 !important}
    .homepage #tier1 .flexCard .white {max-width: 400px; margin: 0px auto;}
    .homepage #tier1 .flexCard a {font-style:italic; color: #5c5c5d; font-size: 1.15em;}
    .homepage #tier1 .flexCard a strong {font-style: normal; color: #000000; font-weight:bold; font-size:1.2em; line-height:1.8em; font-family: "Open Sans",san-serif; }
    .homepage #tier1 [class*="material-"].sm {font-size: 55px;}
    .homepage #tier1 [class*="material-"].inline {display:unset; float: left; padding-right: 10px !important; margin-left:-7px; padding-bottom: 1em;}
    .homepage #tier1 .flexGrid.actionBlocks a {padding: 10px 20px;}
    .homepage #tier1 .flexGrid.actionBlocks a strong {line-height: 1.35em !important; margin-bottom: 10px; display: block;}
    .homepage #tier2 {margin-bottom:0px}
    .homepage #tier4.eventButtons {margin-bottom:0px}
    .homepage .mission {font-family:"Open Sans",san-serif; color:#000000; font-weight: 700; font-size:2.65rem; line-height: 1.5em; max-width:1000px; margin: 0 auto; padding-bottom:1em; text-align: center;}
    .homepage .tier.banner {margin-bottom:0px}
    .homepage h1.nonBackground {display:none} 
    .homepage h1 {font-family: "Open Sans", Arial, san-serif; text-align: center !important; color: #757778 !important; font-weight: bold; font-size: 1.25em; text-transform: uppercase}
    @media only screen and (max-width: 600px) {.homepage .tier.columns.none .flexCard {margin-bottom:1em}}
    
    .flexGrid.specialSlash .blue.slashed {padding-left: 25px; margin-top:12px}
    .teasers h2.text3 {margin-bottom:0.5em !important}

    .homepage .flexGrid.newsList.dynamicAINews.col3 > .flexCard {padding-right:30px}
    .homepage .tier.integration .date {font-size:1.15em; margin-bottom: 0px; font-weight:bold}
    .homepage .tier.integration .category {margin-bottom: 0px; font-weight:bold; font-style:normal}    
    .homepage .tier.integration .link {margin-top:10px}
    .homepage .tier.integration .link a {font-weight:bold}
    .homepage .tier.integration .desc {margin-top:10px}
    .homepage .tier.integration .desc p:last-of-type,
    .homepage .tier.integration .desc a {display:none !important}


/* Animated Photo Row */

    .eventButtons .imageCard img:hover {opacity: 1 !important}
    .eventButtons p.eventblocktext {background:unset !important} 
    
/*
    .eventButtons .imageCard img {
        -webkit-animation: smooth 8s ease-in;
        -moz-animation: smooth 8s ease-in;
        -o-animation: smooth 8s ease-in;
        -ms-animation: smooth 8s ease-in;
        animation: smooth 8s ease-in;
        animation-iteration-count: infinite;  
        animation-delay: 8s;
    }
    .eventButtons .imageCard:nth-child(1n) img {animation-delay: 0s, 6,s 6s, 6s;}
    .eventButtons .imageCard:nth-child(2n) img {animation-delay: 6s, 6s, 6s, 6s;}
    .eventButtons .imageCard:nth-child(3n) img {animation-delay: 12s, 6s, 6s, 6s;}
    .eventButtons .imageCard:nth-child(4n) img {animation-delay: 18s, 6s, 6s, 6s;}
    .eventButtons .imageCard:nth-child(5n) img {animation-delay: 24s, 6s, 6s, 6s;}
    .eventButtons .imageCard:nth-child(6n) img {animation-delay: 30s, 6s, 6s, 6s;}
    .eventButtons .imageCard img:hover {opacity: 1 !important}
    .eventButtons p.eventblocktext {background:unset !important} 
    
    @-webkit-keyframes smooth { 0% { opacity: 0.38;} 50% { opacity: 1;} 100% { opacity: 0.38} }
    @-moz-keyframes smooth { 0% { opacity: 0.38;}  50% { opacity: 1;} 100% { opacity: 0.38} }
    @-o-keyframes smooth { 0% { opacity: 0.38;}  50% { opacity: 1;} 100% { opacity: 0.38} }
    @keyframes smooth { 0% { opacity: 0.38;}  50% { opacity: 1;} 100% { opacity: 0.38} }

*/

/* About */

    .about .accordionBlock.light .accordion-title {background: #f2f2f2; margin-bottom:3px; font-weight:bold}
    @media only screen and (min-width: 767px) {
        .about #sideContent table {border-top:1px solid #e9e9ea; margin-top:20px}
        .about #sideContent tr {border-bottom:1px solid #e9e9ea; margin:12px 0px}
        .about #sideContent tr > td:nth-child(odd) {width:65px; color: #5c5c5d; font-weight:bold; font-size:1rem}
        .about .flexGrid.actionBlocks.withIcons.col3 .flexCard {border-bottom:1px solid #006e8c;}
        .about .flexGrid.actionBlocks.withIcons.col3 .flexCard .lightcyan {padding-bottom:10px}
    }
    @media only screen and (min-width: 601px) {
        .about .lightcyan.noHover {position:relative}
        .about .flexGrid.actionBlocks.withIcons.col3 .flexCard:first-child .lightcyan.noHover::after {content: ''; position: absolute; bottom: 0; left: 42%; width: 0; height: 0; border: 25px solid transparent; border-top-color: #cde7f3; border-bottom: 0; margin-bottom: -25px;}
    }
    @media only screen and (min-width: 1024px) and (max-width:1449px) {.about #sideContent {margin-top: 240px; }}
    @media only screen and (min-width: 1450px) {.about #sideContent {margin-top: 220px; padding-left:2%}}
    
    .generative .tier.accordion {margin-bottom:0px}
    .generative .accordionBlock {margin-top:0px}
    .generative .thirdRight .lightgray,
    .generative .fourthRight .lightgray {padding:15px 20px 20px 20px; margin-bottom: 1.5em; border-radius: 5px;}
    .generative .caption {font-family: Georgia, serif; font-style: italic; padding: 3px; color: #5c5c5d;}
    .generative .columns img.osprey {width:100%}
    @media only screen and (min-width: 1450px) {
        .generative .columns img.osprey,
        .generative .accordionBlock {max-width: 64.6666667%;}}
    @media only screen and (min-width: 1280px) and (max-width:1449px) {
        .generative .columns img.osprey,
        .generative .accordionBlock {max-width: 64.6666667%;}
    }
    @media only screen and (max-width: 1279px) {
        .generative .columns img.osprey {width:100%}
        .generative .thirdRight > .flexCard {flex:1 1 100% !important; max-width: 100% !important;}
    }

/* Courses */

    .courses #tier2 .heading {font-weight:bold} /* certificates */
    .courses .columns .flexCard:first-child,
    .courses #tier2.columns .flexCard:first-child,
    .courses #tier2.columns .flexCard:first-child {background-color: #0a233f; border-right: 5px solid #00b2e2;}
    .courses #tier2 .caption[class*="align"] .captionwrap p.title3 {color:#ffffff !important}
    .courses #tier2 .item {background:#0a233f}
    @media only screen and (min-width: 600px) and (max-width: 900px) {.courses .flexGrid[class*="col"]:not(.col1):not(.col2)>.flexCard {flex: 1 1 50%; max-width: 48%;}}

/* Banners attached in-page */

    .tier.banner.none {margin-bottom:0px} /* badges */
    .tier.banner.none .caption.align6 .container {background-color: rgba(255,255,255,0.65); border:1px solid #cde7f3}
    .tier.banner.none .caption.align6 .captionwrap * {max-width: 750px; color:#000000 !important}
    @media only screen and (max-width: 767px) {.tier.banner.none .caption.align6 .container {background-color: rgba(255,255,255,0.85)} /*less transparent on mobile*/}
    @media only screen and (max-width: 900px) {.students .bgPhoto, .courses .bgPhoto {background-position-x: 20%}}
    @media only screen and (min-width: 900px) and (max-width: 1023px) {
        .students #tier4.banner .bgPhoto .container, 
        .courses #tier2.banner .bgPhoto .container {width: unset; max-width: unset !important;}
    }
    .students .bgPhoto .sr-only {width: unset !important; height: unset !important; clip: unset !important; bottom: -30px; right: 3%; text-align: right; font-style: italic;}
    .students #tier4 .flexCard.blue {margin: 0px 6px;} /* Get Involved tier */

/* Audience & Getting Started */

    .getstarted .actionBlocks h3 {margin-bottom:15px}
    .getstarted .actions.blue .flexGrid[class*="action"] .blue a:hover * {background: unset !important; color: #ffffff !important;}
    .getstarted .eventButtons {background: #0a233f;}
    .getstarted .eventButtons h3 {color:#ffffff !important}
    .getstarted .accordionBlock.dark > ul {counter-reset: item; margin-left:15% !important; margin-right:10% !important; }
    .getstarted .accordionBlock.dark > ul > li {position: relative; margin-top:10px}
    .getstarted .accordionBlock.dark > ul > li:before {content: counter(item) "."; counter-increment: item; display: inline-block; text-align: right; width:30px; font-size: 2.5em; font-family: "Open Sans", san-serif; font-weight: 800; color: #5c5c5d/*#00b2e2*/; margin-left: -50px; line-height: 1.5em; position: absolute;}
    .getstarted .accordionBlock.dark > ul > li > a.accordion-title {font-weight: bold}
     @media only screen and (max-width: 600px) {
         .getstarted .accordionBlock.dark > ul {margin-left:45px !important; margin-right:0px !important; }
         .getstarted .accordionBlock.dark > ul > li:before {font-size: 4em; margin-left: -60px; }
     }
    
    .faculty #tier2.blue .flexCard.blue {border: 2px solid #00b2e2;}
    .faculty #tier2.blue .flexCard.blue a.btn-blue {padding: 1rem; margin: 1em auto 0em auto !important; background: #1b3959; width: 45% !important; min-width: 175px; text-align: center; color: #ffffff !important; border: 2px solid #0a233f; outline: none !important}
    .faculty #tier2.blue .flexCard.blue a.btn-blue:hover{background-color:#00b2e2; border:2px solid #02a1c9}
    .faculty #tier4.blue.columns .flexGrid.thirdLeft .blue:first-child {border-right: 2px solid #00b2e2;}
    .faculty #tier4.blue.columns .flexGrid.thirdLeft .blue:first-child a {padding: 1rem; margin: 1em auto 0em auto !important; background: #1b3959; width: 40% !important; min-width: 175px; text-align: center; color: #ffffff !important; border: none; outline:none !important}
    .faculty #tier4.blue.columns .flexGrid.thirdLeft .blue:first-child a:hover{background-color:#00b2e2; border:2px solid #02a1c9}
    
    .students .fauxBtn {padding: 1rem; margin: 1em auto 0em auto !important; background: #1b3959; width: 35%;  min-width: 175px; color:#ffffff !important; border: 2px solid #0a233f; text-align: center;}
    
    .staff .tier.actions.blue .actionBlocks .cyan {font-size:1.35em; font-weight:bold}
    @media only screen and (max-width: 900px) {.staff #tier3.columns.blue .flexCard.blue div[style*="inline"] {width:100% !important}}
    
    .community #tier2 .tier.spacer.bgPhoto {min-height: 150px !important;}
    .community .caption[class*="align"] .container {padding: 6px 10px; margin:30px 50px; font-size: .9rem; background-color: #0a233f /*background-color: rgba(10, 35, 63, 0.65);*/}
    .community .eventRight h4 {margin-bottom:10px}
    .community .lightgray .btn-cyan {position: absolute; right: 1%; top: 50px; width: 12.5%; padding: 20px 0px;}
    @media only screen and (min-width: 767px) {.community .lightgray {padding-right:45% !important}}
    @media only screen and (max-width: 767px) {.community .lightgray .btn-cyan {width:95%; position:unset; right:unset; top:unset}}
    

/* Technologies */

    .tech .btnSlash {display: flex; background-color:#dbdbdb; margin:1.5em 0 0 0 !important;}
    .tech .btnSlash li {flex: 1 1 49.4%; font-weight: bold; padding: 10px; margin:0px !important; position:relative; list-style-type: none;}
    .tech .btnSlash li:first-child::after {content: ''; background-color: #e9e9ea; width: 10px; transform: skewX(-20deg); transform-origin: top right; position: absolute; top: 0; right: -9px; bottom: 0;}
    .tech .btnSlash li:last-child::before {content: ''; background-color: #e9e9ea; width: 10px; transform: skewX(-20deg); transform-origin: bottom left; position: absolute; top: 0; left: -9px; bottom: 0;}
    .tech .btnSlash li:last-child {padding-left: 22px;}
    .tech .btnSlash li:first-child:hover::after,
    .tech .btnSlash li:last-child:hover::before {background-color: #00b2e2;}
    .tech .btnSlash li:hover a {border-bottom: 1px solid #00b2e2; text-decoration:none !important}
    .tech table th,
    .tech table td {width: unset !important;}
    .tech table td:first-child {width:250px !important}
    .tech table td:nth-child(even) {width:175px !important}
    .tech .tablefilterbox table td:last-child {display:none}
    @media only screen (max-width: 800px) {.tech .table td > b {display:none}}
    @media only screen (min-width: 600px) and (max-width: 800px) {.tech .flexGrid[class*="col"]:not(.col1):not(.col2)>.flexCard {flex: 1 1 100%; max-width: 100%;}}


/* Training Opportunities */

    .eventRight .eventinfo {padding: 5px 10px}
    .eventRight .eventdate {font-weight:bold; font-size: 1.2em; padding:10px}
    .eventRight h2 {font-size: 1.5em; margin-bottom: 0.25em;}
    .eventRight .buttonText {padding:15px}
    .eventRight.first .flexCard {background:#e9e9ea;}
    .eventRight.first .eventinfo {flex: 1 1 65% !important; max-width: 64.6666667% !important;}
    .training .tier.actions.none .actionBlocks .lightgray {font-size:1.15em}
    .training .tier.actions.none .actionBlocks .lightgray img {height:50px !important; width:auto !important; margin-right:10px;}


/* Prompts */

    .prompts .accordionBlock > ul {counter-reset: item; margin-left:15% !important; margin-right:10% !important; }
    .prompts .accordionBlock > ul > li {position: relative; margin-top:20px}
    .prompts .accordionBlock > ul > li:before {content: counter(item) "."; counter-increment: item; display: inline-block; text-align: right; width:30px; font-size: 2.5em; font-family: "Open Sans", san-serif; font-weight: 800; color: #5c5c5d/*#00b2e2*/; margin-left: -50px; line-height: 1.5em; position: absolute;}
    .prompts .accordionBlock > ul > li > a.accordion-title {font-weight: bold}
    .prompts .accordionBlock .accordion-title {font-size:1.15rem; border: 1px solid #e6e6e6;}
    .prompts .columns .flexGrid.col3 .flexCard:first-child {background-color: #0a233f; border-right: 5px solid #00b2e2;}
    .prompts .columns .flexGrid.col3 .flexCard:first-child * {color:#ffffff !important}
    .prompts .columns .flexGrid.col3 .flexCard:last-child {background-color: #ffffff; padding-top:40px}
    .prompts #tier5 ul {margin-left:20px}
    
    @media only screen and (min-width: 1024px) {
    .prompts .columns.lightcyan .flexGrid.noGutters.col6>.flexCard {max-width: 18%; flex: 1 1 auto;}
    .prompts .columns.lightcyan .flexGrid.noGutters.col6>.flexCard:first-child{max-width: 12%;}
    .prompts .columns.lightcyan .flexGrid.noGutters.col6>.flexCard:nth-child(2){max-width: 135px;}
    .prompts .columns.lightcyan .flexGrid.noGutters.col6>.flexCard:nth-child(2) img {border-right:2px solid #00b2e2; padding: 20px 20px 20px 0px}
    .prompts .columns.lightcyan .flexGrid.noGutters.col6>.flexCard:last-child{max-width: 20%;}
    }

    
/* Definitions */

    @media only screen and (min-width: 850px) {.definitions .tier.parallax {display:block !important; height:250px !important; margin-bottom: 0px !important}}
    @media only screen and (max-width: 850px) {.definitions .tier.parallax img.responsiveImage {display: none !important;}}
    .definitions .tier.parallax img.responsiveImage {display: none !important;}

/* Strategy & Council (narrower width) */

    .strategy,
    .council {max-width:1200px; margin:0px auto}