/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* NOTES: for switching theme colors */
/* started with copy of working dark theme index.php and css */

/* index.php  - pointed to new copy of CSS */
/* index.php  - changed default text color to be dark not whiite */
/* index.php  - changed changed subcategory background to whiite */
/* index.php  - changed start navbar theme to nav-light and made bold and changed font */

/* css - change backgroundwrapper01 to whie fade */
/* css - changed navbar color to white  */
/* css - changed a link and a hover link to dark color to stand out on white  */
/* css - changed a colorBrand02 dark color to stand out on white  */
/* css - changed scale of myBrandStyle_02 larger to be seen  */
/* css - change colorsNavActive01 to dark so highlighted active links are dark *?



/* -  -  -  -  -  -  -  -  B o d y   -  -  -  -  -  -   -  -  -  -  -  -  -  */

body {
	/*padding-top: 20px;*/
  	padding-bottom: 20px;
    font-size: 1.1em;
    background: transparent;   /* -- ACTIVE -- *//* allows background wrapper image to be seen */
    overflow-y: scroll;
    margin-top: 0px;              /* for FULL - Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    background-color: #c6f;    /* -- ACTIVE -- *//* this gets covered over by the background wrapper */
}


/* -  -  -  -  -  -  -  -  B a c k g r o u n d    W r a p p e r   -  -  -  -  -  -   -  -  -  -  -  -  -  */



/* BACKGROUND WRAPPERS */
/* ######################################################################### */
/* must use body {background: transparent;}  */                /* no-repeat  */   

