body {
margin:0;
color:#646364;
font-size:12px;
line-height:17px;
font-family:"Lucida Sans","Lucida Grande",Lucida,Verdana;
background-color:#1d1d1d;
-webkit-text-size-adjust: none; 	/* disable webkit text size adjust (for iPhone) */
}

img {
border:none;
}

a:active {
outline: none;
}

a{
color:#82a241;
}

a:hover{
color:#646364;
}
 .outer-container-bag { display:none;}
.container {
width:auto;/*875px*/
max-width:875px;
margin:0 auto;
position:relative;
padding:0;
text-align:left;
overflow:hidden;
}

#footer .container { 
padding-left:30px;
}

.container2 {
background:url(web-design-img/shadow-top.jpg) no-repeat top left;
}

#header {
margin:0;
position:relative;
width:100%;
background-color:#1d1d1d;
}

h1#logo span { 
display: none; 
}

h1#logo {
position:absolute;
top:4px;
left:25px;
width:204px;
height:62px;
background-image:url(web-design-img/web-design-logo.jpg);
margin:0;
}

/*<main menu>*/
#menu {
padding-top:45px;
padding-bottom:15px;
margin:0;
float:right;
}

#menu ul {
list-style-type:none;
margin:0;
padding:0;
}

#menu li {
float:left;
margin-right:32px;
}

#menu a{
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size:11px;
color:#CCCCCC;
text-decoration:none;
font-weight:bold;
	-webkit-transition: all 0.3s linear; 
	-moz-transition: all 0.3s linear; 
	-o-transition: all 0.3s linear; 
	transition: all 0.3s linear;
}

#menu a:hover{
color:#9fc54d;
}

#current{
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
font-weight:bold;
color:#9fc54d;
}

/*</main menu>*/

/*<submenu>*/
#submenu {
margin:0 0 10px;
float:left;
padding-top:0px;
padding-left:72px;
}

#submenu ul {
list-style-type:none;
margin:0;
padding:0;
}

#submenu li {
float:left;
margin-right:32px;
}

#submenu a{
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size:14px;
color:#CCCCCC;
text-decoration:none;
font-weight:bold;
}

#submenu a:hover{
color:#9fc54d;
}

#submenu_current{
font-family:"Arial Narrow", Helvetica, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#9fc54d;
}

/*</submenu>*/

/*<main content>*/
#main {
margin:0;
padding:0px;
position:relative;/* or float? */
width:100%;
background:#eaeaea url(web-design-img/web-design-curve.gif) no-repeat;
}

.container3 {
background:  url(web-design-img/shadow-bottom.jpg) no-repeat bottom left;
padding-top:15px;
padding-bottom:20px;
}

/*<home page>*/

/*<main_phrase>*/
#main_phrase {
padding-left:70px;
padding-bottom:8px;
padding-right:20px;
line-height:24px;
}

.we_build {
font-family:Arial, Helvetica, sans-serif;
color:#9fa19e;
font-size:18px;
font-weight:200;
}

.really_work {
color:#4b4b4b;
font-family:Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
margin:0;
}

/*</main_phrase>*/
.banners-ana-next {margin:0 auto;}
/*<small_boxes>*/

#left_column_box {
width:225px;
float:left;

}

h2.header_box {
margin:0px;
background:url(web-design-img/web-design-top-box.png) top left no-repeat;

height:29px;
color:#434242;
font-size:17px;
font-weight:bold;
text-align:center;
padding-top:10px;
}

#center_column_box {
width:225px;
margin:0 30px;

float:left;}
#right_column_box{
width:225px;
float:left;
}

.box_content {
font-size:12px;
line-height:17px;
font-family:"Lucida Sans","Lucida Grande",Lucida,Verdana;
width:168px;
background-color:#e0e0e0;
padding-top:15px;
padding-bottom:50px;
padding-left:27px;
padding-right:27px;
border:#d6d6d6 1px solid;
color:#646364;
}

.number {
color:#333333;
font-weight:bold;}
#wrapper_boxes{
    margin:30px auto;
    overflow: hidden;
    width: 741px;}

#footer {
padding:15px 0px 0px 0px;
position:relative;/* or float? */
width:100%;
height:45px;
background:#eaeaea url(web-design-img/web-design-footer-line.jpg) repeat top left;
}

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

#footer a:hover {
color:#9fa19e;
}

.bug {
clear:both;
}

/*about-services-contact*/
#main_text {
padding-left:28px;
padding-right:28px;
min-height:400px;
clear:both;
}

/*my photo*/

#main_text img {
float:left;
padding-right:15px;
}

.welcome {
padding-left:275px;
font-size:24px;
line-height:24px;
margin:0;
}

