O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:75:"/home/technoon/public_html/demo/denipol/assets/styles/components/header.css";s:10:"publicPath";s:44:"/assets/styles/components/header-mwymxAr.css";s:23:"publicPathWithoutDigest";s:36:"/assets/styles/components/header.css";s:15:"publicExtension";s:3:"css";s:7:"content";s:7262:"@keyframes border-load{
    0%{ --border-load: 0% }
    10%{ --border-load: 0% }
    100%{ --border-load: 100% }
}
@property --border-load {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}
header,
.section-intro{
    --border-load: 100%;
    animation: border-load 2s var(--ease-circ);
}
.header-menu-wrapper,
.header-right{
    --border-load: inherit;
    border-image: linear-gradient( to bottom, rgba(217, 217, 217, 0.5) var(--border-load), transparent var(--border-load), transparent 100%) 1 100%;
}
.section-intro:after{
    border-top: 2px solid transparent;
    --border-load: inherit;
    border-image: linear-gradient( to right, rgba(217, 217, 217, 0.5) var(--border-load), transparent var(--border-load), transparent 100%) 1 0;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}
.header-menu-wrapper{
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    width: var(--header-width);
    height: 100%;
    border-right: 1px solid transparent;
}
.header-menu-wrapper > *{
    pointer-events: all;
}
.header-menu-button{
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    background-color: var(--denipol-red);
    position: relative;
    z-index: 102 !important;
}
.header-menu-button .icon{
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.header-menu-button .icon .line{
    width: 30px;
    height: 3px;
    background-color: white;
    transform-origin: center;
    transform: none;
    transition: 1s transform !important;
    transition-timing-function: var(--ease-elastic) !important;
}
.header-menu-wrapper.active .icon .line:nth-child(1){
    transform: translateY(10px) rotate(45deg)
}
.header-menu-wrapper.active .icon .line:nth-child(2){
    transform: scaleX(0)
}
.header-menu-wrapper.active .icon .line:nth-child(3){
    transform: translateY(-10px) rotate(-45deg)
}
.header-right{
    position: absolute;
    top: 0;
    right: 0;
    width: var(--header-width);
    height: 100%;
    z-index: 101;
    border-left: 1px solid transparent;
}
.header-right > *{
    pointer-events: all;
}
.header-right-button{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
    background-color: #3C6888;
}
.header-right-button:hover{
    background-color: #4c83ab;
}
.header-right-button:before,
.header-right-button:after{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, .15);
    transition: 250ms all;
    transition-timing-function: var(--ease-circ);
    pointer-events: none;
}
.header-right-button:before{
    top: -65%;
    left: -10%;
}
.header-right-button:after{
    top: -0%;
    left: 75%;
}
.header-right-button img{
    position: relative;
    z-index: 1;
}
.header-right-button:hover:before,
.header-right-button:hover:after{
    top: 0;
    left: 0;
    right: unset;
    border-radius: 0;
}
.header-right-check-up .check-up-band{
    top: var(--header-width);
    width: var(--header-width);
    background-color: var(--denipol-darkblue);
    justify-content: center;
    opacity: 0;
    transition: 250ms opacity;
    pointer-events: none;
    transition-timing-function: var(--ease-circ);
}
header:has(> .header-menu-wrapper.active) .header-right-check-up .check-up-band{
    opacity: 1;
    pointer-events: all;
}


/*------------------------------------*\
  # HEADER MENU
\*------------------------------------*/

.header-menu-wrapper.active {
    z-index: 101 !important;
}
.header-menu-wrapper.active .header-menu-button{
    transition: 250ms background-color 250ms;
    background-color: transparent;
}
header:has(.header-menu-wrapper.active) .header-right-button{
    background-color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 102 !important;
}
header:has(.header-menu-wrapper.active) .header-right-button img{
    content: url("../../img/denipolLifeDark-vp98u5A.png");
}
header:has(.header-menu-wrapper.active) .header-right-button:before,
header:has(.header-menu-wrapper.active) .header-right-button:after{
    content: none;
}
.header-menu-container{
    position: fixed;
    width: 100%;
    height: 0%;
    padding: 0 var(--header-width);
    opacity: 0;
    pointer-events: none;
    transition: 500ms all !important;
    transition-timing-function: var(--ease-circ) !important;
}
.header-menu-wrapper.active .header-menu-container{
    background: rgba(225, 14, 53, .95);
    opacity: 1;
    height: 100%;
    pointer-events: all;
} 
.header-menu{
    width: 100%;
    height: 100%;
    border-left: 1px solid rgba(255, 255, 255, .5);
    border-right: 1px solid rgba(255, 255, 255, .5);
    padding: 200px 40px 40px;
}
.header-menu-wrapper .logo{
    top: 42px;
    letter-spacing: -1px;
}
.header-menu-wrapper .logo,
body:has(.header-menu-wrapper.active) .section-intro .dsg-button,
body:has(.header-menu-wrapper.active) > .media{
    position: fixed;
    z-index: 101;
    color: white !important;
}
.header-menu-wrapper .logo span{
    color: white !important;
}
body:has(.header-menu-wrapper.active) > .media{
    left: 0;
}


