/**
 * @file
 * This file is to provide special styles through class quickly
 * some are from utility.css skyneighbor.com
 * Gang Wu / Darkchain 2022
 */

.dc-dark { color: #fff; background-color: #1d1d1d; }

/* text color */
.txt-fff {color:#fff;} .txt-eee {color:#eee;} .txt-ddd {color:#ddd;} .txt-ccc {color:#ccc;} .txt-bbb {color:#bbb;} .txt-aaa {color:#aaa;} 
.txt-999 {color:#999;} .txt-888 {color:#888;} .txt-777 {color:#777;} .txt-666 {color:#666;} .txt-555 {color:#555;} .txt-444 {color:#444;} 
.txt-333 {color:#333;} .txt-222 {color:#222;} .txt-111 {color:#111;} .txt-000 {color:#000;} 
.txt-gold {color: gold} .txt-blue {color: blue} .txt-red {color: red} .txt-indianred {color: indianred} .txt-green {color: green} 
.txt-grey {color: grey} .txt-silver {color: silver} .txt-yellow {color: yellow} .txt-blueviolet {color: blueviolet} .txt-purple {color: purple} 
.txt-pink {color: pink} .txt-royalblue {color: royalblue} .txt-violet {color: violet} .txt-greenyellow {color: greenyellow} .txt-aqua {color: aqua} 
.txt-cornflowerblue {color: cornflowerblue;} .txt-lightseagreen {color: lightseagreen;} 


/* background color */
.bg-fff {background-color:#fff;} .bg-eee {background-color:#eee;} .bg-ddd {background-color:#ddd;} .bg-ccc {background-color:#ccc;} .bg-bbb {background-color:#bbb;} .bg-aaa {background-color:#aaa;} 
.bg-999 {background-color:#999;} .bg-888 {background-color:#888;} .bg-777 {background-color:#777;} .bg-666 {background-color:#666;} .bg-555 {background-color:#555;} .bg-444 {background-color:#444;} 
.bg-333 {background-color:#333;} .bg-222 {background-color:#222;} .bg-111 {background-color:#111;} .bg-000 {background-color:#000;} 

/* link hover color, for hover bg color effect use w3css w3-hover-color w3-hover-text-color */
.hover-white a:hover {color: white;} .hover-black a:hover {color: black;} .hover-amber a:hover {color: #ffc107;} .hover-pink a:hover {color: pink;} 

/* layout */
/* display */
.dflex {display: flex;} .dgrid {display: grid;} .dnone {display: none;} .dib, .inline-block {display: inline-block;} .db, .block {display: block;} .di {display: inline;} 
.ib-container > * {display: inline-block;}
/* flex */
.fd-column {flex-direction: column;}
/* width, height */
.mxw-100p {max-width: 100%;} .mnw-100v {min-width: 100vw;}
.mnh-100v {min-height: 100vh;} .mnh-80v{min-height: 80vh;} .mnh-70v{min-height: 60vh;} .mnh-70v{min-height: 60vh;} .mnh-50v{min-height: 50vh;} .mnh-40v{min-height: 40vh;} .mnh-30v{min-height: 30vh;}
.vw100 {width: 100vw;} .vh100 {height: 100vh;} .full-screen {width: 100vw; height: 100vh;} .full-size {width: 100%; height: 100%;}
.auto-height {height: auto;}
.mxw-960-c { max-width: 960px; margin-left: auto; margin-right: auto; }
.mxw-800-c { max-width: 800px; margin-left: auto; margin-right: auto; }
.mxw-1200-c { max-width: 1200px; margin-left: auto; margin-right: auto; }
.mxw-1360-c { max-width: 1360px; margin-left: auto; margin-right: auto; }
.mxw-1600-c { max-width: 1600px; margin-left: auto; margin-right: auto; }
.mxw-1440-c { max-width: 1440px; margin-left: auto; margin-right: auto; }
.mxw-120 { max-width: 120px; } .mxw-150 { max-width: 150px; } .mxw-180 { max-width: 180px; } .mxw-210 { max-width: 210px; } 
.mnw-200 { min-width: 200px; } .mnw-250 { min-width: 250px; } .mnw-300 { min-width: 300px; } .mnw-350 { min-width: 350px; } 
.mnw-400 { min-width: 400px; } .mnw-450 { min-width: 450px; } .mnw-500 { min-width: 500px; } .mnw-550 { min-width: 550px; } 

/* spacing, extend bootstrap */
.m--3 { margin: -1rem; } .mt--3 { margin-top: -1rem; } .ml--3 { margin-left: -1rem; } .mr--3 { margin-right: -1rem; } .mb--3 { margin-bottom: -1rem; } 
.mx--3 { margin-left: -1rem; margin-right: -1rem; } .my--3 { margin-bottom: -1rem; margin-top: -1rem; } 
.m--4 { margin: -2rem; } .mt--4 { margin-top: -2rem; } .ml--4 { margin-left: -2rem; } .mr--4 { margin-right: -2rem; } .mb--4 { margin-bottom: -2rem; } 
.mx--4 { margin-left: -2rem; margin-right: -2rem; } .my--4 { margin-bottom: -2rem; margin-top: -2rem; } 
.m--5 { margin: -3rem; } .mt--5 { margin-top: -3rem; } .ml--5 { margin-left: -3rem; } .mr--5 { margin-right: -3rem; } .mb--5 { margin-bottom: -3rem; } 
.mx--5 { margin-left: -3rem; margin-right: -3rem; } .my--5 { margin-bottom: -3rem; margin-top: -3rem; } 
.mt-200 { margin-top: 200px; } .mb-200 { margin-bottom: 200px; } .my-200 { margin-top: 200px; margin-bottom: 200px; } 
.pt-200 { padding-top: 200px; } .pb-200 { padding-bottom: 200px; } 
.py-200 { padding-top: 200px; padding-bottom: 200px;} 
.py-150 { padding-top: 150px; padding-bottom: 150px;} 
.py-100 { padding-top: 100px; padding-bottom: 100px;} 

/* position: position self use bootstrap position utilites */
.top0 {top:0} .left0 {left: 0;} right0 {right: 0;} bottom0 {bottom: 0;} /* the rest use dc-class-2-style */
/* layer z-index */
.z-1 {z-index: 1;} .z-2 {z-index: 2;} .z-10 {z-index: 10;} .z-100 {z-index: 100;} .z--1 {z-index: -1;}

/* font effects */
.smallcap {font-variant: small-caps;}
.font100 {font-weight: 100;} .font300 {font-weight: 300;} .font400 {font-weight: 400;} .font500 {font-weight: 500;} .font700 {font-weight: 700;} .font900 {font-weight: 900;} 

.dc-attachment-fixed { background-attachment: fixed; }
.dc-imgbg { background-size: cover; background-position: center; }
.fixbg { background-attachment: fixed;	background-size: cover; background-position: center; background-repeat: no-repeat;}
/*** bootstrap has */.fixed { position: fixed; }

/* images */
.o-cover {object-fit: cover;} .o-contain {object-fit: contain;}
.o-center {object-position: center;} .o-left-top {object-position: left top;}

/* filtered element */
.dc-invert {filter: invert();}
.dc-greyscale {filter: grayscale(1);}

/* menu */
/* inline menu list */
.inline-ml ul { list-style: none; padding: 0; margin: 0; } .inline-ml li { display: inline-block; margin-right: 0.5em;} 

/* nofloat menu list */
.no-float-list ul, .no-float-list ul li {float: none !important;} 

/* floating */
.float-right {float: right;} html[dir="rtl"] .float-right {float: left;}
.float-left {float: left;} html[dir="rtl"] .float-left {float: right;}
.float-none {float: none;}
.clearb {clear: both}
.clearfix::after {content: ''; display: block; clear: both;} /*apply .clearfix to container*/


/* line height, for compact icon double text unit */
.line-height-cp {line-height: 1.25;}

/* flex */
.flex {display: flex;} .flex-column {flex-direction: column;} 
.flex-jcenter{justify-content: center;} .flex-icenter{align-items: center;}
.cell-center {display: flex; flex-direction: column; justify-content: center; align-items: center;}

/* pointer-events */
.event-none {pointer-events: none;} .event-auto {pointer-events: auto;} 

/* text shine */
.shining { opacity: 0.7; transition: 1s; }
.shining:hover { opacity: 1; transition: 1s; }
/* text shadow reflect */
.text-shadow-reflect-20 {transition: 2s;} .text-shadow-reflect-20:hover {text-shadow: grey 20px -20px 2px; transition: 2s;}

/* box shine */
.box-shining { border-color: #003f4c; transition: 1s; }
.box-shining:hover { box-shadow: 0 25px 57px 0 rgb(0 203 246 / 30%); border-color: ghostwhite; transition: 1s; }

/* box shadow */
.box-shadow-2 {box-shadow: grey 2px 2px 10px;}

/* mouse tracking effect: basic frame. shall customize radial-gradient, hover::before --size in instance */
.mouse-tracking {position: relative; overflow: hidden; cursor: pointer;}
.mouse-tracking:before {--size: 0; content: ''; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); background: radial-gradient(circle closest-side, #ffc10782, transparent); transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease;}
.mouse-tracking:hover::before {--size: 100px;}

/* copyright fonts */
.copyright-font { font-family: 'Times New Roman', Times, serif; }

/* scrumble decoding text */
.enc-wrap { cursor: pointer; }
.enc-more { opacity: 0; }
.enc-yet {background-color: #2a2b2a;  color: rgb(38, 179, 235); font-style: italic; font-size: 80%;}

/* megamenu theme */
.dc-megamenu-1a span { display: inline-block; }
.dc-megamenu-1a .a { display: flex; justify-content: space-around; align-items: center;}
.dc-megamenu-1a .a i {
  display: block;
  width: 75px;
  height: 75px;
  background-color: royalblue;
  color: ghostwhite;
  text-align: center;
  border-radius: 3px;
  align-items: center;
  font-size: 18px;
  font-style: initial;
  line-height: 75px;
  margin:15px;
  border: 1px solid ghostwhite;
  cursor: pointer;
  transition: 1s;
}
.dc-megamenu-1a .d2 i { transform: rotateZ(-45deg); transition: 1s; }
.dc-megamenu-1a .d2:hover ~ .d1 i, .dc-megamenu-1a .d1 i:hover { transform: rotateZ(-45deg); transition: 1s; }
.dc-megamenu-1a .d2 i:hover, .dc-megamenu-1a .d1:hover ~ .d2 i { transform: rotateZ(0deg); transition: 1s; }
.dc-megamenu-1a .c.c1 { text-indent: 0.4rem; }
.dc-megamenu-1a .c.c2 { font-size: 3.5rem; line-height: 4rem; }
.dc-megamenu-1a .b.a1 { color: #4CA5FF; }
.dc-megamenu-1a .b.a2 { color: #FFA54C; }
.dc-megamenu-1a .b.a4 { color: #7FFF00; transform: translateY(1.5rem); }

.dc-megamenu-3 {  }



/* brandname theme */
.dc-brand-1 { float: left; }
.dc-brand-1 > div { text-align: center; }
.dc-brand-1 h2 {
  margin-bottom: 0;
  font-size: 16px;
}
.path-frontpage .dc-brand-1 h2 {
  margin-top: -20px;
}
.dc-brand-1 i {
  display: block;
  font-size: x-small;
}
.dc-brand-1 i:last-child {
  color: black; opacity: 0;
}

/* block image backgrounds */
.img-bg {background-size: cover; background-position: center; background-repeat: no-repeat; }
.img-bg-fixed {background-attachment: fixed; }
.image-cover, .dc-imagecover { position: relative; }
.image-cover::before, .dc-imagecover div.cover {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  pointer-events: none;
  overflow-x: hidden;
/* background-image: url(/sites/default/files/dark-resources/technology-abstract-eye-cool.jpg);*/
  opacity: 0.25;
  background-size: cover;
}

/* hero solution */
.dc-hero-solution { text-align: center; color: ghostwhite; width: 90%; text-shadow: #333 1px 1px 2px; }
.dc-hero-solution > h2, .dc-hero-solution > h4 { margin: 20px; }
.dc-hero-solution .a > div, .dc-hero-solution .b > div { display: inline-block; }
.dc-hero-solution .a > div { 
  margin: 10px 20px;
  padding: 3px 30px;
  border-radius: 4px;
  border: 1px solid ghostwhite;
  font-size: 18px;
  background-color: #4169e1e0;
}
.dc-hero-solution .b > * > div:first-child { 
  width: 50px;
  height: 50px;
  background-color: #80808080;
  transform: rotate(45deg);
  display: inline-block;
  margin: 10px;
}
.dc-hero-solution .b > * > div:last-child { 
  margin: 20px 0;
}
.dc-hero-solution .b > div  { 
  margin: 30px 20px;
}
.dc-hero-solution.business .a > div { 
  background-color: #ffd700a0;
}
.dc-hero-solution.business .b > * > div:first-child {
  background-color: #5B5A7270;
}
.dc-hero-solution.individual .a > div { 
  background-color: #ffc0cba0;
}
.dc-hero-solution.individual .b > * > div:first-child {
  background-color: #B2850080;
}