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

/* footer always bottom */
.always-bottom-container {min-height: 100vh; display: flex; flex-direction: column;} .always-bottom-container > .always-bottom-footer {margin-top: auto;}

/* flip card */
.flip-card {position: relative;perspective: 150rem;} .flip-card .card-side {backface-visibility: hidden; transition: all 0.8s ease;} .card-side.card-back {position: absolute; top:0; left:0; width:100%; height:100%; transform: rotateY(-180deg);} .flip-card:hover .card-side.card-front {transform: rotateY(-180deg);} .flip-card:hover .card-side.card-back {transform: rotateY(0deg);} 

/* images */
/* masked image: use gradient cover to mask bg img remove edges; use the following three class */
.masked-img {position: relative; background-size: cover; background-position: center;}
.cover-img {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; background-position: center; }
.dc-overlay::after {
  content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.4);
}
.cover0 {position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.cover {position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.25; background-color: #80808040;}
.g-cover {position: absolute; left: 0; right: 0; top: 0; bottom: 0; 
  background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #00000040 21%, #000000 77%);
  background-image:    -moz-radial-gradient(50% 50%, ellipse cover, #00000040 21%, #000000 77%);
  background-image:     -ms-radial-gradient(50% 50%, ellipse cover, #00000040 21%, #000000 77%);
}
.mask1 .page-mask {
  background-image: -webkit-linear-gradient(-82deg, rgba(47,4,89,0.8) 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%);
  background-image:    -moz-linear-gradient(-82deg, rgba(47,4,89,0.8) 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%);
  background-image:     -ms-linear-gradient(-82deg, rgba(47,4,89,0.8) 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%d);
}
.mask2 .page-mask {
  background-image: -webkit-linear-gradient(-82deg, #590404cc 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%);
  background-image:    -moz-linear-gradient(-82deg, rgba(2, 58, 44, 0.8) 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%);
  background-image:     -ms-linear-gradient(-82deg, rgba(54, 18, 43, 0.8) 0%, rgba(0,0,0,0.95) 68%, rgba(5,22,96,0.8) 100%d);
}
.mask-0 .page-mask { background-color: #000000; }
.mask-1 .page-mask { background-color: #638ea178; }

/* slider square pager */
/* work with drupal 7 views_slideshow views slidershow format */
.slider-square-pager .views-slideshow-controls-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  text-align: center;
  padding-bottom: 20px;
}
.slider-square-pager .widget_pager > div {
  display: inline-block;
  margin: 10px;
  border: 1px solid white;
  border-radius: 1px;
  text-indent: -9999px;
  width: 2em;
  height: 2em;
  background: #ffffff30;
  cursor: pointer;
}
.slider-square-pager .widget_pager > div.active { background: #050bc7a0; }
.slider-square-pager .widget_pager > div:hover { background: #aaaaaaa0; }

/* join-us panel style */
.join { position: relative; }
.join .join-panel { position: absolute; left: 15vw; top: 15vh; background-color: #1c7ac5; max-width: 30rem; padding: 3rem; font-size: 150%; }
.join h1 { color: white; line-height: 1.5em; margin: 0; font-weight: 700; }
.join h3 { color: pink; font-weight: 700; }
.join .des { font-size: 80%; color: white; }
.join .dbtn { font-size: 1.25rem; }

.join1 { background-image: url(/sites/default/files/dark-resources/everest.jpg); }
.join1 .join-panel.image-cover::after { background-image: url(/sites/default/files/dark-resources/hiking.jpg); }



/* darkchain heading styles ------------- */
/* default left border */
.dc-heading {padding: 7px 10px; border-left: 7px solid silver;}
.dc-heading-blue {border-left-color: cornflowerblue;}
.dc-heading-red {border-left-color: indianred;}
.dc-heading-gold {border-left-color: gold;}
.dc-heading-green {border-left-color: darkseagreen;}

/* mobile widgets */
/* styled trademark */
.trademark{color: #4c4c4c;} .trademark span{color: #eee;}
/* styled trademark */
.sign-wrapper{text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover;} 
/* widget: brackets */
.wdg-bracket-1 {width: 1rem; height: 2rem; border-color: #4a4a4a;border-style: solid; position: absolute;}
.wdg-bracket-1.z1{left: 0; top: 0; border-width: 0.4rem 0 0 0.4rem;}
.wdg-bracket-1.z2{right: 0; top: 0; border-width: 0.4rem 0.4rem 0 0;}
.wdg-bracket-1.z3{left: 0; bottom: 0; border-width: 0 0 0.4rem 0.4rem;}
.wdg-bracket-1.z4{right: 0; bottom: 0; border-width: 0 0.4rem 0.4rem 0;}

/* put text to both ends of a line */
.two-ends {display: flex; justify-content: space-between; align-items: center;}

/* quick jump widgets */
.m-back1 {position: fixed;top: 1rem;left: 1rem;}
.m-2top { position: absolute; right: 1rem; transform: rotate(71deg); top: -2rem; }
.m-go-home {position: fixed;top: 2.5rem;left: 1rem;}
.down-1-page a { line-height: 2rem; margin: 0 1rem; }

/* image style 1: white 10 border */
.dc-image-style1 img, img.dc-image-style1 {
  border: 1px solid #e8e8e8;
  padding: 10px;
  background: #f7f7f7;
}

/* image style 2: lightgrey 10 border */
.dc-image-style2 img, img.dc-image-style2 {
  max-width: 100%;
  border: 1px solid rgb(183 182 182 / 50%);
  padding: 6px;
  background: rgb(208 206 206 / 50%);
  border-radius: 10px;
  box-shadow: #ffffff80 0 0 15px;
}

/* displays: used for node pages */
.dc-ds1 { position: relative; }
.dc-ds1 .a.w3-col { padding: 20px; }
/*.dc-ds1 .triangle{
	width: 0;
	height: 0;
	border-width: 80px 0 80px 160px;
  border-color: transparent transparent transparent #000000ab;
  border-style: solid;
  display: inline-block;
  vertical-align: bottom;
  transform: rotate(45deg) translateX(50px);
}*/
.dc-ds1 .d {
  text-align: center;
  color: black;
  font-variant: diagonal-fractions;
  font-size: 40px;
  margin-bottom: 150px;
}
.dc-ds1 .c img { border: 8px solid silver; }
.dc-ds1 .people img { border-radius: 50%; }
.dc-ds1 .t {
  position: absolute;
  top: 300px;
  left: 18vw;
  padding: 10px 20px;
  background: #008000c0;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.dc-ds1 .t > div { display: inline-block;}
.dc-ds1 .t > div:last-child {
  padding: 0 20px;
  max-width: 400px;
  vertical-align: middle;
  text-align: right;
  color: silver;
  font-size: small;
}
.dc-ds1 .t > div:first-child {
  vertical-align: middle;
  padding: 0 20px;
  border-left: 1px solid ghostwhite;
  text-shadow: 1px 1px black;
}
.dc-ds1 .s {
  display: flex;
  justify-content: flex-end;
}
.dc-ds1 .s > div {
  background: #3f51b5d1;
  color: ghostwhite;
  padding: 20px 30px;
  max-width: 400px;
  display: inline-block;
  border-radius: 10px;
}
.dc-ds1 .p {
  margin-top: 250px; text-indent: 2em; color: #444444;
}

/* walls: used on drupal block class to wrap block */
.dc-wall { max-height: 1000vh; overflow: hidden; transition: 1s; }
.dc-wall.wall-folded { height: 300px; transition: 1s; }
/* wall style 1: deep blue transparent, thick top border, 1 bottom border */
.dc-wall-style1 {
  background: #010101e0;
  border-top: 15px solid #172b42eb;
  border-bottom: 1px solid white;
}
/* wall style 2: near white solid bg, thick top border, 1 bottom border */
.dc-wall-style2 { background: #f5f5f5; padding: 100px 0; border-bottom: 1px solid white; }
.dc-wall-style3 { background: #5c5a5ae8; padding: 100px 0; color: ghostwhite; }


/* cards: used on views row */
/* card style 1, 2: inline block, white text */
.dc-card-style1, .dc-card-style2 {
  display: inline-block;
  color: ghostwhite;
  vertical-align: middle;
}
/* card style 1: 300x500 styled content layout, apply to row, used with w3css */
.dc-card-style1 .dc-card {
  position: relative; 
  max-width: 300px;
  height: 500px;
  border: 1px whitesmoke solid;
  padding: 60px 30px;
  text-align: center;
  border-radius: 5px;
  transition: 0.5s;
}
.dc-card-style1 .dc-card > * { position: relative ;}
.dc-card-style1 .dc-card:hover {
  /*cursor: pointer;*/
  transform: scale(1.1);
  transition: 0.5s;
}
.dc-card-style1 b {color: #ddd;}
.dc-card-style1 p {color: #eee;}
.dc-card-style1 ul {
  list-style: none;
  font-size: 14px;
  text-align: left;
  padding-left: 60px;
  margin: 40px 0;
}
.dc-card-style1 li {position: relative;}
.dc-card-style1 li::before {
  position: absolute;
  left: -16px;
  content: url(/sites/default/files/dark-resources/list-angle-right.svg);
}
.dc-card-style1 .w3-button {border: white 1px solid; border-radius: 2px;}

/* card style 2: 300x300 styled content box, apply to row, used with w3css */
.dc-card-style2 .dc-card {
  position: relative; 
  width: 300px;
  height: 300px;
  text-align: center;
  overflow: hidden;
  border: 10px solid #c0c0c020;
}
.dc-card-style2 .a { transform: translate(-50%, -65%); }
.dc-card-style2 .dc-card .p { font-size: 14px; max-height: 0; overflow: hidden; transition: 2s; }
.dc-card-style2 .dc-card:hover .p { max-height: 300px;; transition: 2s; }
.dc-card-style2 .dc-card .b { bottom: 3em; border: 1px solid white; border-radius: 15px; padding: 2px 15px; font-size: small;}
.dc-card-style2 .dc-card:hover .cover {opacity: 0.75;}
.dc-card-style2 .dc-card span { display: inline-block; margin-left: 0; transition: 2s; }
.dc-card-style2 .dc-card:hover span { margin-left: 20px; transition: 2s;}

/* card style 3: flex image + content 2 cols, apply to field, used with w3css */
.dc-card-style3 { display: flex;  align-items: center; justify-content: center; }
.dc-card-style3 > .note { max-width: 1200px; }
.dc-wall-style2 .dc-card-style3 h2 { color: black;}
.dc-card-style3 small { color: grey; font-size: 1.25rem; font-variant-caps: small-caps; }
.dc-card-style3 img { border: 4px solid #00000040; transition: 0.5s; }
.dc-card-style3 img:hover { border-color: #00000080; transition: 0.5s; }

/* card style 4: flex items, apply to view, used with w3css */
.dc-card-style4 .view-content { display: flex; flex-wrap: wrap; justify-content: center; }
.dc-card-style4 .dc-card { width: 300px; }
.dc-wall-style2 .dc-card-style4 { max-width: 1200px; }
.dc-wall-style2 .dc-card-style4 h2 { color: black;}



/* curtain cover */
.dc-curtain { 
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 10; 
  pointer-events: none;
}
.dc-curtain .a {
  width: 50%;
  background: #80808040;
  height: 100%;
  transform: skewX(-30deg) translateX(-60%); 
  transition: 0.5s; 
}
.dc-curtain .a.y { transform: skewX(-30deg) translateX(-70%); transition: 1s;}
.dc-curtain .a.z { transform: skewX(-30deg) translateX(-80%); transition: 1s;}
.dc-curtain .t { 
  position: absolute;
  color: ghostwhite;
  background: #00000080;
  padding: 16px;
  border: 1px solid #f8f8ffa8;
  top: 20vh;
  margin: auto 30px;
  font-size: small;
}
.dc-curtain .t h4 {
  display: inline-block;
  line-height: 1.5em;
  vertical-align: super;
  margin-right: 10px;
}


@media (max-width: 600px) {
  .dc-ds1 .t {
    position: unset; display: unset; text-align: center; background: unset; padding: unset;
  }
  .dc-ds1 .t > div:first-child { border-left-width: 0; text-shadow: unset; }
  .dc-ds1 .t > div:last-child { text-align: unset; }
  .dc-ds1 .t h2 { color: black; font-size: 20px; }
  .dc-ds1 .s, .dc-ds1 .s > div { display: block; max-width: unset; }
  .dc-ds1 .c img { border: 4px solid black; box-shadow: black 3px 2px 20px; }
  .dc-ds1 .p { margin-top: unset; }
  .dc-ds1 .d { margin-bottom: unset; }
}