html {font-size: 62.5%;} /* reset font-size to 10px  */
*, *:before, *:after {margin:0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*:focus {outline:0;}
img {border: 0; vertical-align: bottom;}
table {border-collapse: collapse; border-spacing: 0;}
.trans, a {-webkit-transition: all ease 0.2s; -o-transition: all ease 0.2s; transition: all ease 0.2s;}
a {text-decoration: none;}
/* end reset */
body {font: 1.6rem/1.4 'Raleway', sans-serif; color: #4d4d4d;}

/* comodines*/
.maxw {width: 100%; max-width: 1200px; margin: auto;}
.parrafo {margin-bottom: 20px;}
/* padding de contenedores */
.plite {padding: 50px 0;} .pmedium {padding: 80px 0;}
.plarge {padding: 120px 0;} .ptop {padding: 150px 0 0;}
.plr {padding-left: 45px; padding-right: 45px}
.pl20 {padding-left: 20px;} .pr20 {padding-right: 20px;}
.fYellow {color: #eec82d;}
.fRed {color: #b60111;}
.fwhite {color: #fff;}

.tcenter {text-align: center;} .tright {text-align: right;}
.tleft {text-align: left;} .tjustify {text-align: justify;}
.img100, .w100 {width: 100%;} /* width 100% */

/* estilo general para botones */
.btn {
	display: inline-block; padding: 15px 40px; margin: 20px 0;
	overflow: hidden; position: relative; z-index: 1;
	border-style: solid; border-width: 1px; text-align: center;
	min-width: 228px;
}
.btn:before {
	content: ""; position: absolute; width: 0; height: 350px;
	top: 0; bottom: 0; left: -5%; right: 0; margin: auto;
	z-index: -1; transform: rotate(35deg); transition: all ease .2s;
}
.btn1 {border-color: #4d4d4d; color: #4d4d4d;}
.btn1:hover {color: #fff;}
.btn1:hover::before {background: #b60111; width: 110%;}

.btn2 {border-color: #fff; color: #fff;}
.btn2:hover {color: #b60111;}
.btn2:hover::before {background: #fff; width: 110%;}

/* -------------- */
header {width:100%;}

.next:before { /* regula alto de anclas con menu fixed */
	display: block; content: " ";
    margin-top: -53px; height: 53px;
    visibility: hidden;
}
/* títulos para bloques home */
.titleh1 {font-size: 2.6rem; color: #b60111; font-weight: 700;}
.titleh3 {font: 2.5rem Arial;}
.introblock p {font-size: 1.8rem;}

.titleblock h1 {font-size: 3.3rem;}
/* web home */
.web-bg {
	background: url(../img/bg-webhome.jpg) no-repeat center top;
	background-size: cover;
}
.titlewebHome {position: relative; padding-top: 15px;}
.titlewebHome:before {
	position: absolute; top: 0; left: 0;
	content: ""; width: 75px; height: 8px; background: #b60111;
}
.webHome h1 {font-size: 2.5rem; font-weight: 400;}
.webHome h2 {font-size: 5.3rem; line-height: 1; color: #b60111; margin-bottom: 15px;}
.webHome p {text-transform: uppercase; font-weight: 700;}
.webHome ul {margin: 0 0 0 20px; padding: 0 20px 0 0; color:  #b60111;}
.webHome ul li {margin: 10px 0;}
.webHome ul li span {color: #4d4d4d;}
.webHome .item:first-child {order: 2;}
.weblist {padding: 20px 0;}

/* planes home */
.plans {
	max-width: 342px;
	text-align: center; background: #ccc; 
	padding: 30px; color: #fff; background: #333;
}
.planIco {margin-bottom: 20px;} 
.plans h2 {font-size: 2.2rem; font-weight: 400; color: #eec82d;}
.plans h1 {font-size: 5rem; color: #eec82d;}
.plans a {background: #b60111; border-color: #b60111; font-weight: 700;}

/* diseño home */
.designbg {background: #f2f2f2;}
.dedigncontent {padding: 30px 0;}
.designitem {max-width: 320px;}
.designbox {text-align: center; color: inherit;}
.designbox h2 {color: #b60111; font-size: 1.6rem; margin-bottom: 12px;}
.designbox p {font-size: 1.4rem;}
.iconsbox {
	width: 200px; height: 200px;
	/*border: 2px solid #2b2b2b;
	border-radius: 50%; margin: 15px auto;*/
	-webkit-transition: all ease .2s;
	-o-transition: all ease .2s;
	transition: all ease .2s;
	box-shadow: inset 0 0 0px 0px #fff;
}
.designIcos {
	width: 200px; height: 200px; overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
}
.designIco {background-image: url(../img/ico-design.png);}
.imgIco {background-image: url(../img/ico-corporativa.png);}
.comunityIco {background-image: url(../img/ico-community.png);}

/* nosotros home */
.nosotros-bg {
	background: url(../img/nosotros-home-bg.jpg) no-repeat center top;
	background-size: cover; color: #fff;
}
.nosotrosblock h2 {font-size: 1.6rem; margin: 20px 0;}
.nosotrosblock ul li {margin-left: 20px;}
/* hosting home */
.hostingbg {
	background: url(../img/hosting-bg.jpg) no-repeat center top;
	background-size: cover;
}
.hostingblock {max-width: 640px; margin: auto; text-align: center;}
.hostingblock h2 {
	font-size: 5.6rem; font-weight: 700; border-bottom: 1px solid #4d4d4d; 
	line-height: 1; padding-bottom: 5px;
}
.hostingblock h2 span {color: #b60111;}
/* bloque de otros servicios home */
.servicesblock {padding: 20px 0;}
.services h1 {text-align: center;}
.servicesbox {
	max-width: 300px; position: relative; overflow: hidden;
	background-image: -webkit-linear-gradient(#ededed, #ededed);
	background-image: -o-linear-gradient(#ededed, #ededed);
	background-image: linear-gradient(#ededed, #ededed); padding: 20px 30px; text-align: center;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	transition: all ease .2s;
}
.servicesbox * {position: relative; z-index: 1;}
.servicesbox:before {
	content: ""; position: absolute; opacity: 0;
	width: 50%; height: 100%; background: #b60111;
	top: -100%; left: 0%;transition: all ease .2s;
}
.servicesbox:after {
	content: ""; position: absolute; opacity: 0;
	width: 50%; height: 100%; background: #b60111;
	bottom: -100%; right: 0%;transition: all ease .2s;
}
.servicesbox h2 {font-size: 1.6rem; margin: 15px 0;}
.servicesbox:hover {color: #fff;}
.servicesbox:hover:before {top: 0; opacity: 1;}
.servicesbox:hover:after {bottom: 0; opacity: 1;}

.icosweb {
	width: 107px; height: 107px; overflow: hidden; margin: auto;
	transition: all ease .2s; background-position: left top;
}
.icoweb {background: url(../img/ico-mantenimiento.png);}
.icossl {background: url(../img/ico-ssl.png);}
.icoseo {background: url(../img/ico-seo.png);}

.servicesbox:hover .icosweb {background-position: bottom;}

/* diseño gráfico publicitario */
.topdesign {
	background: url(../img/bg-desigbtop.jpg) no-repeat center top;
	background-size: cover;
}
.designleft {padding: 20px;}
.designslide {margin: 0;/* min-width: 450px; max-width: 450px;*/}
.designslide .slides img {width: 100%;}
.design-ico img {margin-right: 10px;}
.topdesign h2 {color: #b60111; font-size: 2rem; margin-bottom: 8px;}
.topdesign h3 {
	font-size: 1.6rem; font-weight: 400; color: #fff; margin-bottom: 8px;
	background: #343434; padding: 5px 10px; display: inline-block;
}
.designbg-int {
	background: url(../img/bg-dis-publicitario.png) no-repeat center top;
	background-size: cover;
	color: #fff; padding-top: 140px; margin-top: -140px;
}
.designlist h1 {font-size: 2rem; text-shadow: 0px 0px 4px rgba(0,0,0,1);}
.designlist ul li {
	list-style-type: none; padding-left: 25px;
	position: relative; margin: 10px 0;
}
.designlist ul li:before {
	content: "\f00c"; font-family: FontAwesome;
    font-style: normal; font-weight: normal;
    text-decoration: inherit; position: absolute;
    left: 5px;
}
/* community manager */
.borderL {border-right: 1px solid #4d4d4d;}
.community-box { 
	text-align: center;
	border: 1px solid #dfdfdf; border-bottom: 5px solid #b60111;
}
.icoplan {margin: 15px 0;}
.community-box h1 {
	font-size: 1.6rem; line-height: 1.1;
	background: #dfdfdf; padding: 20px 20px 10px;
	color: #b60111;
}
.community-box h1 span {font-size: 4rem;}
.item:nth-child(even) .community-box h1 {background: #b60111; color: #fff; }
.community-box h3 {font-size: 1.6rem; line-height: 1;}
.community-box h2 {font-size: 4rem; padding: 0 20px; line-height: 1;}
.community-box h2 span {font-size: 1.4rem;}
.community-box ul {text-align: center; flex-grow: 2; padding: 10px 15px 0;}
.community-box ul li {
	list-style-type: none; line-height: 1; font-size: 1.4rem;
	padding: 6px 0; border-top: 1px solid #dfdfdf;
}
.community-box ul li:last-child {border-bottom: 1px solid #dfdfdf;}
.community-social {padding: 15px 20px 0;}
.community-social a:first-child {font-size: 2.2rem;}
.community-social a {font-size: 2.5rem; margin: 10px;}
.community-social a.red {color: #b60111;}

/* contacto */
.contatbg {background: #f7f7f7;}
.contactbox {background: #fff; box-shadow: 3px 3px 8px rgba(0,0,0,.05);}
.contactitems {margin:0 0 20px 0;}
.contactitems img {margin-right: 10px;}
.contactitems a {color: inherit;}
.map {border: 3px solid #fff;}

/* clientes */
.clientsbg {background: #222222;}
.title-clients {margin-bottom: 35px;}
.title-clients .item:first-child {max-width: 400px;}
.title-clients h1 {font-size: 4.5rem; line-height: 1.1;}
.title-clients h2 {line-height: 1.1;}
.client-item {
	min-width: 33.33%; height: 170px;
	border-bottom: 1px solid rgba(255,255,255,.32);
}
.client-item:nth-child(3n+2) {
	border-left: 1px solid rgba(255,255,255,.32);
	border-right: 1px solid rgba(255,255,255,.32);
}
.client-item:nth-last-child(-n+3) {border-bottom: none;}
/* branding */
.brandingblock {max-width: 800px; margin: auto;}
.brandingblock .titleblock {text-align: center;}
.brandingblock h1 {
	color: #fff; font-size: 2.6rem; letter-spacing: .3rem;
	font-weight: 400;
}
.brandingblock h2 {
	font-size: 3.3rem; font-weight: 700; color: #eec82d;
	letter-spacing: .5rem;
}

/*.brandinginfo {max-width: 1000px; margin: auto;}*/
.brandinginfo h1 {font-size: 3.3rem;}
.brandinginfo h1 span {color: #4d4d4d; }
.brandingitems {margin: 45px 0;}
.brandingitems img {margin-right: 15px;}
.brandingitems h1 {
	font-size: 2.2rem; color: #b60111; 
	margin-bottom: 10px; padding-bottom: 5px;
	border-bottom: 1px solid #b60111;
} 
.brandingitems p {font-size: 1.8rem;}
.communityinfo .subtitle {
	background: #eec82d; display: inline-block;
	padding: 3px 85px; font-size: 1.8rem; margin-bottom: 15px;
}
.designbtnsbg {background: #eee;}
.designbtn {max-width: 420px; min-width: 380px; text-align: left;}
.designbtn h3 {font-size: 2rem;}
.designbtn p {font-size: 1.3rem;}
.designbtn .bg {
	width: 56px; height: 56px; overflow: hidden; margin-right: 10px;
	background: url(../img/ico-social.png) no-repeat left top; padding: 0 28px;
}
.designbtn .bg2 {background: url(../img/ico-designbtn.png) no-repeat left top;}
.designbtn .bg3 {background: url(../img/ico-granding.png) no-repeat left top;}
.designbtn:hover .bg {background-position: left bottom;}

/* desarrollo web */
.webheader {
        background: url(../img/home-slide-bg.jpg) no-repeat center top;
        background-size: cover;
      }
      .webheader h1 {font-size: 4.5rem; font-weight: 700; margin-bottom: 10px;}

.webplans {padding: 35px 0;}
.webitem {padding: 20px 0;}
.webbox {border: 1px solid #e5e5e5; border-bottom: 6px solid #b60111; }
.webbox h1 {
	font: 400 2rem/1.2 'Raleway'; position: relative;
	background: #e5e5e5; padding: 40px 20px 60px;
}
.item:nth-child(2) .webbox h1 {background: #b60111; color: #fff;}
.webbox h1 span {font-size: 3.6rem; font-weight: 700;}
.webbox h1:before {
	content: ""; width: 90px; height: 90px;
	border-radius: 50%; border: 3px solid #fff;
	position: absolute; left: 0; right: 0; 
	margin: auto; bottom: -46px;
	background: inherit;
}
.webbox h1:after {
	width: 59px; height: 59px;
	content: url(../img/ico-web.png); display: block;
	position: absolute; left: 0; right: 0; 
	margin: auto; bottom: -30px;
}
.item:nth-child(2) .webbox h1:after {content: url(../img/ico-store.png);}
.item:last-child .webbox h1:after {content: url(../img/ico-intranet.png);}
.text-webbox {padding: 65px 30px 5px;}
.webntn {padding: 0 20px;}
.webheader .webntn {padding: 0;}
.proyectlist {background: #b60111;}
.nproyects {font: bold 10rem/1 Arial; margin-right: 10px;}
.titleproyects {padding: 5px 0;}
.titleproyects h1 { margin-bottom: 35px;}

/* quienes somos */
.qsomos {
	padding: 35px 45px; color: #fff;
	box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
}
.qsomos h1 {font-size: 4.4rem; font-weight: 400; margin-bottom: 20px;}
.qsomos h1 span {color: #b60111;}

.experiencia h1 {font-size: 2.6rem; margin-bottom: 20px;}
.experiencia h1 span {color: #7ad8de;}
.exbox {max-width: 450px; color: #d1d1d1;}
.experiencia h2 {
	font-size: 10rem; color: #606269; line-height: 1;
	margin-right: 15px; position: relative;
}
.experiencia .item:last-child .exbox h2:before {
	position: absolute; content: "+";
	top:0; right: -10px; font-size: 60px;
    vertical-align: text-top; 
}
.experiencia .item:first-child {
	border-right: 1px solid #606269;
}
.exbox2 {
	max-width: 260px; margin: auto;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.5);
	padding: 10px; color: #d1d1d1;
}
.exbox2 h2 {
	font-size: 8rem; line-height: 1;
	margin-right: 12px; color: #808080;
}
/* hosting */
.hosting {
	background: url(../img/hosting-bg.png) no-repeat center 100px;
	background-size: cover;
}
.hosting-content h1 {
	font-size: 7rem; font-weight: 400; line-height: 1;
}
.hosting-content h1 span {
	display: inline-block; padding: 5px 10px;
	color: #fff; font-weight: 700;
	background: #a5050d; border-radius: 35px 0;
}
.hosting-content h2 {
	font-size: 4rem; border-bottom: 1px solid #4d4d4d;
	font-weight: 700; padding-bottom: 5px; margin-bottom: 15px;
}
.hostingList {padding: 0 10px;}
.hostingBox {
	padding: 35px; color: #fff;
	text-align: center; max-width: 450px; margin: auto;
}
.hostingBox-content {padding: 0 0 35px 0;}
.hostingBox-content .item:first-child .hostingBox {background-image: url(../img/greenbox.jpg);}
.hostingBox-content .item:nth-child(2) .hostingBox {background-image: url(../img/bluebox.jpg);}
.hostingBox-content .item:last-child .hostingBox {background-image: url(../img/redbox.jpg);}
.hostingBox {background-size: cover;}
.hostingBox h1 {font-size: 3rem; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.6);}
.hostingBox h2 {font-size: 4.5rem;}
.hostingBox p {font-weight: 700; margin-bottom: 15px;}
.hostingBox li {
	list-style-type: none; line-height: 1; padding: 6px 0;
	border-top: 1px solid rgba(255,255,255,.3); font-size: 1.5rem;
}
.condHosting {padding: 30px 0;}
.condHosting p {font-size: 1.1rem;}
.condHosting div p:first-child {width: 25px; font-size: 1.8rem; line-height: 1; padding: 2px 5px 0 0;}
.condHosting div p:last-child {width: calc(100% - 25px);}

@media screen and (max-width: 1160px) { 
	.int-top {padding: 0;}
}

@media screen and (max-width: 1366px) {
	.generica {padding: 0;}
}
@media screen and (max-width: 1280px) {
	.plarge {padding: 80px 0;}
	.ptop {padding: 120px 0 0;}
	.inttitle {padding: 10px 20px;}
	.bgsocilita-infantil, .bg-tarjetas-home {
		background-size: cover; background-position: center;
	}
	.title-clients h1 {font-size: 4rem;}
}
@media screen and (max-width: 1024px) {
	.int-top {padding: 0;}
	.hostingbg {background-size: cover;}
	.hostingBox {padding: 35px 20px;}
}
@media screen and (max-width: 980px) {
	.plarge {padding: 60px 0;}
	.pmedium {padding: 40px 0;}
	.ptop {padding: 60px 0 0;}
	.desingicos {display: none;}
	.designbg-int {margin-top: -50px;}
	.hosting-content img {width: 100%;}
}
@media screen and (max-width: 968px) {
	.design-ico img {display: none;}
	.title-clients h1 {font-size: 3.6rem;}
	.btn {padding: 15px;}
}
@media screen and (max-width: 860px) {
	.btnAhorros {padding: 20px 10px;}
	.title-clients h1 {font-size: 3.2rem;}
	.brandingitems img {width: 250px}
	.hosting-content h1 {font-size: 6rem;}
	.hosting-content h2 {font-size: 3rem;}
}
@media screen and (max-width: 800px) {
	.webplans {padding: 20px 0;}
	.webitem {padding: 0;}
	.webbox {max-width: 360px; margin: auto;}
	.webbox h1 {padding: 35px 20px 50px;}
	.text-webbox {padding: 60px 20px 5px;}
}
@media screen and (max-width: 768px) {
	.plarge {padding: 40px 0;}
	.plite {padding: 35px 0;}
	.ptop {padding: 40px 0 0;}
	.designitem, .servicesbox, .plans {margin: auto;}
	.client-item {width: 50%;}
	.client-item:nth-child(3n+2), .experiencia .item:first-child {
		border-left: none; border-right: none;
	}
	.client-item:nth-child(odd) {
		border-right: 1px solid rgba(255,255,255,.32);
	}
	.client-item:nth-last-child(n+3) {border-bottom: 1px solid rgba(255,255,255,.32);}
	.webHome h1 {font-size: 1.8rem;}
	.webHome h2 {font-size: 3.8rem;}
	.designbtn {margin: auto; display: block;}
	.titleblock h1 {font-size: 3rem;}
	.titleblock {text-align: center;}
	.webHome ul li {margin: 4px 0;}
	.community-box {max-width: 450px; margin: auto;}
	.communityinfo .subtitle {font-size: 1.6rem; padding: 3px 15px;}
	.qsomos-content img {display: none;}
	.hosting-content h1 {font-size: 5rem;}
	.hosting-content h2 {font-size: 2.4rem;}
	.webheader h1 {font-size: 4rem;}
}
@media screen and (max-width: 640px) {
	.plite {padding: 30px 0;}
	.imgmobil {width: 100%;}
	.designleft {padding: 0;}
	.topdesign h3 {
		font-weight: 700; color: inherit;
		background: none; padding: 0;
	} 
	.designlist ul {margin-left: 15px;}
	.designbtn {margin: 10px auto; display: block; }
	.brandingitems img {width: 200px}
	.brandingblock h1, .hosting-content h2 {font-size: 2rem;}
	.brandingblock h2 {font-size: 2.8rem;}
	.titleblock h1 {font-size: 2.2rem;}
	.designlist ul li {margin: 5px 0;}
	.titleproyects h1:last-child, .communityinfo .subtitle {margin-bottom: 15px;}
	.qsomos {padding: 30px;}
	.exbox2 {max-width: 100%;}
	.hosting-content h1 {font-size: 4rem;}
	.hostingList {padding: 0 10px 0 20px;}
	.webheader h1 {font-size: 3.6rem;}
}
@media screen and (max-width: 568px) {
	.plarge, .pmedium {padding: 35px 0;}
	.ptop {padding: 35px 0 0;}
	.plite {padding: 20px 0;}
	.webHome h2 {font-size: 3.4rem;}
	.brandingitems img {width: 180px}
	.brandingitems p {font-size: 1.6rem;}
	.brandingblock h1, .brandingitems h1 {font-size: 1.8rem;}
	.brandingblock h2 {font-size: 2.2rem;}
	.brandinginfo .titleblock h1 {font-size: 2.6rem;}
	.qsomos h1 {font-size: 4rem;}
}
@media screen and (max-width: 480px) {
	.itemLeft {padding: 0; border: none;}
	.webHome h1 {font-size: 1.6rem;}
	.webHome h2, .title-clients h1, .qsomos h1  {font-size: 3rem;}
	.arkadimg img, .client-item {width: 100%;}
	.brandingitems {text-align: center;}
	.title-clients {margin: 0;}
	.designbtn {max-width: 100%; min-width: 100%;}
	.designbtn p {display: none;}
	.client-item:nth-child(odd) {border-right: none;}
	.client-item:nth-last-child(n+2) {border-bottom: 1px solid rgba(255,255,255,.32);}
	.qsomos {padding: 20px;}

} /* max-width: 480px*/
@media screen and (max-width: 425px) {
	.det li {background: none !important; padding-left: 0;}
	.title-clients h1 {font-size: 2.6rem;}
	.brandingblock h1 {font-size: 1.6rem;}
	.brandingblock h2, .titleblock h1 {font-size: 2rem;}
	.webheader h1 {font-size: 3rem;}
} /* max-width: 425px*/