/*html {  scroll-behavior: smooth;} */

* {  -webkit-text-size-adjust: none;}  /* Fuck Chrome  */

@keyframes fadein { from { opacity: 0; }  to   { opacity: 1; } }

/*@keyframes scroll {  0% { opacity: 1; transform: translateY(0);}  100% { opacity: 0; transform: translateY(20px);}}*/

body { top:11vw;  animation: fadein 1.5s; font-size:20px; #font-size: calc(20px + (36-14) * ((100vw - 300px) / (1900 - 300))); color: #000; width: 98%; background-color:#FFF; }   /* blue=2A2DA5 */ 
    

@font-face {  font-family: gaston;  src: url('fonts/gaston.TTF');}    
@font-face {  font-family: bow;  src: url('fonts/bow.TTF');}
@font-face {  font-family: bimini;  src: url('fonts/bimini.ttf');}


  
.container { position: relative; display:; top:0vw; left: 0vw; width: 101%; #max-width: 1050px; height: auto; #margin: 0vw 0vw;  #border: 2px dashed #777; }

a.anchor { display: block; position: relative; top: -2vw; visibility: hidden;0}
a { text-decoration: none; margin: 0 .3vw;  } /* removed blue underline from links */
a:visited {  color: #000;}
table {position:relative; width:99%; #background:lime;}
td {  padding:1vw; border:none; font-size:1em;}

td.minibanner {  padding:1vw; border:none; font-size:1em;}
tr { vertical-align: tmiddle; }
p {dispaly:block;}

 /*Changed <li> dot to a checkmark 
ul {  list-style: none;}
ul li:before {content:"\2713\0020";}*/
ul {text-align:left;}
li { font-size:1em;  padding: .5vw; color:#000 }

.banner-container { position: relative; display:inline; font-size: 2.5vw; top:2vw; left: 0vw; width: 98%; #max-width:990px; height: auto;#overflow: auto; #border: 2px dashed lime; }

.banner {  position: center; display:inline-block; font-size:3vw; #font-weight:500;  padding:1vw; width:97%; height:auto;  color:#000; background-color: #FFF; #border: 2px dashed red; }

.minibanner {  position: relative; display:inline-block; font-size:2.6vw;  padding:1vw; top:-1vw; left:0vw; width:82%; height:7vw;  color:#000; #background: linear-gradient(0deg, rgba(253,253,255,1) 0%, rgba(221,221,222,1) 76%, rgba(211,213,213,1) 100%); box-shadow: -12px 0px 19px  #ccc, 12px 10px 19px  #CCC;border-radius: 12px; #border: 2px dashed lime; }

.banner-row-main { position: relative; display:inline; top:-5vw; text-align:center; vertical-align: middle; background: #FFF; #border: 2px dashed blue; }

.banner-row-mini { position: relative; display:center; #left: .3vw; text-align:center; vertical-align: middle; font-size: .5vw; background: #FFF; #border: 2px dashed blue; }

.mini_header {  position:fixed; display:center; top:-100px; left:0vw; height:7.5vw; width: 100%; padding-top: .5vw; padding-bottom: 6px; background: #fff;   transition: all .7s; opacity: ; z-index: 999; #border: 2px solid lime;}

.banner2 { position: fixed center;  width:84%;  #text-align:center; #vertical-align: middle;  #font-size: 5vw; #background:   #faf7f7  ;  #overflow: auto; #border: 2px dashed blue; }

.hti-banner {position:relative; height:42vw; top:2vw; #border:2px dashed lime; }

/* NEC background imgae 
.bg-image { position:relative; width:98%; height: 60vw; top:-10vw; left:0vw; padding-top: 4vw; background-image: url(../img/bg3-sm.png); background-attachment: fixed;  background-repeat: no-repeat; background-position: center center; #background-size: cover; border-radius:1.5vw; border: 2px dashed blue; }*/

.sticky {  background-color: #FFF;  opacity: 1;  top: 0px; #box-shadow: 1px 1px 0px 1px  #ccc;}

/*.width { position:absolute; display:block; top: 2vw; left:0vw; }*/

.bg-colors { position:absolute; display:block; top: 2vw; right:0vw; }
.bg-color { width:2.3vw; height:auto; color:#f1f1f1;}

.content-container-mainpage {position: relative; width:99%;  padding:0vw; height: auto; top:3vw; left:0vw; background-color:#FFF; #border: 2px solid lime; }

.content-container {position: relative; width:99%;  padding:0vw; height: auto; top:3vw; left:1vw; background-color:#FFF; #border: 2px solid lime; }

.content { position:center; display:block; top:-5vw; left:0vw; width:90%; height:auto; background-color: #FFF; #border: 2px dashed red;}

.row { position:relative; text-align:;   width: 85%; padding: 2vw 3vw; color:#000; font-size: 3vw;border-radius: 1.5vw; box-shadow: -12px 0px 19px  #ccc, 12px 10px 19px  #CCC; #border:1px solid #ccc; #overflow: hidden; }

.float-right {dsiplay:inline; float:right; width:32vw;  #border:1px solid #ccc;}

.row2 { position:relative; text-align:left;   width: 80%; padding: 5vw 4vw; color:#000; font-size: 3vw;border-radius: 1.5vw; box-shadow: -12px 0px 19px  #ccc, 12px 10px 19px  #CCC; #border:1px solid #ccc; #overflow: hidden; }

.title{ position: relative; z-index:999;}

.logo { position:relative; top:0vw; width:auto;  height:42vw; #border: 2px dashed red;}
.manuf-logo-w { position:relative; top:-2.5vw; width:13vw; max-width: 220px; height:auto; #border: 2px dashed red;}
.manuf-logo-h { position:relative; top:-2.5vw;  width:auto; height:5vw; #max-height: 220px;#border: 2px dashed red;}
.mini-logo { poistion:center; height: 5vw; width:auto; top:-1vw; margin: 0vw 0vw; }
.supertech { height:20vw;}
.laddertech { height:30vw;  max-width:370px;}
.hti {  position:relative; top:0vw; width: auto; max-width:900px; height: 14.5vw; border-radius: 1vw; #border-style:ridge; }
.hti2 {  height:3vw; width:auto;  }
.title { height:auto; width:55vw; }


.width {position:fixed; right:1.5vw; top:3vw; font-size:1em; color:#ccc; #border:1px solid red; z-index:77; }

.hide{position:fixed; right:1vw; top:2vw; width:5vw; height:4vw;  #border:1px dashed black;  z-index:88; }
.show{position:fixed;  right:1vw; top:2vw; width:5.2vw; height:4vw; background:#fff; z-index:88; }

/* Using 'em' for IMAGES is based on FONT size within BODY class */
.pic1  { top:-1vw; width: 1em; height: auto; border:none;}
.pic2 { top:-1vw; width: 2em; height: auto; border:none;}
.pic3 { top:-1vw; width: 3em; height: auto; border:none;}
.pic35 { top:-1vw; width: 3.5em; height: auto; border:none;}
.pic4 { top:-1vw; width: 4em; height: auto; border:none;}
.pic5 { top:-1vw; width: 5em; height: auto; border:none;}
.pic6 { top:-1vw; width: 6em; height: auto; border:none;}
.pic7 { top:-1vw; width: 7em; height: auto; border:none;}
.pic8 { top:-1vw; width: 8em; height: auto; border:none;}
.pic9 { top:-1vw; width: 9em; height: auto; border:none;}
.pic10 { top:-1vw; width: 10em; height: auto; border:none;}

.picbutton {height:60%; width:90%; border-radius: .5vw; box-shadow: 3px 3px 2px 2px #ccc;}
.buttonpic {width:13vw; height:auto;}

.button { display: flex;  #height: 2.5vw; width:auto; font-size: 3vw; padding:1.5vw; box-shadow: -8px 0px 9px  #ccc; border-radius:1.4vw; #color:fff; background-color:#fff; #border:none; }
    .button:hover {#background:#ccc;}
    .button:active {#box-shadow: inset 4px 4px #ccc; transform:translateY(3px);}
    .button:focus {  outline:red; }

.button2 { display: flex;  width:auto; font-size: 3vw; padding:1.5vw;  background-color:#fff; }
    .button2:active { transform:translateY(7px);}    
 
.button3 /* brochure needs to be smaller */ { display: inline;  width:14vw; font-size: 3vw; padding:1.5vw;  background-color:#fff; }
    .button3:active { transform:translateY(7px);}      
    
.more { position: relative; top:0vw; left:32vw; width:3vw; font-size: 2vw; color:blue; background-color:#fff; }
.web { width:30vw; height:20vw;}
.popup1 { width: 75vw;  height: auto;}
.popup2 { width: 55vw;  height: auto;}
.icon { width: auto; height: 9vw; }
.icon2 { width: 16vw; height: auto; }
.quote { position:relative; left:0vw; top:-3vw; width:18vw;  #border: 1px dashed lime; }
.brochure { position:relative; left:0vw; top:.5vw; width:14vw;   #border: 1px dashed red;}
.chat {position:relative; left:0vw;  top:1.5vw; width:20vw;   #border: 1px dashed black;}
.emoji {width: auto; height: 5vw; } 
.home { height: 3.5vw; width:auto; }
.cash { height:40vw; width:auto; }
.hixbux { height:5vw; width:auto; }

.heading { text-align:center;  width:90%; padding: 2vw 7vw; font-size: 5.5vw; #font-size: calc(32px + (36-14) * ((100vw - 300px) / (1600 - 300))); border-style: ridge; border-radius: 2vw; border-width: .2vw; background-color: white;    }
.heading2 { text-align:center;  width:80%; padding: 2vw 1vw; font-size: 5.5vw;  border-style: ridge; border-radius: 2vw; border-width: .2vw; background-color: white;    }
.numbers { width: 14vw; height:auto; }


f05 {font-size:.5em;}
f075 {font-size:.75em;}
f1 {font-size:1em;}
f15 {font-size:1.5em;}
f2 {font-size:2em;}
f25 {font-size:2.5em;}
f3 {font-size:3em;}
f35 {font-size:3.5em;}
f4 {font-size:4em;}
f45 {font-size:4.5em;}
f5 {font-size:5em;}
f55 {font-size:5.5em;}
f6 {font-size:6em;}
f65 {font-size:6.5em;}
f7 {font-size:7em;}
f75 {font-size:7.5em;}
f8 {font-size:8em;}
f85 {font-size:8.5em;}
f9 {font-size:9em;}
f95 {font-size:9.5em;}
f10 {font-size:10em;}
f105 {font-size:10.5em;}

fb { color:blue;  font-style: italic;}
ft { color:transparent;}
ft:hover { color:#FFF;}
fw { color:white;}

hix1 { font-size: 6.5vw; color: red; font-family: 'Didot' ; font-weight: bold; font-style: italic;}
hix2 { font-size: 6vw; color: black; font-family: bimini; font-weight: bold; }

.spacer { position: inline; display: block; width: 12vw;  height:3vw; #border: 2px dashed red;}
.spacer-h { position: inline; display: block; width: 12vw;  height:5vw; #border: 2px dashed red;}
.spacer-h2 { position: inline; display: block; width: 12vw;  height:8vw; #border: 2px dashed red;}
.halfspacer { position: inline; display: block; width: 6vw;  height:1vw; #border: 2px dashed red;}


#hr { border: 1px solid #FFF;}

.soon { position: relative; display: block; width: 12vw; top:-7vw; left:; }

/*#topbutton { position: fixed; display:block; bottom: 5vw; right: 30px; width: 7vw;  z-index:; cursor: pointer; }*/
.links {position:relative; display:inline; height:5vw; width:auto; font-size:5vw; }

/* Dont need on cell phones 
.contact { position: fixed; bottom:.5vw; left:2vw; height: 2em; opacity:.4;   z-index: 4;}*/

.footer { position: fixed; display:inline; opacity:1; bottom:0;  left:0vw; height: 3em; width:100%; white-space: nowrap; background-color: #000; }

/* Dont need hover effect on cell phones
.footer:hover {#height:5em;  width: 100%; left:0vw;  background-color: #000; filter: alpha(opacity=50); opacity: 1;}  */

.footerpic { position: relative; width: auto; height: 2em; bottom: .2vw; #float:left;  -webkit-transition: all .5s ease-in-out; z-index: 4; }

.footer-number {  font-size:1em;  z-index: 4; }
.footer-number:hover { }

.rights { position: absolute; right:1vw; bottom:6vw; font-size:1em;  color: #000;   z-index: 4; }

.scrollup { position: fixed; width: 13vw; height: 13vw; bottom: 10vw; right: .5vw; display: none; text-indent: -9999px; #background: url('icon_top.png') no-repeat; #background-color: #000;}

.iframe { width:98%; height:110%; float:;  border: 1px ridge; border-radius: 2vw;}
.form { font-size:3vw; }
fieldset { margin-left:3vw; background-color: #F5FBEF;}
fieldset legend{ font-weight:bold;}
fieldset input{ margin-left: 6vw; margin-top:2vw;}