/**CUSTOMSTART------------------ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700');
@import url('https://fonts.googleapis.com/css2?family=Almendra+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');




body {
    background-color: #fff;
    color: #fff;
    background-image: url("https://freight.cargo.site/t/original/i/5d90643d1c56130dfd9cc010c58031c0b497cc30e4e265822c7590b5bbe3b185/3d-wireframe-grid-room-3d-perspective-laser-grid-16-9-cyberspace-white-background-with-black-mesh-futuristic-digital-hallway-space-in-virtual-2H5PJBF-1.jpg");
    ZZbackground-image: url("https://test.ftkbh.dk/bg.jpg") !important;
    background-image: url("https://freight.cargo.site/t/original/i/ca4ea5c8245b82e257bcb17f90f6e06924259f1ed38480610dcc7feecc1eac6b/3d-wireframe-grid-room-3d-perspective-laser-grid-16-9-cyberspace-white-background-with-black-mesh-futuristic-digital-hallway-space-in-virtual-2H5PJBF.jpg");
    background-image: url("https://freight.cargo.site/t/original/i/ca4ea5c8245b82e257bcb17f90f6e06924259f1ed38480610dcc7feecc1eac6b/3d-wireframe-grid-room-3d-perspective-laser-grid-16-9-cyberspace-white-background-with-black-mesh-futuristic-digital-hallway-space-in-virtual-2H5PJBF.jpg");
    background-size: cover !important;
    background-attachment: fixed !important;
    Zbackground-position-y: -20vw;
}

div[thumbnails] {
    margin-left: 0vw !important;
    align-items: center;
    justify-content: center !important;
}

.thumbnail {
    padding: 0vw min(150px, 10vw) !important;
    Zborder: 2px solid gray;
    margin-top: 0vh;
    max-width:500px;
}




/* * {
    animation: opacity_anim 200ms ease-in-out;
} */

.content_container .page_content div[grid-row] div[grid-col]:nth-child(2) {
    background: transparent;
    padding: 5px !important;
    border-top: 0px solid black;
}

[grid-col] {
    Zpadding: 0px !important;
}

div[grid-col]:first-child img {
    zwidth: 80% !important;
    zheight: 80% !important;
    zbox-shadow: 10px 10px;
}

div[grid-col]:first-child > img:first-child {
    width: 60% !important;
    height: 60% !important;
    margin-left: 20%;
    margin-top: 4vw;
    margin-bottom: 4vw;
    box-shadow: 0px 0px 10px #000;
}

.pinned_top {
    height: 0px;
    opacity: 1;
    ZZZmix-blend-mode: overlay;
    z-index: 9999;
}

.pinned_top h1 {
    font-size: 5vw !important;
    line-height: 12vw !important;
}

.pinned_top h2 {
    font-size: 2vw !important;
    line-height: 0vw !important;
    margin-top: 0vw !important;
}

[data-view=Thumbnail] {
    cursor: pointer;
}


.thumbnail {
    height: 33vh;
}

.thumbnail > a {
    display: flex !important;
    height: 100%;
    align-items: center;
}

[data-view=Thumbnail] img {
    cursor: pointer;
    z-index: -1;
    position: relative;
    transform: rotateY(0deg);
    filter: drop-shadow(0px 0px 80px #fffd82);
}



[data-view=Thumbnail] a {
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
}


[data-view=Thumbnail] a:hover {
    transform: scale(1.2); 
}


[href="dfc"] img, [href="/dfc"] img {
    animation: rotateAnimation 5s ease-in-out infinite;
    border: 2px solid black;
    background: white;
} 

@keyframes rotateAnimation {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0px) rotateY(0deg);
    }
    35% {
        transform: translateX(0px) rotateY(20deg);
    }
    65% {
        transform: translateX(0px) rotateY(-20deg);
    }

}

[href="/tdsp"] img {
    /*
    height: 110% !important;
    */
    /*
    border: 5px solid white;
    */
}

[href="/tsp"] img, [href="tsp"] img {
    width: 150% !important;
    margin-left: -25%;
    margin-top: -18%; 
}

.animate {
    opacity: 1 !important;
    animation: larger 1000ms ease-in-out !important;
}

[href="/tdsp"] .animate {
    opacity: 1 !important;
    animation: smaller 1000ms ease-in-out !important;
}

.transition_filter {
    animation: opacity_anim 900ms ease-in-out;
    position: fixed;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.transition_yellow {
    background-color: white !important;
    background: linear-gradient(180deg, rgba(251, 255, 0, 1) 0%, rgba(255, 255, 255, 1) 20%) !important;
}

.transition_red {
    background-color: #C0393A !important;
}

.transition_orange {
    background-color: #EB672B !important;
}

.transition_green {
    background-color: #8CFB73 !important;
}


@keyframes larger {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(40);
    }
}

@keyframes smaller {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.2);
    }
}

@keyframes opacity_anim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.anim_large img {
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    opacity: 1 !important;
}

.content_container bodycopy {
    background: transparent;
}


.thumb_image {
    perspective: 350px;
}

