/*
 Theme Name:   UNIQVUE
 Description:  bootscore Child theme for uniquevue.de
 Author:       bootScore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      0.1
 Text Domain:  bootscore
*/

/* 
All style editing is done via scss/_bscore_custom.scss
*/


/* VARS */

:root{

    --svg: url('data:image/svg+xml,\
            <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 231.66 181.56" fill="#fff"><path d="m196,0c-10.83,0-16.43,1.79-21.44,6.8-5,5.01-6.98,10.87-6.98,21.61v10.91c-.22,17.44-3.02,29.28-10.54,40.14-8.91,12.87-22.96,18.54-41.21,18.54s-32.3-5.68-41.21-18.54c-7.52-10.86-10.32-22.71-10.54-40.14v-10.91c0-10.73-1.97-16.59-6.98-21.61S46.49,0,35.66,0H0l115.83,181.56L231.66,0h-35.66Z" /></svg>'
    );

    /* colors & alpha */

    --black: 0, 0, 0; /* */
    --white: 255, 255, 255; /* */
    --grey_light: 138, 149, 166; /* */
    --grey_medium: 74, 80, 89; /* */
    --grey_dark: 20, 20, 20; /* */
    --accent: 130, 112, 128; /* */
    --alpha_max: 1;
    --alpha_med: .5;
    --alpha_min: .25;
    --phi: 1.618;
    --phi2: calc(var(--phi) * var(--phi));
    --oneminusphi: calc(1 - var(--phy));

    --font-size--base: 1.1em;

    --font-size--h1: calc(1.68888 * var(--font-size--base));
    --font-size--h2: calc(1.57777 * var(--font-size--base));
    --font-size--h3: calc(1.46666 * var(--font-size--base)); /* 0.66666 */
    --font-size--h4: calc(1.35555 * var(--font-size--base)); /* 0.55555 */
    --font-size--h5: calc(1.3 * var(--font-size--base)); /* 0.5 */
    --font-size--h6: calc(1.24444 * var(--font-size--base)); /* 0.44444 */

    --font-size--smaller: calc(0.88888 * var(--font-size--base));
    --font-size--small: calc(0.83333 * var(--font-size--base));
    --font-size--smallest: calc(0.72222 * var(--font-size--base));

    font-size: var(--font-size--base);

}

/* IMPORT FONTS "Gopher" & "Be Vietnam Pro" */


/*@import url("https://use.typekit.net/bhu0joo.css");
/*@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/


/* TYPOGRAPHY & COLORS*/

h1, h2, h3, h4, h5, h6 {
    font-family: 'gopher', sans-serif;
    font-weight: 200;
    font-style: normal;
    color: rgba(var(--white), var(--alpha_max));
    padding-bottom: 1.2em;
}

h1 { 
    font-size: var(--font-size--h1);
}
h2 {
    font-size: var(--font-size--h2);
}
h3 {
    font-size: var(--font-size--h3);
}
h4 {
    font-size: var(--font-size--h4);
}
h5 {
    font-size: var(--font-size--h5);
}
h6 {
    font-size: var(--font-size--h6);
}
body::-webkit-scrollbar {
    display: none;
}

body {
    background: rgba(var(--black), var(--alpha_max));
    color: rgba(var(--white), var(--alpha_max));
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

html {
}

::selection {
  background: rgba(var(--accent), var(--alpha_med));
  colro: rgba(var(--black), var(--alpha_max));
}

p {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 100;
    font-style: normal;
    line-height: 1.61em;
}

/* NAVIGATION */

.nav-link {
    font-size: var(--font-size--smallest) !important;
    font-weight: 100;
}
.menuspacer, .menuspacer:hover {
    color: rgba(var(--white), var(--alpha_max));
    cursor: pointer;
}

a {
    color: rgba(var(--white), var(--alpha_max));
    text-decoration: underline;
}
a.nav-link {
    color: rgba(var(--white), var(--alpha_max));
    text-decoration: none;
    font-size: calc(var(--rem) / var(--phi));
}
a:visited, a:visited.nav-link {
    color: rgba(var(--white), var(--alpha_max)); 
}
a:hover, a:hover.nav-link {
    color: rgba(var(--accent), var(--alpha_max)); 
}
a:focus, a:focus.nav-link {
    color: rgba(var(--accent), var(--alpha_max)); 
}
a:active, a:active.nav-link {
    color: rgba(var(--accent), var(--alpha_max)); 
}

/* MOBILE NAV */

.offcanvas-header, .offcanvas {
    background: rgba(var(--black), var(--alpha_max)) !important;
    color: rgba(var(--white), var(--alpha_max));
}

.offcanvas-header .btn-close {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
    width: .3em;
    background-repeat: no-repeat !important;
    position: absolute;
    right: 2em;
    top: 1.5em;
}

.btn-outline-secondary {
    color: rgba(var(--white), var(--alpha_max));
    border: 1px solid rgba(var(--white), var(--alpha_max));
    border-radius: 0px;
}
.btn-outline-secondary:hover {
    color: rgba(var(--black), var(--alpha_max));
    border: 1px solid rgba(var(--white), var(--alpha_max));
    border-radius: 0px;
    background-color: rgba(var(--white), var(--alpha_max));
}

/* THINGS */

.logo {
    height: 1.8em;
}

/* STRUCTURE */

.navbar > .container-fluid {
    padding: 1em 5% 1em 5%;
}

.navbar {
        border-bottom: 2px solid #202020;

}

.fixed-top {
    background-color: rgba(var(--black), var(--alpha_max));
}

.site-content, #video .container, #parallax .container {
    width: 100%;
    max-width: 100%;
    --bs-gutter-x: 0 !important;
    padding: 0 !important;
}

