*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: "Hind";
  color: #676767;
  background: #fbfbfb;
  cursor: default;
}

.wrap {
  width: 100%;
  margin: auto;
}

.card-with-hover {
  background: #fff;
  border: 1px solid #eee;
  transition: all 0.35s ease;
}
.card-with-hover:hover {
  border-color: #ddd;
  box-shadow: rgba(168,142,83,0.41) 0 0 5px;
	
}
.card-with-hover:hover figure {
  transform: scale(0.6) translateY(-1.4em);
}
.card-with-hover:hover .card--title {
  transform: translateY(-5em);
	margin-top: 0px;
}

.card-with-hover:hover .card--title p {
  opacity: 0;
}
.card-with-hover:hover .card--desc {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-duration: 0.4s;

}
.card-with-hover:hover .card--desc p {
  opacity: 1;
}
.card-with-hover:hover .card--desc hr {
  transition-delay: 0.1s;
  transform: scale(1, 1);
}
.card-with-hover:hover .card--social li {
  opacity: 1;
  transition-duration: 0.3s;
  transition-delay: 0.1s;
  transform: translate(0, 0) rotate(0deg);
}
/*.card-with-hover:hover .card--btn a {
  display: none;
}*/

.card-with-hover:hover .card--btn--none {
  display: none;
}

.card-with-hover:hover .card--btn .moreinfo {
	
  opacity: 0;
  transform: translateY(-50px);
}
.card-with-hover:hover .card--btn .fullprof {
	
  opacity: 1;
  transform: translateY(0);
}
.card-with-hover figure {
 /* position: relative;*/
  z-index: 299;
  width: 10em;
  height: 10em;
  margin: 0 auto 1em;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #eee;
  padding: 4px;
  transform-origin: center top;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card-with-hover figure img {
  width: 100%;
  display: block;
  border-radius: 50%;
  height: 100%;
}

/*.card-with-hover:hover .card-liner {
	min-height: 360px;
}*/

.card-liner {
  position: relative;
  overflow: hidden;
  padding: 2em;
  /*min-height: 360px; //5 cards*/
	min-height: 400px;
}

.card--title {
	margin-top: 40px;
  text-align: center;
  line-height: 1;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--title h6 {
  margin: 0 0 0.4em;
  font-size: 1.1em!important;
	color: black;
}
.card--title p {
  margin: 0 0 0.8em;
  color: #a5a5a5;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 2.2px;
	text-align: center;
}

.card--desc {
  position: absolute;
  top: 42%;
  left: 9%;
  width: 85%;
  text-align: center;
  padding-bottom: 0.8em;
  visibility: hidden;
  opacity: 0;
  transform: translateY(3em);
  transition: all 0.02s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--desc p {
  margin: 10px 0 0.5em;
  font-weight: 300;
  opacity: 0;
  transition: all 0.55s ease 0.1s;
	font-size: 0.9rem!important;
}
.card--desc p span {
  text-decoration: line-through;
}
.card--desc hr {
  border: none;
  width: 3em;
  margin: 0 auto 0em;
  height: 3px;
  background: #0a9191;
  transform: scale(0, 1);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.05s;
}

.card--btn {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.card--btn--none {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.card--btn a {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 0.8em!important;
  color: #a5a5a5;
  padding: 1.4em 2em;
  border-top: 1px solid #eee;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
	
}

.card--btn--none a {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8em;
  color: #a5a5a5;
  padding: 1.4em 2em;
  border-top: 1px solid #eee;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
	
}
.card--btn a .fullprof {
  display: block;
  opacity: 0;
  color: #6772e5;
  transform: translateY(50px);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn--none a .fullprof {
  display: block;
  opacity: 0;
  color: #0a9191;
  transform: translateY(50px);
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn a .moreinfo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.4em;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn--none a .moreinfo {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.4em;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn a .moreinfo i {
  margin-right: 5px;
}
.card--btn--none a .moreinfo i {
  margin-right: 5px;
}

.card--social {
  position: absolute;
  top: 3em;
  left: 0;
  width: 100%;
}
.card--social ul {
  list-style: none;
  margin: 0;
  padding: 2em;
  position: relative;
}
.card--social li {
  display: block;
  text-align: center;
  position: absolute;
  top: 0;
  opacity: 0;
  transition: all 0.02s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--social li.twitter {
  left: 72%;
  transform: translate(-200%, 1em) scale(0.7);
}
.card--social li.linkedin {
  right: 72%;
  transform: translate(200%, 1em) scale(0.7);
}
.card--social a {
  line-height: 2.4;
  display: block;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: #fbfbfb;
  color: #d4bb85;
  text-decoration: none;
  transition: all 0.3s ease;
}
.card--social a:hover {
  background: #eee;
}

@media only screen and (max-width: 1300px) {
	  
}
 @media only screen and (max-width: 1000px) {
	  .card-liner {
		 min-height: 450px;
	 }                       
}	
@media only screen and (max-width: 900px) {
       .card-liner {
		 min-height: 450px;
	 }   
		.card--desc {
			top: 50%;
	}
}	
@media only screen and (max-width: 700px) {
                                 
}