/*
 Theme Name:     Twenty Twentyone CC Parker Theme
 Theme URI:      https://wordpress.org/themes/twentytwentyone/
 Description:    A Theme designed by StMarq for Calvary Chapel Parker based on the Twenty Twenty-One WordPress Theme.
 Author:         WordPress
 Author URI:     https://wordpress.org/
 Template:       twentytwentyone
 Version:        1.1
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

body {
   color:#fff !important;
}

body a {
  cursor: pointer !important;

}

a:link {
	color: white;
}

/*a:hover {
	color: orange;
	text-decoration: none;
}*/

a:active {
	color: orange;
	text-decoration: none;
}

a:visited {
  color: white;
}

/* From Custom CSS Theme */
#masthead, .site-header {
    padding: 0px;
	margin: 0px;
	display: none;
}

#main, .site-main {
	padding-bottom: 0px; padding-top: 0px;
  margin-top:0;
}

.site-main > article > * {
  margin-top: 0;
}

.singular .entry-header {
	border-bottom: none;
}

#ccpLogoWrapper {
  position: relative;
}

#ccpLogo {
  position: absolute;
  left: 50px;
  Top: 50px;
  z-index: 13;
}

@media screen and (max-width: 650px) {
  #ccpLogo {
    display:none;
  }
}

/*********************
*    Menu Overlay    *
*********************/

.openLink {
    position:absolute;
    right:40px;
    font-size:36px;
    cursor:pointer;
    z-index:10;
  }

  .topMenuLinksContainer {
    position:absolute;
    right:80px;
    font-size:36px;
    cursor:pointer;
    z-index:10;
  }
  .topMenuLinks ul {
    list-style-type: none;
  }
  .topMenuLinks ul {
    display: flex;
    justify-content: flex-start;
  }
  .topMenuLinks li {
    padding-top: 21px;
    font-size: 16px;
	font-weight: bold;
  }
  .topMenuLinks ul a:link, a:visited {
    color: rgb(255,255,255);
    text-decoration:none;
    padding: 4px;
    margin:0 5px 0 0;
  }
  .topMenuLinks ul a:active {
    color: orange;
    text-decoration: none;
  }
  .topMenuLinks ul li a:hover {
    /* background-color: rgb(66, 75, 90, 0.5);
    border-radius: 10px; */
    color: rgb(221, 221, 221);
    margin:0 5px 0 0;
  }

  @media (max-width: 1026px) {
    .openLink {
      display: none;
      background-color: rgb(0, 0, 0, 1)
    }
    .topMenuLinks {
      display:none;
    }
    .topMenuLinksContainer {
      display:none;
    }
  }
  
  .overlay ul{
    list-style-type: none;
    padding-left: 10px;
  }
 
  .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    overflow: hidden;
    z-index: 11;
    top: 0;
    right: 0;
    background-color: rgb(62, 76, 95);
    background-color: rgba(62, 76, 95, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
  }
  .overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }
  .menuColumn {
    position: relative;
    display: grid;
  }
  .overlay a {
    text-decoration: none;
    font-size: 36px;
    /* color: #494949; */
    display: block;
    transition: 0.3s;
  }
  /* .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  } */

  .overlay .closebtn {
    position:absolute;
    top: 0px;
    right: 45px;
 /*    font-size: 36px; */
    font-size:36px;
  }

  .overlay .closebtn:hover {
    color: rgb(221, 221, 221);
  }

/*********************************************
*    Overlay Columns for images and links    *
*********************************************/

/* Grid */
/* overallContainer */

.menuOverlay {
  width: 100%;
  padding-top:80px;
}
.menuOverlay h1 {
  text-align: center;
  color: white;
  font-size: 2em;
  margin: 20px 0 20px;
}

.menuOverlayGrid-Container {
  display: grid;
  grid-template-columns: repeat(4, 250px);
  justify-content: center;
}

