@font-face
{
    font-family: 'Libre Baskerville';
    src: url('/assets/fonts/baskervville-v1-latin-regular.woff');
}

body
{
    background-color:#ffffff;
    font-family: 'Libre Baskerville';
}

h2
{
    font-weight: bold;

}
.debug
{
    border: red solid 1px;
}

.masthead
{
    background-color:#cccccc;
    position:fixed;
    top:0px;
    left:0px;
    height:100px;
    width:100%;
    z-index: 100;
    color:white;
    padding:0px;
    margin:0px;
    box-shadow: 0px 10px 10px rgba(0,0,0,.5);
}

.mastheadLogo
{
    padding-left:10px;
    padding-top:7px;
    height:90px;
}

.mastheadText
{
    padding-right:20px;
    font-size: 24px;
    color:#000000;
}

.mastheadIcon
{
    margin-top:5px;
    background-color: #ffffff;
    border-radius: 6px;
}
.mastheadButton
{
    width:40px;
    height:40px;
    border-radius:5px;
    background-color:#000000;
    display:inline-block;
    margin-right:20px;
    margin-top:5px;
    margin-bottom:5px;
}

.mastheadButton img
{
    padding-top:4px;
    padding-right:4px;
}

.projectIndex
{
    background-color:black;
    margin-top:100px;
}

.projectCoverContainer
{
    padding:0px;
    margin:0px;
}

.projectCover
{
    padding:0px;
    margin:0px;
    background-color:black;
    padding-bottom:100%;
    width:100%;
    overflow:hidden;
    color:transparent;
    transition: all .2s ease-in-out;
}

.projectCover:hover
{
    transform: scale(1.1);
    color:#ffffff;
    text-shadow: 1px 1px rgba(0,0,0,.5);
}

.projectCoverImage
{
    position:absolute;
    top:0px;
    left:0px;

    width:100%;
    height:100%;

    transition: all .2s ease-in-out;
    overflow:hidden;
}

.projectCoverTitle
{
    position:absolute;
    top:10%;
    left:10%;
    font-family: 'Libre Baskerville', serif;
    font-size: 24px;
}

.projectCoverText
{
    position:absolute;
    top:40%;
    left:10%;
    font-family: 'Libre Baskerville', serif;
    font-size: 48px;
    color:#ffffff;
}

.flourish
{
    margin:auto;
    display:block;
    width:20%;
    /* padding-bottom:2%; */
}

.projectHeader
{
    background-color:#000000;
    background-size:cover;
    /*height:350px;*/
    margin:0;
    padding:0;
    overflow:hidden;
}

.projectHeaderVideo
{
    position:absolute;
    /*width:100%;*/
    margin:0;
    padding:0;
}

.projectHeaderTitle {
    font-family: 'Libre Baskerville', serif;
    font-size: 72px;
    text-shadow: 2px 2px rgba(0,0,0,.7);
    text-align: center;
    margin-top:150px;
    color:#ffffff;
    position:absolute;
    z-index: 10;
    width:95%;
    margin-left:2%;
    display:inline-block;
}

.projectHeaderSubtitle
{
    font-family: 'Libre Baskerville', serif;
    font-size: 24px;
    font-weight: bold;
    color:#000000;
    margin-bottom:30px;
}

.projectContainerMargin
{
    /*background-color:#000000;    */
    background-color:#ffffff;
}
.projectContainer
{
    background-color:#ffffff;
    font-family: 'Libre Baskerville', serif;
    font-size: 18px;
    line-height: 30px;
    color:#000000;
    padding-top:30px;
}

.projectContainer img
{

    max-width:100%;
    max-height:600px;
    margin-top:30px;
    margin-bottom:30px;
    /* margin:auto; */
    display:block;

    /*box-shadow: 3px 3px 3px #888888;*/
}
.projectContainer video
{
    width:100%;
    height: auto;
    margin-top:30px;
    margin-bottom:30px;
    background-color: #cccccc;
}

video.smallMedia
{
    width:40%;
}


img.smallMedia
{
    width:47.0%;
    margin-left:0;
    margin-right:1.5%;
    margin-bottom:3%;
    margin-top:0;
    display:inline-block;
}

img.smallMediaRight
{
    width:47.0%;
    margin-left:1.5%;
    margin-right:0;
    margin-bottom:3%;
    margin-top:0;
    display:inline-block;
}

@media screen and (max-width:768px)
{
    .projectHeader {
        height:500px;
    }
    .projectHeaderVideo {
        height:500px;
    }

    .projectHeaderTitle {
        font-size: 48px;
        width:90%;
        margin-left:5%;
    }
    .projectCover {
        color:#ffffff;
    }
}
@media screen and (min-width:768px)
{
    .projectHeader {
        height:350px;
    }
    .projectHeaderVideo {
        width:100%;
    }
}