/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    width: 100%;
    height: 100%;
    background-color: #333131;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}

.navbar{
    background-color: #570000;
    border-bottom-color: black;
   
   border-bottom-style: 5px solid;

}

.navbar-default .navbar-nav > li > a{
    color: white;
}


.navbar-default .navbar-nav > li > .active

{
    padding-bottom: 1px;
    padding-top: 12px;
    background-color: transparent;
    border-top-style: solid;
    border-color: white;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: white;
  background-color: transparent;
}

#bigolpage{
    padding-top: 150px;
    height: 900px;
}

.intro-section {
    height: 100%;
    padding-top: 0px;
    padding-bottom: 80px;
    text-align: center;
    background: #333131;
    color: white;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.event-section{
    height:100%;

    padding-top:0px;
    text-align: center;
    background: #eee;
}

.event-pic{
    height: 280px;
    width: 500px;
    object-fit: contain;
}

.officer-intro{
    padding-top:0px;
    padding-bottom:20px;
}

.officers-section {
    
    padding-top: 0px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 0px;
    text-align: center;
    background: #eee;
}
.officer-cell{
    height: 360px;
}

.officer-pic{

    height: 200px;
    width: auto;
    max-height: 150px;
    border-radius: 60px 60px 60px 60px;
    text-align: center;
}

.angular-google-map-container{
    height: 400px;
}


/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#bigolpage.ng-enter,
#bigolpage.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
/* enter animation */
#bigolpage.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
    -moz-animation:slideInRight 0.5s both ease;
    animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#bigolpage.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
    -moz-animation:slideOutLeft 0.5s both ease;
    animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
    to      { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {  
    to      { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
    to      { -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
    from    { transform:translateX(200%); }
    to      { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from    { -moz-transform:translateX(200%); }
    to      { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from    { -webkit-transform:translateX(200%); }
    to      { -webkit-transform: translateX(0); }
}