/*

*/

html, body{
	margin:0px;
	height:100%;
	background-color: #ffffff;
}

img{
	border: 0;
	max-width: 100%
}

a{
	text-decoration: none;
	color: #FF9933;
}

a:hover{
	text-decoration: none;
}

a.botones {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	font-size: 14px;
	font-weight:400;
	line-height: normal;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	display: inline-block;
}

a.botones:hover{
	color: #FFFFFF;
	background: #CC6633;
}

.boton-blanco {color: #FF9933; background: #FFFFFF;}
.boton-color { color: #FFFFFF; background: #FF9933;}
.boton-gris { color: #FFFFFF; background: #999999;}


a.botones2 {
	font-family: 'Open Sans', sans-serif;
	text-decoration: none;
	font-size: 12px;
	font-weight:400;
	line-height: normal;
	color: #FFFFFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border: 1px solid #FFFFFF;
	display: inline-block;
}

a.botones2:hover{
	color: #000000;
	background: #FF9933;
	border: 1px solid #FF9933;
}


h2, h3, h4, h5 {
	font-family: 'Lato', sans-serif;
	color: #666666;
	font-weight: 400;
}

p {
	font-family: 'Open Sans', sans-serif;
	color: #666666;
	font-weight: 400;
}


h2{	font-size: 48px; line-height: 45px;}
h3{	font-size: 36px; line-height: 31px;}
h4{	font-size: 24px; line-height: 5px;}
h5{	font-size: 18px; line-height: normal;}

.light { font-weight: 300;}
.bold {	font-weight: 900;}
p.bold { font-weight: 700;}

p{ font-size: 12px; line-height: normal;}
p.small{ font-size: 11px;}
p.large{ font-size: 14px;}

.white{ color: #FFFFFF}
.color{ color: #FF9933}

/* ==================================================
   HEADER
================================================== */

#header{
	background-color: #ffffff;
	height: 60px;
	width: 100%;
	position: fixed;
	z-index: 100;
}

#header .content{
	max-width: 1260px;
	position: relative;
	margin:	auto;
}


#logo{
	position:absolute;
	top: 0px;
	left: 30px;
	z-index: 100;
}

#redes{
	position:absolute;
	top: 25px;
	right: 30px;
	z-index: 100;
}

/* ==================================================
   SLIDER
================================================== */

.slider-content {
	position: relative;
	top: 45%;
	width: 100%;
	z-index: 3;
	max-width: 1260px;
	margin: auto;
}


.slider-content .desc{
	margin: 0 30px;
  	max-width: 560px;
}

.slider-content h2 {
	margin-bottom: -10px;
	margin-top: 10px;
}

.slider-content h5 {
	margin-top: 12px;
}


.slider-content a.botones {
	padding-right: 40px;
	padding-left: 40px;
}


/* ==================================================
   GENERAL
================================================== */

.main{
	max-width: 1260px;
	position: relative;
	margin: 60px auto;
	overflow: hidden;
}


.columna-big{
	width: 50%;
	float: left;
}

.columna-small{
	width: 25%;
	float: left;
}

.columna-menu{
	width: 25%;
	float: left;
}

.columna-menu-responsive{ display: none;}
.columna-menu-responsive h5{margin-bottom:10px;}

.SelectStyle {
	width: 100%;
	position: relative;
}

.columna-menu-responsive select {
	width: 100%;
	background: #fff;
	color: #000;
	padding: 5px;
	font-size: 13px;
	line-height: 100%;
	border: 1px solid #ccc;
	border-radius: 0;
	height: 30px;
	-webkit-appearance: none;
}

.columna-menu-responsive option {
	padding: 10px;
}

.SelectStyle:after {
	width: 30px;
	height: 30px;
	display: block;
	content: '';
	position: absolute;
	top: 0;right: 0;
	pointer-events: none;
	border: 1px solid #ccc;
	background:#fff;
	background-image: url('http://www.ideup.com/sites/all/themes/ideup/img/bullet--arrow--down.gif');
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


.columna-content{
	width: 75%;
	float: left;
	margin-top: 20px;
}

.columna-info{
	padding: 0 30px;
}

.separador-dot{
	background-image: url(../images/separador-dot.gif);
	background-repeat: repeat-x;
	height: 3px;
}


/* ==================================================
   ESTUDIO
================================================== */

#estudio{
	background-color: #ff9933;
	width: 100%;
	overflow: hidden;
}

#estudio h3{
	margin-bottom: -15px;
	margin-top: 15px;
}

