@charset "UTF-8";
/* CSS Document */

p, blockquote, form, label, ul, ol, dl { margin-bottom: 15px; }  
header h1, header h2, footer h1, footer h2, 
html, html * { 
    box-sizing: border-box; 
    padding: 0; margin: 0; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    font-weight: normal; 
}
img, object, embed, video { max-width: 100%; }
/* IE 6 does not support max-width so default to width 100% */
.ie6 img { width:100%; }
h1, h2, h3, h4, .makeTimes { 
    margin:0; padding:0; 
    font-family: Times, "Times New Roman", "serif"; 
}
img, audio { width:100%; }
strong { font-weight: bold; }
ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 30px;
}
body {
    margin: 0; padding: 0; font-size: 20px;
}

.clearB { clear:both; }

.txt9 { font-size:9px; }
.txt10 { font-size:10px; }
.txt11 { font-size:11px; }
.txt12 { font-size:12px; }
.txt14 { font-size:14px; }
.txt15 { font-size:15px; }
.txt16 { font-size:16px; }
.txt18 { font-size:18px; }
.txt20 { font-size:20px; }
.txt1em { font-size: 1em; }
.big { font-size: 1.15em; }
.big1 { font-size: 1.25em; }
.padTB10 { padding:10px 0; }
.padT20 { padding:20px 0 0 0; }
.padTB20 { padding:20px 0; }

.txtLeft, .textLeft { text-align:left; }
.txtRight { text-align:right; }
.txtCenter, .centerText { text-align:center; }
.caps { text-transform: capitalize; }
.allCAPs { text-transform: uppercase; }
.UpperCase { text-transform: uppercase; }
.letterSpacing-2 { letter-spacing: -2px; }
.letterSpacingX3 { letter-spacing: 3px; }
.fontWeightNormal, .normalH123456 { font-weight: normal; }

.hr80c { width:80%; margin:25px 10%; }
.item { margin-bottom: 15px; }
#WHT { color: aliceblue; }
#whtBLOCK { margin: 25px auto; }
#whtBLOCK .green { color: green; }
#whtBLOCK .red { color: red; }
#whtBLOCK a.noDeco, #whtBLOCK a.noDeco:visited { text-decoration:none; color: #00297C; }
#whtBLOCK a.noDeco:hover { text-decoration:none; color: #6E920C; }