.container {
    padding: 2em 5em;
}


/* VIDEO */
#video video {
    width: 100vw;
    height: auto;
    position: relative;
    display: inline-block;

}

#video figure {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: -1em;
    background: transparent;
}

.video-next {
    position: absolute;
    top: 80%;
    margin: 0 auto;
    width: auto;
}

.video svg {
    width: 1.2em;
    height: 1.95em;
}

.video-next {
    cursor: help;
}

@media (max-width: 768px){
    #video video{
        width: auto;
        height: 100vh;
        left: -50%;
    }
}

/* IMAGE/COPY */

.container-fluid .row #content {
    padding: 5%;
}
/* PARALLAX */

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
    transition: all 2s;
    text-align: center;
    min-height: 110vh;
}

.parallax .row {
    height: 100vh;
}

.parallax h1 {
    text-shadow: 1px 1px 4px rgba(var(--black), var(--alpha_max));
}

.parallax svg {
    width: 2em;
}

.parallax-next {
    cursor: help;
    z-index: 5;
    position: relative !important;
}

/* FULL IMAGE */

.full-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
    transition: all 2s;
    text-align: center;
    /*z-index: -1;*/
    min-height: 100vh;
}

.full-image .row {
    height: 100vh;
}


/* news */

.news-nav-buttons {
    text-align: center;
    margin-top: 0;
}

.news-nav-buttons button {
    padding: .5em;
    margin: 1em;
    text-align: center;
    width: auto;
}

.news {
    padding: 2em !important;
}

.news h4 {
    margin: 1em 0 .6em 0;
    padding: 0;
}

.news .col-12 {
    min-height: 42em;
}

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

/* image right hack */

.image-right .row {
    flex-wrap: wrap-reverse !important;
}

/* form */

#contact-form input, #contact-form textarea, .btn-primary {
    background-color: transparent;
    color: #fff;
    border: 1px solid white;
    border-radius: 0px;
}

.btn-primary svg {
    width: 2em;
    height: 2.749em;
}

.btn-primary:hover, .btn-primary:active, .top-button:hover, .top-button:active {
    background-color: rgba(var(--accent), var(--alpha_max)) !important;
    border-color: rgba(var(--accent), var(--alpha_max)) !important;
}
.btn-primary:hover svg {
}



#kontakt {
    padding: 5%;
}

.image-left, .image-right, .news {
    padding: 5% 0;
}

/* DIALOG STUFF */

.read-more-dialog-open {
    float: left;
    clear: both;
    margin-top: 1em;
}

dialog {
    width: 100%;
    height: 100%;
    padding: 5%;
    background-color: rgba(var(--black), var(--alpha_max));
    color: rgba(var(--white), var(--alpha_max));
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    border: 1px solid rgba(var(--white), var(--alpha_max));
}

@media(max-width: 1024px){
    .parallax > .container, .full-image > .container {
        padding: 1em;
    }
    .parallax h1, .full-image h1 {
        font-size: var(--font-size--h6);
    }
}

dialog[open] {
    -webkit-animation: show 1s ease normal;
}
@-webkit-keyframes show{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bootscore-footer {
    display: none;
}

.bootscore-info {
    border-top: 2px solid rgba(var(--grey_dark), var(--alpha_max)) !important;
    background: rgba(var(--black), var(--alpha_max)) !important;
}

/* PARTICLES PARALLAX */

canvas {
    display: block;
    vertical-align: bottom;
} 
/* ---- particles.js container ---- */ 
.particles-js {
    position:fixed;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 1;
    top: 0;
    left: 0;
}

.news, .image-left, .image-right, .image, .contact, .video {
    background: rgba(var(--black), var(--alpha_max));
    z-index: 20;
    position:relative;
}

footer {
    z-index: 10;
}

.full-image .content, .parallax .content {
}

.top-button {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.top-button svg {
    width: 2em;
    height: 2.8em;
    transform: rotate(180deg);
}

::placeholder {
    color: rgba(var(--white), var(--alpha_max)) !important;
    opacity: 1 !important;
}

.form-control:focus {
    border-color: rgba(var(--accent), var(--alpha_max)) !important;
    box-shadow: 0 0 0 0 !important;
}

@media (max-width: 991px){
    #menu-item-12149 {
        display: none;
    }
}

#news img {
    border: 1px solid rgba(var(--white), var(--alpha_max));
    filter: none;
    transition: filter 1s;
}
#news img:hover + .overlay, #news .overlay:hover {
    opacity: 1;
    transition: opacity 1s;
}

#news a:hover > img {
    filter: grayscale(1) brightness(.33);
    transition: filter 1s;
}
#news a:hover > svg {
    opacity: 1;
    transition: opacity;
}

#news .overlay {
    opacity: 0;
    transition: opacity 1s;
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
}

#news .overlay svg {
    width: 33%;
    margin:0 auto;
    position: relative;
    left: 33%;
    top: 33%;
}