/* CSS Document */
.client1_banner{
    float: left;
    overflow: hidden;
    width: 100%;
}
.client1_banner_bgcolor {
    background-color: #8bc34a !important;
}
.backround_portal {
    background-image: url("../images/3.png");
}
.skew {
    min-height: 170px;
    position: relative;
}
.skew-bottom {
    padding-bottom: 170px;
}
.image_portal {
    background-attachment: fixed !important;
    background-position: 50% 100% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.shape{
height: 170px;
left: 0;
overflow: hidden;
padding-left: 0 !important;
padding-right: 0 !important;
position: absolute;
transform: skewY(-5deg);
width: 100%;
z-index: 1;
}
.shape_color{ background-color: #fff;}
.shape_bottem{
    bottom: -85px;
	float: left;
}
.client1_banner_heard{ width: 100%; float:left; padding:9% 0% 0% 22%; }
.client1_banner_heard h3{ color: #fff; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:25px;}

.client1{ float: left; overflow: hidden; width: 100%;}
.client1_common  { width: 1170px;}
.client1_left{  float: left; width:74%;}
.client1_left_full{float: left; padding-bottom: 70px; width: 100%;}
.client1_reight{
    width: 25%;
	float:right;
} 
.clientlist_hole{  float: left;  width: 100%;  padding-left: 6%;}
.client1_left_full_h3{ color: #ff0000;  font-size:21px; padding-left: 6%;  }
#f1_container {
  position: relative;
  margin: 0% 1.4%;
  width: 210px;
  height: 195px;
  z-index: 1;
  overflow:hidden;
  float: left;
  
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 98%;
  height: 73%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
  border: 1px solid #c1c1c1;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face img{
  width: 100%;
  height: 100%;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
}
.clientcolor1{   background-color: #05c3f9;}
.clientcolor2{   background-color: #8bc34a ;}
.clientcolor3{   background-color: #4abfc3;}
.clientcolor4{   background-color: #f90505;}

.clientcolor_h3{   color: #ffffff;}
.clientcolor_p{   color: #000000;}
@media only screen and (min-width: 960px) and (max-width: 1169px) {
.client1_common  {  width: 100%;  padding: 0 1%;}
.web_designe2_reight{   width: 29%;} 
.web_designe2_left {    padding: 0 1%;}
.client1_left {
    float: left;
    width: 72%;
}
.clientlist_hole {
    float: left;
    padding-left: 6%;
    width: 100%;
}
.client1_reight {
    float: right;
    width: 28%;
}
#f1_container {
    float: left;
    height: 185px;
    margin: 1% 0.9%;
    overflow: hidden;
    position: relative;
    width: 200px;
    z-index: 1;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.client1_common  {  width: 100%;  padding: 0 1%;}
.web_designe2_reight{   width: 29%;} 
.web_designe2_left {    padding: 0 1%;}
.client1_left {
    float: left;
    width: 100%;
}
#f1_container {
    float: left;
    height: 185px;
    margin: 1% 1.4%;
    overflow: hidden;
    position: relative;
    width: 208px;
    z-index: 1;
}
.client1_reight { width: 100%;  padding: 0 5%;}
.header_in{ height:0px;}
.client1_banner_heard{ width: 100%; float:left; padding:11% 0 0 27%; text-align:center; }
}
@media only screen and (min-width: 620px) and (max-width: 767px) {
.client1_common  {  width: 100%;  padding: 0 1%;}
.web_designe2_reight{   width: 29%;} 
.web_designe2_left {    padding: 0 1%;}
.client1_left {
    float: left;
    width: 100%;
}
.client1_reight { width: 100%;  padding: 0 5%;}
#f1_container {
    float: left;
    height: 135px;
    margin: 1% 0.7%;
    overflow: hidden;
    position: relative;
    width: 194px;
    z-index: 1;
}
.clientlist_hole {
    float: left;
    padding-left: 0%;
    width: 100%;
}
.header_in{ height:0px;}
.client1_banner_heard{width: 100%; float:left; padding:16% 0 0 44%; text-align:center; }

}
@media only screen and (min-width: 481px) and (max-width: 619px) {
.client1_common  {  width: 100%;  padding: 0 1%;}
.web_designe2_reight{   width: 29%;} 
.web_designe2_left {    padding: 0 1%;}
.client1_left {
    float: left;
    width: 100%;
}
.client1_reight { width: 100%;  padding: 0 5%;}
.header_in{ height:0px;}
.client1_banner_heard{width: 100%; float:left; padding:16% 0 0 44%; text-align:center;}

}
@media only screen and (max-width: 480px) {
.client1_common  {  width: 100%;  padding: 0 1%;}
.web_designe2_reight{   width: 29%;} 
.web_designe2_left {    padding: 0 1%;}
.client1_left {
    float: left;
    width: 100%;
}
.client1_reight { width: 100%;  padding: 0 5%;}
.header_in{ height:0px;}
#f1_container {
    float: left;
    height: 106px;
    margin: 1% 1.4%;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 143px;
    z-index: 1;
}
.clientlist_hole {
    float: left;
    padding-left: 0%;
    width: 100%;
}
.header_in{ height:0px;}
.client1_banner_heard{width: 100%; float:left; padding:63% 0 0 0%; text-align:center;}
.skew-bottom {   padding-bottom: 89px;}
.logo_center{ text-align:center  !important; float: left;}
}