@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600&family=Open+Sans&family=Roboto+Flex:wght@300&family=Kalam:wght@300&family=Orbitron:wght@900&display=swap');

:root{
    
    --color-orange: rgb(255,140,3); /*#ff8d06*/
    --color-blue-txt: #0ce7ed;
    --color-dark-blue: #004f6f;
}

/*************************       REUSABLE CLASSES     ***********************/
.fullScreen{ width:100vw; height:100vh;}

.fullWidth{ width:100vw;}
.fullHeight{ height:100vH;}

.fullWidthP{ width:100%;}

.cwMaxW{max-width:1000px}
.cwMaxW2{max-width:1200px}
.twoXH{height:200vh;}
.threeXH{height:300vh;}
.fourXH{height:400vh;}
.fiveXH{height:500vh;}
.sixXH{height:600vh;}
.sevenXH{height:700vh;}
.eightXH{height:800vh;}

.inv{opacity:0;}
.hidden{opacity:0; visibility:hidden;}
.blur_backing{
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.dropShad_1{
    -webkit-filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .8));
    filter: drop-shadow( 1px 1px 1px rgba(0, 0, 0, .8));
    will-change: filter;
    backface-visibility: hidden;
    transform: translateZ(0.1px);
}

.dropShad_2{
    box-shadow: 5px 5px 20px #00000fcc;
}

.dropShad_3{
    -webkit-filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .8));
    filter: drop-shadow( 1px 1px 3px rgba(0, 0, 0, .8));
    will-change: filter;
    backface-visibility: hidden;
    transform: translateZ(0.1px);
}
.dropShad_4{
    -webkit-filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .8));
    filter: drop-shadow( 2px 2px 4px rgba(0, 0, 0, .8));
    will-change: filter;
    backface-visibility: hidden;
    transform: translateZ(0.1px);
}

.dropShad_5{
    -webkit-filter: drop-shadow( -2px 2px 4px rgba(0, 0, 0, .8));
    filter: drop-shadow( -2px 2px 4px rgba(0, 0, 0, .8));
}
.dropShad_6{
    -webkit-filter: drop-shadow( 1px 1px 0px rgba(0, 0, 0, .8));
    filter: drop-shadow( 1px 1px 0px rgba(0, 0, 0, .8));
}
.grid_container{
    display:grid;
    justify-items: center;
}
.h1_sec{
    font-family: 'Exo 2', sans-serif;
    font-size: 70px;
    margin-bottom: 0;
    color: white;
    font-weight:400;
}
.line_break_1{
    width:100%;
    border-bottom:2px solid var(--color-orange);
    border-top:2px solid var(--color-orange);
    height:3px;
    margin-top: 6px;
}
p.illuminated::first-letter{
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    float: left;
    font-size: 76px;
    color: var(--color-orange);
    margin-right: 8px;
    line-height: 1;
}
@-moz-document url-prefix() {p.illuminated::first-letter {margin-top: 10px;}}
.para_sec{
    
    font-family: 'Roboto Flex', sans-serif;
    font-size: 24px;
    color:var(--color-blue-txt);
    margin-top:40px;
    margin-bottom: 0;
    line-height: 1.6;
}
p.handwritten{
    font-family: 'Kalam', cursive;
    color:white;
    font-size:30px;
    margin-top:48px;
    text-align: center;
    max-width:1000px;
}

h4.handwritten{
    font-family: 'Kalam', cursive;
    color:white;
    font-size:26px;
    margin-top:48px;
    text-align: center;
}
a.close{
    position:fixed;
    top:10px;
    right:10px;
    width:50px;
    height:50px;
    background: url(../images/svgs/close.svg);
}
a.close:hover{ background: url(../images/svgs/close_white.svg);}
/****************************************************************************/

body{
    background-color:#14698c;
}
body.block_scrolling{
    overflow: hidden;
    touch-action:none;
    height:100%;
}
#header_strip{
    position:fixed;
    width:100vw;
    height:150px;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

/*#header_strip #strip_backing{
    position:absolute;
    left:-3vw;
    top:-20px;
    width:103vw;
    height:150px;
    background:linear-gradient(90deg, rgba(13,25,41,0.9) 10%, rgba(13,25,41,0) 20%);
    filter:blur(10px);
    opacity:0;
    transition: opacity 0.75s;
}*/
#header_strip{
    opacity:1;
    transition: opacity 0.75s; 
    pointer-events: none;
}
#header_strip.hide{
    opacity:0;
    transition: opacity 0.75s; 
}
#header_strip #strip_backing{
    position:absolute;
    left:80px;
    top:0px;
    width:180px;
    height:130px;
    background-color:rgba(13,25,41,0.7);
    filter:blur(10px);
    opacity:0;
    border-radius:90px;
    transition: opacity 0.75s;
}
#header_strip #strip_backing.needed{
     opacity:1;   
}
#header_strip #main_logo{
    position: absolute;
    padding: 20px 100px;
    height:90px;
    
}
/* **********************************************************************************************************/
#extras_tab{
    width: 30px;
    height: auto;
    border-radius: 6px 0px 0px 30px;
    background-color: var(--color-orange);
    position: fixed;
    top: 20vh;
    right: 0;
    opacity: 0;
    transition: opacity 0.75s;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    padding-top: 2px;
    padding-bottom: 30px;
}

#extras_tab .tab_items{
    width:26px;
    height:26px;
    border-radius:4px;
    background-color: white;
    overflow: hidden;
    cursor: pointer;
}
#extras_tab.show{opacity:1; transition: opacity 0.75s; }
#extras_tab .tab_items a{display:block; width:100%; height:100%}
#extras_tab .tab_items#facebook_link{background-image: url("../images/svgs/facebook_sq.svg");}
#extras_tab .tab_items#enquiry_but{background-image: url("../images/svgs/envelope.svg");}  
/* **********************************************************************************************************/
#hero_sec{
    background:url("../images/interface/hero_image_16_9.jpg");
    background-size: cover;
    background-position: right bottom;
    
    height:105vh;
}


