.titulo-starkti{
	font-family: 'Passion One', cursive;
}
body{
	background-color: #1C1C1C;
	font-family: 'Heebo', sans-serif;
}

.link a{
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.link a:hover{
  text-decoration: none;
}
.backColor{
	background-color: #FFBF00;
}

.top20{
	padding-top: 20px;
}
.list-info{
	list-style: none;
}

.textos{
  color: #1C1C1C;
  font-weight: 600;
}
.texto-contact{
	color: #ccc;
	font-size: 17px;
}
.titulo-contact{
  font-family: 'Passion One', cursive;
  color:#ccc;
  font-size: 24px;
}
footer{
	margin: 0;
}

#clientes{
  min-height: 300px;
  background-color: #fff;
}

#clientes h3{
    padding-top: 20px;
    margin-bottom: 20px;
    margin-left:13%;
    font-size: 35px;
    font-weight: 700;
}

#servicios{
  min-height: 300px;
background: url('https://waarket.com/wp-content/uploads/2015/12/Tendencias-2016-en-Dise%C3%B1o-Gr%C3%A1fico.jpg');
background-repeat: no-repeat;
background-size: cover;

}

.logo
{
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
   -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  cursor:pointer;
}


.logo:hover
{
  filter: none; /* IE6-9 */
  -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
}
/*Contact sectiom*/
.content-header{
 font-family: 'Passion One', cursive;
  color:#1C1C1C;
  font-size: 45px;
}

.section-content{
  text-align: center; 

}
#contact{
padding-top: 30px;
width: 100%;
background: rgba(254,254,254,1);
background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 70%, rgba(226,226,226,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,254,254,1)), color-stop(70%, rgba(219,219,219,1)), color-stop(100%, rgba(226,226,226,1)));
background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 70%, rgba(226,226,226,1) 100%);
background: -o-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 70%, rgba(226,226,226,1) 100%);
background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 70%, rgba(226,226,226,1) 100%);
background: linear-gradient(to bottom, rgba(254,254,254,1) 0%, rgba(219,219,219,1) 70%, rgba(226,226,226,1) 100%);
  color : #fff;    
}
.contact-section{
  padding-top: 40px;
}
.contact-section .col-md-6{
  width: 50%;
}

.form-line{
  border-right: 1px dotted #B29999;
}

.form-group{
  margin-top: 10px;
}
label{
  font-size: 1.3em;
  line-height: 1em;
  font-weight: normal;
}
.form-control{
  font-size: 1.3em;
  color: #080808;
}
textarea.form-control {
    height: 135px;
   /* margin-top: px;*/
}

.btn-default:hover{
    color: #ccc;
}
.btn-default{
font-weight: 600;
background: rgba(76,76,76,1);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
}

.submit{
  font-size: 1.1em;
  float: right;
  width: 150px;
  background-color: transparent;
  color: #fff;

}


/*-------- */

.serviceBox{text-align: center;margin-top: 60px;position: relative;z-index: 1; margin-bottom: 21px;}
.serviceBox .service-icon{width: 78px;height: 78px;border-radius:3px;background: #fff;margin: 0 auto;position: absolute;top: -34px;left: 0;right: 0;z-index: 1;transition: all 0.3s ease-out 0s;}
.serviceBox:hover .service-icon{transform: rotate(45deg);}
.serviceBox .service-icon span{display: inline-block;width: 60px;height: 60px;line-height: 60px;border-radius:3px;background: #727cb6;font-size: 30px;color: #fff;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;transition: all 0.3s ease-out 0s;}
.serviceBox .service-icon span i{transition: all 0.3s ease-out 0s;}
.serviceBox:hover .service-icon span i{transform: rotate(-45deg);}
.serviceBox .service-content{background: #fff;border: 1px solid #e7e7e7;border-radius: 3px;padding: 55px 15px;position: relative;}
.serviceBox .service-content:before{content: "";display: block;width: 80px;height: 80px;border: 1px solid #e7e7e7;border-radius: 3px;margin: 0 auto;position: absolute;top: -37px;left: 0;right: 0;z-index: -1;transition: all 0.3s ease-out 0s;}
.serviceBox:hover .service-content:before{transform: rotate(45deg);}
.serviceBox .title{font-size: 17px;font-weight: 500;color: #324545;text-transform: uppercase;margin: 0 0 25px 0;position: relative;transition: all 0.3s ease-out 0s;}
.serviceBox:hover .title{color: #727cb6;}
.serviceBox .description{font-size: 14px;font-weight: 500;line-height: 24px;margin-bottom: 0;}
.serviceBox .read-more{display: block;width: 40px;height: 40px;line-height: 38px;border-radius: 50%;background: #fff;border: 1px solid #e7e7e7;font-size: 14px;color: #c4c2c2;margin: 0 auto;position: absolute;bottom: -17px;left: 0; right: 0;transition: all 0.3s ease-out 0s;}
.serviceBox .read-more:hover{border: 1px solid #727cb6;color: #727cb6;text-decoration: none;}
.serviceBox.green .service-icon span{ background: #009BDB; }
.serviceBox.blue .service-icon span{ background: #009BDB; }
.serviceBox.orange .service-icon span{ background: #009BDB; }
.serviceBox.green:hover .title{ color: #008b8b; }
.serviceBox.blue:hover .title{ color: #3498db; }
.serviceBox.orange:hover .title{ color: #e67e22; }