/* ====styleVibing.css==== */



/* Impact font class for PayPal Pages */
.impactFont{
	font-family: Impact;
	font-size: 250%;
	text-shadow: 1px 1px #FFFFFF, -1px -1px #6c02a6;

}

/* =============************* BACKGROUND & BANNER *************============= */
body{
        background-color: #000000; 
        background-image: url("VibingWebBanner_EditedFont_AlphaBG_v3_1600x434.png"); 
        background-size: 100%, 100%; 
        background-repeat: no-repeat; 
        /*background-attachment: fixed;     <--Use this code if I want my bg image to stay while all else scrolls */
        color:#FFFFFF;                  /* Header font color */
        text-align:center;
}
/* =============************* END: BACKGROUND & BANNER *************============= */


/*==============************* HEADER/TITLE FOR ALL DEVICES *************============= */
@media only screen and (max-width: 899px) and (orientation: portrait)                           /*Heading 1 for phones in potrait*/
    { h1{position:absolute; top: 11%; font-size: 15px; width: 98%;} }
@media only screen and (min-width: 600px) and (orientation: landscape)                          /*Heading 1 for phones in landscape*/
    { h1{position:absolute; top: 57%; font-size: 20px; width: 98%;} }
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)   /*Heading 1 for tablets in potrait*/
    { h1{position:absolute; top: 18%; font-size: 20px; width: 98%;} }
@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape)  /*Heading 1 for tablets in landscape*/
    { h1{position:absolute; top: 33%; font-size: 22px; width: 98%;} }
@media only screen and (min-width: 1280px)                                                      /*Heading 1 for laptops & desktops*/
    { h1{position:absolute; top: 40%; font-size: 25px; width: 98%;} }
/*==============*************END: HEADER/TITLE FOR ALL DEVICES *************============= */





/* =============************* NAVIGATION BAR *************============= */ /* ------------------------------------------------------------------------------------------------------- */

/* Position the navigation bar container*/
.navBar {position:absolute; margin-left: 25%; top: 42%; width: 48%;    z-index: 1;}           /*Base Settings*/


/*Phones navigation bar container positioning*/
@media only screen and (max-width: 899px) 
    {.navBar{position: absolute; margin-left:4%; top:17%; width: 96%;}}   /* Nav bar positioning for portait on phones */
@media only screen and (min-width: 600px) and (orientation: landscape)
    {.navBar{position:absolute; margin-left: 24%; top: 72%; width: 75%;}}    /* Nav bar positioning for landscape on phones */
   
/*Tablets navigation bar positioning*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) 
    {.navBar{position:absolute; margin-left:24%; top:23%; width: 70%;}}     /* Nav bar position for portrait on tablets */
@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape)
    {.navBar{display:inline-block; position:absolute; left:33%; transform: translate(-50%, -50%);top:45%; width: 54%;}}     /* Nav bar position for landscape on tablets */

/*Laptop navigation bar positioning*/
@media only screen and (min-width: 1280px) 
    {.navBar{display:block; position:absolute; left:36%; transform: translate(-50%, -50%); top: 55%; width: 50%;}}    /*For Laptops/Desktops*/


/* format the navigation bar appearance */
.navLinks
{
    overflow: auto;
    background-color: #545454;                                  /* Fallback color if rgba color with opacity doesn't work */
    background-color: rgba(145,85,207,.5);		                /* background color lavendar, opacity .5 (gray 85,85,85,.5) */
    border-radius: 13px;			                            /* Rounds the edges of the nav bar */
    box-shadow: 2px 2px 13px 8px rgba(255,255,255,0.5) inset;	/* Creates glow inside box: right glowpx, underglowpx, bluramountpx, radiuspx  */
    color: white;
    }


/* format the links (text) inside the navigation bar (.navLinks and .navLinks a) */
.navLinks, .navLinks a
{
    font-family: Arial, Helvetica, sans-serif;          /* Set the font family options for the nav bar*/
    float: left;					                    /* lists each link left to right */	
    text-align: center;                 
	padding: 10px 10px;                                 /* Top&BottomPaddingPx Right&LeftPaddingPx */
	text-decoration: none;
	font-size: 20px;
	color: #FFFFFF; 
	border-radius: 13px;			                    /* round the highlight when hovering */
	text-decoration: none;
	cursor: pointer;
}


/* format the background for all links in navigation bar when hovered over */
.navLinks a:hover
{
    background-color: #6c02a6;	/*bright purple background color */
    box-shadow: 2px 2px 13px 8px rgba(255,255,255,0.5) inset;	/* Creates glow inside box: right glowpx, underglowpx, bluramountpx, radiuspx  */
    border-radius: 13px;
    color: white;
    cursor: pointer;
}


/*Font adaptations for screen sizes. applies to links & drop down menu (all navBar text) */
/* ======= PHONES ======= */
@media only screen and (max-width: 899px) and (orientation: portrait)           /*Font sizes For portrait on phones*/
{   .navLinks, .navLinks a {font-size:18px;}   }
@media only screen and (min-width: 600px) and (orientation: landscape)          /*Font sizes For landscape on phones*/
{   .navLinks, .navLinks a {font-size:20px;}   }