.about {
padding-left:275px;
line-height:18px;
}

/*portfolio*/

.portfolio_body {
width:81%;
background:url(web-design-img/line_bg.png) top left repeat-y;
height:425px;
padding-left:20px;
padding-top:15px;
}

.portfolio_img_bg {
background:url(web-design-img/bg_portfolio.gif) top left no-repeat;
height:346px;
padding-left:11px;
padding-top:15px;
}

.ficha {
float:left;
padding-top:10px;
padding-left:5px;
}

.view_site{
float:right;
margin-right:18px;
margin-top:10px;
}

.portfolio_top {
background:url(web-design-img/barra_portfolio.png) top no-repeat;
height:26px;
width:81%;
padding-top:10px;
padding-left:20px;
font-weight:bold;
color:#4B4B4B;
}

.portfolio_bottom {
background:#F9F9F9 url(web-design-img/borde_down_portfolio.gif) bottom no-repeat;
height:22px;
width:686px;
}

/*<services>*/

.left_services {
width:43%;
float:left;
margin-right:25px;
}

.right_services {
width:45%;
float:left;
}

li h3 {
margin:0px 0px 7px 0px;
font-weight:lighter;
font-size:12px;
}

h2.label { 
padding: 0.8em;
text-align:left;

background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top,  #fafafa 0%, #e7e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fafafa 0%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fafafa 0%,#e7e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fafafa 0%,#e7e7e7 100%); /* IE10+ */
background: linear-gradient(top,  #fafafa 0%,#e7e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */

border:1px #d8d9da solid;
color:#9cc04d;
margin-bottom:10px;
font-size:16px;

}

/* form */

#myform {
/*width:360px;*/
padding-top:10px;
margin-bottom:10px;
height:350px;
}

.text {
float:left;
width:245px;
height:25px;
background-color:#1d1d1d;
color:#9fc54d;
text-align: left;
vertical-align: text-top;
margin-bottom:10px;
margin-right:10px;
clear:left;
font-size:14px;
padding-left:15px;
padding-top:10px;
}

input[type="text"],input[type="email"],input[type="tel"] {
padding: 10px;
float:left;
text-align:left;
background:url(web-design-img/line_form.jpg) repeat-x top left;
border:1px #d8d9da solid;
color:#666666;
margin-bottom:10px;
width:303px;
height:18px;
}

#comments_form {
background:#F9F9F9 url(web-design-img/comments_line.jpg) repeat-x bottom left;
color:#666666;
border:1px #d8d9da solid;
float:left;
width:312px;
padding-left: 10px;
}

.submit input {
float:right;
clear:both;
margin-bottom:10px;
border:0;
margin-top:7px;
}

/* </contact> */
#myform form { 
width:600px;
}

/* new portfolio-web-integration*/
ul.integration-list li { margin:15px 10%;}
p.integrator-site { clear:both; margin:10px 10%;}
/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Browser Resets */
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

.myflex {clear:both; width:70%; margin-left:50px; }/* mi clase y mi stylo*/
.flexslider { margin: 0; padding: 0;}
.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
*+html .flexslider .slides > li {display: block;} 
.flexslider .slides img.main-img-portfolio {max-width: 96%; display: block;border: 1px solid #ccc;  -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;padding:2%; 
-webkit-box-shadow:	0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA;
-moz-box-shadow: 0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA;
box-shadow: 0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA;}

.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


