/* Content Partner */
.cp-wrap { margin:10px 0 45px; padding: 15px 15px 25px; background:#FBFBFB; border-top: 1px solid #DDD; border-bottom:1px solid #DDD; }
.cp-300w { text-align: center !important; margin: 0 auto !important; width:300px !important; }

/* G display */
.awide { margin: 0 auto 45px !important; text-align: center !important; }
.atall { }

/* Content Block */
.cpZone ins img { display:block !important; }
.cpZone { width: 300px; margin: 0 auto 45px auto; }

/* html5 */
div.zTopMobile .zTop {
  margin-bottom: 10px !important;
}

/* Home page Weather */
.td-a-rec-id-custom_ad_1 > div, .td-a-rec-id-custom_ad_2 > div, .td-a-rec-id-custom_ad_3 > div, .td-a-rec-id-custom_ad_4 > div, .td-a-rec-id-custom_ad_5 > div { margin-bottom: 0px !important; }
.tagdiv-type ins a img { margin-bottom: 0px !important; }

/* Takeover Wrap */
.zTop { 
  text-align:center; 
  margin: 0 auto 0; 
}

.zTop iframe { 
  max-width:1200px!important; 
  max-height:300px !important; 
}
@media only screen and (max-width: 600px) {
  .zTop iframe { 
    max-width:600px!important;
    max-height:258px !important;
  }
}

div.zTopMobile .zTop iframe { 
  height: 20vh !important;
}

div.zTopMobile { 
  margin-left: -20px !important; 
  background: #FFF !important;
  width: 100vw;
}

/* zones */
.z1 {
  width: 100%;
  text-align: center !important;
  margin: 0 0 20px;
}


.z1 img, .z1 img, .z1 img {
/*  border:1px solid #222; */
  /*max-height:90px!important;*/
  display: inline !important;
}

.bmp-events {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}

.va-side img, .va-side-tall img {
  width: 100%;
  height: 100%;
  margin:0 auto;
}

.va-side, .va-side-tall {
  margin: 0 auto;
  position: relative;
}

.va-side + *, .va-side-tall + * {
  margin-top: 25px;
}

.va-side {
  max-width: 300px;
  max-height: 250px;
}

.va-side-tall {
  max-width: 300px;
  max-height: 525px;
}

.post-type-archive-tribe_events .z1:first-child {
  margin-top: 0px !important;
}

.post-box-small-thumbnail img {
  width: 65px;
  height: 65px;
}

.takeover {
	text-align: center;
	width: 100%;
	padding-top: 20px;
}

.takeover > br {
  display: none;
}

.takeover div a {
    display: block;
    width: 100%;
    text-align: center;
}

.takeover-bkg {
  width: 100%;
  height:100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /*
  filter: blur(8px);
  -webkit-filter: blur(8px);
  */
}


/* Parallax Ad */
.parallax {
  /* The image used */
  background-image: url("https://ras.vistaradio.ca/images/e3e936643f4c6dd997e9e277c6c1ddf0.jpg");

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  width:100%;

}


.z4-parallax {
  max-width: 100vw;
  margin-left: calc((var(--viewport) - 100%) / 2 * -1);
  margin-right: calc((var(--viewport) - 100%) / 2 * -1);
}

.z4-scroller {
  position: relative;
  z-index: 2000;
  height: 100vh;
  width: 100%;
  width: var(--viewport);
}

.z4-parallax .z4-lead-in {
  font-style: italic;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 60px;
}






.main {
  /* Fill the available space */
  height: 100vh;

  /* Make the children of the element closer to the viewport */
  perspective: 2px;

  /* Hide the overflow */
  overflow-x: hidden;
}

/* General styling, not necessarily related to parallax effect  */
.section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  font-size: 40px;
  text-transform: uppercase;
  font-weight: bold;
}

/* Different background colors for demo purpose */
.static-one {
  background-color: #feceab;
}

.static-two {
  background-color: #aacfcf;
}

.static-three {
  background-color: #c06c84;
}

.parallax::after {
  /* Position the pseudo-element to fill the parent */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Scale the image to full */
  background-size: cover;

  /* Move the element back then scale the element, it helps to appears more slowly */
  transform: translateZ(-1px) scale(1.7);

  /* Set the parallax section before the other elements. */
  z-index: -1;
}

/* Different background images 
.parallax-one::after {
  background-image: url(https://source.unsplash.com/vs6a4EHj_Ro/1600x900);
}

.parallax-two::after {
  background-image: url(https://source.unsplash.com/P86-JPbDnPY/1600x900);
}
  */

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .zTop { margin: 0 auto -25px; }
  .awide ins iframe { width: 300px !important; height: 250px !important; }
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .zTop { margin: 45px auto 0; }
}

/* ----------- Google Pixel ----------- */

/* Portrait */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  .zTop { margin: 0 auto -25px; }
  .awide ins iframe { width: 300px !important; height: 250px !important; }
}

/* Landscape */
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  .zTop { margin: 45px auto 0; }
}