/* cmsms stylesheet: SilverStyle CSS modified: Sunday, May 10, 2026 8:09:21 PM */

body {
background-color: rgba(25,73,131, 0.83);
background-image: url(https://360focus.org/stock_images/animated/'+num+'.gif);
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100vw 100vh;
background-attachment: fixed;

font-family: 'Raleway', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  color: #072627; 
}
.tooltip {
  position: relative;
  display: inline-block;
  font-size: 30px;
  background-color: green;
  text-shadow: -0.2px 0.6px 1.3px #ef2;
  border-bottom: 0px dotted transparent; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #434;
  color: #fff;
  text-shadow: -0.2px 0.6px 1.3px #ef2;
  font-size: 32px;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  font-size: 32px;
  text-shadow: -0.2px 0.6px 1.3px #ef2;
  background-color: #434;
}

:focus {outline:none !important;}
::-moz-focus-inner {border:0 !important;}

a.9-button {
  color: #072627;
  transition: all 1.3s ease;
  font-weight: 900;
  font-size: 1.2rem;
}

a.9-button:hover, a.9-button.menuactive {
  color: #06a18c;
  font-weight: 900;
  font-size: 1.2rem;
  z-index: 100;
}
a {
  color: {* #072627*};
  transition: all 1.2s ease-in-out 0.5s;
  font-weight: 300;
  font-size: 1.05rem;
  text-decoration: none;
  z-index: 100;
  text-shadow: -0.2px 0.4px 0.1px rgba(140,150,160, 0.4);
   [data-title]:hover:after { 
            opacity: 1; 
            transition: all 1.2s ease-in-out 0.5s; 
            visibility: visible; 
        } 
        [data-title]:after { 
            content: attr(data-title); 
            position: absolute; 
            padding: 4px 8px 4px 8px; 
            color: #222; 
            border-radius: 5px;   
            box-shadow: 0px 0px 15px #222;   
            background-image: -webkit-linear-gradient( 
                                top, #f8f8f8, #cccccc);  
                                  
            background-image: -moz-linear-gradient( 
                                top, #f8f8f8, #cccccc);   
                                  
            background-image: -ms-linear-gradient( 
                                top, #f8f8f8, #cccccc);  
                                  
            background-image: -o-linear-gradient( 
                                top, #f8f8f8, #cccccc); 
                                  
            visibility: hidden; 
        } 
}

a:hover, a.menuactive {
  color: #06a18c;
  text-decoration: none;
  z-index: 100;
    [data-title]:hover:after { 
            opacity: 1; 
            transition: all 2.2s ease-in-out 1.4s; 
            visibility: visible; 
        } 
        [data-title]:after { 
            content: attr(data-title); 
            position: absolute; 
            padding: 4px 8px 4px 8px; 
            color: #222; 
            border-radius: 5px;   
            box-shadow: 0px 0px 15px #222;   
            background-image: -webkit-linear-gradient( 
                                top, #f8f8f8, #cccccc);  
                                  
            background-image: -moz-linear-gradient( 
                                top, #f8f8f8, #cccccc);   
                                  
            background-image: -ms-linear-gradient( 
                                top, #f8f8f8, #cccccc);  
                                  
            background-image: -o-linear-gradient( 
                                top, #f8f8f8, #cccccc); 
                                  
            visibility: hidden; 
        } 
}

.quotebox,.quoteauthor,quotemain {
  font-family: 'Arial', sans-serif;
  color: #072627;
  transition: all 2.3s ease-in-out;
  font-weight: 900;
  font-size: 1.2rem;
}

h1 {
  font-family: 'Dancing Script', cursive;
  font-size: 4rem;
  margin-top: 1rem;
  margin-bottom: 0;
  font-weight: 900;
}

h1 a, h1 a:hover {
  color: #e307f2;
}

h2, h3, h4 {
  font-family: 'Raleway', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  text-shadow: 0.3px -0.4px 1.6px #d9dbbd, -0.7px 1.1px 2.3px #ff8051
  font-weight: 700;
  color: #072627;
}

h2 {
  font-size: 3.6rem;
  margin-top: 1rem;
  text-transform: uppercase;

h3 {
  font-size: 3.6rem;
  text-shadow: 0.18px -0.3px 0.6px #f2c666, -0.3px 0.4px 1.6px #33074a;
}

h4 {
  font-size: 3.2rem;
}

9-button {
  transition: all 1.3s ease;
  font-weight: 800;
  font-size: 1.05rem;
  color: #072627;
}

9-button:hover, 9-button.menuactive {
  color: #06a18c;
}


IconLink,.IconLink,#IconLink {
text-decoration: none;
font-size: 1.6rem;
color: red;
}

IconLink a:hover,.IconLink a:hover,#IconLink a:hover {
text-decoration: none;
font-size: 3.6rem;
color: green;
}

#sticky-logo a {
  transition: all 0.3s ease;
  font-family: 'Dancing Script', cursive;
  font-size: 0rem;
  line-height: 1.9rem;
  color: #D2D2D0;
z-index: 999999;
}

.is-stuck #sticky-logo a {
  display: block;
  font-size: 1.7rem;
  margin-top: -0.4rem;
  padding: 0.1rem 0 0.1rem 0;
}

#sticky-logo {
  float: left;
}

#menu-toggle {
  float: right;
}

.top-bar, .top-bar ul, .is-drilldown-submenu {
  background: linear-gradient(124deg, rgba(255,0,255,0) 10%, rgba(25,150,80,0.12) 40%, rgba(20,130,110,0.4) 70%, rgba(10,100,160,0.8) 95%, rgba(78,6,40,0.1) 105%);
  drop-shadow: -1px 4px 22px yellow;
  z-index: 999;
  max-width: 100%;
}

.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a:after {
  border-color: #25c4f8 transparent transparent;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left>a:after {
  border-color: transparent #25c4f8 transparent transparent;
}

.divider,div {
  background: #036959;
  margin: 1rem 0;
  padding: 0.5rem;
  font-size: 2rem;
}

.divider,div a {
  color: #072627;
  margin: 0 0.5rem;
  text-decoration: none;
}

.divider a:hover {
  color: #036959;
}

.card-divider {
  background: #072627;
  color: #D2D2D0;
}

.button {
  background: #D2D2D0;
  color: #072627;
  border-radius: 5px;
  border-color: green;

border-width: 2px;
  background-color: #689;
  padding: 0.7rem;
}

.button:hover {
  background: #072627;
  color: #D2D2D0;
}

.divider .button {
  background: #072627;
  color: #D2D2D0;
  margin-bottom: 0.2rem;
}

.divider .button:hover {
  background: #25c4f8;
  color: #072627;
}


.social-media .social-media:hover {
  background-color: transparent;
  color: #072627;
  align: center; 
}


footer {
  background-color: linear-gradient(2deg, rgba(10,100,200,0.6) 4%, rgba(120,10,10,0.9) 62%,rgba(10,200,100,0.0) 94%);
  text-align: left;
  align: center;
  padding-left: 0%;
  align: center;
  font-family: Arial, sans-serif;
  color: #072627;
}


footer .column {
  padding: 0 2rem;
}

footer h4 {
  margin-top: 1rem;
  color: #0af5cc;
  font-size: 0.9rem;
  padding-bottom: 0rem;
  border-bottom: 0.5px solid #D2D2D0;
}

footer i {
  margin-right: 0.5rem;
}

#copyright {
  border-top: 0.5px solid #D2D2D0;
}

#copyright span {
  margin: 0 1rem;
}

#content-columns h4 {
  text-align: center;
  font-size: 0.9rem;
  text-transform: uppercase;
z-index: 2;
}

#menu  {
columns:3;
color: ;
text-decoration: none;
}

#vertical  {
columns:3;
color: ; 
text-decoration: none;
}

