/* CSS Document */
@font-face {
	font-family: 'icons';
	src:url('../fonts/icons.eot?');
	src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icons.woff?') format('woff'),
		url('../fonts/icons.ttf?') format('truetype'),
		url('../fonts/icons.svg?#icons') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src:url('../fonts/Regular.eot?');
	src:url('../fonts/Regular.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Regular.woff?') format('woff'),
		url('../fonts/Regular.ttf?') format('truetype'),
		url('../fonts/Regular.svg?#icons') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src:url('../fonts/Bold.eot?');
	src:url('../fonts/Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Bold.woff?') format('woff'),
		url('../fonts/Bold.ttf?') format('truetype'),
		url('../fonts/Bold.svg?#icons') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src:url('../fonts/Light.eot?');
	src:url('../fonts/Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Light.woff?') format('woff'),
		url('../fonts/Light.ttf?') format('truetype'),
		url('../fonts/Light.svg?#icons') format('svg');
	font-weight: light;
	font-style: normal;
}


body { cursor:default}
html, body, p, h1, h2, h3, h4, ol, ul, dl, li, figure, figcaption, img { padding:0; margin:0; font-weight:normal;}
h1, h2, h3, h4 { font-size:1rem;}
li { list-style:none}
a { text-decoration:none; color:inherit;}

/* ALL */

body  {font-size:14px; font-family:"OpenSans",Arial, Helvetica, sans-serif;}
.mainRow { padding:0 20px; }
.mainRow .mainColumn { width:100%; max-width:900px; margin:auto;}
ol.horizontal > li { display:inline-block;}
.fadeabit { opacity:0.8}
.forVisuallyImparedOnly{
	position: absolute;
	overflow: hidden;
	top: -100%;
	left: -100%;
}
.hidden { opacity:0;}
.vuisible { opacity:1;}
article p {
	margin:20px 0;
}
article a {
	color:#EF4036;
	position:relative;
	display:inline-block;
}
article a:hover {
	color:#000;
	border-bottom:1px solid #000;
}
/* IMAGE BLUR
***********************************/
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

