@charset "utf-8";
  
  
  body{
	background-color:#f5f5f5;
	text-shadow:none;
	  
  }

  .mrnone{
	  margin:0px;
	  padding:0px;
  }
  
  img{
	  
	  margin:0px;
	  padding:0px;
	  
  }
  h1, h2, h3, h4, h5, h6{
	  line-height:0px;
	  
  }
  
  
  h1{
	  color:#ffffff;
	  font-family:hero-line;
	  font-size:50px;
	  text-transform:uppercase;
	  line-height:1em;
  }


   h1 span{
	  color:#ffffff;
	  font-family:hero-line-span;
	  font-size:50px;
	  text-transform:uppercase;
	  line-height:1em;
	  letter-spacing:.04em;
  }   
  
  h2{
	  color:#0a0b0c;
	  font-family:heading_2;
	  font-size:36px;
	  text-transform:uppercase;
	  letter-spacing:.04em;
	  padding:0px 0px 30px 0px;
  }
  
  h4{
	  color:#444444;
	  font-family:heading_4;
	  font-size:32px;
	  text-transform:uppercase;
	  letter-spacing:.08em;
	  padding:0px 0px 42px 0px;
  } 
  

  h5{
	  color:#444444;
	  font-family:heading_4;
	  font-size:24px;
	  text-transform:uppercase;
	  letter-spacing:.05em;
	  padding: 30px 0px 0px 0px;
	  margin: 0px;
	  
	  
  }
  
  p, li{
	  font-family:bodytext;
	  color:#5e5e5e;
	  font-size:16px;
	  line-height:2em;
	  letter-spacing:.03em;
  }
  
 .promo-text a{
	  font-family:main-nav;
	  background-color:#000000;
	  border:0px;
	  color:#FFFFFF;
	  text-transform:uppercase;
	  letter-spacing:.05em;
	  padding:12px 20px ;
	  
  }
  
 .promo-text a:hover{
	  text-decoration:none;
  }

  
	.padding_top{padding-top:100px ;}
	
	.padding_bottom{padding-bottom:100px  ;}
	
	.padding_left{padding-left:0px 0px 0px 100px ;}
	
	.padding_right{padding-right:0px 100px 0px 0px ;}	
	
	
	.margin_top{margin:100px 0px 0px 0px ;}
	
	.margin_bottom{margin:100px 0px 0px 0px ;}
	
	.margin_left{margin:100px 0px 0px 0px ;}
	
	.margin_right{margin:100px 0px 0px 0px ;}
  
