@font-face {
  font-family: druk;
  src: url(fonts/DrukWide/DrukWide-Medium.otf);
}

* {
  box-sizing: border-box;
  outline: none;
}
html,
body {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  font-family: acumin-pro, sans-serif;
  
  height: 100%;
}
body {
  background: url(images/noise.png) repeat #162128;
}
h1 {
  font-family: druk, sans-serif;
  text-transform: uppercase;
  font-size: 4rem;
  letter-spacing: 2px;
  line-height: 3.5rem;
  color: #ff6e60;
  margin: 0;
  display: inline-block;
  font-family: oswald, sans-serif;
}
h2 {
  text-transform: uppercase;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 4rem;
  color: #ff6e60;
  margin:  -9px 0 0 0;
    font-family: oswald, sans-serif;
}
h3 {
  font-family: oswald, sans-serif;
  text-transform: uppercase;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.5rem;
  color: #ff6e60;
  color:#ffffff;
  margin: 24px 0 0 0 ;
      opacity: 0.4;
  /* grid-column: span 2; */
}

p {
  font-family: acumin-pro, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.4rem;
  color: #fff;
  margin: auto 0 0 10px;
  /* margin: 0rem 0 0 20px; */
  vertical-align: top;
  display: inline-block;
  padding-right: 0px;
}
p > strong {
  /* color: #ff6e60; */
  font-weight: 700;
}
.highlight {
  color: #ff6e60;
}
.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.content {
  width: 100%;
  max-width: 915px;
  display: inline-block;
  margin-top: 30px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-bottom:80px;
}
.header {
  display:-ms-grid;
  display: grid;
  -ms-grid-columns:1.05fr 0.95fr;
  grid-template-columns: 1.05fr 0.95fr;
  z-index: 4;
  margin-bottom: 20px;
  position: relative;
  
}
.header p {
  margin: auto 0 0 auto;
}
.header p > a {
color: #ff6e60;
 text-decoration: none;
 text-transform: uppercase;
 font-weight: 500;
 position: absolute;
 top:0;
 right:0;
 font-size: 12px;
 border-bottom: currentColor solid 1px;
} 

.title {
  margin-left: -4px;
  margin-top:auto;
}

.video {
  text-align: center;
  z-index: 2;
  display: block;
  background: transparent;

    overflow: hidden;
    width: 100%;
    height: auto;
    min-height: 519px;
    /* box-shadow: 0 0 255px 10px rgba(0,0,0,0.8) inset, 0 0 25px 0px rgba(0,0,0,0.5) inset; */
}

.video img {
  width: 100%;
  /* height: calc(((100vw - 40px) / 16) * 9); */
  /* height: calc((100vw - 40px) / 16 * 9); */
  object-fit: cover;
      margin-left: 50%;
    transform: translateX(-50%);
}
.video > iframe,
.video > div, .video > video {
  /* width: 80vw;
  height: 45vw; */
    width: 915px;
  height: calc(915px / 16 * 9);
  /* max-width: 915px;
  max-height: 515px; */
  /* border-radius: 10px; */
    overflow: hidden;
}

video.vjs-tech {
  width:100%;
  height: calc(915px / 16 * 9);
}

.video-js .vjs-big-play-button {
  /* display: none; */
    top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width:955px) {
  .video {
      min-height: calc((100vw - 40px) / 16 * 9);
  }
  .video > iframe,
.video > div, .video > video {
  /* width: 80vw;
  height: 45vw; */
  width: calc(100vw - 40px);
  height: calc((100vw - 40px) / 16 * 9);

  /* max-width: 915px;
  max-height: 515px; */
}

  video.vjs-tech {
    width:calc(100vw - 40px);
    height: calc((100vw - 40px) / 16 * 9);
  }
}

.icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* justify-content: space-around; */
  
  grid-column-gap: 20px;
  width:100%;
  max-width: calc(915px * 0.75);
  margin-top: 20px;
}

.icons a {
  text-decoration:none;
  color: #fff;
  text-align: center;
}

