/* desktops */
@media only screen and (min-width: 1441px){

}

/* normale laptops */
@media only screen and (max-width: 1440px){

}

/* kleine laptops */
@media only screen and (max-width: 1280px){

}

/* zwischen laptops */
@media only screen and (max-width: 1160px){

}
/* iPad landscape */
@media only screen and (min-width: 481px) and (max-width: 1024px){

}

/* iPad Portrait */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait), screen and (max-width: 767px) {

    #mainhead, #maincontent, #mainfoot {
        width: 100%;
        padding: 0 5%;
    }
    #maincontent {padding-bottom: 100px;}
    #mainfoot {padding: 20px 5%;display: block;}
    footer .copyright {padding-bottom: 20px;margin-bottom: 10px;border-bottom: 1px dotted var(--white);justify-content: center;}
    .mainav.foot > ul {justify-content: center;-webkit-justify-content: center;-ms-flex-pack: center;}
    .mainav.foot > ul > li, .mainav.foot > ul > li:last-of-type {padding: 10px;}

    /* masonry */
    .mason.mcol-5 .post,
    .mason.mcol-5 .product,
    .mason.mcol-6 .post,
    .mason.mcol-6 .product,
    .mason.mcol-7 .post,
    .mason.mcol-7 .product,
    .mason.mcol-8 .post,
    .mason.mcol-8 .product {
        width:25%;
    }

    /* footer widgets */
    #mainfoot .fcol-3 .widget-area,
    #mainfoot .fcol-4 .widget-area {
        width:50%;
    }
    #mainfoot .fcol-3 .widget-area:nth-child(3) {
        width:100%;
    }

    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        /*padding-bottom: 75%;  4:3 */
        /*padding-bottom: 54.05%;  1.85:1 cinemascope */
        padding-top: 25px;
        height: 0;
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* navi display screen resize */
@media screen and (min-width: 767px) {
    .mainav {
        display:block !important;
    }
}
/* smartphones */
@media screen and (max-width: 767px) {

    /*html {font-size: 42%;}*/
    .postwrapper {font-size: 1.2rem;}
    h1, .catlist {
        font-size: 1.6rem;
    }
    .catlist {
        margin-bottom: 20px;
        border-bottom: 1px solid var(--akzent);
    }
    header h2, .single header h1 {
        font-size: 1.6rem;
    }
    .entry-content h3, header h3 {
        font-size: 1.4rem;
    }
    #mainhead, #maincontent, #mainfoot {
        width: 100%;
    }
    .has-sidebar .sidewrap,
    .has-sidebar .wrap {
        width:100%;
    }
    #mainhead {
        min-height: 50px;
    }
    .headroom--not-top #headwrap #mainhead,
    .headroom--unpinned #headwrap #mainhead {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .headroom--not-top #headwrap #mainhead,
    .headroom--unpinned #headwrap #mainhead,
    .headroom #headwrap {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        background: var(--bg);
        position:fixed;
        z-index:2;
        will-change: transform;
        transition: transform .2s ease-out;
        -moz-transition: transform .2s ease-out;
        -webkit-transition: transform .2s ease-out;
    }
    .headroom  #headwrap + #contwrap {
        padding-top:120px;
    }
    .headroom--pinned #headwrap {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
    }
    .headroom--not-top #headwrap,
    .headroom--unpinned #headwrap {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
    }
    .headroom #headwrap .logo .site-title img,
    .headroom--not-top .logo .site-title img,
    .headroom--unpinned .logo .site-title img {
        max-width: 60%;
    }
    .logo .site-title img {padding-top: 15px;}
    .mainav.head > ul {padding-left: 5%;}

    /* masonry */
    .mason.mcol-3 .post,
    .mason.mcol-3 .product,
    .mason.mcol-4 .post,
    .mason.mcol-4 .product,
    .mason.mcol-5 .post,
    .mason.mcol-5 .product,
    .mason.mcol-6 .post,
    .mason.mcol-6 .product,
    .mason.mcol-7 .post,
    .mason.mcol-7 .product,
    .mason.mcol-8 .post,
    .mason.mcol-8 .product {
        width:50%;
    }

    /*html.navion,*/
    body.navion {
        overflow:hidden;
        /*position:fixed;*/
    }
    .headroom--unpinned .mainav.head,
    .headroom--not-top .mainav.head,
    .mainav.head {
        width:100%;
        position:fixed;
        z-index:1;
        left: 0;
        top: 51px;
        margin-left: -100%;
        overflow-y:scroll;
        background:var(--bgnav);
        transition:all .2s ease-out;
        -webkit-transition:all .2s ease-out;
        -moz-transition:all .2s ease-out;
    }
    .headroom--unpinned.navion .mainav.head,
    .headroom--not-top.navion .mainav.head,
    .navion .mainav.head {
        margin-left: 0;
    }
    .mainav.head > ul {
        display: block;
    }
    ul.sub-menu {
        display:block;
        position:static;
        background:none;
        width:auto;
    }
    .mainav.head > ul > li:first-of-type,.mainav.head > ul > li {
      padding: 5px 0;
    }
    ul.sub-menu li {
        padding-bottom: 10px;
    }

    /* turn btmenu into x */
    .btmenu {
        display:block;
    }
    .btmenu a { cursor: pointer; position: absolute; padding:7px 26px 7px 0px; z-index:4; right: 5%; top:19px;}
    .btmenu a span { text-indent:-9999px;}
    .btmenu a span, .btmenu a span:before, .btmenu a span:after {
        cursor: pointer;
        border-radius: 1px;
        height: 2px;
        width: 22px;
        background: var(--btx);
        position: absolute;
        display: block;
        content: '';
    }
    .btmenu a span:before {
        top: -7px; 
        width: 24px;
    }
    .btmenu a span:after {
        bottom: -7px;
        width: 26px;
    }
    .btmenu a span, .btmenu a span:before, .btmenu a span:after {
        transition: all 0.1s ease;
        -webkit-transition: all 0.1s ease;
        -moz-transition: all 0.1s ease;
    }
    .btmenu a.menuon span, .btmenu a.menuon span:before, .btmenu a.menuon span:after {
        width: 26px;
    }
    .btmenu a.menuon span {
        background-color: transparent;
    }
    .btmenu a.menuon span:before, .btmenu a.menuon span:after {
        top: 0;
    }
    .btmenu a.menuon span:before {
        transform: rotate(45deg);
        -webkit-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
    }
    .btmenu a.menuon span:after {
        transform: rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
    }

    /* footer widgets */
    #mainfoot .fcol-2 .widget-area,
    #mainfoot .fcol-3 .widget-area,
    #mainfoot .fcol-4 .widget-area {
        width:100%;
    }

    /* iframe vimeo/youtube... */
    .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        /*padding-bottom: 75%;  4:3 */
        /*padding-bottom: 54.05%;  1.85:1 cinemascope */
        padding-top: 25px;
        height: 0;
    }
    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
