/*Soosviews style sheet */

/*-- CSS Responsive text sizes ----------------------------------------------------- */
/*-- #abc is an id selector (use with id=), .abc is a class (use with class=) ------ */
/*-- e.g. <p id="demo" class="test" style="color: pink;">Hello World!</p> ---------- */
/*-- specifity priority is: inline style > id > class > CSS style > !important-------*/

/* basic font types (responsive) ------------------------------------------------------------------- */

     #myFonts {font-family:"Tahoma"; font-size:3.5vw; margin-left:2.5cm; margin-right:2.5cm; 
                    text-align:center; font-weight: normal;}

     p,td,table,li {font-family:"Tahoma"; font-size:3.5vw; margin-left:2.5cm; margin-right:2.5cm; 
                    text-align:center; font-weight: normal;}
     @media only screen and (max-width:9000px) {p,td,table,li {font-size:1.5vw;}}
     @media only screen and (max-width:1200px) {p,td,table,li {font-size:2vw;}}
     @media only screen and (max-width:800px)  {p,td,table,li {font-size:2.5vw;}}
     @media only screen and (max-width:700px)  {p,td,table,li {font-size:3.5vw;}}
     td {vertical-align:top}
     p {color:white}
     a {color:white}
     body {background-color:#4CA6A7;}

     p.PageHeader {font-weight:bold; font-size:5vw; font-variant:small-caps; font-family:"Arial Black"}
     @media only screen and (max-width:9000px) {p.PageHeader {font-size:3vw;}}
     @media only screen and (max-width:1200px) {p.PageHeader {font-size:4vw;}}
     @media only screen and (max-width:800px)  {p.PageHeader {font-size:5vw;}}

     p.SubHeading {font-weight:bold; font-size:4vw}
     @media only screen and (max-width:9000px) {p.SubHeading {font-size:2vw;}}
     @media only screen and (max-width:1200px) {p.SubHeading {font-size:2.5vw;}}
     @media only screen and (max-width:800px)  {p.SubHeading {font-size:3vw;}}
     @media only screen and (max-width:700px)  {p.SubHeading {font-size:4vw;}}
     p.SubpageHeading {font-size:14pt; font-weight:bold; font-variant:small-caps}

/*-- CSS Buttons --------------------------------------------------------------------------------- */

     .myCenter {justify-content: center; align-items: center; display:flex; flex-wrap:wrap;
                border: 0px solid black; width:100%;}
     .button {
       border: 0px; padding: 15px 32px; text-align: center; text-decoration: none;
       display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;
       border-radius: 12px;}
     @media only screen and (max-width:9000px) {button.button {font-size:1.5vw;}}
     @media only screen and (max-width:1200px) {button.button {font-size:2vw;}}
     @media only screen and (max-width:800px)  {button.button {font-size:2.5vw;}}
     @media only screen and (max-width:700px)  {button.button {font-size:2.25vw;}}

     @media only screen and (max-width:9000px) {button.button {padding:15px 32px;}}
     @media only screen and (max-width:700px)  {button.button {padding:15px 15px;}}

     .button1 {
       background-color: DarkSlateGrey;
       color: Yellow;
       border: 2px solid #4CAF50;}

     .button1:hover {
       background-color: LightSlateGrey;
       color: Yellow;}

/*-- CSS Small Logo in top centre -------------------------------------------------------------- */

/* new defs relative to buttons */

     .smallLogo {position:absolute; right:0px; width:8vw; transform:translate(-44.5vw,-2vh); 
                 border-radius: 12px;}
     @media only screen and (max-width:9000px) {img.smallLogo 
                                                {width:8vw; transform:translate(-44.5vw,-2vh);}}
     @media only screen and (max-width:1200px) {img.smallLogo 
                                                {width:9vw; transform:translate(-43.5vw,-2vh);}}
     @media only screen and (max-width:800px)  {img.smallLogo 
                                                {width:14vw; transform:translate(-40vw,-2vh);}}
     @media only screen and (max-width:500px)  {img.smallLogo 
                                                {width:16vw; transform:translate(-40vw,-3vh);}}

/* Background Banner Image ------------------------------------------------------------------- */

     div.MyBanner {background-image: url("Banner 2700x540.jpg"); background-repeat: repeat-x;}

/* -- CSS logo ----------------------------------------------------------------------------- */

     img.logo {display: block; margin-left: auto; margin-right: auto; width: 30%;}

/* -- Tooltips ----------------------------------------------------------------------------- */
/* Tooltip container */
     .tooltip {position: relative; display: inline-block;}
       /* border-bottom: 1px dotted black; If you want dots under the hoverable text */
 
/* Tooltip text */
     .tooltip .tooltiptext {visibility: hidden; width: 75px; background-color: LightSlateGrey;
       color: yellow; text-align: center; padding: 5px 0; border-radius: 6px;
 
       /* Position the tooltip */
       position: absolute; z-index: 1; top: 130%; left: 50%; margin-left: -75px;}

/* arrows - ::after pseudo element + empty content in border for arrow */

    .tooltip .tooltiptext::after {
       content: " ";
       position: absolute;
       bottom: 100%; /* At the top of the tooltip */
       left: 85%;
       margin-left: -5px;
       border-width: 5px;
       border-style: solid;
       border-color: transparent transparent LightSlateGrey transparent; /* where the arrow points */
       }

/* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext { visibility: visible; }

/* tooltip usage in HTML ----------------------------- 
----- <div class="tooltip">Hover over me
-----   <span class="tooltiptext">Tooltip text</span>
----- </div>
------------------------------------------------------ */
/* -- Footer ------------------------------------------------------------------------------- */

      div.footer {background-color: DarkSlateGrey; color: White; width:100%}
      div.footer {border: 1px solid #777}
/* ------------------------------------------------------------------------------------------- */
     .footerH {text-align:left;}
     .footerP {text-align:left; font-size:1vw;}
/* ------------------------------------------------------------------------------------------- */
     div.footerLeftlogo, div.sitemap, div.policies { float: left; padding: 5px;}

     .footerLeftlogo {text-align:left;background-color: DarkSlateGrey;
                      height:180px;object-fit:cover; }
     .sitemap {background-color: DarkSlateGrey;}
     .policies {background-color: DarkSlateGrey;}

     .divclear { clear: both;}
/* ------------------------------------------------------------------------------------------- */
     .copyrightline {background-color: DarkSlateGrey; color: White; width:100%}  
     .copyright {display:inline-block; text-align:left;height:31px;font-size:1vw;}
     .footerIcons {display:inline-block; float:right;border:0;padding:8px;height:31px;}
 
     @media only screen and (max-width:9000px) {p.footerLeftlogo {height:10vh;}}
     @media only screen and (max-width:2500px) {p.footerLeftlogo {height:10vh;}}
     @media only screen and (max-width:1200px) {p.footerLeftlogo {height:10vh;}}
     @media only screen and (max-width:700px)  {p.footerLeftlogo {height:10vh;}}

     @media only screen and (max-width:9000px) {p.footerP, p.copyright {font-size:1vw;}}
     @media only screen and (max-width:1000px) {p.footerP, p.copyright {font-size:1.5vw;}}
     @media only screen and (max-width:700px) {p.footerP, p.copyright {font-size:2vw;}}

     @media only screen and (max-width:9000px) {div.copyrightline {bottom:8vh;}}
     @media only screen and (max-width:2500px) {div.copyrightline {bottom:10vh;}}
     @media only screen and (max-width:1500px) {div.copyrightline {bottom:8vh;}}
     @media only screen and (max-width:1200px) {div.copyrightline {bottom:6vh;}}
     @media only screen and (max-width:1000px) {div.copyrightline {bottom:2vh;}} 
     .clearfix::after {content: ""; clear: both; display: table;}