.menuOverlay-box-1 {  /* This is the image box */
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  justify-self: end;
  list-style: none;
}
    .liveAreaContainer {
      display: grid;
      grid-template-columns: repeat(2, 250px);
      gap:0;
    }
      .liveArea-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 1;
        /* border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        margin: 0; */
      }
      .liveArea-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
        /* border-left: 1px solid #fff;
        border-bottom: 1px solid #fff;
        margin: 0; */
      }
      .liveArea-3 {
        grid-column: 1 / 2;
        grid-row: 2 / 2;
        /* border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        margin: 0; */
      }
      .liveArea-4 {
        grid-column: 2 / 2;
        grid-row: 2 / 2;
        /* border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        margin: 0; */
      }

.menuOverlay-box-1 img {
  width: 200px !important;
  height: 333px !important;
}
/* .menuOverlay-box-2 {
  
} */
.menuOverlay-box-3 {
  font-size:1em;
  background-color: rgba(220, 220, 220, 0.6);
  padding: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  grid-column: 3 / 4;
  grid-row: 1 / 1;
}
.menuOverlay-box-4 {
  font-size:1em;
  background-color: rgba(220, 220, 220, 0.6);
  padding: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  grid-column: 4 / 5;
  grid-row: 1 / 1;
}

.box2Menu ul li a {
  font-size:1.2em;
}

.box2Menu ul li p {
  font-size: 0.5em;
  line-height: 1.2;
  font-weight: normal;
}

.box2Menu ul li a:hover {
    color: rgb(221, 221, 221);
  }

.box3Menu ul li a {
  font-size:1.2em;
}
.box3Menu ul li p {
  font-size: 0.5em;
  line-height: 1.2;
  font-weight: normal;
}

.box3Menu ul li a:hover {
    color: rgb(221, 221, 221);
  }

.box4Menu ul li a {
  font-size: 1em;
  color: white;
}
.columnsOverlay {
  columns: 1;
  font-size: 0.7em;
  line-height: 1.4em;
}
.columnsOverlay li {
  list-style-type: none;
}
.columnsOverlay .widget a {
  color: white;
}
.columnsOverlay .widget a:hover {
  text-shadow: #818181;
}

  /* horizontal Links */

  .top-links-container-horizontal {
    position: absolute;
    top: 15px;
    right: 100px;
    padding: 0;
    z-index: 2;
  }
  .entry-header {
    display:none;
  }

  #top-links-horizontal .menu {
    list-style-type: none;
    float: right;
  }

  #top-links-horizontal .menu li {
    display: inline-block;
    padding: 0;
    margin: 0 0 10px 10px;
    text-align: center;
    color: rgb(73, 73, 77);
  }
  #top-links-horizontal .menu a {
    text-decoration: none;
    margin:0;
    padding: 10px;
    color: white;
  }
  #top-links-horizontal .menu a:hover {
    /* color:rgb(20, 32, 53); */
    background-color: rgb(66, 75, 90, 0.5);
    margin:0;
    padding:10px;
    border-radius: 5px 5px 5px 5px;
  }
  @media screen and (max-width: 950px) {
    .top-links-container-horizontal {
      display: none;
      /* margin: auto;
      position: absolute;
      top: 15px;
      text-align: center;
      padding: 0;
      font-size: 15px; <-- comment out
      z-index: 1;
      width:440px; */
    }
    #top-links-horizontal .menu a {
      display:none;
      /* text-decoration: none;
      font-size: 15px; <-- comment out */
    }
  }
  
  @media screen and (min-width: 1026px) {
    .topMenuMobile {
      display:none;
      z-index:999;
    }
  }
	
  @media screen and (max-width: 1026px) {
    .topMenuMobile {
      z-index:1;
    }
  }

/* frontInformationWidget-container */

.frontInformationWidget-container {
  position:relative;
  width: 100%;
}
.knowingHimOverlay {
  padding: 0 600px 0 0;
}

.frontInformationWidget {
  position:absolute;
  margin: auto;
  list-style-type: none;
  width: 100%;
  top: 28rem;
  z-index:1;
}

.frontInformationWidget h2 {
  font-size: 2em;
}

