/* Large desktop */
@media (min-width: 1200px) {

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {




}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {


    #single-post {
        width: 100%;
        margin: 0 auto;
        height: 100%;
    }


    .layout {
        width: calc(100% - 20px);
        margin: 10px;
        position: relative;
        float: left;
    }

    .layout ul {
        padding: 0;
        margin: 0;
    }

    .layout .slick-next {
        position: absolute;
        z-index: 99;
        top: 240px;
        right: 0px;
    }

    .layout .slick-prev {
        position: absolute;
        z-index: 99;
        top: 220px;
        left: 0px;
    }


    #details-container {
        width: 100%;
        position: relative;
        float: left;
        padding: 15px;
        background: #eeeeee47;
        height: auto;
        /* margin-left: 80px; */
    }


    
    #top-content-page {
        width: 100%;
        float: left;
        height: 100%;
        position: relative;
    }


    .layout-page {
        width: calc(100% - 100px);
        margin: 50px;
        position: relative;
        float: left;
    }

    .layout-page .slick-prev {
        position: absolute;
        z-index: 99;
        top: 220px;
        left: -45px;
    }

    .layout-page .slick-next {
        position: absolute;
        z-index: 99;
        top: 220px;
        right: -45px;
    }

    #post-content {
        font-family: 'Dosis', sans-serif;
        font-size: 16px;
        padding: 8px 20px;
        width: 100%;
        float: left;
        position: relative;
        margin-top: 0px;
        /* border-right: solid 1px #429741; */
    }


    .latest-home-post {
        font-family: 'Dosis', sans-serif;
        width: calc((100% * 1/1) - 20px);
        max-height: 420px;
        float: left;
        height: 100%;
        margin: 10px;
        position: relative;
    }


    .mix-home-post {
        font-family: 'Dosis', sans-serif;
        width: calc((100% * 1/2) - 20px);
        max-height: 480px;
        float: left;
        height: 240px;
        margin: 10px;
        position: relative;
        border: solid 2px #897cae63;
        border-radius: 5px;
    }


    .site-info {
        width: 100%;
        float: left;
        padding: 15px;
    }

    .site-branding {
        width: calc(100% - 50px);
        margin: 20px auto 5px;
        text-align: center;
        border-bottom-width: 1px;
        border-style: solid;
        -webkit-border-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        -moz-border-image: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        -o-border-image: -o-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        border-image: linear-gradient(to left, rgb(255, 255, 255) 1%, rgb(139, 124, 178) 50%, rgb(255, 255, 255) 100%) 0 0 100% 0/0 0 1px 0 stretch;
    }


    nav {
        width: calc(767px - 60px);
        margin: 0 auto;
    }

    #lechuza-pon {
        clear: both;
        width: calc(90% - 20px);
        position: relative;
        float: none;
        margin: 10px auto;
        background: #a89ec3;
        height: 570px;
        border: solid 1px #a89ec3;
        box-shadow: 0 2px 5px #a89ec3;
    }
    
    #lechuza-pon img {
        height: 220px;
        width: calc(100% * 1/1);
        float: left;
        margin: 0px;
    }

    #lechuza-pon a {
        float: left;
        width: calc(100% * 1/1);
        color: #fff;
    }

    #lechuza-pon-description {
        font-family: 'Dosis', sans-serif;
        font-size: 17px;
        padding: 10px;
        width: 100%;
        color: #fff;
        float: left;
    }


    .buqeta-gallery-container figure {
        width: calc(50% - 10px);
        float: left;
        position: relative;
        margin: 5px;
        box-sizing: border-box;
        list-style: none;
        height: 200px;
    }


    .single-page-content {
        font-size: 13px;
        width: 100%;
        margin: 0 auto;
        line-height: 19px;
        padding: 30px;
    }


    .single-page-content p {
        font-size: 16px;
        width: 100%;
        margin: 0 auto;
        line-height: 22px;
        padding: 0;
        font-family: 'Dosis', sans-serif;
    }


    #single-post-title h2 {
        margin: 0 auto;
        padding: 5px;
        width: auto;
        max-width: 300px;
        color: #887fb2;
        font-size: 22px;
        text-align: center;
    }


    .marka-item {
        width: calc((100% * 1/2) - 20px);
        float: left;
        margin: 10px;
    }


    .thumbex {
        margin: 10px;
        width: calc(50% - 20px);
        border-radius: 5px;
        float: left;
        position: relative;
        min-width: 250px;
        max-width: 435px;
        height: 300px;
        overflow: hidden;
        /* background-color: #8c80b0; */
        /* box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5); */
    }

}

