@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
/* CSS Document */

html, body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "CaviarDreams", serif;
}

#bganime {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #833ab4;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
canvas {
    position: absolute;
    width: 100%!important;
    height: 100%!important;
    top: 0;
    left: 0;
    z-index: 0;
}

#nav-top {
    position: absolute;
    top: 1em;
    left: 0;
    height: 4em;
    width: 30%;
    z-index: 2;
    background-image: -webkit-linear-gradient(270deg,rgba( 0,0,0,0.00) 0%, rgba(0,0,0,.3) 100%);
	background-image: linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,.3) 100%);
}
#logo-top {
    float: left;
    height: 3em;
    width: auto;
    margin-top: .5em;
    margin-left: 1em;
}
#nav-top a {
    float: left;
    display: block;
    text-transform: uppercase;
    margin-top: 1.3em;
    margin-left: 2em;
}
#welcome {
    position: absolute;
    top:48%;
    width: 100%;
    transform:translate(0,-50%);
    text-align: center;
    z-index: 1;
}
#welcome h1 {
    font-weight: bold;
    font-size: 5em;
    text-transform: uppercase;
    text-shadow: 0 0 10px #e530d3;
}
#welcome p {
    font-size: 2em;
    padding: 0 2em;
}
.goto {
    position: absolute;
    width: 100%;
    bottom: 3em;
    z-index: 10;
}
.voir, .voirplus, .back {
    display: block;
    margin: auto;
    width: 4em;
    height: 4em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #12585e;
}
.voir:hover, .voirplus:hover {
    background: #2f8287;
    transition: .3s;
}
.voir span, .voirplus span {
    font-size: 1.6em;
    padding: .8em;
}
.goto p, .goout p {
    padding-top: .5em;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.info-box {
    position: relative;
    width: 100%;
    text-align: center;
}
.info-box h1 {
    padding: 2em 0 .5em 0;
    font-size: 3em;
    font-weight: bold;
    margin-left: 5em;
    opacity: 0;
}
.info-box h1 span {font-size: 1.2em;}
.info-box h2 {
    font-size: 1.3em;
    padding: .5em 2em;
    line-height: 150%;
    margin-left: -8em;
    opacity: 0;
}

#info1 {
    background: #280540;
    padding: 1em 0 3em 0;
}
.photo-wall {
    width: 90%;
    margin: auto;
    padding: 1em 0 2em 0;
}
.photo-box {
    float: left;
    width: 25%;
}
.photo-scale {
    position: relative;
    width: 100%;
    padding-bottom: 180%;
    height: 0;
}
.photo {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    background-color: #343434;
    background-size: auto 100%;
    background-position: 50% 50%;
    transition: .4s;
    z-index: 0;
}

#info2 {
    background: #132c36;
    padding: 1em 0 2em 0;
}
#menu-num-box {
    width: 60%;
    padding: 2em 0 1em 0;
    margin: auto;
}
#menu-num-scale {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    height: 0;
}
#menu-num, .pic-show, .deco-show {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #343434;
    background-repeat: no-repeat;
	background-size: cover;
}
.goout {
    padding: 1em 0;
    width: 100%;
}
.voirplus {background: #626973;}
.voirplus:hover {background: #858e9a;}

#info3 {
    background: #1a222b;
    padding: 1em 0 3em 0;
}
#pic-show-box, #deco-show-box {
    width: 60%;
    padding: 1em 0 .5em 0;
    cursor: pointer;
}
#pic-show-scale, #deco-show-scale {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    margin-bottom: 2.5em;
    height: 0;
}
.swiper-container{--swiper-pagination-color: #a59b90;}
.swiper-pagination-bullet{
    height: .8em;
    width: .8em;
}

#info4 {
    background: #132c36;
    padding: 1em 0 3em 0;
}

#info5 {
    background: #231f21;
    padding: 1em 0 6em 0;
}
#logo-bottom {
    display: block;
    height: 100px;
    width: auto;
    margin: auto;
    padding-top: 20px;
}
#hoursbox, #addressphone {
    float: left;
    width: 50%;
    text-align: left;
}
#hoursbox h5, #addressphone h5 {padding-bottom: .3em;}
#hoursbox p {
    width: 30%;
    font-size: .9em;
    float: left;
    padding-bottom: .5em;
}
#hoursbox ul, #apbox {
    width: 60%;
    float: right;
}
#hoursbox ul li {
    display: block;
    width: 100%;
    height: 1.4em;
}
.timeright {width: 70%!important;}
#addressphone p {
    width: 100%;
    font-size: .9em;
    float: left;
    padding-bottom: 1em;
}

.back {
    background: #662993;
    -webkit-box-shadow: 0 0 10px #191726;
    box-shadow: 0 0 10px #191726;
}
.back:hover {
    background: #813caf;
    transition: .3s;
}
.back span {
    font-size: 1.6em;
    padding: .7em .8em;
}
#gotop {
    position: fixed;
    display: none;
    bottom: 1.5em;
    width: 100%;
    z-index: +10;
}


@media (max-width: 1024px) {
    #nav-top {width: 50%;}
}

@media (max-width: 768px) {
    .photo-box {width: 50%;}
    #pic-show-box, #deco-show-box, #menu-num-box {width: 75%;}
    #hoursbox, #addressphone {width: 100%;}
    #hoursbox {padding-bottom: 1.2em;}
    #hoursbox ul, #apbox {
        width: 65%;
        float: none;
        margin: auto;
    }
}

@media (max-width: 580px) {
    #nav-top {width: 85%;}
    #welcome h1 {font-size: 4em;}
    #welcome p {font-size: 1.6em;}
    .info-box h1 {font-size: 2em;}
    .info-box h2 {font-size: 1em;}
    #pic-show-box, #deco-show-box, #menu-num-box {width: 90%;}
}