a.noDeco, a.noDeco:visited { text-decoration:none; color: #e4d4c0; }
a.noDecoBC4, a.noDecoBC4:visited { text-decoration:none; color: #9ACC12; } a.noDecoBC4:hover { text-decoration:none; color: #D8CEA1; }
a.noDecoBC5, a.noDecoBC5:visited { text-decoration:none; color: #00297C; } a.noDecoBC5:hover { text-decoration:none; color: #9ACC12; }
a.noDecoBlack, a.noDecoBlack:visited { text-decoration:none; color: #555; } 
a.noDecoWht, a.noDecoWht:visited { text-decoration:none; color: #FFF; }
a.noDeco:hover, a.noDecoBlack:hover { color: #D6EAE4; }

a.noDecoWht:hover { color: #adf; }

img.turn2grayIMG {
  filter: none;
  cursor: grab;
  cursor: -webkit-grab;
  -webkit-filter: grayscale(0%);
}
img.turn2grayIMG:hover, img.makeIMGgray {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

footer { position: relative; width: 100%; z-index: 10; }
footer { max-width: 924px; width: 100%; margin: 0 auto; }footer { max-width: 904px; width: 100%; margin: 0 auto; z-index: 10; }
footer { background-color: #f2e; }
footer .nameIDetc img { width: 18px; vertical-align: middle; }
footer .nameIDetc h1 { font-size: 0.8em; text-transform: capitalize; color: #FFF; }
footer .boxbf1 h1 { font-size: 0.8em; text-transform: capitalize; color: #FFF; }
footer .nameIDetc h2 { font-size: 0.5em; text-transform: capitalize; color: #c1b580; }
#social a, #social a:visited { color: #c1b580; text-decoration: none; } #social a:hover { color: #f9eaa6; }

.brandColor01 { color: #9ACC12; }
.brandColor02 { color: #D8CEA1; }
.brandColor03 { color: #906616; }
.brandColor04 { color: #00297C; }

.rounded_corners5 { 
	-moz-border-radius: 5px 5px 5px 5px; 
	-webkit-border-radius: 5px 5px 5px 5px; 
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.rounded_corners5_top { 
	-moz-border-radius: 5px 5px 0 0; 
	-webkit-border-radius: 5px 5px 0 0; 
	-khtml-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.rounded_corners5_bottum { 
	-moz-border-radius: 0 0 5px 5px; 
	-webkit-border-radius: 0 0 5px 5px; 
	-khtml-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}
.rounded_corners { 
	-moz-border-radius: 20px 20px 20px 20px; 
	-webkit-border-radius: 20px 20px 20px 20px; 
	-khtml-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;
}
.rounded_corners_top { 
	-moz-border-radius: 20px 20px 0px 0px; 
	-webkit-border-radius: 20px 20px 0px 0px; 
	-khtml-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
}
.rounded_corners_bottum { 
	-moz-border-radius: 0px 0px 20px 20px; 
	-webkit-border-radius: 0px 0px 20px 20px; 
	-khtml-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
}
.rounded_corners60 { 
	-moz-border-radius: 60px 60px 60px 60px; 
	-webkit-border-radius: 60px 60px 60px 60px; 
	-khtml-border-radius: 60px 60px 60px 60px;
	border-radius: 60px 60px 60px 60px;
}

.buttonROCK, .buttonROCK:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake1 0.5s;
background-color: #2350aa; /* brandBG01 */
}
.buttonROCK25B1, .buttonROCKB1:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake1 0.5s;
background-color: #9ACC12; /* brandBG01 */
}
.buttonROCK1, .buttonROCK1:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake2 0.5s;
background-color: #2350aa; /* brandBG01 */
}
.buttonROCK25B2, .buttonROCK25B2:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake2 0.5s;
background-color: #9ACC12; /* brandBG01 */
}
.buttonROCK2, .buttonROCK2:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake2 0.5s;
background-color: #c87e2e; /* brandBG02 */
}
.buttonROCK3, .buttonROCK3:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake1 0.5s;
background-color: #664300; /* brandBG03 */
}
.buttonROCK4, .buttonROCK4:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake2 0.5s;
background-color: #c1b580; /* brandBG04 */
}
.buttonROCK, .buttonROCK:visited, .buttonROCK25B1, .buttonROCK25B1:visited, .buttonROCK25B2, .buttonROCK25B2:visited, .buttonROCK1, .buttonROCK1:visited, .buttonROCK2, .buttonROCK2:visited, .buttonROCK3, .buttonROCK3:visited, .buttonROCK4, .buttonROCK4:visited {
    padding: 30px 40px;
    font-size: 2em;
    color: #FFF;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
.buttonROCK:hover, .buttonROCK2:hover, .buttonROCK3:hover, .buttonROCK4:hover, .buttonROCK25B1:hover, .buttonROCK25B2:hover { color: #FFF; background-color: #999; text-decoration: none; }

@keyframes shake1 {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  35% { transform: translate(1px, -1px) rotate(-0.5deg); }
  70% { transform: translate(-1px, 1px) rotate(0deg); }
  100% { transform: translate(0px, -1px) rotate(0.5deg); }
}

@keyframes shake2 {
  0% { transform: translate(0px, -1px) rotate(0deg); }
  35% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  70% { transform: translate(1px, -1px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0.5deg); }
}
/* Float Boxs web 3 pad 2 Phone 1 */
.box121, .box211, .box221, .box231, .box311, .box321, .box411, .box421, .box511, .box521, .box531, .box532, .box541, .boxf1, .boxf3 {
    margin:0 0 15px 1.5%;;
    vertical-align: text-top;
    display:inline-block;
}
.box121, .box211, .box221, .box231, .box311, .box321, .box411, .box421, .box511, .box521, .box531, .box541, .boxf1, .boxf2, .boxf3 { width:96.5%; }
.box532 { width:48.5%; }

.imgFloatRight { float: none; width: 90%; margin: 0 0 10px 5%; display: block; }

.show001, .show010, .show011, .boxf2 { display:none; }
.show100, .show101, .show110 { display:block; }

.BlueBG  { background: #5384b0; min-height:  628px; /* Adjust as needed */ }
.GreenBG  { background: #0D6E56; min-height:  628px; /* Adjust as needed */ }
.BrownBG  { background: #715311; min-height:  628px; /* Adjust as needed */ }

.BlueBG360  { background: #5384b0; min-height:  360px; /* Adjust as needed */ }
.GreenBG360  { background: #0D6E56; min-height:  360px; /* Adjust as needed */ }
.BrownBG360  { background: #715311; min-height:  360px; /* Adjust as needed */ }

.BlueBG, .GreenBG, .BrownBG {
    /* Multiple background layers: gradient, image, then background color */
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%), /* Top gradient */
    url('https://bodyorg.com/img25/nav/northen-lights.png'); /* Image at the bottom */    
}
.BlueBG360, .GreenBG360, .BrownBG360 {
    /* Multiple background layers: gradient, image, then background color */
    background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%), /* Top gradient */
    url('https://bodyorg.com/img25/nav/northen-lights360.png'); /* Image at the bottom */ 
    
}
.BlueBG, .GreenBG, .BrownBG, .BlueBG360, .GreenBG360, .BrownBG360  {
  width: 100%; /* Adjust as needed */
  /* Your desired background color */
    color: aliceblue;
  
  background-repeat: no-repeat; /* Prevent image from repeating */
  background-position: 
    top, /* Position for the gradient (starts from top) */
    bottom center; /* Position for the image (bottom center) */
  
  background-size: 
    100% 100%, /* Gradient covers the entire div */
    auto 120%; /* Adjust image height as needed, 'auto' for width */

  /* Optional: Add padding for content */
  padding: 20px;
  box-sizing: border-box; /* Include padding in width/height */
}
    #whtPage25B { padding: 20px 0; background-color: #FFF; }
    .whtPageMargin25B,
    .Margins25B { margin: 0 auto; width: 98%; }

    #page25PARTS { padding: 0; margin: 0; width: 100%; display: block; }
    #page25PARTS .full,
    #page25PARTS .main75,
    #page25PARTS .subGIGs25,
    #page25PARTS .sideBAR25 { width: 100%; padding: 0; margin: 0; }

header .nameIDicon { float: right; width: 10%; text-align: right; font-size: 35pt; margin-right: 25px; display: block; }
header .nameIDicon a, header .nameIDicon a:visited { color: #c1b580; padding: 0 10px; text-decoration: none; display: inline-block; }
header .nameIDicon a:hover { color: #fff; }
            
    .rlogoWrap { width: 65%; margin: 20px auto 5px auto; }

        .pagePART1A { float: none; width: 98%;  margin: 0 auto; display: block; }
        .pagePART2A { float: none; width: 90%; margin: 0 auto; padding-top: 10px; display: block; }

.accordion {
  background-color: transparent;
  color: #D8CEA1;
  cursor: pointer;
  padding: 5px 0;
  width: 100%;
  border: none;
  outline: none;
  font-size: 1.07em;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: transparent;
  color: #9ACC12;
}

.accordion {
  color: #D8CEA1;
  font-weight: normal;
  float: right;
  margin-left: 5px;
}

.active {
}

.panel {
  padding: 0 5px;
  font-size: 16px;
  background-color: transparent;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.imgShadow5 { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); }

#darkBG { color: aliceblue; }
#darkBG p, #darkBG ul, #darkBG li { margin: 0 0 15px 0; }

#darkBG .brandColor01 { color: #9ACC12; }
#darkBG .brandColor02 { color: #D8CEA1; }
#darkBG .brandColor03 { color: #CEAA87; }
#darkBG .brandColor04 { color: #9BF; }

#darkBG a, #darkBG a:visited { color: #D8CEA1; text-decoration: none; }
#darkBG a:hover { color: #FFF; }
#darkBG .mainN01,
#darkBG .mainN02,
#darkBG .mainWSA,
#darkBG .mainWSB,
#darkBG .sidebar25B { float: none; width: 98%; margin: 0; display: inline-block; }

#darkBG a.buttonROCK, #darkBG a.buttonROCK:visited {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake1 0.5s;
background-color: #C3B66F; /* darkBG brandBG01 */
}   
#darkBG a.buttonROCK4, #darkBG a.buttonROCK4:visited {
animation: shake2 0.5s;
background-color: #906616; /* darkBG brandBG04 */
}
#darkBG a.buttonROCK, 
#darkBG a.buttonROCK:visited, 
#darkBG a.buttonROCK4, 
#darkBG a.buttonROCK4:visited {
padding: 8px 15px;
font-size: 14px;
color: #FFF;
border: none;
text-align: center;
text-decoration: none;
display: inline-block;

/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
#darkBG a.buttonROCK:hover, 
#darkBG a.buttonROCK4:hover { color: #FFF; background-color: #999; text-decoration: none; }

#darkBG ul.tnDATAprint {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
}

#darkBG ul.tnDATAprint li {
  position: relative; /* For positioning the pseudo-element */
  padding-left: 24px; /* Space for the custom bullet */
  margin-bottom: 10px; /* Spacing between list items */
}

#darkBG ul.tnDATAprint li::before {
  content: '';
  display: inline-block;
  width: 20px; /* Desired width */
  height: 20px; /* Desired height */
  background-image: url('https://bodyorg.com/img/nav/heart.gif'); /* Path to your image */
  background-size: contain; /* Ensures the image fits within the 20x20 area */
  background-repeat: no-repeat;
  background-position: center left; /* Positions the image within its area */
  position: absolute; /* Position relative to the parent li */
  left: 0; /* Align to the left of the li */
  top: 30%; /* Vertically center */
  transform: translateY(-50%); /* Fine-tune vertical centering */
}

#lightBG { color: #000; }

/* iPad Layout: 481px and above. */
    @media only screen and (min-width: 481px) {
            
    .rlogoWrap { width: 55%; margin: 20px auto 5px auto; }
    .whtPageMargin25B,
    .Margins25B { margin: 0 auto; width: 90%; }

        .pagePART1A { float: none; width: 98%;  margin: 0 auto; display: block; }
        .pagePART2A { float: none; width: 80%; margin: 0 auto; padding-top: 25px; display: block; }
    
    /* Float Boxs web 3 pad 2 Phone 1 */
    .box121, .box221, .box321, .box421, .box521, .boxf1, .boxf3 { width:47.5%; } .boxf1 { text-align: left; } .boxf3 { text-align: right; }
    .box211, .box411 {
        width:98.5%;
        margin:0 0 15px 1.5%;
        vertical-align: text-top;
        display:inline-block;
    }
    .box231, .box531, .box532 { width:30.5%; }
    .box541 { width:22.5%; margin: 0 0.5% 0 0; }

    .show001, .show100, .show101, .boxf2 { display:none; }
    .show010, .show011, .show110 { display:block; }
        
}
/* webpage Layout: 769px and above. */
        @media only screen and (min-width: 769px) {
            
        #darkBG .sidebar25B { float: right; vertical-align: top; width: 20%; text-align: left; margin-left: 1%; display: inline-block; }
        /* #darkBG .sidebarWSB { float: none; text-align: left; display: block; } */
        #darkBG .mainN01 { float: left; width: 56%; display: inline-block; } 
        #darkBG .mainN02 { width: 44%; float: right; vertical-align: top; text-align: left; padding: 0 0 5px 15px; } 
        #darkBG .mainWSB { float: left; text-align: left; vertical-align: top; width: 78%; margin-left: 0; display: inline-block; }
        #darkBG .mainWSA { float: left; text-align: right; vertical-align: top; width: 66.66%; margin-left: 0; display: inline-block; }
            
        .rlogoWrap { width: 25%; margin: 20px auto 5px auto; }
        .whtPageMargin25B,
        .Margins25B { margin: 0 auto; width: 94%; }

        .pagePART1A { float: left; width: 56%; margin-right: 4%; display: inline-block; }
        .pagePART2A { float: left; width: 40%; margin: 0; padding: 0; display: inline-block; }

        .pagePART1B { float: left; width: 39%; margin: 0 0 0 1%; display: inline-block; }
        .pagePART2B { float: left; width: 34%; margin: 0 0 0 1%; display: inline-block; }
        .pagePART3B { float: right; width: 23%; margin: 0 0 0 1%; display: inline-block; }
    
        /* Float Boxs web 3 pad 2 Phone 1 */
        .box211, .box221, .box231 { width:47%; }
        .box311, .box321, .boxf1, .boxf2, .boxf3 { width:30%; } .boxf2 { display: inline-block; text-align: center; }
        .box411, .box421 { width:22.5%; }
        .box511, .box521, .box532, .box541, .box531 { width:16.5%; }
        .box121 {
            width:97%;
            margin:0 0 15px 1.5%;;
            vertical-align: text-top;
            display:inline-block;
            }
            
        .show001, .show101, .show011 { display:block; }
        .show100, .show010, .show110 { display:none; }
            
        #page25PARTS .full,
        #page25PARTS .subGIGs25 {width: 100%; float: none; display: block;}
        #page25PARTS .main75 { width: 77.5%; float: left;}
        #page25PARTS .sideBAR25 { width: 20%; float: right; }
            
        .imgFloatRight { float: right; width: 45%; margin: 0 0 3px 15px; display: block; }
            
        header .nameIDicon { display: none; }
}