html,body{
    height:100%;
    background:#c6cbce;
}
.row{
    height:100%;
}
#main{
    position: fixed;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    transform-origin: center center;
    margin:0 auto;
    display: flex;
    min-height:800px;
    flex-flow: column nowrap;
    align-items: center;
    justify-content:center;

}
.content{
    flex-grow: 0;
    box-shadow:0 0 10px rgba(0,0,0,.3);
    display: flex;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: stretch;
}
.contentbg1{
    background:url(../img/mainbg.jpg) no-repeat 40% bottom / cover;
}
.contentbg2{
    background:url(../img/mainbg2.jpg) no-repeat center bottom  / cover;
}
.contentbg3{
    background:url(../img/mainbg3.jpg) no-repeat center bottom  / cover;
}
.brand{
    width:100%;
    height:120px;
    padding:10px;
    border-bottom:solid 1px rgba(0, 0, 0, 0.121569);
    background:#fff;
}
.brand img{
    display: block;
    position:absolute;
    top:-20px;
    left:50%;
    width:270px;
    transform: translateX(-50%);
    max-width:100%
}
.cardcontent{
    font:14px Arial;text-align:left;background-color: #efefef;padding:20px 20px 10px 20px;line-height:20px;
}
footer{
    position: absolute;
    bottom:0px;
    left:0;
    right:0;
    height:40px;
    color:#666;
    font:14px/40px Arial;
}

#main .card-body{
    padding:0 0 40px 0;
}

.content{
    width:600px;
}
@media screen and (max-width: 768px){
    .content{
        width:calc(100vw - 40px);
    }

    #main{
        position:static;
        height:calc(100vh - 80px)
    }
}