/* @override http://localhost:8888/charo/css/main.css */
@charset "UTF-8";
/* CSS Document */

/* @group RESET */
html, body{
width: 100%;
}
*{
margin: 0;
padding: 0;
        box-sizing: border-box;
   -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

body{
font-family: 'work sans', sans-serif;
font-size: 1em;
font-weight: 300;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
background-color: #fff;
}

p{}
/* @end */

/* @group LEFTHOME */
#leftHome{
width: 425px;
height: 100%;
display: block;
float: left;
background-color: #004c5a;
}
#homeBg{
margin-bottom:-75px;
position:relative;
}
#langMenu{
	position:relative;
	z-index:10;
}
#leftHome a{
padding: 10px 20px;
display: block;
font-size: 1.3em;
text-align: right;
text-decoration: none;
color: #fff;
}
#leftHome a:hover,
#leftHome a:active{
font-weight: 600;
}

#campo{
display: block;
float: left;
overflow:auto;
}
#campoContainer{
width: 385px;
margin: 0 auto;
display: block;
}
#campoContainer img{
width: 100%;
height: auto;
}
#campoContainer p{
padding: 40px 0 0 75px;
line-height: 1.5em;
color: #808080;
}
#campoContainer p a{
text-decoration: none;
color: #808080;
}
#campoContainer p a:hover,
#campoContainer p a:active{

}
/* @end */

/* @group LEFTBAR */
#leftbar{
width: 280px;
padding: 15px;
display: block;
float: left;
}
#mainLogo{width: 100%;}
#mainLogo img{max-width: 100%;}


h1#sectionName{
margin: 30px 0;
display: block;
font-size: 1em;
font-weight: 500;
text-align: right;
color: #004c5a;
}

#portfolioMenu1{width: 100%;}
#portfolioMenu1 a{
height: 24px;
display: block;
text-align: right;
text-decoration: none;
color: #808080;
}
#portfolioMenu1 a.active,
#portfolioMenu1 a:hover,
#portfolioMenu1 a:active{
color: #53002c;
font-weight: 500;
}
#button-menu{
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: -50px;
background-image: url(../images/icon-menu.png);
background-size: 50px;
cursor: pointer;
}
/* @end */

/* @group CAMPO 0 */
#campo0{
padding: 15px 0;
display: block;
float: right;
position: relative;
}
/* @end */

/* @group NAVBAR */
#navbar{
width: 100%;
height: 85px;
margin-top: 88px;
display: block;
position: relative;
background: #004c5a url(../images/bg-menu1.png) no-repeat top right;
}

nav{
width: 560px;
height: 85px;
position: absolute;
right: 0;
}
nav li{
width: 140px;
max-width: 25%;
display: block;
float: left;
}
nav li a{
width: 100%;
height: 85px;
padding-top: 54px;
display: block;
font-size: 1.25em;
font-weight: 300;
text-align: center;
color: #fff;
text-decoration: none;
        transition: all .1s linear;
     -o-transition: all .1s linear;
   -moz-transition: all .1s linear;
-webkit-transition: all .1s linear;
}
nav li a:hover, nav li a:active{
padding-top: 50px;
border-bottom: 4px solid #a00;
}
/* @end */

/* @group CAMPO 1 */
#campo1{position: relative;}
/* @end */

/* @group PORTFOLIO */

#portfolioMenu1 a{cursor: pointer;}
#description{
width: 100%;
display: block;
position: absolute;
bottom: 0;
}
#pDesc{
width: 100%;
padding: 10px;
font-size: .7em;
text-align: center;
color: #666;
}
#portImg{
display: block;
text-align: center;
background: url(../images/icon-loader.gif) no-repeat center;
}
#portImg img{
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
/*
left: 50%;
*/
}
#prev, #next{
width: 25%;
position: absolute;
top: 0;
cursor: pointer;
        transition: all .1s linear;
     -o-transition: all .1s linear;
   -moz-transition: all .1s linear;
-webkit-transition: all .1s linear;
        opacity:.25;
   -moz-opacity:.25;
-webkit-opacity:.25;
-ms-filter:"alpha(opacity=25)";
filter:alpha(opacity=25);
z-index: 100;
}
#prev{
left: 0;
background: url(../images/icon-prev.png) no-repeat left center;
}
#next{
right: 0;
background: url(../images/icon-next.png) no-repeat right center;
}

#prev:hover,
#prev:active,
#next:hover,
#next:active{
        opacity:1;
   -moz-opacity:1;
-webkit-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
}

/* @end */

/* @group CHARO */
.txt{
padding: 25px 40px 25px 0;
}
.txt h2{
margin-bottom: 1em;
color: #004c5a;
}
.txtCol{}
.txtCol p{
line-height: 1.5em;
margin-bottom: 1em;
color: #555;
}
.justificado p{text-align: justify;}
.txtCol p.downCurr{
margin-top: 30px;
font-size: .75em;
}
.txtCol p.downCurr a img{
margin-right: 3px;
position: relative;
top: 5px;
}
.txtCol p.downCurr a{
color: #999;
text-decoration: none;
}
.txtCol p.downCurr a:hover{
color: #900;
}
/* @end */