/* ==================================================
   PORTFOLIO
================================================== */

#portfolio{
	width: 100%;
	overflow: hidden;
}

#portfolio .box {
line-height: 0px;
}

/* ==================================================
   PORTFOLIO Hoover Efect
================================================== */

.view {
   margin: 0px;
   float: left;
   border: 0px
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.view .contenido {
	position: absolute;
	width: 100%;
	top: 50%;
	margin-top: -60px;
}

.view .nombre {
	color: #fff;
	text-align: center;
	position: relative;
	font-family: 'Lato', sans-serif;
	font-size:18px;
	font-weight: 900;
	line-height: normal;
	padding: 0px;
}

.view .rubro {
	color: #fff;
	text-align: center;
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-size:11px;
	line-height: normal;
	margin-bottom: 20px;
}

/* ==================================================
   SERVICIOS
================================================== */

#servicios{
	background-color: #ffffff;
	width: 100%;
	overflow: hidden;
}

#servicios .main{
	margin: 0 auto;
}

#servicios h3{
	margin-bottom: -15px;
	margin-top: 15px;
}

#servicios h4{
	margin-bottom: -15px;
}

#servicios p{
	margin-top: 30px;
}

#servicios .columna-info{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FF9933;
	background-image: url(../images/corner.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding: 60px 30px;
	height: 300px
}

#servicios .separador-dot{
  	margin: 20px 0px -9px 0px;
}

/* ==================================================
   CLIENTES
================================================== */

#clientes{
	background-color: #ff9933;
	width: 100%;
	overflow: hidden;
}

#clientes h3{
	margin-bottom: -15px;
	margin-top: 15px;
}

#clientes p{
	margin-top: 30px;
}

#clientes .client{
	width: 25%;
	float: left;
}

#clientes .clientname{
	margin: 10px;
	border: 1px solid #FFFFFF;
  	text-align: center;
}


/* ==================================================
   UBICACION
================================================== */

#ubicacion{
	width: 100%;
	overflow: hidden;
	height: 400px;
}

#ubicacion .columna-big{
	float:right;
}

#ubicacion .columna-info{
	padding: 0 40px;
}

#ubicacion .frame{
	background-color: #ff9933;
	line-height: 0px;
	overflow: hidden;
	position: relative;
	margin-bottom: 10px;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:    5px 5px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow:         5px 5px 5px 0px rgba(0, 0, 0, 0.5);
}


#ubicacion .pic{
	width: 50%;
	float:left;
}

#ubicacion .adress{
	width: 50%;
  	position: absolute;
  	left: 50%;
  	bottom: 0px;
  	display: block;
	margin: 30px;
}

#ubicacion h4{
	margin-top: -15px;
}

#map_canvas{
	width:100%;
	height:400px;
	position:absolute;
	display:block;
}

#map_canvas_2{
	display: none;
}

#map_canvas_3{
	display: none;
}

/* ==================================================
   CONTACTO
================================================== */

#contacto{
	width: 100%;
	overflow: hidden;
}

#contacto h3{
	margin-bottom: -15px;
	margin-top: 15px;
}

#contacto p{
	margin-top: 30px;
}

#followbuttons {
  	margin-top: 30px;
}

#followbuttons a.botones {
	width: 50%;
	min-width: 180px;
  	margin-bottom: 10px;
	padding-left: 50px;
}

a.botones.facebook:hover,
a.botones.linkedin:hover,
a.botones.google:hover {
	background: #FF9933;
}

#followbuttons .facebook{
	background-image: url(../images/ico-facebook-bg.png);
	background-repeat: no-repeat;
	background-position: left center;  	
}

#followbuttons .linkedin{
	background-image: url(../images/ico-linkedin-bg.png);
	background-repeat: no-repeat;
	background-position: left center;  	
}

#followbuttons .google{
	background-image: url(../images/ico-google-bg.png);
	background-repeat: no-repeat;
	background-position: left center;  	
}




.form{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: #666666;
	width: 100%;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	padding: 2px 4px;
	margin-bottom: 15px;
}