/* HOVER TITLE
***********************************/
[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
	font-size:1em; line-height:100%;
  position: absolute;
  left: 0;
  top: 100%;
	max-width:300px;
  white-space: wrap;
  z-index: 9999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

/* HEADER
***********************************/
header > .mainRow:nth-of-type(1) { padding-top:20px}
header > .mainRow > .mainColumn nav { border-top:1px solid #918A81; margin-top:10px; clear:left}
.nombre, .profesion { height:1.7em; display:inline-block; line-height:1.7em;}
	.nombre { font-weight:bold;}
	.profesion { font-size:0.85em; margin-left:1em;}
#nav {background:#766E64; color:#FFF}
	#nav ol li.quote { float:right}
.viascontacto { float:right;}
	.viascontacto .bubble span { line-height:0.85em}
	header .viascontacto .bubble:before { color:#766E64}
	
	/* MENU
	*********************************/
	body nav > ol { line-height:1.5em; height:1.5em; padding:15px 0;}
	body nav > ol > li a { font-size:1.2em; font-weight:light; margin-right:1.5em; text-transform:capitalize}
	body nav > ol > li.quote a {margin:0 0 0 0.5em; background:#EF4036;padding:0.2em 0.5em;}
	body nav > ol > li:last-of-type a{ margin:0}
	
	body#home nav > ol > li.home,
	body#portfolio nav > ol > li.portfolio,
	body#about nav > ol > li.about,
	body#contact nav > ol > li.contact { display:none;}
	
	/* MAININTRO
	*********************************/
	#mainIntro { background:#EF4036;}
	
	/* CONTENT
	*********************************/
	h3 {margin:1em 0;}
	
	/* WHAT IS NEXT BUTTONS
	*********************************/
	.whatnext { text-align:center; background:#F3F3F3; margin-top:60px; padding-bottom:30px;overflow:auto;}
	.whatnext h2 { margin:30px 0 0.5em 0}
	.whatnext .buttons { display:inline-block;}
	.whatnext .buttons li { display:block; float:left}
	.whatnext .buttons li a { background-color:#EF4036; padding:0.5em; font-size:1em; color:#FFF;}

/* FOOTER
*********************************/
footer {background:#766E64; color:#FFF;}
	footer .mainColumn { padding:3em 0 5em 0;}
		footer .mainColumn > div { border-top:1px solid #918A81; border-bottom:1px solid #918A81; padding:0.5em 0; margin:1em 0;}
		footer .mainColumn > div .viascontacto .bubble:before { color:#EF4036}


/* HOME */

body#home #mainIntro {text-align:center; color:#FFF; padding:3em 0 2em 0;}
body:not(#home) #mainIntro {color:#FFF; padding-top:3em; padding-bottom:2em}
body:not(#home) #mainIntro h1,
body:not(#home) #mainIntro p { border:none; text-align:left; max-width: none; width:inherit}
body:not(#home) #mainIntro h1 {font-size:2em; padding:0}
body:not(#home) #mainIntro p {}
body:not(#home) #mainIntro { margin-bottom:60px}
	#mainIntro .screens { text-align:center; max-width:300px; width:70%; margin:2em auto; position:relative;}
		#mainIntro .screens svg,
		#mainIntro .screens img { height:auto; width:100%;}
		#mainIntro .screens svg { position:absolute; top:0; left:0;}
			
	#mainIntro p,
	#mainIntro h1 {max-width:460px; width: 90%; margin:auto; }
	#mainIntro p { padding:10px 0;}
	#mainIntro h1 { 
		border-top:1px solid #FAC9C7; border-bottom:1px solid #FAC9C7;
		font-size:3.3em; line-height:100%; padding:0.2em;
	}
	#mainIntro ol { margin:40px 0 120px 0}
		#mainIntro ol li { display:inline-block; height:20px; width:96px; line-height:20px; bottom:-96px;}
			#mainIntro ol li:nth-of-type(1){left:30px;}
			#mainIntro ol li:nth-of-type(2){left:10px;}
			#mainIntro ol li:nth-of-type(3){left:-10px;}
			#mainIntro ol li:nth-of-type(4){left:-30px;}
			#mainIntro ol li[class*="icon-"]:before {
				font-size:90px;
				position:absolute;
				height:90px; width:90px;
				top:-96px; left:0;
				border:3px solid #FFF;
				line-height:90px;
			}
			#mainIntro ol li.icon-design:before { background:#00B3BE;}
			#mainIntro ol li.icon-development:before { background:#F7931D;}
			#mainIntro ol li.icon-cms:before { background:#EF4036;}
			#mainIntro ol li.icon-hosting:before { background:#A6BD38;}
			
			/* animacion iconos intro
			**************************/
			.flip {perspective: 1000;}
			.flip li {transform-style: preserve-3d;}
			.flip li:hover {}
			.flip li:nth-of-type(1) {
				-webkit-animation: flip 0.5s 5s;
				-moz-animation: flip 0.5s 5s;
				-ms-animation: flip 0.5s 5s;
				-o-animation: flip 0.5s 5s;
				animation: flip 0.5s 5s;
			}
			.flip li:nth-of-type(2) {
				-webkit-animation: flip 0.5s 5.2s;
				-moz-animation: flip 0.5s 5.2s;
				-ms-animation: flip 0.5s 5.2s;
				-o-animation: flip 0.5s 5.2s;
				animation: flip 0.5s 5.2s;
			}
			.flip li:nth-of-type(3) {
				-webkit-animation: flip 0.5s 5.4s;
				-moz-animation: flip 0.5s 5.4s;
				-ms-animation: flip 0.5s 5.4s;
				-o-animation: flip 0.5s 5.4s;
				animation: flip 0.5s 5.4s;
			}
			.flip li:nth-of-type(4) {
				-webkit-animation: flip 0.5s 5.6s;
				-moz-animation: flip 0.5s 5.6s;
				-ms-animation: flip 0.5s 5.6s;
				-o-animation: flip 0.5s 5.6s;
				animation: flip 0.5s 5.6s;
			}
			@-webkit-keyframes flip {0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);}}
			@-moz-keyframes flip {0% {transform: rotateY(0deg);}  100% {transform: rotateY(360deg);}}
			@-ms-keyframes flip {0% {transform: rotateY(0deg);}  100% {transform: rotateY(360deg);}}
			@-o-keyframes flip {0% {transform: rotateY(0deg);}  100% {transform: rotateY(360deg);}}
			@keyframes flip {0% {transform: rotateY(0deg);}  100% {transform: rotateY(360deg);}}
			
h2 { font-size:2em; margin:2em 0; text-align:center;}
#services { overflow:auto;}
	#services article h3 {
		margin-top:60px;font-weight:bold; color:#766E64;
	}
	#services article h3:before { 
		content:""; display:inline-block; 
		height:0.7em; width:0.7em; 
		margin-right:5px;
		border:1px solid #CCC; border-radius:50%;
	}

/* home intro animation */
#imgreal {
	-webkit-animation: imag 5s;
	-moz-animation: imag 5s;
	-ms-animation: imag 5s;
	-o-animation: imag 5s;
	animation: imag 5s;
}
@-webkit-keyframes imag { 0%, 80% {opacity:0} 100% {opacity:1}}
@-moz-keyframes imag {  0%, 80% {opacity:0} 100% {opacity:1}}
@-ms-keyframes imag {  0%, 80% {opacity:0} 100% {opacity:1}}
@-o-keyframes imag {  0%, 80% {opacity:0} 100% {opacity:1}}
@keyframes imag {  0%, 80% {opacity:0} 100% {opacity:1}}


.svgline{ 
	fill:none; 
	stroke:#FFF/*#766E64*/; 
	stroke-miterlimit:10; stroke-width: 3;
	stroke-dasharray: 1585px;
	stroke-dashoffset: 0px;
	-webkit-animation: svgline linear 5s forwards;
	-moz-animation: svgline linear 5s forwards;
	-ms-animation: svgline linear 5s forwards;
	-o-animation: svgline linear 5s forwards;
	animation: svgline linear 5s forwards;
}
@-webkit-keyframes svgline {0% {stroke-dashoffset: 1585;} 80% {stroke-dashoffset: 0; opacity:1} 100% {opacity:0}}
@-moz-keyframes svgline {0% {stroke-dashoffset: 1585;} 80% {stroke-dashoffset: 0; opacity:1} 100% {opacity:0}}
@-ms-keyframes svgline {0% {stroke-dashoffset: 1585;} 80% {stroke-dashoffset: 0; opacity:1} 100% {opacity:0}}
@-o-keyframes svgline {0% {stroke-dashoffset: 1585;} 80% {stroke-dashoffset: 0; opacity:1} 100% {opacity:0}}
@keyframes svgline {0% {stroke-dashoffset: 1585;} 80% {stroke-dashoffset: 0; opacity:1} 100% {opacity:0}}

/* DISABLE SELECTION
***********************************/
body {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.enableSelect {
	-webkit-touch-callout: text ;
	-webkit-user-select: text ;
	-khtml-user-select: text ;
	-moz-user-select: text ;
	-ms-user-select: text ;
	user-select: text ;
}

/* Second column
**************************/
.colDe {display:block; float:right; width:calc(30%); padding-left:40px; margin-left:40px;}
	.colDe h3 {margin-left:-2em;}
	h3 {}
	h3:before { color:#766E64}
	.colDe .topwithdot { margin-bottom:2em;}
	.colDe .topwithdot li:before {}

/* ICONS
**************************/


[class^="icon-"], [class*=" icon-"] {
	font-family: 'icons','OpenSans';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1.5em;
	position:relative;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	-webkit-touch-callout: text ;
	-webkit-user-select: text ;
	-khtml-user-select: text ;
	-moz-user-select: text ;
	-ms-user-select: text ;
	user-select: text ;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
	font-size:1.5em;
}

/*
BUBBLE
:::::::::::::::::::::::::::::::::::::
*/
[class^="icon-"].bubble:before, [class*=" icon-"].bubble:before{
	border-radius:50%;
	background:#CDC3B6;
}
/* 
LEFT BULLET 
:::::::::::::::::::::::::::::::::::::
*/
[class^="icon-"].left, [class*=" icon-"].left{
	padding-left:2em !important;
}
[class^="icon-"].left:before, [class*=" icon-"].left:before {
	position:absolute; left:0; right:auto;
}
/* 
TOP BULLET 
:::::::::::::::::::::::::::::::::::::
*/
.topwithdot [class*="icon-"]:before { color:#999;}
	/*bullet colors*/
	section#services article:nth-of-type(1) .topwithdot [class*="icon-"]:after { color:#00B3BE}
	section#services article:nth-of-type(2) .topwithdot [class*="icon-"]:after { color:#F7931D}
	section#services article:nth-of-type(3) .topwithdot [class*="icon-"]:after { color:#EF4036}
	section#services article:nth-of-type(4) .topwithdot [class*="icon-"]:after { color:#A6BD38}
	
	section#services article:nth-of-type(1) h3:before { border-color:#00B3BE}
	section#services article:nth-of-type(2) h3:before { border-color:#F7931D}
	section#services article:nth-of-type(3) h3:before { border-color:#EF4036}
	section#services article:nth-of-type(4) h3:before { border-color:#A6BD38}
.topwithdot li { min-width:60px; display:inline-block; position:relative}
.topwithdot [class*="icon-"] { text-align:center; display:inline-block; padding:20px 0; font-size:0.9em;}
.topwithdot [class*="icon-"]:before { 
	display: block;
	clear: right;
	min-width: 60px;
	font-size: 3.5em;
	margin-bottom: 24px;
	color:#766E64;
}
.topwithdot [class*="icon-"]:after {
	content: "•";
	color:#CDC3B6;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	margin-top: -36px;
}

/* 
ICONOS
:::::::::::::::::::::::::::::::::::::
*/
.icon-next:before {
	content: "\e61d";
}
.icon-js:before {
	content: "\e600";
}
.icon-ai:before {
	content: "\e601";
}
.icon-ps:before {
	content: "\e602";
}
.icon-experience:before {
	content: "\e603";
}
.icon-interface:before {
	content: "\e604";
}
.icon-html:before {
	content: "\e605";
}
.icon-css:before {
	content: "\e606";
}
.icon-jquery:before {
	content: "\e607";
}
.icon-ajax:before {
	content: "\e608";
}
.icon-php:before {
	content: "\e609";
}
.icon-mysql:before {
	content: "\e60a";
}
.icon-design:before {
	content: "\e60b";
}
.icon-development:before {
	content: "\e60c";
}
.icon-cms:before {
	content: "\e60d";
}
.icon-hosting:before {
	content: "\e60e";
}
.icon-unique:before {
	content: "\e60f";
}
.icon-responsive:before {
	content: "\e610";
}
.icon-detail:before {
	content: "\e611";
}
.icon-powerful:before {
	content: "\e612";
}
.icon-fast:before {
	content: "\e613";
}
.icon-compatibility:before {
	content: "\e614";
}
.icon-tailored:before {
	content: "\e615";
}
.icon-diy:before {
	content: "\e616";
}
.icon-control:before {
	content: "\e617";
}
.icon-reliable:before {
	content: "\e618";
}
.icon-cPanel:before {
	content: "\e619";
}
.icon-support:before {
	content: "\e61a";
}
.icon-phone:before {
	content: "\e61b";
}
.icon-email:before {
	content: "\e61c";
}

/* THIMBS 
*************************/
.view {
   width: 405px;
   height: 230px;
   margin: 10px;
	 display:inline-block;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 0 0 4px #e6e6e6;
   -moz-box-shadow: 0 0 4px #e6e6e6;
   box-shadow: 0 0 4px #e6e6e6;
   cursor: default;
}
.view .mask,.view .content {
   width: inherit;
   height: inherit;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
	 width:inherit; height: inherit
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 5px;
   background: rgba(0, 0, 0, 0.8);
   margin: 10px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 0px 20px ;
   text-align: center;
}
.view a.info {
   display: inline-block;
	 font-size:0.7em;
   text-decoration: none;
   padding: 7px 14px;
   background: #EF4036;
   color: #fff;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
   background-color: rgba(118, 110, 100, 0.3);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #333;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth p {
   color: #333;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

/* CONTACT
****************************/
form { width:100%; margin: 100px auto 100px auto; position:relative; padding-top:1.5em}
form[data-type="contact"] .quote {display:none;}
	form #message {
		position: absolute;
		bottom: -32px;
		right: 1em;
		display:none;
	}
	.step { display:block; padding:1em 1em 1em 1em; background:#EEE; margin-top:5em; position:relative;}
		.step .after { display:none;}
		.step.pregress {border-bottom:#766E64 2px solid;}
		.step.pregress .after { 
			font-family: 'icons','OpenSans';
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1.5em;
			width:50px;
			position:relative;
			border-left:1px solid #FFF;
			color: #766E64;
		
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			
			-webkit-touch-callout: text ;
			-webkit-user-select: text ;
			-khtml-user-select: text ;
			-moz-user-select: text ;
			-ms-user-select: text ;
			user-select: text ;
			position:absolute; top:0; bottom:0; right:0em; 
			font-size:3em;
			display:block;
			cursor:pointer;
		}
		.step.pregress .after:hover { background:#EF4036; color:#FFF}
		.step.pregress .after span {
			position:absolute; left:0; bottom:0;
			width:inherit;
			text-align:center;
		}
	.step h3,
	.step label.h3 { display:block; position:absolute; font-size:2em; top:-1.5em; margin:0;}
		.step label:not(.h3) { margin-right:1em; display:inline-block;}
	.step input[type="text"],
	.step textarea { background:none; border:none; width:100%;}
	.step.pregress input[type="text"],
	.step.pregress textarea { width:calc(100% - 50px)}
	
	/* form input style */
	.step textarea { background:url(../images/form/renglon.png);}
	.step input[type="text"],
	.step textarea,
	.step label:not(.h3) { font-size:1.2em; line-height:2em; font-family:"OpenSans",Arial, Helvetica, sans-serif;}
	.step input[type="text"]:focus,
	.step textarea:focus {outline:none}
	
	/*progress*/
	.step.pregress:before {
		content:"";
		padding-left:1em;
		padding-top:10px;
		display:block; height:10px;
		border-top:2px solid #EF4036;
		position:absolute; bottom:-22px; left:0;
	}
		/* Contact */

		form.sending:after{ content:"";background:rgba(255,255,255,0.6); position:absolute; top:0; bottom:0; right:0; left:0;}
		
		form.contact .step.pregress:nth-of-type(1):before {
			content:"1/3";
			width:33%;
		}
		form.contact .step.pregress:nth-of-type(2):before {
			content:"2/3";
			width:66%;
		}
		form.contact .step.pregress:nth-of-type(3):before {
			content:"3/3";
			width:calc(100% - 1em);
		}
		form.contact .step.pregress:nth-of-type(4):before {
			content:"Step 4";
		}
		/* Quote */
		.step.pregress:nth-of-type(5):before {
			content:"Step 5";
		}
		.step.pregress:nth-of-type(6):before {
			content:"Step 6";
		}
		.step.pregress:nth-of-type(7):before {
			content:"Step 7";
		}
.final, input[type='submit'] { margin:60px 0}
input[type='submit'] { padding:1em; background:#EF4036; color:#FFF; border:none;}

#expandForm { margin-top:40px;}

@media screen and (max-width: 600px) {
.view {width: 250px; height:139px;}
.mainRow {}
.mainRow .mainColumn {}
.mainRow .mainColumn .nombre{}
.mainRow .mainColumn nav ol li a {}
.mainRow .mainColumn nav ol li span { display:none;}

#mainIntro .screens svg { max-height:90px;margin:0.5em 0}
#mainIntro ol { margin-bottom:60px; margin-top:20px;}
#mainIntro ol li { display:inline-block; height:20px; width:66px; line-height:20px; bottom:-66px; font-size:0.7em;}
	#mainIntro ol li[class*="icon-"]:before {
		font-size:60px;
		position:absolute;
		height:60px; width:60px;
		top:-66px; right:0;
		border:3px solid #FFF;
		line-height:60px;
	}

.colDe { float:none; width:auto; margin-left:0; padding-left:0}
.colDe h3 { margin-left:0}
/* WHAT IS NEXT BUTTONS
	*********************************/
	.whatnext { text-align:center;  padding-bottom:0}
	.whatnext .buttons { display:block; overflow:auto; height:auto; margin:0; padding:0;}
	.whatnext .buttons li { display:block; margin:0; width:100%; overflow:auto;}
	.whatnext .buttons li a { border-top:1px solid #CCC; color:#000; background:none; padding:1em; font-size:1em; margin:0; display:block;}
	form { font-size:12px;}
	h3, label.h3 { font-size:18px !important}
	
	form { margin-top: 60px; margin-bottom:60px;}
}
@media screen and (min-width: 600px) {
	#services article { display:block; float:left; width:calc(50% - 40px); margin:0; padding:40px; z-index:1; position:relative;}
	#services article h3 { margin-top:0; font-weight:normal}

	#services article:nth-of-type(odd){ padding-left:0;}
	#services article:nth-of-type(even){ padding-right:0;}
	#services article:nth-of-type(1):before,
	#services article:nth-of-type(4):before {
		content:"";
		width:100px; height:100px; 
		z-index:0; 
		position:absolute;
	}
	#services article:nth-of-type(1):before{
		bottom:0; right:0;
		border-right:1px solid #EEE;
		border-bottom:1px solid #EEE;
	}
	#services article:nth-of-type(4):before{
		top:-1px; left:-1px;
		border-left:1px solid #EEE;
		border-top:1px solid #EEE;
	}
}
@media screen and (max-width: 560px) {
	.mainRow .mainColumn .viascontacto a span,
	.mainRow .mainColumn nav ol li span,
	.profesion span,
	.additional-name { display:none}
	.mainRow .mainColumn .profesion { margin-left:0; display:block}
	.viascontacto .bubble { font-size:1.9em;}
	.viascontacto [class*="icon-"].left:before { right:0 !important; top:0; left:auto; display:block; float:left}
}
@media screen and (max-width: 720px) {
	.mainRow .mainColumn .profesion { margin-left:0; }
}