html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    line-height: 1.65;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-family: "Roboto Serif", serif;
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.191), 1rem);
}

.alignwide, .alignfull {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
.site-header {
    position: absolute;
    transition: all 0.2s ease-in-out;
    z-index: 100;
    width: 100%;
}
.site-header, .site-main, .site-footer {
    margin-top: 0 !important;
    overflow-x: hidden;
}

.site-header .position-fixed {
    transition: all .15s ease-in-out;
    width: 100%;
}
.site-header .header-wrapper {
    width: 100%;
    box-sizing: border-box !important;
    z-index: 99;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
.position-fixed {
    position: absolute;
    top: 0;
}

@media screen and (max-width: 768px) {
    .site-header .site-nav-wrapper {
        grid-template-areas:
            "nav-logo nav-logo"
            "nav-right nav-left";
    }
}

.site-nav-wrapper {
    padding-top: 18px;
    padding-right: 36px;
    padding-bottom: 18px;
    padding-left: 36px;
    justify-content: center;
}


.is-vertically-aligned-center {
    align-self: center;
}

.block-column {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media screen and (max-width: 1024px) {
    .site-header .site-nav-wrapper .nav-left {
        grid-area: nav-left;
    }
}

@media screen and (max-width: 1024px) {
    .site-header .site-nav-wrapper .nav-logo {
        grid-area: nav-logo;
    }
}

@media screen and (max-width: 1024px) {
    .site-header .site-nav-wrapper .nav-right {
        grid-area: nav-right;
    }
    
}

@media screen and (min-width: 1200px) {
    .flexslider {
        width: 100%!important;
    }
}

body .is-layout-flex {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

body .is-layout-flex {
    display: flex;
}
.site-logo-wrapper {
    position: relative;
}

.block-logo {
    gap: 0;
    flex-direction: column;
    align-items: center;
}

.block-logo h1 {
    margin: 0px;
    padding: 0px;
}

.block-site-title, .block-site-title a {
    color: #ffffff;
    text-decoration: none;
}

.site-main,  .site-footer {
    max-width: 1200;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
}

.site-main > .entry-content {
    margin-top: 0;
}

.block-site-title img {
    height: 80px;
}

.section-1 img{
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.block-cover {
    width: 100%;
    overflow: hidden;
    /* padding: 35px; */
}

.block-cover, .block-cover-image {
    align-items: center;
    background-position: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 430px;
    overflow: hidden;
    overflow: clip;
    position: relative;
}

@media screen and (max-width: 768px) {
    .block-cover {
        padding-left: calc(36px / 1.5);
        padding-right: calc(36px / 1.5);
        box-sizing: border-box;
    }
}

.carbo-m {
    display: none;
}
.carbo-d {
    display: block;
}

@media screen and (max-width: 560px) {
    .carbo-m {
        display: block;
    }
    .carbo-d {
        display: none;
    }
}



.block-group1 { 
    padding-top: 36px;
    padding-right: 36px;
    padding-bottom: 36px;
    padding-left: 36px;
}

.has-white-color {
    color: #fff !important;
}

.block-cover .scroll-link {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
}

.block-button {
    display: inline-block;
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

.element-button {
    background-color: #000;
    border-radius: 0;
    border-color: #fff;
    border-width: 1px;
    border-style: solid;
    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: inherit;
    text-decoration: none;
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.038), 0.9rem);
}

.is-position-center-left {
    align-items: center;
    justify-content: flex-start;
}
.block-heading {
    font-size: clamp(3.426rem, 3.426rem + ((1vw - 0.2rem) * 5.467), 7rem);
    font-family: "Roboto Serif", serif;
}

.block-navigation {
    display: flex;
    justify-content: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.block-navigation ul {
    display: flex;
    padding-inline-start: 0px;
    flex-grow: 1;
    justify-content: space-around;
    max-width: 450px;
    list-style: none;
}  

.block-navigation ul a {
    color: #fff;
    transition: all .15s ease-in-out;
    text-decoration: none;
}



.wp-block-spacer {
    margin: 0 !important;
}
.wp-block-spacer {
    clear: both;
}

.block-heading {
    font-family: "Roboto Serif", serif;
    font-size: clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.753), 4rem);
    font-weight: 300;
}

.has-text-align-center {
    text-align: center;
}


.has-medium-font-size {
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.497), 1.2rem);
    font-weight: 200;
}


.aligncenter {
    display: table;
    margin-left: auto !important;
    margin-right: auto !important;
}

.block-cover__inner-container {
    position: absolute;
    bottom: 100px;
    
}

.site-link {
    background-color: transparent;
    background-image: none;
    border-width: 1px;
    padding-top: 8px;
    padding-right: 24px;
    padding-bottom: 8px;
    padding-left: 24px;
    border: 1px solid;
}

.site-link.pink {
    background-color: #000;
}

.okinawa {
    max-width: 1440px;
    width: 100%;
    height: 621px;
    position: relative;
    display: flex;
    justify-content: center;
    -ms-flex-pack: start;
    /*background: url('../img/okinawa/okinawa-under.png') 0 100% no-repeat;*/
    background-size: contain;
    margin: 100px 0 0;
    filter: blur(10px);
    z-index: -10;
}

.okinawa_animate {
    filter: blur(0px);
    transition: filter 1.7s ease-in-out 0.2s;
}

.okinawa__main,
.okinawa__cloud1,
.okinawa__cloud2,
.okinawa__cloud3_big,
.okinawa__cloud3 {
    position: absolute;
}

.okinawa__main {
    object-fit: contain;
    margin: auto;
    bottom: 10%;
    transform: scale(0.95);
}

.okinawa__main_m {
    display: none;
}
.okinawa__main_d {
    display: inline;
}

.okinawa_animate .okinawa__main {
    transform: scale(1);
    transition: all 3.3s ease-in-out 0s;
}

.okinawa__cloud1 {
    left: 5%;
    top: -20%;
}

.okinawa_animate .okinawa__cloud1 {
    transform: translateX(-556px);
    transition: all 4.2s ease-out 0s;
}

.okinawa__cloud2 {
    left: 0;
    top: 10%;
}

.okinawa_animate .okinawa__cloud2 {
    transform: translateX(-116px);
    transition: all 3.7s ease-out 0.2s;
}

.okinawa__cloud3_big {
    width: 100%;
    top: -50%;
    left: -10%;
    opacity: 1;
}

.okinawa_animate .okinawa__cloud3_big {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 3.5s ease-in-out 0s, transform 2.85s ease-in-out 0.15s;
}

.okinawa__cloud3 {
    right: 0;
}

.okinawa_animate .okinawa__cloud3 {
    transform: translateX(200px);
    transition: all 3.9s ease-out 0.4s;
}


@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
.okinawa_animate .okinawa__main {
         margin-left: 200px;
   -webkit-animation: scaleIn;
   -webkit-animation-duration: 0.5s;
   animation: scaleIn;
   animation-duration: 0.5s;
   transform: initial;
   transition: none;
} 
  }
}