.thumbnails_width {
    padding: 2.5vw 0vw;
}

.modal {
    background: white;
    width: 80vw;
    margin-left: 10vw;
    margin-top: 5vw;
    padding: 2vw 5vw 1vw 5vw;
    box-shadow: 0px 0px 1500px #fff567, 0 0 2vw #00000020;
    font-weight: 300;
    font-size: 0.9em;
    overflow: auto;
    background-color: #ffffff;
    opacity: 1;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #f6f6f6 0, #ffffff 1px, #ffffff 0, #ffffff 50%); 
}

.modal img {
    float: left;
    margin: 0 2vw 2vw 0;
    box-shadow: 5px 5px;
}

.modal h2 {
    text-align: center;
    border-bottom: 2px dotted #c8c8c8;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 0px;
    margin-bottom: 2vw;
}

.modal p {
    line-height: 1.6;
}

.modal span {
    background: white;
    padding: 10px;
}


.site_links {
    position: fixed; 
    width: 100%;
    display: flex;
    background: white;
    padding: 0.2vw 1vw;
    font-size: min(16px,3.3vw);
    box-shadow: 0px 0px 50vh #fff643;
}


.site_links a {
    position: relative !important;
    color: black !important;
    font-weight: 400;
    flex: 1;
    letter-spacing: 0.6vw;
    text-align: center;
}

.logo_container {
    margin-top: 2vw !important;
    display: block;
}


/*

.site_links .about {
    top:1vw;
    left:3vw;
}

.site_links .socials {
    top:1vw;
    right:3vw;
}

.site_links .press {
    top: 50vh;
    left: 3vw;
    transform: rotate(-90deg);
    transform-origin: left;
    display: none;
}

.site_links .contact {
    bottom: 2vw;
    right: 3vw;
}

.site_links .another {
    bottom: 2vw;
    left: 3vw;
}


.site_links .cv {
    top: 48vh;
    right: 3vw;
    transform: rotate(90deg);
    transform-origin: right;
    display: none;
}
*/


.content_padding {
    padding: 0px !important;
}


.logotext, .logosub {
    display: block;
}

/* .logo_container *, .logo_container{
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
}*/

/** {
    transition-property: all;
    transition-duration: 0.3s;
    transition-delay: 0s;
}*/

.logosub {
    margin-top: -2vw;
}


.thumbnails .tags {
    width: 100%;
    width:200%;
    margin-left:-50%;
    text-align: center;
    margin-top: max(-25px,-8.5vh) !important;
    /* transform: rotate(90deg);
    margin-right: max(-220px,-15vw);
    margin-top: max(-160px,-20vh) !important; */
} 

.thumbnails .tags a {
    border-bottom: 0;
    color: rgba(0, 0, 0, 0.85);
    text-decoration: none;
    font-weight: bold;
    display: block;
    font-size: min(15px,1.5vw) !important;
    line-height: 2.4vh;
    background:black;
    color:white;
    display:inline;
    padding:0 4px;
    filter:invert(1);
}

#canvas {
    width: 7vw;
    height: 7vw;
    position: fixed;
    top: 4vh;
    right: 2vh;
    z-index: 99999999 !important;
}


.bottom_ticker {
    position: absolute;
    width: 100%;
    height: 1.8vw;
    background: white;
    bottom: 0px;
    padding: 0vw;
    padding-top:3px;
    box-shadow: 0 0 50px #b6ebff;
}

.bottom_ticker span {
    white-space: nowrap;
    animation: scrollLeft 100s linear infinite; /* Apply the animation */
    display: inline-block;
    font-size: 1.2vw;  
}

@keyframes scrollLeft {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}


@keyframes opacity_anim2 {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
    }
}

#wholepagefilter {
    position: absolute;
    width: 100%;
    height: 100%;
    background: blue;
    mix-blend-mode: screen;
    z-index: 999999999999999999;
    pointer-events: none;
    opacity: 0;
    animation: opacity_anim2 1000ms ease-in-out;
    transition-property: all;
    transition-duration: 10s;
    transition-delay: 0s;
    display: none;
}




/* SUBPAGESTYLING */


.main_presentation {
    margin-left: 12vw;
    width: 76vw;
    }

/*.page_container {
    transition-property: all;
    transition-duration: 2s;
    transition-delay: 0s;
}
*/


/* .logotext canvas{
background:white;
} */

.main_presentation img{
margin-left:10%;
border:10px solid white;
position:relative;
float:left;
}

.main_presentation h1 {
    letter-spacing: -0.1vw;
    text-transform: uppercase;
    /* background: -webkit-linear-gradient(#ff0000, #ff3a41);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* font-family: cursive; */
    font-size: 3vw !IMPORTANT;
    text-align: center;
    padding: 1vw 2vw;
margin:1vw 0vw 0vw 0vw !important;    }
    
    .main_presentation .flex_container {
      display: flex;
  justify-content: space-between; }
    
    /* .main_presentation h1:after {
  content: "The Doggy Style project";
  position: absolute;
  left: 0px;
  top: 0px;
  color: transparent;
  text-shadow: 0px 20px 30px rgba(255, 255, 255, 0.91);
} */

