/* THEMEPAGE CSS */

/* Header */

.themepage-container  .teaser.top-teaser-image {
    margin:0;
}

.themepage-container  .teaser.top-teaser-image .image {
    margin-top:39px;
}

    .themepage-container .teaser.top-teaser-image .teaser-container {
        position: absolute;
        top:43%;
    }

    .themepage-container .teaser.top-teaser-image .teaser-theme {
        left: 10px;
        color: #000;
        bottom: auto;
        top: -15px;
        display: block;
    }



    .themepage-container .teaser.top-teaser-image .video-holder {
        display:none;
        position:fixed;
        z-index: 100;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.7);
        top:0;
        left:0;
    }

    .themepage-container .teaser.top-teaser-image .video-holder .close:before{
        content: "\e909";
        font-family: 'swemfa';
        position: absolute;
        width: 30px;
        height: 30px;
        top: 17px;
        right: 7px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }

    .themepage-container .teaser.top-teaser-image .video-holder iframe {
        top:10%;
        right:0;
        left:0;
        bottom:0;
        margin:0 auto;
        position: absolute;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size:16px;
        line-height:18px;
        color:#fff;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container .preamble {
        color:#fff;
        display:none;
    }

    .themepage-container  .teaser.top-teaser-image .background-gradient-overlay {
        background: rgba(0,0,0,0.4);
        display:block;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
    }

    .themepage-container .teaser.top-teaser-image .video {
        position: relative;
        float: left;
        padding: 0;
        cursor: pointer;
        margin-top:-5px;
    }

        .themepage-container .teaser.top-teaser-image .video:before {
            margin:0;
        }



/* Teaser */
    .themepage-container .teaser-theme {
        display:none;
    }

    .themepage-container .teaser-container {
        overflow: hidden;
    }

    /* Top teaser */
    .themepage-container .teaser.top-teaser-image .teaser-container {
        overflow: visible;
    }


/* Breadcrumbs */

.breadcrumbs {
    background: #fecb00;
    font-size: 12px;
    padding: 10px 20px;
    list-style: none;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
}

    .breadcrumbs .container {
        padding:0;
    }

    .breadcrumbs li {
        display: inline-block;
    }

    .breadcrumbs li:first-child {
        font-family: 'SwedenSansBold';
    }

        .breadcrumbs li:after {
            content:"/";
            margin-right:7px;
        }

        .breadcrumbs li:last-child:after {
            content:"";
        }

    .breadcrumbs a {
        color:#1a3050;
        padding-right:7px;
    }


/* Content */
.text-holder {
    margin:20px;
    font-size:17px;
    border-bottom:solid 1px #dddddd;
    margin-bottom:50px;
    padding-bottom:20px;
    padding-top:20px;
}




/* More posts */
.more-posts  {
    clear:both;
}

    .more-posts .header {
        padding:0 20px;
    }

        .more-posts .header h2 {
            text-transform: none;
            font-family: 'SwedenSansBold';
            border-bottom: solid 1px #000;
            clear: both;
            display: inline-block;
            margin-bottom: -1px;
            font-size:25px;
            width:100%;
        }

    .more-posts-menu-holder  {
        max-width: 100%;
        overflow-x: scroll;
        height:65px;
        margin:0 20px;
        overflow-y:hidden;
        border-top:solid 1px #ddd;
    }

        .more-posts-menu-holder .gradient {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,ffffff+81&0+0,1+86 */
            background: -moz-linear-gradient(left,  rgba(30,87,153,0) 0%, rgba(255,255,255,0.94) 81%, rgba(255,255,255,1) 86%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left,  rgba(30,87,153,0) 0%,rgba(255,255,255,0.94) 81%,rgba(255,255,255,1) 86%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(255,255,255,0.94) 81%,rgba(255,255,255,1) 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
            position:absolute;
            display:block;
            right:0;
            height:60px;
            width:100px;
            z-index:10;
        }




        .more-posts-menu{
            font-size:16px;
            list-style:none;
            margin:0 0 40px;
            padding:20px 0 0;

            display: block;
            float: left;
            padding-right: 103px;
            position: relative;
            white-space: nowrap;
            z-index: 0;
            height: 100%;
        }

        .more-posts-menu li{
            display:inline-block;
            margin-right:20px;
        }

        .more-posts-menu li:last-child{
            margin-right:0px;
        }

            .more-posts-menu li a{
                color:#333;
            }

    .more-posts-menu li.inactive a{
        opacity: 0.5;
    }

.load-more {
    background:#005293;
    clear:both;
    display:block;
    margin:0 auto 40px auto;
    width:110px;
    text-align: center;
    color:#fff;
    padding:8px 0;
    font-size:16px;
    cursor: pointer;
    -webkit-transition: opacity .3s ease-in-out;

    -moz-transition: opacity .3s ease-in-out;

    -ms-transition: opacity .3s ease-in-out;

    -o-transition: opacity .3s ease-in-out;

    transition: opacity .3s ease-in-out;

    opacity:1;
}

.load-more:hover {
    opacity: 0.9;
}

/* ================================================================
 *	MEDIA QUERIES
/* ================================================================ */


@media screen and (min-width: 375px) {


    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size:20px;
        line-height:25px;
    }


}


