div#handNavv, #handMenu button.navbar-toggle {display: none; }



/***** HOME PAGE *****/
#homeContent { }

#homeContent .homeDivv {width: 100%; margin:  0 0 0; padding: 160px 0;}


#homeContent #homeTopp.homeDivv  { background-color: var(--black); margin-top: 0px; padding-top: 30px; padding-bottom: 80px; }
#homeContent #homeTwoo.homeDivv  { background-color: var(--white); margin-top: 0px; }
#homeContent #homeThree.homeDivv { background-color: var(--offwhite);}
#homeContent #homeFourr.homeDivv { background-color: var(--black);}
#homeContent #homeFivee.homeDivv { background-color: var(--white);}
#homeContent #homeBott.homeDivv  { background-color: var(--offwhite);}
#homeContent #homeBott2  		 { background-color: var(--offwhite);}


#homeContent .homeDivv .homeCont {padding: 0 15px; text-align: center; width: calc(100% - 30px); margin: 0 0 0 0;  max-width: calc(1200px - 30px);  }
#homeContent .homeDivv .homeCont .left  {width: 100%; vertical-align: top;  }
#homeContent .homeDivv .homeCont .right {width: 100%; vertical-align: top; }

#homeContent table.leftRight {width: 100%; }
#homeContent table.leftRight td {display: block; }
#homeContent table.leftRight td.left { width: 100%; }

#homeContent h2 {font-size: 44px; color: var(--black); text-align: left; width: 100%;  max-width: 340px;   }
#homeContent .iconList {font-size: 16px; font-weight: 500; line-height: 1.2em; letter-spacing: -2%; text-align: left; padding: 30px 0; border-bottom: solid var(--lightgrey) 1px; width: 100%; max-width: 485px;    }
#homeContent .iconList.first {padding-top: 0; }
#homeContent .iconList span {display: inline-block; margin: 0; padding: 4px 10px 0 20px; width: calc(100% - 90px); font-size: 16px; letter-spacing: -2%; vertical-align: top;}
#homeContent .iconList img {width: 43px; height: 43px; padding: 0; margin: 0 0 0 5px; }

#homeContent .systemBox {border: solid var(--grey) 1px; border-radius: 12px; background-color: var(--offwhite); width: 100%; max-width: calc(300px - 56px); padding: 28px; text-align: left; display: inline-block; vertical-align: top; }
#homeContent .systemBox.active, #homeContent .systemBox:hover {background-color: var(--lightestblack); }
#homeContent .systemBox h3 {color: var(--black); font-size: 24px; font-weight: 200; }
#homeContent .systemBox.active h3, #homeContent .systemBox:hover  h3 {color: var(--offwhite);}
#homeContent .systemBox p {height: 80px; font-weight: 300; font-size: 16px; line-height: 1.6em; color: var(--offwhite); }
#homeContent .systemBox span {display: block; margin: 0; padding: 0; width: 100%; text-align: center;}
#homeContent .systemBox img {margin: 20px auto 30px auto;  width: auto; height: 122px;   }
#homeContent .systemBox img.lgt, #homeContent .systemBox img.lgt {display: block}
#homeContent .systemBox img.drk, #homeContent .systemBox img.drk {display: none}
#homeContent .systemBox.active img.lgt, #homeContent .systemBox:hover img.lgt {display: none}
#homeContent .systemBox.active img.drk, #homeContent .systemBox:hover img.drk {display: block}
#homeContent .systemBox a {color: var(--offwhite); visibility: hidden}
#homeContent .systemBox.active a, #homeContent .systemBox:hover a {visibility: visible}
#homeContent .systemBox a:hover {}





table.leftRight td p {color: var(--white); } 
table.leftRight .rightCell { margin: 35px 0 0 0; padding: 24px; border: solid var(--darkgrey) 1px; border-radius: 24px; background: var(--lightblack);  width: calc(100% - 48px); }
table.leftRight .rightCellCont {}
table.leftRight .rightCellCont img {width: 100%; }
table.leftRight .rightCellCont h3 {color: var(--white); text-align: left; margin: 20px 0 0 0; font-size: 24px; }
table.leftRight .rightCellCont p {color: var(--white); text-align: left; margin: 20px 10px 0 0; font-size: 16px; line-height: 1.6em; }

