/* this is css for B&F*/
html{
    box-sizing:border-box
}
*,*:before,*:after{
    box-sizing:inherit
}
html{
    -ms-text-size-adjust:100%;-webkit-text-size-adjust:100%
}
body{
    margin:0
}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{
    display:block
}
summary{
    display:list-item
}
audio,canvas,progress,video{
    display:inline-block
}
progress{
    vertical-align:baseline
}
audio:not([controls]){
    display:none;height:0
}
[hidden],template{
    display:none
}
a{
    background-color:transparent
}
a:active,a:hover{
    outline-width:0
}
abbr[title]{
    border-bottom:none;text-decoration:underline;text-decoration:underline dotted
}
b,strong{
    font-weight:bolder
}
dfn{
    font-style:italic
}
mark{
    background:#ff0;color:#000
}
small{
    font-size:80%
}sub,sup{
     font-size:75%;line-height:0;position:relative;vertical-align:baseline
 }
sub{
    bottom:-0.25em
}
sup{
    top:-0.5em
}
figure{
    margin:1em 40px
}
img{
    border-style:none
}
code,kbd,pre,samp{
    font-family:monospace,monospace;font-size:1em
}
hr{
    box-sizing:content-box;height:0;overflow:visible
}
button,input,select,textarea,optgroup{
    font:inherit;margin:0
}
optgroup{
    font-weight:bold
}
button,input{
    overflow:visible
}
button,select{
    text-transform:none
}
button,[type=button],[type=reset],[type=submit]{
    -webkit-appearance:button
}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{
    border-style:none;padding:0
}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{
    outline:1px dotted ButtonText
}
fieldset{
    border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em
}
legend{
    color:inherit;display:table;max-width:100%;padding:0;white-space:normal
}
textarea{
    overflow:auto
}
[type=checkbox],[type=radio]{
    padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;outline-offset:-2px
}
[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-file-upload-button{
    -webkit-appearance:button;font:inherit
}
/* End extract */

.bf-serif{
    font-family:serif
}

.bf-wide{
    letter-spacing:4px
}
hr{
    border:0;border-top:1px solid #eee;margin:20px 0
}
.bf-image{
    max-width:100%;height:auto
}
img{
    vertical-align:middle
}
a{
    color:inherit
}
.bf-top,.bf-bottom{
    position:fixed;width:100%;z-index:1
}
.bf-top{
    top:0
}
.bf-bottom{
    bottom:0
}
.bf-button{
    border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap
}
.bf-button{
    -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.bf-large{
    font-size:18px!important
}
.bf-input{
    padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%
}
.bf-bar{
    width:100%;overflow:hidden
}
.bf-bar-item{
    padding:8px 8px;float:left;width:auto;border:none;display:block;outline:0
}
.bf-white,.bf-hover-white:hover{
    color:#000!important;background-color:#fff!important
}
.bf-padding{
    padding:8px 16px!important
}
.bf-padding-large{
    padding:12px 24px!important
}
.bf-padding-16{
    padding-top:16px!important;padding-bottom:16px!important
}

.bf-padding-32{
    padding-top:32px!important;padding-bottom:32px!important
}
.bf-padding-64{
    padding-top:64px!important;padding-bottom:64px!important
}
.bf-padding-large{
    padding:12px 24px!important
}
.bf-card{
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}

.bf-right{
    float:right!important
}
.bf-display-container{
    position:relative
}
.bf-display-bottomleft{
    position:absolute;left:0;bottom:0
}
.bf-content,.bf-auto{
    margin-left:auto;margin-right:auto
}
.bf-content{
    max-width:980px
}
.bf-auto{
    max-width:1140px
}
.bf-wide{
    letter-spacing:4px
}
.bf-image{
    max-width:100%;height:auto
}

.bf-row:after,.bf-row:before,.bf-bar:before,.bf-bar:after,.bf-container:after,.bf-container:before{
    content:"";display:table;clear:both
}
.bf-col{
    float:left;width:100%
}
.bf-row-padding,.bf-row-padding>.bf-half,.bf-row-padding>.bf-third,.bf-row-padding>.bf-twothird,.bf-row-padding>.bf-threequarter,.bf-row-padding>.bf-quarter,.bf-row-padding>.bf-col{
    padding:0 8px
}
.bf-center{
    text-align:center!important
}
.bf-center .bf-bar{
    display:inline-block;width:auto
}
.bf-container{
    padding:0.01em 16px
}
.bf-text-blue-grey,.bf-hover-text-blue-grey:hover,.bf-text-blue-gray,.bf-hover-text-blue-gray:hover{
    color:#607d8b!important
}
.bf-light-grey,.bf-hover-light-grey:hover,.bf-light-gray,.bf-hover-light-gray:hover{
    color:#000!important;background-color:#f1f1f1!important
}
.bf-section,.bf-code{
    margin-top:16px!important;margin-bottom:16px!important
}
.bf-rest{
    overflow:hidden
}
.bf-stretch{
    margin-left:-16px;margin-right:-16px
}
.bf-content,.bf-auto{
    margin-left:auto;margin-right:auto
}
.bf-content{
    max-width:980px
}

.bf-button:hover{
    color:#000!important;background-color:#ccc!important
}

html,body {
    margin:0;
    font-family: 'Dawning of a New Day', cursive;
}

.title-container {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.title {
    font-family: 'Dawning of a New Day', cursive;
    font-size:30pt;
    font-weight:normal;
}

.project-title {
    font-size:15pt
}

.filter {
    text-align: 0 auto;
    font-family: "Times New Roman";
    color: #000000;
    padding: 3px 10px;
    cursor:pointer;
    border-radius: 10px;
    transition: all 0.35s;
    font-size: 21px;
    line-height:200%
}

.filter.active {
    background-color: #79bbff;
    box-shadow:0px 1px 3px 0px #87CEFA;
}

.filter:hover {
    background: #528ecc ;
}

.projects {
    margin-bottom:50px;
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.projects-enter {
    transform: scale(0.5) translatey(-80px);
    opacity:0;
}

.projects-leave-to{
    transform: translatey(30px);
    opacity:0;
}

.projects-leave-active {
    position: absolute;
    z-index:-1;
}

.circle {
    text-align:center;
    position:absolute;
    bottom:-50px;
    left:70px;
    width:120px;
    height:120px;
    border-radius:60px;
    /* 	border:1px solid black; */
    display:flex;
    box-shadow: 0px -4px 3px 0px #494d3257;
    justify-content:center;
    align-items:center;
    background-color:#fff;
    /* 	box-shadow:0px -3px 3px #484848a6; */
}

.project {
    transition: all .35s ease-in-out;
    margin:10px;
    box-shadow:0px 2px 8px lightgrey;
    border-radius:3px;
    width:400px;
    height:400px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.project-image-wrapper {
    position:relative;
}

.gradient-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:150px;
    opacity:0.09;
    background:
            linear-gradient(to bottom, rgba(0,210,247,0.65) 0%,rgba(0,210,247,0.64) 1%,rgba(0,0,0,0) 100%),
            linear-gradient(to top, rgba(247,0,156,0.65) 0%,rgba(247,0,156,0.64) 1%,rgba(0,0,0,0) 100%);
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}

.project-image {
    width:100%;
    height:400px;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}