.flexslider {background: #fff; zoom: 1;position: relative;padding-left:2%;padding-right:2%;padding-top:2%; border:3px solid #CCCCCC; width: 100%; background:#fafafa;-webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; -webkit-box-shadow:	0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA;
-moz-box-shadow: 0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA;
box-shadow: 0 0 17px #E6E3E3 inset, 0 3px 5px 0 #EAEAEA; }
.outer-flex-a {}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */


/* Direction Nav */
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(web-design-img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li .prev {left: -20px;}

.selection {
	background: #f9f9f9; /* Old browsers */
	background: -moz-linear-gradient(top,  #f9f9f9 0%, #e9e8e8 65%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(65%,#e9e8e8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f9f9f9 0%,#e9e8e8 65%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f9f9f9 0%,#e9e8e8 65%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f9f9f9 0%,#e9e8e8 65%); /* IE10+ */
	background: linear-gradient(top,  #f9f9f9 0%,#e9e8e8 65%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e9e8e8',GradientType=0 ); /* IE6-9 */
	
	height: 25px;
    margin: -2% -2% 3%;
-webkit-border-radius: 8px 8px 0px 0px; -moz-border-radius: 8px 8px 0px 0px; -o-border-radius: 8px 8px 0px 0px; border-radius: 8px 8px 0px 0px; 
border-bottom:1px solid #d8d9da;
color:#4B4B4B;
font-weight:bold;
padding-left: 20px;
padding-top: 10px;

}



img.tablet-iphone { margin-bottom:20px;}
/* MEDIA QUERIES*/

@media (max-width: 1050px) {
	img.tablet-iphone {display:none;}
}

@media (max-width: 770px) {
	.banners-ana-next {display:none; }
	#wrapper_boxes { margin: 0px auto; width: 85%;}
	div[id$="box"]{float:none!important; width:100%!important; margin:0!important; margin-bottom:20px!important; }

	h2.header_box { background-position: center top; }
	.box_content { width:100%; text-align: center; box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */}
	
}

@media (max-width: 670px) {
	.text { display:block; float:none; }
	input[type="text"],input[type="email"],input[type="tel"] { float:none; width:238px; }
	#main_text.contact-page { padding-left:0px; }	
	#myform form { width:240px; margin: 0 auto; }	
	#comments_form { width:249px; }
}

@media (max-width: 640px) {
	#menu li { margin-right: 22px; }
	.welcome { padding-left:0; clear:both; padding:20px 0px; }
	.about { padding-left:0px; }
}

@media (max-width: 580px)  {
	#menu { float:none; padding-top:90px; padding-left:30px; }
	#menu li { float: left; padding-bottom: 30px; margin-right: 40px; }
	.left_services { float:none; width:100%; }
	.right_services { float:none; width:100%; }
}

@media (max-width: 460px) {  
	#menu li { margin-right:25px; }
	.home-h { display:none; }
	#footer .container span { display:block; padding:20px 0 30px 0px; }
	.myflex { margin-left:10%;}
	#submenu { padding-left:36px;}
}

@media (max-width: 460px) {  
	#main_phrase { padding-left:40px;}
	 .outer-container-bag { display:block;}
	#header { z-index:10;}
	#header .container { overflow:visible;}
	#menu { display:none; }
	.outer-container-bag { padding:70px 0 23px 23px;}

	.bag-hover-container { position:absolute; top:109px; border: 1px solid #3A3A40;}
	.bag-hover-container a	{
	text-decoration:none;
	font:15px "Lucida Sans Unicode","Lucida Grande",sans-serif;
		
	color: #818181;
	margin:0px;
	padding:0px;
	height:30px;
	line-height:30px;
	display: block;
   
    padding: 3px 0 3px 21px;
   
    width: 183px;
	border-bottom:1px solid #3A3A40;
		
	background: rgb(38,38,38); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(38,38,38,1) 0%, rgba(38,38,38,1) 45%, rgba(33,33,38,1) 46%, rgba(44,45,50,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(38,38,38,1)), color-stop(45%,rgba(38,38,38,1)), color-stop(46%,rgba(33,33,38,1)), color-stop(100%,rgba(44,45,50,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  rgba(38,38,38,1) 0%,rgba(38,38,38,1) 45%,rgba(33,33,38,1) 46%,rgba(44,45,50,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg,  rgba(38,38,38,1) 0%,rgba(38,38,38,1) 45%,rgba(33,33,38,1) 46%,rgba(44,45,50,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg,  rgba(38,38,38,1) 0%,rgba(38,38,38,1) 45%,rgba(33,33,38,1) 46%,rgba(44,45,50,1) 100%); /* IE10+ */
	background: linear-gradient(-45deg,  rgba(38,38,38,1) 0%,rgba(38,38,38,1) 45%,rgba(33,33,38,1) 46%,rgba(44,45,50,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#2c2d32',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	}
	.current-drop-down {
		
		display: block;
	    padding: 3px 0 3px 21px;
	    width: 183px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-shadow:1px 1px 0 #EEEEEE;
		color:#818181;
		font:15px "Lucida Sans Unicode","Lucida Grande",sans-serif;
		cursor:pointer;

		background: #fcfcfc; /* Old browsers */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,-moz-linear-gradient(top,  #fcfcfc 0%, #d6d6d6 100%); /* FF3.6+ */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,-webkit-linear-gradient(top,  #fcfcfc 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,-o-linear-gradient(top,  #fcfcfc 0%,#d6d6d6 100%); /* Opera 11.10+ */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,-ms-linear-gradient(top,  #fcfcfc 0%,#d6d6d6 100%); /* IE10+ */
		background: url(web-design-img/arrow-drop-down-menu.png) 174px 11px no-repeat,linear-gradient(top,  #fcfcfc 0%,#d6d6d6 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
		;
		
		border:1px solid #c1c1c1;
	}
	.bag-hover-container a:hover { color:#949292;}

}
	
@media (max-width: 260px) {  
	#main_phrase { display:none;}
	)