/*

Site Name: DESIGNA studio

Version: 1.1 (Update: more semantic code)

Site URI: http://sylvainlafitte.com/dvlptest/designa/home.html

Description: A clean and simple HTML5/CSS3 template

Author: Sylvain Lafitte

Author URI: http://sylvainlafitte.com

*/



/* --- CUSTOM RESET --- */

/* using h5bp.com/css by HTML5 Boilerplate and Normalize.css by Nicolas Gallagher and Jonathan Neal */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {display: block; overflow:hidden;}

audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

audio:not([controls]) { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 12px; line-height: 1.5; }

body, button, input, select, textarea { font-family: Arial, sans-serif; color: #666666; }

::-moz-selection { background: #37DAC1; color: #fff; text-shadow: none; }

::selection { background: #37DAC1; color: #fff; text-shadow: none; }	

/* LINKS */

a { color: #37DAC1; cursor: pointer; }

a:hover { color: #37DAC1; 

transition: color 0.2s linear;-moz-transition: color 0.2s linear;-webkit-transition: color 0.2s linear;-o-transition: color 0.2s linear;  } 

a:visited { color: ;
	color: #0000FF;
	font-weight: bold;
	font-size: 13px;
}

*:hover, *:focus, *:active { outline: 0; outline: none; }

/* TYPO */

abbr[title] { border-bottom: 1px dotted; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

p {margin:0 0 1em;}

pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

q { quotes: none; }

q:before, q:after { content: ""; content: none; }

blockquote { margin: 0 20px 20px 0; padding: 5px 5px 5px 15px; border-left: 1px solid #DDD; font-style: italic; color: #999; }

b, strong, .strong { font-weight: bold; }

small, .small { font-size: 85%; }

address{font-style: normal;}

/* LIST */

dd { margin: 0 0 0 40px; }

ul, ol, menu { list-style: none; list-style-image: none; margin: 0; padding: 0; }

/* EMBEDDED CONTENT */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

/* FORM */

form { margin: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }

legend { border: 0; *margin-left: -7px; padding: 0; }

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

table button, table input { *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }

input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* TABLE */

table { border-collapse: collapse; border-spacing: 0; }

td { vertical-align: top; }

/* --- END NORMALIZE --- */



/* ----

STYLES

Author: Sylvain Lafitte / www.sylvainlafitte.com

---- */

h1, h2, h3, h4, h5, h6 { margin: 0 0 1em }

h1 { font-size: 50px; letter-spacing: -0.075em; text-transform: uppercase; line-height: 0.9; color: #555; margin: 0 0 30px; font-weight: normal; }

h2 { font-size: 30px; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }

h3 { font-size: 21px }

h4 { font-size: 18px }

h5 { font-size: 14px; text-transform: uppercase; margin: 0; color: #555; }

h6 { font-size: 12px; margin-bottom: 2px; }

body { width: 100%; min-width: 988px; overflow: hidden; }

.center { margin-left: auto; margin-right: auto; display: block; clear: both; overflow: hidden; padding: 0 5px; width: 978px; }

.column4 { width: 22.6993865%; overflow: hidden; float: left; display: block; height: 100%; }

.column3 { width: 31.2883436%; overflow: hidden; float: left; display: block; height: 100%; } /* #editado para 3 columnas width: 31.2883436%; */

.column2 { width: 48.4662577%; overflow: hidden; float: left; display: block; height: 100%; }

.columnthird { width: 74.2331288%; min-width: 726px; overflow: hidden; float: left; display: block; height: 100%;}

.mleft { margin-left: 3.06748466% }

.mright { margin-right: 3.06748466% }

.column4in { width: 30.5785124%; overflow: hidden; float: left; display: block; height: 100%; }

.column3in { width: 42.1487603%; overflow: hidden; float: left; display: block; height: 100%; }

.column2in { width: 65.2892562%; overflow: hidden; float: left; display: block; height: 100%; }

.mbottom {
	margin-bottom: 30px;
	font-size: 13px;
}

.mr { margin-right: 10px }

.mb { margin-bottom: 10px }

.fright, .fleft { display: block; overflow: hidden; }

.fright { float: right }

.fleft { float: left }

.listado { margin-left: 10px; font-size: 12px; font-weight:bold;} /*#editado 60px #agregado font-size: 14px; menu! */

    .listado ul { padding-bottom: 35px; }

    .listado li { padding: 2px 40px 0 20px; background-image:url(../img/arrowhover.png); background-position:left; background-repeat:no-repeat; }

	.listado a, .listado a { text-decoration: none; color: #666; }

.listado2 { margin-left: 0px; font-size: 12px; font-weight:normal;} /*#editado 60px #agregado font-size: 14px; menu! */

    .listado2 ul { padding-bottom: 35px; }

    .listado2 li {
	padding: 8px 40px 8px 30px;
	background-image:url(../img/valid.png);
	background-position:left;
	background-repeat:no-repeat;
	font-size: 13px;
}

	.listado2 a, .listado2 a { text-decoration: none; color: #666; }

.listado3 { margin-left: 0px; font-size: 12px; font-weight:normal;} /*#editado 60px #agregado font-size: 14px; menu! */

    .listado3 ul { padding-bottom: 15px; }

    .listado3 li { padding: 0px 0px 0px 30px; background-image:url(../img/valid.png); background-position:left; background-repeat:no-repeat; }

	.listado3 a, .listado3 a { text-decoration: none; color: #666; }



/* HEADER */

header#navtop {
	margin-bottom: 0px;
	background: url(../img/stripes2.png) no-repeat 310px 0;
	text-align: right;
} /* #editado margin-bottom: 10px; no-repeat 253px */

.logo { margin: 20px 0 } /* #editado margin: 50px */

header nav { margin-top: 30px; font-size: 12px; font-weight:bold;} /*#editado 60px #agregado font-size: 14px; menu! */

    header nav ul { float: left; overflow: hidden; padding: 0 20px 0 20px; border-left: 1px solid #ddd; line-height: 24px; }

nav a, menu a { text-decoration: none; color: #666; }

.navactive { color: #37DAC1; } /* #editado color: #37DAC1; */

/**/

.part { margin-bottom: 40px } /* #editado margin-bottom: 80px (separación de abajo) */

.title { border-top: 1px solid #999; padding-top: 10px; color: #555; margin-bottom: 30px; }

.title2 { margin-bottom: 0px; }

/**/

.arrow { padding-right: 15px; background: url(../img/arrow.png) no-repeat right center; text-decoration: none; }

.arrow:hover { background: url(../img/arrowhover.png) no-repeat right center; color: #37DAC1; }

.more { color: #999; font-style: italic; }

/* SLIDER */

#slides { position: relative; z-index: 1; }

.slides_container { width: 474px; height: 290px; display: none; }

    .slides_container .slide { width: 474px; height: 290px; display: block; }

.slide figure { overflow: hidden; height: 100%; }

.slide img { max-width: 100%; height: auto; width: auto; display: block; }

.slide figcaption { position: absolute; background: white; height: auto; min-height: 45px; width: 190px; padding: 10px; top: 30px; right: 0; }

    .slide figcaption div { text-align: right; display: block; border-right: 1px solid #DDD; padding: 3px 20px 0 0; margin: auto 50px auto 0; }

        .slide figcaption div p { margin: 0 }

.prev { position: absolute; top: 55px; right: 35px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; background: url(../img/left.png) center no-repeat; }

.next { position: absolute; top: 55px; right: 5px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; background: url(../img/arrow.png) center no-repeat; }

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

.services {
	border-top: 1px solid #DDD;
	padding-top: 10px;
	font-size: 13px;
}

    .services p { margin: 0 }

.number { color: #999 }

.sepmini { display: block; height: 1px; width: 10px; background: #DDD; margin: 10px 0; overflow: hidden; border: 0; }

/* FOOTER */

footer.part { padding-top: 20px; border-top: 1px solid #999; color: #555; margin-bottom: 80px; }

footer nav ul { float: right; overflow: hidden; }

footer a {text-decoration: none;color: #666;}

footer li { float: left; margin-right: 10px; padding-right: 10px; border-right: 1px solid #DDD; font-size: 11px; }

footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }

.up .ir { display: block; background: url(../img/up.png) no-repeat center; width: 25px; height: 18px; text-align: center; margin: 0 auto; }

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

.part ul{

	margin-bottom: 10px;}

.about .content img { max-width: 100%; width: auto; height: auto; }

.detail { margin-top: 40px; padding-top: 20px; border-top: 1px solid #DDD; }

.servicess .detail:first-child { margin-top: 0 }

/* WORKS */

.work { width: 222px; overflow: hidden; float: left; display: block; height: 100%; margin-right: 30px; border-top: 1px solid #DDD; padding-top: 10px; }

.sinBorde {border-top: 0px solid #DDD}

    .work  { position: relative }

        .work > a { display: block; width: 222px; height: 137px; overflow: hidden; }

        .work img { max-width: 100%; height: auto; width: auto; }

    .work .zoom { display: block; position: absolute; top: 10px; left: 0; background: url(../img/zoom.png) no-repeat center; width: 222px; height: 137px; }

    .works figcaption, .work figcaption { margin-top: 10px; padding: 0 5px; white-space: nowrap; }

        .works figcaption a, .work figcaption a { margin: 0 0 2px; color: #555; font-weight: bold; }

        .works figcaption p, .work figcaption p { margin: 0; }

.main .work:last-child { margin-right: 0 }

.works .content .work:nth-child(3n) { margin-right: 0 }

.works .content .work { margin-bottom: 40px; position: relative; }

.works menu a { cursor: pointer }

.buttonactive { font-weight: bold; color: #777 }

/* Work SINGLE */

.singlework figure {margin-bottom: 30px;}

.singlework figure figcaption {

	 	 text-align: center}

.singlework img {

	 max-width: 100%; height: auto; width: auto; display: block; margin: 0 auto}



/*toggle*/

.toggle-view li {

	margin-bottom: 10px;

	position: relative;

	cursor: pointer;

	overflow: hidden;

	visibility: visible;

}

.toggle { padding: 7px 8px 7px 30px; margin: 0; border: 1px solid #ddd; text-shadow: 0 1px 0 #fff; background: #F3F3F3; background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); }

.toggle:hover { border-color: #BBB }

.tactive { color: #333; border-color: #CCC; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

.t { display: none; padding: 10px; }

/*tabs*/

.tab_wrap { width: 306px }

.tabs { float: left; height: 30px; }

    .tabs li { float: left; margin: 0 5px 0 0; padding: 0; line-height: 30px; overflow: hidden; position: relative; background: #EAEAEA; }

        .tabs li a { text-decoration: none; color: #666; display: block; padding: 0 20px; }

        .tabs li a:hover { background: #FFF }

    .tabs li.active { background: #f5F5F5 }

.tab_container { overflow: hidden; clear: both; float: left; width: 100%; }

.tab_content { padding: 10px }

#tab2, #tab3 { display: none }

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

.warning { display: block; line-height: 30px; background: #F3F3F3; border: 1px solid #DDD; text-align: center; padding: 10px; margin: 20px 5px; }

.warning2 { display: block; line-height: 18px; background: #F3F3F3; border: 1px solid #DDD; text-align: center; padding: 10px; margin: 10px 5px; }

/* FORM */

form { margin-top: 30px }

    form label, .contact_ie9 label { display: block; margin-bottom: 10px; font-weight: bold; }

    form ul li, .contact_ie9 li { margin-bottom: 30px }

    form input, form textarea, .contact_ie9 input, .contact_ie9 textarea { width: 60%; height: 25px; line-height: 25px; padding: 5px; border: 1px solid #DDD; color: #000066; }

    form input, .contact_ie9 input { padding-right: 20px }

    form textarea, .contact_ie9 textarea { height: 200px; width: 97%; }

    form button#submit, .contact_ie9 #submit { line-height: 18px }

/*html5/css3*/

input:required:valid { background: url(../img/valid.png) no-repeat 98% center }

input:invalid, textarea:invalid { }

input:focus, textarea:focus { outline: none; border: 1px solid #BBB; }

/* validate.js */

label.error { color: #D84A38; margin: 10px 0 0 5px; font-weight: normal; font-style: italic; }

.map { width: 222px; height: auto; overflow: hidden; }

    .map img { max-width: 100%; height: auto; width: auto; }

/*BUTTONS*/

.button { color: #666; font-weight: bold; text-decoration: none; line-height: 30px; padding: 7px 12px; margin: 0 5px 5px 0; text-shadow: 0 1px 0 #fff; border: solid 1px #dcdcdc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; background: #F3F3F3; /* Old browsers */ background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* W3C */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }

.button:focus { color: #333; border-color: #BBB; }

.button:hover { color: #333; border-color: #BBB; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 1px 2px rgba(0, 0, 0, 0.2); }

.button:active { color: #000; background: #F5F5F5; border-color: #444; }



/* --- END STYLE --- */

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

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }

.ir br { display: none; }

.hidden { display: none !important; visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }



/* Media Query & Print styles!

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

/* Style adjustments for viewports 768px and over go here */

@media only screen and (max-width: 768px) { 

    body { min-width: 760px; font-size: 0.7em; }

    .center { width: 750px }

    h1 { font-size: 38px }

    h2 { font-size: 24px }

    h3 { font-size: 18px }

    h4 { font-size: 14px }

    h5 { font-size: 12px }

    h6 { font-size: 11px }

    .slides_container { width: 363px; height: 225px; }

    .slides_container .slide { width: 363px; height: 225px; }

    .work { width: 170px; margin-right: 23px; }

    .work > a { width: 170px; height: 105px; }

    .work .zoom { width: 170px; height: 105px; }

    .columnthird { min-width: 556px; }

    .map { width: 170px }

    footer li { margin-right: 5px; padding-right: 5px; font-size: 10px; }

    footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }

}

/* --- Smartphones and small Tablet PCs --- */

@media screen and (max-width:620px) { 

    body { min-width: 610px; font-size: 12px; }

    .center { width: 600px }

    .column2 { width: 100% }

    .columnthird { width: 100% }

    header nav ul:last-child { padding-right: 10px }

    #slides { margin-top: 40px }

    .slides_container { width: 600px; height: 370px; }

    .slides_container .slide { width: 600px; height: 370px; }

    .main .work, .works .work { width: 285px; margin-right: 0; }

    .main .work { margin-right: 0!important }

    .work > a { width: 285px; height: 175px; }

    .work .zoom { width: 285px; height: 175px; }

    aside.column4 { float: none; width: 100%; }

    aside menu { display: none }

    .works .work:nth-child(odd) { margin-right: 30px!important }

    .main .work:nth-child(even) { margin-right: 30px!important }

    .contact .content { border-top: 1px solid #DDD; padding-top: 20px; } 

    .map { display: none }

    footer li { border-right: none; line-height: 2; float: none; margin: 1px; padding: 1px; }

    footer nav li { text-align: right }

    footer li:last-child { margin-right: inherit; padding-right: inherit; }

}

/* target the iPhone4 retina display */

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 

    body { min-width: 480px; font-size: 12px; }

    .center { width: 470px }

    .columnthird { width: 100% }

    header#navtop { background-position: 23px 0 }

    header nav ul:last-child { padding-right: 0 }

    #slides { margin-top: 40px }

    .slides_container { width: 470px; /**/height: 290px; }

    .slides_container .slide { width: 470px; /**/height: 290px; }

    .main .work, .works .work { width: 220px; margin-right: 0; }

    .main .work { margin-right: 0!important }

    .work > a { width: 220px; height: 130px; }

    .work .zoom { width: 220px; height: 130px; }

    .column3in { width: 50% }

    .column4in { width: 40% }

    .column2in { width: 56% }

}

/* Style adjustments for viewports 480px and over go here */

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 

    body { min-width: 480px; font-size: 12px; }

    .center { width: 470px }

    .columnthird { width: 100% }

    header#navtop { background-position: 23px 0 }

    header nav ul:last-child { padding-right: 0 }

    #slides { margin-top: 40px }

    .slides_container { width: 470px; /**/height: 290px; }

    .slides_container .slide { width: 470px; /**/height: 290px; }

    .main .work, .works .work { width: 220px; margin-right: 0; }

    .main .work { margin-right: 0!important }

    .work > a { width: 220px; height: 130px; }

    .work .zoom { width: 220px; height: 130px; }

    .column3in { width: 50% }

    .column4in { width: 40% }

    .column2in { width: 56% }

}

@media print { 

    * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }

    pre, blockquote { page-break-inside: avoid }

    thead { display: table-header-group }

    tr, img { page-break-inside: avoid }

    img { max-width: 100% !important }

    p, h2, h3 { orphans: 3; widows: 3; }

    h2, h3 { page-break-after: avoid }

}
.main.center .part.clearfix .column2.mright p {
	font-size: 12px;
}
.one_quarter{display:block; float:left; margin:0 0 0 20px;}
.one_quarter{width:200px;}
.servicess.center.part.clearfix .column4.mright ul li {
	font-size: 13px;
}
.servicess.center.part.clearfix #google-organico p {
	font-size: 13px;
}
.about.center.part.clearfix #navteam p {
	font-size: 13px;
}
.center.part.clearfix h6 {
	font-size: 12px;
	color: #666666;
}
.servicess.center.part.clearfix .columnthird.content p {
	font-size: 13px;
}
.about.center.part.clearfix .columnthird.content #navteam table tbody tr td h5 {
	color: #FFF;
}