.demo {
    position: relative;
    height: 348px;
    width: 200px;
    float: right;
}
.demo > div {
    position: absolute;
    border: 4px solid red;
    border-radius: 8px;
    opacity: 0;
    transition: 0.2s opacity ease;
}
.demo > div.active {
    opacity: 0.75;
    transition: 0.2s opacity ease;
    box-shadow: 0 0 15px #000;
}
.demo .qr {
    bottom: 0;
    right: 3%;
    width: 26%;
    height: 17%;
}
.demo .address {
    bottom: 4%;
    left: 1%;
    width: 53%;
    height: 13%;
}
.demo .link {
    bottom: 1%;
    left: 1%;
    width: 35%;
    height: 5%;
}
.demo .minilogo {
    top: 2%;
    width: 50%;
    height: 12%;
    left: 50%;
    margin-left: -25%;
}
.demo .title {
    top: 20%;
    width: 100%;
    height: 13%;
}
.demo .number {
    top: 31%;
    width: 80%;
    height: 12%;
    left: 50%;
    margin-left: -40%;
}

.demo .date {
    top: 53%;
    width: 62%;
    height: 8%;
    left: 38%;
}
.demo .terms {
    top: 61%;
    width: 100%;
    height: 12%;
    left: 0;
}
.demo .scratch {
    top: 72%;
    width: 71%;
    height: 10%;
    left: 14%;    
}

.gallery {
    margin: 12px 0;
}
.gallery span {
    float: left;
    width: 25%;   
    height: 137px;
    overflow: hidden;
}
.gallery img {
    visibility:hidden;
}
.center {
    text-align: center;
}
.legit {
    background: #eaeaea;
    padding: 25px;
    font-size: 18px;
    line-height: 30px;
    margin: 0 0 15px;
}
.links a {
    cursor: pointer;
    padding: 0 3px;
    transition: 0.2s all ease;
}    

.links a.active, .links a:hover {
    background: red;
    color: #fff;
    transition: 0.2s all ease;
}
@media (min-width: 1024px) {
    .inner {
        float: left;
        width: 70%;
    }
}
@media (max-width: 767px) {
    .demo {
        float: none;
        margin: 0 auto;
    }
    .links a {
        color: #080c1a;
    }
}

@media (max-width: 400px) {
    .gallery span {
        width: 50%;
        height: 122px;
    }
}