#hero_txt_wrapper{
    color:#fff;
    padding:17vh 100px;
}

#hero_name{
    
    font-family: 'Exo 2', sans-serif;
    font-size: 60px;
    margin-bottom: 0;
    margin-top:0;
    line-height:0.8;
    font-weight:400;
    margin-left:-2px;
}
#hero_job{
    font-family: 'Roboto Flex', sans-serif;
    font-size: 26px;
    color:#0CA6CD;
    margin-top:0;
    margin-bottom:2rem;
}
#hero_group2{
    padding-top:3vh;
}
#hero_phrase{
    font-size: 60px;
    font-style: italic;
    font-family: 'Exo 2', sans-serif;
    font-weight:400;
    line-height: 1.25;
    letter-spacing: -.1rem;
    margin-top: 0;
}

/* **********************************************************************************************************/

#intro_sec{
    background-color: transparent;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    height:127vh;
}
#intro_sec #backing_img{ 
   
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
   object-fit: cover;
     mask-image: linear-gradient(#000 84.3%, transparent 100%);
}

/* preserveAspectRatio="none" */
.wave{
    position:absolute;
    left:0;
    top:-5vh;
    width:100vw;
    height:12vh;
    background:url("../images/svgs/wave_trans.svg");
    background-size: cover;
    filter: drop-shadow( 0px 16px 12px rgba(0, 0, 0, .7));
}


#intro_sec .copy_wrap{
    background-color: transparent;
    border-radius: 20px;
    padding:20px 30px;
    width:80vw;
}
.arrow_clip{
    margin-top:20px;
    width:40px;
}
#blue_mask{
    height:50vh;
    width:100vw;
    background:linear-gradient(0deg, rgba(20, 105, 140, 1.00) 97%, rgba(13,25,41,0) 100%);
    position:absolute;
    left:0;
    bottom:-50vh;
}
/* **********************************************************************************************************/

#anim_sec{
    overflow:hidden; 
    border-bottom: 1px solid #FFFFFF77;
    margin-top:-20vh;
    position: relative;
    z-index: -1;
   
}

.half_n_half{
    display:flex;
    width: 100%;
    justify-content: space-between;
}
.half_n_half .left_side{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:hsla(197,75%,31%,1);
    background-image:
    radial-gradient(at 30% 38%, hsla(197,56%,50%,1) 0px, transparent 50%),
    radial-gradient(at 19% 23%, hsla(197,76%,26%,1) 0px, transparent 50%),
    radial-gradient(at 85% 19%, hsla(184,43%,53%,1) 0px, transparent 50%),
    radial-gradient(at 42% 66%, hsla(197,69%,47%,1) 0px, transparent 50%);
    
}

.half_n_half .right_side{
    width: 0%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#00000066;
    background-image: url("../images/interface/grid_20.png");
    background-size:20px 20px;
    background-blend-mode: lighten;
    flex-grow:1;
    border-left: 1px solid #FFFFFF77;
}


.half_n_half .left_side .copy_wrap{
    width:70%;
}
#bunny_wrapper{
    width:100%;
    height:100%;
    display:grid;
    position:relative;
    justify-content: center;
    align-items: center;
}
#bunny, #bunny_anim{
   
    width:100%;
    height:100%;
    object-fit: cover;
    grid-row: 1;
    grid-column: 1;
}
/* **********************************************************************************************************/

#hidden_sec{
    overflow:hidden; 
    border-bottom: 1px solid #FFFFFF77;
}

.overlap .back_side{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    background-color:hsla(197,75%,31%,1);
    background-image:
    radial-gradient(at 30% 38%, hsla(197,56%,50%,1) 0px, transparent 50%),
    radial-gradient(at 19% 23%, hsla(197,76%,26%,1) 0px, transparent 50%),
    radial-gradient(at 85% 19%, hsla(184,43%,53%,1) 0px, transparent 50%),
    radial-gradient(at 42% 66%, hsla(197,69%,47%,1) 0px, transparent 50%);
   
}
.overlap .back_side .copy_wrap{
    width:60%;
}

.overlap .front_side .content_wrap{
    width:80%;
    
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}