@media screen and (max-width:600px) {
  .icons a {
    font-size:0.9rem;
  }
}
@media screen and (max-width:555px) {
  .icons a {
    font-size:0.8rem;
  }
}
@media screen and (max-width:500px) {
  .icons a {
    font-size:0.7rem;
  }
}
.icons br {
display: none;
}
.icons img {
  width: 100%;
  height:54px;
  display: block;
  position: relative;
  object-fit: contain;
}

.pccp {
  /* display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
  /* justify-content: space-around; */
  display:inline-block;
  /* grid-column-gap: 20px; */
  width:100%;
  max-width: calc(915px * 0.75);
  margin-top: 20px;
}

.pccp a {
  text-decoration:none;
  color: #214358;
  text-align: center;
  vertical-align: middle;
  float: left;

}

.pccp a:first-of-type {
  margin-right:30px;

}
@media screen and (max-width:600px) {
  .pccp a {
    font-size:0.9rem;
  }
}
@media screen and (max-width:555px) {
  .pccp a {
    font-size:0.8rem;
  }
}
@media screen and (max-width:500px) {
  .pccp a {
    font-size:0.7rem;
  }
}
.pccp br {
display: none;
}
.pccp img {
  width: auto;
  height:54px;
  display: inline-block;
  position: relative;
  object-fit: contain;
  vertical-align: middle;
  margin-top: -8px;
}

.divider {
  color:#fff;
  font-size: 1.3rem;
  display: inline-block;
  width: 140px;
  margin: 30px auto 10px 0;
  position: relative;
}
.divider::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: calc(-50vw + 80px + 30px);
    border-bottom: #fff solid 2px;
    width: 0;
}
.divider::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 140px;
  border-bottom: #fff solid 2px;
  width: calc((915px * 0.75) - 140px);
}

.divider.longer {
  width: 280px;
  margin: 30px auto 10px 0;
  position: relative;
}

.divider.longer::after {
  top: 18px;
  left: 280px;
  border-bottom: #fff solid 2px;
  width: calc((915px * 0.75) - 280px);
}

@media screen and (max-width: 767px) { 
  .divider,.divider.longer {
    margin: 30px auto 10px calc(50% - 80px);
    text-align:center;
    width: 160px;
  }

  .divider::before {
    width: calc(50vw - 80px - 30px);
  }

  .divider::after, .divider.longer::after {
    left: 160px;
    width: calc(50vw - 80px - 30px);
  }

  .divider.longer::before,  .divider.longer::after {
    top:29px;
  }
}
.clear {
  display: block;
  clear: both;
}
.buttons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 180px 180px 180px auto;
  grid-template-columns: 180px 180px 180px auto;
  /* justify-content: space-around; */
  grid-column-gap: 15px;
  margin-top: 15px;
}

.buttons > a {
  text-align:center;
  background: #ff6e60;
  text-decoration: none;
  line-height: 18px;
  padding: 10px 0;
  border: #ff6e60 solid 2px;
      border-radius: 10px;
    color: #000;
    font-weight: 500;
}
.buttons > a smaller {
  font-size:0.6rem;
  /* font-weight:700; */
  vertical-align: super;
}
.buttons > a:nth-of-type(4) {
  background: transparent;
  color:#ff6e60;
}

/* .buttons > a:hover,.buttons > a:active {
  background: transparent;
    color: #ff6e60;
} */

/* .buttons > a:nth-of-type(3):hover,.buttons > a:nth-of-type(3):active {
  background: #ff6e60;
  color:#000;
} */



.buttons > a > span {
  display: block;
}


.buttons > a > span:first-of-type {
/* font-family: source-han-sans-cjk-sc, sans-serif; */
font-family: source-han-sans-simplified-c, sans-serif;
    font-size: 1rem;
    line-height: 18px;
}


.buttons > a > span:last-of-type {
line-height: 14px;
    margin-bottom: 0px;
        font-size: 0.7rem;
}
/*  */

.logo {
  width: 70px;
  height: calc(70 / 163 * 114px);
  background: url("images/logo-main.png") no-repeat scroll transparent;
  display: block;
  background-size: contain;
  margin: 80px auto 40px;
  z-index: 5;
  display: none;;
  /* background-blend-mode: color; */
}