table.leftRight p.twenty, table.leftRight p.links {color: var(--offwhite); font-size: 20px; margin: 50px 0 0 0; line-height: 1.4em; text-align: left; }






/* changes based on section */

#homeContent #homeTopp h1 {color: var(--white); text-align: left; width: 100%;  max-width: 290px; position:relative;     }
#homeContent #homeTopp h1::before {content: ""; display: block; position: absolute; margin: 0; height: 10px; width: 10px; top: 7px; left: 24px; background-image: url('/img/dot-yellow.png'); background-size: contain; background-repeat: no-repeat; background-position-y: 0px;}
#homeContent #homeTopp #heroBox {border: solid var(--darkgrey) 1px; border-radius: 24px; background: var(--lightblack); width: 100%; max-width: 590px; margin: 35px 0 0 0; padding: 0 0 0 0;     }
#homeContent #homeTopp #heroBoxCont {background: var(--lightestblack); text-align: center; border-radius: 16px; margin: 12px; }
#homeContent #homeTopp #heroBoxCont img {margin: 65px auto; width: 100%; width: 155px; }
#homeContent #homeTopp p {color: var(--white); font-size: 20px; line-height: 1.2em; font-weight: 200; letter-spacing: -2%; text-align: left; margin-top: 36px;  }
#homeContent #homeTopp p.links {margin-top: 60px; }
#homeContent #homeTopp a.arrowPlain {margin-left: 15px; }

#homeContent #homeTwoo.homeDivv h2 span {display: inline-block; width: 64px; height: 30px; margin: 0; padding: 0; }
#homeContent #homeTwoo.homeDivv div.yellowLine {margin: 40px 0; }

#homeContent #homeThree.homeDivv h2 {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2em; margin: 0 0 0 10px; color: var(--black);  text-align: right;}

#homeContent #homeFourr.homeDivv { padding-top: 80px; padding-bottom: 80px; }
#homeContent #homeFourr.homeDivv .yellowLine {display: inline-block; width: calc(100% - 240px); vertical-align: top; margin-top: 9px; }
#homeContent #homeFourr.homeDivv h2 {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2em; margin: 0 0 0 10px; color: var(--white); text-align: right; width: 220px; }
#homeContent #homeFourr.homeDivv h3.sixtyfour {display: inline-block; margin: 50px 0 0 0; padding: 0; color: var(--white); font-size: 44px; text-align: left; } 
#homeContent #homeFourr.homeDivv span, #homeContent #homeFourr.homeDivv br {display: none; }


#homeContent #homeFivee.homeDivv {padding-top: 80px; padding-bottom: 80px;  }
#homeContent #homeFivee.homeDivv .yellowLine {display: inline-block; width: calc(100% - 145px); vertical-align: top; margin-top: 9px; }
#homeContent #homeFivee.homeDivv h2 {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2em; margin: 0 0 0 10px; color: var(--black); text-align: right; width: 125px}
#homeContent #homeFivee.homeDivv h3.sixtyfour {display: inline-block; margin: 50px 0 0 0; padding: 0; color: var(--black); font-size: 44px; text-align: left; } 
#homeContent #homeFivee .leftDivv { text-align: left; }
#homeContent #homeFivee.homeDivv p {font-size: 20px; margin: 50px 0 0 0; line-height: 1.2em; letter-spacing: -2%; text-align: left; color: var(--lightestblack); }
#homeContent #homeFivee.homeDivv .fullWidth {width: 100%; padding: 0; margin: 50px auto 0 auto; text-align: center; }
#homeContent #homeFivee.homeDivv .fullWidth img { width: 100%; border-radius: 24px; max-width: 960px; cursor: pointer; }
#homeContent #homeFivee.homeDivv p.rightt, #homeContent #homeFivee.homeDivv p.links {width: 100%; text-align: left; margin: 45px 0 0 0; }
#homeContent #homeFivee.homeDivv p.links a.arrowPlain {color: var(--black); margin-left: -20px; }





