/* 
Theme Name: Tema JRL
Theme URI: www.jrlingenieria.cl/
Version: 1.0
Author: Alvaro Manthey
*/
@import url(css/bootstrap.css);
@import url(css/reset.css);
@import url(font/font.css);
/* CSS Document */

body {
	margin:0;
	padding:0;	
        }
.limpia {
	clear:both;
	visibility:none;
	}


	
/*---------------CABECERA------------------*/
header {
	width:1180px;
	margin:auto;
	height:150px;
	border-bottom:1px solid #e7e7e7;
	}
header .logo{
	width:400px;
	height:auto;
	float:right;
	margin-right: 120px;
	}
header .logo img{
	margin-top:30px;
	}
header .datos {
	float:right;
	width:auto;
	}
header .datos h1 {
	font-size:16px;
	font-family: 'robotoregular';
	padding:85px 30px 0 0;
	color:#666;
	}
header .datos h1 i {
	padding-right:10px;
	color:#999;
	}
	
	
/*---------------NAVEGACION------------------*/
#menu { 
	width:1180px;
	margin:auto;
	font-family: 'robotoregular';	
	}

.navbar-brand { display:none;}
.navbar-nav { 
	font-size: 20px;
	}
.navbar-brand img {
    	margin-top: -10px;
	}
.navbar-default .navbar-nav li:hover {
	background-color:#f2f2f2;
	}
.navbar .navbar-nav {
  	display: inline-block;
  	float: none;
  	vertical-align: top;
	}
.navbar .navbar-collapse {
  	text-align: center;
	}


/*---------------------BANNER-------------------------*/
#body_banner {
	width:100%;
	margin:auto;
	height:auto;
	}
#banner {
	width:1180px;
	height:auto;
	margin:auto;
	text-align:center;
	}


/*------------------EMPRESA----------------------*/
#empresa {
	width:1180px;
	height:auto;
	margin:auto;
	background-color:#fcfcfc;
	}

#empresa .titulo {
	font-family: 'robotoregular';
	text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #0069a8;
    display: block;
    padding: 50px 20px 20px 10px;
	}
#empresa p {
	font-family: 'robotoregular';
    font-size: 16px;
    line-height: 32px;
    text-align:justify;
    color: #333;
    display: block;
    padding: 5px 60px 30px 60px;
	}
#empresa p strong {
    color: #0069a8;
	font-weight:bold;
	}
#empresa h2 {
	font-family: 'robotoregular';
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #000;
    display: block;
    padding: 5px 20px 10px 10px;
	}
#empresa .fotoemp {
	text-align:center;
	}
#empresa .fotoemp img {
	width:90%;
	height:auto;
	}		

/*-----------------BODY_FINAL-----------------*/
#body_final {
	margin:auto;
	width:100%;
	padding:0;
	bottom: 0;
        position: fixed;
	background-color: #333; 
	}	
#final {
	width:1000px;
	margin:auto;
	height:auto;
	}		
#final p {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
	letter-spacing:0.05em;
	color:#999;
	text-align:center;
	line-height:23px;
	display:block;
	padding-top:10px;
	}
#final p strong {
	font-size:12px;
	color:#fff;
	}	
#final p a {
	color:#FFF;
	}


/*------------------CONTACTO----------------------*/
#body_contacto {
	width:100%;
	height:auto;
	margin:auto;
	}
#contacto {
	width:1180px;
	margin:auto;
	height:auto;
	text-align:center;
	}

.fotocontacto {
	width:1180px;
	text-align:center;
	margin:auto;
	}
.fotocontacto img {
	width:95%;
	height:auto;
	}


#contacto .contexto {
	width:55%;
	height:auto;
	float:left;
	margin-left:2%;
	margin-top:30px;
	}
#contacto .contexto img {
	width:100%;
	height:auto;
	}
#contacto .contexto h4 {
	font-family: 'robotoregular';
    	font-size: 14px;
    	margin-bottom: 10px;
    	text-align: left;
	padding: 0px 10px 0 10px;
    	display: block;
    	color: #333;
	}	
