/* ---- button ---- */
.ui-group > #top-group.button-group{
  border-bottom: 1px solid #333;  
}
.ui-group > #bottom-group.button-group{
  border-top: 1px solid #333;  
}
.ui-group > .button-group > .button {
  display: inline-block;
  padding: 0.2em 1em;
  margin-bottom: 10px;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.ui-group > .button-group > .button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.ui-group > .button-group > .button:active,
.ui-group > .button-group > .button.is-checked {
  background-color: #28F;
}

.ui-group > .button-group > .button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.ui-group > .button-group > .button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.ui-group > .button-group:after {
  content: '';
  display: block;
  clear: both;
}

.ui-group > .button-group > .button {
  float: left;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  margin-left: 0px;
  margin-right: 3px;
}

/*.ui-group > .button-group > .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.ui-group > .button-group > .button:last-child { border-radius: 0 0.5em 0.5em 0; }*/

#nav-iso > .button.disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
#nav-iso > .button.disabled:hover{
  background-color: #EEE;
  text-shadow: 0 1px white;
  color:#222;
}
#nav-iso > .button.disabled:active{
   box-shadow: none;
}

#nav-container{
	position:absolute; 
	bottom:0px;
	right:0px;
}

/* --- vertical layout --- */

#iso-container{
	display:flex;
	flex-direction:row;
}
#iso-controls{
	width:25%;
}
#iso-container > .iso-grid{
	width:75%;
}
#top-group{
	display:flex;
	flex-direction: column;
	margin-right: 10px;
}
#nav-container{
	position:relative;
	margin-top:10px;
	margin-left: calc(45% - 45px);	
}
#nav-iso{	
	float:none;
}
/* ---- grid ---- */
/* clear fix */
.iso-grid:after {
  content: '';
  display: block;
  clear: both;
}

.iso-grid-item{
  width:100%;
}

/* featured articles formating */
.feat-iso-col-2 {
  width : calc(50% - 10px);
}
.feat-iso-col-3 {
  width : calc(33% - 10px);
}
.feat-iso-col-4 {
  width : calc(25% - 10px);
}

/* -- for mobile -- */
@media only screen and (max-width: 767.98px) {
  .ui-group > .button-group > .button {
    font-size : 12px;
  }
  .feat-iso-col-2, .feat-iso-col-3, .feat-iso-col-4{
    width: 100%;
  }  
  /* -- horizontal layout -- */
  #iso-container{
	display:block;	
  }
   #iso-controls, .iso-grid{
	  width:100%;
  }  
  #top-group{
	max-width:60%;
  }
  #nav-container{
	position:absolute; 
	bottom:0px;
	right:0px;
  } 
  #nav-iso{	  
	  float:right;
  }
}
@media only screen and (max-width: 1199px) and (min-width: 768px) {
  .feat-iso-col-3, .feat-iso-col-4{
    width: calc(50% - 10px);
  }
}
@media only screen and (max-width: 1400px) and (min-width: 1200px) {
  .feat-iso-col-3, .feat-iso-col-4{
    width: calc(33% - 10px);
  }
}