.logo{
	padding:25px;
	background-color:#0a0b0c;
	border-bottom:1px solid #171819;
	
}  

  .logo-size{
	  width:100%;
	  height:80px;
	  /* background-color:#222; */
	  
  }
  
  .logo-size img{
	  width:auto;
	  height:100%;
	  margin: 0px auto;
}

  .nav-bg-color{
	  background-color:#0a0b0c;
	  
  }
  
  .custom-nav{	  
	  background-color:#0a0b0c;
	  border:0px;
	  border-radius:0px;
	  margin:0px auto;
	  padding:0px;
	  
  }

  
  .custom-nav .nav-pills li a{
	  color:#9c9c9c;
	  font-family:main-nav;
	  font-size:13px;
	  text-transform:uppercase;
	  letter-spacing:.1em;
	}
	
	.nav-center {
	  
	  margin:0px auto !important;
	  
	  padding:0px;
	  
	}
	
  .custom-nav .nav-pills li a:hover,
  .custom-nav .nav-pills li a:focus,
  .custom-nav .nav-pills li a.nav-active{
	  color:#FFFFFF;
	  background-color:inherit;
	  
  }
  
  .navbar-header .navbar-toggle {
	  border: none;
}
  
  .navbar-header button.navbar-toggle:hover, .navbar-header button.navbar-toggle:focus {
	  background-color: inherit;
}
    
	.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
	background-color: #999999 !important;
	
	}
	
  .navbar-header button.navbar-toggle:hover span{
	  background-color: white !important;
	  
	}
      
  .navbar-header button.navbar-toggle:focus span{
	  background-color: white !important;
	  
	}
  

  
  .hero{
	  width:100%;
	  height:585px;
	  /* border-bottom:1px solid #b6b6b6; */
	  /* background-color:#1c1d1e; */
	  background:#1c1d1e url("../images/home_hero_bg.jpg") no-repeat center center;
	  background-size:cover;
	  background-attachment:fixed;
}
/* about us CSS */
.about-hero{
	height:auto;	
	/* background:#FFFFFF url("../images/about_hero_bg.jpg") no-repeat center center; */
	background:#1c1d1e;
	/* border-bottom:1px solid #b6b6b6; */
	padding:120px 0px;
	background-size:cover;
	
}
  .aboutus{
	/* background:#FFFFFF url("../images/aboutus_bg.jpg") no-repeat -700px center; */
	/* background-size:content; */
	margin:0px auto;
		  
  }
  
  .aboutus-text{
	
	margin:0px auto;
	
  } 
  
  .about-text{
	  text-align:center;
	  
  }
  
  .hero-text{
	  padding:180px 0px 0px 0px ;
	  text-align:center;
  }  
  

  
  .promo{
	  background:#FFFFFF url("../images/promo_bg.jpg") no-repeat center center;
	  height: auto;
	  /* background-color:#e9e5d6; */
	  padding:50px 0px;
	  background-size:cover;
}

  .promo-text{
	  width:100%;
	  padding:30px 20px ;
	  background-color:rgba(255, 255, 255, .9); 
	  margin:0px auto ;
	  text-align: center;
}


  .promo-text h4{
	  color:#000000;
	  line-height: normal;
	  padding: 0px;
	  margin:0px;
  }
  .promo-text p{
	  color:#000000;
	  padding: 0px 0px 10px 0px ;
  }

  strong{
	  line-height:1.5em;
	  font-size:18px;
	  color:#404040;
	  
  }
  
  .folkbg{
	  background:#000000 url("../images/folk_bg.jpg") no-repeat center center;
	  background-size:cover;
	  padding:70px 0px;
	  background-attachment:fixed;
	  transition:all .9s ease-in-out;
  }
  
  .folkbg:hover{
	  background:#000000 url("../images/folk_bg.jpg") no-repeat center -100px;
	  background-size:cover;
	  padding:70px 0px;
	  background-attachment:fixed;
  }
  
  .folks{
	  padding:0px;
	  margin:0px auto;
	  
  }
	  
	.folk-text{	  
		  margin:5% 0% 5% 0% ;
		  padding:0px 80px 0px 130px;
		   /* background-color:rgba(0, 0, 0, .8);   */
	}

	.folk-text h5, .folk-text p {
		  color:white;		
	}
	.folk-text h5 {
		padding:0px 0px 20px 0px;
		font-size:30px;
		line-height:normal;
	}
  
	.folk_pic{
		margin:15px 0px ;
		box-shadow: 0px 2px 5px #000000;
		background-color:#FFFFFF;
		text-align:center;
		transition:all .5s ease-in-out;
	}

	.folk_pic img{
		margin:0px auto;
	}
	
	.folk_pic:hover{
		transform: translate(0px, -2px);
		box-shadow: 0px 8px 13px #000000;
		
	}
  
  .align-center{
	  margin:0px auto;
	  padding:0px;
  }
  
  .overview{
	  
	
  }
  
  .overview-text{
	  padding:40px;
	  text-align:center;
	  
  }
  
  .overview-text > p > span{
	  font-size:22px;
	  display:block;
	  width:80%;
	  margin:0 auto;
	  padding:20px;
	  color:#333333;
  }

  
  .overview-text > p > span::before{
	  content:open-quote;
	  font-size:350px;
	  color:#ebebeb;
	  display:block;
	  width:80%;
	  margin:0 auto;
	  padding:0px;
	  position:relative;
	  top:30px;
	  left:0;	  
	  
	  
  }

  
    .overview-text p::after{
	  background:url("../images/head_bdr_img.jpg") center -1px;
	  content: "";	  
	  background-repeat:no-repeat;	  
	  width:500px;
	  height:3px;
	  border-bottom:1px solid #cccccc;
	  display:block;
	  margin:0px auto  ;
	  position:relative;
	  top:50px;
	  left:0;
  }
  
  .overview-img{
	  padding:0px 0px ;
	  margin:0px;
	  
  }
  
   .overview img{
	  width:100%;
	  max-height:auto;
  }

	.services-mb, .services-br{
		
		background: #fcfcfc url("../images/service_bg.png") no-repeat left 25%;
		background-attachment:fixed;
	}
	
	.services-br{
		
		background: #fcfcfc url("../images/service_bg.png") no-repeat right 150%;
		background-attachment:fixed;
	}

	
	.services-wb{
		border-bottom:1px solid #f1f1f1;
		border-top:1px solid #f1f1f1;
		background-color:#f5f5f5;
		
	}

	
	.services-mb h4, 
	.services-wb h4, 
	.services-br h4 {
	
		border-bottom:1px solid #cccccc;
		background: url("../images/head_bdr_img.jpg") no-repeat left 39px; 
		transition:all .5s ease-in-out;
	}
	
	.services-mb:hover h4,
	.services-wb:hover h4, 
	.services-br:hover h4{
		margin-top:1px ;
		color:#000000;

	}
	
	

	.services-mb p,
	.services-wb p,
	.services-br p{
		padding:10px 0px 0px 0px ;
		
	}

	.mb-design,
	.wb-design,
	.br-design{
		padding:50px 0px ;
	}
	

	
	.wb-design img{
		float:right;
	}
	
	
	.mb-design-text,
	.wb-design-text,
	.br-design-text {
		padding:100px 0px 0px 0px ;
	}
	
	.mb-design-text .more,
	.wb-design-text .more,
	.br-design-text .more{		
		margin: 20px 0px 0px 0px;
		color:#666666;
		font-size:11px;
		font-family:main-nav;
		text-decoration:none;
		text-transform:uppercase;
		display: inline-block;
		transition:all .3s ease-in-out;
		letter-spacing:.05em;
	}
	
	.mb-design-text .more::after,
	.wb-design-text .more::after,
	.br-design-text .more::after{		
		 content: "→";
		 font-size:20px;
		 font-weight:bold;
		 padding:0px 0px 0px 15px ;
		 opacity:0;
		 transition:all .3s ease-in-out;
	}
	
	.mb-design-text .more:hover::after,
	.wb-design-text .more:hover::after,
	.br-design-text .more:hover::after{		
		 /* content: url("../images/link_img.jpg"); */
		content: "→";
		 font-size:20px;
		 font-weight:bold;
		 padding:0px 0px 0px 10px ;
		 opacity:1;
		 
	}
	
	
	
	.mb-design-text .more:hover,
	.wb-design-text .more:hover,
	.br-design-text .more:hover{		
		margin: 20px 0px 0px 0px;
		color:#000000;
		text-decoration:none;
		opacity:1;		
	}
	