.tr-desc {
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 200;
    line-height: 120%;
    background: linear-gradient(152deg, #FFF 0%, rgba(217, 217, 217, 0) 100%);
    background-clip: text;
    padding-top: 20px;
}

.block-cover__background {
    opacity: .1;
    background-color: #000;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}


.has-parallax {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.block-cover__image-background {
    border: none;
    bottom: 0;
    box-shadow: none;
    height: 100%;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    -o-object-fit: cover;
    object-fit: cover;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.site-footer { 
    margin-top: 0 !important;
    font-size: 0.75rem;
}

.has-black-background-color {
    background-color: #000;
}

@media screen and (max-width: 768px) {
    .site-footer > .block-group > .block-columns {
        flex-direction: column-reverse;
        gap: 24px;
        text-align: center;
    }
}

.has-bg-light-color {
    color: #f4f4f4 !important;
}


:where(.block-group.has-background) {
    padding: 1.25em 2.375em;
}


@media (max-width: 781px) {
.block-columns:not(.is-not-stacked-on-mobile)>.block-column {
    flex-basis: 100%!important;
}
}

footer .block-columns {
    justify-content: space-between;
}

.dropdown {
    position: relative;
    display: inline-block;
    color: #fff;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #333333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .block-head {
    text-align: center;
    color: #fff;
    background-color: #000;
    margin-block-start: 1px;
    margin-block-end: 1px;
    line-height: 2;
  }

  .flexslider {
    width: 90vw;
    margin: 0 auto!important;
    border: 1px solid transparent!important;
    background: transparent!important;
}

.flexslider .slides > li {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .slides {
        width: 100%!important;
        display: flex;
        justify-content: center;
    }
    .flexslider .slides > li {
        margin: 5px;
        max-width: 400px;
    }
}

.flexslider .slides img {
    width: auto!important;
    margin: 0 auto;
    min-height: 290px;
}


.obb-flexslider .flex-direction-nav li a {
    background: #f4f4f4;
    font-size: 16px;
    border: 1px solid #cacaca;
}


.obb-flexslider .flex-direction-nav li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 36px;
    height: 36px;
    width: 36px;
    text-decoration: none;
    margin-top: -18px;
    opacity: 1;
    position: absolute;
    top: 50%;
    padding: 0px;
    cursor: pointer;
    overflow: visible;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    z-index: 8;
    box-shadow: none;
}


.obb-flexslider .flex-direction-nav .flex-next {
    right: -15px;
    text-align: center;
}

.obb-flexslider .flex-direction-nav .flex-prev {
    left: -15px;
    text-align: center;
}


.flex-direction-nav a:before {
    font-size: initial!important;
}


.obb-flexslider .flex-control-nav {
    position: absolute;
    bottom: -41px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    line-height: 0;
    margin: 0px;
    padding: 0px;
    z-index: 9;
}

.obb-multi-posts-slide .obb-flexslider .flex-control-nav {
    bottom: -0;
}
.obb-multi-posts-slide .obb-flexslider .flex-control-nav {
    bottom: 24px;
}
.obb-flexslider .flex-control-nav {
    width: 100%;
    text-align: center;
}

.flex-control-paging li a {
    border-radius: 0px!important;
}

.sw .flex-control-paging li a {
    background: #fff;
}

.sw .flex-control-paging li a.flex-active {
    background: gray;
}

.sw-v .obb-flexslider .flex-control-nav {
    height: 4px;
}

.top-container {
    text-align: center;
  }
  
  .header {
    background: transparent;
    color: #f1f1f1;
    z-index: 1000;
    position: relative;
  }

  /* .sticky {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #000;
    z-index: 1;
  }
  
  .sticky + .content {
    padding-top: 50px;
  } */


  .block-group {
    padding-bottom: 69px!important;
  }

  .separator {
    height: 95px;
  }


  .obb-flexslider .flex-direction-nav li a {
    bottom: -55px;
    top: auto;
    z-index: 10;
  }

  .obb-flexslider .flex-direction-nav .flex-prev {
    left: 0px!important;
  }

  .obb-flexslider .flex-direction-nav .flex-next {
    right: 0px!important;
  }






  #menu {
    z-index: 2;
  }
  
  #menu-bar {
    width: 25px;
    height: 5px;
    margin: 30px 0 20px 20px;
    cursor: pointer;
  }
  
  .bar {
    height: 3px;
    width: 100%;
    background-color: #fff;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
  }
  
  #bar1 {
    transform: translateY(-4px);
  }
  
  #bar3 {
    transform: translateY(4px);
  }
  
  .nav {
    transition: 0.3s ease;
    display: none;
  }
  
  .nav ul {
    padding: 0 22px;
  }
  
  .nav li {
    list-style: none;
    padding: 4px 0;
  }
  
  .nav li a {
    color: white;
    font-size: 20px;
    text-decoration: none;
    font-weight: 200;
  }
  
  .nav li a:hover {
    font-weight: bold;
  }
  
  .menu-btn-bg {
    background-color: #000;
    position: fixed;
    height: 34px;
    width: 35px;
    top: 37px;
    left: 14px;
    border: 1px solid #fff;
    box-shadow: 2px 1px 4px gray;
  }

  .menu-bg, #menu {
    top: 20px;
    left: 0;
    position: fixed;
  }
  
  .menu-bg {
    z-index: 1;
    width: 0;
    height: 0;
    margin: 30px 0 20px 20px;
    background: radial-gradient(circle, #000, #232323f0);
    border-radius: 50%;
    transition: 0.3s ease;
  }
  
  .change {
    display: block;
  }
  
  .change .bar {
    background-color: white;
  }
  
  .change #bar1 {
    transform: translateY(4px) rotateZ(-45deg);
  }
  
  .change #bar2 {
    opacity: 0;
  }
  
  .change #bar3 {
    transform: translateY(-6px) rotateZ(45deg);
  }
  
  .change-bg {
    width: 630px;
    height: 460px;
    transform: translate(-60%,-30%);
    box-shadow: 1px 0px 3px gray;
  }
  
  .top-container .change {
    text-align: left;
  }

  .top-container .submenu {
    margin-left: 20px;
  }

