html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
li,
p,
button,
span {
    font-family: "Lora", Palatino, Georgia, serif;
}

p {
	font-weight: 400;
}

#postlist .post-title {
    font-size: 16pt;
}

#postbody p img {
    max-width: 250px;
    padding: 0;
    margin: 0;
}

/*#postbody h1,
#postbody h6 {
    text-align: center;
}*/

blockquote {
    width: 50%;
    padding: 25px;
    background-color: #f4f0ed;
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    border-left: 6px solid #d9d4d0;
    border-radius: 0 10px 10px 0;
}

#postbody h6 {
    color: #333;
    padding: 2% 0 2% 0;
    font-weight: lighter;
}

#postbody h2
#postbody h3,
#postbody h4, {
    color: black;
    padding-bottom: 3%;
}

#postbody p {
    color: #333;
    font-size: 20px;   
    line-height: 1.5; 
    margin-bottom: 2%;
}

#postbody li {
    font-size: 18px;
}

#postbody h3 {
    margin-top: 3%;
}

#postbody {
    padding: 3% 5% 0% 5%;
}

#postbody a {
    color: #4C785D;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

.entry-date {
    font-weight: lighter;
    font-size: 12pt;
}

#postbody a:hover {
    color: #DDA454;
}

#home h1,
#work h1 {
    color: black;
    font-size: 30px;
    font-weight: lighter;
    padding-bottom: 2%;
}

#postlist h1 {
    color: black;
    font-size: 30px;
    font-weight: lighter;
    padding-bottom: 0%;
}

ul {
    list-style-type: circle;
}

ol.post-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

button {
    padding: 3px 5px 3px 5px;
    margin-right: 3px;
    border: none;
    border-radius: 5px;
    font-size: 12pt;
    color: white;
    background-color: #4C785D;
    opacity: .5;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

button:hover {
    opacity: 1;
}

.heightfix {
    margin-bottom: 70px;
}

.blogfa {
    color: #4C785D;
    opacity: .5;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

.blogfa:hover {
    opacity: 1;
}

#home p,
#postlist p,
.excerpt {
    color: #737373;
    font-size: 12pt;
}

#postlist li {
    margin-top: 3%;
}

.excerpt {
    font-weight: lighter;
}

.project p,
.project h5 {
    text-align: center;
}

.project p {
    font-size: 80%;
}

.project h5 {
    font-size: 90%;
}

#work img {
    border-radius: 0;
    margin-bottom: 20px;
    border: 0px white solid;
}

#work .fa.fa-long-arrow-right {
    visibility: hidden;
}

#work .fa.fa-arrow-down {
    display: inline;
}

.project {
    opacity: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

#description {
    padding: 20%;
}

#navigation {
    visibility: hidden;
    background-color: white;
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: -10%;
    color: black;
}

#mobile-navigation {
    background-color: white;
    text-align: center;
    margin-bottom: 2%;
}

button#dropdownMenuButton.btn.btn-secondary {
    border: none;
    border-radius: 0;
    width: 100%;
}

button#dropdownMenuButton.btn.btn-secondary:active .fa-bars {
    color: #737373;
}

#mobile-logo {
    height: 50px; 
    float: left;
}

.fa-bars {
    margin-top: 3%;
    float: right;
    color: #4C785D;
}

.dropdown-menu {
    margin-top: -2px;
    border-radius: 0;
    border: none;
    width: 100%;
}

.dropdown-menu a {
    padding: 5% 0 5% 10%;
    color: black;
    font-size: 14pt;
}

.dropdown-menu a:active {
    background-color: #4C785D;
}

#logo {
    cursor: pointer;
    height: 55px;
    margin-top: -3px;
    background-color: white;
    background-repeat: no-repeat;
    background-image: url('https://lizlorena.com/img/sitewideimg.png');
    background-position: center;
    background-size: 0px;
}

.nav-brand {
    width: 100%;
    height: 60px;
}

#navigation a {
    /*margin-left: 20px;*/
    font-weight: normal;
    color: black;
    opacity: 1;
    width: 100%;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

.link {
    margin-left: 10px;
}

a:hover {
    text-decoration: none;
}

#navigation a:hover i {
    display: none;
    color: black;
    opacity: .5;
}

#navigation a:hover span {
    display: block;
    opacity: 1;
}

#navigation a:hover {
	color: black;
}

#navigation i {
    margin-top: 15px;
}

#navigation span {
    display: none;
    color: black;
    margin-top: 15px;
    font-size: 12pt;
}

#maindisplay,
#postdisplay {
    padding: 0%;
    background-color: white;
}

#home,
#postlist {
    padding: 3% 7% 5% 7%;
}

#home a,
#postlist a {
    color: #4C785D;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

#home a:hover,
#postlist a:hover {
    color: #DDA454;
}

#work a {
    color: #4C785D;
}

#work a:hover {
    text-decoration: none;
}

.project:hover {
    cursor: pointer;
    opacity: .8;
    text-decoration: #4C785D underline;
}

#sidedisplay {
    background-color: white;
    background-image: url('https://lizlorena.com/img/flowers.jpg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    height:calc(100vh - 34px);
    height: -o-calc(100vh - 34px); /* opera */
    height: -webkit-calc(100vh - 34px); /* google, safari */
    height: -moz-calc(100vh - 34px); /* firefox */
}

#sideimage {
    width: 100%;
    background-color: none;
    border: 0px solid white;
}

#footer {
    background-color: white;
    color: gray;
    margin-top:-50px;
}

#footer p {
    font-size: 12pt;
    margin:0px;
    padding: 10px 0 0 0;
}

#social {
    margin-top: 10px;
}

#social .fa {
    color: #4C785D;
    opacity: .5;
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
}

#social .fa:hover {
    opacity: 1;
}

#footer,
#navigation {
    height: 50px;
}

/* No media query since this is the default in Bootstrap */

/* Large devices (tablets, 768px and up) */

@media (min-width: 560px) {

    #maindisplay {
        overflow: auto;
        width: 100%;
	height: 652px
    }

    #postdisplay {
        /*overflow: auto;
        width: 100%;
        height: 512px;*/
    }

    #logo {
        background-size: 60px;
    }

    .link {
        margin-left: 0px;
    }

    #mobile-navigation {
        display: none;
    }

    #navigation {
        visibility: visible;
    }

    #work .fa.fa-long-arrow-right {
        visibility: visible;
        margin-right: 10px;
    }

    #work .fa.fa-arrow-down {
        display: none;
    }

    #postbody {
        /*margin: 0 15% 0 15%;
        padding-top: 0;*/
    }

    .entry-date {
        float: right;
    }

    #postbody p img {
        max-width: 1000px;
        margin: 0;
        padding: 0;
    }

}

@media (min-width: 1000px) {

    #postbody {
        margin: 0 15% 0 15%;
        padding-top: 0;
    }
}