.gitContainer
{
  border-radius: 10px;
  background: rgb(255, 255, 255);
  /*border: 1px solid grey;*/
  background: rgb(255, 255, 255);
}

.gitIcon
{
  /*background-image: url('img/git_logo.png');
  width: 32px;
  height: 32px;
  position: absolute;
  margin-left: 0.15em;
  margin-top: 0.15em;*/
}

.gitHeader
{
  width: 100%;
  height: 200px;
  /*background: url('img/banner.png');*/
  background: rgb(255, 255, 255);
  border-radius: 10px 10px 0 0;
  background-repeat: none;
}

.gitTitle
{
  font-size: 20px;
  line-height: 1em;
  padding: 8px 15px;
  background: rgba( 30, 30, 30, 0.9);
  text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4);
  border-radius: 8px;
  font-family: Oswald;
  font-weight: bold;
  /*margin-top: 200px;
  margin-left: 20px;
  position: relative;*/
  top: 160px;
}

.gitTitle a
{
  text-decoration: none;
  color: #fff;
}

.gitTitle a:hover
{
  color: #fff;
  text-decoration: underline;
}

.gitDescription
{
  padding: 0.5em 0.5em 0 0.5em;
  font-size: 1.2em;
}

.gitLink
{
  padding: 0.5em 0.5em 0 0.5em;
  font-size: 1.2em;
}

.gitStats
{
  padding: 0.5em;
  font-size: 1.2em;
}

.gitStats > div
{
  width: 40%;
  min-width: 220px;
  display: inline-block;
}

.gitClone
{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
  background: rgb(69,72,77); /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  color: #ffffff;
  padding: 10px 15px;
  border-radius: 10px;
  font-family: Oswald;
}

.gitURL a:hover
{
  text-decoration: underline;
}
/*------------------*/
/* List Styles*/
/*------------------*/
.task-container ul{
	overflow:hidden;
}
.task-container .task-headline{
	display:none;
	color:#666666;
	border-bottom:1px solid #C8C7BB;
	padding-bottom: 20px;
	margin-bottom:20px;
	font-size:1.6em;
	position: relative;
}
.task-container .task-headline:before{
	height: 1px;
	width: 100%;
	background: #FFF;
	position: absolute;
	content: " ";
	bottom: 0px;
	left: 0;
}
.task-container .nothing-message{
	background:url("../img/logo2.png") no-repeat center 20px;
	height:160px;
	color:#666;
	background-size: 15%;
}
.task-container li{
	display:none;
	width:100%;
	overflow: auto;
	height:auto;
	min-height:10px;
	background:#FFF;
	display: inline-block;
	padding:20px;
	/*border:1px solid #CCC;*/
	color:#666;
	border-top:9px solid #1cb571;
	cursor:pointer;
	margin-bottom:10px;
	margin-right:2%;
	transition: all 0.3s;
  position: relative;
  padding-left: 0;
}

.task-container2 li{
	display:none;
	width:100%;
	overflow: auto;
	height:auto;
	min-height:10px;
	background:#FFF;
	display: inline-block;
	padding:20px;
  /*border:1px solid #CCC;*/
	color:#666;
	border-top:9px solid #57c5cf;
	/*border:9px solid #57c5cf;*/
	cursor:pointer;
	margin-bottom:10px;
	margin-right:2%;
	transition: all 0.3s;
	position: relative;
  padding-left: 0;
}

.task-container li:nth-child(even){
	margin-right: 0;
}
.task-container li:hover{
	opacity: 0.8;
	border-top:9px solid #F0553B;
}
.task-container p{
	line-height: 1.6em;
	text-align: left;
}
.task-container li.complete{
	opacity:0.3;
	border-top:9px solid #666;
	transition: all 0.3s;

}
.task-container li.complete:before{
	background:url("../img/complete.png") no-repeat;
	position: absolute;
	top:5px;
	right:5px;
	content: "";
	width: 55px;
	height: 55px;
	background-size: 100%;
}
.task-container li.complete:hover{
	border-top:9px solid #F0553B;
	opacity:0.6;
}
.task-container li.complete p{
	text-decoration: line-through;
}

body {
  font-family: Oswald;
  background: #111;
}