/* ======= TABLETS NAV BAR FONT SIZE ======= */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)   /*For portrait on tablets */
{   .navLinks, .navLinks a {font-size:20px;}   }
@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape)  /*For landscape on tablets */
{   .navLinks, .navLinks a {font-size:20px;}   }

@media only screen and (min-width: 1280px)
{   .navLinks, .navLinks a{font-size:22px;}    }                                           /*For laptops*/


/* =============************* END:NAVIGATION BAR *************============= */ /* -------------------------------------------------------------------------------------------------- */





/* ====CUSTOM PAGE CONTENT==== */

/*Underline links and add hand cursor*/
.pageContent a:link, a:visited, a:active {
    text-decoration: underline;
    cursor: pointer;
}

.pageContent
{ 
  /* Shape the container */
  background-color: #545454;                             /* Fallback color if rgba color with opacity doesn't work */
  background-color: rgba(145,85,207,.5);		        /* background color lavendar, opacity .3 (gray 85,85,85,.5) */
  opacity: 0.9;
  border-radius: 13px;
  padding: 12px 16px;
  box-shadow: 2px 2px 13px 8px rgba(255,255,255,0.5) inset;	/* Creates glow inside box: right glowpx, underglowpx, bluramountpx, radiuspx  */
  
  position: absolute;       /*position the container for all devices*/
  color:    #FFFFFF;        /*Font Color=white*/
}

  /* ======= position the container per device ======= */
  /* ======= PHONES PAGE CONTENT CONTAINER POSITION, WIDTH & FONT SIZE======= */
@media only screen and (max-width: 899px) and (orientation: portrait)                           /* pageContent container for portrait on phones*/
{   .pageContent {margin-left:0; top:28%; width: 98%; font-size: 20px;}   }
@media only screen and (min-width: 600px) and (orientation: landscape)                          /* pageContent container for landscape on phones*/
{   .pageContent {margin-left:14%; top: 99%; width: 71%; font-size: 20px;}   }

/* ======= TABLETS PAGE CONTENT CONTAINER POSITION, WIDTH & FONT SIZE======= */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)    /* pageContent container for portrait on tablets */
{   .pageContent { margin-left: 10%; top: 31%; width: 80%; font-size: 17px; }   }
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)   /* pageContent container for landscape on tablets */
{   .pageContent { margin-left: 14%; top: 52%; width: 70%; font-size: 20px; }     }

/* ======= LAPTOPS PAGE CONTENT CONTAINER POSITION, WIDTH & FONT SIZE======= */
@media only screen and (min-width: 1280px)
{   .pageContent{margin-left:19%; top:65%; width:60%; font-size:20px;}          }               /*pageContent container for laptop */


/*Alignment of SECTIONS on each page laptops, tablets, & phones in landscape */
.pageContent section{
    width: 75%;
    margin-left:12%;
}
/*Alignment of SECTIONS on each page for phones & tablets */
@media only screen and (max-width: 899px) and (orientation: portrait) 
{ .pageContent section{ width:95%; margin-left:3%;}     }

.pageContent section details summary{
    font-size:      22px;
    font-weight:    bold;
    border:3px solid #FFFFFF; 
    border-radius:10px;
    cursor:pointer;
    padding: 7px;
    
    }

.pageContent section details[open] summary{
    background-color: #7FFFD4;
    color:  #000000;
    border-radius: 13px;
}

/*Change the table headers appearance in page content*/
.pageContent th{
    border:1px solid #FFFFFF;
    border-radius:10px;
    padding-right: 6px;
    padding-left: 6px;
    background-color:#000000;
}
/*Change the table data (columns) appearance in page content*/
.pageContent td{
    border-radius: 13px;
    padding-right:6px; padding-left:6px;
}

/* == HOME PAGE == */
.profilePicture
{
    border: 7px solid #FFFFFF;
    border-radius:20%;
}


/* =======SlideShow ======= */ /*--------------------------------------------------------------------------------------------------------------------------------------------------*/

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}


/* Slideshow container */
.slideshow-container {
  width: 58%;
  position: absolute;
  top: 55%;
  margin-left: 20%;
}


@media only screen and (max-width: 899px) and (orientation: portrait) 
    {.slideshow-container {position: absolute; margin-left:6%; top:27%; width: 60%;}}       /* slideshow-container container for portrait on phones*/
@media only screen and (min-width: 600px) and (orientation: landscape)    
    {.slideshow-container {position:absolute; margin-left:20%; top: 100%; width: 58%;}}      /* slideshow-container container for landscape on phones*/
   /*Tablets navigation bar positioning*/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait)   
    {.slideshow-container {position:absolute; margin-left:8%; top:31%; width: 58%;}}       /* slideshow-container container for portrait on tablets */