.form2{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	color: #666666;
	width: 100%;
	height: 136px;
	background-color: #FFFFFF;
	border: 1px solid #999999;
	margin-bottom: 15px;
	padding-top: 2px;
	padding-right: 4px;
	padding-bottom: 2px;
	padding-left: 4px;
}


#enviar{
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    display: inline-block;
	cursor: pointer;
	border: 0;
	float: left;
}

#enviar:hover {
    color: #FFFFFF;
    background: #CC6633;
}

p#mensaje-form {
    float: left;
    margin-top: 0px;
    margin-left: 20px;
}
/* ==================================================
   PROJECT
================================================== */

#project{
	width: 100%;
	overflow: hidden;
	background-color: #f7f7f7;
}

#project .desc{
	margin: 30px 0px;
}


#project h3{
	margin-bottom: -15px;
	margin-top: 15px;
}

#project p{
	margin-top: 30px;
}

#project ul {
	padding: 0px;
	list-style:none;
}

#project li a{
	font-size: 12px;
	line-height: normal;
	font-family: 'Open Sans', sans-serif;
	color: #666666;
	font-weight: 400;
	display: block;
	margin-bottom: 2px;
	padding: 4px 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #cccccc;
}

#project li a:hover{
	background-color: #cccccc;
}

/* ==================================================
   FOOTER
================================================== */

#footer{
	background-color: #000000;
	width: 100%;
	overflow: hidden;
}

#footer .main{
	margin: 30px auto;
}

#logofooter{
	top: 15px;
	left: 20px;
}

#copyright{
	font-family: 'Open Sans', sans-serif;
	font-size: 10px;
	font-weight: 400;
	color:#666666;
	line-height: 11px;
}

#footer a{
	color: #cccccc;
}

#footer a:hover{
	color: #ff9933;
}



/* ==================================================
   MEDIA
================================================== */

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



}

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

h2{	font-size: 40px; line-height: 38px;}
h3{	font-size: 30px; line-height: 27px;}
h4{	font-size: 20px; line-height: 8px;}
h5{	font-size: 15px; line-height: normal;}

}

@media only screen and (max-width: 1093px) {
#redes { right: 70px;}

}

@media only screen and (max-width: 1053px) {
#redes { right: 50px;}

}

@media only screen and (max-width: 1023px) {
.columna-small { width: 33.33%;}

#servicios-first { width: 100%;}
#servicios-first .columna-info { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF9933; height: 150px;}


#clientes .client {  width: 33.33%;}

#ubicacion .adress {  margin: 15px;}
#ubicacion a.botones {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-top: -10px;
}

}

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

}

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

.columna-big { width: 100%;}
#clientes .client {  width: 25%;}
#estudio-second{ margin-top: 30px;}
#clientes-second{ padding: 20px;}
#contacto-second{ margin-top: 30px;}

.columna-small { width: 50%;}
#servicios-first { width: 50%;}
#servicios-first .columna-info { height: 300px;}
#servicios .columna-info { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #FF9933;}



#map_canvas{
	display: none;
}

#map_canvas_2{
	display:block;
	width:100%;
	height:630px;
	position:absolute;
}

#map_canvas_3{
	display: none;
}

#ubicacion{	height: 630px;}
#ubicacion .columna-info { margin-top: 220px;}
#ubicacion .adress {  margin: 30px;}
#ubicacion a.botones {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  margin-top: 0px;}


}

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

.columna-menu { display: none;}
.columna-menu-responsive{ display: block;}
.columna-content { width: 100%;}

}


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

.columna-small { width: 100%;}
#servicios-first { width: 100%;}

}

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

#ubicacion .adress {  margin: 15px;}
#ubicacion a.botones {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-top: -10px;
}

}

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

#clientes .client {  width: 33.33%;}
#logo { width: 180px; margin-top: 8px; left: 10px;}

}

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

#map_canvas{
	display: none;
}

#map_canvas_2{
	display: none;
}

#map_canvas_3{
	display:block;
	width:100%;
	height:770px;
	position:absolute;
}

#ubicacion{	height: 770px;}
#ubicacion .pic {  width: 100%; float: none;}
#ubicacion .adress {  width: 100%;  position: relative;  left: 0; margin-top: 35px;}

.slider-content {
    top: 25%;
  }
  
}

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

#redes { display: none;}

}


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

}