body{ font-family: Lato,'Open Sans', sans-sarif; font-size: 16px; background-color: #fff; }
*{margin: 0; padding: 0; box-sizing: border-box;}
.container_service{margin: 0 auto; max-width: 80%;  }


/*= common css to all effects =*/
.single-member{width:23%;height:250px; float: left; margin: 30px 4%; background-color: #fff; text-align: center; position: relative;  
 -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
 -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
 box-shadow: 0 0 20px rgba(0,0,0,0.8);
 -o-box-shadow:0 0 20px rgba(0,0,0,0.8);



}
.single-member:hover{
	cursor: pointer;
}
.member-image img{max-width: 100%; vertical-align: middle;position: relative;top: 5px;}

h3 {font-size: 19px; font-weight: normal; margin: 10px 0 0; }
h5 {font-size: 16px; font-weight: 300; margin: 0 0 0px; line-height: 22px;}
p {font-size: 15px; font-weight: 300; line-height: 22px; padding: 0 30px; margin-bottom: 10px;}
.social-touch a{display: inline-block; width: 27px; height: 27px; vertical-align: middle; margin: 0 2px; background-image: url(../images/social-icons.png); background-repeat: no-repeat; opacity: 0.7; transition: 0.3s;}
.social-touch a:hover{opacity: 1; transition: 0.3s;}
.fb-touch{background-position: 0 0;}
.tweet-touch{background-position: -35px 0;}
.linkedin-touch{background-position: -71px 0;}
.icon-colored .fb-touch{background-position: 0 -27px;}
.icon-colored .tweet-touch{background-position: -35px -27px;}
.icon-colored .linkedin-touch{background-position: -71px -27px;}
/*= common css to all effects end =*/

/*= effect-1 css =*/
.effect-1{border-radius: 5px 5px 0 0; padding-bottom: 40px;}
.effect-1 .member-image {border: 2px solid #fff; border-radius: 60px 0; display: inline-block; margin-top: -72px; overflow: hidden; transition: 0.3s;}
.effect-1 .social-touch{background-color: #e13157; position: absolute; left: 0; bottom: 0; height: 5px; overflow: hidden; padding: 5px 0 0; width: 100%; transition: 0.3s;}
.effect-1 .member-image img{transition: 0.3s; border-radius: 60px 0;}
.effect-1:hover .member-image{border-color: #e13157; transition: 0.3s; border-radius: 50%;}
.effect-1:hover .social-touch{padding: 6px 0; height: 38px; transition: 0.3s;}
/*= effect-1 css end =*/

/*= effect-2 css =*/
.effect-2{max-height: 302px; min-height: 302px; overflow: hidden;}
.effect-2 h3{padding-top: 7px; line-height: 33px;}
.effect-2 .member-image{border-bottom: 5px solid #1fb554; height: 212px; overflow: hidden; width: 100%; transition: 0.4s; display: inline-block; float: none; vertical-align: middle;}
.effect-2 .member-info{transition: 0.4s;}
.effect-2 .member-image img{width: 100%; vertical-align: bottom;}
.effect-2 .social-touch{background-color: #1fb554; float: left; left: 0; bottom: 0; overflow: hidden; padding: 5px 0; width: 100%; transition: 0.4s;}
.effect-2:hover .member-image{height: 81px; transition: 0.4s;}
/*= effect-2 css end =*/

/*= effect-3 css =*/
.effect-3{max-height: 302px;overflow: hidden;border-radius:20px;}
.effect-3 h3{padding-top: 0px; line-height: 33px;}
.effect-3 .member-image{ transition: 0.4s;  height: 150px; width: 70%; display: inline-block; float: none; vertical-align: middle;}
.effect-3 .member-info{transition: 0.4s;}
.effect-3 .member-image img{width: 80%; vertical-align: bottom;}
.effect-3 .social-touch{ float: left; left: 0; bottom: 0; overflow: hidden;padding-top: 7px; height: 1000px; width: 100%; transition: 0.4s;position: relative;top:30px}
.effect-3:hover .member-image{border-bottom: 0; border-radius: 0 0 0 0; height: 80px; display: inline-block; overflow: hidden; width:100px; transition: 0.4s;}
/*= effect-3 css end =*/

/*= effect-4 css =*/
.effect-4{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-4 h3{line-height: 35px;}
.effect-4 .member-image{position: absolute; width: 100%; transition: 0.4s;}
.effect-4 .member-image img{width: 100%;}
.effect-4 .more-info{height: 0; transition: 0.4s; overflow: hidden; z-index: 9; position: relative; background-color: #fff;} 
.effect-4:hover .more-info{height: 208px; transition: 0.4s;}
/*= effect-4 css end =*/

/*= effect-5 css =*/
.effect-5{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-5 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4;}
.effect-5 .member-image img{width: 100%;}
.effect-5 .member-info:before{border-left: 140px solid transparent; border-right: 140px solid transparent; border-top: 15px solid #fff; bottom: -15px; content: ""; left: 0; position: absolute; z-index: 9;}
.effect-5:hover .member-info{height: 215px; transition: 0.3s; z-index: 6;}
.effect-5:hover .member-image{margin-top: 200px; transition: 0.3s;}
/*= effect-5 css end =*/

/*= effect-6 css =*/
.effect-6{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-6 .member-info {background-color: #fff; position: absolute; width: 100%; top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-6 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; overflow: hidden;}
.effect-6 .member-image img{width: 100%;}
.effect-6:hover .member-info{height: 215px; transition: 0.3s; z-index: 6; border-radius: 0 0 50% 50%; overflow: hidden;}
.effect-6:hover .member-image{margin-top: 100px; transition: 0.3s; border-radius: 0;}
/*= effect-6 css end =*/

/*= effect-7 css =*/
.effect-7{max-height: 289px; min-height: 289px; overflow: hidden;}
.effect-7 h3{line-height: 35px;}
.effect-7 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-7 .member-image img{width: 100%; transition: 0.4s; opacity: 1; height: 100%;}
.effect-7 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-7:hover .member-image{bottom: 40%;}
.effect-7:hover .member-image img{width: 0; height: 0; transition: 0.4s; opacity: 0;}
/*= effect-7 css end =*/

/*= effect-8 css =*/
.effect-8{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-8 h3{line-height: 35px;}
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-8 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
/*= effect-8 css end =*/

/*= effect-9 css =*/
.effect-9{max-height: 289px; min-height: 289px; overflow: hidden;  perspective: 800px;}
.effect-9 h3{line-height: 35px;}
.effect-9 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-9 .member-image img{width: 100%; transition: 0.4s; height: 100%;}
.effect-9 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; background-color: #fff;}
.effect-9:hover .member-image{transform: translateY(100%); transition: 0.4s;}
/*= effect-9 css end =*/

/*= Media Query 
=============== */
@media only screen and (max-width: 980px){
	.row{width: 100%; margin: 110px 0;}
	.team-members{text-align: center;}
	.single-member{float: none; display: inline-block; vertical-align: bottom;}
}
/*= Media Query End
=================== */