@media (max-width: 1024px) {

    a#offcanvas-menu {
        display: block;
        top: 30px;
    }

    a.logo {
        width: 30%;
    }

    a.logo img {
        width: 95%;
        margin-bottom: 10px;
    }

    header > div.content {
        height: auto;
    }

    header > div.content,
    main > section > div.content {
        width: 95%;
    }

    div.cart-box {
        right: 0px;
        padding: 10px 10px 10px 15px;
        top: -250px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    ul.eventlist li{
        width: 95%;
    }

    div.swiper-button-next {
        right: -10px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23c0c0c0'%2F%3E%3C%2Fsvg%3E");
    }

    div.swiper-button-prev {
        left: -15px;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23c0c0c0'%2F%3E%3C%2Fsvg%3E");
    }

    h1 {
        font-size: 5em;
        margin-bottom: 0;
    }

    main > section:first-child {
        margin-top: -72px;
    }

    div.layer {
        height: 500px;
    }

    div.layer > div.transition {
        top: 350px;
    }

    body.home div.layer {
        height: 600px;
    }

    body.home div.layer > div.transition {
        top: 450px;
    }

    main {
        margin-top: 350px;
        min-width: 100%;
        max-width: 100%;
    }

    body.home main {
        margin-top: 450px;
    }

    nav.main, nav.global {
        display: none;
    }


    div.family:before {
        margin-top: -200px;
        height: 200px;
    }

    div.concert:before {
        display: block;
        content: " ";
        margin-top: -100px;
        height: 100px;
        visibility: hidden;
    }

    div.church:before {
        display: block;
        content: " ";
        margin-top: -115px;
        height: 115px;
        visibility: hidden;
    }

    div#gallery {
        width: 95%;
    }
}

@media (max-width: 768px) {
    a#offcanvas-menu {
        top: 25px;
    }

    ul.flavors li span.title {
        width: 40%;
    }

    ul.flavors li span.price {
        width: 35%;
    }

    ul.flavors li form {
        width: 25%;
    }

    .product {
        width: 25%;
    }

    .product:nth-of-type(6n+7) {
        clear: none;
    }

    .product:nth-of-type(4n+5) {
        clear: both;
    }

    div.productview img.productimage {
        float: right;
        width: 40%;
        margin-left: 20px;
        margin-bottom: 20px;
    }

    div.family:before {
        margin-top: -200px;
        height: 200px;
    }

    div.concert:before {
        margin-top: -83px;
        height: 83px;
    }

    div.church:before {
        margin-top: -97px;
        height: 97px;
    }

    .timeline .right-content {
        margin-left: 30px;
        width: 100%;
    }

    div.media .item, .timeline .item{
        height: auto;
        margin-bottom: 30px;
    }

    .media .right-content .item div.text {
        padding-left: 20px;
    }

    .timeline .item div.text .video-preview {
        height: 44vw;
    }

    .concert-calender div.one-third, .concert-calender div.two-thirds{
        width: 100%;
    }

    .concert-box1{
        float: left;
        width: 38%;
        margin-right: 1em;
    }
    .concert-box2{
        float: left;
        width: 35%;
    }
    .concert-box3{
        float: left;
        width: 20%;
    }

    .concert-box4{
        display: none;
    }

    div.infobox {
        width: 100%;
        margin-top: 0;
    }

    div.swiper-slide .video-preview {
        height: 25vw;
    }

    section.green article.product {
        width: 50%;
    }

    section.green article.product:nth-of-type(2n+3) {
        clear: left;
    }

    section.green article.tracks {
        float: right;
        width: 40%;
        margin-left: 10%;
    }

    section.green div.products {
        float: left;
        width: 50%;
    }

    div#gallery div.swiper-slide a {
        height: 100px;
    }

    footer .item.footer:nth-of-type(1),
    footer .item.footer:nth-of-type(2){
        width: 100%;
    }

    footer div.content {
        width: 95%;
        padding-left: 10px;
    }

    footer ul li.icon a img  {
        width: 30px;
        margin-right: 6px;
    }

}

@media (max-width: 736px) {
    a#offcanvas-menu {
        top: 22px;
    }
}

@media (max-width: 667px) {
    a#offcanvas-menu {
        top: 20px;
    }
}

