/***************************************************
    body
***************************************************/

body {
    margin: 0px;
    padding: 0px;
    background: #ececec;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    overflow: overlay;
}

body.noscroll{overflow: hidden}

/***************************************************
    scrolbar
***************************************************/

::-webkit-scrollbar{
    width: 10px; 
    height: 10px;
}

::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.5);
    border-radius: 50px;
    border: 3px solid rgba(0,0,0,0);
    background-clip: content-box;
}

::-webkit-scrollbar-button,
::-webkit-scrollbar-corner{
    display: none;
}

/*
::-webkit-scrollbar-thumb:hover  {}
::-webkit-scrollbar-thumb:active {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}
*/

.page{
    overflow:hidden;
}

/***************************************************
    overwrite main.css
***************************************************/

.right{z-index:500}

/***************************************************
    styles
***************************************************/

/* 5_center - Centers content in position relative/absolute parent */

.center{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%)
}

.centerV{
    position:absolute;
    top:50%;
    transform:translateY(-50%)
}

.centerH{
    position:absolute;
    left:50%;
    transform:translateX(-50%)
}

/***************************************************
    buttons
***************************************************/

button{
    background: #fff;
    box-sizing: border-box;
    border: 1px solid #000;
    outline: none;
    font-family: Roboto;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

[data-btn]{cursor: pointer}

/***************************************************
    hidden
***************************************************/

[data-hidden]{
    opacity: 0 !important;
    pointer-events: none !important;
}

/* collapse dimensions */
[data-hidden="collapseh"]{height: 0px !important}
[data-hidden="collapsev"]{width: 0px !important}
[data-hidden="collapsed"]{
    width: 0px !important;
    height: 0px !important;
}

/***************************************************
    user selection
***************************************************/

.noselect{user-select: none}

/***************************************************
    transitions
***************************************************/

[data-transition]{
    position: fixed;
    user-select: none;
    z-index: 200;
}

/***************************************************
    hidden elements
***************************************************/

[data-hidden]{opacity: 0}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/***************************************************
    context menu
***************************************************/

.contextmenu{
    top: 878px;
    left: 453px;
    min-width: 150px;
    max-width: 300px;
    min-height: 50px;
    max-height: 400px;
    overflow: overlay;
    position: fixed;
    z-index: 1000;
    background: #fff;
    border-radius:10px;
    box-shadow: 0px 5px 15px -5px;
} 

.contextmenu li {
    list-style: none;
    position: relative;
    min-height: 50px;
    padding: 17px 20px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;
}

.contextmenu li .more{
    border-left: 5px solid #000;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

/* close to right side of page */
.contextmenu[data-side="right"] li .more{
    border-left: unset;
    border-right: 5px solid #000;
    right: unset;
    left: 10px;
}

/***************************************************
    header
***************************************************/

header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 155;
    transition: 0.3s;
}

header[data-bg='white'] {background: #fff}
header[data-bg='transparent'] {background: transparent}

header[data-scrolled]{
    background: #fff
}

header[data-state="menu"]:before {
    content: '\a';
    height: 60px;
    width: 110px;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 20px 0px 0px 0px;
    clip-path: polygon(0px 0px, 100% 0px, 73% 100%, 0px 100%, 0px 0px);
}

header[data-state='initial'] {height: 70px}

.headerSpacer {height: 70px}

/* height */
header[data-height="double"],
header[data-height="double"] ~ headerSpacer {
    height: 140px;
}

/***************************************************
    header - logo
***************************************************/

header > .logo {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    
    margin: 20px 13px;
    transition: 0.3s;
    cursor: pointer;
}

header > .logo img {
    height: 30px;
    margin-right: 3px;
}

header > .logo img:nth-child-last() {
    margin-right: 0px
}

/* red letters (logo) */
header > .logo[data-red='Ixx'] [data-iss='i'],
header > .logo[data-red='ISS'] [data-iss='i'],
header > .logo[data-red='xSx'] [data-iss='s'],
header > .logo[data-red='ISS'] [data-iss='s'],
header > .logo[data-red='xxS'] [data-iss='s2'],
header > .logo[data-red='ISS'] [data-iss='s2'] {
    filter: invert(12%) sepia(91%) saturate(7500%) hue-rotate(8deg) brightness(106%) contrast(116%);
}

/* red letters (standalone) */
[data-iss][data-red] {
    filter: invert(12%) sepia(91%) saturate(7500%) hue-rotate(8deg) brightness(106%) contrast(116%);
}

/***************************************************
    menu button
***************************************************/

[data-btn="menu"] {
    height: 30px;
    width: 30px;
    display: inline-block;
    vertical-align: top;
    margin: 20px 0px;
    position: relative;
    z-index: 1;
}

[data-btn="menu"] > .bars {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0px;
    left: 0px;
    transition: 0.3s;
}

[data-btn="menu"] > .bars span {
    height: 3px;
    width: 30px;
    background: #000;
    display: block;
    position: absolute;
    left: 0px;
    transform: none;
    transition: 0.3s;
}

[data-btn="menu"] > .bars span:nth-child(1) {top: 0px}
[data-btn="menu"] > .bars span:nth-child(2) {bottom: 0px}

[data-btn="menu"] > .search {
    transform: rotate(135deg);
    font-size: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
    transition: 0.3s;
}

[data-btn="menu"] > .breadcrumbs {
    font-weight: 500;
    font-size: 25px;
    height: 30px;
    line-height: 30px;
    padding: 0px;
    margin-left: -3px;
    transition: 0.3s;
}

[data-btn="menu"] > .breadcrumbs .breadcrumb {
    display: inline-block;
    vertical-align: middle;
}

/* breadcrumbs */
[data-btn="menu"][data-breadcrumbs] {width: auto}

[data-btn="menu"][data-breadcrumbs] > .breadcrumbs {
    padding: 0px 30px 0px 15px;
    width: auto;
}

[data-btn="menu"][data-breadcrumbs][data-state="hidden"] > .bars span {
    transform: rotate(-70deg);
    top: 14px;
    left: -15px;
}

[data-btn="menu"][data-breadcrumbs] > .search {
    right: 0px;
    left: unset;
    transform: rotate(70deg);
}

[data-btn="menu"][data-state="x"] > .search {
    transform: rotate(70deg);
    left: 14px;
}

[data-btn="menu"][data-state="x"] > .bars {
    left: -50px;
}

[data-btn="menu"][data-state="x"] > .bars span:nth-child(1) {
    transform: rotate(-45deg);
    top: 15px;
    background: #bdbdbd;
}

[data-btn="menu"][data-state="x"] > .bars span:nth-child(2) {
    transform: rotate(45deg);
    top: 15px;
    background: #bdbdbd;
}

[data-btn="menu"][data-state="x"] > .breadcrumbs {
    width: 0px;
    padding: 0px 0px 0px 27px;
    pointer-events: none;
    opacity: 0;
}

/* focused */
[data-btn="menu"] .search.focused {color: #f00}

/***************************************************
    menu
***************************************************/

.menu {
    height: 450px;
    width: Calc(100% - 100px);
    position: fixed;
    top: 10px;
    left: 90px;
    background: rgb(0 0 0 / 10%);
    clip-path: polygon(0% 60px, 0% 100%, 100% 100%, 100% 0%, 30px 0%);
    backdrop-filter: blur(5px);
    border-radius: 0px 25px 25px 0px;
    overflow: hidden;
    transition: 0.3s;
}

.menu[data-state="hidden"] {
    height: 0px; 
    width: 0px;  
    opacity: 0;  
}

#menu_search {
    width: 100%;
    height: 60px;
    padding: 0px 50px;
    background: transparent;
    border: 0px;
    font-size: 20px;
    color: #000;
    outline: none;
}

#menu_search[data-placeholder] {color: #bdbdbd}

.menu_searchPrompt{
    position: absolute;
    top: 0px;
    right: 50px;
    padding: 21px 5px;
    color: #b7b7b7;
    pointer-events: none;
    opacity: 0;
    transition:0.3s
}

.menu_searchPrompt span{
    background: #fff;
    padding: 10px;
    border-bottom: 3px solid #bdbdbd;
    color: #000;
    border-radius: 5px;
    margin-right: 3px;
}

.menu_contents {
    white-space: nowrap;
    height: Calc(100% - 60px);
}

.menu_contents .cards_container{
    height: 100%;
    overflow-y: overlay;
    margin: 0px 10px;
}

/* supplement */
.menuSupplement {
    position:  fixed;
    top: 70px;
    left: 10px;
    height: 390px;
    width: 80px;
    border-radius: 0px 0px 0px 20px;
    background: #fff;
    opacity: 1;
    transition: 0.3s;
}

.menuSupplement[data-state="hidden"] {
    height: 0px;
    opacity: 0;
    pointer-events: none;
}

.menuSupplement [data-btn] {
    text-align: center;
    height: 75px;
    padding-top: 15px;
    box-sizing: border-box;
}

.menuSupplement [data-btn].dividerTop {
    margin-top: 15px;
    border-top: 1px solid #d7d7d7;
}

.menuSupplement [data-btn] .icon {font-size: 30px}

.menuSupplement [data-btn] img {height: 30px}

.menuSupplement [data-btn] .icon.fal,
.menuSupplement [data-btn] .icon.far,
.menuSupplement [data-btn] .icon.fas,
.menuSupplement [data-btn] .icon.fad,
.menuSupplement [data-btn] .icon.fab {
    font-size: 20px;
    display: block;
}

/* building icon (custom to look like office) */
.menuSupplement [data-btn='company'] .building_icon{
    background: #000;
    transform-origin: top center;
    transform: scale(0.25);
    border-top: 15px solid #000000;
    margin-bottom: -80px;
    position: relative;
    left: -10px;
}

.menuSupplement [data-btn] label {
    font-weight: 500;
    font-size: 8px;
    text-transform: uppercase;
    pointer-events: none;
}

.menuSupplement[data-selected="1"] [data-btn]:nth-child(1),
.menuSupplement[data-selected="2"] [data-btn]:nth-child(2),
.menuSupplement[data-selected="3"] [data-btn]:nth-child(3),
.menuSupplement[data-selected="4"] [data-btn]:nth-child(4),
.menuSupplement[data-selected="5"] [data-btn]:nth-child(5) {
    color: #f00;
}

.menuSupplement[data-selected="1"] [data-btn]:nth-child(1) .icon img,
.menuSupplement[data-selected="2"] [data-btn]:nth-child(2) .icon img,
.menuSupplement[data-selected="3"] [data-btn]:nth-child(3) .icon img,
.menuSupplement[data-selected="4"] [data-btn]:nth-child(4) .icon img,
.menuSupplement[data-selected="5"] [data-btn]:nth-child(5) .icon img {
    filter: invert(12%) sepia(91%) saturate(7500%) hue-rotate(8deg) brightness(106%) contrast(116%);
}

.menuSupplement:before {
    content: '\a';
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #d4d4d4;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    transition: 0.3s;
}

.menuSupplement[data-selected]:before {opacity: 1}
.menuSupplement[data-selected="1"]:before {top: 25px}
.menuSupplement[data-selected="2"]:before {top: 100px}
.menuSupplement[data-selected="3"]:before {top: 175px}
.menuSupplement[data-selected="4"]:before {top: 265px}
.menuSupplement[data-selected="5"]:before {top: 340px}

.menu_contents .listings {
    height: 100%;
    white-space: nowrap;
    overflow-x: overlay;
}

/***************************************************
    menu - instrumentation
***************************************************/

.menu_contents [data-supplier] {
    display: inline-block;
    width: 200px;
    height: 76px;
    border-radius: 15px;
    overflow: hidden;
    margin: 5px;
    background: rgba(255,255,255,0.3);
    box-sizing: border-box;
    padding: 20px;
}

.menu_contents [data-supplier] img {
    object-fit: contain;
    height: 90%;
    width: 90%;
}

/***************************************************
    menu - systems
***************************************************/

/***************************************************
    menu - services
***************************************************/

.menu_contents [data-btn='viewall']{
    display: inline-block;
    width: 250px;
    height: 50px;
    background: rgb(255 255 255 / 50%);
    color:#000;
    text-align: center;
    line-height: 50px;
    border-radius: 15px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    margin-left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.menu_contents .listings {
    height: Calc(100% - 50px);
    white-space: nowrap;
    overflow-x: overlay;
}

.menu_contents .listings [data-system],
.menu_contents .listings [data-service] {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: 10px;
    background: rgba(255,255,255,0.3);
    border-radius: 20px;
    overflow: hidden;
    height: Calc(100% - 22px);
    width: 250px;
    box-shadow: 0px 10px 15px -10px;
    color: #000;
    text-shadow: 0 0 7px rgb(0 0 0 / 50%);
}

.menu_contents .listings [data-system] .bg,
.menu_contents .listings [data-service] .bg{
    height: 110%;
    width: 110%;
    position: absolute;
    top: -5%;
    left: -5%;
    filter: blur(5px);
    z-index: 0;
}

.menu_contents .listings [data-system] .bg img,
.menu_contents .listings [data-service] .bg img{
    height: 100%;
    width: 100%;
}

.menu_contents .listings [data-system] h1,
.menu_contents .listings [data-service] h1{
    position:   relative;
    color:      #fff;
    text-align: center;
    font-weight:400;
    font-size:  25px;
    margin:     0px;
    padding:    100px 20px 50px 20px;
}

.menu_contents .listings [data-system] [data-btn='enquire'],
.menu_contents .listings [data-service] [data-btn="more"]{
    position: absolute;
    bottom: 50px;
    left: 20px;
    width: 200px;
    background: #fff;
    border-radius: 15px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    text-shadow:none;
}

.menu_contents .listings_systems{padding:20px 0px}

/***************************************************
    menu - company
***************************************************/


/***************************************************
    menu - contact
***************************************************/

.contact_menu {
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s
}

.contact_menu [data-btn] {
    height: 50px;
    width: 50px;
    margin: 10px;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    opacity: 0.3;
    transition: 0.3s;
}

.contact_menu[data-selected='phone'] [data-btn='phone'],
.contact_menu[data-selected='chat'] [data-btn='chat'],
.contact_menu[data-selected='email'] [data-btn='email'] {
    opacity: 1;
}

.contact_menu [data-btn='email'][data-available="1"]:after {
    content: '\a';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 10px;
}

.contact_menu [data-btn='email'][data-available="1"]:after {background: #4caf50}
.contact_menu [data-btn='email'][data-available="0"]:after {background: #f00}

.contact_phone,
.contact_chat,
.contact_email {
    width: 33.3%;
    height: Calc(100% - 70px);
    display: inline-block;
    vertical-align: top;
    position: relative;
    text-align: center;
    transition:0.3s
}

.contact_phone .icon, 
.contact_chat  .icon,
.contact_email .icon {
    font-size: 150px;
    position: absolute;
    bottom: 0px;
    opacity: 0.05;
    pointer-events: none;
}

.contact_phone .icon{bottom: -5px; left: 0px}
.contact_chat .icon {bottom: -5px; left: 50%; transform: translateX(-50%);}
.contact_email .icon{bottom: -33px; right: 0px; font-size: 200px}

.contact_phoneNo{
    font-size: 35px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

.contact_phone .status{
    display: inline-block;
    vertical-align: top;
    font-weight: 500;
    color: #4caf50;
}

.contact_chat [data-btn='chat']{
    width: 200px;
    height: 70px;
    line-height: 70px;
    border-radius: 15px;
    position: relative;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 8px 8px 15px #0000001a, -8px -8px 15px #ffffff2b;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px;
}

.contact_chat [data-btn='chat']:after {
    content: '\a';
    border-top: 20px solid #fff;
    border-left: 20px solid transparent;
    position: absolute;
    bottom: -20px;
    right: 20px;
}

.contact_phone > div,
.contact_chat > div,
.contact_email > div{
    transform: translateY(-50%);
    position: relative;
    top: Calc(50% - 35px);
}

.contact_email > div a{
    color:#000;
    font-size:35px;
    font-weight:500;
    padding:30px;
}

/***************************************************
    header - user
***************************************************/

header .user {
    position: absolute;
    right: 10px;
    top: 10px;
    transition: 0.3s;
    opacity:0.2;
    pointer-events: none;
}

header .user[data-state="icon"] {
    height: 50px;
    width: 50px;
    background: #0000001a;
    border-radius: 25px;
    box-shadow: inset 5px 5px 5px rgb(0 0 0 / 10%), inset -5px -5px 5px rgb(255 255 255 / 40%);
    overflow: hidden;
    cursor: pointer;
}

header[data-state="menu"] .user[data-state="icon"] {
    background: transparent;
    box-shadow: none;
}

header .user[data-state="modal"] {
    height: 300px;
    width: 300px;
    border-radius: 20px;
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    z-index: 155;
}

header .user [data-btn] {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 33.3%;
    height: 33.3%;
    margin-right: -4px;
    text-align: center;
    transition: 0.3s, width 0s;
}

header .user [data-btn] i {
    display: block;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 5px;
    transition: 0.3s;
}

header .user [data-btn] label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    pointer-events: none;
}

header .user [data-btn="user"] .avatar {
    height: 50px;
    width: 50px;
    position: relative;
    display: block;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    transition: 0.3s;
}

header .user [data-btn="user"] .avatar:before {
    border: 2px solid #000;
    content: '\a';
    width: 20px;
    height: 20px;
    position: absolute;
    left: 12px;
    top: 5px;
    border-radius: 19px;
    margin-top: 0px;
    margin-left: 0px;
    transition: 0.3s;
}

header .user [data-btn="user"] .avatar:after {
    content: '\a';
    width: 35px;
    height: 15px;
    top: 33px;
    left: 5px;
    position: absolute;
    border-radius: 20px 20px 0px 0px;
    border: 2px solid #000;
    border-bottom: 0px;
}

header .user[data-state="icon"] [data-btn] {
    opacity: 0;
    width: 0px;
    height: 0px;
    pointer-events: none;
}

header .user[data-state="icon"] [data-btn] i {font-size: 0px}
header .user [data-btn]:before {
    content: attr(data-shortcut);
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    background: hsl(0deg 0% 0% / 10%);
    border-radius: 5px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    color: #000;
    opacity: 0;
    transition: 0.3s;
}

header .user[data-state="modal"][data-tooltips="1"] [data-btn]:before{
    opacity: 1;
}

header .user[data-state="icon"] [data-btn="user"] {
    width: 100%;
    height: 100%;
    opacity: 1;
}

header .user[data-state="icon"] [data-btn="user"] .avatar{
    top: 7px;
}

/* avatar looking directions */
header .user [data-btn="user"] .avatar[data-look="top left"]:before     {margin-left: -5px; margin-top: 0px}
header .user [data-btn="user"] .avatar[data-look="top"]:before          {margin-left: 0px;  margin-top: 0px}
header .user [data-btn="user"] .avatar[data-look="top right"]:before    {margin-left: 5px;  margin-top: 0px}
header .user [data-btn="user"] .avatar[data-look="left"]:before         {margin-left: -5px; margin-top: 3px}
header .user [data-btn="user"] .avatar[data-look="forward"]:before      {margin-left: 0px;  margin-top:2px}
header .user [data-btn="user"] .avatar[data-look="right"]:before        {margin-left: 5px;  margin-top: 3px}
header .user [data-btn="user"] .avatar[data-look="bottom left"]:before  {margin-left: -5px; margin-top: 5px}
header .user [data-btn="user"] .avatar[data-look="bottom"]:before       {margin-left: 0px;  margin-top: 5px}
header .user [data-btn="user"] .avatar[data-look="bottom right"]:before {margin-left: 5px;  margin-top: 5px}

/***************************************************
    header states
***************************************************/

/*header[data-state="initial"] {

}*/

/***************************************************
    cards
***************************************************/

[data-card] {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

[data-card]::before {
    content: '\a';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(180deg, rgb(0 0 0 / 30%), transparent);
    opacity: 0;
    z-index: 50;
    pointer-events: none;
    transition: 0.3s
}

[data-card]:hover::before {
    opacity: +1
}

[data-card] [data-btn='like'],
[data-card] [data-btn='dismiss'] {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    z-index: 100;
    opacity: 0;
    transition: 0.3s
}

[data-card]:hover [data-btn='like'],
[data-card]:hover [data-btn='dismiss'] {
    opacity: 1
}

[data-card] [data-btn='like'] {left: 0px}
[data-card] [data-btn='dismiss'] {right: 0px}

[data-card] > a {
    text-decoration: none;
    color:#000
}

[data-card] .ad {
    position: absolute;
    top: 0px;
    right: 0px;
    text-transform: uppercase;
    background: #fff;
    border-radius: 0px 0px 0px 10px;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    cursor: pointer;    
    z-index: 100;
}

/***************************************************
    footer
***************************************************/

footer {
    position: relative;
    min-height: 440px
}

footer h1 {
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    padding: 15px;
}

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

footer .footer_contact [data-contact] {
    background: #fff;
    position: relative;
    width: 200px;
    height: 200px;
    box-shadow: 0px 10px 10px -10px #000;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

footer .footer_contact [data-contact] .contact_content {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

footer .footer_contact [data-contact] a {
    text-decoration: none;
    color: #f00;
    font-weight: 500;
    padding: 5px;
}

footer .footer_contact [data-contact] i {
    position: absolute;
    bottom: -10px;
    left: -10px;
    font-size: 100px;
    opacity: 0.1
}

footer .footer_contact [data-contact='chat'] {
    border: 0px;
    box-shadow: none;
    background:rgba(0,0,0,0.1);
    border-radius: 15px;
}

footer .footer_contact [data-contact='chat'] [data-position="end"] {
    height: 100%;
    width: 100%;
}

footer .copyright {
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 10px 0px;
}

.footer_company {margin-top: 19px}

.footer_company .footer_company_menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-left: 100px;
    display: flex;
    overflow-x: overlay;
}

.footer_company_menu [data-link] {
    padding: 25px;
    cursor: pointer;
    color: #f00
}

.footer_company_menu [data-link].disabled {
    cursor: initial;
    opacity: 0.2
}

/***************************************************
    building icon
***************************************************/

.building_icon{
    width: 100px;
    height: 90px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: #e3e3e3;
    border-top: 15px solid #dbdbdb;
}

.building_icon [data-window]{
    background: #fff;
    height: 24px;
    width: 16px;
    position: absolute;
}

.building_icon [data-door]{
    background: #fff;
    height: 35px;
    width: 16px;
    position: absolute;
}

.building_icon [data-window]:before{
    background: #d9d9d9;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    content: '';
}

.building_icon [data-window]:after{
    background: #d9d9d9;
    width: 100%;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    content: '';
}
 
.building_icon [data-window="about"]{top: 15px; left: 13px}
.building_icon [data-window="website"]{top: 15px; left: 45px}
.building_icon [data-window="ordering"]{top: 15px; left: 70px}
.building_icon [data-door="shipping"]{bottom: 0px; left: 13px}
.building_icon [data-window="returns"]{bottom: 10px; left: 45px}
.building_icon [data-window="terms"]{bottom: 10px; left: 62px}

.building_icon .hovered[data-door],
.building_icon .hovered[data-window]{
    background:#b9b9b9;
}

/***************************************************
    header state - menu
***************************************************/

.chat_position > div {
    opacity:0;
    pointer-events: none;
}

.chat {
    background: #fff;
    border-radius: 15px 15px 5px 15px;
    position: fixed;
    bottom: 15px;
    right: 10px;
    transition: 0.3s;
    box-shadow: 0px 10px 15px -5px;
    z-index: 150;
}

.chat.ui-draggable-dragging {transition: left 0s, top 0s}
.chat.ui-resizable-resizing {transition: width 0s, height 0s}

.chat::after {
    content: '\a';
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff;
    position: absolute;
    bottom: -15px;
    right: 10px;
    transition: 0.3s
}

.chat[data-moved]::after {
    border-top: 0px solid #fff;
    bottom: 0px;
}

.chat[data-modifiers="emoji"]::after {border-top: 15px solid #242424}
.chat[data-state='icon']::after {border-right: 0px solid transparent}

.chat[data-state='icon']{
    height: 40px;
    min-width: 50px;
    cursor: pointer;
}

.chat[data-state='icon'] .open{
    opacity: 0;
    height: 0px;
    width: 0px;
    pointer-events: none;
}

.chat[data-state='open']{
    height: 450px;
    width: 300px;
}

.chat .label{
    height:100%;
    width:100%;
    transition: 0.3s;
    opacity:1;
    overflow:hidden;
}

.chat[data-state='open'] .label{
    height:0px;
    opacity:0;
}

.chat .label .chatlabel_content{
    position: relative;
    height: 100%;
    width: 100%;
}

.chat .label .chatlabel_content i{
    position: absolute;
    bottom: -10px;
    left: -10px;
    font-size: 100px;
    opacity: 0.1;
}

.chat .label .chatlabel_content .contact_content{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.chat .open{
    height: 100%;
    border-radius: 15px 15px 5px 15px;
    overflow: hidden;
}

.chat .handle{
    height: 70px;
    line-height: 40px;
    text-align: center;
    cursor: grab;
}

.chat .conversation{
    height: Calc(100% - 170px);
    background: #e3e3e3;
    overflow-y: overlay;
    transition: 0.3s;
}

.chat[data-modifiers="emoji"] .conversation{height: Calc(100% - 310px)}

.chat .message{
    height: 100px;
    position: relative;
}

.chat .message #chat_message{
    width: 100%;
    height: 100%;
    resize: none;
    border: 0px;
    outline: none;
    box-sizing: border-box;
    padding: 15px 30px 0px 35px;
    background: transparent;
    font-size: 15px;
    font-family: 'Roboto';
    box-sizing: 0px -10px 15px -20px #000
}

.chat .message .message_emojis{
    height: 126px;
    margin-top: 10px;
    background: #242424;
    text-align: center;
    position: relative;
    overflow-y: overlay;
}

.chat .message .message_emojis::-webkit-scrollbar-thumb{
    background: rgb(255 255 255 / 50%)
}

.chat .message .message_emojis .search{
    width: 100%;
    line-height: 35px;
    text-align: center;
    background: #000;
    border: 0px;
    padding: 10px 10px;
    box-sizing: border-box;
    outline: none;
}

.chat .message .message_emojis .search::placeholder{color: #fff}
.chat .message .message_emojis li{
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    border-radius: 10px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;

    transition: 0.3s;
}

.chat .message .message_emojis li:hover{background: #fff}

.chat .message [data-btn]{
    position: absolute;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    border-radius: 15px;
    opacity: 1;
    transition: 0.3s;
}

.chat .message [data-btn="attach"] {top: -15px; left: 0px}
.chat .message [data-btn="mic"]    {top: 30px; left: 0px; color: #bdbdbd}
.chat .message [data-btn="emoji"]  {top: 70px; left: 0px; color: #bdbdbd}
.chat .message [data-btn="send"]   {top: -15px; right: 10px}

.chat .message [data-btn][data-focus]{color: #000}

.chat .message [data-btn="emoji"][data-focus]:after{
    content: '\a';
    position: absolute;
    left: 0px;
    bottom: -15px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 10px solid black;
}

/* disabled */
.chat .disabled{
    height: 100px;
    background: #e3e3e3;
    text-align: center;
    color: #999999;
    line-height: 70px;
}

/* minimise button */
.chat [data-btn='minimise']{
    position: absolute;
    bottom: -9px;
    right: 9px;
    background: #e3e3e3;
    height: 32px;
    width: 32px;
    transform: rotate(-45deg);
    z-index: 100000;
    cursor: pointer;
}

[data-btn='minimise']:before,
[data-btn='minimise']:after{
    content: '';
    background: #000;
    position: absolute;
    bottom: 7px;
    left: 6px;
}

[data-btn='minimise']:before {
    height: 15px;
    width: 2px;
}

[data-btn='minimise']:after {
    height: 2px;
    width: 15px;
}

/* resize handles */
.chat .ui-resizable-handle{position: absolute}

.chat .ui-resizable-n,
.chat .ui-resizable-s{
    width: 100%;
    height: 10px;
    left: 0px;
}

.chat .ui-resizable-n{top: -10px}
.chat .ui-resizable-s{bottom: -10px}

.chat .ui-resizable-e,
.chat .ui-resizable-w{
    width: 10px;
    height: 100%;
    top: 0px;
}

.chat .ui-resizable-e{right: -10px}
.chat .ui-resizable-w{left: -10px}

.chat .ui-resizable-ne,
.chat .ui-resizable-nw,
.chat .ui-resizable-se,
.chat .ui-resizable-sw{
    width: 20px;
    height: 20px;
}

.chat .ui-resizable-ne{top: -10px; right: -10px}
.chat .ui-resizable-se{bottom: -10px; right: -10px}
.chat .ui-resizable-sw{bottom: -10px; left: -10px}
.chat .ui-resizable-nw{top: -10px; left: -10px}

.chat .ui-resizable-n, .chat .ui-resizable-s{cursor: ns-resize}
.chat .ui-resizable-e, .chat .ui-resizable-w{cursor: ew-resize}
.chat .ui-resizable-nw, .chat .ui-resizable-se{cursor: nw-resize}
.chat .ui-resizable-ne, .chat .ui-resizable-sw{cursor: ne-resize}

.chat .conversation .methods [data-btn]{
    background: #fff;
    margin: 10px;
    height: 120px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.chat .conversation .methods [data-btn] i{
    position: absolute;
    font-size: 100px;
    opacity: 0.1;
}

.chat .conversation .methods [data-btn='email'] i{
    bottom: -18px;
    left: -1px;
}

.chat .conversation .methods [data-btn='phone'] i{
    bottom: -7px;
    left: -8px;
}

.chat .conversation .methods [data-btn] span{
    font-weight: 500;
    color: #f00;
    padding: 5px;
    border-radius: 10px;
    cursor: copy;
}

.chat .conversation .methods [data-btn] > div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}

.chat .conversation .methods [data-btn] span:after{
    content: "\f0c5";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    margin-left: 5px;
}

.chat .conversation .message{
    margin: 20px 10px;
    background: rgb(255 255 255 / 40%);
    padding: 10px 6px;
    font-size: 15px;
    border-radius: 5px;
}

.chat .conversation .message[data-sent]     {margin-left: 30px}
.chat .conversation .message[data-received] {margin-right: 30px}

.chat .conversation .message[data-sent]::after{
    content: '\a';
    border-top: 10px solid rgb(255 255 255 / 40%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    right: 5px;
}

[data-transition].message_transition{
    background: rgb(255 255 255 / 40%);
    padding: 10px 6px;
    box-sizing: border-box;
}


@media screen and (max-width: 850px){
    .contact_menu{
        opacity:1;
        pointer-events: all;
    } 

    .contact_phone, 
    .contact_chat, 
    .contact_email{
        width:100%;
    }
}