@media screen and (max-width: 955px) {
  .content {
    padding-left: 20px;
    padding-right: 20px;
  }
  
}
@media screen and (max-width: 915px) {
  h1 {
    font-size: 3.5rem;
    line-height: 3rem;
  }
  h2 {
    margin-top: 2px;
    font-size: 3.5rem;
    line-height: 2.2rem;
  }
  
}
@media screen and (max-width: 767px) {
  .header {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }

  .header p>a {
    position: absolute;
    top: 0;
    right: 0;
  }
  h1 {font-size:3rem; line-height:2.7rem;}
  h2 {font-size:3rem; line-height:2.7rem;margin-top: -6px;}
    h3 {margin-top:40px;}
  p:first-of-type {
    margin-top:-40px;
  }

  .buttons {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;    
    grid-template-columns: 1fr;
    max-width: 420px;
    width: 90%;
    grid-column-gap: 40px;
    margin: 0 auto;
  }
  .buttons > a {
    /* border-bottom-width: 0.1px; */
    margin-top: 15px;
  }

  smaller {
    vertical-align: unset;
  }
  .buttons > a > span:last-of-type {
    line-height: 20px;
  }
/* } */

  /* .buttons > a > br {
    display: none;
  } */
  /* .buttons > a:nth-of-type(3) {
    margin-left: calc(50% + 20px);
    margin-right: calc(-50% - 20px);
    margin-top: 10px;
    padding-bottom: 1rem;
  } */
  .content {
    margin-top: 20px;
  }
  .title {
    margin-bottom: 20px;
  }

  p {
    margin-left: 0;
  }
  .logo {
    width: 90px;
    height: calc(90 / 163 * 114px);
  }
}
@media screen and (max-width: 639px) {
  .logo {
    width: 80px;
    height: calc(80 / 163 * 114px);
  }
  .buttons > a {
    font-size: 1rem;
  }
}

/* Chinese Tweaks */
body.english {
  background: url(images/englishbackdrop.jpg) center center no-repeat scroll #162128;
  background-size:cover;
}

/* Chinese Tweaks */
body.chinese {
  background: url(images/chinesebackdrop.jpg) center center no-repeat scroll #015496;
  background-size:cover;
}
/* .chinese h1 {
  color: #fff;
} */
/* .chinese h2 {
  color: #3a0813;
} */
.chinese h1 {
  margin-top: 42px;
    font-size: 3.8rem;
  /* font-family: source-han-sans-cjk-sc, sans-serif; */
  font-family: source-han-sans-simplified-c, sans-serif;
font-style: normal;
font-weight: 900;
line-height: 3.8rem;
letter-spacing: 0px;
transform: scale(1,1.2);
}
.chinese h2 {
  font-size: 1.7rem;
    letter-spacing: 1.5px;
    line-height: 1.5rem;
    margin: 20px 0 4px 0 ;
    color:#fff;
    opacity: 0.7;
}
.chinese .header {
  -ms-grid-columns: 7fr 8fr;
  grid-template-columns: 7fr 8fr;
}
/* .chinese .title {
  padding-top: 7px;
} */


.chinese p > a {
  text-align:right;
  font-size: 16px;
}
.chinese p {
  color: #fff;
  /* font-size: 1.1rem;
  line-height: 1.3rem; */
}
.chinese p > strong {
  color: #ff6e60;
  font-weight: 300;
  /* font-size: 1.1rem;
  line-height: 1.3rem; */
}

.chinese .highlight {
  color: #3a0813;
}

/* .chinese .header p > a:last-of-type {
  color: #000;
}  */


.chinese .video {
  /* background: #f2b791; */
}

/* .chinese .video > div {
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 50%;
  transform: translate(-50%, 0%);
  padding: 40px 0;
  min-width: 70%;
  text-align: left;
} */
.chinese h4 {
  font-size: 1.2rem;
  margin: 0 auto 40px;
}
.chinese audio {
  width: 100%;
  margin: 0 auto;
}