/* Menu Items */

.header-menu-item{
    font-size: 2.5rem;
    overflow: hidden;
}
.header-menu-item > a{
    color: var(--denipol-darkblue);
    transition: 500ms all, 500ms transform 100ms;
    transition-timing-function: var(--ease-elastic);
    display: inline-block;
    transform: translateY(100%);
    font-weight: 600;
    padding: 5px 0;
}
.header-menu-item > a:hover{
    color: #fff;
}
.header-menu-wrapper:not(.active) .header-menu-item a{
    transition: 500ms all, 500ms transform !important;
}
.header-menu-wrapper.active .header-menu-item a{
    transform: translateY(0);
}
.header-menu-item.active > a{
    color: #fff;
}
.header-menu-item .switch{
    cursor: pointer;
    transition: 500ms all;
    transition-timing-function: var(--ease-elastic);
}
.header-menu-item.active .switch{
    transform: rotate(180deg);
}
.header-menu-item.active .switch{
    filter: brightness(0) invert(1);
}
.header-menu-item .sub-menu{
    font-size: 1rem;
    height: 0;
    overflow: hidden;
    transition: 400ms all, 0ms padding-left 500ms;
    transition-timing-function: var(--ease-circ);
}
.header-menu-item.active .sub-menu{
    height: 240px;
    padding: 20px 0 40px 100px;
    transition: 400ms all, 0ms padding-left 0ms;
    transition-timing-function: var(--ease-circ);
}
.header-menu-wrapper.active .header-menu-item ul{
    max-height: 180px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.header-menu-wrapper .header-menu-item ul a{
    color: white;
    padding: 2px 10px;
}
.header-menu-wrapper.active .header-menu-item ul a:hover{
    color: var(--denipol-darkblue);
}

header .dsg-button{
    position: absolute;
    bottom: 20%;
    opacity: 0;
    transition: 250ms opacity;
    transition-timing-function: var(--ease-circ);
}
header:has(.header-menu-wrapper.active) .dsg-button{
    opacity: 1
}";s:6:"digest";s:32:"9b0ca6c40aeb59d101df4264a0f9e967";s:13:"isPredigested";b:0;s:11:"logicalPath";s:28:"styles/components/header.css";s:8:"isVendor";b:0;s:55:" Symfony\Component\AssetMapper\MappedAsset dependencies";a:1:{i:0;O:41:"Symfony\Component\AssetMapper\MappedAsset":12:{s:10:"sourcePath";s:70:"/home/technoon/public_html/demo/denipol/assets/img/denipolLifeDark.png";s:10:"publicPath";s:39:"/assets/img/denipolLifeDark-vp98u5A.png";s:23:"publicPathWithoutDigest";s:31:"/assets/img/denipolLifeDark.png";s:15:"publicExtension";s:3:"png";s:7:"content";N;s:6:"digest";s:32:"be9f7cbb9006e3ffe0ff45a0edb5d01c";s:13:"isPredigested";b:0;s:11:"logicalPath";s:23:"img/denipolLifeDark.png";s:8:"isVendor";b:0;s:55:" Symfony\Component\AssetMapper\MappedAsset dependencies";a:0:{}s:59:" Symfony\Component\AssetMapper\MappedAsset fileDependencies";a:0:{}s:60:" Symfony\Component\AssetMapper\MappedAsset javaScriptImports";a:0:{}}}s:59:" Symfony\Component\AssetMapper\MappedAsset fileDependencies";a:0:{}s:60:" Symfony\Component\AssetMapper\MappedAsset javaScriptImports";a:0:{}}