#contact {
    height: 100vh;
    width: 0vw;
    position: fixed;
    background: rgba(15, 12, 18, 0.62);
    overflow: hidden;
	z-index:999999;
    cursor: pointer;
}

#contact {
    right: 0;
    top: 0;
}

#contact .area {
	position:absolute;
	height:calc(100vh - 96px);
	width: calc(100vw - 96px);
    max-width: 1280px;
    max-height: 860px;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #faf3ff;
    border: 1px solid rgba(156, 0, 255, 0.22);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
    overflow: hidden;
    cursor: auto;
    box-sizing: border-box;
    padding: clamp(28px, 3vw, 48px);
    overflow-y: auto;
}

#contact .area svg {
	position: absolute;
	width: clamp(54px, 5vw, 74px);
	height: clamp(54px, 5vw, 74px);
	top: clamp(28px, 3vw, 46px);
	right: clamp(28px, 3vw, 46px);
	cursor:pointer;
    -webkit-animation: halfrotate 3s linear infinite;
    animation: halfrotate 3s linear infinite;
}

@keyframes halfrotate {
	0% {
		transform: rotate(-15deg);
	}
	
	50% {
		transform: rotate(15deg);
	}
	
	100% {
		transform: rotate(-15deg);
	}
}


#contact .area svg circle,
#contact .area svg path{
  stroke-width: .7;
  stroke: #4e4e4e;
}

#contact .area svg circle:hover,
#contact .area svg path:hover,
#contact .area svg:hover{
  stroke: #f08b16;
}

#contact .area h2 {
    font-size: clamp(38px, 4.1vw, 76px);
    color: #1a1a1a;
    letter-spacing: 0;
	transform:none;
	line-height:1.02 !important;
	width: min(860px, 78%);
    margin: 0 auto 1rem;
}

#contact .area img {
    width: clamp(90px, 8vw, 145px);
    height: auto;
	z-index:101;
    margin: 0 auto 1rem;
}

#contact .area .threebx {
    width: min(100%, 1080px);
    height: auto;
	transform:none;
    gap: 1rem;
}

#contact .area .lbx,
#contact .area,
#contact .area .threebx .sbx,
#contact .area .threebx {
    display: flex;
    align-items: center;
    justify-content: center;
}

#contact .area .lbx,
#contact .area,
#contact .area .threebx .sbx {
    flex-direction: column;
}

#contact .area .lbx {
    width: min(100%, 1080px);
    min-height: auto;
    height: auto;
	transform:none;
    padding: 1rem 1.5rem 1.1rem;
    box-sizing: border-box;
    margin: 0 auto 1rem;
}

#contact .area .threebx .sbx {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 118px;
    padding: 1rem 1.15rem;
    box-sizing: border-box;
}

#contact .area .threebx #sbxl {
	transform:none;
}

#contact .area .threebx #sbxr {
	transform:none;
}

#contact .area .lbx .t,
#contact .area .threebx .sbx .t,
#contact .area .lbx p,
#contact .area .threebx .sbx a,
#contact .area h2 {
    text-align: center;
}

#contact .area .lbx .t,
#contact .area .threebx .sbx .t {
    font-size: clamp(14px, .9vw, 18px);
    color: #1a1a1a;
    letter-spacing: 0;
    padding-bottom: .65rem;
}

#contact .area .lbx p,
#contact .area .threebx .sbx a {
    font-size: clamp(16px, 1.18vw, 21px);
    color: #4e4e4e;
    letter-spacing: 0;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
}

#contact .area .lbx,
#contact .area .threebx .sbx {
    border: 1px solid #1a1a1a;
}

#contact .area .lbx,
#contact .area .threebx .sbx {
    border-radius: 28px;
}

#contact .area .threebx {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media screen and (max-width: 1100px) {
    #contact .area {
        width: calc(100vw - 40px);
        height: calc(100vh - 40px);
        padding: 24px;
    }

    #contact .area h2 {
        width: min(760px, 88%);
        font-size: clamp(40px, 8vw, 70px);
    }

    #contact .area .threebx {
        grid-template-columns: 1fr;
    }
}

#contact .area .threebx .sbx a {
    display: inline-block;
    transition: color 1s;
    -webkit-transition: color 1s;
    -moz-transition: color 1s;
    -ms-transition: color 1s;
    -o-transition: color 1s;
}

#contact .area .threebx .sbx a:hover {
    /*color: #f08b16;*/
	color:#9c00ff;
}