/*  -- utils ---*/
body, window{
  height: 100%;
}

.hide{
  display: none;
}
.invisible{
  opacity:0.1;
}
/*
.reverse-row-order{
 flex-direction:row-reverse;
}*/

.columns, .column{ /* prevent hori scroll bug on phones*/
  max-width: 100vw !important;
}

body.logged .hidden-logged{
  display: none;
}



#fixed{
  position: fixed;
  width: 100%;
}


aside{
  width:200px;
  height:100vh;
}
aside .bottom{
  position: absolute;
  bottom:35px; /*20bef*/
}


aside.right{ /*styles for the right sidebar */
/*  border:2px yellow solid;*/
  right: 0px;
  top:0px;
  position: absolute;
  width:356px;
  height:100vh;
  padding:10px;
  padding-top:200px;
}

/* for home only. */
body.nosidebar aside.right{display: none;}
/*
-------
Container  padding
*/


.hidden{
  display:none;
}
.container{
  padding-left: 4vw;
  padding-right: 4vw;
 /*border:1px dashed #ccc;*/
}

.container  .breakout{
  margin-left: -4vw;
  margin-right: -4vw;
}
.container  .breakout img{
  width: 100%;
}
.container.wide{
  padding-left: 2vw;
  padding-right:2vw;
}

.column.pad{
  padding-left: 4vw!important;
  padding-right: 4vw;
}
/* even larger margin */
@media screen and (min-width: 1008px) {
/*  .container{
    padding-left: 4vw;
    padding-right: 4vw;
  }*/
/*  .container  .breakout{
    margin-left: -4vw;
    margin-right: -4vw;
  }*/
}

/* even larger margin */
@media screen and (min-width: 1408px) {
  .container{
    padding-left: 8vw;
    padding-right: 8vw;
  }
  .container  .breakout{
    margin-left: -8vw;
    margin-right: -8vw;
  }
}



/*
-------
MArgin padding responsive

*/

.main-content > article{
  padding-top:20px; /* default top margin, mobile + large */
}

/* On screens that are # or less, set the background color to blue */
@media screen and (max-width: 768px) {
  body {
    /*background-color: blue!important;*/
  }
  .hero.splash{
    padding-top:200px;
  }
}

@media screen and  (min-width: 768px) and (max-width: 1090px) {

  .main-content > article{ /*just first child, after nav*/
    padding-top:170px; /* account for nav overlap, but no big image on tablet size. */

    /* moved to a spacer instead*/
  }
}
/*
@media screen and (max-width: 768px) {
  .reverse-row-order-mobile{
   flex-direction:row-reverse;
  }
}*/

/* On screens that are # or less, set the background color to blue */
@media screen and (min-width: 768px) {

  body {
    /*background-color: red!important;*/
  }
  .container{
    margin-right:356px!important;
    width: auto;
  }
  body.nosidebar .container{ /* no margin on homepage :) */
    margin-right:0px!important;
    width: auto;
  }
}

/* On screens that are # or less, set the background color to blue */
@media screen and (min-width: 1090px) {
  .container{
    margin-left:200px;
  }
  .container.wide{
    padding-left: 0;
  }
}