@media only screen and (min-width: 900px) and (max-width: 1024px) and (orientation: landscape)
    {.slideshow-container {position:absolute; margin-left:19%; top:51%; width: 58%;}}       /* slideshow-container container for landscape on tablets */
    
@media only screen and (min-width: 1280px)
    {.slideshow-container {position:absolute; margin-left:20%; top: 61%; width: 58%;}}                    /*slideshow-container for Laptops/Desktops*/


/* "What students are saying" */
.titleText {
  color: white;
  font-size: 17px;
  padding: 8px 10px;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  background-color: #545454;                                  /* Fallback color if rgba color with opacity doesn't work */
  background-color: rgba(145,85,207,.5);		                /* background color lavendar, opacity .5 (gray 85,85,85,.5) */
  box-shadow: 2px 2px 13px 8px rgba(255,255,255,0.5) inset;	/* Creates glow inside box: right glowpx, underglowpx, bluramountpx, radiuspx  */
  opacity: 0.9;
  border-radius: 10px;
}

@media screen and (max-width: 899px) and (orientation: portrait)                /* titleText container for portrait on phones*/
{   .titleText {font-size: 14px; width:140%; }   }
@media screen and (min-width: 600px) and (orientation: landscape)               /* titleText container for landscape on phones*/
{   .titleText {width:102%; }   }
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)   /* titleText container for portrait on tablets */
{   .titleText { }   }
@media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape)  /* titleText container for landscape on tablets */
{   .titleText { }   }


/* Caption text */
.text {
  color: white;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  top: 60px;
  width: 100%;
  text-align: center;
    background-color: #545454;                                  /* Fallback color if rgba color with opacity doesn't work */
    background-color: rgba(145,85,207,.5);		                /* background color lavendar, opacity .5 (gray 85,85,85,.5) */
    box-shadow: 2px 2px 13px 8px rgba(255,255,255,0.5) inset;	/* Creates glow inside box: right glowpx, underglowpx, bluramountpx, radiuspx  */
    opacity: 0.9;
  border-radius: 10px;
}

@media screen and (max-width: 899px) and (orientation: portrait)                /* text container for portrait on phones*/
{   .text {top:60px; width:140%; }   }
@media screen and (min-width: 600px) and (orientation: landscape)               /* text container for landscape on phones*/
{   .text {top: 70px; width: 102%; }   }
@media (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)   /* text container for portrait on tablets */
{   .text { }   }
@media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape)  /* text container for landscape on tablets */
{   .text { }   }




.active {
  background-color: #9155cf;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -moz-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* =======END: Slideshow ======= */  /* -------------------------------------------------------------------------------------------------------------------------------------------- */




/* ====YOUTUBE & AUDIO PLAYER ==== */

@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait)   /* text container for portrait on tablets */
{       .desktopYouTube{display: none;} .mobileYouTube{display: block;}  }
@media (min-width: 481px) and (max-width: 1024px) and (orientation: landscape)  /* text container for landscape on tablets */
{       .desktopYouTube{display: none;} .mobileYouTube{display: block;}  }
@media screen and (max-width: 736px) and (orientation: portrait)                /* text container for portrait on phones*/
{       .desktopYouTube{display: none;}  .mobileYouTube{display: block;}   }
@media screen and (max-width: 736px) and (orientation: landscape)               /* text container for landscape on phones*/
{       .desktopYouTube{display: none;}  .mobileYouTube{display: block;}   }

/* ======= YouTube for Laptops ======= */
@media only screen and (min-width: 1280px)
{       .mobileYouTube{display:none;}    .desktopYouTube{display:block;}    }


/* ==== AUDIO PLAYER ==== */
/* To shape each box for the audio file and to label the track */
audio{background-color: #00e0e0;}
figure{margin-left:auto; width:100%; padding:5px;border-radius:50px;box-shadow: 2px 2px 20px 5px rgba(255,255,255,0.5); }





  .getLyrics, .studentReviews, .studentQuote
{
/* Shape the container */
  border-radius: 13px;
  padding: 12px 16px;
  box-shadow: 0px 0px 16px 4px rgba(255,255,255,0.2) inset;	/*Creates glow around box */
  
  /* format the text inside */
  color:white; 
  font-size: 20px; 
}

.getLyrics
{
  /* position */
  position: absolute;
  top: 430px;
  margin-left: 20px;
  width: auto;
}

/*Box for all of the student reviews to go in */
.studentReviews
{
   /*position*/
   position: absolute;
   top: 230px;
   margin-left: 340px;
   width: 730px;


   font-size: 125%;   
}

/*Individual quotes*/
.studentQuote
{
  /*position & custom settings*/
  background-color: rgba(145,85,207,.5); /*purple background*/
  width: 96%;
}


/*Formatting for links that are not in the navigation bar*/
/*normal link*/
.getLyrics a, a, .skipsPic a
{color:white; padding: 1px -2px; border-radius: 3px;}

.getLyrics a:hover, .getLyrics a:visited, a:hover
{background-color:#6c02a6; border-radius: 3px;}