.chinese .divider {
  width: 100px;
}
.chinese .divider::before {
    top: 14px;
    left: calc(-50vw + 50px + 30px);
}
.chinese .divider::after {
  top: 14px;
  left: 100px;
  width: calc((915px * 0.75) - 100px);
}

@media screen and (max-width: 767px) { 
  .chinese .divider {
    margin: 30px auto 10px calc(50% - 60px);
    width: 120px;
  }

  .chinese .divider::before {
    width: calc(50vw - 60px - 30px);
  }

  .chinese .divider::after {
    left: 120px;
    width: calc(50vw - 60px - 30px);
  }
}
.chinese .buttons {
  -ms-grid-columns: 180px 180px 180px auto;
  grid-template-columns: 180px 180px 180px auto;
}
.buttons > a:nth-of-type(2) > span:first-of-type {
  text-indent:8px;
}
.chinese .buttons > a  {
  color:#fff;
  padding: 5px 0;
  height:67px;
}

.chinese .buttons > a:nth-of-type(4)  {
  color:#ff6e60;
}
/* .chinese .buttons > a:hover, .chinese .buttons > a:active {
  color:#ff6e60;
} */
/* .chinese .buttons > a:nth-of-type(3):hover, .chinese .buttons > a:nth-of-type(3):active {
  color:#fff;
} */
.chinese .logo {
  background: url("images/logo-chi.png") center center no-repeat scroll transparent;
  background-size: contain;
    width:110px;
  height: calc(110 / 163 * 114px);
}
@media screen and (max-width: 915px) {
  .chinese h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
  .chinese h2 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }
}


