html {
    scroll-behavior: smooth;
}

nav button {
    opacity: 1;
    background-image: none;
}

button {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    color: maroon;
    border: 2px solid maroon;
    border-radius: 4px;
    background-image: linear-gradient(to right, white, lightgray);
    opacity: 60%;
}

button:hover {
    opacity: 80%;
    
}

.white {
    color: white;
}

.carousel-caption {
    background-color: black;
    opacity: 80%;
    border-radius: 5px;
    padding: 1%;
    color: white !important;
}

.centered {
    text-align: center;
}

img {
    width: 95%;
}

.sidebar, .back {
    background-color: lightgray;
}

.sidebar {
    border-radius: 15px;
}

.bg-body-tertiary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity))!important;
}

#woodCarousel .carousel-item {
    height: 435px;
}

@media screen and (min-width: 768px) {
.container .jumbotron, .container-fluid .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
}
}
.container .jumbotron, .container-fluid .jumbotron {
    border-radius: 6px;
}

.jumbotron {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom: 0px;
}
@media screen and (min-width: 768px) {
.jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
}

.jumbotron .h1, .jumbotron h1 {
    font-size: 70px;
}
}
.jumbotron {
    color: inherit;
    background-color: #eee;
}
.dropdown-menu {
    width: 100%;
}

.dropdown:hover>.dropdown-menu {
    display: block;
}

h3, h1 {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

h2 {
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.jumbotron {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom: 0px;
    min-height: 100px;
    display: flex;
    align-items: center;
}

svg {
    height: 100px;
}

.borders {
    border: solid rgba(125, 125, 125, 0) 6px;
    border-radius: 20px;
    padding-bottom: 1%;
    margin-top: 3%;
    background-color: rgba(255, 255, 255, 0.35);
    width: 100%;
}

a:hover .borders {
    background-color: rgba(255, 255, 255, 0.60);
}

.borders img {
    border-radius: 6px;
    margin-bottom: 3%;
}

.sectionJumping {
    background-image: url(media/chalkboardBkg.jpg); /* Change this url to be some other image  to change the background */
    color: lightgray;
    padding: 1%;
    z-index: 2;
}

#cncCarousel img {
    max-height: 650px;
    margin-right: auto;
    margin-left: auto;
}

#cncCarousel button.carousel-control-prev {
    background-image: linear-gradient(to right, black, transparent);
}

#cncCarousel button.carousel-control-next {
    background-image: linear-gradient(to left, black, transparent);
}

#cncCarousel .carousel-control-next-icon {
    margin-left: 30px;
}

#cncCarousel .carousel-control-prev-icon {
    margin-right: 30px;
}

.tabled {
    padding: 0%;
    background-color: lightgray;
    border-radius: 20px; 
}

.tabled .container-fluid {
    margin: 0px;
    padding: 0px;
}

.tabled .container-fluid .tabledTopRow {
    padding: 2% 2% 0.5%;
}

.tabled .container-fluid .tabledBotRow {
    padding: 0.5% 2% 1%;
}

.tabled p {
    padding: 0% 2%;
}

.edgedImg {
    width: 100%;
    padding: 2%;
}

.tabledTopRow .firstItem, .tabledBotRow .firstItem {
    padding-right: .75%;
}

.tabledTopRow .secondItem, .tabledBotRow .secondItem {
    padding-left: .75%;
}

.dispHidden {
    color: black;
}

a.dispHidden:hover {
    color: maroon;
}

.col-center {
    justify-content: center;
}

#activitiesTitle {
    color: white;
}

#activitiesSection {
    background-image: linear-gradient(maroon, white);
    padding-bottom: 2%;
    border-radius: 15px;
}

#interests-list {
    font-size: 16pt;
}

#hp-FIRSTic {
    width: 75%;
}

hr {
border-top: 3px solid maroon;
opacity: 1;
}

hr.minorBreak {
    border-top:4px dotted maroon;
    background-color: transparent;
}

