.main{
    position: absolute;
    left: 0px;
    top: 0px;
    background: #ddd;
    width: 100%;
    display: none;
}

.cover{
    background: #aaa;
    max-height: 700px;
    min-height: 550px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.container{
    margin-top: 50px;
    margin-left: 12%;
    margin-right: 12%;
    margin-bottom: 50px;
    background: #ddd;
    width: 76%;
}

.container > p{
    text-align: center;
    color: #111111;
}

#img1{
    width: 100%;
    min-height: 550px;
    min-width: 775px;
}

#img2, #img3{
    width: 100%;
    min-height: 550px;
    min-width: 775px;
}

.mask{
    position: absolute;
    width: 100%;
    height:100%;
    background-color: #000;
    opacity: 0.5;
}

.cover-dis{
    color: #bbb;
    position: absolute;
}

.cover-dis > .h1, .cover-dis > .h4{
    color: #fff;
}

#cover-dis-1{
    right: 0px;
    top: 30%;
    width: 40%;
}

#cover-dis-2{
    width: 100%;
    left: 0px;
    top: 40%;
    text-align: center;
}
#cover-dis-2 > .h1{
    font-weight: bold;
    font-size:80px;
}
#cover-dis-2 > .h4{
    font-size: 48px;
    font-weight: bold;
}

#cover-dis-3{
    width: 100%;
    left: 0px;
    top: 40%;
    text-align: center;
}
#cover-dis-3 > .h1{
    font-weight: bold;
    font-size:80px;
}
#cover-dis-3 > .h4{
    font-size: 48px;
    font-weight: bold;
}

.display{
    display: none;
}

.cell-img{
    width: 100%;
    margin-top: 20px;
}

.cell-title{
    color: #111111;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

.cell-content{
    text-align: center;
    letter-spacing: 1px;
    line-height: 28px;
}

#btn-w{
    border: 2px solid #ddd;
    text-align: left;
    padding: 5px;
}

#video-1{
    width:105%;
    margin-bottom: -10px;
}

@media (min-width: 1100px){
    #img2, #img1{
        margin-top: -16%;
    }

    #img3{
        margin-top: -9%;
    }


}

@media (max-width: 650px){
    #logo{
        height: 20px;
    }

    .container{
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    #img1, #img3{
        margin-left: -130px;
    }

    #img2{
        margin-left: -200px;
    }

    .hiden {
        display: none;
    }

    .display {
        display: inherit;
    }
}

@media (max-width: 550px){
    #img3{
        margin-left: -200px;
    }

    .foot{
        height: 200px;
        width: 100%;
    }

    #icons{
        height: 50px;
    }
    #mail{
        height: 150px;
    }
}

#nav{
    display: none;
}

#nav-logo{
    margin-top: 0px;
}

#img4 {
    width :100%;
    margin-top:-100px;
}

@media (max-width: 1000px) {
    #video-1{
        margin-left:-100px;
        width:120%;
    }

    #img4{
        width: 140%;
        margin-left: -20%;
    }
}

@media (max-width: 830px) {
    #video-1{
        margin-left:-180px;
        width:150%;
    }
    #img4{
        width: 180%;
        margin-left: -40%;
    }
}

@media (max-width: 650px) {
    #video-1{
        margin-left:-230px;
        width:180%;
    }

    #img4{
        width: 240%;
        margin-left: -70%;
    }
}

@media (max-width: 543px) {
    #video-1{
        margin-left:-300px;
        width:270%;
    }
}

@media (max-width: 370px) {
    #video-1{
        margin-left:-350px;
        width:350%;
    }
}