#contacto .contexto h1 {
	font-family: 'robotoregular';
    	font-size: 12px;
    	margin-bottom: 10px;
    	text-align: left;
	line-height: 22px;
	padding: 20px 10px 0 10px;
    	display: block;
    	color: #666;
	}	
#contacto .contexto h1 .azul {
	font-size: 15px;
	color: #0069a8;
	font-weight:bold;
	padding-left:10px;
	}
#contacto .contexto .acceso {
	width:100%;
	margin:auto;
	}
#contacto .contexto .acceso .botacces {
	width:50%;
	height:auto;
	float:left;
	}
#contacto .contexto .acceso .botacces a {
	font-family: 'robotoregular';
    	font-size: 15px;
    	text-align: center;
	padding: 0px;
    	display: block;
    	color: #0069a8;
    	font-weight: bold;
	}


#contacto .formulario {
	width:39%;
	height:auto;
	float:right;
	margin-right:2%;
	margin-top:30px;
	text-align:center;
	background-color:#fafafa;
	border-radius:10px;
	}
#contacto .formulario li {   /*----borrar punto a widget----*/
	list-style-type: none;
	}				
#contacto .formulario h1 {
	font-family: 'robotoregular';
	font-size:13px;
	text-align:left;
	padding-bottom:7px;
	margin-left:9%;
	display:block;
	color:#333;
	}
#contacto .formulario input {
	-webkit-border-radius: 5px;
	margin:auto;
	color:#333;
	padding: 7px 2% 7px 2%;
	font-family: 'robotoregular';
	font-size:14px;
	width:83%;
	margin:0px 5% 15px 5%;
	background-color: #fff;
	border: 1px solid #CCC;
	}
#contacto .formulario input:focus {
	background-color:#fffaf1;
	transition:0.4s;
	}	
#contacto .formulario textarea {
	-webkit-border-radius: 5px;
	margin: 0px 0px 0 0px;
	color: #333;
	padding: 7px 2% 7px 2%;
	font-family: 'robotoregular';
	font-size:14px;
	margin:5px 5% 5px 5%;
	width:83%;
	height: 130px;
	background-color: #fff;
	border: 1px solid #CCC;
	}
#contacto .formulario textarea:focus {
	background-color:#fffaf1;
	transition:0.4s;
	}	
#contacto .formulario .enviar input {
	width:100px;
	color:#FFF;
	background-color:#0069a8;
	font-size:12px;
	float:left;
	margin-left:10%;
	margin-top: 12px;
	padding: 7px 7px 7px 7px;
	font-family: 'robotoregular';
	}
#contacto .formulario .enviar h4 {
   font-family: 'robotoregular';
    font-size: 11px;
    color: #0b68af;
    display: block;
    float: left;
    padding-left: 30px;
    padding-top: 7px;
}
#contacto .formulario .enviar input:hover {
	background-color:#999;
	color:#FFF;
	}
#contacto .formulario .wpcf7-response-output {
	font-family: 'robotoregular';
	font-size:10px;
	display: block;
	color:#CF0A2C;
	border:none;
	margin-top: 40px;
	}
#contacto .formulario .wpcf7-not-valid-tip {
	font-family: 'robotoregular';
	font-size:10px;
	margin-bottom: 10px;
	display: block;
	color:#CF0A2C;
	border:none;
	}					




/*------------------CLIENTES----------------------*/
#clientes {
	width:1180px;
	height:auto;
	margin:auto;
	}

#clientes .titulo {
	font-family: 'robotoregular';
	text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #0069a8;
    display: block;
    padding: 50px 20px 20px 10px;
	background-color:#fcfcfc;
	}
#clientes p {
	font-family: 'robotoregular';
    font-size: 16px;
    line-height: 32px;
    text-align:justify;
    color: #333;
    display: block;
    padding: 5px 60px 30px 60px;
	}

