@charset "utf-8";
html, body {
	overflow-x:hidden;
	color:#666;
	background-image:url("http://eahuey.com/portfolio/images/bgimage.gif");
	height: 100%;
}
b {
	font-weight:bold;
}
p {
	color:#999;
}
a:link {
	color:#00cc99;
	font-weight:bold;
	text-decoration:none;
}      /* unvisited link */
a:visited {
	color:#666;
	font-weight:bold;
	text-decoration:none;
}  /* visited link */
a:hover {
	color:#999;
	text-decoration:underline;
}  /* mouse over link */
a:active {
	color:#6600CC;
	text-decoration:none;
}  /* selected link */
.navbar-inverse .navbar-nav>li>a {
	color:#00cc99;
}
.navbar-default {
	background-color:#00cc99;
	border-color:#e7e7e7;
}
a.list-group-item {
	color:#00cc99;
}
.list-group-item {
	background-color:#fff;
	border:1px solid #ddd;
}
a.list-group-item:hover, a.list-group-item:focus {
	color:#666;
	text-decoration:none;
	background-color:#f5f5f5
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
	z-index:2;
	color:#fff;
	background-color:#6600CC;
	border-color:#6600CC;
}
.btn-primary {
	color:#6600CC;
	background-color:#fff;
	border-color:#fff
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
	color:#fff;
	background-color:#666;
	border-color:#666;
}
#logo {
	position:absolute;
	top:5px;
	left:5px;
}
#header {
	position:absolute;
	top:55px;
	left:200px;
}

.div-green {
	background-color:#00cc99;
	width:100%;
	height: 25px;
	margin: 0px auto;
}
.div-purple { 
	background-color:#382b65;
	width:100%;
	height: 25px;

	margin: 0px auto;
}
.thumbnail img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

.header {
    text-align: center;
    padding: 32px;
}


.thumbnail img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.row-ig {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}