.overlap .front_side{
    height:0%;
    background-color:#00000066;
    background-image: url("../images/interface/grid_20.png");
    background-size:20px 20px;
    background-blend-mode: lighten;
    position:absolute;
    bottom:0;
    left:0;
    border-top: 1px solid #FFFFFF77;
    display:flex;
    align-items: flex-start;
    justify-content: center;
}
.bullet_list{
    color: #fff;
    list-style: none;
    font-style: italic;
    font-family: 'Roboto Flex', sans-serif;
    padding-left: 0;
    margin-top: 0;
}
.bullet_list li:before{
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: rgb(255,140,0); /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.bullet_list li {
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.bullet_list li span{
    font-weight: bold;
    color:var(--color-blue-txt);
    font-size: 18px;
}

.diagrams_1{
    display: flex;
    justify-content: space-evenly;
}

.d_block{
    padding-top:18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sq_tile{
    width:220px;
    height:220px;
    border-radius:10px;
    box-shadow: 0 0 10px #000000CC;
    background-color:#14546e;
    overflow:hidden;
}
#flip_tile{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flip-card {
    background-color: transparent;
    width: 58%;
   /* height: 180px;*/
    aspect-ratio:2/3;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;

    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.flip-card:focus {
    outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FF8C00;
    display: flex;
    justify-content: center;
    align-items: center; 
    border-radius:8px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-front {
   
    z-index: 2; 
}

.flip-card-back {
  transform: rotateY(180deg);
  z-index: 1;
}

.flip_image{
    width:90%;
}
/* **********************************************************************************************************/
#dub_pinner {
    display:flex;
    align-items: center;
    justify-content: center;
    background-color:hsla(197,75%,31%,1);
    background-image:
    radial-gradient(at 30% 38%, hsla(197,56%,50%,1) 0px, transparent 50%),
    radial-gradient(at 19% 23%, hsla(197,76%,26%,1) 0px, transparent 50%),
    radial-gradient(at 85% 19%, hsla(184,43%,53%,1) 0px, transparent 50%),
    radial-gradient(at 42% 66%, hsla(197,69%,47%,1) 0px, transparent 50%);
}

#double_sec .content_wrap{ 
    width:80vw;
   display: grid;
  place-items: center;
  grid-template-areas: "inner-div";
}
#slider_cont .h1_sec{ width:100%;}
#slider_cont, #dynamic_cont{
     width:80vw;
    display:flex;
   flex-direction: column;
    align-items: center;
    grid-area: inner-div;
}
#slider_strip{
    display:flex;
    width:100%;
   
    flex-direction: row;
    position:relative;
}
.slider_slit{
    height:100%;
    width:20px;
    z-index: 100;
    position:absolute;
    top:0;   
}
.slider_slit.left{
    left:0;
    background:radial-gradient(ellipse at left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
}
.slider_slit.right{
    right:0;
    background:radial-gradient(ellipse at right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
}
.slider_wrapper{
    flex: 1 1 0px;
   
    overflow-y:hidden;
    overflow-x: scroll;
   
    -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.slider_wrapper::-webkit-scrollbar {
  display: none;
}

.bullet_slider{
    display:flex;
    flex-direction: row;
    width:200vw;
    min-width:2900px;
    max-width:3400px;
    column-gap: 20px;
    height:fit-content;
    list-style: none;
    padding:30px;
    margin:0;
}

.bullet_slider li{
    position:relative;
    background: #ff8c03;
    /*background: radial-gradient(circle at top, rgba(255,140,3,1) 30%, rgba(255,187,87,1) 100%);*/
   /* background: radial-gradient(circle at top, hsl(calc(30 + (2 * var(--c))),100%,50%) 30%, hsl(calc(36 - (2 * var(--c))),100%,50%) 100%);*/
    background: radial-gradient(circle at top, hsl(31,100%,calc(50% + var(--c))) 30%, hsl(36,100%,calc(67% + var(--c))) 100%);
    border-radius:10px;
    box-shadow: 0 0 10px #000000CC;
    flex: 1 1 0px;
    width: 0;
    overflow:hidden;
    margin:0;
    
}
.bullet_slider li .circuit{
    background-image:url("../images/interface/circuit1.jpg");
    background-size: contain;
    background-repeat: repeat;
    
    mix-blend-mode: screen;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.bullet_slider li h3{
    font-family: 'Exo 2', sans-serif;
    font-size: 32px;
    margin: 20px 20px 0px 20px;
    color: white;
    min-height:100px;
    font-weight:600;
}
.bullet_slider li p{
   font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    color:black;
    font-family: 'Roboto Flex', sans-serif;
    font-size: 15px;
    color: black;
    margin: 0 20px 20px 20px;
    padding-top: 10px;
    border-top: 2px solid white;
    line-height: 1.4em;
}

.custom_scroll_wrapper{
    height:16px;
    border-radius:8px;
    width:100%;
    background-color: black;
    margin-top: 40px;
}
.scroll_mover{
    height:16px;
    border-radius:8px;
    width:40px;
    background-color: var(--color-orange);
   
    
}


#dcbList{
    display:flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    width:100%;
    gap:1px;
    margin-top: 40px;
    padding:0;
    transition:margin-top 0.5s ease-out;
}

#dcbList li{
    width:40px;
    height:46vh;
    max-height:400px;
    background-color:var(--color-orange);
   
    border-radius:6px;
    flex-grow:0.0001;
    transition: flex-grow 0.5s ease-out;
    
}
#dcbList li .hidden_content{ opacity:0; visibility: hidden;}
#dcbList li.open{
    transition: flex-grow 0.5s ease-out;
    flex-grow: 1;
    display:flex;
    background: linear-gradient(90deg, rgba(255,140,3,1) 0%, rgb(164 90 1) 100%);
    flex-direction: row;
    align-items: center;
}
#dcbList li.open .hidden_content{opacity:1; visibility:visible; display:flex; flex-direction: row; align-items: center; margin-left:14px;}
#dcbList li.open #dcbList_sub{
   
    opacity:1;  
   flex: 1 1 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: space-evenly;
    list-style: disc;
    
    transition: opacity 0.5s ;
    transition-delay: 0.5s;
    transition-property: opacity;
    margin:0 20px 0 30px;
    padding:0;
    gap:20px
}
#dcbList li.open .external_wrapper{
   
    opacity:1;   
    transition: opacity 0.5s ;
    transition-delay: 0.7s;
    transition-property: opacity;
    height:fit-content;
}
#dcbList li #dcbList_sub, #dcbList li .external_wrapper{
    opacity:0; 
}
#dcbList li.open #dcbList_sub li{
    width:100%;
    height:auto;
    font-family: 'Exo 2', sans-serif;
    font-size: 21px;
    background-color: transparent;
    font-weight:200;
    color:black;
    display:list-item;
}
#dcbList li.open #dcbList_sub li span{
    display:contents;
}
#dcbList li.open #dcbList_sub li span.bold{
    font-weight:bold;
}
#dcbList li.open #dcbList_sub li span.hilight{
    color:white;
}
#dcbList li a{
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    
    margin-left: 5px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-size: 21px;
    height: 100%;
    text-align: center;
    cursor: pointer;
    width:36px;
}

.external_wrapper{
    border-radius:10px;
    background-color:#ed972c;
    margin-right:30px;
    overflow: hidden;
}