@media (max-width: 480px) {


    body {
        max-width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        padding-left: 0;
    }

    h1 {
        font-size: 4.3em;
        margin-top: 19px;
    }
    section:first-of-type h1 {
        line-height: 100%;
    }

    h2 {
        padding-left: 10px;
    }

    div.body h2 {
        padding-left: 0;
    }

    body.home h2 {
        font-size: 1.5em;
    }

    div.layer {
        width: 100%;
    }

    div.body {
        padding-right: 5px;
        padding-left: 10px;
    }

    article {
        width: 100%;
    }

    .half {
        width: 100%;
    }

    .quart {
        width: 50%;
    }


    .two-thirds {
        width: 100%;
    }

    .one-third {
        width: 100%;
    }

    a.logo {
        width: 40%;
        margin-top: 15px;
    }

    a.logo img {
        width: 95%;
        margin-bottom: 10px;
    }

    a#offcanvas-menu{
        top: 18px;
    }

    header > div.content {
        height: auto;
    }

    .product {
        width: 80%;
        margin-left: 10%;
    }

    div.productview img.productimage {
        float: right;
        width: 40%;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    div.stage_play-list .product{
        width: 80%;
    }

    article div.firstimg {
        margin-top: 0;
    }

    article div.slanted-static:nth-child(2n+2){
        margin-left: 10px;
    }

    form.newsletter {
        width: 100%;
    }

    div.swiper-button-next, div.swiper-button-prev {
        width: 15px;
        height: 30px;
    }

    div.swiper-button-next {
        right: -10px;
    }

    div.swiper-button-prev {
        left: -10px;
    }

    article.concert-intro{
        display: none;
    }
    .concert-box1{
        width: 85%;
    }

    .concert-box2{
        display: none;
    }
    .concert-box3{
        display: none;
    }

    ul.eventlist {
        width: 94%;
        margin-left: 10px;
    }

    ul.eventlist li span.date {
        width:25%;
    }

    ul.eventlist li a.glyphicons {
        width: 10%;
    }

    ul.eventlist li span.emptymap {
        width: 10%;
    }
    ul.eventlist li span.location {
        width: 65%;
    }

    ul.eventlist li span.concert_type {
        width: 25%;
        clear: both;
    }

    ul.eventlist li span.organisator {
        width: 65%;
        padding-left: 10%;
    }

    ul.eventlist li span.soldout {
        float:right;
    }

    ul.courselist {
        width: 95%;
        margin-left: 10px;
    }

    ul.courselist li span.date {
        width: 25%;
    }

    form.booking input, form.booking textarea, form.booking select {
        width: 97%;
    }

    article.course img{
        width: 95%;
        float: left;
        margin-left: 0;
        margin-bottom: 20px;
    }


    ul.keywordgroups li {
        width: 50%;
    }

    div.tracks_by_product div.product {
       margin-left: 1%;
       width: 100%;
    }

    div.tracks_by_product div.product img {
       width: 40%;
    }

    div.tracks_by_product div.product ul {
        width: 55%;
    }

    ul.tracks li:before {
        margin-left: -20px;
    }

    main > section > div.flex {
        display: block;
    }

    blockquote {
        text-align: left;
        padding-left: 15px;
        padding-right: 0px;
    }

    div.swiper-slide .video-preview {
        height: 50vw;
    }

    .media-intro-box {
        margin-left:15px;
    }


    article.contact-box {
        text-align: left;
    }

    .media-contact {
        margin-right: 25px;
    }

    article.download {
        width: 50%;
    }
    article.download:nth-of-type(odd){
        clear:both;
    }

    ul.flavors li span.title {
        width: 65%;
    }

    ul.flavors li span.description {
        width: 60%;
    }

    ul.flavors li span.price {
        width: 35%;
        padding-right: 0;
    }

    ul.flavors li form {
        width: 40%;
    }

    ul.flavors li form input[type="submit"], ul.flavors li form input[type="submit"]:active {
        width: 2em;
        margin-left: 10px;
    }

    div.cart {
        font-size: 14px;
    }

    ul.cart-progress li {
        padding-left: 20px;
    }

    div.cart div.cart-item div.image {
        display: none;
    }

    div.cart div.cart-item div.price {
       display: none;
    }

    div.cart div.cart-item div.quantity {
        width: 15%;
    }

    div.cart div.cart-item div.sum {
        width: 20%;
    }

    div.cart div.cart-item div.title {
        width: 54%;
    }

    div.cart div.cart-item div.title h3 {
        font-size: 16px;
    }

    div.cart div.cart-total div.total {
        width: 30%;
        font-size: 16px;
    }

    div.cart div.cart-total div.title {
        width: 60%;
    }

    form.contact input#email.field {
        margin-top: 0;
    }

    form.contact select {
        width: 90%;
    }

    label.checkbox {
        font-size: 14px;
        width: 90%;
    }

    div.address_box {
        width: 90%;
        margin-left: 5%;
    }

    div.layer {
        height: 500px;
    }

    div.layer > div.transition {
        top: 350px;
    }

    body.home div.layer {
        height: 350px;
    }

    body.home div.layer > div.transition {
        top: 350px;
    }

    main {
        margin-top: 350px !important;
    }

    footer p {
        font-size: 14px;
    }

    section.green article.product {
        width: 50%;
        margin-left: 0;
    }

    section.green article.product:nth-of-type(2n+3) {
        clear: none;
    }

    section.green article.tracks {
        float: right;
        width: 100%;
        margin-left: 0%;
    }

    section.green div.products {
        float: left;
        width: 100%;
    }

    ul.category-header li {
        display: block;
        width: 100%;
        margin-left: 10px;
    }

    div#gallery div.swiper-slide a {
        height: 200px;
    }

    ul.cart-progress {
        display: none;
    }

    div.productview img.app-screen {
        width: 100px;
    }
}

@media (max-width: 320px) {
    a.logo {
        width: 50%;
    }
}