.sidenav { height: 100%;  width: 0px; position: fixed;  z-index: 110; top: 0; right: 0; background-color: rgba(40,40,40,0.9);  overflow: hidden;  padding-top: 128px;  transition: 0.5s;  }
.sidenav.open {  width: 400px;   }
.menu__outer { padding: 24px; text-align: left; width: 400px;  }
.prog__menu__outer { position: relative; display: block; padding: 0px 0px 10px 10px;   }
.menu__item, .prog__menu__item { position: relative; display: block;     }
.menu__item a, .prog__menu__item a { font-family: 'VAGRoundedNext-SemiBold'; color: #ec1c99;   font-size: 24px; line-height: 36px;  }
.prog__menu__item a {  font-family: 'VAGRoundedNext-Light'; font-size: 24px; line-height: 36px;  }
.menu__item a:hover, .menu__item.selected a, .prog__menu__item a:hover, .prog__menu__item.selected a { color: #ec652c; }

.menu__sm__outer { position: absolute;  left: 0px; bottom: 32px; display: block; padding-left: 24px;  text-align: left;  width: 274px;   }
.text__outer .menu__sm__outer { position: relative; left: auto; bottom: auto; padding-left: 0px; width: 100%;    }
.menu__sm__each { display: inline-block; height: 30px;  margin-right: 10px; position: relative;   }
.menu__sm__each a, .menu__sm__each a svg { display: block; height: 100%; }
.menu__sm__each svg path { fill: #ec1c99;  }
.menu__sm__each:hover svg path { fill: #ec652c;  }

.menu__item--mobile_only  { display: none;   }

@media only screen and (max-width: 500px) {
  		.sidenav {  padding-top: 48px; }
    .sidenav.open {  width: 250px;   }
    
    .menu__item a, .prog__menu__item a {   font-size: 18px; line-height: 26px;   }
    .prog__menu__outer { padding-bottom: 2px;   }
    
    .menu__item--mobile_only  { display: block;   }
}


@media only screen and (min-width: 501px) and (max-width: 580px) { /* BLUE */
  .sidenav {  padding-top: 24px; }
  .sidenav.open { width: 220px;  }
  .menu__item a, .prog__menu__item a {   font-size: 18px; line-height: 26px;   }
.prog__menu__outer { padding-bottom: 2px;   }
  
  .menu__item--mobile_only  { display: block;   }
}


@media only screen and (min-width: 581px) and (max-width: 767px) { /* RED */
  .sidenav {  padding-top: 60px; }
  .sidenav.open { width: 220px;  }
  .menu__item a, .prog__menu__item a {   font-size: 18px; line-height: 26px;   }
  
.menu__item--mobile_only  { display: block;   }
  
}



/********  Tablet Portrait   **********/
@media only screen and (min-width:  768px) and (max-width: 840px)   { /* PINK */
.content { border: 0px solid pink;  border-width: 0px 0px;   }

	.sidenav {  padding-top: 80px; }
	.sidenav.open { width: 220px;  }

  .menu__item--mobile_only  { display: block;   }

}



@media only screen  and (min-width: 841px) and (max-width: 1000px)  { /* YELLOW */
  .content {  border: 0px solid yellow;  border-width: 0px 0px;  }
    .menu__item--mobile_only  { display: block;   }
  
}



@media only screen  and (min-width: 1001px) and (max-width: 1264px)  { /* BLACK */
    .content {  border: 0px solid black;   border-width: 0px 0px; }
    
}


@media only screen  and (max-height: 500px)  { /* BLACK */
  .sidenav {  padding-top: 30px; }
  .sidenav.open { width: 220px;   }
.menu__item a, .prog__menu__item a { font-size: 14px; line-height: 18px;  }
.menu__sm__outer { bottom: 8px;   }
.menu__sm__each { height: 24px;   }

}


@media only screen  and (min-height: 501px)  and (max-height: 650px) { /* BLACK */
  .sidenav {  padding-top: 60px; }
  .sidenav.open { width: 220px;   }
.menu__item a, .prog__menu__item a { font-size: 18px; line-height: 24px;  }
.menu__sm__outer { bottom: 8px;   }
.menu__sm__each { height: 24px;   }

}