@font-face {
  font-family: 'Nootype';
  src: url('/fonts/Nootype-Radikal-Light.eot');
  src: url('/fonts/Nootype-Radikal-Light.woff2') format('woff2'),
       url('/fonts/Nootype-Radikal-Light.ttf') format('truetype'),
       url('/fonts/Nootype-Radikal-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Radikal-Light';
  src: url('/fonts/Radikal-Light.woff') format('woff'),
       url('/fonts/Radikal-Light.ttf') format('truetype'),
       url('/fonts/Radikal-Light.svg#Radikal-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

.nooble {
    font-family: Nootype;
    font-size:13px;
}

body {
    background: #fff;
    font-family: 'Marine Regular';
    font-size:14px;
    font-style:normal;
    font-weight:400;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    color:#3f2e1e;
}

.full-overlay {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    display:none;
    background:rgba(0,0,0,0.8);
}

.overlay {
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
    z-index:100000;
    position:absolute;
    left:2em;
    top:5.2em;
    right:2em;
    bottom:5em;
    border:solid 2px #000;
    box-shadow:1px 1px 10px #333;
    background:#000;
    box-shadow:inset 1px 1px 10px #fff;
}

.close-overlay {
    position:absolute;
    z-index:100001;
    left:2em;
    bottom:3em;
    background:rgba(255,255,255,0.9);
    border:solid 2px #000;
    border-radius:50%;
    width:30px;
    font-size:20px;
    height:30px;
    text-align:center;
    cursor:pointer;
    color:#000;
}


.hand-move {
    position:absolute;
    top:40vh;
    left:45vw;
    z-index:4000;
    x-transition: all 2s ease-in-out;
    animation: ani 3.7s infinite;
    display:none;
}

@keyframes ani {
  0% {
    left: 30%;
  }
  50% {
    left: 60%;
  }
  100% {
    left: 30%;
  }
}

.arrow-up {
    position:absolute;
    bottom:2vh;
    left:45vw;
    z-index:4000;
    opacity:.6;
}

.arrow-down {
    position:absolute;
    bottom:2vh;
    left:55vw;
    z-index:4000;
    opacity:.6;
}


.arrow1 {
    position:absolute;
    top:30vh;
    left:46vw;
    z-index:4000;
    opacity:.6;
    pointer-events: auto;
    display:block;
}

.arrow2 {
    position:absolute;
    bottom:10vh;
    left:46vw;
    z-index:4000;
    opacity:.6;
    pointer-events: auto;
    display:block;
}

.arrow1:hover, .arrow2:hover {
    display:none;
}

@media only screen and (min-width: 800px) {

    .arrow1 {
        display:none;
    }

    .arrow2 {
        display:none;
    }

}

.fpTop {
    max-height:120px;
    padding-top:20px;
}

a {
    color:#444;
}

.fp-slidesNav ul li a span {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    height: 4px;
    width: 4px;
    border: 0;
    background: #998C7F !important;
    left: 50%;
    top: 50%;
    margin: -2px 0 0 -2px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

header {
    position:absolute;
    top:2.6vh;
    left:calc(2vw + 30px);
    right:calc(1.8vh);
}

.header-box {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    z-index:1000;
}

.header-box a:hover {
    text-decoration: none;
}
.kontakt {
    cursor:pointer;
    padding-right:1em;
}

.kontakt-white {
    display:none;
}


.fixed-logo {
    background:none;
    z-index:10000;
    height:100px;
}

.logo-box {
    position:relative;
}

.mini-logo {
    max-width:160px;
    z-index:20000;
    font-size:14px;
    cursor:pointer;
}

.mini-kontakt {
    max-width:160px;
    z-index:20000;
    display:none;
}

.kontakt-text {
    display:none;
}

.obj-white {
    display:none;
}



.gridBox {
    height:100vh;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto 100px;
    grid-row-gap: 10px;
    justify-content: center;
    justify-items:center;
}

@media only screen and (max-height : 800px)
{
    .gridBox {
        height:100vh;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 130px auto 100px;
        grid-row-gap: 10px;
        justify-content: center;
        justify-items:center;
    }
}

@media only screen and (max-width: 1000px)
{
    .fp-image {
        display:block;
    }

    .fullBG {
        /*
        width:100%;
        height:100vh;
        overflow-x: scroll;
        overflow-y: hidden;
        background-size:contain;
        */
    }
}


@media only screen and (min-width: 1000px)
{
    .fullBG {
        /*
        width:100vw;
        height:100vh;
        overflow:none !important;
        background-size:100%;

        outline:dotted 3px #900;
        */
    }

    .fp-image {
        display:none;
    }
}

.gridBox div {
    align-self: end;
}

.gridBox div:nth-child(2) {
    align-self:center;
    place-self: center;
    justify-items: stretch;
}

.gridBox div:nth-child(3) {
    align-self: start;
}

.main-foto-desktop {
    width:90%;
}

.name-logo {
    width:auto;
}


#slider {
}

.leftBar {
    width:15px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    background:url(/gfx/newBack.png) repeat-y;
    z-index:100000;
}
.section {
    padding-left:12px;
    overflow: hidden;
    width:100vw;
    height:100vh;
    overflow:hidden;
    padding-left:15px;
    background:none;
}

.slide {
    position:relative;
}

.slide-logo { 
    position:static;
    z-index:10;
}



#moveSectionDown {
    z-index:100000;
    max-width:32px;
}

.slide-image {
    margin:0 auto;
    width:99vw;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
}

.slide-image img {
    max-width:100vw;
    max-height:100vh;
    margin:0 auto;
    text-align:center;
}


.slide-image-fs {
    margin:0 auto;
    width:auto;
    height:100vh;
    display: table-cell;
    vertical-align: middle;
}

.slide-image-fs img {
    margin:0 auto;
}


.text-white {
    color:#fff !important;
}

.slide-num {
    color: #28354d;
}

.slide-copyright-center {
    color:#998C7F;
    font-size:12px;
    left:0px;
    width:100%;
    text-align:center;
    bottom:10px;
    position:fixed;
    z-index:10;    
}

.slide-copyright {
    color:#998C7F;
    font-size:12px;
    right:10px;
    bottom:20px;
    position:fixed;
    z-index:10;
}

.footer-slide {
    text-align:center;
    font-size:16px;
}

.root-logo {
    text-align:center;
    margin:0 auto;
    padding-top:0;
    position:absolute;
    top:0px;
    padding-left:3%;
    padding-top:2%;
    width:100vw;
    background:#fff;
    display:table-cell;
    vertical-align:bottom;
    z-index:100;
}

.root-logo img {
    text-align:center;
    margin:0 auto;
    max-width:50%;
}

.root-img {
    object-fit: cover;
}

.root-img img {
    width:100%;
    object-fit: cover;
}

.root-image {
    width:100vw;
    background:#fff;
    position:absolute;
    bottom:0;
    left:0;
    z-index:10;
    margin-left:11px;
}

.root-image img {
    max-width:100vw;
    max-height:65vh;
    margin:0 auto;
}

.address {
    font-size:17px;
    color:#3f2e1e;
}

.arrow {
    width:40px;
    height:35px;
    font-size:27px;
    text-align:center;
    color:#3f2e1e !important;
    cursor:pointer;
}

.add-text {
    font-size:25px;
    color:#3f2e1e;
}

.main-foto-mobile {
    display:none;
}








/*Responsive Styles*/
@media only screen and (orientation: landscape)
{
}

/* Smartphones (portrait) ---------------- */
@media only screen 
and (max-width : 320px)
{

    .kontakt {
    }

    /* Add Your CSS Styling Here */
   .name-logo {
        max-width:80%;
        margin:0 auto;
    }

    .mini-logo {
        max-width:78px;
        left:30px;
    }
    
    .slide-copyright {
        right:10px;
        bottom:0px;
    }

    .kontakt img {
        max-width:80%;
    }

    .main-foto-mobile {
        display:block;
        width:60%;
        margin:0 auto;
    }

    .main-foto-desktop {
        display:none;
    }

    .fpTop {
        padding-top:60px;
    }

    .footer-name {
        font-size:12px;
    }
}

/* Smartphones (landscape) ---------------- */
@media only screen 
and (min-width : 321px)
and (max-width : 767px)
and (orientation : portrait)
{

    .kontakt {
    }


    /* Add Your CSS Styling Here */
   .name-logo {
        max-width:80%;
        margin:0 auto;
    }
    
    .fixed-logo {
        top:8px;

    }

    .mini-logo {
        max-width:100px;
        left:30px;
    }
    
    .slide-copyright {
        right:10px;
        bottom:0px;
    }

    .kontakt img {
        max-width:80%;
    }

    .main-foto-mobile {
        display:block;
        width:70%;
        margin:0 auto;
    }

    .main-foto-desktop {
        display:none;
    }

    .fpTop {
        padding-top:60px;
    }

    .footer-name {
        text-align:center;
        font-size:12px;
    }

}


@media only screen 
and (min-width : 321px)
and (max-width : 767px)
and (orientation : landscape)
{

    .kontakt {
    }

    /* Add Your CSS Styling Here */
   .name-logo {
        max-width:50%;
        justify-content: center;
        margin:0 auto;
    }

    .mini-logo {
        max-width:90px;
        left:30px;
    }
    
    .slide-copyright {
        right:25px;
        bottom:0px;
    }

    .kontakt img {
        max-width:80%;
    }

    .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px auto 50px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }
    
    .main-foto-desktop {
        display:block;
    }

    .main-foto-mobile {
        display:none;

    }

    .main-foto-desktop {
        width:70%;
        margin:0 auto;
    }

    .fpTop {
        padding-top:60px;
    }

    .footer-name {
        font-size:12px;
    }

}

/* Tablets (portrait) -------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
{

    .kontakt {
    }


    /* Add Your CSS Styling Here */
   .name-logo {
        max-width:80%;
        margin:0 auto;
    }

    .mini-logo {
        max-width:100px;
        left:30px;
    }
    
    .slide-copyright {
        right:10px;
        bottom:0px;
    }

    .kontakt img {
        max-width:80%;
    }

    .main-foto-mobile {
        display:block;
        width:90%;
        margin:0 auto;
    }

    .main-foto-desktop {
        display:none;
    }

    .fpTop {
        padding-top:60px;
    }

}