.red {
    color: maroon;
}

#frcSeason {
    background-color: rgb(207, 207, 207);
    border-radius: 5px;
    padding:1%;
    padding-bottom: 0;
}

.up-P-fonts p {
    font-size: 14pt;
}

.up-P-fonts-sm p {
    font-size: 12pt;
}

.AMTitle {
    font-size: large;
}

.AMInfo {
    font-size: medium;
}



.skill {
    font-size: 18pt;
    width: 95%;
    text-align: center;
    border-radius: 6px;
    border: 3px solid lightgray;
    color: lightgray;

    padding: 1%;
    background-color: transparent;
    z-index: 1;
}

.carousel {
    margin: 3%;
    margin-top: 1%;
}

.carousel-img {
    width: 100%;
    display: block;
    margin: auto;
}


#lastFTCSeason {
    padding: 1%;
    padding-bottom: 0;
}

#lastFTCSeason img {
    width: 100%;
}

#lineRobotVid {
    padding: 1%;
}

#dcIQP .bkgImgFull, #capstone .bkgImgFull {
    color: lightgray;
    padding-top: 2%;
}

.sidebar h3 {
    font-size: 24px;
}

.sidebarDepd {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.sidebarDepd h4 {
    margin-top: 2%;
}

a {
    color: #337ab7;
    text-decoration: none;
}

nav {
    z-index: 3;
}

nav a:focus, nav a:hover {
    text-decoration: none;
}

a:focus, a:hover {
    text-decoration: underline;
}

h2, h3 {
    margin-top: 20px;
}

#wpiSiteInst {
    padding-bottom: 1%;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
}

.blockCarousel .carousel-control {
    width: 5%;
}

.blockCarousel {
    background-color: lightgray;
    border-radius: 15px;
}

#frc2022Carousel {
    background-color: white;
    border: 4px solid lightgray;
}

.blockCarousel .row {
    padding-left: 75px;
    padding-right: 75px;
}

.blockCarousel .active, .blockCarousel .carousel-item-start, .blockCarousel .carousel-item-prev {
    display:table !important;
}

.centeredCarouselItems {
    display:table-cell;
    vertical-align:middle;
}

.blockCarousel .carousel-control-prev {
    margin-left: -75px;
}

.blockCarousel .carousel-control-next {
    margin-right: -75px;
}


figure {
    margin-top: 2%;
    margin-bottom: 3%;
}

figcaption {
    margin-top: 0%;
}

.nav-tabs button {
    text-decoration: none;
    color: maroon;
    font-size: large;
    font-weight: bold;
    color: maroon;
    opacity: 100%;
}

.nav-tabs button:hover {
    opacity: 100%;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-color: maroon maroon white;
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-bottom-color: maroon;
    background-color: lightgray;
    color: maroon;
    isolation: isolate;
}

.nav-tabs .active.nav-link:focus, .nav-tabs .active.nav-link:hover {
    background-color: inherit;
    border-bottom-color: white;
}

#handVideo {
    margin-top: 2%;
}

#handPhotosRow {
    margin-top: 2%;
}

#handPhotosRow img {
    border-radius: 20px;
    width: 100%;
}

.navbar img {
    height: 50px;
    width: auto;
}

.carousel-indicators {
    z-index: 1;
}

.sitemap table {
    width: 100%;
}

.sitemap tr {
    height: 30px;
}

.sitemap th, .sitemap td {
    padding-left: 4px;
}

.sitemap tr:nth-child(even) {
    background-color: #dddddd;
  }

@media (min-width: 768px) {
    .navbar {
        font-size: x-large;
        height: 75px;
        margin-bottom: 2%;
    }

    .sectionJumping button {
        font-size: x-large;
    }

    .blockCarousel .carousel-item {
        height: 395px;
    }

    .skill {
        width: 100%;
        margin-top:2%;
    }

    .hrOnSmScreens {
        display: none;
    }

    .col-sm-4 .glyphicon-envelope {
        font-size: 125pt;
    }
}

.nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {
    border-bottom-color: transparent;
}

.nav-tabs.nav-justified>li>button {
    border-bottom: 1px solid maroon;
    border-radius: 4px 4px 0 0;
}

.tabbedDisplay .tab-content {
    border-radius: 0 0 4px 4px;
    border: 1px solid maroon;
    border-top-color: transparent;
}

.tabbedDisplay .tab-content { 
    padding: 2%;
}

a.dropdown-item.active, a.dropdown-item:active {
    background-color: maroon;
}

#handOperationVideo {
    margin-top: 2%;
    border-radius: 6px;
}

#finalHandMedia {
    /*background-color: lightgray;*/
    border-radius: 30px;
    padding: 0.5%;
}

#skillsHeader {
    color: lightgray;
}

p.hiddenSkillDetail {
    display: none;
    margin: auto;
    padding: 1%;
    z-index: 2;
    background-image: linear-gradient(rgb(174, 174, 174), rgb(235, 233, 233));
    border: 3px solid maroon;
    border-radius: 10px;
    position: absolute;
    width: inherit;
    translate: -30px;
}

.skillParent > .skill:hover ~ .hiddenSkillDetail {
    display: block;
}

.skill:hover {
    border-color: maroon;
}

.jumbotronRow {
    margin-bottom: 28px;
}

.smallShow {
    display: none;
}

#emailIcon {
    width: 75%;
}

.bkgImgFull {
    background-image: url(media/chalkboardBkg.jpg); /* Change this url to be some other image  to change the background */
    padding: 0 3% 3% 3%;
}

.carouselChevron {
    height: 50px;
}

#spinyBotRow #videoCol {
    background-color: white;
}

@media (min-width: 1200px) {
    #upperRow div.container-fluid.centered.borders {
        height: auto;
    }

    #lowerRow div.container-fluid.centered.borders {
        height: auto;
    }

    /*.skillsRow .col-md-3 {
        width: 50%;
    }*/
    .skillsRow .col-sm-6 {
        padding: 0px;
    }

    #frc2022Carousel .carousel-item {
        height: 544.859px;
    }
}

@media (max-width: 1200px) { /* Large Screens*/
    .skillsRow .col-md-3 {
        width: 50%;
    }
    .skillsRow .col-sm-6 {
        padding: 0px;
    }

    #localizationProject .blockCarousel .carousel-item {
        height: 450px;
    }

    #frc2022Carousel .carousel-item {
        height: 640px;
    }

    #fingerItrCarouselRow.blockCarousel .carousel-item {
        height: 440px;
    }
}

@media (min-width: 768px) {
    #cncCarousel img {
        width: auto;
    }
}

