.show-on-phone-portrait, .show-on-phone-landscape,
.show-on-tablet-portrait, .show-on-tablet-landscape,
.show-on-desktop, .show-on-phablet{
  display:none; }
.grid, #grid{
  position:relative;
  margin:0 auto;
  text-align:left; }
  .grid:after, #grid:after{
    content:"";
    display:table;
    clear:both; }

.row, #row, .rulers > ul{
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-flex-flow:row wrap;
  -ms-flex-flow:row wrap;
      flex-flow:row wrap;
  position:relative;
  box-sizing:border-box; }

.devtools .toggler button{
  background-color:#ff0000; }
  .devtools .toggler button .off{
    display:inline; }
  .devtools .toggler button .on{
    display:none; }

.showRulers .toggler-rulers button, .showBreakpointInfo .toggler-breakpoint-info button{
  background-color:#37c651; }
  .showRulers .toggler-rulers button .off, .showBreakpointInfo .toggler-breakpoint-info button .off{
    display:none; }
  .showRulers .toggler-rulers button .on, .showBreakpointInfo .toggler-breakpoint-info button .on{
    display:inline; }

.devtools{
  font-family:"Consolas", "Menlo", "Courier", monospace;
  padding:30px;
  width:50%;
  height:200px;
  position:fixed;
  bottom:-200px;
  left:25%;
  border:1px solid silver;
  background-color:#fff;
  z-index:10001;
  opacity:0;
  transition:all 0.3s ease-in-out; }
  .showDevTools .devtools{
    opacity:1;
    bottom:0; }
  .devtools .toggler button{
    border:1px solid silver;
    border-radius:3px;
    padding:8px 15px 6px;
    outline:0;
    color:#fff;
    width:60px;
    line-height:1; }

.rulers{
  position:fixed;
  width:100%;
  height:100%;
  left:0;
  top:0;
  opacity:0.2;
  z-index:10000;
  margin:0;
  padding:0;
  display:none;
  pointer-events:none; }
  .showRulers .rulers{
    display:block; }
  .rulers > ul{
    padding:0;
    margin-top:0;
    margin-bottom:0;
    list-style-type:none;
    height:100vh; }
    .rulers > ul > li{
      background-color:rgba(147, 112, 219, 0.5);
      border-left:1px solid gray;
      border-right:1px solid gray;
      height:100vh; }

.breakpoint-info{
  position:fixed;
  left:15px;
  bottom:15px;
  color:red;
  padding:10px 20px;
  background-color:rgba(255, 255, 255, 0.75);
  display:none;
  z-index:10000;
  pointer-events:none; }
  .showBreakpointInfo .breakpoint-info{
    display:block; }
  .breakpoint-info:after{
    content:"";
    bottom:0;
    width:100%;
    display:block;
    z-index:1; }
  @media (min-width: 320px) and (max-width: 479px){
  .hide-on-mobile{
    display:none !important; }
  .show-on-phone-portrait{
    display:block; }
  .hide-on-phone,
  .hide-on-phone-portrait{
    display:none !important; }
  .grid, #grid{
    width:300px; }
  .row, #row, .rulers > ul{
    width:300px;
    margin-left:50%;
    left:-150px; }
  .rulers > ul > li{
    -webkit-flex:0 0 60px;
    -ms-flex:0 0 60px;
    flex:0 0 60px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(4n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+5){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"phone-portrait: 0px - 479px"; } }
  @media (min-width: 480px) and (max-width: 599px){
  .hide-on-mobile{
    display:none !important; }
  .show-on-phone-landscape{
    display:block; }
  .hide-on-phone,
  .hide-on-phone-landscape{
    display:none !important; }
  .grid, #grid{
    width:420px; }
  .row, #row, .rulers > ul{
    width:420px;
    margin-left:50%;
    left:-210px; }
  .rulers > ul > li{
    -webkit-flex:0 0 90px;
    -ms-flex:0 0 90px;
    flex:0 0 90px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(4n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+5){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"phone-landscape: 480px - 599px"; } }
  @media (min-width: 600px) and (max-width: 767px){
  .show-on-phablet{
    display:block; }
  .hide-on-phablet{
    display:none !important; }
  .grid, #grid{
    width:540px; }
  .row, #row, .rulers > ul{
    width:540px;
    margin-left:50%;
    left:-270px; }
  .rulers > ul > li{
    -webkit-flex:0 0 50px;
    -ms-flex:0 0 50px;
    flex:0 0 50px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(8n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+9){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"phablet: 600px - 767px"; } }
  @media (min-width: 768px) and (max-width: 1023px){
  .hide-on-mobile{
    display:none !important; }
  .show-on-tablet-portrait{
    display:block; }
  .hide-on-tablet,
  .hide-on-tablet-portrait{
    display:none !important; }
  .grid, #grid{
    width:684px; }
  .row, #row, .rulers > ul{
    width:684px;
    margin-left:50%;
    left:-342px; }
  .rulers > ul > li{
    -webkit-flex:0 0 68px;
    -ms-flex:0 0 68px;
    flex:0 0 68px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(8n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+9){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"tablet-portrait: 768px - 1023px"; } }
  @media (min-width: 1024px) and (max-width: 1279px){
  .show-on-tablet-landscape{
    display:block; }
  .hide-on-tablet,
  .hide-on-tablet-landscape{
    display:none !important; }
  .grid, #grid{
    width:940px; }
  .row, #row, .rulers > ul{
    width:940px;
    margin-left:50%;
    left:-470px; }
  .rulers > ul > li{
    -webkit-flex:0 0 60px;
    -ms-flex:0 0 60px;
    flex:0 0 60px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(12n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+13){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"tablet-landscape: 1024px - 1279px"; } }
  @media (min-width: 1280px) and (max-width: 5120px){
  .show-on-desktop{
    display:block; }
  .hide-on-desktop{
    display:none !important; }
  .grid, #grid{
    width:1180px; }
  .row, #row, .rulers > ul{
    width:1180px;
    margin-left:50%;
    left:-590px; }
  .rulers > ul > li{
    -webkit-flex:0 0 80px;
    -ms-flex:0 0 80px;
    flex:0 0 80px;
    margin-left:20px;
    box-sizing:border-box; }
  .rulers > ul > li:nth-child(12n+1){
    margin-left:0; }
  .rulers > ul > li:nth-child(n+13){
    margin-top:20px; }
  .breakpoint-info:after{
    content:"desktop: 1280px and up"; } }

/*# sourceMappingURL=devtools.css.map */