@font-face { font-family: Magelove; src: url(../../assets/fonts/Magelove.ttf); }
@font-face { font-family: P22Underground; src: url(../../assets/fonts/P22Underground-Heavy.otf); }
@font-face { font-family: Boulevard; src: url(../../assets/fonts/boulevard.ttf); }
@font-face { font-family: Baskerville; src: url(../../assets/fonts/baskerville/baskerville-regular.ttf); }
@font-face { font-family: FranklinGothic; src: url(../../assets/fonts/FranklinGothic.ttf); }
@font-face { font-family: UbuntuBold; src: url(../../assets/fonts/Ubuntu-bold.ttf); }
@font-face { font-family: Milkshake; src: url(../../assets/fonts/Milkshake.ttf); }
@font-face { font-family: Conceptnovasmc; src: url(../../assets/fonts/Conceptnovasmc-regular.ttf); }
@font-face { font-family: BonheurRoyale; src: url(../../assets/fonts/BonheurRoyale-Regular.ttf); }
@font-face { font-family: SaithikHand; src: url(../../assets/fonts/Saithik-Handwritten.ttf); }
@font-face { font-family: Msgothic; src: url(../../assets/fonts/Msgothic.ttc); }

:root {
    --color-primary: #338c90;
    --color-secondary: #fabf74;
    --color-alt: #5dab8a;
    --color-white: #ffffff;
    --color-1: #736363;
    --color-2: #9E9E9E;
    --color-bg: #9E9E9E;
    --color-bg-black: rgb(0 0 0 / 45%);
    --color-bg-secondary: #F0ECE3;
    --color-bg-grey: #9E9E9E;
}

*, *::before, *::after { box-sizing: border-box; line-height:1.3 }
a { color:#f0ece3 }

body { 
    font-family: 'Roboto Slab', sans-serif;
    font-size: 14px;
    background-color: var(--color-white);
    overflow-x: hidden;
    padding: 0; 
    margin: 0;
}
small { font-size: 14px }

.overflow-y-h { overflow-y: hidden; }

/*p { font-size: 1rem; }*/

.bg-1 { background-color: #000000 }
.bg-2 { background-color: #000000 }

.text-center { text-align: center; }

.h-100 { height: 100%; }
.hv-100 { height: 100vh; }

.d-flex { display: flex }
    .flex-column { flex-direction: column; }
    .jcc { justify-content: center; }
    .jcs { justify-content: space-evenly }
    .align-center { align-items: center; }

.p-relative { position: relative; }
.p-absolute { position: absolute; }

.f-magelove { font-family: Magelove; }
.f-p22underground { font-family: P22Underground; }
.f-boulevard { font-family: Boulevard; }
.f-baskerville { font-family: Baskerville; }
.f-franklinGothic { font-family: FranklinGothic; }
.f-ubuntubold { font-family: UbuntuBold; }
.f-milkshake { font-family: Milkshake; }
.f-conceptnovasmc { font-family: Conceptnovasmc; }
.f-bonheurroyale { font-family: BonheurRoyale; }
.f-saithikHand { font-family: SaithikHand; }
.f-msgothic { font-family: Msgothic; }

.underline { border-bottom: 2px solid var(--color-white); }

.btn-1 {
    background-color: var(--color-2);
    color: var(--color-white);
    border-radius: 15px;
    padding: 8px 15px;
}
.btn-2 {
    background-color: var(--color-2);
    color: var(--color-white);
    border-radius: 15px;
    padding: 8px 25px;
}

.page {
    padding-bottom: 3rem;
}
.page, #cover {
    max-width: 420px;
    margin: 0 auto;
}

.hero {
    position: relative;
    background-color: var(--color-bg); 
    display: flex;
    height: 100vh;
    padding: 2rem 0 9rem; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    color: var(--color-white); 
    text-align: center; 
    overflow: hidden;
    z-index: 1;
}
.cover-close { transform: translateY(200%); transition: 0.4s ease-in-out; }
.cover-img { 
    max-width: 100%;
    height: 110px;
}

.inv-close { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; }

.open { 
    background-color: transparent; 
    color: #fff; 
    padding: 10px 5vw; 
    border: 2px solid #fff; 
    border-radius: 15px;
}
    .open img, .open span { vertical-align: middle;height: 20px;margin-right: 10px }

.vector-top { position: relative; display: flex; justify-content: center; }
.vector-top img { position: relative; top: -10px; }

#countdown {
    font-size: 1rem;
}
    .countdown-item {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

header { 
    background-color: var(--color-bg-secondary);
    color: var(--color-white);
}
    header div {
        background-color: var(--color-bg-black);
        border-radius: 0 0 25% 25%;
        height: 30vh;
    }

main {  }

section {
/*    min-height: 100vh;*/
}

.section-1 { 
    background-color: var(--color-bg-secondary);
    color: var(--color-1);
    height: 70vh;
}
.section-2 { 
    background-color: var(--color-bg-secondary);
    color: var(--color-white);
}
    .section-2 > div {
        background-color: var(--color-bg-grey);
        clip-path: polygon(50% 0%, 100% 7%, 100% 100%, 0 100%, 0% 7%);
        padding-top: 10%;
    }
    .section-2 .info-w { margin-top: 10rem }
    .section-2 img { 
        height: 250px;
        object-fit: cover;
/*        background: var(--color-bg-secondary);*/
/*        border-radius: 45% 45% 0 0;*/
        padding: 5px;
    }
    .fullname-p ,.fullname-w {
        font-size: 20px;
    }
.section-3 , .section-6 { 
    background-color: var(--color-bg-grey);
    color: var(--color-white); 
}
    .section-3 .box {
        background-color: var(--color-bg-secondary);
        color: var(--color-2);
        border-radius: 15px;
    }
    .section-3 .icon-location {
        max-width: 20%;
        margin: 0 auto;
    }
.section-4 {
    background-color: var(--color-bg-secondary);
    color: var(--color-white); 
}
    .section-4 > div {
        background-color: var(--color-bg-grey);
        clip-path: polygon(0 0, 100% 0, 100% 71%, 52% 100%, 0 74%);
        padding-bottom: 6rem;
        height: 60vh;
    }
.section-5, .section-7, .story { 
    background-color: var(--color-bg-secondary);
    color: var(--color-1);
}
.gallerys {
    background-color:  var(--color-bg-secondary);
    color: var(--color-1);
    padding: 3rem 1rem;
}
    .gallery .item img { width: 100%; height: 100%; object-fit: cover;  }
    .gallery .item {
        margin-bottom: 10px; 
        padding: 10px; 
        flex: 1 1 50%;
        height: 200px;
    }
.story .row::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}


#nav-bottom { 
    position: fixed;
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    overflow: hidden; 
    background-color: #4f4d4d; 
    color: #fff;
    z-index: 2;
}
    #nav-bottom ul { position: relative; list-style: none; width: 100%; display: flex; justify-content: space-evenly; overflow: hidden; }
    #nav-bottom ul li { flex-grow: 1; text-align: center; }


/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {
    .vector-top img { width: 100%; height: auto; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}