#dcbList li a:hover{
    color: var(--color-dark-blue)    ; 
}
/* **************************** Weather feed **************************** */
#weather_feed h2{
    color:white;
    font-family: 'Exo 2', sans-serif;
}
#weather_main_wrapper{
    margin:10px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#weather_feed h2#weather_title{
    text-align:center;
    width:100%;
    font-size:36px;
    margin:0;
    
}
#weather_feed #weather_icon{
    width:50%;
    max-width:120px;
    height:auto;
    aspect-ratio: 1/1;
}

#weather_feed #attribution{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    font-size:10px;
    text-align:center;
    margin: 0;
    background-color:#00000011;
}

#weather_feed #top_row{
    display:flex;
    align-items: center;
    justify-content: center;
    gap:20px;
   
}
#weather_feed .day_wrapper{
    
}
#weather_feed .day_wrapper h2{
     font-size:30px;
    margin-bottom:5px;
}
#weather_feed .day_wrapper p{
     font-size:16px;
    margin-bottom:0px;
     font-family: 'Roboto Flex', sans-serif;
    color:black;
    line-height: 1.2;
}
#weather_feed #split_line{
    width:100%;
    height:6px;
    border-radius:3px;
    background-color:white;
}
#weather_feed #bottom_row{
    display:flex;
    margin-bottom: 20px;
    justify-content: space-around;
    gap:30px;
}
#weather_feed #bottom_row .day_wrapper h2{
     font-size:20px;
    margin-bottom:2px;
}
#weather_feed #bottom_row .day_wrapper p{
     font-size:12px;
    margin-bottom:0px;
     font-family: 'Roboto Flex', sans-serif;
    color:black;
}
#weather_feed #power_light{
    width:13px;
    height:5px;
    position:absolute;
    right:10px;
    bottom:4px;
    background-color:#550000;
    border-radius:2px;
    overflow: hidden;
}
#weather_feed #actual_light{
    width:100%;
    height:100%;
    background: radial-gradient(ellipse, rgba(255,140,3,1) 0%, rgba(173,8,8,1) 60%, rgba(74,5,5,1) 100%);
    box-shadow: inset 1px 1px 2px #000000AA;
    opacity:0;
}
#weather_feed #actual_light.flash{animation: flashItem 0.6s 3;}

@keyframes flashItem{
    0% { opacity: 1;}
    49% { opacity: 1;}
    50% { opacity: 0;}
    100% { opacity: 0;}
}

/* **************************** youTube feed **************************** */

#youtube_feed{
    background-color:#52666d;
    width:40%;
}
#youtube_feed #youtube_wrapper{
    width:100%;
    aspect-ratio:16/9;
    overflow: hidden;
    background-color: black;
    box-shadow: 0 3px 4px black;

}
#youtube_feed #youtube_wrapper #player{
    /*transform: scale(1.4);*/
    display:none;
    pointer-events: none;
}
#youtube_feed #video_control_wrapper{
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    gap:10px;
}
.glass_wrapper {
    width: 57px;
    /* height: 43px; */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
   
}
.glass_button {
  box-sizing: content-box;
  overflow: hidden;
  position: relative;
  --latex-dif: 0.5px;
  --metal-inn: 1.25px;
  --metal-out: 1.25px;
  --inner-end: transparent;
  --metal-mid: 6px;
  --glass-col: #41e6f7, #105d7a;
  --latex-dim: calc(50px + 2*var(--latex-dif, 0px));
  --latex-rad: calc(.5*var(--latex-dim));
  --inner-dim: calc(var(--latex-dim) + 2*var(--metal-inn, 0px));
  border: solid var(--metal-out, 0px) transparent;
  padding: var(--metal-mid, 0px);
  width: var(--inner-dim);
  height: var(--inner-dim);
  border-radius: 50%;
  --state-dy: 0px;
  box-shadow: 0 calc(6px - var(--state-dy)) 5px -3px #261500;
  transform: translatey(var(--state-dy)) scale(0.8);
 
  font-size: 0;
  text-indent: -100vw;
  transition: .25s;
  cursor: pointer;
   
}
.glass_button:before, .glass_button:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  content: "";
}
.glass_button:before {
  height: 27px;
  border-radius: 50%/ 59% 59% 41% 41%;
  transform: scalex(0.83);
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1));
}
.glass_button:after {
  box-shadow: inset 0 -16px 1px -14px rgba(255, 255, 255, 0.25);
}
.glass_button:focus, .glass_button:hover {
  outline: none;
  filter: none;
}
.glass_button:active {
  --state-dy: 2px;
}
#playBut{
    background: url("../images/svgs/play.svg"), Radial-Gradient(transparent calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #171717) calc(25px + -1*1px), #000 25px, #000 calc(var(--latex-rad) + -1*1px), transparent var(--latex-rad)) content-box, linear-gradient(#757575, #ffffff) content-box, repeating-radial-gradient(rgba(119, 119, 119, 0.15), rgba(187, 187, 187, 0.15), rgba(119, 119, 119, 0.15) 2px) padding-box, conic-gradient(#f4f4f4, #fafafa, #555, #e6e6e6, #808080, #e6e6e6, #555, #fafafa, #f4f4f4) padding-box, linear-gradient(#d5d5d5, #5f5f5f) border-box;
}
#playBut.pause{
    background: url("../images/svgs/pause.svg"), Radial-Gradient(transparent calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #171717) calc(25px + -1*1px), #000 25px, #000 calc(var(--latex-rad) + -1*1px), transparent var(--latex-rad)) content-box, linear-gradient(#757575, #ffffff) content-box, repeating-radial-gradient(rgba(119, 119, 119, 0.15), rgba(187, 187, 187, 0.15), rgba(119, 119, 119, 0.15) 2px) padding-box, conic-gradient(#f4f4f4, #fafafa, #555, #e6e6e6, #808080, #e6e6e6, #555, #fafafa, #f4f4f4) padding-box, linear-gradient(#d5d5d5, #5f5f5f) border-box;
}
#replayBut{
    background: url("../images/svgs/restart.svg"), Radial-Gradient(transparent calc(70.71068% + -2*1px), var(--inner-end, #000) 70.71068%), Radial-Gradient(var(--glass-col, #777, #171717) calc(25px + -1*1px), #000 25px, #000 calc(var(--latex-rad) + -1*1px), transparent var(--latex-rad)) content-box, linear-gradient(#757575, #ffffff) content-box, repeating-radial-gradient(rgba(119, 119, 119, 0.15), rgba(187, 187, 187, 0.15), rgba(119, 119, 119, 0.15) 2px) padding-box, conic-gradient(#f4f4f4, #fafafa, #555, #e6e6e6, #808080, #e6e6e6, #555, #fafafa, #f4f4f4) padding-box, linear-gradient(#d5d5d5, #5f5f5f) border-box;
}

/* **************************** HTML 5 Canvas stuff **************************** */
#canvas_sec{
    border-top: 1px solid #FFFFFF77;
    overflow: hidden;
}
#canvas_sec .left_side{
    width:60vw; 
}
#canvas_sec .right_side{
    width:40vw;  
}
#canvas_sec .copy_wrap{
    width:50%;
    margin-left:5vw;
}
#canvas_sec .pinner{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color:hsla(197,75%,31%,1);
    background-image:
    radial-gradient(at 30% 38%, hsla(197,56%,50%,1) 0px, transparent 50%),
    radial-gradient(at 19% 23%, hsla(197,76%,26%,1) 0px, transparent 50%),
    radial-gradient(at 85% 19%, hsla(184,43%,53%,1) 0px, transparent 50%),
    radial-gradient(at 42% 66%, hsla(197,69%,47%,1) 0px, transparent 50%);
}