@media screen and (max-width: 767px) {
  .chinese h1 {
    margin-top:56px;
  }
  .chinese .header {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .chinese .buttons {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
.chinese .buttons > a  {
  height:54px;
}
.chinese .buttons > a  br {
  display: none;
}
    .chinese  .title {
    margin-bottom: -8px;
  }
  .svl.chinese .title {
    margin-bottom: 20px;
    
  }
}

/* RK Tweaks */
body.rk {
  background: url(images/rkbackdrop.jpg)  center center no-repeat scroll #becfd7;
  background-size: cover;
}
/* .rk h1 {
  color: #fff;
} */
/* .rk h2 {
  color: #291e51;
} */
.rk h1 {
color: #f9e32c;
    margin-bottom: 4px;
}
.rk h3 {
  color:#fff;
  opacity: 1.0;
}
.rk p {
  color: #fff;
  /* font-size: 1.1rem;
  line-height: 1.2rem; */
}
.rk p > strong {
  color:inherit;
  font-weight: 600;
}
.rk p > a {
  color: #fff;
}
.rk .header {
  -ms-grid-columns: 1.05fr 0.95fr;
  grid-template-columns: 1.05fr 0.95fr;
}
.rk .highlight {
  color: #291e51;
}

.rk .video {
  position: relative;
  overflow: hidden;
}
.rk .instruct {
  width: 100%;
  position: absolute;
  bottom: 70px;
  left: 0px;
  color: #fff;
}
/* .rk .video > div {
  background: #bdcfb8;
  display: grid;
  grid-template-columns: 1fr 1fr;
} */
.rk .video > div > button {
  height: 100%;
  background: url("images/rk2-6.png") no-repeat scroll transparent;
  background-size: contain;
  margin: 0;
  padding: 0;
  display: inline-block;
  border: none;
  outline: none;
}
.rk .video > div > button:hover {
  background: url("images/rk2-6-green.png") no-repeat scroll transparent;
  background-size: contain;
}
.rk .video > div > button:active {
  background: url("images/rk2-6-pressed.png") no-repeat scroll transparent;
  background-size: contain;
}
.rk .video > div > button:last-of-type {
  background: url("images/rk7-12.png") no-repeat scroll transparent;
  background-size: contain;
}
.rk .video > div > button:last-of-type:hover {
  background: url("images/rk7-12-green.png") no-repeat scroll transparent;
  background-size: contain;
}
.rk .video > div > button:last-of-type:active {
  background: url("images/rk7-12-pressed.png") no-repeat scroll transparent;
  background-size: contain;
}

.rk .icons a {
  color: #214358;
}

.rk .divider {
  color:#214358;
}

.rk .divider::before,.rk .divider::after {
  border-bottom: #214358 solid 2px;
}
.rk .buttons {
  -ms-grid-columns: 180px 180px 180px auto;
  grid-template-columns: 180px 180px 180px auto;

}
.rk .buttons > a {
  color:#000;
    background: #f9e32c;
    border: #f9e32c solid 2px;
}

/* .rk .buttons > a:hover,.rk .buttons > a:active {
  color:#f9e32c;
} */
/* .rk .buttons > a {
  border-bottom-color: #000;
  color: #fff;
} */


.rk .logo {
  background: url("images/logo-rk.png") center center no-repeat scroll transparent;
  background-size: contain;
  width:110px;
  height: calc(110 / 163 * 114px);
}
@media screen and (max-width: 955px) {
  /* .rk h1 {
    font-size: 7.8vw;
  }
  /* .rk p { */
    /* font-size: 1.6vw;
    line-height: 1.1rem;
  } */ 
  .rk .header {
    -ms-grid-columns: 5fr 5fr;
    grid-template-columns: 5fr 5fr;
  }
}
@media screen and (max-width: 767px) {
  /* .rk h3 {
    grid-column: span 1;
  } */
  .rk .header {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
  /* .rk p {
    font-size: 1.2rem;
    line-height: 1.4rem;
  } */
  .rk .buttons {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.pre body {
  background: url(images/noise.png) repeat #ffffff;
}
.pre .header {
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
}
.pre .content {
  margin-top: 60px;
}
.pre h1 {
  color: #414246;
  font-size: 2rem;
  line-height: 1.8rem;
}
.pre h2 {
  color: #f6c956;
  font-size: 6.4rem;
}

.pre p {
  margin: 30px 320px 0 0px;
  color: #414246;
}


@media screen and (max-width: 915px) {
  .rk h2 {
line-height:3.2rem;
  }
  
  .pre p {
    margin-right: 35vw;
  }
}

@media screen and (max-width: 767px) {
  .rk h1 {
    margin-top:-6px;
  }
  .rk h3 {
    /* margin-top:50px; */
    line-height: 2.4rem;
  }
  .rk h2 {
    line-height:3rem;
  }
.rk p:first-of-type {
  margin-top:-20px;
}
}

@media screen and (max-width: 650px) {
  .pre h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
  }
  .pre h2 {
    font-size: 3.5rem;
  }
  .pre p {
    margin: 30px 0px 0 0px;
    color: #414246;
  }
}
.pre .highlight {
  color: #414246;
  font-weight: 600;
}

.pre p > .highlight:last-of-type {
  font-size: 1.4rem;
}
.pre .logo {
  background: url("images/logo-orange.png") no-repeat scroll transparent;
  background-size: contain;
  width: 70px;
  height: calc(70 / 163 * 114px);
}
#vidpopup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}
#vidpopup.show {
  top: 0%;
  opacity: 1;
  transition: 0.3s;
}
#vidcancel {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: 0.3s;
  line-height: 44px;
  text-align: center;
  background: transparent;
  color: #fff;
}
#vidpopup.show:hover + #vidcancel {
  opacity: 1;
  transition: 0.3s;
  cursor: pointer;
}
#vidcancel:hover {
  opacity: 1;
  transition: 0.3s;
  cursor: pointer;
}
iframe, .holding {
  background: rgba(0,0,0,0.3);
box-shadow: 0 0 30px rgba(0,0,0,1) inset;
}
.loader {
  border: 6px solid transparent; /* Light grey */
  border-top: 6px solid #999999; /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  margin-top: calc((915px / 32 * 9) - 30px);
margin-left: calc(50% - 30px);
}