/* Tablets (landscape) ------------------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
{   
/* Add Your CSS Styling Here */
    .name-logo {
        max-width:40vw;
    }
}

/* Old Desktops and laptops ------------------ */
@media only screen 
and (min-width : 1025px) 
{
/* Add Your CSS Styling Here */
}

/* Desktops ------------------ */
@media only screen 
and (min-width : 1201px) 
{
/* Add Your CSS Styling Here */
}




/*** iPhone X ***/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}


@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { 

        .kontakt {
        }

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
           .kontakt {
        }

 
}

/*** iPhone 8 Plus ***/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) { 
}




@media only screen 
and (device-height : 320px) 
and (device-width : 568px) 
and (orientation : landscape) { 

   .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 90px auto 50px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }

}


@media only screen 
and (device-height : 360px) 
and (device-width : 640px) 
and (orientation : landscape) { 

   .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 60px 180px 40px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }

}


@media only screen 
and (device-height : 360px) 
and (device-width : 732px) 
and (orientation : landscape) { 

   .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 60px 180px 40px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }

}


@media only screen 
and (device-height : 412px) 
and (device-width : 732px) 
and (orientation : landscape) { 

   .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px auto 30px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }

}


@media only screen 
and (device-height : 360px) 
and (device-width : 640px) 
and (orientation : landscape) { 

   .gridBox {
        height:100vh;
        width:100vw;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 60px auto 30px;
        grid-row-gap: 2px;
        justify-content: center;
        justify-items:center;
        align-self: center;
    }

}