@media screen and (min-width: 480px) {

    /* Header */

    .themepage-container .teaser.top-teaser-image .teaser-container {
        top: 40%;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size:25px;
        line-height:30px;
    }

}

@media screen and (min-width: 580px) {

    /* Header */

    .themepage-container .teaser.top-teaser-image .video {
        margin-top:15px;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container {
        top: 55%;
    }
}


@media screen and (min-width: 768px) {

    /* Header */
    .themepage-container .teaser.top-teaser-image .teaser-container {
        top:45%;
    }

    .themepage-container .teaser.top-teaser-image .teaser-theme {
        top: -25px;
        left: 20px;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size: 40px;
        line-height: 45px;
    }

    .themepage-container .teaser.top-teaser-image .image {
        margin-top:0;
        padding-top: 59%;
    }

    .themepage-container .teaser.top-teaser-image .video {
        width: 160px;
        height: 50px;
        font-size: 24px;
        cursor: pointer;
    }

    .themepage-container .teaser.top-teaser-image .video:before {
        font-size: 38px;
    }

    .themepage-container .teaser.top-teaser-image .video-holder .close:before {
        width: 30px;
        height: 30px;
        top: 50px;
        right: 50px;
        font-size: 30px;
    }


    /* Breadcrumbs */
    .breadcrumbs {
        top:auto;
        bottom:0px;
        background:none;
    }


    .breadcrumbs a,
    .breadcrumbs li:after{
        color:#fff;
    }


    /* Content */
    .text-holder {
        -webkit-column-count: 2; /* Chrome, Safari, Opera */
        -moz-column-count: 2; /* Firefox */
        column-count: 2;
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
        margin-bottom:80px;
        padding-bottom:50px;
        padding-top: 100px;
    }

    /* More posts */
    .more-posts .header h2 {
        font-size:40px;
        width: auto;
    }

    .more-posts-menu-holder  {
        overflow-x:auto;
    }

    .load-more {
        padding:13px 0;
        width:140px;
        font-size:18px;
    }


}



@media screen and (min-width: 1024px) {

    /* Header */
    .themepage-container .teaser.top-teaser-image .image {
        padding-top: 45%;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container .preamble {
        display:block;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size: 30px;
        line-height: 35px;
    }



}


@media screen and (min-width: 1200px) {

    /* Header */
    .themepage-container .teaser.top-teaser-image .image {
        padding-top: 40%;
    }
}




@media screen and (min-width: 1330px) {

    /* Header */
    .themepage-container .teaser.top-teaser-image .image {
        padding-top: 40%;
    }

    /* Top teaser */


    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size: 30px;
        line-height: 35px;
    }

    .themepage-container .teaser.top-teaser-image .teaser-theme {
        left:0;
    }

    .text-holder {
        margin-right:0;
        margin-left:0;
    }

    .themepage-container .more-posts .header {
        padding:0;
    }

    .themepage-container .more-posts-menu-holder {
        margin:0;
    }
}

@media screen and (min-width: 1440px) {


    /* Header */
    .themepage-container .teaser.top-teaser-image .image {
        padding-top: 30%;
    }


    .teaser.top-teaser-image .teaser-container .preamble {
        font-size: 20px;
        line-height: 30px;
    }
    .teaser.top-teaser-image .teaser-container h2,
    .teaser.top-teaser-image .teaser-container .preamble{
        max-width:860px;
    }

    .themepage-container .teaser.top-teaser-image .teaser-theme {
        left:-30px;
    }
}

@media screen and (min-width: 1750px) {


    /* Header */
    .themepage-container .teaser.top-teaser-image .image {
        padding-top: 26%;
    }

    .themepage-container .teaser.top-teaser-image .teaser-container h2 {
        font-size: 40px;
        line-height: 45px;
    }

}