#clientes img {
	width:23%;
	margin:0px 1%;
	float:left;
	}

/*------------------COLABORADORES----------------------*/
#colaboradores {
	width:1180px;
	height:auto;
	margin:auto;
	}

#colaboradores .titulo {
	font-family: 'robotoregular';
	text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #0069a8;
    display: block;
    padding: 50px 20px 20px 10px;
	background-color:#fcfcfc;
	}
#colaboradores p {
	font-family: 'robotoregular';
    font-size: 16px;
    line-height: 32px;
    text-align:justify;
    color: #333;
    display: block;
    padding: 5px 60px 30px 60px;
	}
#colaboradores img {
	width:23%;
	margin:0px 1%;
	float:left;
	}


/*------------------SERVICIOS----------------------*/
#servicios {
	width:1180px;
	height:auto;
	margin:auto;
	}
#servicios .titulo {
	font-family: 'robotoregular';
	text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    color: #0069a8;
    display: block;
    padding: 50px 20px 20px 10px;
	background-color:#fcfcfc;
	}
#servicios .camposervicio {
	width:23%;
	height:auto;
	margin:20px 1%;
	float:left;
	background-color:#f2f2f2;
	}
#servicios .camposervicio img {
	width:100%;
	height:auto;
	}
#servicios .camposervicio h1 {
	text-align:center;
	font-family: 'robotoregular';
	font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #333;
	padding: 10px 0 10px;
	}



/*------------------EXPERIENCIA----------------------*/
#experiencia {
	width:1180px;
	height:auto;
	margin:auto;
	}
#experiencia .titulo {
	font-family: 'robotoregular';
    text-transform: uppercase;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #0069a8;
    display: block;
    padding: 20px 20px 0px 10px;
	}
#experiencia .campoexp {
	width:23%;
	height:auto;
	margin:20px 1%;
	float:left;
	background-color:#f2f2f2;
	}
#experiencia .campoexp .imagen {
	width: 100%;
        height: auto;
	}
#experiencia .campoexp .imagen img {
	width: 100%;
        height: auto;
	}
#experiencia .campoexp .titexp {
    font-family: 'robotoregular';
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #333;
    padding: 10px;
	}


/*--------------------------------------MEDIASCREEN------------------------------------------*/
@media screen and (max-width:1180px) {
	header { width:100%;}
	#menu { width:100%;}
	#banner { width:100%;}
	#empresa { width:100%;}
	#contacto { width:100%;}
	.fotocontacto { width:100%;}
	#clientes { width:100%;}
	#servicios { width:100%;}
	#colaboradores { width:100%;}
	#experiencia { width:100%;}
	#final { width:92%; margin:0 4%;}
	}
	
@media screen and (max-width:920px) {
	header { display:none;}
	.navbar-brand { display:block;}
	.navbar-nav { font-size: 14px;}
	.navbar .navbar-collapse { text-align: left;}
	.navbar .navbar-nav { display:block;}
	#contacto .contexto { width:96%;}
	#contacto .formulario { width:96%;}
	#clientes img {width:44%;margin:0px 3%;}
	#colaboradores img {width:44%;margin:0px 3%;}
	#servicios .camposervicio {width:44%;margin:20px 3%;}
	#experiencia .campoexp { width:44%; height:460px; margin:20px 3%;}
	}

@media screen and (max-width:800px) {
	#experiencia .campoexp { width:44%; height:400px; margin:20px 3%;}
	}
@media screen and (max-width:700px) {
	#experiencia .campoexp { height:auto;}
	}


@media screen and (max-width:600px) {
	#empresa p { padding: 5px 20px 30px 20px;}
	#body_final { position: inherit;}
	#contacto .fotocontacto {display:none;}
	#clientes img {width:90%;margin:0px 5%;}
	#colaboradores img {width:90%;margin:0px 5%;}
	#servicios .camposervicio {width:90%;margin:20px 5%;}
	#experiencia .campoexp {width:90%; margin:20px 5%;}
	}