form {
  padding: 1rem;
}


/* RESPONSIVE UX ENGINE  */
/* DEVICE RULES  */
/* Small (watch) only */
@media screen and (max-width: 240px) and (max-height: 240px)  {
  .is-stuck #sticky-logo {
    font-size: 0.9rem;
    padding-top: 0.5rem;
  }

background-color: transparent;
color: #dfa;
text-shadow: -0.2px 0.3px 1.2px #6f6;
font-size: 0.8rem;
align: center;
text-align: center;
margin: 5px 2px 0 2px;
padding: 0px;
}

/* Mobile (portrait) */
@media screen and (min-height: 241px) and (max-width: 867px) and (orientation: portrait) {
left: 5%;
font-size: 4.3em;
columns: 1;
background-color: {* #e5f *};
color: yellow;
text-shadow: -0.5px 0.8px 2.9px #fc0;
font-size: 3.8rem;
align: center;
text-align: center;
margin: 0px;
padding: 0px;
}

/* Mobile (landscape) */
@media screen and (min-height: 241px) and (max-height: 867px) and (orientation: landscape) {
left: 5%;
columns: 1;
background-color: {* #e5f *};
color: orange;
font-size: 3.6rem;
align: center;
text-align: center;
margin: 0px;
padding: 0px;
}

/* Tablet (portrait) */
@media screen and (min-width: 768px) and (max-width: 1279px) and (orientation: portrait)  {
left: 5%;
columns: 1;
background-color: {* blue *}; 
color: #6af;
font-size: 4.2rem;
text-shadow: -0.5px 0.8px 2.9px #fd0;
align: center;
text-align: center;
margin: 0px;
padding: 2% 4% 2.5% 4%;
}

/* Tablet (landscape) */
@media screen and (min-height: 638px) and (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape)  {
left: 5%;
columns: 1;
background-color: {* #25f *}; 
color: #6af;
font-size: 4.2rem;
text-shadow: -0.5px 0.8px 2.9px #df0;
align: center;
text-align: center;
margin: 0px;
padding: 2% 4% 2.5% 4%;
}

/* Lap/Desk (landscape) */
@media screen and (min-width: 1270px) and (max-width: 1599px) and (orientation: landscape)  {
left: 5%;
columns: 1;
background-color: {* green *}; 
color: #fd0;
font-size: 3.2rem;
text-shadow: -0.7px 0.7px 1.7px #e50;
align: center;
text-align: center;
margin: 0px;
padding: 1% 2% 1.3% 2%;
}

/* TV (landscape) */
@media screen and (min-width: 1600px) and (orientation: landscape)  {
left: 5%;
columns: 1;
background-color: {* yellow *};
font-size: 3.2rem;
text-shadow: -0.5px 0.8px 2.9px #ef2;
align: center;
text-align: center;
margin: 1%;
padding: 0px;
}

/* VR/AR (spatial) */
@media screen and BABYLON.WebXRSessionManager.IsSessionSupportedAsync('immersive-vr') {
left: 5%;
columns: 1;
background-color: {* orange *}; 
font-size: 5.2rem;
align: center;
text-align: center;
margin: 3%;
padding: 0px;
}