.title{
  position: -webkit-sticky;
  position: sticky;
  height: 50px;
  z-index: 20;
  top: 0;
  margin: 0;
  font-size: 25px;
}


.services-container {
    display: flex;
    flex-direction: row;
}

@media (max-width: 600px) {
    .services-container  {
      flex-direction: column;
      gap: 30px;
    }
  }

  @media (min-width: 600px) {
    .services-col {
        width: 33%;
    }
  }

.services-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.flexslider .slides .slide-img {
    width: 98%!important;
    /* height: 99%; */
    min-height: auto;
    border: 1px solid;
    margin: 2px;
}


#flexslider-171 .flex-control-paging li a {
    border: 1px solid #858585!important;
}

#flexslider-171 .flex-control-paging li a.flex-active {
    background: rgba(205, 199, 199, 0.9);
}

.b1-black {
    background-color: #000!important;
}

.b1-black h2{
    color: #fff;
}

/* .separator {
    margin-top: -148px;
} */


.flex-direction-nav {
    display: none;
}

.flex-viewport {
    height: auto!important;
}


.flexslider .slides > li {
    overflow-y: scroll;
    max-height: 235px;
    overflow-x: hidden;
}


.smartphone-portrait {
    padding: 55px 2%;
    border-radius: 30px;
    border: .5px solid #E0E0E0;
    background-color: #FFF;
    width: 80vw;
    float: left;
    box-shadow: inset 0px 0px 0px -4px rgba(255, 255, 255, 0.1), 1px 1px 6px rgba(0, 0, 0, 0.05), 1px 1px 8px rgba(0, 0, 0, 0.07);
    margin: 0 auto;
    height: 115vw;
}

