@import url('https://fonts.googleapis.com/css?family=Raleway:400,600,800|Roboto');
body {
    font-size:medium;
    line-height:normal;
}

h1,h2,h3,h4,h5,h6 {
    font-family: Raleway, sans-serif;
    font-weight: 600;
}

h1 {
    font-size: 1.5rem;
}

a {
    color: black;
}
/*img {
    max-width: 98%;
}*/
.tags {
    background-position: left center;
    color: #000;
    font-weight: bold;
    /*background-image: url('visual/blue-tag-icon.png');
    background-repeat: no-repeat;
    padding-left: 40px; min-height: 40px;*/
    margin-top: 0px;
    vertical-align: middle;
}

    .tags a:hover {
        background-color: #FFFFFF;
        color: #000000;
    }

li.active {
    font-size: larger;
}

.readinfo {
    margin-top: 10px;
    font-size: smaller;
}

hr.divide {
    background-color: #66ccff;
    border: thin solid #66ccff;
    height: 5px;
}

.paging a:link {
    background-color: #41B7D8;
    color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /*border-radius: 5px 5px 5px 5px;*/

    display: inline-block;
    margin: .5em .2em 0 .2em;
    padding: 0.35em 0.65em;
    font-weight: bold;
}

.paging a:visited {
    background-color: #41B7D8;
    color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    margin: 1em .5em 0 .5em;
    padding: 0.35em 0.65em;
    font-weight: bold;
}

.currentpage {
    background-color: #FFF;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    margin: 1em .5em 0 .5em;
    padding: 0.35em 0.65em;
    font-weight: bold;
}

.pullquote {
    /* width: 30%;
    float: right;*/
    font-size: 125%;
    font-family: Georgia, 'Times New Roman', Times, serif;
    line-height: 140%;
    margin: 5px;
    background: url(visual/quote_r.gif) no-repeat right bottom !important;
    padding: 0px 25px 5px 0px;
}

    .pullquote:first-letter {
        background: url(visual/quote_l.gif) no-repeat left top !important;
        padding: 5px 2px 10px 35px !important;
        padding: 0px;
    }

div.figure {
    border: thin silver solid;
    margin: 0.1em;
    padding: 0.1em;
    position: relative;
}

    div.figure div {
        text-align: center;
        font-style: italic;
        text-indent: 0;
        font-weight: bold;
        display: block;
        width: 100%;
    }

    div.figure p {
        text-align: center;
        font-style: italic;
        text-indent: 0;
        font-weight: bold;
        display: block;
    }

img.scaled {
    width: 90%;
    max-width: 100%;
}

.tilecolumn {
    display: flex;
    justify-content: center;
}

.tileswrap {
    margin: 5px 0 5px 0;
    display: inline-block;
    width: 300px;
    height: 250px;
}

.tile {
    background-color: #78AB7C;
    background-position: center top;
    background-repeat: no-repeat;
    width: 300px;
    height: 250px;
    position: relative;
    text-align: center;
    margin: auto 0;
    display: inline-block;
}

.tilecaption {
    width: 100%;
    height: 50px;
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #000000;
    color: white;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bold;
}

p {
    margin-bottom: 10px;
}

article p, article h4, article h3 {
    width: 100%;
    clear: both;
}

.tilelink, .tilelink:hover, .tilelink p {
    margin: 5px 0 5px 0;
    text-decoration: none;
    font-size:small;
}


.c-right card-columns card {
}

div.wrapper {
    float: left;
    position: relative;
    width: 100%;
    max-height: 250px;
}

div.description {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #fff;
    /*font-family: Roboto;  */
    font-size: smaller;
    color: black;
    font-weight: bold;
    opacity: 1; /* transparency */
    filter: alpha(opacity=100); /* IE transparency */
}

    div.description:hover {
        opacity: .7;
    }

p.description_content {
    padding: 5px;
    margin: 0px;
}
/*.tilelink:hover{
     -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
}*/
article a[href$=".jpg"] {
    text-align: center;
}

.left {
    float: left;
    margin: 5px;
    padding: 5px;
}

article a > img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

article img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin: 5px;
}

article ol {
    list-style-type: none;
    list-style-type: decimal !ie; /*IE 7- hack */

    margin: 0;
    margin-left: 1em;
    padding: 0;
    counter-reset: li-counter;
}

    article ol > li {
        position: relative;
        margin-bottom: 1.5em;
        padding: 1.5em;
        /*background-color: #eaeaea;*/
    }

        article ol > li:before {
            position: absolute;
            top: -0.3em;
            left: -0.5em;
            width: 1.8em;
            height: 1.2em;
            font-size: 2em;
            line-height: 1.2;
            font-weight: bold;
            text-align: center;
            color: #464646;
            background-color: #d0d0d0;
            transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            -webkit-transform: rotate(-20deg);
            z-index: 99;
            overflow: hidden;
            content: counter(li-counter);
            counter-increment: li-counter;
        }

#c-left {
    border-right: 1px solid grey;
    /* border-left:2px solid grey;*/
}

.articleheading {
    font-family: 'Raleway',sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    line-height: normal;
    text-decoration: none;
}

    .articleheading a {
        text-decoration: none;
    }

article iframe {
    max-width: 95%;
}
.alistlink {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

 .alistlink img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

.btn {
    font-family: Arial;
    color: #000;
    font-size: 18px;
    background: #FF9F1C;
    padding: 8px 20px 8px 20px;
    text-decoration: none;
}

    .btn:hover {
        background-color: #7FB800;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decoration: none;
    }

footer {
    border-top: 1px solid grey;
    padding: 10px;
}

.mainrow {
    display: flex;
    flex-wrap: wrap;
}

header {
    /*background-color: #e55244;*/
    border-bottom: 1px solid #3498db;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

    header a,
    header a:hover {
        text-decoration: none;
        /*font-family: 'Montserrat', sans-serif;*/
        /* font-family: 'ZCOOL KuaiLe', cursive;*/
        /*font-family: 'Josefin Sans', sans-serif;*/
        /*font-family: 'Indie Flower', cursive;*/
        /* color: #3498db;*/
        /*background-image: url('/Visual/treehut-logo.png');
        background-size:contain;
        background-repeat:no-repeat;
        padding-left:48px;*/
        /*    font-size: xx-large;*/
        /*  text-decoration: none;
    font-weight: bolder;
    color: black;*/
    }

.f-xsmall {
    font-size: x-small;
}

.f-small {
    font-size: smaller;
}


@media only screen and (max-width: 500px) {
    #c-left {
        order: 2;
    }

    #c-center {
        order: 0;
    }

    #c-right {
        order: 1;
    }
}