#homeContent #homeBott.homeDivv {padding-top: 80px; padding-bottom: 80px; }

#homeContent #homeBott.homeDivv .yellowLine {display: inline-block; width: calc(100% - 150px); vertical-align: top; margin-top: 9px; }
#homeContent #homeBott.homeDivv h2 {display: inline-block; font-size: 16px; font-weight: 500; line-height: 1.2em; margin: 0 0 0 10px; color: var(--black); text-align: right; width: 130px;}
#homeContent #homeBott.homeDivv h3 {text-align: center; color: var(--black); margin: 0; padding: 60px 5% 0 5%; font-size: 44px; }


#homeContent #homeBott2 {margin: 0 auto 0 auto; padding: 60px 0 0 0; width: 100%; position: relative; }
#homeContent #homeBott2 img { width: calc(100vw - 14px); height: 500px; object-fit: none; object-position: 70% -5px; }
#homeContent #homeBott2Cont {position: absolute; top: 180px; left: 0; width: 100%; text-align: center; margin: 0 auto; }
#homeContent #homeBott2 h3 {color: var(--black); margin: 0px auto 0px auto; font-size: 44px; width: 100%; max-width: 300px; }
#homeContent #homeBott2 p.links { text-align: center; margin: 50px auto 0px auto; color: var(--black); }
#homeContent #homeBott2 p.links a.arrowBorder, #homeContent #homeBott2 p.links a.arrowPlain { color: var(--black); }
#homeContent #homeBott2 p.links a.arrowBorder {background-color: rgba(100, 100, 100, 0.1)}

/* scrolling content added to main css file */
#homeContent .teams {background: var(--white); margin: 0 auto 0 auto; padding: 20px 0; width: 100%;   }

div.scrollingCells {  animation: scroll 10s linear infinite; }



/*--------- SCREEN WIDTH CHANGES ------------*/
/*  mobile first = phone styles are above */