#canvas_sec #box_container{
   
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#canvas_sec #box_container .box{
    position:relative;
    width:240px;
    height:330px;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform: perspective(1500px) rotateY(17910deg);
     -webkit-transform: perspective(1500px) rotateY(17910deg);
    transition: transform 1.5s;
}
#canvas_sec #box_container .box::before{
    
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    background-color: #0527336b;
    z-index: 1000;
    transform:translateY(300px) rotateX(-90deg) scale(1.1);
    -webkit-transform:translateY(300px) rotateX(-90.0000001deg) scale(1.1);
    filter:blur(40px);
    
}
#canvas_sec #box_container .box .box_card{
    position:absolute;
    top:0;
    left:0;
    width:100%;
   
    background: linear-gradient(90deg, #DDD, #eee);
    
    transform-origin: center;
    transform-style:preserve-3d;
    transform-style:preserve-3d;
    transform:rotateY(calc(var(--i) * 90deg)) translateZ(120px);
    backface-visibility: hidden;
    
    -webkit-transform-origin: center;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotateY(calc(var(--i) * 90deg)) translateZ(120px);
    -webkit-backface-visibility: hidden;
    outline: 1px solid #000;
}
#canvas_sec #box_container .box .box_card .img_bx{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    height:auto;
    
}
#canvas_sec #box_container .box .box_card .img_bx img{
    position:absolute;
     top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}
#canvas_sec #box_container .box .box_card h2{
    position: relative;
    padding:4px;
    width:100%;
    text-align:center;
    font-size: 22px;
    font-weight: 500;
    line-height:1.1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    font-family: 'Exo 2', sans-serif;
    margin:0;
}
#canvas_sec #box_container .box .box_card:hover h2{
    color:var(--color-orange);
}
#canvas_sec #box_container .rot_but{
    position:relative;
    width:30px;
    height:60px;
    background-image:url("../images/svgs/dir.svg");
    border-radius: 10px;
    z-index:1001;
    cursor: pointer;
    background-repeat: no-repeat;
}
#canvas_sec #box_container #rotPrev{
    transform: scaleX(-1);
    left:-80px;
}
#canvas_sec #box_container #rotNxt{
   right:-80px;
}

#canvas_sec #anim_holder{
    transform-origin: center;
    transform:rotate(45deg);
    position:absolute;
    left:50%;
    top:50%;
}
#canvas_sec #anim_dot{
    width:10px;
    height:10px;
    border-radius:5px;
    background-color:var(--color-orange);
    
}
#canvas_sec #canvas_holder{
    position:fixed;
    left:0;
    top:0;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #00000033;
}

#canvas_sec #canvas.type1, #canvas_sec #canvas.type2{
   display: none;
}
#canvas_sec #canvas.type3{
    width:896px;
    height:200px;
    border-radius:20px;
    background-color:var(--color-dark-blue);

}
 
#canvas_sec #canvas.type4{
    width:100vw;
    height:100vh;
    filter:none;
}
#canvas_sec #my_frame{
    max-width:800px;
    width:90vw;
    aspect-ratio:8/6;
    border:0; 
    border-radius: 20px;
    background-color: var(--color-dark-blue);
}
#canvas_sec .touch_device #my_frame{ aspect-ratio:1/1;}
#canvas_sec #my_frame.type2{
    width:100vw;
    height:100vh;
    background-color: transparent;
}
#canvas_sec #my_frame.type3, #canvas_sec #my_frame.type4{
    display:none;
}

/* **************************** Enquiry Form **************************** */

#enquiry_overlay {
    position:fixed;
    left:0;
    top:0;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #00000099;
    opacity:0;
    visibility: hidden;
    transition:all 0.75s;
    
}
#enquiry_overlay.show{
    opacity:1;
    visibility:visible;
    transition:all 0.75s;
}

#enquiry_overlay #form_wrapper{
    max-width:600px;
    width:90vw;
  
    border:0; 
    border-radius: 20px;
    background-color: var(--color-dark-blue);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#enquiry_overlay #form_wrapper a:hover{
    background: url(../images/svgs/close_white.svg);
}

#enquiry_overlay #form_wrapper #emailForm{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width:70%;
    position:relative;
    margin-top:20px;
}
#enquiry_overlay #form_wrapper #emailForm label{
    color:var(--color-blue-txt);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 18px; 
}

