@media only screen and (max-width: 768px) {
    
    wrapper {
        width: 320px;
    }
    
    column {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    
    popup {
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    
    .column-5,
    .column-6,
    .column-7,
    .column-8,
    .column-9,
    .column-10,
    .column-11,
    .column-12 {
        width: 100%;
    }
    
    .mobile-hidden {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
    
    
    
    
    
    logo {
        background-size: 80%;
        background-position: center left;
    }
    
    h1 {
        margin-bottom: 16px;
        font-size: 36px;
    }
    
    h2 {
        font-size: 24px;
    }/*
    
    h3 {
        font-size: 24px;
    } h3 span {
        font-size: 18px;
    }*/
    
    
    
    
    
    #main {
        
    }
    
    #main column {
        margin: 0;
    }
    
    #main .column-3 {
        width: 50%;
    }
    
    #fotons {
        width: 100%;
        background: url("../img/foton-01.png") top center no-repeat;
    }
    
    #main .foton {
        display: none;
    }
    
    
    
    
    
    #pros {
        padding: 32px 0 96px;
    }
    
    #pros img {
        top: 90%;
        left: 0;
        width: 100%;
        height: auto;
    }
    
    
    
    
    
    #offer-key {
        padding: 128px 0 32px;
    }
    
    #hand {
        top: 0;
        left: auto;
        margin: 0;
        right: 0;
        width: 100%;
        background: url("../img/hand-mobile.png") top left no-repeat;
        background-size: contain;
    }
    
    #chain {
        display: none;
    }
    
    #key {
        display: none;
    }
    
    
    
    
    
    #map {
        
    }
    
    
    
    
    
    #comments {
        
    }
    
    #comments wrapper {
        width: 100%;
    }
    
    .comment {
        padding: 48px 16px;
        width: 100%;
        border-radius: 0;
        font-size: 14px;
    } .comment:before {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        height: calc(100% + 2px);
        width: 100%;
        background: url("../img/background/before.svg") top left no-repeat, url("../img/background/after.svg") bottom left no-repeat;
    }
    
    .comment .photo {
        left: 8px;
        top: -48px;
        height: 96px;
        width: 96px;
    }
    
    .author {
        position: absolute;
        top: -8px;
        left: 48px;
        color: rgba(0,0,0, 0.75);
    }
    
    
    
    
    
    #offer-foton {
        padding: 32px 0 160px;
        margin-bottom: 64px;
    }
    
    #offer-foton img {
        top: 100%;
        left: 0;
        height: auto;
        width: 100%;
    }
    
    
    
    
    
    #footer {
        
    }
    
    #footer logo {
        background-position: center center;
        background-size: 80%;
    }
    
    #footer column {
        margin: 8px 0;
        width: 100%;
        text-align: center;
    }
    
    
    
    
    popup column:first-of-type {
        display: none;
    }
    
}