/* this code places a full screen background image with transparency blending */ 
.backgroundWrapper01{
background: linear-gradient(
      rgba(256, 256, 256, 1), 
      rgba(256, 256, 256, 1)
    ),url("../../images/bg/bg01.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

/* this code places a full screen background image with transparency blending */ 
.backgroundWrapper01b{
background: linear-gradient(
      rgba(256, 256, 256, .5), 
      rgba(256, 256, 256, 1)
    ),url("../../images/bg/bg01.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

/* this code places a full screen background image without transparency blending */
.backgroundWrapper02{
background: url("../../images/bg/bg07b.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

/* -  -  -  -   -  -  -  -  n o n - c o l o r   m o d i f i e r s   -  -  -  -  -  -  -  */  



/* GENERAL BUTTON MODIFIERS */
/* ######################################################################### */
/* GETS RID OF BLUE HIGHLIGHT ON BUTTONS< like the hamburger --------------- */
button:focus {
    outline: none;
}



/* GOOGLE FONTS */
/* ######################################################################### */
/* MY GENERAL FONTS -------------- */
/* cursove logo font */
.myfont01 {
  font-family: "Fjalla One", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont02 {
  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 200; /*  200-700    */
  font-style: normal;
}

/* cursove logo font */
.myfont03 {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 350;  /*  100-900    */
  font-style: normal;
}

/* cursove logo font */
.myfont03b {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 400;  /*  100-900    */
  font-style: normal;
}

/* cursove logo font */
.myfont04 {
  font-family: "Fira Sans", serif;
  font-weight: 500;  /*  100-900    */
  font-style: normal;
}

/* cursove logo font */
.myfont05 {
  font-family: "Amaranth", serif;
  font-weight: 400;  /*  400-700    */
  font-style: normal;
}

/* cursove logo font */
.myfont06 {
  font-family: "Rambla", serif;
  font-weight: 400;  /*  400-700    */
  font-style: normal;
}

/* cursove logo font */
.myfont07 {
  font-family: "Akatab", serif;
  font-weight: 400;  /*     */
  font-style: normal;
}

/* cursove logo font */
.myfont08 {
  font-family: "Share", serif;
  font-weight: 400;  /*  400 or 700    */
  font-style: normal;
}

/* cursove logo font */
.myfont09 {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;   /*  400 or 700    */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

/* cursove logo font */
.myfont10 {
  font-family: "Nosifer", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;   /*  400 or 700    */
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
  
/* cursove logo font */
.myfont11 {
  font-family: "Mouse Memoirs", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont12 {
  font-family: "Anton SC", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont13 {
  font-family: "Boogaloo", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont14 {
  font-family: "Freeman", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont15 {
  font-family: "Sedgwick Ave Display", cursive;
  font-weight: 400;
  font-style: normal;
}

/* cursove logo font */
.myfont16 {
  font-family: "Pattaya", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* GENERAL FONT MODIFIERS */
/* ######################################################################### */
/* MY GENERAL FONT STYLE MODIFIERS -------------- */
.mysmall-80 { 
    font-size: 80%;
}

.mysmall-90 { 
    font-size: 90%;
}

.mysmall-100 { 
    font-size: 100%;
}

.mysmall-125 { 
    font-size: 120%;
}

.mysmall-150 { 
    font-size: 150%;
}

.mysmall-200 { 
    font-size: 250%;
}

.mybold { 
    font-weight: bold;
}

/* --- for title -------------- */
.mystyleLogo_01 {
 font-size:28px; 
 font-family: 'Oswald', sans-serif; 
}

/* --- for title -------------- */
.mystyleLogo_02 {
 font-size:28px; 
 font-family: 'Oswald', sans-serif; 
}



/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* START OF PRIMARY PAGE COLORS -------------------------------------------- */


/* -  -  -  -  -  -  -  -  C o l o r s  T e x t -  -  -  -  -  -   -  -  -  -  -  -  -  */ 


/* ######################################################################### */
/* MY LOGO COLORS ------------------- */
.mycolorLogo_01 {
    color: rgb(0, 0, 0)
}

.mycolorLogo_02 {
    color: rgb(204, 96, 5)
}



/* MY GENERAL FONT COLORS ------------------- */
/* ######################################################################### */
/* over rides all general HEADERS             */

/* main text color  */
.mycolorText01 {
  color:rgb(40, 40, 40)

}

/* secondary highlight text color  */
.mycolorText02 {
  color:rgb(135, 135, 135)
  
}

/* bars between main links  */
.mycolorText03 {
  color:rgb(170, 170, 170)
  
}

/* bars between main links  */
.mycolorText04 {
  color:rgb(255, 255, 255)
  
}

/* bars between main links  */
.mycolorNavActive01 {
  color:#000000; /* same as link highlinght color   green: rgb(140, 159, 0)    blue #1e5d81  drkbrown #503030  ltbrown #8b5454 */
}

/* bars between main links  */
.mycolorNavActive02 {
  color:#64b0db; /* same as link highlinght color */
}


/* bars between main links  */
.mycolorNavActive03 {
  color:rgb(204, 96, 5); /* same as link highlinght color */
}

/* bars between main links  */
.mycolorNavActive04 {
  color:#8b5454; /* same as link highlinght color   green: rgb(140, 159, 0)    blue #1e5d81  drkbrown #503030  ltbrown #8b5454 */
}


/* -  -  -  -  -  -  -  -  C o l o r s  M a i n   L i n k S  -  -  -  -  -  -   -  -  -  -  -  -  -  */ 


/* MY POST-ACTIVATION LINK COLORS ------------------------------------------ */
/* ######################################################################### */

/* ACTIVE  main link color  */
a {
color:rgb(202, 89, 21);      /* -- ACTIVE -- *//* -- UNCLICKED LINKS -- */
}

/* ACTIVE  main link hover color  */
a:hover {
color:rgb(115, 51, 12);    /* -- ACTIVE -- *//* -- ROLL OVER UNCLICKED LINKS -- #784848 */ 
}

/* visited - VISITED LINK STATE, /// regular text but NOT arrows (though maybe under right circumstance??) 
a:visited {
  color:rgb(202, 89, 21);   /* -- ACTIVE -- VISITED LINKS --    
}
 */

/* active - CLICK-STATE (overwriten by focus though, unless focus is not defined)  /// nav arrows AND regular text links */
a:active {
  color:rgb(202, 89, 21);    /* -- ACTIVE -- VISITED LINKS -- */
}


/* focus - CLICK-STATE and POST-CLICK FOCUS,  /// nav arrows AND regular text links   */ 
a:focus {
  color: rgb(202, 89, 21);
  text-decoration: underline;
  outline: none;
}


/* focus - GETS RID OF BLUE HIGHLIGHT ON LINKS , /// regular text but NOT arrows // MOVED IT UP TO CSS ABOVE, IF THAT WILL WORK IS BETTER */
a:focus {
  outline: none;
}








/* visited - VISITED LINK STATE, /// regular text but NOT arrows (though maybe under right circumstance??) 
a:visited {
  color:#f4f;   /* -- ACTIVE -- VISITED LINKS --   
}
*/ 

/* active - CLICK-STATE (overwriten by focus though, unless focus is not defined)  /// nav arrows AND regular text links 
a:active {
  color:#66b366;    /* -- ACTIVE -- VISITED LINKS --
}
*/

/* focus - CLICK-STATE and POST-CLICK FOCUS,  /// nav arrows AND regular text links   
a:focus {
  color: #693;
  text-decoration: underline;
  outline: none;
}
*/ 

/* focus - GETS RID OF BLUE HIGHLIGHT ON LINKS , /// regular text but NOT arrows // MOVED IT UP TO CSS ABOVE, IF THAT WILL WORK IS BETTER
a:focus {
  outline: none;
}
*/






/* -  -  -  -  -  -  -  -  C o l o r s    n a v  -  -  -  -  -  -   -  -  -  -  -  -  -  */


/* TOP NAV-BAR MODIFIERS */
/* ######################################################################### */
/* change color of navbar background */
.navbar {
  margin-bottom: 20px;
  background-color: rgba(256, 256, 256, 1);"  /* -- ACTIVE -- Comment this out to make nav bar background transparent */
  background-image: none;    /*  or use an image  url('../../images/sets/temp/large_1035x551_t.jpg');   */
  background-repeat: no-repeat; /* or use repeat */
}

/* change color of dropdown menu background 
.navbar-nav > li > .dropdown-menu { 
  background-color: #666666; 
}
*/

/* change color of dropdown menu divider 
.mydropdownDivider {
    background-color: #ccc;
}
*/

/* change color of dropdown menu rollovver/hover highlight 
.navbar-nav > li > .dropdown-menu a:hover {
    background-color: #693;
    background-image: none;
}
*/

/* change color of the nav menu background hover 
.navbar-light .navbar-nav > li > a:hover {
    background-color: #886644;
}
*/

/* change color of the nav menu background focus 
.navbar-light .navbar-nav > li > a:focus {
    background-color: #cc8866;
}
*/


/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* ######################################################################### */
/* END OF PRIMARY PAGE COLORS -------------------------------- */


















/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ######## START OF MODALS ######################################################################################################################## */



/* -  -  -  -   s t a r t   o f   m o d a l   m o d i f i r s   -  -  -  -  -  -  -  - */ 




/* START OF MODALS -------------------------------- */
/* ######################################################################### */
.modal-body {
    /* padding:9px 15px; */
    border-top:none;
    background-color: #333;
 }

 .modal-body {
background: linear-gradient(
      rgba(0, 0, 0, 0.86), 
      rgba(0, 0, 0, 0.86)
    ),url('../../paint/images/bg/bg07b.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
}

.modal-header {
    /* padding:9px 15px; */
    border-bottom:0px solid #222;
    background-color: #333;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 }

  .modal-header {
  background: linear-gradient(
      rgba(0, 0, 0, 0.86), 
      rgba(0, 0, 0, 0.86)
    ),url('images/bg07b.jpg') no-repeat center center fixed;
}

 .modal-footer {
    /* padding:9px 15px; */
    border-top:0px solid #222;
    background-color: #333;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
 }

.modal-footer {
  background: linear-gradient(
      rgba(0, 0, 0, 0.86), 
      rgba(0, 0, 0, 0.86)
    ),url('images/bg07b.jpg') no-repeat center center fixed;
}

.modal-dialog {
  min-width: 60%;
  width: 60%;
  height: 52%;
  padding: 0;
  vertical-align: middle;
}

.modal-content {
  min-height: 99%; 
  height: auto;
}



/* ######################################################################### */
/* never did figure out how to remove the shadow on the X buttons */
/* defines colors andd style of CLOSE BUTTON IN MODAL*/
/* over rides all general text IN A MODAL */
.colorsModalMain_01 {
  color:#8bc654
}

/* over rides all general text IN A MODAL */
.colorsModalMain_02 {
  color:#cf9
}

/* over rides all general headers IN A MODAL */
.colorsModalHeader_01 {
  color:#8bc654
}


/* ######################################################################### */
/* ------------------------------------------------------------*/
.colorsModalCloseButton_01 {
  color:#7ca; border-color:#333; background-color: #222;
}

.colorsModalCloseButton_01:link { 
  color: #7ca; text-decoration:none; font-weight:normal; background-color:#222;
}

.colorsModalCloseButton_01:visited { 
  color: #7ca; text-decoration:none; font-weight:normal; background-color:#222; 
}

.colorsModalCloseButton_01:hover { 
  color: #286; text-decoration:none; font-weight:normal; background-color:#111; 
}

.colorsModalCloseButton_01:active { 
  color: #286; text-decoration:none; font-weight:normal; background-color:#222;  outline: none;  
}

.colorsModalCloseButton_01:focus { 
  color: #286; text-decoration:none; font-weight:normal; background-color:#222;  outline: none;  
}

/* ######################################################################### */
/* defines colors andd style of CLOSE BUTTON IN MODAL*/
.colorsModalCloseButton_02 {
  color:#58a; border-color:#222; background-color: #222;
}

.colorsModalCloseButton_02:link { 
  color: #58a; text-decoration:none; font-weight:normal; background-color:#222;
}

.colorsModalCloseButton_02:visited { 
  color: #45a; text-decoration:none; font-weight:normal; background-color:#222; 
}

.colorsModalCloseButton_02:hover { 
  color: #45a; text-decoration:none; font-weight:normal; background-color:#222; 
}

.colorsModalCloseButton_02:active { 
  color: #45a; text-decoration:none; font-weight:normal; background-color:#222;  outline: none;
}

.colorsModalCloseButton_02:focus { 
  color: #45a; text-decoration:none; font-weight:normal; background-color:#222;  outline: none;  
}



/* ######## END OF MODALS ########################################################################################################################## */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */
/* ################################################################################################################################################# */



/* -  -  -  -  -  -  -  -  A d a p t i v e    l i m i t s  -  -  -  -  -  -   -  -  -  -  -  -  -  */



/* ADAPTIVE LIMITS SETTINGS */
/* ######################################################################### */
/* master control for the max-width of all content on all the pages*/
.fixed-top-2 {
    margin-top: 56px;
}

#mymainrowWidth{
    width: 100%;
}

@media(max-width:450px){
    .mymainrow,
    .mymainrowSmall{
        max-width: 99%;
    }
} 
@media(min-width:450px) and (max-width:768px){
    .mymainrow,
    .mymainrowSmall{
        max-width: 99%;
    }
}
@media(min-width:768px) and (max-width:990px){
    .mymainrow,
    .mymainrowLarge{
        max-width: 85%;
    }
}
@media(min-width:990px) and (max-width:10000px){
    .mymainrow,
    .mymainrowLarge{
        max-width: 85%;
    }
}









/* -  -  -  -  -  -  -  -  K G I   P O P   U P  -  -  -  -  -  -   -  -  -  -  -  -  -  */




/* Popup Bubble Styling brown #703410 */
.popup-bubble {
  display: none;
  position: absolute;
  background: linear-gradient(
    rgba(255, 255, 255, 0.85),  /* Semi-transparent white overlay */
    rgba(255, 255, 255, 0.95)     /* Full opacity white at the bottom */
  ), url('../../images/bg/bg10b.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
  border: 5px solid #888;
  padding: 15px;
  width: 600px;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 14px 14px rgba(0, 0, 30, 0.5);
  border-radius: 15px;
  font-size: 16px;
  z-index: 9999;
  transition: opacity 0.8s ease;
  overflow: hidden; /* Ensure the overlay stays within the borders */
}

/* The content inside the bubble */
.popup-wrapper {
  position: relative;
  z-index: 2; /* Ensure the content appears above the background and overlay */
  padding: 20px;
  color: #fff; /* Ensures the text is readable against the background */
  border-radius: 15px;
}

/* Responsive Design */
@media (max-width: 700px) {
  .popup-bubble {
    width: 85%;
    font-size: 16px;
  }
}

/* Full-page overlay to block clicks */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0, 40, 63, 0.85); /* Dark semi-transparent background */
  z-index: 9998; /* Slightly below the popup bubble */