/* @group CONTACT */
#contact{
width: 800px;
max-width: 100%;
margin: 40px auto 0 auto;
padding: 40px;
position: relative;
}
#contact .col2{
width: 48%;
margin-right: 4%;
display: block;
float: left;
}
#contact .col2.colLast{
margin-right: 0;
}
input, textarea{
width: 100%;
margin-bottom: 20px;
padding: 10px;
font-size: 1.25em;
border: 1px solid #ccc;
color: #bbb;
border-left: 3px solid #8f1028;
outline: none;
}
textarea{
height: 140px;
resize: none;
}
input:focus, textarea:focus{
border-color: #333;
}
#contact .col2 input{
padding-left: 40px;
}
input#name{
background: url(../images/icon-user.png) no-repeat 10px center;
}
input#mail{
background: url(../images/icon-mail.png) no-repeat 10px center;
}
input#send{
width: 180px;
padding: 15px;
position: absolute;
right: 40px;
top: 264px;
font-weight: 700;
text-align: left;
color: #fff;
border: none;
        border-radius: 5px;
   -moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #ab0d22 url(../images/icon-send.png) no-repeat right center;
cursor: pointer;
        box-shadow: 0px 2px 4px #7d7d7d;
   -moz-box-shadow: 0px 2px 4px #7d7d7d;
-webkit-box-shadow: 0px 2px 4px #7d7d7d;
text-shadow: #600 -1px -1px 0;
}
input#send:active{
        box-shadow: 0px -2px 4px #7d7d7d;
   -moz-box-shadow: 0px -2px 4px #7d7d7d;
-webkit-box-shadow: 0px -2px 4px #7d7d7d;
}
p.error{
margin-bottom: 0;
font-weight: 500;
color: #900;
}
#formB{
display: none;
}
#formB h3{
margin-bottom: 15px;
font-size: 2em;
color: #004c5a;
}
#formB p{
font-size: 1.25em;
line-height: 1.5em;
}
/* @end */

/* @group FOOTER */
footer{
display: block;
margin-left: 296px;
padding-top: 15px;
padding-bottom: 60px;
}
footer #data{
width: 550px;
margin: 0 auto;
display: block;
}
footer p, footer p a{
font-size: 1.1em;
color: #808080;
text-decoration: none;
}
footer p a:hover, footer p a:active{
color: #900;
}

.linkedIn a{
width: 32px;
height: 32px;
display: block;
position: relative;
top: -34px;
left: 300px;
background: #000 url(../images/social-li.png) no-repeat 0 0;
}
.linkedIn a:hover{
background-position: -32px 0;
}


footer .linkedIn a{
top: -34px;
left: 550px;
background: #000 url(../images/social-li.png) no-repeat 0 0;
}
/* @end */

/* @group CLASSES */
.cb{clear: both;}
.dark{
font-weight: 500;
color: #666;
}
/* @end */



/* - - - - - - - - - - - - - - MEDIA QUERY */
@media (min-width: 1201px){
}
/* - - - - - - - - - - - - - - MEDIA QUERY */
@media (max-width: 1200px){
}
/* - - - - - - - - - - - - - - MEDIA QUERY */
@media (max-width: 992px){
	footer .linkedIn a{
	top: auto;
	left: auto;
	}
}
/* - - - - - - - - - - - - - - MEDIA QUERY */
@media (max-width: 860px){
	#leftHome{
	width: 100%;
	height: 160px !important;
	background: #004c5a url(../images/m-bg-home.png) no-repeat right top;
	background-size: 100% 100%;
	}
	#homeBg{display: none;}
	#langMenu{
	top: 0 !important;
	padding-top: 113px;
	text-align: right;
	}
	#leftHome a{
	width: 130px;
	display: inline-block;
	text-align: center;
	}
	#button-menu{
	right: 0;
	}
	#campo{
	width: 100% !important;
	padding-top: 40px;
	float: none;
	}
	#campoContainer{
	margin-top: 0 !important;
	max-width: 100%;
	}

	#mainLogo{
	display: none;
	}
	
	#campo0,
	#campo1{
	width: 100% !important;
	padding-top: 0;
	display: block;
	}
	#campo1{
	margin-top: 50px;
	height: auto !important;
}

	#navbar{
/*	height: 85px;*/
	margin-top: 0;
	background: #004c5a url(../images/bg-menu1.png) no-repeat top right;
	}

	#leftbar{
	width: 100%;
	height: 50px !important;
	padding: 18px 0;
	position: absolute;
	top: 85px;
	z-index: 110;
	background-color: #e5edee;
	}
	
	h1#sectionName{
	margin: 0;
	margin-left: 30px;
	text-align: left;
	}

	#portfolioMenu1{
	position: relative;
	right: -100%;
	top: 13px;
	}
	.portfolioMenuCol{
	width: 50%;
	float: left;
	background-color: #fcfcfc;
	}
	#portfolioMenu1 a{
	height: auto;
	padding: 12px 0 12px 30px;
	text-align: left;
	border-bottom: 1px solid #ccc;
	}
	#portfolioMenu1 a:hover,
	#portfolioMenu1 a:active{
	font-weight: 500;
	color: #fff;
	background-color: #004c5a;
	}
	#portfolioMenu1 a.active:active,
	#portfolioMenu1 a.active:hover{
	color: #53002c;
	background-color: #fcfcfc;
	}
	#description{position: relative;}
	.txt{
	margin-left: 30px !important;
	padding-right: 30px;
	}
	footer{
	width: auto !important;
	margin-left: 30px;
	}
	footer #data{
	width: auto;
	margin: 0;
	}	
	#contact{
	padding: 30px;
	}
	#contact .col2{
	width: 100%;
	margin: 0;
	}
	#contact .col2.colLast{
	margin: 0;
	}
	input#send{
	right: 30px;
	top: 318px;
	}
	p.error{
	margin-top: 66px;
	}
}

/* - - - - - - - - - - - - - - MEDIA QUERY */
@media (max-width: 560px){
	nav{
	width: 100%;
	}
	nav li{
	width: 25% !important;
	}
	nav li a{
		font-size: 16px;
	}
	.portfolioMenuCol{
	width: 100%;
	}
}

@media print{}