.frontInformationWidgetBtn a {
  text-decoration: none;
}

@media screen and (max-width: 1300px ) {
  .frontInformationWidget {
    top: 22rem;
  }
}

@media screen and (max-width: 1100px ) {
  .frontInformationWidget {
    top: 18rem;
  }
}

@media screen and (max-width: 950px ) {
  .frontInformationWidget {
    top: 15rem;
  }
  .frontInformationWidget h2 {
    font-size: 1.5em;
  }
  .frontInformationWidget p {
    font-size: 1em;
    margin: 0;
    padding: 0;
  }
}

@media screen and (max-width: 800px ) {
  .frontInformationWidget {
    top: 10rem;
  }
  .frontInformationWidget h2 {
    display: none;
    font-size: 1em;
  }
  .frontInformationWidget p {
    margin: auto;
    width: 80%;
    font-size: 1em;
  }
  .frontInformationWidgetBtn a {
    text-decoration: none;
  }
}
@media screen and (max-width: 600px) {
  .frontInformationWidget {
    display:none;
  }
}

/********* squareBox GRID LAYOUT *********/

.squareBoxesContainer .kt-inside-inner-col {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-auto-rows: minmax(100px, auto); */
  color: white;
  text-align: center;
  column-gap: 5px;
  row-gap: 6px;
}
@media screen and (max-width: 1380px) {
.squareBoxesContainer .kt-inside-inner-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100vw;
  }
}
@media screen and (max-width: 1024px) {
.squareBoxesContainer .kt-inside-inner-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100vw;
  }
}
@media screen and (max-width: 812px) {
.squareBoxesContainer .kt-inside-inner-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100vw;
  }
}
@media screen and (max-width: 750px) {
.squareBoxesContainer .kt-inside-inner-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  }
}
@media screen and (max-width: 550px) {
.squareBoxesContainer .kt-inside-inner-col {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  }
}

.squareBoxItem :hover {
  box-shadow: -1px -1px 10px orange;
}

/* .kt-inside-inner-col img {
padding:0;
width:100%;
height:100%;
} */

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(100px);
  transition: all 1s;
}
.show {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0); 
}

/*************************/

.AudioPlayerFrame {
  width:1000px;
  height: 500px;
}

/*****************
*    Footer      *            
*****************/

.ccpFooter {
  background-color: #00000080;
  background-color: rgb(0, 0, 0, 0.8)
}
.ccpFooter .widget-area {
  margin-top: 0;
}
.ccpFooter a:link {
  color:white;
}

/*****************
*    iFrame      *            
*****************/

/* .iframeContainer {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 35%; /* 56.25%; 16:9 Aspect Ratio
}
.responsiveIframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
} */

.iframeContainer {
  width: 100%;
  height: 500px;
}
.responsiveIframe {
  width: 100%;
  height: 500px;
  border: none;
}

.iframeContainerAudioPage {
  min-height: 60vw;
  width: 100%;
  aspect-ratio: 35%;
}
.responsiveIframeAudioPage {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media screen and (max-width: 1200px) {

  .iframeContainer {
    height: 460px;
  }
  .responsiveIframe {
    height: 460px;
  }
  
}
/* @media screen and (max-width: 580px) {

  .iframeContainer {
    display: none;
    background-image: url('https://stmarq.com/clients/admin_fnfiawy/uploads/audioGraphicCCParker800x450.jpg');
    width: 100%;
    height: 100vh;
  }
  .responsiveIframe {
    display: none;
  }
  
} */

/* .iframeContainer iframe {
  display: none;
  width: fit-content;
  height: fit-content;
} */

/* .donateBTN01 {
  border:1px solid #fff;
  text-transform: uppercase;
}
.donateBTN01 hover {
  background-color: #7C8596;
} */

/*404 Logo Style*/

.error-logo {
	margin-left: 32px;
	margin-bottom: 0px;
	padding-top: 10px;
}

.error-link a:hover {
	color: orange;
	text-decoration: none;
}