/* services page CSS start */

	.service-hero{
	height:auto;
	/* background:#FFFFFF url("../images/services_hero_bg.jpg") no-repeat center center;  */
	background:#1c1d1e;
	background-size:cover;
	border-bottom:1px solid #b6b6b6;
	padding:120px 0px;
	background-attachment:fixed;
	}
	.service-hero-text{
		text-align:center;
	}
	
	.portfolio-hero{
	height:auto;
	/* background:#FFFFFF url("../images/portfolio_hero_bg.jpg") no-repeat center center; */
	background:#1c1d1e;
	background-size:cover;
	border-bottom:1px solid #b6b6b6;
	padding:120px 0px;
	}
	
	
	.portfolio-hero-text{
		text-align:center;
	}
	
	.service-uidesign{}
	
	.uidesign-text{}
	.uidesign-text ul {
		padding:0px;
		
	}
	
	.uidesign-text ul li{
		font-size:15px;
		font-weight:bold;
		list-style:disc;
		padding:0px 0px 5px 0px ;
		margin:0px 0px 0px 15px ;
		transition:all .3s ease-in-out;
		
	}
	
	.uidesign-text ul li:hover{
		list-style:circle;
		color:#353535;
		padding:0px 0px 5px 10px ;
		cursor:context-menu;
	}
	

	.highlight{
		font-family:heading_5_highlight;
		line-height:normal;
		text-transform: inherit;
		padding:0px 0px 0px 20px ;
		margin:40px 0px 20px 0px;
		width:75%;
		border-left:3px solid #000000;
		transition:all .5s ease-in-out;
	}
	
	.service-uidesign .row:hover .highlight, .service-website .row:hover .highlight{
		
		/* color:#4a68ec; */
		border-left:3px solid #4a68ec;
		
	}
	
	
	.service-website{		
		background: url("../images/service-bg.jpg") no-repeat center top; 
		background-attachment:fixed;
		background-size:cover;
	}
	
	.website-img{
		padding:8% 6%  ;
		
		
	}
	
	
	.website-text{
		background-color:white;
		padding:50px 100px 50px 50px;
		box-shadow: 0px 8px 13px rgba(0, 0, 0, .05);
		
	}
	
