:root{
  --txtcolor : white;
  --yearcolor : #CDCCD4;
  
  --swiper-pagination-color :white;
  --swiper-theme-color:white;
  --swiper-pagination-bullet-inactive-color :white;
  --swiper-pagination-bullet-inactive-opacity :0.5;
}

html,
body {
    position: relative;
    height: 100%;
}

body {
    font-family: 'Kanit';
    font-weight: 500;
    color:var(--txtcolor);
    font-size:calc(0.5vw + 1.5vh + 0.5vmax);
    overflow: hidden;
    margin:0;
    padding:0;
    }

h2, h3 {
    letter-spacing: calc(0.1vw + 0.1vh);
}

h3 {
    font-size:calc(1.8vw + 1.8vh);
    /*font-size:calc(2.3vw + 2.3vh + 0.5vmin);*/
    padding:1vh;
    margin:0;
    text-align: center;
}

p {
    padding:5vh;
    font-weight: 0;
    margin:0;
    text-align:left;
    font-family: 'Jura';
    font-size:calc(1.6vmax + 1.5vh);
}

small {
   padding:5vh;
   font-size:calc(1.3vmax + 1.2vh);
   font-family: 'Jura';
}

#contact small, #contact p {
    /*text-align: center;*/
}

/* Star table */
.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align:left;
  /* overflow-y: scroll; height:50vh;*/
  /*gap: 10px;
  grid-auto-rows: minmax(100px, auto);*/
}
.table .left {
  grid-column: 1;
}
.table .right {
  grid-column: 2;
}

.page p, .page h3, .page small {
    max-width: 70vw;
}

.from, .to {
    position:absolute;
    font-size:calc(6vw + 6vh);
    opacity: 0.2;
    padding:1vh;
}

.from {
    bottom:0;
    left:3vw;
    border-radius: 0 100% 0 0;
}

.to {
    top:0;
    right:3vw;
    border-radius: 0 0 0 100%;
}

.story {
    top:0;
    left:0;
    padding:5vh;
    position:absolute;
    font-size:calc(1.4vw + 1.4vh);
    margin:0
}

.place {
    bottom: 0;
    right: 0;
    padding: 5vh;
    position: absolute;
    font-size: calc(3vw + 3vh);
    margin: 0;
    opacity:0.2;
}

.icon {
    top:0;
    left:0;
    padding:0;
    font-size:calc(4vw + 4vh + 1.5vmin);
    margin:0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    flex-direction: row;
}

.swiper-slide img {
    display: block;
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.bloc_1, .bloc_2{
    display:flex;
    flex-direction: column;
    min-height:40vh;
}
.bloc_1{
    width: 40vw;
    max-width: 40vw;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.bloc_2{
    width: 50vw;
    max-width: 50vw;
    background:rgba(255,255,255,0.2);
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgb(255, 255, 255,0.1));
    border-radius: 4vw;
    justify-content: center;
}

.swiper-button-next, .swiper-button-prev {
    top: 70vh;
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
    right: 3vh;
}

div .page a {
    color:var(--txtcolor);
    text-decoration: none;
}

@-webkit-keyframes arrow-jump {
  0%   { opacity: 0;}
  100% { opacity: 1;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -0-transform: translateY(10px);
        transform: translateY(10px);
    }  
}
#arrow {
  font-size: calc(3vh + 3vw);
  -webkit-animation: arrow-jump 1s 2; /* Safari 4+ */
  -moz-animation:    arrow-jump 1s 2; /* Fx 5+ */
  -o-animation:      arrow-jump 1s 2; /* Opera 12+ */
  animation:         arrow-jump 1s 2; /* IE 10+, Fx 29+ */
  opacity: 0;
}

@media screen and (max-width: 1200px) {
    #arrow {
        display: none;
    }

    .swiper-button-next, .swiper-button-prev, .page .fa-map-marker-alt, h2 .fa-at, #contact .bar {
        display:none;
    }
    #contact .bloc_2, #contact p, #contact small{
        background:unset;
    }
    .table {
        overflow-y:unset;
        height:unset;
    }
    .from{
        bottom:unset;
        top:0;
    }
    .from, .to{
        font-size:calc(2vw + 2vh);
        padding-top:calc(1.3vw + 1.3vh);
        opacity:0.8;
    }   

    .place{
        bottom:unset;
        right:unset;
        top:0;
        font-size:calc(1.1vw + 1.1vh);
        padding-top:calc(5.8vw + 5.8vh);
        width:100%;
        text-align: center;
        opacity: 0.6;
    }
    h3 {
        max-width:90vw;
        font-size:calc(2vw + 2vh);
        padding:1vh;
    }
    .bar{
        width:100%;
        height:calc(5.2vw + 5.2vh);
        position:absolute;
        top:0;
        background-color: white;
        opacity:0.2;
        box-shadow: 0px calc(2.6vw + 2.6vh) 0px 0px rgba(255, 255, 255, 0.4);
    }
    .story{
        font-size:calc(2vw + 2vh);
        left:unset;
        padding-top:calc(1.3vw + 1.3vh);
        width:100%;
        text-align: center;
    }
    .bloc_2{
        /*min-height:10vh;*/
        background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), rgb(255, 255, 255,0.1));
        max-width:70vw;
        width:70vw;
        margin-top: 1vh;
        border-radius: 4vw;
    }
    #contact .bloc_2{
        margin-top: unset;
    }
    p, small {
        padding:3vh;
    }
    small{
        background:rgba(255,255,255,0.1);
        text-align:center;
        border-bottom-left-radius: 4vw;
        border-bottom-right-radius: 4vw;
 
    }
    .swiper-slide {
        flex-direction: column;
    }
    .bloc_1, .bloc_2{
        min-height: unset;
        max-width:76vw;
        width:76vw;
    } 
}