@media (max-width: 992px) { /* Medium Screens */
    .sidebar {
        padding-top: 1px;
        padding-bottom: 1px;
        width: 95%;
        margin: 0px 2.5% 15px 2.5%;
    }

    .sidebarDepd.col-3 {
        width: 33.33%;
    }

    #activitiesSection {
        padding-top: 1px;
    }

    p.hiddenSkillDetail {
        display: block;
        margin: 6%;
        margin-top: -1.5%;
        padding: 2%;
        z-index: 2;
        background-image: none;
        border: none;
        border-radius: 10px;
        position: relative;
        color: lightgray;
        width: auto;
        translate: 0;
    }

    .skill {
        margin: auto;
    }
    
    .skill:hover {
        border-color: lightgray;
    }

    #hoverTooltip {
        display: none;
    }

    .skillsRow .col-md-3 {
        width: 100%;
    }
    .skillsRow .col-sm-6 {
        padding: auto;
    }

    #redesignMediaRow .col-md-5 {
        width: 75%;
        margin: auto;
    }

    #redesignMediaRow {
        text-align: center;
    }

    #localizationProject .blockCarousel .carousel-item {
        height: 654px;
    }
    
    #woodCarousel .carousel-item {
        height: 746px;
    }

    #frc2022Carousel .carousel-item {
        height: 1011px;
    }
    

    #spinyBotRow video {
        width: 75%;
    }

    #spinyBotRow #videoCol {
        text-align: center;
    }

    #fingerItrCarouselRow.blockCarousel .carousel-item {
        height: 730px;
    }

    #fingerItrCarouselRow {
        margin: auto 0.5px;
    }

    #aboutMe img {
        margin-top: 5%;
        width: 50%;
    }

    .blockCarousel button.carousel-control-prev {
        margin-left: -25px;
    }

    .blockCarousel button.carousel-control-next {
        margin-right: -25px;
    }

    #woodCarousel img {
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 768px) { /* Small Screens */
    #upperRow div.container-fluid.centered.borders {
        height: auto;
    }

    #lowerRow div.container-fluid.centered.borders {
        height: auto;
    }

    .jumbotronRow .col-2 {
        width: 33.33%;
    }

    .jumbotronRow .col-10 {
        width: 66.67%;
    }

    .sectionJumping .col-sm-3 {
        text-align: center;
    }

    .sectionJumping button {
        margin: 5px 0px;
    }

    .tabled {
        margin: auto 5px;
    }
    
    h4.caption {
        font-size: 9pt;
        margin-bottom: 0px;
    }

    .carousel-indicators li, .carousel-indicators li.active {
        width: 6px;
        height: 6px;
        margin: 0;
    }

    .tabled p {
        padding-bottom: 10px;
    }

    .blockCarousel .row {
        padding: 0% 0.5%;
        
    }

    .blockCarousel button.carousel-control-prev {
        margin-left: -45px;
    }

    .blockCarousel button.carousel-control-next {
        margin-right: -45px;
    }

    .blockCarousel button.carousel-control-prev.chevron {
        margin-left: -25px;
    }

    .blockCarousel button.carousel-control-next.chevron {
        margin-right: -25px;
    }

    #localizationProject .blockCarousel .carousel-item {
        height: 625px;
    }

    #localizationProject .blockCarousel, #woodCarousel {
        margin: 0px 1px;
    }

    .scrollOverflow {
        overflow-y: auto;
        height: 585.2px;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollOverflow::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbar for IE, Edge and Firefox */
    .scrollOverflow {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    #woodCarousel .carousel-item {
        height: 908px;
    }

    #animalProjRow figure {
        text-align: center;
        width: 75%;
        margin: 7px auto;
    }

    .smallerOnSmallS {
        width: 75%;
        margin: 7px auto;
    }

    .row ~ .smallerOnSmallS {
        text-align: center;
    }

    .notSmallShow {
        display: none !important;
    }

    .smallShow {
        display: block;
    }

    #frc2022Carousel .carousel-item {
        height: 928px;
    }

    #frc2022Carousel {
        margin: auto 2px;
    } 

    #spinyBotRow video {
        width: 100%;
    }

    .tab-content img {
        margin: 5px auto;
    }

    .up-P-fonts p, .up-P-fonts-sm p {
        font-size: inherit;
    }

    #fingerItrCarouselRow.blockCarousel .carousel-item {
        height: 740px;
    }

    #fingerItrCarouselRow .scrollOverflow {
        height: 496px;
    }

    #handPhotosRow .col-4 {
        padding: 2px;
 
    }

    #finalHandMedia {
        border-radius: 15px;
    }

    #woodCarousel img {
        width: 80%;
    }

    #contactLocationsRow .col-4 {
        width: 50%;
    }

    #contactLocationsRow h3 {
        font-size: 12pt;
    }

    #activitiesSection {
        margin: auto 2px;
    }
}
@media (max-width: 568px) { /* x-Small screens (phones) */
    #woodCarousel .carousel-item {
        height: 765px;
    }
}

#dc-exp-row img {
    margin-bottom: 2%;
}