﻿
#SiteGridContainer { padding-top: 0; }
#wrapper { position: relative; z-index: 0; background-image: url(pic_156_a.jpg); background-repeat: no-repeat; background-attachment: fixed; }


.section1 { height: 100vh; width: 100%; background-color: #000; position: relative; overflow: hidden; }
    .section1 .container { width: 100%; height: 100vh; overflow: hidden; padding: 0px; }
        .section1 .container .scene { width: 100%; height: 100vh; overflow: hidden; }
            .section1 .container .scene .layer { width: 110%; height: 110vh; overflow: hidden; }
    .section1 .layer .far { background-image: url('home_bg_far.jpg'); background-size: cover; background-position: center; background-size: cover; position: absolute; width: 100%; height: 100%; left: -5%; top: -5%; }
    .section1 .layer .medium { background-image: url('home_bg_middle.png'); background-size: cover; background-position: center; background-size: cover; position: absolute; width: 100%; height: 100%; left: -5%; top: -5%; }
    .section1 .layer .close { background-size: cover; background-position: center; background-size: cover; position: absolute; width: 100%; height: 100%; left: -5%; top: -5%; }
    .section1 .titleslide { position: absolute; z-index: 102; }
    .section1 .arrow { position: absolute; z-index: 106; bottom: 20px; left: 50%; cursor: pointer; opacity: 0; text-transform: uppercase; color: #fff; }
        .section1 .arrow .align-middle { left: -50%; position: relative; text-align: center; }
    .section1 #scrollTitle { margin-bottom: 10px; }

.titleslide { position: absolute; z-index: 10002; left: 50%; top: calc(50% - 180px); }
    .titleslide .title { width: 100%; text-align: center; height: 84px; }
    .titleslide .titleunder { display: block; vertical-align: middle; width: 100%; height: 100px; overflow: hidden; margin: auto; margin-top: 10px; margin-right: 13px; opacity: 0; }
        .titleslide .titleunder img { width: 300px; height: auto; }

.align-middle { position: relative; left: -50%; }
    .align-middle img { max-width: 450px; width: 100%; }
.arrow .align-middle img { max-width: 200px; }
.blackscreen { height: 100%; width: 100%; background-color: #000; position: absolute; z-index: 100; opacity: 1; }
.blackscreen2 { height: 100vh; width: 100%; background-color: #000; position: fixed; z-index: 10001; opacity: 1; }

    .blackscreen2 .loader { width: 100px; left: 50%; bottom: calc(50% - 100px); position: absolute; text-align: center; }
    .blackscreen2 .circlesvg, .blackscreen2 .circlesvg-bg { position: absolute; left: -50%; opacity: 0; }
    .blackscreen2 .circlesvg-bg { opacity: 0.3; }
    .blackscreen2 #logoLoading { opacity: 0; }

.section1 .list { position: absolute; z-index: 103; left: 50%; top: 60%; }

.listWord { position: relative; left: -50%; text-align: center; }

    .listWord li { display: inline-block; margin: 0 15px; }
    .listWord .word { opacity: 0; }

.point1 { position: absolute; left: 143px; top: 15px; opacity: 0; }
.point2 { position: absolute; left: 153px; top: 0px; opacity: 0; }

.containerText { position: absolute; z-index: 105; width: 100%; height: 100%; }
.textIntro { text-align: center; height: 100%; line-height: 100vh; }
    .textIntro span { color: #fff; transition: color 1s; }
        .textIntro span:nth-child(2) { transition-delay: 0.5s }
        .textIntro span:nth-child(3) { transition-delay: 1s }
        .textIntro span:nth-child(4) { transition-delay: 1.5s }
        .textIntro span:nth-child(5) { transition-delay: 2s }


    .textIntro.colored span:nth-child(1) { color: #BBB67E; }
    .textIntro.colored span:nth-child(2) { color: #E292BD; }
    .textIntro.colored span:nth-child(3) { color: #F5871E; }
    .textIntro.colored span:nth-child(4) { color: #86BDBD; }


.bloc { font-family: 'ArenqRomanpro'; color: #fff; text-transform: uppercase; font-size: 40px; max-width: 930px; margin: 0 50px; line-height: 55px; display: inline-block; vertical-align: middle; user-select: none; cursor: default; }


/* //////////////////////////////////////////////////////////////////////
//  03 - SECTION 2
//////////////////////////////////////////////////////////////////////*/

.section2 { width: 100%; height: 100vh; overflow: hidden; position: relative; }

.panel { height: 100%; width: 100%; position: absolute; margin-bottom: 0; background-color: transparent; border: none; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; }

.section2 section:nth-child(1) { height: 100vh; display: table; z-index: 5; }
.section2 section:nth-child(2) { height: 100vh; display: table; z-index: 4; }
.section2 section:nth-child(3) { height: 100vh; display: table; z-index: 3; }

.section2 section h2 { font-weight: lighter; font-size: 280%; text-transform: uppercase; text-align: center; font-family: 'ArenqRomanpro'; }
.section2 section p { text-align: center; font-size: 78%; max-width: 900px; margin: 0 auto; }

.section2 section:nth-child(1) { color: #314a0f; }
.section2 section:nth-child(2) { color: #f29971; }
.section2 section:nth-child(3) { color: #135152; }

.inside { display: table-cell; vertical-align: middle; }

.bg1 { background-color: #cee3b2; z-index: -5; width: 101%; height: 100%; position: absolute; }
.bg2 { background-color: #135152; z-index: -4; width: 101%; height: 100%; position: absolute; }
.bg3 { background-color: #fedfa0; z-index: -3; width: 101%; height: 100%; position: absolute; }



.title { display: table; margin: auto; width: 100%; }
    .title .titleObj { position: absolute; width: 100%; }


.p { display: table; margin: auto; width: 100%; }
    .p .pObj { position: absolute; width: 100%; }

.imgList { display: table; height: 390px; width: 100%; max-width: 1000px; margin: auto; font-size: 0; margin-bottom: 50px; margin-top: 50px; padding: 100px 0 0 0; }


    .imgList .obj { width: 25%; display: inline-block; }
.obj .objimg { width: 25%; max-width: 230px; height: auto; position: absolute; }
    .obj .objimg img { width: 90%; margin: 5% auto; display: block; }


/* //////////////////////////////////////////////////////////////////////
//  03 - SECTION 3
//////////////////////////////////////////////////////////////////////*/

.textOverparallax { max-width: 450px; position: absolute; }
.section3 { background-color: #ffe09c; height: 100vh; width: 100%; position: relative; color: #fff; overflow: hidden; }
    .section3 .textOverparallax { z-index: 16; left: 0; max-width: 100%; width: 100%; bottom: 10%; height: 158px; }
        .section3 .textOverparallax .InnerTextOverparallax { max-width: 1170px; margin: 0 auto; position: absolute; width: 100%; left: 50%; transform: translateX(-50%); }

        .section3 .textOverparallax h1 { text-align: left; font-size: 280%; text-transform: uppercase; font-family: 'ArenqRomanpro'; margin-bottom: 20px; }
        .section3 .textOverparallax p { }
        .section3 .textOverparallax p { max-width: 765px; font-size: 78%; }
.parallax-window { background-size: cover; background-position: center center; width: 100%; height: 100vh; }

/* //////////////////////////////////////////////////////////////////////
//  03 - SECTION 4
//////////////////////////////////////////////////////////////////////*/
.section4 { height: 100vh; width: 100%; position: relative; overflow: hidden; }
    .section4 .container { width: 100%; height: 100vh; overflow: hidden; padding: 0px; }
    .section4 .triggerSection { height: 100vh; width: 100%; }
    .section4 .parallax-window { z-index: 2 }
    .section4 .parallax-window2 { z-index: 1 }


.section4 { height: 100vh; color: #fff; position: relative; }
    .section4 section:nth-child(1) .inside { height: 405px; position: relative; vertical-align: middle; top: 90px; }
    .section4 section:nth-child(1) .title { display: table; height: 405px; }
    .section4 section:nth-child(1) .subtitle { height: 75px; margin-top: 30px; }
    .section4 section:nth-child(1) .sectiontitle { position: unset; }
    .section4 section:nth-child(2) { z-index: 5; }
    .section4 section:nth-child(3) { height: 100vh; display: table; z-index: 4; }

    .section4 section h1 { letter-spacing: 12px; text-transform: capitalize; font-size: 24px; font-family: inherit; margin: 0 auto 30px; max-width: 950px; padding: 0 10px; }
    .section4 section h2 { font-weight: lighter; text-transform: uppercase; text-align: left; font-size: 680%; font-family: 'ArenqRomanpro'; width: 100%; max-width: 950px; padding: 0 10px; margin: 0 auto; line-height: 0.9; }
    .section4 section .para { font-size: 105%; width: 100%; max-width: 950px; margin: 0 auto; text-align: left; padding: 0 10px; padding-right: 90px; }
        .section4 section .para:nth-child(2) { margin-top: 20px; }

    .section4 section:nth-child(2) .sectiontitle { bottom: 38.5%; }
    .section4 section:nth-child(2) .subtitleObj { bottom: 10%; bottom: calc(36% - 244px); }
    .section4 section:nth-child(3) .sectiontitle { bottom: 10%; }
    .section4 section:nth-child(3) .subtitleObj { bottom: 140px; text-align: left; }
    .section4 section:nth-child(3) h3, .section4 section:nth-child(3) h4 { max-width: 930px; margin: 10px auto 0; padding-right: 490px; padding-left: 299px; }
    .section4 section:nth-child(3) h4 { font-size: 75%; }
    .section4 .subtitleObj { position: absolute; text-align: center; width: 100%; }

    .section4 section:nth-child(3) h2 { padding-right: 40px; margin-bottom: 33px; }
.sectiontitle { position: absolute; width: 100%; }


.section-4-bg { background-color: #000; z-index: -5; width: 101%; height: 100%; position: absolute; top: 0; background-size: cover; }
.sectionText { display: table; height: 100%; width: 100%; position: absolute; margin-bottom: 0; background-color: transparent; border: none; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; }

@media(max-width:1440px) and (min-width:1025px) {
    .section4 section:nth-child(1) .inside { bottom: 10px; }
    .section4 section h2 { font-size: 500%; }
    .section4 section:nth-child(2) .subtitleObj { bottom: 5%; }
    .section4 section:nth-child(2) .sectiontitle { bottom: calc(10% + 222px); }
}


.wrapper-mobile { }
    .wrapper-mobile:before { content: ""; background-color: #000; position: fixed; width: 100vw; height: 100vh; top: 0; background-size: 151vh; background-position: -17vh 66px; }
.section-m-text { position: absolute; top: 50%; transform: translateY(-50%); padding: 0 4vw; }
.section-m { height: calc(100vh - 66px); position: relative; background-size: cover; background-position: center; text-align: center; }
    .section-m h2 { font-size: 11vw; font-family: 'ArenqRomanpro'; margin: 15px 0; }
    .section-m p { font-size: 4vw; }


.section1-m { height: 100vh; }
    .section1-m:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); }
    .section1-m img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 33px; max-width: 70%; }

.section2-m { background-color: #cee3b2; }
    .section2-m p { color: #314a0f; }
.top-img-m, .bottom-img-m { height: 33.33%; width: 100%; position: relative; }
.section2-m .middle-m-text { height: 33.33%; padding: 0 4vw; }
.section2-m .bottom-img-m img, .section2-m .top-img-m img { position: absolute; max-width: 50%; max-height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); }


.section3-m { color: #fff; }
    .section3-m .section-m-text { top: auto; bottom: 20px; transform: none; text-align: left; }

.section4-m,
.section5-m,
.section6-m { color: #fff; text-align: left; }