@media screen and (min-width:768px) { /* iPad portrait */
	ZZ#customizeCont section {border-color: red; }
	
	/* first non-phone changes here */
	body *.noHandheld {}
	body *.noDesktop {display: none; }
	
	#homeContent .homeDivv { }	
	#homeContent .homeDivv .homeCont {margin: 0 auto 0 auto; }
	#homeContent .homeDivv .homeCont .left  {max-width: 530px; display: inline-block; margin: 0 10% 0 0; }
	#homeContent .homeDivv .homeCont .right {max-width: 520px; display: inline-block; margin: 0 0 0 auto; }
	
	#homeContent .homeDivv .homeCont  table.leftRight td {display: table-cell; }
	#homeContent .homeDivv .homeCont  table.leftRight td.left { width: 450px; }
	
	#homeContent h2 {font-size: 64px; max-width: 460px; padding-left: 5px; }
	#homeContent .iconList {max-width: 100%;}
	#homeContent .iconList span {padding-top: 12px; }

	#homeContent .systemBox {border: solid var(--grey) 1px; border-radius: 12px; margin: 50px 0 0 0; max-width: 290px;  padding: 30px;  }
	#homeContent .systemBox h3 {}
	#homeContent .systemBox p {}
	#homeContent .systemBox img {}
	#homeContent .systemBox a {}
	#homeContent .systemBox a:hover {}
	
	#homeContent .systemBox.one {margin-right: 50px;}
	#homeContent .systemBox.two {margin-right: 50px;}
	#homeContent .systemBox.three {}
	#homeContent .systemBox.four {margin-right: 50px;}
	#homeContent .systemBox.five {margin-right: 50px;}
	#homeContent .systemBox.six {}


	#homeContent h3.sixtyfour {font-size: 64px; }
	



	#homeContent #homeTopp.homeDivv {ZZpadding-left: 120px; ZZwidth: calc(100% - 120px); }

	#homeContent #homeTopp h1 {max-width: 450px; margin-top: 28px; }
	#homeContent #homeTopp h1::before {height: 18px; width: 18px; top: 13px; left: 42px; }
	#homeContent #homeTopp #heroBox {width: 100%; max-width: 590px;  margin: 0 0 0 0; padding: 0 0 0 0;     }
	#homeContent #homeTopp #heroBoxCont {border-radius: 24px; margin: 24px; }
	#homeContent #homeTopp #heroBoxCont img {margin: 145px auto; width: auto; }
	#homeContent #homeTopp p {color: var(--white); font-size: 24px; max-width: 450px; }
	#homeContent #homeTopp p.links {margin-top: 60px; }	
	
	#homeContent #homeTwoo.homeDivv {}
	
	#homeContent #homeThree.homeDivv {  }
	#homeContent #homeThree.homeDivv .yellowLine {display: inline-block; width: calc(100% - 170px); vertical-align: top; margin-top: 9px; }
	#homeContent #homeThree.homeDivv h2 {margin: 0 0 0 10px; width: 150px; padding: 0 0 0 0; text-align: right; }
	
	

	#homeContent #homeFourr.homeDivv {padding-top: 120px; padding-bottom: 120px; }
	#homeContent #homeFourr.homeDivv .yellowLine { width: calc(100% - 240px); margin-top: 9px; }
	#homeContent #homeFourr.homeDivv h2 { width: 220px; }
	#homeContent #homeFourr.homeDivv h3.sixtyfour {font-size: 64px; } 
	#homeContent #homeFourr.homeDivv br {display:inline }
	#homeContent #homeFourr.homeDivv span.space {display: inline-block; height: 20px; width: 90px;   }
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight {width: 100%; }
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight td {display: table-cell; padding: 0 0 0 0; vertical-align: top; }
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight td.left {width: 62%; padding-right: 5%; padding-top: 35px; }	
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight td.right {width: 33%; }	
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight td.bottom {vertical-align: bottom; }			
	#homeContent #homeFourr.homeDivv .homeCont table.leftRight p.twenty {font-size: 24px; max-width: 80%; line-height: 1.4em; } 
	
	

	#homeContent #homeFivee.homeDivv {padding-top: 120px; padding-bottom: 120px;  }
	#homeContent #homeFivee.homeDivv h3.sixtyfour { font-size: 64px;  } 
	#homeContent #homeFivee.homeDivv p {font-size: 24px; line-height: 1.4em; }
	#homeContent #homeFivee.homeDivv p.rightt, 
	#homeContent #homeFivee.homeDivv p.links {width: 50%; margin: 45px 0 0 auto; }
	#homeContent #homeFivee.homeDivv br {display: none; }

	
	
	
	#homeContent #homeBott.homeDivv {padding-top: 120px; padding-bottom: 120px; }
	#homeContent #homeBott.homeDivv .yellowLine {}
	#homeContent #homeBott.homeDivv h2 {}
	#homeContent #homeBott.homeDivv h3 { font-size: 64px; }
	


	#homeContent #homeBott2 {}
	#homeContent #homeBott2Cont {top: 220px; left: 0; width: 100%; }
	#homeContent #homeBott2 h3 {font-size: 64px;  max-width: 100%;}
	#homeContent #homeBott2 p.links {}	
	#homeContent #homeBott2 img { width: 100%; height: auto; object-fit: unset; object-position: 0 0px; }


	div.scrollingCells {  animation: scroll 30s linear infinite; }
		
}

@media screen and (min-width:841px) { /* */
	ZZ#customizeCont section {border-color: yellow; }




	
}
@media screen and (min-width:951px) { /* */
	ZZ#customizeCont section {border-color: blue; }
	
	#handInfo   {display: none; }
	#toppAddDiv {display: none; }


	/* start SHOWing the Components here */	

}
@media screen and (min-width:1080px) { /* */
	ZZ#customizeCont section {border-color: orange; }

	
}
@media screen and (min-width:1171px) { /* show everything */
	ZZ#customizeCont section {border-color: purple; }
	

	
}