.main_presentation h2, .main_presentation h1 {

}

.main_presentation .presentation_box_wide h1 {
    font-size:3vw !important;
    margin:0px !important; 
    padding-top:0px !important;
} 

.main_presentation ul li{
margin-bottom:5px;
}

.presentation_box, .presentation_box_wide {
    box-shadow: 0 0 30px #00000021;
    text-align: left !important;
    margin-bottom:2vh;
}

.presentation_box_wide {
    margin-bottom:5vh !important;
}



.main_presentation .presentation_box, .presentation_box_wide {
    background-color: white;
    float: left;
    padding: 1vw !IMPORTANT;
    background-color: #e5e5f7;
    opacity: 1;
    background-color: white;
    width: 49%;
    float: left;
    background-color: #e5e5f7;
    background-color: #ffffff;
    background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 10px ), repeating-linear-gradient( #f1f1f155, #f1f1f1 );
    font-size: min(max(12px, 1.2vw), 22px);
}

.presentation_box_wide {
    width: 70% !important;
    float: left;
    margin-left: 10%;
    margin: 0vw 4vw;
    margin-left: 15%;
    margin-top: 10vh;
}

.presentation_box:nth-child(2) { margin-right:1vw; }
.presentation_box:last-child { margin-right:0vw; }


.main_presentation .presentation_box p {
font-size:1.1em;

}

.main_presentation ul {
padding:0 1vw !important;
list-style-type:none;}

.main_presentation video  {
width:100% !important;
height: auto !important;
}

 .main_presentation img  {
    width:100% !important;
    height: auto !important;
    float:left;
    margin:0vw 0.5vw 0.5vw 0 !important;
    
}
 
.support {    
margin-left: 12vw;
    width: 76vw;}

.support img {
    width: 100% !important;
    height:auto !important;
    margin-top: 0vh !important;
    margin-bottom: 0vh !important;
}

body {
ZZbackground-image:url('https://freight.cargo.site/t/original/i/c12879b6892d65e752912621bad67ec356463797a53e8f73f58fc0b26c6bdfa9/a_simple_clean_3d_render_of_a_wireframe_white_cube_theater_room__stagelights__neon_colours_1895935283.png');
    background-size: cover;
    background-position:center;

}

/* So that for example a big single image dropped on the subpages gets centered */
.page_content {
    text-align:center !important;
}



.page_content > img {
    margin:4vh 0 4vh 0;
}


/* Breakpoint fixes */

[grid-col=x12] {
    width: 50%;
}


.mobile .site_links {
    position: fixed;
    width: 100%;
    display: flex;
    background: white;
    padding: 2vw 1vw;
    font-size: 3.1vw;
    box-shadow: 0px 0px 50vh #fff643;
}

.mobile .logotext {
    height:20vh;
    position:absolute;
    width: 100%;
    margin-left:0%;
}

.mobile .logosub {
    margin-top: 10vw;
}

.mobile .content_container {
    width: 100%;
    margin-top: 12vw;
}

.mobile .logotext canvas {
    width:90% !important;
    height:auto !important;
}

/* #canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 2vh;
    right: 1vh;
    z-index: 99999999 !important;
} */


.mobile .logosub canvas {
    margin-top: 8vh;
    height: auto !important;
    /* fix for canvas not centering correctly, or text not being 100% of width of canvas, blotter quirk? */
    width: 90% !important; 
    margin-left: ;
}

.mobile .thumbnail {
    height: 23vh;
}

.mobile .thumbnails {
    margin-top: max(-40px, -30vw);  
}

.mobile .tags a {
    font-size: min(20px,2.5vw) !important;
}

.mobile .content_container .page_container {
padding-top:15vh !important;
}

.mobile .main_presentation, .mobile .support {
    margin-left: 4vw;
    width: 92vw;
}

.mobile .main_presentation h1 
{font-size: 8vw !important;}

.mobile .presentation_box_wide {
    width: 100% !important;
    margin-left:0px !important;
    
}

.mobile .presentation_box, .mobile .presentation_box_wide {
    box-shadow: 0 0 10px #acacac4d !important;
}

.mobile .bottom_ticker {

    height: 3vh;
 
}

.mobile .bottom_ticker span{

    font-size: 4vw !important;
 
}


.mobile #canvas {
    width: 15vw;
    height: 15vw;
    position: fixed;
    bottom: 4vh !important;
    top:auto !important;
    right: 2vh !important;
    z-index: 99999999 !important;
}


/* for the mobile but wide */

@media screen and (min-width: 521px) {
    .mobile .logotext canvas {
        width: 70% !important;
        height: auto !important;
    }

    .mobile .logosub canvas {
        margin-top: 10vh;
        height: auto !important;
        width: 70% !important;
        margin-left: ;
    }

    .mobile.full_width [data-view=Thumbnail] .thumbnails_width {
        width: 70%;
        margin-left: 15%;
    }
  }