/*================================
GENERAL
================================*/
html{ display:block; height:100%; overflow:hidden; }
body{ display:block; height:100%; overflow:hidden; margin:0; padding:0; background-color:white; }
.container{ display:block; width:100%; max-width:1000px; margin:auto; box-sizing:border-box; padding:0 20px; }

a{ font-style:none; }
button{
    display:inline-block; margin:20px 0 0 0; box-sizing:border-box; padding:0 30px;
    background-color:#48588F; background:linear-gradient(135deg, rgba(95,93,171,1) 50%, rgba(192,166,231,1) 100%);
    border:none; border-bottom:5px solid #55C0BD; border-radius:100px;
    cursor:pointer; -webkit-appearance:none; -moz-appearance:none;
    line-height:40px; font-family:Montserrat; font-size:20px; font-weight:400; color:white;
}
hr.dynatechgradient{ display:block; border:none; height:2px; background:-webkit-linear-gradient(60deg, #927fa6, #3da5e0); }
hr.dynaversegradient{ display:block; border:none; height:2px; background:linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(165,55,55,1) 25%, rgba(121,9,55,1) 50%, rgba(255,156,0,1) 100%); }



/*============================================================
HEADER
============================================================*/
.header{ position:sticky; z-index:+1; top:0; left:0; display:block; width:100%; height:80px; box-sizing:border-box; padding:15px 0; overflow:visible; background-color:white; box-shadow:0 0 10px rgba(0,0,0,0.1); }

.header .headerlogo{ display:inline-block; vertical-align:middle; width:50px; height:50px; box-sizing:border-box; padding:0; }
.header .headerlogo img{ object-fit:contain; width:100%; height:100%; pointer-events:none; }

.header .headertext{ display:inline-block; vertical-align:middle; width:230px; margin:0; box-sizing:border-box; padding-left:10px; }
.header .headertext h1{ display:block; width:100%; margin:0; box-sizing:border-box; color:white; font-family:Montserrat; font-size:24px; font-weight:600; }
.header .headertext h1{ background:-webkit-linear-gradient(60deg, #202020, #202020); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.header .headertext h2{ display:block; width:100%; margin:0; box-sizing:border-box; color:white; font-family:Montserrat; font-size:13px; font-weight:500; }
.header .headertext h2{ background:-webkit-linear-gradient(60deg, #202020, #75cdfe); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

.header .headermenu{ display:inline-block; vertical-align:middle; width:calc(100% - 390px); height:calc(100% - 10px); margin-right:10px; box-sizing:border-box; padding:0; cursor:pointer; background:-webkit-linear-gradient(60deg, #927fa6, #3da5e0); border-radius:100px; }

.header .headermenu .desktop{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; height:100%; padding:0 20px; }
.header .headermenu .desktop .headercell{ flex:1 0 auto; text-align:center; cursor:pointer; }
.header .headermenu .desktop .headercell button{ opacity:0.6; transition:0.3s; height:100%; margin:0; box-sizing:border-box; padding:0 10px; border-radius:0; background:initial; background-color:transparent; border-bottom:3px solid transparent; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; text-align:right; cursor:pointer; line-height:40px; font-family:Montserrat; font-size:15px; font-weight:500; color:white; }
.header .headermenu .desktop .headercell.current button{ opacity:1; border-bottom-color:rgb(247,232,106); }
.header .headermenu .desktop .headercell:hover button{ border-bottom-color:grey; }
.header .headermenu .desktop .headercell.current:hover button{ border-bottom-color:rgb(247,232,106); }

.header .headermenu .mobile{ display:none; height:100%; box-sizing:border-box; padding:0; text-align:center; }
.header .headermenu .mobile button{ display:inline-block; width:100%; height:100%; margin:0; box-sizing:border-box; padding:10px; background:initial; background-color:transparent; border:none; }
.header .headermenu .mobile button img{ object-fit:contain; width:100%; height:100%; pointer-events:none; }

.header .headerlang{ display:inline-block; vertical-align:middle; width:70px; height:80px; box-sizing:border-box; padding:0; text-align:right; }
.header .headerlang a{ width:auto; height:auto; }
.header .headerlang a button{ transition:0.3s; display:inline-block; width:50px; height:100%; margin:0; box-sizing:border-box; padding:0; border-radius:0; background:initial; background-color:#353535; border:none; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; text-align:center; cursor:pointer; line-height:50px; font-family:Montserrat; font-size:18px; font-weight:500; color:white; }
.header .headerlang a button img{ object-fit:contain; width:50%; height:50%; filter:invert(99%) sepia(38%) saturate(19%) hue-rotate(275deg) brightness(105%) contrast(104%); }

.header .headerlogin{ display:inline-block; vertical-align:middle; width:100px; height:calc(100% - 10px); box-sizing:border-box; padding:0; cursor:pointer; }
.header .headerlogin .desktop{ display:block; height:100%; box-sizing:border-box; padding:0; text-align:center; height:100%; }
.header .headerlogin .mobile{ display:none; height:100%; box-sizing:border-box; padding:0; text-align:center; height:100%; }
.header .headerlogin button{ display:block; width:100%; height:100%; margin:0; box-sizing:border-box; padding:0; background:#408DC2; border-radius:100px; border:none; text-align:center; }
.header .headerlogin button span{ display:inline-block; vertical-align:middle; line-height:10px; font-family:Montserrat; font-size:10px; font-weight:400; color:white; }
.header .headerlogin button img{ display:inline-block; vertical-align:middle; width:15px; height:15px; margin-right:5px; filter:invert(100%); opacity:0.85; }

@media(max-width:900px){
    .header .headertext{ width:calc(100% - 140px); }
    .header .headermenu{ width:40px; }
    .header .headermenu .desktop{ display:none; }
    .header .headermenu .mobile{ display:block; }
    .header .headerlogin{ width:40px; }
    .header .headerlogin .desktop{ display:none; }
    .header .headerlogin .mobile{ display:block; }
    .header .headerlogin button img{ margin-right:0; }
}



/*============================================================
OVERLAY SHADOW
============================================================*/
.overlayshadow{ pointer-events:none; position:absolute; z-index:+1; top:80px; bottom:80px; left:-20px; right:-20px; width:initial; height:initial; box-shadow:inset 0 0 10px rgba(0,0,0,0.5); }



/*============================================================
SCROLL
============================================================*/
.scroll{ position:relative; display:block; width:100%; height:calc(100% - 80px); scroll-snap-type:y mandatory; overflow:auto; }
.scroll .screen{ position:relative; display:block; width:100%; height:100%; box-sieing:border-box; padding:40px 0; }
.scroll .screen.snapstart{ scroll-snap-align:start; }
.scroll .screen.snapend{ scroll-snap-align:end; }
.scroll .screen.nosnap{ scroll-snap-align:none; }
.scroll .screen.hauto{ height:auto; }
.scroll .screen.h100{ height:100%; }
.scroll .screen.h90{ height:90%; }
.scroll .screen.h85{ height:85%; }
.scroll .screen.h80{ height:80%; }
.scroll .screen.h75{ height:75%; }
.scroll .screen.h65{ height:65%; }
.scroll .screen.h50{ height:50%; }
.scroll .screen.h35{ height:35%; }
.scroll .screen.mh35{ min-height:35%; }
.scroll .screen.mh50{ min-height:50%; }
.scroll .screen.mh100{ min-height:100%; }
.scroll .screen.white{ background-color:white; }
.scroll .screen.whitesmoke{ background-color:rgb(240,242,244); }
.scroll .screen.black{ background-color:black; }
.scroll .screen.darkgrey{ background-color:rgb(50,50,50); }
.scroll .screen.blue{ background-color:blue; }
.scroll .screen.textured{ background-image:url('../img/dynaverse_textured.jpg'); background-size:cover; background-position:center; }
.scroll .screen.black.textured{ background-image:url('../img/dynaverse_textured.jpg'); background-size:cover; background-position:center; }
.scroll .screen.white.textured{ background-image:url('../img/dynatech_textured.jpg'); background-size:cover; background-position:center; }

.scroll .screen .background{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.scroll .screen .background img{ object-fit:cover; width:100%; height:100%; pointer-events:none; animation:8s infinite alternate animateimage; }
@keyframes animateimage {
  from {
    transform:scale(1.0);
  }
  to {
    transform:scale(1.2);
  }
}

/* Screen content */
.scroll .screen section{ margin-bottom:40px; }
.scroll .screen section:last-child{ margin-bottom:0; }
.scroll .screen h1{ display:block; margin:0; margin-bottom:40px; color:#505050; font-family:Montserrat; font-size:40px; font-weight:600; }
.scroll .screen h1.black{ color:#202020; }
.scroll .screen h1.white{ color:white; }
.scroll .screen h1.gradient{ background:linear-gradient(120deg, rgba(135, 54, 216, 1), rgba(60, 162, 254, 1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
.scroll .screen h2{ display:block; margin:0; margin-bottom:10px; color:#505050; font-family:Montserrat; font-size:30px; font-weight:500; }
.scroll .screen h2.gradient{ background:linear-gradient(120deg, rgba(135, 54, 216, 1), rgba(60, 162, 254, 1)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
.scroll .screen h3{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:18px; font-weight:600; text-decoration:none; }
.scroll .screen p{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:16px; font-weight:500; text-decoration:none; }
.scroll .screen i{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; font-style:italic; }
.scroll .screen .textalign-center, .scroll .screen .textalign-center>*{ text-align:center!important; }
.scroll .screen .textalign-left, .scroll .screen .textalign-left>*{ text-align:left!important; }
.scroll .screen .textalign-right, .scroll .screen .textalign-right>*{ text-align:right!important; }




/*=============================================
HEADER
=============================================*/
/* General */
.scroll .screen.header{}
/* Header desc */
.scroll .screen .description{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:block; width:100%; max-width:100%; height:auto; min-height:0; margin:auto; box-sizing:border-box; padding:0; }
.scroll .screen .description.top{ top:0; bottom:initial; background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); }
.scroll .screen .description.bottom{ padding-top:100px; top:initial; bottom:0; background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
.scroll .screen .description .container{ display:block; width:100%; max-width:1000px; margin:auto; box-sizing:border-box; padding:0 20px; }
.scroll .screen .description h1{ display:block; margin:0; margin-bottom:10px; font-family:Montserrat; font-size:40px; font-weight:600; }
.scroll .screen .description h2{ display:block; margin:0; margin-bottom:10px; font-family:Montserrat; font-size:30px; font-weight:500; }
@media(max-width:1100px){
    /* .scroll .screen .description{ padding-bottom:50px; } */
    .scroll .screen .description h1{ font-size:40px; }
    .scroll .screen .description h2{ font-size:27px; }
}
@media(max-width:900px){
    /* .scroll .screen .description{ padding-bottom:50px; } */
    .scroll .screen .description h1{ font-size:35px; }
    .scroll .screen .description h2{ font-size:16px; }
}
/* Play button */
.scroll .screen .play{ position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); width:auto; max-width:calc(100% - 20px); height:auto; margin:0; box-sizing:border-box; padding:0 20px 0 80px; background-color:rgb(40,150,40); border:none; border-radius:10px; opacity:0.90; cursor:pointer; text-decoration:none; line-height:60px; text-align:left; font-family:Montserrat; font-size:18px; font-weight:500; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scroll .screen .play:before{ content:""; position:absolute; z-index:+1; top:50%; left:15px; transform:translate(0,-50%); display:block; width:30px; height:30px; background-color:white; clip-path:polygon(0 0, 0% 100%, 100% 50%); }
.scroll .screen .play:after{ content:""; position:absolute; z-index:+1; top:0; left:60px; display:block; width:1px; height:100%; background-color:rgba(255,255,255,0.25); }
@media(max-width:900px){
    .scroll .screen .play{ position:absolute; top:35%; }
    .scroll .screen .play:before{}
    .scroll .screen .play:after{}
}



/*=============================================
TITLE BLOCK
=============================================*/
.scroll .screen .title{ position:relative; width:100%; height:auto; margin:auto; box-sizing:border-box; padding:20px 0; }
.scroll .screen .title.top{ top:0; bottom:initial; }
.scroll .screen .title.bottom{ top:initial; bottom:0; }
.scroll .screen .title h1{ display:block; margin:0; margin-bottom:10px; color:white; font-family:Montserrat; font-size:40px; font-weight:600; }
.scroll .screen .title h2{ display:block; margin:0; margin-bottom:10px; color:white; font-family:Montserrat; font-size:25px; font-weight:500; }
@media(max-width:900px){
    .scroll .screen .title h1{ font-size:23px; }
}



/*=============================================
TEXT BLOCK
=============================================*/
.scroll .screen .text{ position:relative; top:0; left:0; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; gap:20px; width:100%; height:auto; margin:0 auto; box-sizing:border-box; padding:20px 0; overflow:auto; }
.scroll .screen .text section{ margin-bottom:40px; }
.scroll .screen .text h1{ display:block; margin:0; margin-bottom:10px; color:#505050; font-family:Montserrat; font-size:40px; font-weight:600; }
.scroll .screen .text h2{ display:block; margin:0; margin-bottom:10px; color:#505050; font-family:Montserrat; font-size:30px; font-weight:600; }
.scroll .screen .text h3{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:18px; font-weight:600; text-decoration:none; }
.scroll .screen .text p{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:16px; font-weight:500; text-decoration:none; }
.scroll .screen .text i{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:left; color:#505050; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; font-style:italic; }



/*=============================================
PRESENTATION
=============================================*/
.presentation{ display:block; width:100%; margin-bottom:0; text-align:center; }
.presentation h1{ display:block; width:100%; max-width:800px; height:auto; margin:0 auto 40px auto; text-align:center; font-family:Montserrat; font-size:26px; font-weight:600; color:#0076BA; }
.presentation h1 b{ color:#E3933D; font-weight:600; }
.presentation .approach{ display:inline-block; vertical-align:middle; width:50%; max-width:600px; }
.presentation .approach .cell{ position:relative; display:inline-block; vertical-align:middle; width:100%; height:auto; box-sizing:border-box; }
.presentation .approach .cell.top{ width:100%; }
.presentation .approach .cell.left{ width:33.33%; }
.presentation .approach .cell.middle{ width:33.33%; box-sizing:border-box; padding:10px 20px; }
.presentation .approach .cell.right{ width:33.33%; }
.presentation .approach .cell.bottom{ width:100%; }
.presentation .approach .cell span{ display:block; width:100%; height:auto; text-align:center; font-family:Montserrat; font-size:16px; font-weight:500; color:#2C4B73; }
.presentation .approach .cell span b{ display:block; color:#408DC2; font-size:22px; font-weight:500; }
.presentation .approach .cell span i{ display:block; text-align:center; font-style:italic; font-weight:300; }
.presentation .approach .cell.left span{ text-align:right; }
.presentation .approach .cell.middle span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#E3933D; padding-left:15px; }
.presentation .approach .cell.right span{ text-align:left; }
.presentation .approach .cell img.circular{ display:block; width:100%; height:auto; }
.presentation .ticks{ display:inline-block; vertical-align:middle; width:auto; max-width:50%; box-sizing:border-box; padding-left:40px }
.presentation .ticks span{ display:block; width:100%; height:auto; margin-bottom:20px; text-align:left; font-family:Montserrat; font-size:16px; font-weight:500; color:#2C4B73; }
.presentation .ticks span img{ vertical-align:middle; width:30px; height:30px; margin-right:10px; }
.presentation .ticks span i{ display:block; font-style:italic; font-weight:300; }
@media(max-width:900px){
    .presentation h1{ font-size:18px; }
    .presentation .approach{ width:100%; margin-bottom:40px; }
    .presentation .approach .cell span{ font-size:13px; }
    .presentation .approach .cell.middle span{ display:none; }
    .presentation .ticks{ width:100%; max-width:600px; padding:0; }
}




/*=============================================
IPHONE
=============================================*/
.scroll .screen section.iphonescroll{ display:block; max-width:1000px; margin:auto; margin-top:40px; box-sizing:border-box; padding-bottom:20px; text-align:center; white-space:nowrap; overflow:auto; }
.scroll .screen section.iphonescroll .iphone{ display:inline-block; vertical-align:middle; }
.scroll .screen .iphone{ position:relative; width:300px; height:auto; margin:0px calc( (50% - 300px) / 2 ); }
.scroll .screen .iphone .dummy{ padding-top:203%; }
.scroll .screen .iphone iframe{ position:absolute; top:10px; left:10px; display:block; width:calc(100% - 20px); height:calc(100% - 20px); margin:0; border:none; background-color:black; border-radius:40px; }
.scroll .screen .iphone img.screenshot{ pointer-events:none; position:absolute; top:12px; left:12px; display:block; width:calc(100% - 24px); height:calc(100% - 24px); margin:0; border:none; background-color:black; border-radius:40px; }
.scroll .screen .iphone img.frame{ pointer-events:none; position:absolute; top:0; left:0; object-fit:contain; width:100%; height:100%; }
@media(max-width:900px){
    .scroll .screen .iphone{ margin:0 20px; }
}



/*=============================================
GRID
=============================================*/
.scroll .screen .grid{ position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:20px; width:100%; height:auto; margin:0 auto; box-sizing:border-box; padding:0; }
.scroll .screen .grid .cell{ flex:1 1 calc(50% - 10px); height:auto; box-sizing:border-box; }
@media(max-width:900px){
    .scroll .screen .grid .cell{ flex:1 1 100%; }
}



/*=============================================
FLEX-ALTERNATE
=============================================*/
.scroll .screen .flex-alternate{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.scroll .screen .flex-alternate .flex-alternate-left{ display:flex; flex:1 1 50%; justify-content:right; }
.scroll .screen .flex-alternate .flex-alternate-right{ display:flex; flex:1 1 50%; justify-content:left; }
.scroll .screen .flex-alternate .flex-alternate-content{ display:block; width:100%; max-width:500px; box-sizing:border-box; padding:0 10px; text-align:center; }
.scroll .screen .flex-alternate .flex-alternate-content h2{  }
.scroll .screen .flex-alternate .flex-alternate-content h3{  }
.scroll .screen .flex-alternate .flex-alternate-content p{  }
.scroll .screen .flex-alternate .flex-alternate-content img{ display:inline-block; width:100%; max-width:500px; object-fit:contain; }
@media(max-width:900px){
    .scroll .screen .flex-alternate .mobile-order-1{ order:1; flex:0 0 100%; justify-content:center; margin-bottom:40px; }
    .scroll .screen .flex-alternate .mobile-order-2{ order:2; flex:0 0 100%; justify-content:center; }
}



/*=============================================
FLEX-CENTER
=============================================*/
.scroll .screen .flex-center{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; }
.scroll .screen .flex-center p{ text-align:center; }
.scroll .screen .flex-center img{ display:block; width:100%; max-width:500px; margin:auto; object-fit:contain; }



/*=============================================
PRICING
=============================================*/
.scroll .screen .pricing{ display:flex; flex-wrap:wrap; justify-content:center; width:100%; max-width:1000px; margin:auto; box-sizing:border-box; padding:0 10px; background-color:transparent; text-align:center; }
.scroll .screen .pricing .cell{ flex:0 0 33.33%; box-sizing:border-box; padding:0 10px; }
.scroll .screen .pricing .cell .card{ position:relative; text-align:center; padding-bottom:100px; background-color:transparent; }
.scroll .screen .pricing .cell .card .content{  box-sizing:border-box; padding:20px 10px; background-color:rgb(220,235,242); overflow:hidden; }
.scroll .screen .pricing .cell .card:after{
    content:"";
    position:absolute; left:0; bottom:0;
    display:block; width:100%; height:100px;
    background-color:rgb(220,235,242); clip-path:polygon(100% 0, 100% 100%, 50% 50%, 0 100%, 0 0);
}
.scroll .screen .pricing .cell .card h3{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:center; color:#505050; font-family:Montserrat; font-size:18px; font-weight:600; text-decoration:none; }
.scroll .screen .pricing .cell .card h4{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:center; color:#505050; font-family:Montserrat; font-size:18px; font-weight:500; text-decoration:none; }
.scroll .screen .pricing .cell .card h5{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:center; color:#505050; font-family:Montserrat; font-size:18px; font-weight:400; text-decoration:none; }
.scroll .screen .pricing .cell .card p{ position:relative; display:block; height:auto; margin:0 0 10px 0; text-align:center; color:#505050; font-family:Montserrat; font-size:16px; font-weight:300; text-decoration:none; }
@media(max-width:900px){
    .scroll .screen .pricing .cell{ flex:0 0 50%; padding:0 5px; margin-bottom:10px; }
}



/*=============================================
CUSTOMERS
=============================================*/
.scroll .screen .customers{}
.scroll .screen .customers ul.keypoints{ display:block; margin:0 auto; max-width:600px; padding:0; list-style:none; }
.scroll .screen .customers ul.keypoints li{ display:block; width:100%; height:auto; margin:0 0 20px 0; box-sizing:border-box; padding:0; background-color:white; line-height:initial; text-align:left; font-family:Montserrat; font-size:18px; font-weight:500; color:#2C4B73; }
.scroll .screen .customers .reviews{ box-sizing:border-box; padding:20px 0 0 0; }
.scroll .screen .customers .reviews .cell{ position:relative; display:inline-block; width:33.33%; margin:0; vertical-align:top; padding:0 10px; box-sizing:border-box; }
@media(max-width:900px){
    .scroll .screen .customers .reviews .cell{ width:50%; }
}
.scroll .screen .customers .reviews .cell .card{ position:relative; margin-bottom:20px; padding:20px 10px; border-radius:20px; box-sizing:border-box; background-color:white; box-shadow:0px 0px 40px rgba(0,0,0,0.05); }
.scroll .screen .customers .reviews .cell .card .company-logo{ display:block; margin:auto; width:100%; max-width:80px; height:80px; margin-bottom:10px; border-radius:10px; box-sizing:border-box; overflow:hidden; border:1px solid rgba(0,0,0,0.05); }
.scroll .screen .customers .reviews .cell .card .company-logo img{ object-fit:cover; width:100%; height:100%; }
.scroll .screen .customers .reviews .cell .card .company-name{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; margin-bottom:0; padding:0; font-family:"Montserrat"; font-size:14px; font-weight:600; color:#5f6368; }
.scroll .screen .customers .reviews .cell .card .company-desc{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; margin-bottom:0; padding:0; font-family:"Montserrat"; font-size:12px; font-weight:500; color:#8f8f8f; }



/*=============================================
KEYPOINTS
=============================================*/
.scroll .screen .keypoints{ margin:40px 0 0 0; }
.scroll .screen .keypoints .keypoint{ display:flex; align-items:center; }
.scroll .screen .keypoints .keypoint .image{ flex:0 0 70px; height:70px; }
.scroll .screen .keypoints .keypoint .image img{ object-fit:contain; width:100%; height:100%; filter:invert(54%) sepia(79%) saturate(1786%) hue-rotate(183deg) brightness(88%) contrast(97%); }
.scroll .screen .keypoints .keypoint .text{ flex:0 0 calc(100% - 70px); display:block; box-sizing:border-box; padding-left:20px; }
.scroll .screen .keypoints .keypoint .text h3{ margin:0 0 10px 0; }
.scroll .screen .keypoints .keypoint .text p{}



/*=============================================
PRODUCT
=============================================*/
.scroll .screen .products{ margin:40px 0 0 0; }
.scroll .screen .products .product{ display:flex; flex-wrap:wrap; flex-direction:row; align-items:center; justify-content:center; padding:0; background-color:white; border-radius:10px; border:none; background:linear-gradient(-20deg, #505050 0%, #202020 100%); }
.scroll .screen .products .product .illustration{ flex:0 0 100%; display:block; width:100%; height:200px; background-color:transparent; border-radius:10px; overflow:hidden; }
.scroll .screen .products .product .illustration img{ object-fit:cover; width:100%; height:100%; pointer-events:none; }
.scroll .screen .products .product .presentation{ flex:0 0 100%; display:block; width:100%; height:auto; box-sizing:border-box; padding:10px; }
.scroll .screen .products .product .presentation h1{ display:block; height:auto; margin:0px 0px 5px 0px; font-family:Montserrat; font-size:16px; font-weight:600; color:white; overflow:hidden; }
.scroll .screen .products .product .presentation h2{ display:block; height:auto; margin:0px 0px 5px 0px; font-family:Montserrat; font-size:14px; font-weight:500; color:#39d969; overflow:hidden; }
.scroll .screen .products .product .presentation h3{ display:block; height:auto; margin:0px 0px 0px 0px; font-family:Montserrat; font-size:14px; font-weight:400; color:white; overflow:hidden; }
.scroll .screen .products .product .actions{ display:flex; gap:20px; width:100%; height:auto; margin:10px auto; box-sizing:border-box; padding:10px; }
.scroll .screen .products .product a{ flex:1 1 calc(50% - 10px); box-sizing:border-box; padding:10px 30px; border-radius:100px; background-color:grey; text-align:center; font-family:Montserrat; font-size:13px; font-weight:500; color:white; text-decoration:none; overflow:hidden; }
.scroll .screen .products .product .example{ background-color:grey; }
.scroll .screen .products .product .order{ background-color:#3491de; }



/*=============================================
MENU
=============================================*/
.scroll .screen .menu{ position:absolute; top:0; left:0; display:flex; flex-direction:row; flex-wrap:wrap; gap:20px; width:100%; height:calc(100% - 80px); margin:0 auto; box-sizing:border-box; padding:0 20px; overflow:auto; }
.scroll .screen .menu a{ display:block; margin:40px 0; text-align:center; color:white; font-family:Montserrat; font-size:30px; font-weight:500; cursor:pointer; text-decoration:none; }
.scroll .screen .menu a:first-child{ margin-top:0; }
.scroll .screen .menu a:last-child{ margin-bottom:0; }
@media(max-height:700px){
    .scroll .screen .menu a{ margin:25px 0; font-size:27px; }
}
@media(max-height:600px){
    .scroll .screen .menu a{ margin:20px 0; font-size:25px; }
}
@media(max-height:500px){
    .scroll .screen .menu a{ margin:10px 0; font-size:20px; }
}



/*=============================================
TEAM
=============================================*/
.scroll .screen.team{}
.scroll .screen.team .teamrow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.scroll .screen.team .teamrow .teamcell{ display:flex; flex:1 1 50%; justify-content:center; }
.scroll .screen.team .teamrow .teamcell.left{ justify-content:left; }
.scroll .screen.team .teamrow .teamcell.right{ justify-content:right; }
.scroll .screen.team .teamrow .teamcell .teamcontent{ display:block; width:100%; max-width:500px; box-sizing:border-box; padding:0 10px; text-align:center; }
@media(max-width:900px){
    .scroll .screen.team .teamrow{ margin-bottom:40px; }
    .scroll .screen.team .teamrow .teamcell.mobile-order-1{ order:1; flex:0 0 100%; justify-content:center; }
    .scroll .screen.team .teamrow .teamcell.mobile-order-2{ order:2; flex:0 0 100%; justify-content:center; }
    .scroll .screen.team .teamrow .teamcell .teamcontent>*{ text-align:center!important; }
}

.scroll .screen.team .teamcard{ position:relative; display:block; width:300px; height:300px; margin:auto; }
.scroll .screen.team .teamcard span.circle{ position:absolute; top:0; left:0; object-fit:cover; width:70%; height:70%; border-radius:1000px; background-color:rgb(120,180,220); }
.scroll .screen.team .teamcard div.imgcontainer{ position:absolute; top:10%; left:10%; object-fit:cover; width:80%; height:80%; border-radius:60px; overflow:hidden; }
.scroll .screen.team .teamcard div.imgcontainer img.person{ object-fit:cover; width:100%; height:100%; pointer-events:none; }
/* .scroll .screen.team h2{ margin-bottom:20px; }
.scroll .screen.team p{ margin-bottom:40px; }
.scroll .screen.team .teamgrid{ display:flex; flex-wrap:wrap; align-items:start; text-align:center; gap:10px; margin-bottom:40px; }
.scroll .screen.team .teamcell{ flex:0 1 200px; }
.scroll .screen.team .teamcard{ box-sizing:border-box; padding:10px; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); -moz-backdrop-filter:blur(20px); box-shadow:0px 0px 40px rgba(0,0,0,0.05); border-radius:5px; border: 1px solid rgb(50,50,50); overflow:hidden; }
.scroll .screen.team .teamcard .rect{ display:block; width:calc(100% + 20px); height:200px; margin:-10px -10px 10px -10px; background-color:grey; border-radius:0; }
.scroll .screen.team .teamcard .rect img{ pointer-events:none; width:100%; height:100%; object-fit:cover; object-position:top; }
.scroll .screen.team .teamcard .name{ display:block; margin-bottom:5px; text-align:left; color:white; font-family:Montserrat; font-size:16px; font-weight:600; text-decoration:none; }
.scroll .screen.team .teamcard .job{ display:block; text-align:left; color:white; font-family:Montserrat; font-size:13px; font-weight:400; text-decoration:none; } */



/*=============================================
CONTACT FORM
=============================================*/
.scroll .screen.contact .form{ position:relative; width:100%; max-width:800px; height:auto; margin:0 auto; margin-top:40px; box-sizing:border-box; padding:40px 20px 20px 20px; border-radius:10px; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); -moz-backdrop-filter:blur(20px); box-shadow:0px 0px 40px rgba(0,0,0,0.05); overflow:hidden; }
.scroll .screen.contact .form .field{ display:inline-block; vertical-align:top; box-sizing:border-box; width:100%; margin-bottom:20px; }
.scroll .screen.contact .form .field label{ display:block; width:100%; margin:0px 0px 5px 0px; background-color:transparent; font-family:"AvenirNextCondensed-Medium"; font-size:16px; font-weight:600; line-height:initial; color:#202020; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-align:left; }
.scroll .screen.contact .form .field input{ display:block; width:100%; max-width:100%; margin:0px 0px 0px 0px; height:50px; padding:6px 12px; background-color:rgb(240,242,244); border:none; border-radius:0; font-size:16px; font-weight:400; color:rgb(67,72,73); -webkit-appearance:none; -moz-appearance:none; box-sizing:border-box; transition:box-shadow 0.3s; outline-width:0; outline:none; }
.scroll .screen.contact .form .field textarea{ display:block; width:100%; min-width:100%; max-width:100%; height:150px; min-height:150px; max-height:150px; margin:0; padding:6px 12px; background-color:rgb(240,242,244); border:none; border-radius:0; font-size:16px; font-weight:400; color:rgb(67,72,73); -webkit-appearance:none; -moz-appearance:none; box-sizing:border-box; transition:box-shadow 0.3s; outline-width:0; outline:none; }



/*=============================================
FOOTER
=============================================*/
footer{ position:relative; bottom:0; display:block; width:100%; height:80px; box-sizing:border-box; padding:0!important; margin:0; background-color:black; }

footer .footercontent{ padding:20px 0; }
footer .footercontent p{ position:relative; display:block; height:auto; margin:0 auto 10px auto; text-align:center; color:grey; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; }
footer .footercontent p a{ color:grey; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; }

footer .footercontent .footerflex{ display:flex; align-items:start; flex-wrap:wrap; gap:40px; }

footer .footercontent .footerflex .links{ flex:0 1 25%; display:flex; flex-wrap:wrap; align-items:center; text-align:left; margin-bottom:0; }
footer .footercontent .footerflex .links h4{ display:block; width:100%; margin:5px 0; line-height:initial; font-family:Montserrat; font-size:18px; font-weight:600; color:#202020; }
footer .footercontent .footerflex .links ul{ display:block; width:100%; margin:0; box-sizing:border-box; padding:0; }
footer .footercontent .footerflex .links ul li{ display:block; width:100%; }
footer .footercontent .footerflex .links ul li a{ display:block; margin:5px 0; color:#202020; text-decoration:none; line-height:initial; font-family:Montserrat; font-size:16px; font-weight:500; }

footer .footercontent .footerflex .socialnetworks{ flex:0 1 25%; margin-bottom:0; }
footer .footercontent .footerflex .socialnetworks h4{ display:block; margin:5px 0; line-height:initial; font-family:Montserrat; font-size:18px; font-weight:600; color:#202020; }
footer .footercontent .footerflex .socialnetworks h5{ display:block; margin:5px 0; line-height:initial; font-family:Montserrat; font-size:14px; font-weight:400; color:#202020; }
footer .footercontent .footerflex .socialnetworks .sngrid{ display:flex; flex-wrap:wrap; align-items:center; text-align:center; margin-top:25px; }
footer .footercontent .footerflex .socialnetworks .sncell{ flex:0 1 80px; }
footer .footercontent .footerflex .socialnetworks .sncell .circle{ display:block; width:50px; height:50px; margin:0; box-sizing:border-box; padding:12px; background-color:grey; border-radius:100px; }
footer .footercontent .footerflex .socialnetworks .sncell .circle img{ pointer-events:none; width:100%; height:100%; object-fit:contain; filter:invert(99%) sepia(1%) saturate(2%) hue-rotate(115deg) brightness(115%) contrast(100%); }
footer .footercontent .footerflex .socialnetworks .sncell .circle.linkedin{  background-color:#347BA3; }
footer .footercontent .footerflex .socialnetworks .sncell .circle.instagram{ background-color:#B567A3; }
footer .footercontent .footerflex .socialnetworks .sncell .circle.youtube{   background-color:#4B739D; }
footer .footercontent .footerflex .socialnetworks .sncell .circle.facebook{  background-color:#bd4655; }

footer .footercontent .footerflex .newsletter{ flex:0 1 calc(50% - 80px); display:flex; flex-wrap:wrap; align-items:center; text-align:center; margin-bottom:0; }
footer .footercontent .footerflex .newsletter .nldesc{ flex:0 1 100%; margin:0; height:auto; text-align:left; margin-bottom:20px; }
footer .footercontent .footerflex .newsletter .nldesc h4{ display:block; margin:5px 0; line-height:initial; font-family:Montserrat; font-size:18px; font-weight:600; color:#202020; }
footer .footercontent .footerflex .newsletter .nldesc h5{ display:block; margin:5px 0; line-height:initial; font-family:Montserrat; font-size:14px; font-weight:400; color:#202020; }
footer .footercontent .footerflex .newsletter .nlfield{ flex:0 1 100%; margin:0; height:auto; text-align:left; }
footer .footercontent .footerflex .newsletter .nlfield input{ display:inline-block; vertical-align:middle; width:calc(100% - 150px); margin:0; height:50px; padding:6px 12px; background-color:rgb(220, 220, 220); border:none; border-radius:5px 0 0 5px; font-size:16px; font-weight:400; color:grey; -webkit-appearance:none; -moz-appearance:none; box-sizing:border-box; transition:box-shadow 0.3s; outline-width:0; outline:none; }
footer .footercontent .footerflex .newsletter .nlfield button{ display:inline-block; vertical-align:middle; width:150px; margin:0; box-sizing:border-box; padding:0; border-radius:0 5px 5px 0; background:initial; background-color:rgb(40,150,40); border-bottom:none; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; text-align:center; line-height:50px; font-family:Montserrat; font-size:16px; font-weight:400; color:white; }

footer .footercontent .copyrights{ padding:20px 0; text-align:center; }
footer .footercontent .copyrights p{ position:relative; display:block; height:auto; margin:0 auto 10px auto; text-align:center; color:grey; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; }
footer .footercontent .copyrights p a{ color:grey; font-family:Montserrat; font-size:16px; font-weight:400; text-decoration:none; }

@media(max-width:900px){
    footer .footercontent .footerflex{ flex-wrap:wrap-reverse; }
    footer .footercontent .footerflex .links{ flex:0 1 100%; }
    footer .footercontent .footerflex .newsletter{ flex:0 1 calc(60% - 20px); }
    footer .footercontent .footerflex .socialnetworks{ flex:0 1 calc(40% - 20px); }
}
@media(max-width:600px){
    footer .footercontent .footerflex .newsletter{ flex:0 1 calc(100% - 0px); }
    footer .footercontent .footerflex .socialnetworks{ flex:0 1 calc(100% - 0px); }
}