.tablet-landscape {
    padding: 20px 2%;
    margin: 30 auto;
    border-radius: 15px;
    border: .5px solid #E0E0E0;
    background-color: #FFF;
    width: 80vw;
    float: left;
    box-shadow: inset 0px 0px 0px -4px rgba(255, 255, 255, 0.1), 1px 1px 6px rgba(0, 0, 0, 0.05), 1px 1px 8px rgba(0, 0, 0, 0.07);
}


.phone .marvel-device.iphone-x {
    width: 63vw;
    /* @media screen and (max-width: 500px) {
        height: 140vw; 
    } */
    height: min(135vw, 800px);
    margin: 0 auto;
    max-width: 400px;
}

.phone .marvel-device.iphone-x .notch {
    left: 0;
    right: 0;
    margin: 0 auto;
}



.mbp-mockup-wrapper {
	width: 95%;
	max-width: 1280px;
	min-width: 320px;
	margin: 90px auto 20px;
	height: auto;
	align-self: flex-start;
	position: relative;
	display: flex;
}
.mbp-container {
	position: relative;
	width: 100%;
	max-width: 1280px;
	min-width: 320px;
	height: auto;
	padding-top: 58.6%;
	margin: 0 auto;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}
.mbp-display {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: block;
	width: 81.3%;
	height: 95.2%;
	margin: 0 auto;
	background-image: radial-gradient(#cfd0d1, #cfd0d1, #adadae);
	border: 1px solid #e5e7e9;
	border-radius: 3.1% / 4%;
	z-index: 1;
}
.mbp-display .display-edge {
	display: block;
	position: relative;
	width: 99.37%;
	height: 99.25%;
	margin: 0.3% auto;
	z-index: 2;
	border-radius: 2.75% / 3.8%;
}
.mbp-display .display-edge .bezel {
	display: block;
	position: relative;
	width: 99.5%;
	height: 99.2%;
	margin: auto;
	top: 0.4%;
	border-radius: 2.8% / 3.2%;
	z-index: 3;
}
.mbp-display .bezel:after {
	/* content: ''; */
	display: none;
	position: absolute;
	right: 0.15%;
	top: 0.3%;
	width: 62.5%;
	height: 100%;
	pointer-events: none;
	background: -moz-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
	background: -webkit-linear-gradient(36deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
	background: -o-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
	background: -ms-linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
	background: linear-gradient(55deg, rgba(0, 0, 0, 0) 61%, rgba(242, 245, 248, 0.15) 61%);
	background-blend-mode: screen;
	-webkit-border-top-right-radius: 3.5% 3%;
	-moz-border-radius-toptight: 3.5% 3%;
	border-top-right-radius: 3.5% 3%;
}
.mbp-display.with-glare .bezel:after {
	display: block;
}
.mbp-display .display-edge .bezel .display-camera {
	width: .62%;
	height: .95%;
	margin: 1% auto;
	left: 0;
	right: 0;
	position: absolute;
	border-radius: 50%;
	z-index: 5;
	background-color: #303132;
}
.mbp-display .display-edge .bezel .display-frame {
	display: block;
	position: absolute;
	width: 97.65%;
	height: 89.5%;
	margin: 0 auto;
	top: 3.5%;
	left: 0;
	right: 0;
	background-color: #fff;
	overflow-x: hidden;
}

.mbp-display .display-edge .bezel .below-display {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 4.9%;
	bottom: .15%;
	z-index: 3;
	background-color: #212121;
	border-bottom-right-radius: 2.5% 70%;
	border-bottom-left-radius: 2.5% 70%;
}
.mbp-display .display-edge .bezel .below-display .macbookpro {
	display: block;
	display: block;
	position: relative;
	width: 7.4%;
	height: 32%;
	margin-top: .5%;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 145 20' %3E%3Cpath fill='%23D8D8DA' d='M0.5 0.6h2.67L9.6 16.23h0.08L16.11 0.6h2.67v18.55h-2.16V4.81h-1.05l2.51-3.7l-7.46 18.04H8.66L1.21 1.11 l2.51 3.7H2.66v14.33H0.5V0.6z M23.23 18.9c-0.67-0.33-1.19-0.81-1.56-1.41s-0.56-1.32-0.56-2.12v-0.03c0-1.14 0.42-2.05 1.27-2.73 c0.85-0.68 2.04-1.07 3.57-1.15l4.95-0.28v1.74l-4.69 0.28c-0.89 0.05-1.58 0.27-2.08 0.64c-0.49 0.38-0.74 0.88-0.74 1.5v0.03 c0 0.64 0.24 1.15 0.73 1.53s1.13 0.57 1.93 0.57c0.7 0 1.34-0.15 1.9-0.44c0.56-0.29 1.01-0.7 1.34-1.21 c0.33-0.51 0.49-1.09 0.49-1.74v-3.95c0-0.81-0.26-1.45-0.76-1.92c-0.51-0.47-1.23-0.7-2.17-0.7c-0.86 0-1.55 0.19-2.08 0.56 c-0.53 0.37-0.85 0.86-0.98 1.46l-0.03 0.12h-2.16l0.01-0.14c0.07-0.74 0.32-1.41 0.75-2.01s1.03-1.08 1.79-1.43 c0.76-0.36 1.67-0.53 2.71-0.53c1.05 0 1.96 0.18 2.73 0.54c0.77 0.36 1.36 0.87 1.78 1.52c0.42 0.66 0.63 1.43 0.63 2.32v9.24 h-2.24v-2.17h-0.05c-0.26 0.49-0.6 0.91-1.03 1.28c-0.43 0.36-0.91 0.65-1.45 0.85c-0.54 0.2-1.1 0.3-1.7 0.3 C24.67 19.4 23.9 19.24 23.23 18.9z M37.12 18.55c-0.93-0.57-1.65-1.38-2.15-2.42c-0.51-1.04-0.76-2.27-0.76-3.68v-0.01 c0-1.41 0.26-2.63 0.77-3.66s1.23-1.84 2.16-2.4c0.93-0.57 2.01-0.85 3.24-0.85c1.11 0 2.07 0.22 2.87 0.65 c0.8 0.43 1.43 0.99 1.88 1.68c0.46 0.69 0.73 1.41 0.83 2.17l0.01 0.1h-2.19l-0.03-0.1c-0.16-0.67-0.52-1.26-1.07-1.76 S41.36 7.5 40.38 7.5c-0.77 0-1.45 0.2-2.03 0.61c-0.58 0.41-1.04 0.98-1.36 1.72c-0.33 0.74-0.49 1.62-0.49 2.63v0.01 c0 1.04 0.17 1.92 0.49 2.66c0.33 0.74 0.79 1.3 1.38 1.7c0.59 0.39 1.27 0.59 2.04 0.59c0.92 0 1.66-0.23 2.23-0.7 c0.57-0.47 0.95-1.07 1.14-1.82l0.03-0.1H46l-0.01 0.09c-0.12 0.85-0.43 1.61-0.93 2.3c-0.5 0.68-1.15 1.22-1.94 1.62 c-0.79 0.4-1.7 0.6-2.71 0.6C39.15 19.4 38.05 19.12 37.12 18.55z M48.4 0.6h2.31v18.55H48.4V0.6z M49.56 17.1h5.5 c1.39 0 2.44-0.28 3.17-0.83c0.72-0.55 1.09-1.36 1.09-2.42v-0.03c0-0.72-0.17-1.32-0.5-1.8s-0.83-0.84-1.5-1.08 c-0.66-0.24-1.49-0.36-2.47-0.36h-5.28V8.59h4.63c1.37 0 2.42-0.27 3.14-0.8c0.72-0.53 1.09-1.3 1.09-2.3V5.47 c0-0.92-0.3-1.62-0.91-2.1c-0.61-0.48-1.47-0.73-2.6-0.73h-5.35V0.6h5.88c1.06 0 1.99 0.19 2.79 0.58c0.8 0.39 1.42 0.93 1.86 1.62 c0.45 0.69 0.67 1.5 0.67 2.43v0.03c0 0.64-0.15 1.26-0.44 1.84c-0.29 0.58-0.69 1.07-1.2 1.47c-0.51 0.4-1.08 0.65-1.72 0.74v0.05 c0.89 0.1 1.66 0.36 2.3 0.77c0.64 0.41 1.14 0.94 1.48 1.59c0.34 0.65 0.51 1.38 0.51 2.2v0.03c0 1.09-0.25 2.02-0.75 2.8 c-0.5 0.78-1.22 1.37-2.15 1.79c-0.93 0.42-2.06 0.62-3.38 0.62h-5.85V17.1z M66.26 18.56c-0.93-0.57-1.65-1.37-2.17-2.41 c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84 c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69 c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85S67.19 19.12 66.26 18.56z M71.57 16.84 c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67s-0.78-1.3-1.36-1.68 C70.97 7.69 70.29 7.5 69.5 7.5c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03 c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59S71 17.23 71.57 16.84z M80.24 18.56 c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39 c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03 c0 1.42-0.26 2.65-0.78 3.69c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85C82.25 19.4 81.17 19.12 80.24 18.56z M85.55 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67 c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68 c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59 S84.97 17.23 85.55 16.84z M92.1 0.6h2.24v18.55H92.1V0.6z M93.83 11.68h0.55l5.86-5.9h2.71l-6.34 6.31h-0.18l-2.61 2.49V11.68z M95.45 12.76l1.49-1.49l6.2 7.88h-2.6L95.45 12.76z M110.44 0.6h2.31v18.55h-2.31V0.6z M111.6 10.47h4.86 c1.33 0 2.36-0.35 3.09-1.04c0.73-0.69 1.09-1.64 1.09-2.86V6.55c0-1.23-0.36-2.18-1.09-2.87c-0.73-0.69-1.76-1.03-3.09-1.03h-4.86 V0.6h5.45c1.17 0 2.19 0.25 3.09 0.75c0.89 0.5 1.59 1.19 2.1 2.08S123 5.35 123 6.52v0.03c0 1.17-0.26 2.21-0.76 3.11 s-1.21 1.6-2.1 2.11c-0.89 0.51-1.92 0.76-3.09 0.76h-5.45V10.47z M125.31 5.78h2.24v2.26h0.05c0.22-0.77 0.61-1.38 1.16-1.84 s1.2-0.68 1.95-0.68c0.2 0 0.37 0.01 0.53 0.03c0.16 0.02 0.28 0.04 0.37 0.06v2.17c-0.09-0.03-0.24-0.06-0.46-0.09 s-0.46-0.04-0.74-0.04c-0.57 0-1.08 0.13-1.51 0.39c-0.43 0.26-0.77 0.63-1 1.11c-0.24 0.48-0.35 1.07-0.35 1.74v8.25h-2.24V5.78z M135.07 18.56c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68 c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39 c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69s-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85 S136 19.12 135.07 18.56z M140.38 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03 c0-1.05-0.16-1.94-0.48-2.67c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59 c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7 c0.59 0.39 1.27 0.59 2.06 0.59S139.8 17.23 140.38 16.84z'/%3E%3C/svg%3E");
}
.mbp-keyboard {
	width: 99.75%;
	height: 7.6%;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.mbp-keyboard .front {
	/* 	opacity:0; */
	width: 100%;
	height: 37.25%;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	background: linear-gradient( 90deg, #68696b 0%, #757678 .15%, #a0a1a3 .3%, #cccdcf .5%, #e7e8ea .8%, #e8e9eb 1%, #dfe0e2 1.25%, #d1d2d4 1.5%, #adaeb0 2%, #a4a5a7 3%, #bbbdbf 4%, #e1e1e3 8%, #eaebed 15%, #e9eaec 25%, #e9eaec 75%, #eaebed 85%, #e1e1e3 92%, #bbbdbf 96%, #a4a5a7 97%, #adaeb0 98%, #d1d2d4 98.5%, #dfe0e2 98.75%, #e8e9eb 99%, #e7e8ea 99.2%, #cccdcf 99.5%, #a0a1a3 99.7%, #757678 99.85%, #68696b 100%);
	z-index: 100;
	border-radius: 1px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.mbp-keyboard .opener-left {
	position: relative;
	width: 6.917%;
	height: 65.5%;
	z-index: 101;
	border-radius: 0 0 0 20px;
	background-color: #c1c2c6;
	background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at right, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
	background-blend-mode: darken;
}
.mbp-keyboard .opener-right {
	position: relative;
	width: 6.917%;
	height: 65.5%;
	z-index: 101;
	border-radius: 0 0 20px 0;
	background-color: #c1c2c6;
	background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at left, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
	background-blend-mode: darken;
}
.mbp-keyboard .bottom-left {
	display: block;
	position: relative;
	width: 50%;
	height: 58%;
	top: 10%;
	z-index: 99;
	background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
	border-bottom-left-radius: 25% 60%;
}
.mbp-keyboard .bottom-right {
	display: block;
	position: relative;
	width: 50%;
	height: 58%;
	top: 10%;
	z-index: 99;
	background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
	border-bottom-right-radius: 25% 60%;
}
.mbp-shadow {
	width: 95%;
	height: 60%;
	display: flex;
	justify-content: center
}
.mbp-shadow .shadow-left {
	display: block;
	position: relative;
	width: 50%;
	height: 100%;
	top: 10%;
	z-index: 90;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
	filter: blur(2px);
	background-blend-mode: multiply;
	border-top-left-radius: 20% 90%;
}
.mbp-shadow .shadow-right {
	display: block;
	position: relative;
	width: 50%;
	height: 100%;
	top: 10%;
	z-index: 90;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
	filter: blur(2px);
	background-blend-mode: multiply;
	border-top-right-radius: 20% 90%;
}

::-webkit-scrollbar {
    display: none;
}