#enquiry_overlay #form_wrapper #emailForm .validation_wrapper{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#enquiry_overlay #form_wrapper #emailForm .validation_wrapper .tc_clip{
    width:24px;
    height:24px;
    position: absolute;
    right: -30px;
    background-repeat: no-repeat;
    background-position: center;
    visibility: hidden;
    opacity:0;
    transition: all 0.75s;
}
#enquiry_overlay #form_wrapper #emailForm .validation_wrapper:last-of-type{margin-bottom: 60px;}
#enquiry_overlay #form_wrapper #emailForm .validation_wrapper .tc_clip.cross{
    background-image: url(../images/svgs/cross.svg);
    filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.8));
    visibility: visible;
    opacity: 1;
    transition: all 0.75s;
}
#enquiry_overlay #form_wrapper #emailForm .validation_wrapper .tc_clip.tick{
    background-image: url(../images/svgs/tick.svg);
    filter: drop-shadow(0 0 4px rgba(0,255,0, 0.8)) drop-shadow(0 0 8px rgba(0,255,0, 0.8)) drop-shadow(0 0 12px rgba(0,255,0, 0.8));
    visibility: visible;
    opacity: 1;
    transition: all 0.75s;
}
#enquiry_overlay #form_wrapper #emailForm input[type="text"], #enquiry_overlay #form_wrapper #emailForm input[type="email"], #enquiry_overlay #form_wrapper #emailForm textarea{
    width:100%;
    color:var(--color-orange);
    font-family: 'Roboto Flex', sans-serif;
    font-size: 18px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
   
}
#emailForm input:autofill {
    -webkit-text-fill-color: var(--color-orange); 
}
#emailForm input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-orange);    
}
#emailForm input:focus-visible, textarea:focus-visible{
    outline: 1px solid var(--color-orange);
}
#enquiry_overlay #form_wrapper #emailForm input[type="button"]{
    width:100%;
    height:30px;
    border-radius: 15px;
    color:white;
    font-family: 'Roboto Flex', sans-serif;
    border:0;
    background-color: var(--color-orange);
    
}
#enquiry_overlay #form_wrapper #emailForm input[type="button"]:hover{color:var(--color-dark-blue);}
#enquiry_overlay #form_wrapper #emailForm input[type="button"]:disabled{background-color:grey; color:var(--color-dark-blue);}


/*@media only screen and (min-width:1401px) {
    
    
}*/
@media only screen  and (max-width: 1400px){
    #hero_sec{background-position: left bottom;}
    
    .h1_sec{ font-size: 60px;}
    .para_sec{font-size: 20px; margin-top:20px;}
    p.illuminated::first-letter{font-size: 64px;}
   /* p.handwritten{ font-size:20px;  margin-top:24px; margin-bottom:0}
    h4.handwritten{ font-size:26px; margin-top:24px;}*/
    #anim_sec .half_n_half .left_side .copy_wrap{width:80%}
    
    #hidden_sec .overlap .back_side .copy_wrap {width: 70%;}
    #hidden_sec .sq_tile{width:15vw; height:15vw; }
   /* #hidden_sec .flip-card{width:100px; height:150px; }*/
    
    #slider_cont .bullet_slider li h3{font-size: 24px; min-height:70px;}
    #slider_cont .bullet_slider li p{font-size: 13px; }
    
    #dynamic_cont #dcbList li.open #dcbList_sub{margin: 0 10px 0 20px;}
    #dynamic_cont #dcbList li.open #dcbList_sub li{font-size: 16px;}
    
    #weather_feed h2#weather_title{ font-size:24px;}
    #weather_feed #weather_icon{max-width:90px;}
    #weather_feed .day_wrapper h2{ font-size:20px;}
    #weather_feed .day_wrapper p{ font-size:10px;}
    #weather_feed #bottom_row .day_wrapper h2{font-size:14px;}
    #weather_feed #bottom_row .day_wrapper p{font-size:8px;}
    #weather_feed #top_row{gap:6px}
    #weather_feed #bottom_row{gap:10px}
    
    #youtube_feed #video_control_wrapper {height:60px; gap:10px;}
    #youtube_feed .glass_wrapper {width:43px}
    #youtube_feed .glass_button {transform: translatey(0) scale(0.6);}
}

/* TABLET landscape */
@media only screen and (max-width: 1024px){
    
    #header_strip #strip_backing{ left:30px;}
    #header_strip #main_logo{ padding: 10px 50px;}
    
    #extras_tab{top:80vh;}
    
    #hero_sec{background-position: center bottom;}
    #hero_txt_wrapper{padding:17vh 50px;}
    #hero_name{font-size:50px;}
    #hero_job{ font-size: 20px;margin-bottom:1rem;}
    #hero_group2{padding-top:1vh;}
    #hero_phrase{font-size: 45px;}
    
    .h1_sec{ font-size: 50px;}
    .para_sec{font-size: 18px; margin-top:20px;}
    p.illuminated::first-letter{font-size: 56px;}
    
    
    
    #intro_sec .arrow_clip{width:30px; margin-top:10px;}
    
    #anim_sec .half_n_half .left_side .copy_wrap{width:80%}
    
    
    /*#hidden_sec .overlap .front_side .content_wrap{width:92%}
    #hidden_sec .diagrams_1{justify-content: space-between; flex-wrap: wrap;}
    #hidden_sec .bullet_list li { font-size: 14px;}
    #hidden_sec .bullet_list li span{font-size: 16px;}
    #hidden_sec .d_block{flex: 1 0 40%;}
    #hidden_sec .sq_tile{width:20vw; height:20vw; }*/
    
    
    #double_sec .content_wrap {width:92vw;}
    #slider_cont .bullet_slider li h3{font-size: 24px; min-height:70px;}
    #slider_cont .bullet_slider li p{font-size: 13px; }
      #dynamic_cont{width:92vw;}
    #dynamic_cont #dcbList li.open #dcbList_sub{margin: 0 10px 0 20px;}
    #dynamic_cont #dcbList li.open #dcbList_sub li{font-size: 16px;}
    
    #weather_feed h2#weather_title{ font-size:24px;}
    #weather_feed #weather_icon{max-width:90px;}
    #weather_feed .day_wrapper h2{ font-size:20px;}
    #weather_feed .day_wrapper p{ font-size:10px;}
    #weather_feed #bottom_row .day_wrapper h2{font-size:14px;}
    #weather_feed #bottom_row .day_wrapper p{font-size:8px;}
    #weather_feed #top_row{gap:6px}
    #weather_feed #bottom_row{gap:10px}
    
    #canvas_sec #my_frame.type1{max-width:700px;}
    #canvas_sec #box_container .box { height:360px;}
    #canvas_sec #box_container .box::before{ transform:translateY(260px) rotateX(90deg) scale(1.1);}
    #canvas_sec #box_container #rotPrev{left:-50px;}
    #canvas_sec #box_container #rotNxt{right:-50px;}
    
    #canvas_sec #box_container .box {width:180px; height:270px;}
    #canvas_sec #box_container .box::before{ transform:translateY(200px) rotateX(90deg) scale(1.1); width:180px; height:180px;}
    #canvas_sec #box_container .box .box_card{transform: rotateY(calc(var(--i) * 90deg)) translateZ(90px); width: 100%;}
    #canvas_sec #box_container .box .box_card h2 {font-size: 16px; top:0px}
    #canvas_sec #box_container .rot_but{width:20px; height:40px;}
}