/* services page CSS end */

	/* portfolio page CSS start */
	
	.portfolio{
		
		
	}
	
	.portfolio .thumbnail {
    display: block;
    padding: 0px;
    margin-bottom: 20px;
    border: 0px;
	background-color: inherit;
	margin:25px 0px;
	
	
    }	
	.portfolio .thumbnail:hover h5 {
    	color:#000000;
	
    }
	
	.portfolio .caption{
		padding:20px 0px 0px 0px ;
		
		
	}
	.portfolio .caption a{
		font-family: main-nav;
		background-color: #699c0a;
		border: 0px;
		color: #FFFFFF;
		text-transform: uppercase;
		letter-spacing: .05em;
		padding: 12px 20px;
		display: inline-block;
		margin: 20px 0px 10px 0px;
		border-bottom: 3px solid #568303;
		transition: all .5s ease-in-out;
	}
	.portfolio .caption a:hover{
		text-decoration: none;
		background-color: #507905;
		border-bottom: 3px solid #2c4204;
	}
	.portfolio .thumbnail h5{
		padding:0px;
		line-height:normal;
		color:#444444;
		transition:all .5s ease-in-out;
	}
	
	
	.portfolio .thumbnail img{
		
		transition:all .3s ease-in-out;
	}
	
	.portfolio .thumbnail img:hover{
		box-shadow: 0px 10px 13px #d1d1d1;
		transform:scale(1.05);
	}
	
	
	
	/* portfolio page CSS end */
	
	
	
	.section-title{
		padding:0px 0px 30px 0px !important;
		margin:0 auto;
		text-align:center;
	}
	
	.key-succ{
		
		margin-bottom:100px;
	}
	
	.keys{
	  display: flex;
	  justify-content: space-between;
	  
	}
	
	
	.key_1, .key_2, .key_3{
		width:200px;		
		background-color: #FFFFFF;
		padding:90px 50px 90px 50px ;
		flex:1;
		margin: 0px 0px;
		box-shadow:0px 5px 5px #ebebeb; 
		text-align: center;
		overflow:hidden;
		position:relative;
		transition:all .3s ease-in;
	}
	
	/* .key_1:hover, .key_2:hover, .key_3:hover{
		 transform:translate(0px, -10px);
		
	}  */

	.key_1:hover h5, .key_2:hover h5, .key_3:hover h5{
		color:#000000;
		
		
	}	
	
	.key_1:hover span, .key_2:hover span, .key_3:hover span{
	margin:0px 0px 0px 0px;	
	color:#e6e6e6;
		
	}
	
	
	
	.key_2{
		margin: 0px 40px ;
		
	}
	
	.keys h5{
		color:#444444;
		text-align:center;
		padding: 20px 0px 20px 0px;
		margin: 0px;
		transition:all .5s ease-in;
		position:relative;
		z-index:1000;
	}
	
	.keys span{
		position:absolute;
		top:-20px;
		left:-90px;
		color:#f7f7f7;
		font-size:300px;		
		transition:all .9s ease-in-out;
	}
	
	
	
	.ftr{
		background-color:#000000;
		padding:20px 0px;
	}
	
	.ftr .row .col-md-6{
		
		padding:0px;
		margin:0px;
		
	}
	
	.proc-container {}
	
	.proc{
		width: 24%;
		text-align: center;
		padding:80px 30px  ;
		margin:10px 0px 0px 10px ;
		background-color:#FFFFFF;
		box-shadow:0px 5px 5px #ebebeb; 
		display: inline-block;
		
		
	}

	.proc h5{
		color:#444444;
		line-height:normal;
		transition:all .3s ease-in;
		
	}
	
	.proc-container span{
		font-size:40px;
		color: #444444;
		transition:all .5s ease-in-out;
	}
	
	.proc:hover h5, .proc:hover span{
		
		color: #000000;
		
	}
	
	.proc .step{
		font-family: heading_4;
		font-size: 290px;
		position: relative;
		top: 100%;
		left: -56%;
		margin: 0px;
		padding: 0px;
		line-height: 0px;
		font-weight: bold;
		color: #FFFFFF;
		display:none;
		
	}
	
	
	
	footer ul{
		padding:0px;
		margin:0px auto;
		
	}
	
	footer ul li, .contact-us ul li{
		list-style:none;
		display:inline-block;
		padding:0px;
	}
	
	footer ul li a{
		font-family:footer-links;
		text-transform:uppercase;
		font-size:12px;
		letter-spacing:.05em;
		color:#616161;
		padding:10px 20px 10px 0px ;
		margin:0px 10px 0px 0px ;
	}
	
	footer ul li a:hover{
		color:#CCCCCC;
	}
	
	footer ul li a:focus{
		color:#616161;
	}
	
	.contact-us ul li a, .contact-us ul li a:focus {
		
		color:#999999;
	}
		
	.contact-us{
		
		color:#999999;
	}
	.contact-us ul{
		padding:0px;
		margin:0px;
		text-align: right;
	}
	
	
	.contact-us ul li{
		font-size: 14px;
		letter-spacing:.05em;
		padding:0px 0px 0px 20px ;
	}
	
	.contact-us ul li span{
		padding:0px 7px 0px 0px ;
		
	}
		
	
  
  /* MEDIA QUERY FOR SCREEN WIDTH 320 */
  
  @media  (min-width: 320px)  and  (max-width: 767px){
	
	  p{
		  text-align:left;
		  
		  
	}
	
	  h1, h2, h3, h4, h5, h6{
	  line-height:normal;
	  
  }
	
	h4, h5{
		padding: 0px 0px 20px 0px;
		
	}
	  
		.logo{
			padding:10px;
			background-color:#0a0b0c;
			border-bottom:1px solid #171819;
			
		}  

		  .logo-size{
			  max-width:100%;
			  height:auto;
			  padding:10px;
		}
		  
		  .logo-size img{
			  max-width: 100%;
			  height: auto;
			  margin: 0px auto;
		}

	

	.nav-bg-color .col-md-4{
		padding: 0px;
		margin:0px;
	}
	
	.nav-pills .navbar-collapse{
		
		border:none;
	}
	
	.custom-nav .nav-pills li{
	  padding: 5px 0px;
	  margin:0px;
	  
	}
	
	.custom-nav .nav-pills li a{
	  padding: 10px 0px;
	  text-align:left;
	}
	
	.custom-nav ul.nav-pills{
	  padding: 10px 0px;
	  margin:0px;
	}
	
	.padding_top{padding-top:40px;}
	
	.padding_bottom{padding-bottom:60px;}
	
	.padding_left{padding-left:0px;}
	
	.padding_right{padding-right:0px;}
	
	.margin_top{margin:30px 0px 0px 0px ;}
	
	.margin_bottom{margin:0px 0px 0px 0px ;}
	
	.margin_left{margin:0px 0px 0px 0px ;}
	
	.margin_right{margin:0px 0px 0px 0px ;}
	
	
   .hero{
	  width:100%;
	  height:auto;
	  border-bottom:1px solid #b6b6b6;
	  padding: 70px 0px  ;
	  
  }
	
	
	
	
	.hero-text {
    padding: 20px;
	
	}
	  
   .hero-text h1, .hero-text h1 span, .about-text h1, .about-text h1 span, .service-hero-text h1, .service-hero-text h1 span, .portfolio-hero-text h1, .portfolio-hero-text h1 span{
	  font-size:30px;
	  padding:0px;
	  margin:0px;
  }
  
  .aboutus-text, .website-text, .uidesign-text{	  
	  text-align:left;
	  padding:10px 0px;
	  position:relative;
	  margin:0px auto;
	  
  }  
  
  .aboutus img{
	 margin-bottom: 0px;
	  
  }
  
  	.overview .row, .section-title .row, .ftr .row{
		
		padding:0px;
		margin:0px;
	}
	
  .overview-text {
    padding: 0px;
	text-align:left;
	
	}
	
  
  .overview-text > p > span{
	  font-size:22px;
	  display:block;
	  width:100%;
	  margin:0 auto;
	  padding:0px 0px 20px 0px ;
	  color:#333333;
  }

	
	  .overview-text > p > span::before{
	  content:"";
	  font-size:300px;
	  color:#ebebeb;
	  display:block;
	  width:100%;
	  margin:0 auto;
	  padding:0px;
		position: absolute;
		top: 11%;
		left: -10%;
		z-index: -100;
	  
	  
  }

  
     .overview-text p::after{
	  background:url("../images/head_bdr_img.jpg") center -1px;
	  content: "";	  
	  background-repeat:no-repeat;	  
	  width:100%;
	  height:3px;
	  border-bottom:1px solid #cccccc;
	  display:block;
	  margin:0px auto  ;
	  position:relative;
	  top:30px;
	  left:0;
  }
  
  
  .overview-text h2, .aboutus-text h2, .uidesign-text h2, .website-text h2 {
	  font-family:heading_2;
	  font-size:32px;
	  padding:0px ;
	  
	}
  
  .section-title {
    padding: 0px 15px 0px 15px !important;


}

	.section-title h2, .section-title p{
		text-align:left;
		 padding:0px;
		
	}
  
	.services-wb{}
	
	
	.services-mb, .services-wb, .services-br {
		margin:20px 15px;
		background: #FCFCFC;
	}

	.services-mb h4, .services-wb h4, .services-br h4 {
    border-bottom: 1px solid #cccccc;
    background: url("../images/head_bdr_img.jpg") no-repeat left 56px;
	
	}
	
	.promo{
		width:100%;
		height:auto;
		background: #FFFFFF url("../images/promo_bg.jpg") no-repeat center -200px;
	}
	
	.promo-text {
    width: auto;
	padding:20px ;
	margin:0px 20px ;
	
	
    }
	
	.promo-text p{
    text-align:center;
	padding:10px 0px 10px 0px ;
	line-height:24px;
	}
	
	.promo-text a{
		margin-bottom:5px;
		display: inline-block;
	}
	
	
	.mb-design,
	.wb-design,
	.br-design{
		padding: 20px 0px ;
		
	}
	
	
	.wb-design img{
		float:none;
	}
	
	.mb-design-text,
	.wb-design-text,
	.br-design-text
	{	width: 100%;
		padding: 10px;
	}
	
	.img-center{
		margin:0px auto;
	}
	
  
  .keys{
	 flex-direction: column;
	 display: flex;
	 justify-content: space-between;
	 padding: 0px;
	  
	}
	
	.keys span{
		position:absolute;
		top:-20px;
		left:-90px;
		color:#f7f7f7;
		font-size:200px;		
		transition:all .9s ease-in-out;
	}
	
		.key-succ{
		
		margin-bottom:50px;
	}
	.keys h5{
		text-align:center;
		padding: 15px 0px 15px 0px;
		margin: 0px;
	}
		
	.key_1, .key_2, .key_3{
		width:100%;	
		padding:30px 0px;
		margin:10px auto;
		 box-shadow: 0px 5px 8px #ebebeb;
		
		
	}
	
	footer ul li{
		padding:5px 0px 5px 0px ;
		display:block;
	}
  
  
	footer ul li a{
	padding:5px 200px 5px 0px ;
	
	}
  
  	.contact-us ul{
		text-align:left;
		margin:20px 0px 0px 0px ;
		padding:20px 0px 0px 0px ;
		border-top:1px solid #333;
	}
	
	.contact-us ul li{
		font-size:15px;
		padding:5px 0px 5px 0px ;
	}
	
	
	.folk-text{	  
		  margin:0px;
		  padding:0px 20px ;
		  
	}
	
	.folk-grp{
		margin:0px 0px ;
		padding:0px;
	}
	
	
	.folk_pic{
		margin:10px 0px ;
		box-shadow: 0px 2px 5px #000000;
		transition:all .2s ease-in-out;
	}
	
	.folk_pic:hover{
		transform: translate(0px, -3px);
		box-shadow: 0px 8px 13px #000000;
		
	}
	
	.process {
		padding: 0px ;
	}
  
	.proc-container{
		width:100%;
		padding:0px ;
		margin:0px auto;
	}
	
	.proc{
		width: auto;
		text-align: center;
		padding:20px  ;
		margin:10px 0px 10px 0px ;
		background-color:#ffffff;
		box-shadow: 0px 2px 5px #ebebeb;
		display: block;
	}
	.proc h5{
		font-size:20px;
		padding: 10px 0px 0px 0px;
	}
	.proc span{
		font-size:25px;
		
	}

	.service-website{		
		background: url("../images/service-bg.jpg") no-repeat center top; 
		background-attachment:fixed;
		background-size:cover;
	}
	
	.highlight {
    width: 100%;
    font-size: 22px;
	padding: 0px 0px 0px 20px;
	margin: 20px 0px 20px 0px;
		
	}
	
	.website-text{
		padding:20px 15px ;
		
	}
	
}
  
  @media  (min-width: 768px)  and  (max-width: 991px){
	  
	  .overview-text{
		  
		  text-align:center;
	  }
	  
	  
  .overview-text > p > span{
	  font-size:22px;
	  display:block;
	  width:90%;
	  margin:0 auto;
	  padding:0px 0px 20px 0px ;
	  color:#333333;
  }

	
	  .overview-text > p > span::before{
	  content:"";
	  font-size:300px;
	  color:#ebebeb;
	  display:block;
	  width:90%;
	  margin:0 auto;
	  padding:0px;
	  position:relative;
	  top: 30px;
	  left: 0;
		
	  
	  
  }

	    
	.proc-container{
		width:100%;
		padding:0px ;
		margin:0px auto;
	}
	
	.proc{
		width: 32.2%;
		text-align: center;
		padding:20px  ;
		margin:10px 0px 10px 0px ;
		background-color:#FFFFFF;
		box-shadow: 0px 2px 5px #ebebeb;
		display:inline-block;
	}
	.proc h5{
		font-size:20px;
		padding: 10px 0px 0px 0px;
	}
	.proc span{
		font-size:25px;
		
	}
	  
	  
	  
  }