.main-wrapper {
  margin: 3em auto;
  margin-top: 0px;
  text-align: center;
}

.badge {
  position: relative;
  margin: 1.5em 7em;
  width: 4em;
  height: 6.2em;
  border-radius: 10px;
  display: inline-block;
  top: 0;
  transition: all 0.2s ease;    
  margin-bottom: 0;
}

.gitLogo{
  text-align: center;
  margin-left: -50px;
}
@media (min-width: 320px) and (max-width: 480px) {

  .main-wrapper {
    margin: 3em auto;
    margin-top: 0px;
    text-align: center;
    margin-left: -8px;
  }
  .gitLogo{
    text-align: center;
    margin-left: -20%;
  }
  
}
.badge:before, .badge:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge:before {
  transform: rotate(60deg);
}
.badge:after {
  transform: rotate(-60deg);
}
.badge:hover {
  top: -4px;
}
.badge .circle {
  width: 60px;
  height: 60px;
  position: absolute;
  background: #fff;
  z-index: 10;
  border-radius: 50%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.badge .circle i.fa {
  font-size: 2em;
  margin-top: 8px;
}
.badge .font {
  display: inline-block;
  margin-top: 1em;
}
.badge .ribbon {
  position: absolute;
  border-radius: 4px;
  width: 100px;
  z-index: 11;
  color: #fff;
  bottom: 50px;
  left: 50%;
  margin-left: -50px;
  height: 24px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, #555 0%, #333 100%);
  cursor: default;
}
.badge .ribbontiny {
  position: absolute;
  border: 1px solid #ccc!important;
  border-radius: 10px;
  width: 240px;
  z-index: 11;
  color: rgb(0, 0, 0);
  bottom: 20px;
  left: -135%;
  /*margin-left: -90px;*/
  height: 24px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(54, 54, 54, 0.27);
  text-shadow: 0 2px 2px rgba(54, 54, 54, 0.27);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
  cursor: default;
}
.badge .ribbontiny2 {
  position: absolute;
  border: 1px solid #ccc!important;
  border-radius: 10px;
  width: 240px;
  z-index: 11;
  color: rgb(0, 0, 0);
  bottom: -5px;
  left: -135%;
  /*margin-left: -90px;*/
  height: 24px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(54, 54, 54, 0.27);
  text-shadow: 0 2px 2px rgba(54, 54, 54, 0.27);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
  cursor: default;
}
.badge .ribbonHeader {
  position: absolute;
  border-radius: 4px;
  width: 100px;
  z-index: 11;
  color: #fff;
  bottom: 19px;
  left: 50%;
  margin-left: -50px;
  height: 24px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, #555 0%, #333 100%);
  cursor: default;
}
.badge .ribbontinyHeader {
  position: absolute;
  border: 1px solid #ccc!important;
  border-radius: 10px;
  width: 100px;
  z-index: 11;
  color: rgb(0, 0, 0);
  bottom: -5px;
  left: -29%;
  /*margin-left: -90px;*/
  height: 24px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(54, 54, 54, 0.27);
  text-shadow: 0 2px 2px rgba(54, 54, 54, 0.27);
  text-transform: uppercase;
  background: linear-gradient(to bottom right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
  cursor: default;
}
.yellow {
  background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
  color: #ffb300;
}

.orange {
  background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
  color: #f68401;
}

.pink {
  background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
  color: #dc306f;
}

.red {
  background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
  color: #c62828;
}

.purple {
  background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
  color: #7127a8;
}

.teal {
  background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
  color: #34a297;
}

.blue {
  background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
  color: #259af3;
}

.blue-dark {
  background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
  color: #1c68c5;
}

.green {
  background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
  color: #7cb342;
}

.green-dark {
  background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
  color: #00944a;
}

.silver {
  background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
  color: #9e9e9e;
}

.gold {
  background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
  color: #b7892b;
}

footer {
  text-align: center;
  margin: 5em auto;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #111;
  border: .5px dashed #f8f8f8;
  color: #999;
  margin: 5px;
}
footer a:hover {
  background: #222;
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

.gitTitleHeader{
  font-size: 50px;  
  font-family: Oswald;    
  margin-top: 10px;
}