@media screen and (max-width: 955px) {
  .loader {
    margin-top: calc(((100vw - 40px) / 32 * 9) - 30px);
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Youth Tweaks */
body.youth {
  background: url(images/youthbackdrop.jpg)  center center no-repeat scroll #171717;
  background-size: cover;
}
.youth .header {
  -ms-grid-columns: 1.1fr 0.9fr;
  grid-template-columns: 1.1fr 0.9fr;
}
.youth .header p>a {
  color:#fff;
}
.youth h1 {
  color:#fff;
}

.youth h2 {
  color:#fff;
  font-size: 1.4rem;
  line-height: 2.4rem;
  font-weight: 400;
}
.youth .buttons > a {
  background-color: #fff;
  border: #fff solid 2px;
}
@media screen and (max-width: 915px) {
  .youth h2 {
    font-size: 1.2rem;
    line-height: 0.8rem;
  }
}

@media screen and (max-width: 767px) {
  .youth h2 {
    font-size: 1rem;
    line-height: 1.8rem;
  }
  .youth .header {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-bottom: 20px;
  }
}
/* COLOR CHANGE FOR RESURRECTION SUNDAY */

.english h1,
.english h2,
.english .header p > a,
.english .buttons > a:nth-of-type(4),
.english .icons a {
  color: #25f1d0;
}

.english .buttons > a:nth-of-type(1),
.english .buttons > a:nth-of-type(2),
.english .buttons > a:nth-of-type(3) {
  background: #25f1d0;
}

.english .buttons > a:nth-of-type(1),
.english .buttons > a:nth-of-type(2),
.english .buttons > a:nth-of-type(3),
.english .buttons > a:nth-of-type(4) {
  border: #25f1d0 solid 2px;
}

/* .chinese h1,
.chinese h2,
.chinese .header p > a,
.chinese .buttons > a:nth-of-type(3) {
  color: #d0854e;
}

.chinese .buttons > a:nth-of-type(1),
.chinese .buttons > a:nth-of-type(2) {
  background: #d0854e;
}

.chinese .buttons > a:nth-of-type(1),
.chinese .buttons > a:nth-of-type(2),
.chinese .buttons > a:nth-of-type(3) {
  border: #d0854e solid 2px;
} */

#social .green  { color: #25f1d1; }
#social .orange { color: #fe6d60; }
#social .yellow { color: #f9e32c; }
#social .white  { color: #ffffff; }

#social {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  background: rgba(0,0,0,0.7);
}
#social.show {
  display: block;
}
.social-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  height: auto;
  max-width:540px;
  display: inline-block;
  background: rgba(107,107,107,0.85);
  transform: translate(-50%, -50%);
  text-align:center;
  border-radius:6px;

}

.social-panel > div {
  padding:10px 0;
}

#social .green .facebook { background-image: url("images/icon-facebook-green.png"); }
#social .green .whatsapp { background-image: url("images/icon-whatsapp-green.png"); }
#social .green .email    { background-image: url("images/icon-email-green.png"); }

#social .orange .facebook { background-image: url("images/icon-facebook-orange.png"); }
#social .orange .whatsapp { background-image: url("images/icon-whatsapp-orange.png"); }
#social .orange .email    { background-image: url("images/icon-email-orange.png"); }

#social .yellow .facebook { background-image: url("images/icon-facebook-yellow.png"); }
#social .yellow .whatsapp { background-image: url("images/icon-whatsapp-yellow.png"); }
#social .yellow .email    { background-image: url("images/icon-email-yellow.png"); }

#social .white .facebook { background-image: url("images/icon-facebook-white.png"); }
#social .white .whatsapp { background-image: url("images/icon-whatsapp-white.png"); }
#social .white .email    { background-image: url("images/icon-email-white.png"); }

.social-panel > div > * {
  display: inline-block;
  position: relative;
  width: 64px;
  height:64px;
  overflow: hidden;
  /* background-color: khaki; */
  background-position: center center;
  background-attachment: scroll;
  background-size:64px 64px;
  background-repeat: no-repeat;
  margin-right: 0;
}

.social-panel .close {
  appearance: none;
  position: absolute;
    top: 6px;
    right: 6px;
    width: 27px;
    height: 27px;
    z-index: 5;
    background: none;
    outline: none;
    border: none;
    opacity: 0.7;
    transition: 0.2s;
  }
.social-panel .close:hover {
  opacity: 1;
}
.social-panel .close:active::before,.social-panel .close:active::after {
  background: #000;
  top: 7px;
  transition: 0.2s;
}

