/* design tools  -----------------------------------------------------*/

div.debug {
display:none;
position: fixed;
bottom:1rem;
right:1rem;
padding:1rem;
color:#ffffff;
background-color: #555;
border: none;
border-left:2rem solid gray;
border-color: orange;
z-index: 100000000000;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
div.debug:before {
position: absolute;
top:-1rem;
left:-2rem;
text-transform: uppercase;
font-weight: bold;
font-size: .7rem;
content:"Don's Debugger";
}
div.debug:after {
content:'None';
}



/* narrow-main  -----------------------------------------------------*/
@media all and (min-width: 0em)
and (max-width: 35em) {

img.hideOnNarrow {
display: none; 
}
div.debug {
border-color: teal;
}
div.debug:after {
content:'Narrow Main';
}
.hideMobile {
display:none;
}
.mobileOnly {
display: block;
}
div.column {
float:none;
}
div.column.left {
width:100%;
margin:0 auto;
}
div.column.left img.hero {
width:10em;
}
div.column.left img.hero.oversized {
width:18em;
margin-left:auto;
margin-top:-1em;
}
div.column.right {
width:100%;
}
div.bgImage {
height:20em;
}
div.bgImage.short {
height:7.5em;
}
div.content h1 {
font-size: 3em;
padding-top:0;
height:auto;
text-align: center;
margin-top:.3em;
margin-bottom:.5em;
}

div.content h1.exception2019May {
text-transform: uppercase;
font-size: 1.3em;
letter-spacing: -.05em;
line-height: 105%;
height:auto !important;
margin-bottom:.6em;
}

div.videoWrapper {
margin-bottom:1em !important;
}



div.content p {
font-size: 1em;
}
div.content h1.short {
padding-top:0;
height:auto;
margin-bottom: 1em;
margin-top:0;
}
div.content h1.short.typeA {
margin-bottom: .5em
}
div.content h1 span {
font-size: .3em;
line-height: 200%;
}
div.content h2 {
font-size: 1.2em;
text-align: center;
letter-spacing: .01em;
}
div.download {
margin-top:1.7em;
}
div.download p {
width: 40%;
}
table th,
table td {
padding:.5em;
}
table.specs {
font-size: .8em;
}
table.specs tr th:nth-child(1) {
width:auto;
}
table.specs tr th:nth-child(2),
table.specs tr th:nth-child(3) {
width:auto;
}
table.specs th img {
margin-left:-20%;
}
img.waLogo {
width:7em; 
margin:0 1em 0 0;
}
img.emtIcon {
width:4em; 
}
ul.social {
font-size: .8em;
}
ul.social::before {
letter-spacing: .2em;
}

/* slider */
div.press h1 {
font-size: 4em;
}
div.press div.bx-wrapper {
padding:0 1em;
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li {
margin-right:1em !important
}
div.press div.bx-wrapper div.bx-viewport ul.bxslider li span.quote {
width:100%;
}





}/* end @media*/



/* narrow-sub  -----------------------------------------------------*/
@media all and (min-width: 0em)
and (max-width: 25em) {

div.debug {
border-color: pink;
}
div.debug:after {
content:'Narrow Sub';
}
div.mobile a.button {
font-size: .9em;
line-height:650%;
}
div.content {
padding: 1.5em;
}
div.bgImage.short {
height:6.5em;
}
div.content h1 {
font-size: 2.5em;
}
div.content p {
font-size: .9em;
}
div.content h1.short {
margin-top:-.15em;
}
table.specs th img {
width:3.5em;
min-width: inherit;
margin-left:-10%;
margin-bottom:.5em;
}
ul.social {
font-size: .8em;
}
ul.social::before {
letter-spacing: .3em;
}

/* slider */
div.press h1 {
font-size: 3em;
}
div.press div.bx-wrapper {
font-size: .8em;
}



}/* end @media*/








/* narrow-sub-small  -----------------------------------------------------*/
@media all and (min-width: 0em)
and (max-width: 20em) {

div.debug {
border-color: orange;
}
div.debug:after {
content:'Narrow Sub Small';
}
div.mobile {
background-size: auto 55%;
background-position: 98% 1.5em;
}
div.mobile a.button {
font-size: .8em;
line-height:750%;
}
div.linkGroup {
font-size: .9em;
}

div.press div.bx-wrapper div.bx-viewport ul.bxslider li {
margin-right:.3em !important
}







}/* end @media*/






/* medium-main window -----------------------------------------------------*/
@media all and (min-width: 35em)
and (max-width: 47em) {

div.debug {
border-color: blue;
}
div.debug:after {
content:'Medium Main';
}


h1 {
font-size: 4em;
}
div.bgImage {
height:21em;
}
div.bgImage.short {
height:9em;
}
div.content {
padding: 1.5em;
}
div.content h1 {
height:5.3em;
}
div.content h1.short {
margin-bottom: .9em;
}
div.content h2 {
font-size: 1.3em;
letter-spacing: .01em;
}
div.content p {
font-size: .9em;
}
img.emtIcon {
width:4em; 
}



}/* end @media*/



/* medium-sub window -----------------------------------------------------*/
@media all and (min-width: 35em)
and (max-width: 40em) {

div.debug {
border-color: brown;
}
div.debug:after {
content:'Medium Sub';
}
h1 {
font-size: 3.2em;
}
div.bgImage {
height:17em;
}
div.bgImage.short {
height:7.5em;
}
div.content h1 {
height:4.7em;
}
div.content h1.short {
margin-bottom: 1em;
}



}/* end @media*/












/* desktop -----------------------------------------------------*/
@media all and (min-width: 47em)
and (max-width: 120em) {

div.debug {
border-color: magenta;
}
div.debug:after {
content:'Desktop';
}
	
}/* end @media*/














/* super wide window -----------------------------------------------------*/
@media all and (min-width: 120em)
and (max-width: 900em) {

div.debug {
border-color: yellow;
}
div.debug:after {
content:'Super Wide';
}


section {
font-size: 1.8em;
}

}/* end @media*/