@charset "utf-8";
/* CSS Document */
.clearwhy{height:100px; background-color:#f0f7fc; width:100%}
.whydiv{height:400px; width:100%; background-color:#f0f7fc;}
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{width: 103%; float: left; margin: 10px -1.5%;}
/*= common css to all effects =*/
.single-member{width: 270px; float: left; margin: 30px 18px; background-color: #2993dd; text-align: center; position: relative; border-radius:10px;}
.member-image img{max-width: 100%; vertical-align: middle;}


h5 {font-size: 16px; font-weight: 300; margin: 0 0 15px; line-height: 22px; color:#fff;}
p {font-size: 14px; font-weight: 300; line-height: 22px; padding: 0 20px; text-align:left; margin-bottom: 10px; color:#fff;}
.in{ text-indent:2em;}
.social-touch a{display: inline-block; width: 27px; height: 26px; 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 =*/
.mycontainer{margin: 0 auto; max-width: 1200px;}
/*= effect-8 css =*/
.effect-8{max-height: 300px; min-height: 300px; overflow: hidden;  perspective: 800px;}
.effect-8 h3{line-height: 35px; font-size: 22px; font-family:verdana; font-weight:bold; color:#fff; margin: 30px 0 20px; text-transform: uppercase;}
.effect-8 .member-image{position: absolute; bottom: 0; width: 100%; transition: 0.4s; z-index: 1;}
.effect-8 .member-image img{width: 300px; transition: 0.4s; height: 214px;}
.effect-8 .more-info{height: 208px; transition: 0.4s; overflow: hidden; position: relative; }
.effect-8:hover .member-image{transform: rotateX(82deg); transform-origin: center bottom 0; transition: 0.4s;}
/*= effect-8 css end =*/

/*= effect-5 css =*/
.effect-5{max-height: 289px; min-height: 300px; overflow: hidden; position: relative; border-radius:10px; background-color: #f9f9f9; }
.effect-5 h3{line-height: 35px; text-align:center; font-size: 16px; font-family:verdana; font-weight:bold; color:#fff; margin: 30px 0 20px;}
.effect-5 .member-info { background-color: #f9f9f9; position: absolute; 100%;  top: 0; left: 0; height: 82px; transition: 0.3s; z-index: 2;}
.effect-5 .member-info p{ width:90%; line-height:25px; margin:0 auto;}
.effect-5 .member-image{margin-top: 82px; float: left; width: 100%; position: relative; transition: 0.3s; z-index: 4; background-color: #f9f9f9;}
.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 #f9f9f9; 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 =*/