@charset "utf-8";

/*
   Global Style Sheet for www.PsychicChamber.com 
   Filename: globalstyles.css */
/* ======================================
   Base Global Styles Until Media Queries
   ====================================== */

iframe  {
  font-family: Papyrus, fantasy;
  background-image: url(images/golden_button.jpg); 
/*border-radius: 0px;*/
margin-top: -83px;
margin-left: 66px;
position: absolute;
z-index: 1; 
/*box-shadow: 14px 14px 14px #ffffff;*/
}

.per_minute_header  {
    text-align: center;
    font-size: 1.6em; /* Sizing here over-rides h5 in html */
    font-family: Papyrus;
    font-style: bold;
    margin-top: -40px;
    margin-bottom: 40px;
}

/*Places the flames horizontally on Right & Left */
#flames_overlay { 
    position: relative;
    width: 100%; 
    height: 100px; 
    display: flex; 
    justify-content: space-between;
} 

/* Sets size & position of flames */
.flames_wrap {
    height: 600px; 
    width: 330px; 
    margin-top: -130px;
    margin-left: -55px;
    margin-right: -55px;
} 

.flames_img {
    height: 100%; 
    width: 100%; 
    margin-top: -100px;
} 

/*Places the columns horizontally on Right & Left */
#columns_overlay { 
    position: relative;
    width: 100%; 
    height: 100px; 
    display: flex; 
    justify-content: space-between;  
} 

/* Sets size & sidebar position of columns on R and L (outside of body wrapper)*/
.columns_wrap {
    height: 2000px; 
    width: 160px; 
    margin-top: 50px;
    margin-left: -230px;
    margin-right: -230px;
}

.columns_img {
    height: 100%; 
    width: 100%; 
    margin-top: 10px;
}

.phone_number_wrapper {
  width: 100%; 
  height: 20px; 
  display: flex; 
  justify-content: space-around;
} 

/* =================
   Navigation Styles
   =================
*/

/* Navigation styling as Egyptian cartouches */
.nav_link_group li {
    margin-top: -150px; /*Brings nav cartouches up to just below price */
    border: 6px double #66186d; /* Purple border on nav cartouches */
    font-family: Papyrus, fantasy;
    font-weight: bold;
    font-size: 1.6em;
    padding: 0px 12px 12px 8px; /*0px for padding at top of nav courtouches */
    position: relative;
    border-radius: 30px; 
    background: #ecaa20;
    text-align: center;
    height: 26px;
}

a  {
    text-decoration: none; 
}

/* Vertical bar styling on Egyptian cartouches */
.nav_link_group li::after  {
    content: '';
    position: absolute;
    width: 0;
    top: -4px;
    right: -7px;
    height: calc(100% + 8px);
    display: inline-block;
    border-right: 4px solid #ecaa20; /* Changed the double lines as the end bar to solid */
    border-radius: 4px;
  }

/* Prevent double borders on vertical bars (Egyptian cartouches) */
.nav_link-group li::not(::last-child) {
    border-right: none; 
}

/* Adds a background color on nav li hover */
nav li:hover {
    background-color: #af6ce6;
}

#navicon {
    display: flex; 
    align-items: center; /* Vertical */
    justify-content: center; /* Horizontal */ 
  }  

#navicon > img {
    width: 50px;
    height: 50px;
}

/* HTML and Body styles */

html {
   background-image: url(../images/plaindarkbackground.jpg);
   background-repeat: round;
   color: #ecaa20; /* Yellow-Gold */
}

/* Header styles */

.logo_container img {  /* Business logo container */
    position: relative;
} 


/* ================
      Flex Styles
   ================
*/
     
.logo_container {
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
   margin-top: -90px;
}

.banner_container img  {
   width: 100%;
}

.banner_container  {
   display: flex;
   width: 100%; 
   margin-top: -100px; /* Moves the banner up to directly under the main nav */
   justify-content: center;
   align-items: center;
   position: relative;
   z-index: 0;
}

/* Places lotuses horizontally instead of vertically */
#lotus_overlay { 
    position: relative;
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: space-between;
} 

.lotus_img {
    height: 150%; /* Sets the size of the lotuses! */
    width: 150%; 
    margin-top: -2px;
    margin-left: -20px;
} 

