/* general responsive settings */

#menuResp {
    display: none;
    width: 100%;
}

#trigger:hover {
    cursor: pointer;
}
a#trigger {
    width: 40px;
    position: fixed;
    display: none;
    outline: medium none;
    overflow: hidden;
    margin: 0px;
    padding: 21px;
    z-index: 999;
    right: 0;
    top: 0;
}
#trigger {
    height: 28px;
    display: block;
    position: relative;
    margin-right: 20px;
}

.respHeader {
    height: 70px;
    position: fixed;
    top: 0;
    z-index: 997;
    display: none;
    border-bottom: 1px solid #DDD;
}

#trigger .w100, #trigger .row2.w100, #trigger .row3.w100 {
    width: 100%;
}

#trigger .row1, .row2, .row3 {
    transition: width 0.3s ease 0s;
    display: block;
}

#trigger .row1 {
    width: 100%;
}

#trigger .row2 {
    width: 67%;
}

#trigger .row3 {
    width: 33%;
}

#trigger .rows {
    transition: width 0.3s ease 0s;
    height: 4px;
    background-color: #3498DB;
    border-radius: 2px;
    margin-top: 7px;
    float: right;
}

@media screen and (min-width: 1280px) {
    body{
    }
}

@media screen and (max-width: 1000px) { 
    .mainContainer, .cta, .description, #menu, #pictures, .gridNew figure.img_single, .grid figure.img_single {
        width: 800px;
    }
    
    .grid.subpage svg {
        height: 450px;
    }
    
    .grid figure {
        margin: 0;
    }
    
    .gridNew figcaption.cap_single, .grid figcaption.cap_single {
        top: 333px;
    }
    
    .gridNew a, .grid a {
        max-width: 800px;
        width: 100%;
    }
}

@media screen and (min-width: 801px) { 
    nav {
        display: block !important;
    }
}

@media screen and (max-width: 800px) {    
    .respHeader {
        display: block;
    }
 
    nav {
        display: none;
    }
    
    nav ul li {
        float: none;
    }
    
    a#trigger {
        display: block;
    }
    
    #menu {
        display: block;
        padding-left: 20px;
        box-sizing: border-box;
    }
    
    .tagline {
        display: none;
    }
    
    .mainContent {
        margin-top: 70px;
    }
    
    .mainContent.index {
        margin-top: 0px;
    }
    
    .mainContent.top100 {
        top: 100px;
    }
    
    nav {
        border-bottom: 1px solid #DDD;
        z-index: 998;
        height: auto;
        padding-bottom: 20px;
        top:-2px;
    }
    
    .mobile {
        display: block;
        color: #AAA;
        margin: 0;
    }
    
    .mobile h2 {
        padding: 0px;
        margin: 0;
        margin-top: 10px;
    }
    
    .mobile p {
        margin-top: 5px;
        margin-bottom: 10px;
    }
    
    .desktop {
        display: none;
    }
    #grid, .mainContainer {
        width: 90%;
    }
    
    #grid .mainContent, .description, #pictures {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .img_50_1, .img_50_2 {
        margin-top: 30px;
        width: 100%;
        float: left;
        position: relative;
    }
    
    .img_220_1, .img_220_3, .img_220_3b{
        float: left;
        width: 48%;
        margin-left: 0%;
    }
    
    .img_220_2, .img_220_1b, .img_220_2b {
        float: right;
        width: 48%;
        margin-left: 0%;
    }
}

@media screen and (max-width: 400px) {
    .img_220_2, .img_220_1b, .img_220_2b, .img_220_1, .img_220_3, .img_220_3b{
        float: left;
        width: 100%;
        margin-left: 0%;
    }
}