/* on hover Text, image preview CSS */
.box{
    display:none;
    width:100%;
    border:1px dotted #dec321;
	background:#ddd;
	padding:3px;
}
a:hover + .box,.box:hover{
    display:inline;
    position:relative;
    z-index:100;
}
/* end */

/* Accordion Section CSS */
.accordion {
  padding: 0;
  margin: 2em 0;
  width: 100%;
  overflow: hidden;
  font-size: 1em;
  position: relative;
}

.accordion__title {
  padding: 0 1em;
  background: #8a8a8a;
  border-top: 2px solid #eee;
  color: #222;
  float: left;
  line-height: 3;
  height: 3em;
  cursor: pointer;
  margin-right: .25em;
}

.no-js .accordion__title {
  float: none;
  height:auto;
  cursor:auto;
  margin:0;
  padding:0 2em;
}

.accordion__content {
  float: right;
  width: 93%;
  margin: 3em 0 0 -100%;
  padding: 2em;
  background: #7e7e7e;
}

.no-js .accordion__content {
  float:left;
  margin:0;
}

.accordion__title:hover,
.accordion__title.active {
  background: #7e7e7e;
  color: white;
}

.no-js .accordion__title:hover {
  background-color:#8a8a8a;
  color:#222;
}

.accordion__title.active {
  border-top-color:lime;
}



/*
3.2 Portfolio
***************************************/
 .single-project {
    margin-bottom:30px;
    background:#7e7e7e;
}
.single-project img {
    width:100%;
}
.project-description {
    padding-right:20px;
}
.project-description p {
    padding-left:0;
}
.project-title {
    margin-top:15px;
    margin-bottom:15px;
    border-bottom:1px solid #FECE1A;
}
.project-title h3 {
    float:left;
    margin-top:0;
    padding:0;
    width:80%;
}
.project-title .close {
    color: #FECE1A;
    margin-top:10px;
}
.project-info span, .project-title h3 {
    color:#FECE1A;
}
.project-info {
    font-weight:100;
    padding:10px 0;
}
.project-info span {
    width: 80px;
    display: inline-block;
}
.project-info div {
    margin-bottom:5px;
}
.close {
    float: right;
    width: 40px;
    height: 40px;
    text-align: center;
}
#portfolio-grid .mix {
    opacity: 0;
    display: none;
}

@media (max-width: 48em) {
	  .accordion {
		border: 1px solid grey;
	  }
	  
	  .accordion__title,
	  .accordion__content { 
		float: none;
		margin: 0;
	  }
	  
	  .accordion__title:first-child {
		border:none;
	  }
	  
	 .accordion__title.active {
	  border-top-color:#eee;
	  }
	  
	  .accordion__title.active, .accordion__title:hover {
		background:#777;
	  }
	  
	  .accordion__title:before {
	  content:"+";
	  text-align:center;
	  width:2em;
	  display:inline-block;
	  }
	 .accordion__title.active:before {
	  content:"-";
	  }
	  
	 .overflow-scrolling {
	  overflow-y: scroll;
	  height:11em;
	  padding:1em 1em 0 1em;
	  /* Warning: momemtum scrolling seems buggy on iOS 7  */
	  -webkit-overflow-scrolling: touch;
	  }
	
	  .accordion__content {
		position:relative;
		overflow:hidden;
		padding:0;
	  }
	  
	   .no-js .accordion__content {
		padding:1em;
		overflow:auto;
		display:block;
	  }
	  
	  .accordion__content:after {
		position:absolute;
		top:100%;
		left:0;
		width:100%;
		height:50px;
		border-radius:10px 0 0 10px / 50% 0 0 50%;
		box-shadow:-5px 0 10px rgba(0, 0, 0, 0.5);
		content:'';
	}  
}