.navBar{

    height: 60px;
    width: auto;
}
.greet{

    height: auto;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

#aboutSection p{
    padding-top: 20px;
}
.contact p{
    padding-top: 1px;
    margin-bottom: 0;

}
.bg-bar{
    background-color: #2f4858;
}
.container-fluid {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 500px;
}

.home{

    -webkit-box-shadow: 0px -4px 3px #2f4858, 0px 4px 3px #2f4858;
    -moz-box-shadow: 0px -4px 3px #d49d00, 0px 4px 3px #2f4858;
    box-shadow: 0px -4px 3px #2f4858, 0px 4px 3px #2f4858;
}

.nextTo{
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
}
#vision:hover, #misson:hover{
    cursor: pointer;

}
.extra{
    margin-top: 10px;
}
.endPic{
    background-image: url("../resources/playing.png");
    background-repeat: no-repeat;
    background-position: top ;
    background-size: 100% auto ;
    width: 100%;
    height: 600px;
}
.contactDetails{
    position: absolute;
    bottom: 0px;
}
#calendar td{

    width: 150px;
    height: 150px;
    border: solid 5px steelblue;
}
.spinner{
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    height: 400px;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.extraPic{
    display: block;
    width: 100%;
    height: auto;


}


#activeImage{
    margin-top: 20px;
}


.spinFront{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: #2f4858;
    color: white;
}
.spinBack{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background-color: lightgray;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#valuesSection{
    padding-top: 50px;
}
#ethosSection{
    padding-top: 20px;
    width: 60%;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#btnMessage{
    margin-top: 8px;
}
.contactImage{

    width: 100%;
    height: auto;
    padding-top: 20px;
}
.Hactive{

    border-bottom: solid 3px dodgerblue;

}
#programContainer{
    width: 100%;
    margin: 0;
}
#programBackground{
 padding-bottom: 0;
}
.staffCard{
    margin-top: 25px;
}
.linkPic{
    width: 100%;
    height: auto;
}
#visionSection{
    height: 600px;
}
.missionList{
    align-content: left;
}
#gmap_canvas{
    padding-top: 30px;
    width:100%;
    height:100%;
}
.staffCard  img{
    width: auto;
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#links{
    padding-top: 30px;
    padding-bottom: 20px;
}
.staffCard > .card{

    height: 500px;
}
#photosArea,#staffArea{
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
}
#elephantImage{
    height: 50vh;
    width: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#photosArea > .staffCard,#staffArea > .staffCard {
    display: inline-block;

}
.far:hover, .fas:hover {
    cursor: pointer;
}
#staffArea img,#photosArea img{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 200px;
    width: auto;
}
#photosArea,#staffArea > .staffCard >.card{
    height: 400px;
}
#staffDisplay img{
    width: 180px;
    height: auto;
}
.contain{

    height: 300px;
}

.card-body{
    box-shadow: 4px 4px 4px #2f4858;
}
#pictures img {
    height: 10vh;
    width: auto;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
#pictures{
    margin-top: 30px;
    background-color: #f7f7f7;
    box-shadow: 2px 2px 8px black;
}

#staffPic{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width:200px;
    height: 200px;
    border: 1px solid black;
}
#staffPic >img{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    height: 100%;
}
.linkPic:hover{
    cursor: pointer;

    -webkit-transition: all 0.5s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 0.5s ease-in-out; /** Firefox **/
    -o-transition: all 0.5s ease-in-out; /** Opera **/
    transform: translate(20px);
    -webkit-transform: translate(20px); /** Chrome & Safari **/
    -o-transform: translate(20px); /** Opera **/
    -moz-transform: translate(20px); /** Firefox **/
}
.borderless td, .borderless th {
    border: none;
}
.program{
    margin-top: 5px;
}
.program > .card-header{
     background-color: #2f4858;
     color: white;
 }
.program > .card-header:hover{
    cursor: pointer;
}

@media only screen and (min-width: 900px) {


    .galleryImage{
        width: auto;
        height: 60vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .staffCard{


        width: 400px;
        height: 500px;

    }

    .spinner:hover{
        cursor: pointer;

    }
    #about {
        width: 100%;
        height: 500px;
        background-image: url("../resources/About.png");
        background-repeat: no-repeat;
        background-position: center;

        background-size: auto 100%;
    }

    #aboutSection{
        width: 500px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #valuesSection{
        background-image: url("../resources/penguin.png"), url(../resources/giraffe.png);
        background-repeat: no-repeat;
        background-position: right, left;

        background-size: 13% auto;
    }
    #programContainer{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

.navbar-toggler{
    border-color: white;
}
.navbar-toggler > span{

}
#fooiPic{
    padding-top: 40px;
    padding-left: 20px;
    width: 100%;
    height: auto;
}
@media only screen

and (max-device-width: 736px)
and (orientation: portrait) {

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        height: 50px;
        width: 50px;
        outline: black;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 2px solid black;
        background-image: none;
    }


    .staffCard{

        width: 100%;
        height: 500px;

    }


    .linkPic{
        width: 80%;
        height: auto;
    }
    .galleryImage{
        width: auto;
        height: 30vh;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }


}