/* Landscape phones and down */
@media (max-width: 480px) {


    #page {
        width: 100%;
        margin: 0px auto;
        font-size: 15px;
        font-family: 'Dosis', sans-serif;
    }

    #content {
        width: 100%;
        margin: 60px auto;
        float: left;
    }

    nav {
        width: 100%;
    }

    .site-branding {
        width: 100%;
        margin: 0px;
        text-align: center;
        border: none;
        height: 50px;
        float: left;


    }

    .site-branding img {
        width: auto;
        margin: 5px auto;
        height: 45px;
    }

    .thehomeSlider {
        width: 100%;
        height: 480px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 35px;
        padding-right: 35px;
        position: relative;
    }


    #latest-posts {
        width: calc(100% - 20px);
        height: 440px;
        position: relative;
        float: none;
        margin: 10px;
    }

    .buqeta-gallery-container figure {
        width: calc(100% - 10px);
        float: left;
        position: relative;
        margin: 5px;
        box-sizing: border-box;
        list-style: none;
        height: 200px;
    }


    .single-page-content {
        font-size: 13px;
        width: 100%;
        margin: 0 auto;
        line-height: 19px;
        padding: 30px;
    }

    .single-page-content p {
        font-size: 16px;
        width: 100%;
        margin: 0 auto;
        line-height: 22px;
        padding: 0;
        font-family: 'Dosis', sans-serif;
    }

    #top-content-page {
        width: calc(100% - 30px);
        float: left;
        height: 100%;
        position: relative;
        margin: 30px 30px 0px 30px;
        padding: 10px;
    }

    #post-content {
        font-family: 'Dosis', sans-serif;
        font-size: 16px;
        padding: 8px 20px;
        width: 100%;
        float: left;
        position: relative;
        margin-top: 0px;
        /* border-right: solid 1px #429741; */
    }

    #single-post-title {
        text-align: center;
    }

    .layout-page .slick-list {
        height: 280px;
    }

    .layout-page .slick-slide img {
        height: 280px;
        width: 100%;
        object-fit: contain;
    }

    .layout-page .slick-prev {
        position: absolute;
        z-index: 99;
        top: 150px;
        left: -50px;
    }

    .layout-page .slick-next {
        position: absolute;
        z-index: 99;
        top: 150px;
        right: -50px;
    }

    .site-info {
        width: 100%;
        float: left;
        padding: 15px;
    }

    #single-post {
        width: 100%;
        margin: 0 auto;
        height: 100%;
    }


    .marka-item {
        width: calc(100% - 20px);;
        float: left;
    }

    .marka-item img {
        width: 100%;
        height: 320px;
        object-fit: cover;
    }

    .marka-item a span {
        width: 100%;
        float: left;
        position: relative;
        background: #8c7fb2;
    }


    .marka-item a {
        width: 100%;
        float: left;
        font-family: 'Dosis', sans-serif;
        font-size: 20px;
        padding: 8px 0;
        text-transform: uppercase;
        text-align: center;
        text-decoration: none;
        color:#fff;
    }

    .thumbex {
        margin: 10px;
        width: calc(100% - 20px);
        border-radius: 5px;
        float: left;
        position: relative;
        min-width: 250px;
        max-width: 435px;
        height: 300px;
        overflow: hidden;
    }

    .thumbex .thumbnail {
        overflow: hidden;
        width: 100%;
        min-width: 250px;
        height: 300px;
        position: relative;
        opacity: 0.88;
        backface-visibility: hidden;
        transition: all 0.4s ease-out;
        border: none;
    }


    .layout {
        width: calc(100% - 0px);
        margin: 0;
        position: relative;
        float: left;
        padding: 10px;
    }

    .layout ul {
        margin: 0;
    }

    .layout .slick-list {
        height: 280px;
    }

    .layout .slick-slide img {
        height: 280px;
        width: 100%;
        object-fit: contain;
    }

    .layout .slick-track {
        height: 360px;
    }


    .layout .slick-prev {
        position: absolute;
        z-index: 99;
        top: 150px;
        left: -15px;
    }

    .layout .slick-next {
        position: absolute;
        z-index: 99;
        top: 150px;
        right: -15px;
    }



    #details-container {
        width: 100%;
        position: relative;
        float: left;
        padding: 0px;
        background: #eeeeee47;
        height: auto;
        /* margin-left: 80px; */
    }

    .details-title {
        float: left;
        position: relative;
        font-size: 13px;
        text-transform: uppercase;
        width: 100%;
        text-align: center;
        padding: 10px 5px;
        color: #8d80b1;
    }

    #karakteristikat-items {
        float: left;
        position: relative;
        width: 100%;
        text-align: center;
    }

    #lightbox-content {
        width: 100%;
        float: left;
    }

    #photo-gallery li {
        list-style: none;
        max-width: 240px;
        width: calc((100% * 1/2) - 20px);
        height: 100%;
        margin: 10px;
        float: left;
        position: relative;
    }


    .latest-home-post {
        font-family: 'Dosis', sans-serif;
        width: 100%;
        max-height: 320px;
        float: left;
        height: 100%;
        margin: 10px 0px;
        position: relative;
    }


    #lechuza-pon {
        clear: both;
        width: 100%;
        position: relative;
        float: left;
        margin: 10px auto;
        background: #a89ec3;
        height: 100%;
        /* border: solid 1px #a89ec3; */
        box-shadow: none;
    }


    #lechuza-pon img {
        height: auto;
        width: 100%;
        float: left;
        margin: 4px;
    }

    #lechuza-pon a {
        float: left;
        width: 100%;
        color: #fff;
    }

    #lechuza-pon-description {
        font-family: 'Dosis', sans-serif;
        font-size: 17px;
        padding: 10px;
        width: 100%;
        color: #fff;
        float: left;
    }


    #mix-posts {
        width: calc(100% - 15px);
        position: relative;
        float: none;
        margin: 25px auto;
        height: 250px;
    }


    .mix-home-post {
        font-family: 'Dosis', sans-serif;
        width: calc((100% * 1/1) - 20px);
        max-height: 480px;
        float: left;
        height: 240px;
        margin: 10px;
        position: relative;
        border: solid 2px #897cae63;
        border-radius: 5px;
    }


    /*Mobile Menu*/
    /* Menu Header */
    .header {
        background: #fff;
        overflow: hidden;
        height: 55px;
        width: 100%;
        z-index: 1;
        position: fixed;
        box-shadow: 0 2px 5px #a89ec3;
        transition: all 0.4s ease-out, background 1s ease-out;


    }

    .header.menu-open {
        height: 100%;
        z-index: 999;
        background: #fff;
        transition: all 0.45s ease-out, background 0.8s ease-out;
    }

    /* Menu List items */
    .mobile-menu {
        clear: both;
        margin: 80px 0;
    }

    .header ul.menu {
        position: relative;
        display: block;
        padding: 0px 40px 0;
        list-style: none;
        margin: 0;
    }

    .header ul.menu li.menu-item a {
        display: block;
        position: relative;
        color: #8d81b2;
        text-decoration: none;
        font-size: 18px;
        line-height: 2.8;
        width: 100%;
        -webkit-tap-highlight-color: transparent;
        text-align: center;
        text-transform: uppercase;
    }

    .header ul.menu li.menu-item {
        /*border-bottom: 1px solid #333;*/

        /*bottom border*/
        border-bottom-width: 1px;
        border-style: solid;
        -webkit-border-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        -moz-border-image: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        -o-border-image: -o-linear-gradient(left, rgba(0, 0, 0, 1) 1%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%) 0 0 100% 0/0 0 1px 0 stretch;
        border-image: linear-gradient(to left, rgb(255, 255, 255) 1%, rgb(139, 124, 178) 50%, rgb(255, 255, 255) 100%) 0 0 100% 0/0 0 1px 0 stretch;

        margin-top: 5px;
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    .header ul.menu li.menu-item:nth-child(1) {
        transition-delay: 0.35s;
    }

    .header ul.menu li.menu-item:nth-child(2) {
        transition-delay: 0.3s;
    }

    .header ul.menu li.menu-item:nth-child(3) {
        transition-delay: 0.25s;
    }

    .header ul.menu li.menu-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .header ul.menu li.menu-item:nth-child(5) {
        transition-delay: 0.15s;
    }

    .header ul.menu li.menu-item:nth-child(6) {
        transition-delay: 0.1s;
    }

    .header ul.menu li.menu-item:nth-child(7) {
        transition-delay: 0.05s;
    }

    .header.menu-open ul.menu li.menu-item {
        opacity: 1;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(1) {
        transition-delay: 0.05s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(2) {
        transition-delay: 0.1s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(3) {
        transition-delay: 0.15s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(4) {
        transition-delay: 0.2s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(5) {
        transition-delay: 0.25s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(6) {
        transition-delay: 0.3s;
    }

    .header.menu-open ul.menu li.menu-item:nth-child(7) {
        transition-delay: 0.35s;
    }

    /* Menu Icon */
    .icon-container {
        position: relative;
        display: inline-block;
        z-index: 2;
        float: right;
        /* Simply change property to float left to switch icon side :) */
        height: 55px;
        width: 15%;
        margin-top: -55px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    .icon-container #menuicon {
        width: 20px;
        height: 10px;
        position: relative;
        display: block;
        margin: -4px auto 0;
        top: 50%;
    }

    #menuicon .bar {
        width: 100%;
        height: 1px;
        display: block;
        position: relative;
        background: #000;
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    }

    #menuicon .bar.bar1 {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg);
    }

    #menuicon .bar.bar2 {
        -webkit-transform: translateY(6px) rotate(0deg);
        transform: translateY(6px) rotate(0deg);
    }

    .menu-open .icon-container {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .menu-open .icon-container #menuicon .bar {
        transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
        transition-delay: 0.1s;
    }

    .menu-open .icon-container #menuicon .bar.bar1 {
        -webkit-transform: translateY(4px) rotate(45deg);
        transform: translateY(4px) rotate(45deg);
    }

    .menu-open .icon-container #menuicon .bar.bar2 {
        -webkit-transform: translateY(3px) rotate(-45deg);
        transform: translateY(3px) rotate(-45deg);
    }

    /*Footer*/

    footer {
        padding: 20px;
        font-size: 14px;
        font-family: 'Dosis', sans-serif;
        background: #897cae;
        color: #fff;
        float: left;
    }

    #copyright {
        width: 100%;
        float: left;
        font-size: 16px;
        position: relative;
    }

    #social-media {
        width: 100%;
        float: right;
        position: relative;
        text-align: center;
    }


    #contact-page {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    }


    #contact-right p {
        padding: 50px 0;
        font-size: 16px;
    }



    #contact-left{
        width: 100%;
        float: left;
        padding: 15px;
    }

    #contact-right{
        width: 100%;
        float: left;
    }




}