/* weather feed */
@media only screen and (min-width:768px) and (max-width:860px){
    #weather_feed h2#weather_title{ font-size:17px;}
    #weather_feed #weather_icon{max-width:40px;}
    #weather_feed .day_wrapper h2{ font-size:16px;}
    #weather_feed .day_wrapper p{ font-size:8px;}
    #weather_feed #bottom_row{flex-direction: column;}
    #weather_feed #bottom_row .day_wrapper h2{font-size:14px;}
    #weather_feed #bottom_row .day_wrapper p{font-size:8px;}
    #weather_feed #top_row{gap:6px;}
    #weather_feed #bottom_row{gap:10px;}
    
}
/* TABLET portrait */
@media only screen and (max-width:768px){
   #header_strip #strip_backing{ left:0px;}
    #header_strip #main_logo{ padding: 5px 20px; height:50px;}
    #hero_sec{background-position: center bottom;}
    #hero_txt_wrapper{padding:17vh 45px;}
    #hero_name{font-size:50px;}
    #hero_job{ font-size: 18px;margin-bottom:1rem;}
    #hero_group2{padding-top:1vh;}
    #hero_phrase{font-size: 40px;}
    
    .h1_sec{ font-size: 45px;}
    .para_sec{font-size: 15px; margin-top:20px;line-height: 1.3;}
    h4.handwritten{ font-size:26px; margin-top:12px; margin-bottom:10px}
    p.handwritten{ font-size:20px;  margin-top:24px; margin-bottom:0}
    p.illuminated::first-letter{font-size: 43px; line-height: 0.9; margin-right: 4px;}
    @-moz-document url-prefix() {p.illuminated::first-letter {margin-top: 5px;}}
    
    a.close{width:30px; height:30px;}
    
    #intro_sec .arrow_clip{width:30px; margin-top:10px;}
    
    #anim_sec .half_n_half{flex-direction: column;}
    #anim_sec .half_n_half .right_side{ width: 100%; height:0;}
    #anim_sec .half_n_half .left_side .copy_wrap{width:80%}
    
    #hidden_sec .overlap .front_side .content_wrap{width:92%}
    #hidden_sec .diagrams_1{justify-content: space-between; flex-wrap: wrap;}
    #hidden_sec .bullet_list li { font-size: 14px;}
    #hidden_sec .bullet_list li span{font-size: 16px;}
    #hidden_sec .d_block{flex: 1 0 40%;}
    #hidden_sec .sq_tile{width:20vw; height:20vw; }
    #hidden_sec .overlap .back_side .copy_wrap {width: 80%;}
    #hidden_sec .overlap .front_side .content_wrap{width:92%}
   
    #hidden_sec .bullet_list li { font-size: 14px;}
    #hidden_sec .bullet_list li span{font-size: 16px;}
    
    
    #double_sec .content_wrap {width:92vw;}
    #slider_cont .bullet_slider li h3{font-size: 24px; min-height:70px;}
    #slider_cont .bullet_slider li p{font-size: 13px; }
    #dynamic_cont{width:92vw; height:92vh;}
    
    
    #dynamic_cont #dcbList{flex-direction:column; flex-grow:1;}
    #dynamic_cont #dcbList li{max-height:none; height:36px; width:100%; display:flex; flex-direction: column; justify-content: space-between;}
    #dynamic_cont #dcbList li a {writing-mode:lr; transform:none; height:36px; width:100%; margin-top: 3px;}
    #dynamic_cont #dcbList li.open .hidden_content{margin-bottom:20px; flex-grow:1;}
    #dynamic_cont #dcbList li.open{background: linear-gradient(180deg, rgba(255,140,3,1) 0%, rgb(164 90 1) 100%);}
    #dynamic_cont #dcbList li.open #dcbList_sub{margin: 0 10px 0 20px; justify-content: center;}
    #dynamic_cont #dcbList li.open #dcbList_sub li{font-size: 16px;}
    
    #weather_feed h2#weather_title{ font-size:24px;}
    #weather_feed #weather_icon{max-width:90px;}
    #weather_feed .day_wrapper h2{ font-size:20px;}
    #weather_feed .day_wrapper p{ font-size:10px;}
    #weather_feed #bottom_row .day_wrapper h2{font-size:14px;}
    #weather_feed #bottom_row .day_wrapper p{font-size:8px;}
    #weather_feed #top_row{gap:6px;}
    #weather_feed #bottom_row{gap:10px;}
    
    #youtube_feed #video_control_wrapper {height:60px; gap:10px;}
    #youtube_feed .glass_wrapper {width:43px}
    #youtube_feed .glass_button {transform: translatey(0) scale(0.6);}
    
    #canvas_sec .pinner{flex-direction: column;}
    #canvas_sec .copy_wrap{width:90%;}
    
    
    #canvas_sec #canvas.type3{transform: rotate(90deg); width:66vh;}
     #enquiry_overlay #form_wrapper{width:92vw; }
    #enquiry_overlay #form_wrapper #emailForm label{font-size: 15px;}
    #enquiry_overlay #form_wrapper #emailForm input[type="text"], #enquiry_overlay #form_wrapper #emailForm input[type="email"], #enquiry_overlay #form_wrapper #emailForm textarea{width:96%; font-size:15px; padding: 6px 10px; margin: 4px 0;}
    #enquiry_overlay #form_wrapper #emailForm input[type="button"]{width:96%;}
    #enquiry_overlay #form_wrapper #emailForm .validation_wrapper:last-of-type{margin-bottom: 30px;}
}

