@charset "utf-8";

/* CSS Document */

body{
    backround-color: #ffffff;
    color: black;
    margin-right: 0px;
    margin-left: 0px;
    font-family: 'Playfair Display', serif;
}

footer{
    background-color: #032111;
    text-align: center;
    color: white;
}
div.container{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
div.row{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
}

footer.container-fluid{
    text-align: center;
    
}
.col-sm-4{
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;
}
.col-sm-3{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}
.col-sm-12{
    display: flex;
    align-content: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.buttons{
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #333333;
    color: #333333;
    text-align: center;
}

a{
    color: white;
    
}
a:hover{
    text-decoration: none;
    color: #032111 !important;
}
p{
   font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-size: 20px;
}
.headshot{
    display: flex;
    flex-direction: column;
    justify-content: row;
    align-content: center;
}
.names{
    text-align: center;
    font-size: 20px;
    display: block;
}
.about{
    padding-left: 150px;
    padding-right: 150px;
}
.logo-1{
	width: 50%;
}
.logo-2{
width: 100%;
}

.align-items-center {
  -ms-flex-align: center!important;
  align-items: center!important;
}
.d-flex {
  display: -ms-flexbox!important;
  display: flex!important;
}

@media only screen and (min-width: 0px) and (max-width: 992px){
    div#logo-1{
        display:none;
    }
    div.parallax{
        height: 90%;
    }
}

@media only screen and (min-width: 992px){
   
    div#logo-2{
        display:none;
    }
} 