.social-panel .close::before {
content: "";  position: absolute;
width:1px;
height:17px;
background: #ffffff;
display: block;
margin:0;
top: 5px;
left: 13px;
transform: rotateZ(45deg);
}

.social-panel .close::after {
  content: "";  position: absolute;
  width:1px;
  height:17px;
  background: #ffffff;
  display: block;
  margin:0;
  top: 5px;
  right: 13px;
  transform: rotateZ(-45deg);
}
.social-panel > div > a {
  margin-left:calc(100% / 16);
}

.social-panel > div > *:last-child {
  width: auto;
  height:auto;
  margin-left: 0;
  font-size:1.4rem;
  color: currentColor;
  margin-bottom:14px;
  cursor: pointer;
}
.social-panel h5 {
  display: block;
  margin: 20px auto;
  width:calc(100% - 40px);
  font-size: 1.8rem;
  color: #fff;
  font-weight: 100;
  height:auto;
}
.social-panel #clipboard-value {
  display: block;
  margin: 20px auto;
  width:calc(100% / 8 * 7);
  height:auto;
  font-size: 0.9rem;
  border-radius:6px;
  padding: 8px;
  text-align:center;
}

.social-panel .fb_iframe_widget > span, .social-panel .fb_iframe_widget iframe {
  width: 64px !important;
  height: 67px !important;
  opacity: 0;

}

.social-panel .fb_iframe_widget iframe {
transform: scale(1,3.4) translateY(34%);
}


#pr-info, #pr-info0830, #pr-info1130, #pr-info1430 {
  color: #24f1d0;
  margin-top: 12px;
  margin-bottom:-8px;
  font-size: 0.8rem;
  padding-left:10px;
  width:100%;
  position: relative;
}
#pr-info::before,#pr-info0830::before,#pr-info1130::before, #pr-info1430::before {
  content: "*";
  position: absolute;
  left:-2px;
  top:2;
}

.sk-circle {
  margin: 239.5px auto;
  width: 40px !important;
  height: 40px !important;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}



.ndp.english h1, .ndp.english h2, .ndp.english .header p > a, .ndp.english .buttons > a:nth-of-type(4), .ndp.english .icons a {
 color:#fff;

}

.ndp .icons img {
  filter: brightness(3);
}

.ndp.english .buttons > a:nth-of-type(1),
.ndp.english .buttons > a:nth-of-type(2),
.ndp.english .buttons > a:nth-of-type(3) {
  background: #950706;
}

.ndp.english .buttons > a:nth-of-type(1),
.ndp.english .buttons > a:nth-of-type(2),
.ndp.english .buttons > a:nth-of-type(3),
.ndp.english .buttons > a:nth-of-type(4) {
  border: #950706 solid 2px;
  border-radius:0;
  color:#fff;
}

.ndp #pr-info1130, .ndp #pr-info1430 {
  color:#fff;
}

.ndp #pr-info1130 a, .ndp #pr-info1430 a {
  color:#fff !important;
}


.christmas {
  background: url(images/christmas2020.jpg)  center center no-repeat scroll #000000;
  background-size: cover;
}

.christmas .title {
  background: url(images/christmas2020-title.png)  5px center no-repeat scroll transparent;
  background-size: contain;
  padding-top: 130px;
  margin-top: 40px;
}

.christmas .title h1, .christmas .title h3 {
  display: none;
}

.christmas .buttons > a {
  background: #fd955a;
  border: #fd955a solid 2px;
}

.christmas .icons a {
  color:#eccb9a;
}

/* .christmas .icons {
margin-top:-10px;
} */
.christmas .social-panel {background: #0e2b31; }
.christmas #social .green  { color: #c04432; }
.christmas #social .green .facebook { background-image: url("images/icon-facebook-gold.png"); }
.christmas #social .green .whatsapp { background-image: url("images/icon-whatsapp-gold.png"); }
.christmas #social .green .email    { background-image: url("images/icon-email-gold.png"); }

.christmas #pr-info, .christmas #pr-info0830, .christmas #pr-info1130, .christmas #pr-info1430 {
  color: #eccb9a;
}