/* bigger phone */
@media only screen and (max-width: 640px){
     #dynamic_cont{width:90vw; height:80vh;}
    #dynamic_cont .copy_wrapper{position:absolute; top:0px; margin:20px;}
    #dynamic_cont #dcbList li{height:24px;}
    /*#dynamic_cont #dcbList{justify-content: flex-end;}*/
    #dynamic_cont #dcbList li a {font-size:16px;}
    #dynamic_cont #dcbList li.open #dcbList_sub{margin: 0 20px 10px 20px; }
    #dynamic_cont #dcbList li.open #dcbList_sub li{font-size: 16px;}
    #dynamic_cont #dcbList li.open .hidden_content{flex-direction: column; margin:14px 0;}
    #dynamic_cont .external_wrapper{margin-right:0;}
    
    #weather_feed #weather_main_wrapper {gap:2px;}
    #weather_feed h2#weather_title{ font-size:20px;}
    #weather_feed #weather_icon{max-width:60px;}
    #weather_feed .day_wrapper h2{ font-size:15px;margin-top:3px;}
    #weather_feed .day_wrapper p{ font-size:10px;}
    #weather_feed #top_row{margin-bottom:4px;}
    #weather_feed #split_line{height:2px; border-radius:1px;}
    #weather_feed #bottom_row .day_wrapper h2{font-size:12px; margin:5px 0;}
    #weather_feed #bottom_row .day_wrapper p{font-size:8px;}
    #weather_feed #top_row{gap:0px;}
    #weather_feed #bottom_row{gap:5px;}
    
    #youtube_feed{width:68%;}
}
/* phone */
@media only screen and (max-width: 375px){
    #header_strip #strip_backing{ left:0px; width:110px; height:70px;}
    #header_strip #main_logo{ padding: 5px 20px; height:50px;}
    
    #extras_tab{top:80vh;}
    
    #hero_sec{background-position: center top;}
    #hero_txt_wrapper{padding:17vh 20px;}
    #hero_name{font-size:30px;}
    #hero_job{ font-size: 13px; margin-bottom:1rem;}
    #hero_group2{padding-top:1vh;}
    #hero_phrase{font-size: 28px;}
    
    .h1_sec{ font-size: 30px;}
    p.illuminated::first-letter{line-height: 0.9; font-size:36px;}
    @-moz-document url-prefix() {p.illuminated::first-letter {margin-top: 5px;}}
    .para_sec{font-size: 13px; margin-top:20px; line-height: 1.3;}
    .line_break_1{border-bottom: 1px solid var(--color-orange); border-top: 1px solid var(--color-orange); height: 2px; margin-top: 3px;}
    p.handwritten{ font-size:16px;  margin-top:12px; margin-bottom:0}
    h4.handwritten{ font-size:20px; margin-top:30px; margin-bottom:4px}
    
    a.close{width:30px; height:30px;}
    
    #anim_sec .half_n_half{flex-direction: column;}
    #anim_sec .half_n_half .right_side{ width: 100%; height:0;}
    #anim_sec .half_n_half .left_side .copy_wrap{width:90%}
    
    #slider_cont .bullet_slider{padding:30px 15px}
    
    #hidden_sec .bullet_list li { font-size: 8px;}
    #hidden_sec .bullet_list li span{font-size: 9px;}
    #hidden_sec .sq_tile{width:100px; height:100px; }
    #hidden_sec .d_block{padding-top:2px;}
    
    #dynamic_cont{height:90vh;}
    #dynamic_cont #dcbList{margin:24vh 0 4px 0;}
    #dynamic_cont #dcbList:has(li.open){margin:4px 0 4px 0; transition:margin-top 0.5s ease-out;}
    /*#dynamic_cont #dcbList li:first-of-type{margin-top:22vh;}
    #dynamic_cont #dcbList li.open:first-of-type{margin-top:0;}*/
    #dynamic_cont #dcbList li.open #dcbList_sub li{font-size: 12px;}
    #youtube_feed #video_control_wrapper {height:40px; gap:10px;}
    #youtube_feed .glass_wrapper {width:30px}
    #youtube_feed .glass_button {transform: translatey(0) scale(0.45);}
    
    
    #canvas_sec #box_container .box {width:100px; height:163px;}
    #canvas_sec #box_container .box::before{ transform:translateY(100px) rotateX(90deg) scale(1.1); width:100px; height:100px;}
    #canvas_sec #box_container .box .box_card{transform: rotateY(calc(var(--i) * 90deg)) translateZ(50px); width: 100%;}
    #canvas_sec #box_container .box .box_card h2 {font-size: 12px; top:0px}
    #canvas_sec #box_container .rot_but{width:15px; height:30px;}
    
   
}