/* Media = iPhone orientation: landscape */
@media only screen and (max-width: 767px) and (orientation:landscape) {
	
/* masonry */
.mason.mcol-2 .post {
	width:50%;
}
.mason.mcol-3 .post {
	width:33.33333333%;
}
.mason.mcol-4 .post,
.mason.mcol-5 .post,
.mason.mcol-6 .post,
.mason.mcol-7 .post,
.mason.mcol-8 .post {
	width:25%;
}

}


/*
/* Falls weitere ScreenMediaLayouts
/*

/* Media = iPad orientation: landscape */
@media only screen and (min-device-width: 481px) and (max-width: 1024px) and (orientation:landscape) {
	
}

/* Media = iPad orientation: portrait */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation:portrait) {

}

/* Media = Mobile - iPhone */
@media handheld, only screen and (max-width: 480px) {

}
	

/* Media = Mobile - All Others - orientation:portrait */
@media handheld, only screen and (max-width: 480px) and (orientation:portrait) {

}


/* Media = Mobile - All Others - orientation:landscape */
@media handheld, only screen and (max-width: 767px) and (orientation:landscape) {

}




/* =Print Style
-------------------------------------------------------------- */

@media print {
body {
	height: 100%;
	overflow-y: visible;
	overflow-x: visible;
}
}