/* https://github.com/simonlc/Markdown-CSS (Public Domain) */
/* Slight modifications. */

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    }

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }
.clear {clear: both;}
/*----------------end helper styles--------------------*/
/* Typography */
h1 {
    color: #c1288b;
    margin: 20px 0 0 0;
}
h2 {
    font-size: 22px;
    margin: 20px 0;
}
p {
    font-size: 14px;
}
a {
    color: #df2fab;
    font-weight: 900;
}
a:hover{ color: #c2127f; }
a:active{ color:#943cd8; }
a:visited{ color: #502f88; }
a:focus{ outline: thin dotted; }
a:hover, a:active{ outline: 0; }

::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
::selection{background:rgba(255,255,0,0.3);color:#000}

a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
a::selection{background:rgba(255,255,0,0.3);color:#0645ad}

/* General */
body {
    color: #4a4a4a;
    padding: 1em;
    font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+44,bee3a9+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 44%, #e9d7f3 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 44%,#e9d7f3 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 44%,#d2e37c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bee3a9',GradientType=0 ); /* IE6-9 */
    background-attachment: fixed;
}
img.mobile-bg {
    z-index: -1;
    position: fixed;
    opacity: .2;
}
#HummingBirdImage.mobile {
    display: block;
}
#HummingBirdImage.desktop {
    display: none;
}
img {
    width: 100%;
}
.photography img {
    width: 49%;
}
@media only screen and (min-width: 800px) {
    img.mobile-bg {
        display: none;
    }
    .content {
        width: 800px;
        margin: 0 auto;
    }
    #HummingBirdImage.mobile {
        display: none;
    }
    #HummingBirdImage.desktop {
        display: block;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8e8dcf+0,9fa4cc+32,9eb0a0+65,8faf44+100 */
        background: #8e8dcf; /* Old browsers */
        background: -moz-linear-gradient(top,  #8e8dcf 0%, #9fa4cc 32%, #9eb0a0 65%, #8faf44 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #8e8dcf 0%,#9fa4cc 32%,#9eb0a0 65%,#8faf44 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #8e8dcf 0%,#9fa4cc 32%,#9eb0a0 65%,#8faf44 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8e8dcf', endColorstr='#8faf44',GradientType=0 ); /* IE6-9 */
    }
    #HummingBirdImage img,
    #HummingBirdImage h1 {
        float: left;
        }
    #HummingBirdImage img {
        display: block;
        width: 50%;
        }
     #HummingBirdImage h1 {
        float: left;
        width: 50%;
        padding: 40px 0 0 70px;
        color: #ffffff;
        }
    .photography img {
        width: 20%;
    }
}