/* To center the h1 header over the goldbar */
#h1_header, h2 {
    font-family: Papyrus, fantasy;
    text-align: center; 
    margin-bottom: 1px;
    margin-top: -100px; /* Keeps h1 header directly below banner */
} 

#goldbar_img { 
    display: block; 
    margin: 0 auto; 
    width: 60%;
    margin-top: 0px;
} 

#how_it_works {
    font-family: Papyrus, fantasy;  
    text-align: justify;
    font-size: 1.5em; 
    font-weight: bold;
    text-indent: 10%;
}
 
p::first-letter  { /* To add the pseudo-element of large first-letter caps to each <p> */ 
    font-family: Papyrus, fantasy;
    font-size: 200%;
}

/* To flex-wrap all the Reader Pics! */
#img_wrapper { 
    display: flex;
    flex: 3 1 361px;
    flex-flow: row wrap;
    padding-left: 0;
    justify-content: space-around;
}


footer  {
   color: #ecaa20; /* Yellow-gold */
   /*background-color: #ecaa20;*/
   font-family: Helvetica, serif;
   font-size: .9em; 
   text-align: center;
   margin-top: 30px;
   margin-bottom: 15px;
   position: relative;
   width: 100%; 
}


/* ===========================
   Mobile Styles: 0px to 320px 
   ===========================
*/

@media only screen and (max-width: 320px)  {
/* Nav li items NOT shown for screen sizes 0px to 819px */

.flames_img  {
    display: none;
}

.columns_img {
    display: none;
}

.lotus_img  {
    display: none;
}

/*.lotus_img {
    background-image: url(../images/obRlotus.png);
        height: 60px;
        width: 50px;
        padding-left:20px;
        padding-right:20px;}*/
        
        /*#lotus_overlay { 
            position: relative;
            width: 30%; 
            height: 30%; 
            display: flex; 
            justify-content: space-between;
        }*/

 /*Mobile Styles: 0px to 320px */   
    .nav_link_group  {
      display: none;
    }

    #nav_img  {
        margin-top: -240px;
    }

    #navicon:hover+nav ul  {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

/*Mobile Styles: 0px to 320px */
    .logo_container {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-top: -95px;
        position: relative;
        z-index: 1; /* Layers logo on top of flames */
     }

/*Mobile Styles: 0px to 320px */
     #h1_header  {
         margin-top: 20px;
     }
     #h1_para  {
         padding: 10px  20px;
     }

     h1  {
        text-align: center;
     }

     .tarot_heading  {
         padding: 0px  20px;
         font-size: 2em;
         text-align: center;
     }

     /*#questions  {
         padding-left: 0px;
         padding-right: 0px;
     }*/

    /*.logo_container img { 
        height: 100px;
        width: 50%;
        position: relative;
         z-index: 1; 
    }*/
    
}

/* =============================
   Tablet Styles: 321px to 819px 
   =============================
*/
/* Tablet Media Queries for adjusting items to tablet screen 
sizes added 4/20/18 & perfected 5/7/18 */
@media only screen and (max-width: 976px)  {
 
   #wrapper  {
      width: 80%;
      margin: auto;
   }

   .columns_img {
    display: none;
}
   .logo_container img  {
      width: 334px;
      margin: auto;
   }  

   .nav_link_group  {
    display: none;
  }

   /*To center the navicon in its row added 7/29/18 */
   #navicon  {
    display: flex; 
    align-items: center; /* Vertical */
    justify-content: center; /* Horizontal */ 
    padding-left: 0px;
    } 

   #navicon:hover+ul, .nav_link_group li:hover  {
    display: block;
   }
}  

/* =================================
   Desktop Styles: 820px and greater 
   =================================
*/
/* Desktop Media Queries for adjusting items to desktop screen 
sizes added 4/20/18 & perfected 5/7/18 */
@media only screen and (min-width: 820px) {
    
    /* Nav to flow horizontally on larger screens */ 
    .nav_link_group  {
        display: flex;
        flex-direction: row;
        padding-left: 0px;
        align-content: center; /* Aligns items in clustered bunch in center of row . . . */
        justify-content: space-between; /* . . . but space-between spaces them from end to end! */
        list-style-type: none;
    }

    #navicon > img {
        display: none;
    }

    /* Sets the lotuses in proper positions */
    .lotus_wrap {
        height: 150px; 
        width: 150px; 
        margin-top: -30px;
        margin-left: -40px;
    }  
}