@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Fanwood+Text');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body{
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	}

.home_client_img_bottom_space {
  padding-bottom: 20px;
}

.our_expertise_single_point {
  padding-bottom: 20px;
}

.our_expertise_start_summery {
  font-size: 14px;
  padding-bottom: 25px;
}
.our_expertise_heading {
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  padding-top: 20px;
  border-top: 1px dashed #616161;
}
.topnav {
  overflow: hidden;
  background-color: #1ec3d7;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none !important;
  font-size: 18px;
  text-transform: uppercase;
}

.topnav a:hover {
  background-color: #dae0d6;
  color: #202020;
}

.topnav a.active {
  background-color: #dae0d6;
  color: #000;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}


.cuadro_intro_hover{
    	padding: 0px;
		position: relative;
		overflow: hidden;
		height: 200px;
		border:1px solid #ccc;
	}
	.cuadro_intro_hover:hover .caption{
		opacity: 1;
		transform: translateY(-150px);
		-webkit-transform:translateY(-150px);
		-moz-transform:translateY(-150px);
		-ms-transform:translateY(-150px);
		-o-transform:translateY(-150px);
	}
	.cuadro_intro_hover img{
		z-index: 10;
	}
	.cuadro_intro_hover .caption{
		position: absolute;
		top:150px;
		-webkit-transition:all 0.3s ease-in-out;
		-moz-transition:all 0.3s ease-in-out;
		-o-transition:all 0.3s ease-in-out;
		-ms-transition:all 0.3s ease-in-out;
		transition:all 0.3s ease-in-out;
		width: 100%;
	}
	.cuadro_intro_hover .blur{
		background-color: #444;
		opacity:0.8;
		height: 300px;
		z-index: 5;
		position: absolute;
		width: 100%;
	}
	.cuadro_intro_hover .caption-text{
		z-index: 10;
		color: #fff;
		position: absolute;
		height: 300px;
		text-align: center;
		top:-20px;
		width: 100%;
	}

.services{
	padding:20px;
}

.services01{
	border:1px solid #777;
	background-color:#fff;
}

.services01:hover{
	border:1px solid #1ec3d7;
}

.service-image {
    position: relative;
    width: 100%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.service-image:hover .image {
  opacity: 0.5;
}

.service-image:hover .middle {
  opacity: 1;
}

.read-more-button {
  background-color: #1ec3d7;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}