@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
/* the important bits */
li {
  -webkit-perspective: 400px;
          perspective: 400px;
}

.info {
  -webkit-transform: rotate3d(1, 0, 0, 90deg);
          transform: rotate3d(1, 0, 0, 90deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  pointer-events: none;
  background-color: rgba(20, 128, 212, 0.9);
}

.in-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;
          animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .info {
  -webkit-transform-origin: 100% 0%;
          transform-origin: 100% 0%;
  -webkit-animation: in-right 300ms ease 0ms 1 forwards;
          animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
          animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: in-left 300ms ease 0ms 1 forwards;
          animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .info {
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-animation: out-top 300ms ease 0ms 1 forwards;
          animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .info {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-animation: out-right 300ms ease 0ms 1 forwards;
          animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .info {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
          animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .info {
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;
          animation: out-left 300ms ease 0ms 1 forwards;
}

@-webkit-keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}

@keyframes in-top {
  from {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-right {
  from {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-bottom {
  from {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes in-left {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
}
@-webkit-keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@keyframes out-top {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(-1, 0, 0, 104deg);
            transform: rotate3d(-1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@keyframes out-right {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, -1, 0, 104deg);
            transform: rotate3d(0, -1, 0, 104deg);
  }
}
@-webkit-keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@keyframes out-bottom {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(1, 0, 0, 104deg);
            transform: rotate3d(1, 0, 0, 104deg);
  }
}
@-webkit-keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
@keyframes out-left {
  from {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
            transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, 104deg);
            transform: rotate3d(0, 1, 0, 104deg);
  }
}
/* you can ignore this ones */
ul {
  padding: 0;
  margin: 0 0 50px;
}
ul:after {
  content: "";
  display: table;
  clear: both;
}

li {
  position: relative;
  float: left;
  width:328px;
  height: 285px;
  margin: 5px;
  padding: 0;
  list-style: none;
}
li a {
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  border-radius: 4px;
}
li h3 {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9); text-shadow:none; background:none;
}
li p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}
li .normal {
  width: 100%;
  height: 100%;
  background-color: #ECF0F1;
  color: rgba(52, 73, 94, 0.6);
  box-shadow: inset 0 2px 20px #e6ebed;
  text-align: center;
  font-size: 50px;
  line-height: 200px;
}
li .normal svg {
  pointer-events: none;
  width: 50px;
}
li .normal svg path {
  fill: rgba(52, 73, 94, 0.2);
}

* {
  box-sizing: border-box;
}

	.client {
		width:338px;
		min-height:400px;
		background-color:#f2f2f2;
		text-align:center;
		float:left;
		font-family: 'Open Sans', sans-serif;
		letter-spacing:1px;
			-webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
		border-right:1px solid #f0f0f0;
		border-bottom:1px solid #f0f0f0;
		cursor:pointer; padding:10px;
	}
	
	.logo1 {
    display:block;
		width:75px;
		height:75px;
		-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:5px solid #eee;
		margin-bottom:30px;
    background-color:#eee;
    margin:35px auto;
	}
	
	.client h2  {
		font-size:18px;
		color:#555 !mpotant;
		padding:0px;
		margin:0px;
	}
	
	.client h3 {
		font-weight:100;
		margin-top:0px; line-height:22px;  
	}
	
	.clearer {
		clear:both;
	}
	
	.client:hover {
		-ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Safari */
    transform: scale(1.1,1.1);
		-webkit-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
-moz-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
		z-index:9999;
		border-right:1px solid transparent;
		border-bottom:1px solid transparent;
		cursor:pointer;
		background-color:#fff;
	}

.client:hover .logo {
background: rgba(244,103,110,1);
background: -moz-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(244,103,110,1)), color-stop(100%, rgba(77,64,111,1)));
background: -webkit-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -o-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -ms-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: linear-gradient(to bottom, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4676e', endColorstr='#4d406f', GradientType=0 );
  border:5px solid #eee;  
}
 .info h3{ font-size:22px;}
.info  p{ font-size:14px;  }




	.container1 {
 		
	}
	
	.client {
		width:33%; 
 		background-color:#f2f2f2;
		text-align:center;
		float:left;
		font-family: 'Open Sans', sans-serif;
		letter-spacing:1px;
			-webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
		border-right:1px solid #f0f0f0;
		border-bottom:1px solid #f0f0f0;
		cursor:pointer; padding-bottom:25px;
	}
	
	.logo1 {
    display:block;
		width:75px;
		height:75px;
		-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:5px solid #eee;
		margin-bottom:30px;
    background-color:#eee;
    margin:35px auto;
	}
	
	.client h2, .client h3 {
		font-size:18px !important;
		color:#555;
		padding:5px;
		margin:0px;   text-shadow:none; background:none; 
	}
		.client h2, .client h3:before { background:none !important; text-shadow:none;
		 
	}
	
	.client h3 {
		 font-weight:400;
		margin-top:0px; letter-spacing:0px;
	}
	
	.clearer {
		clear:both;
	}
	.client  p{ letter-spacing:0px; padding-top:15px; color:#666;  padding:5px; font-size:13px;  }
	.client:hover {
		-ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Safari */
    transform: scale(1.1,1.1);
		-webkit-box-shadow: 5px 5px 91px 0px rgba(229,229,229,1);

		z-index:9999;
		border-right:1px solid transparent;
		border-bottom:1px solid transparent;
		cursor:pointer;
		background-color:#fff;
	}

.client:hover .logo {
background: rgba(244,103,110,1);
background: -moz-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(244,103,110,1)), color-stop(100%, rgba(77,64,111,1)));
background: -webkit-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -o-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: -ms-linear-gradient(top, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
background: linear-gradient(to bottom, rgba(244,103,110,1) 0%, rgba(77,64,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4676e', endColorstr='#4d406f', GradientType=0 );
  border:5px solid #eee;
}
	
	.wrapper1 {
				-webkit-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
-moz-box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
box-shadow: 10px 10px 91px 0px rgba(193,79,82,1);
		z-index:0;
		font-family: 'Open Sans', sans-serif;
		color:#fff;
		 
		width:707px;
		/*position:relative;*/
		top:0px;
		z-index:-1;
	}
	
	.wrapper1 h1 {
		font-weight:100;
		margin:0px;
		padding:0px;








/*3d*/
/* SIBLING FADE: fade out siblings around a hovered item */

.sibling-fade { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.sibling-fade > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.sibling-fade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.sibling-fade:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.sibling-fade > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */







/* Presentational Styles */
/* SIBLING FADE: fade out siblings around a hovered item */

.sibling-fade { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.sibling-fade > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.sibling-fade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.sibling-fade:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.sibling-fade > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */

.text-blue{ color:#64b2a6 !important; font-weight:bold}

.about-client {
		width:338px;
		min-height:200px;
		background-color:#f2f2f2;
		text-align:center;
		float:left;
		font-family: 'Open Sans', sans-serif;
		letter-spacing:1px;
			-webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    transition: all 0.1s;
		border-right:1px solid #f0f0f0;
		border-bottom:1px solid #f0f0f0;
		cursor:pointer; padding:10px;
	}