/* CSS Document */
::selection{
    color: #fff;
    background: #80c3d1;
}

.center{text-align:center;}

.body {
	background:#FCFCFC;
	font-family: 'pen Sans', sans-serif;
	-webkit-font-smoothing: antialiased; 
	text-rendering: optimizeLegibility;
}


.cabecera{
	background: linear-gradient(to right, #a5f0e9, #07b7e7);
}

.sf-menu{
	background-color: #dde2e7;
}

.columna1{
    background:#4a88c2e1;
}

.columna2{
    background:#34f0e6;
}

.columna3{
    background:#f35d06;
}

.columna4{
    background:#32f0d6e0;
}


.sf-menu ul li{
	list-style: none;
	
	
}

.sf-menu ul li a{
	display: block;
	padding: 10px 0;
	text-decoration: none;
	font-weight: 100;
	color: #ccc;
	background: #f9fbfc;
	font-size: 18px;
	
	transition: .1s;
	border: 1px solid rgb(31, 163, 42);
}

.sf-menu hover ul li a{

	color: #E0E0E0;
}


.sf-menu ul li a:hover{
	color: rgb(204, 204, 204);
	transform: scale(1.1);
	background: #4099FF;
	border: 1px solid #3e8ae8;
}


p, li {
	color:#282828;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-rendering:auto;
	text-align: center;
}
a { 
	color:#f5f7f8;
}
a:hover { 
	color:#3e8ae8;
}



h1, h2,  h5, h6 {
	color:#282828;
	font-family: 'PT Sans Caption', sans-serif;
}

h4 {
	color:#f70808;


}

h3 {
	align-content: center;
}

h1.page-title{
	font-size: 1.5em;
	
}
.call {
	background:#80c3d1;
	padding-top:5px;
	padding-bottom:10px;
}

.contactoips{
	margin-top: 20px;
	text-align-last: right;
	color: #fcf9f9;
  }

.menu-title{
	color: #fcf9f9;
}
.call span {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1px;
	color:#FFFFFF;
	font-weight:bold;
	float:right;
	margin-top:7px;
}
.header {
	background:url(../images/header-bg.png) repeat-x;
}


/*Iconos de Redes Sociales */

.redes-container {
	display: flex;
	height: 10vh;
	align-items: center;
	justify-content: center;
}

.redes-container ul li{
	display: inline-block;
	margin: 0 5px;
	width: 30px;
	height: 50px;
	text-align: center;

}

.redes-container ul li a{
	display: block;
	padding: 0 5px;
	background: rgb(88, 83, 83);
	color: #fff;
	line-height: 50px;
	font-size: 10px;
	box-shadow: 0 3px 5px 0px rgba(0, 0, 0, 2);
}

.redes-container ul:hover a{
	filter: blur(2px);
}

.redes-container ul li a:hover{
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 5px 5px 0px rgba(0, 0, 0, 4);
	filter: none;
}

.redes-container ul li .facebook:hover{
	background: rgb(5, 26, 212);
}

.redes-container ul li .instagram:hover{
	background: rgb(240, 79, 4);
}

.redes-container ul li .twitter:hover{
	background:rgb(29, 161, 242)
}

.redes-container ul li .linkedin:hover{
	background: rgb(0, 115, 177);
}


/*BARRA DE NAVEGACION ANIMADA*/

nav {
	margin: 0px auto 0;
	position: relative;
	width: 1000px;
	height: 50px;
	background: linear-gradient(to right, #e9b4ad, #f00404);
	border-radius: 8px;
	right: 100px;
	font-size: 0;
	left: 10px;

	
}
nav a {
	line-height: 50px;
	height: 100%;
	font-size: 15px;
	display: inline-block;
	position: relative;
	z-index: 1;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: white;
	cursor: pointer;
	margin-right:50px;
	margin-left: 30px;
}
nav .animation {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: 0;
	transition: all .5s ease 0s;
	border-radius: 8px;
}


/*  ANIMACION DE LA BARRA DE MENU*/
nav .start-home, a:nth-child(1):hover~.animation {
	width: 120px;
	left: 90;
	background-color: #426b63;
}
nav .start-about, a:nth-child(2):hover~.animation {
	width: 160px;
	left: 140px;
	background-color: #7ef166;
}
nav .start-blog, a:nth-child(3):hover~.animation {
	width: 210px;
	left: 350px;
	background-color: #063250;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
	width: 160px;
	left: 600px;
	background-color: #9032b4;
}
nav .start-contact, a:nth-child(5):hover~.animation {
	width: 100px;
	left: 790px;
	background-color: #e67e22;
}


.etiqueta{
	background-color: #eb0909;
	
}


/*FLEBOX DE NOTICIAS*/

.flex{
	display: flex;
	background-color: #313333;
	background: linear-gradient(to right, #e9b4ad, #f00404);
	height: 300px;
	justify-content: space-between;	
	margin: 0px auto 0;
	position: relative;
	width: 1000px;
	height: 200px;
	align-items: center;
}

.contenido-1{
	background-color: #fdfdfdbb;
	height: 150px;
	width: 300px;
	border: 1px solid;

	margin: 0px auto 0;
	position: relative;
	
}

.contenido-2{
	background-color: #0dcaf0;
	height: 150px;
	width: 300px;
	border: 1px solid;

	margin: 0px auto 0;
	position: relative;
	
}

.contenido-3{
	background-color: #ffc107;
	height: 150px;
	width: 300px;
	border: 1px solid;

	margin: 0px auto 0;
	position: relative;
	
}
.contenido-4{ 
	background-color: #fd7e14;
	height: 150px;
	width: 300px;
	border: 1px solid;

	margin: 0px auto 0;
	position: relative;
	
}

.ubicacion{
	
		display: flex;
		height: 300px;
		justify-content: space-between;	
		margin: 0px auto 0;
		position: relative;
		width: 1000px;
		height: 200px;
	
	}

.theme-credits{
	background: linear-gradient(to right, #a5f0e9, #07b7e7);
	font-size: smaller;
}

.construccion{
	display: flex;
	height: 300px;
	margin: 100px auto 0;
	width: 500px;
	height: 200px;
	align-items: center;
}

.profesional{
	display:inline-block;
	background: linear-gradient(to right, #a5f0e9, #07b7e7);
	margin: 5px auto 0;
	width: 160px;
	height: 190px;
	text-align: center;
	margin: 0px auto 0;
	position: relative;
	right: 100px;
	left: 180px;

}


.img-fluid{
	width:160px;
    height:160px;
    border-radius:950px;
	border: 3px solid #948686;
	margin: 0px auto 0;
	right: 100px;
	left: 180px;
}

.titulo{
	margin: 80px auto 0;
	position: relative;
	width: 1000px;
	height: 50px;
	background: linear-gradient(to right, #a5f0e9, #07b7e7);
	border-radius: 8px;
	right: 100px;
	font-size: 20px;
	left: 0px;
	text-align: center;
	}

.container{
	margin: 0px auto 0;
	position: relative;
	right: 100px;
	left: 180px;
}


/* Ajustes generales ACORDEON */
ul.acordeon * {
	margin: 0px auto 0;
	position: relative;
	font-family: Arial, sans-serif;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	}
	/* Contenedor general */
	ul.acordeon {

	margin: 1px auto 0;
	position: relative;
	right: 500px;
	left: 100px;

	width: 50%; /* Personalizar ancho total */
	overflow: hidden;
	padding: 0;
	background: linear-gradient(to right, #a5f0e9, #07b7e7);
	text-align: center;
	list-style: none;
	font-size: 0;
	box-shadow: 0 0 10px #333;
	}
	/* Cada elemento */
	ul.acordeon li {
	position: relative;
	display: inline-block;
	*display: inline; zoom: 1; /* IE7 */
	width: 10%;
	height:0;
	padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
	background: #eee;
	text-align: center;
	box-shadow: -2px 0px 8px #999;
	}
	/* Títulos pestañas */
	ul.acordeon li h4 {
	position: relative;
	top: 0;
	z-index: 1;
	margin: 0;
	font-size: 18px;
	text-align: left;
	text-transform: uppercase;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 10% 120%;
	-moz-transform-origin: 10% 120%;
	transform-origin: 10% 120%;
	white-space: nowrap;
	}
	/* Contenido inicialmente oculto */
	ul.acordeon li a, ul.acordeon li img {
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-block;
	*display: inline; zoom: 1; /* IE7 */
	width: 0%;
	padding:0;
	background: #333;
	}
	/* Hover: Desplegamos elemento aumentando su ancho */
	ul.acordeon li:hover {
	width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
	background: #333;
	}
	/* Hover: Hacemos que el título recupere la horizontal y le ponemos un fondo */
	ul.acordeon li:hover h4 {
	top: 200px;
	padding-left: 10px;
	background: rgba(143,34,80,.8);
	color: #eee;
	-webkit-transform: none;
	-moz-transform: none;
	transform: none;
	}
	/* Hover: Expandimos el contenido */
	ul.acordeon li:hover a, ul.acordeon li:hover a img {
	width: 90%;
	}
	/* Ajustes para resoluciones pequeñas */
	@media(max-width:600px) {
	ul.acordeon li h4 {
	font-size: 12px;
	letter-spacing: 1px;
	}
	}






























	/*Demo 1


.ubicacion{
	margin: 0px auto 0;
	position: relative;
	display: block;
	padding: 0px;
	font-weight: 100;
	height: 300px;
	margin: 0px auto 0;
	width: 1000px;
}


.ubicacion1{
	float: right;
	margin: 0px auto 0;
	position: relative;
	display: block;
	padding: 0px;
	font-weight: 100;
	height: 500px;
	margin: 0px auto 0;
	width: 800px;
}

*/




/*
ul#demo1 li a {
	transition: transform 0.2s linear;
  }
  
  ul#demo1 li:hover a {
	transform: translateY(-10px);
  }
  




.logo{
	left: 50px;
	

}

.logo {
	margin-top:1px;
	margin-bottom:1px;
}
.topmenu {
	background:url(../images/menu-bg.png) repeat-x;
}
.slideshow {
	margin:0;
	background:url(../images/slider-bg.png);
}
.intro {
	background:#FCFCFC;
}
.content {
	background:#f9f7f7;
	padding-top:30px;
	padding-bottom:30px;
}
.content-sub-page {
	background:#FCFCFC;
	padding:30px 0px 30px 0px;
}

h2.sub-title {
	font-size: 18px;
	line-height: 2em;
	margin-bottom: 22px;
}
.content h2 {
	font-size: 18px;
	line-height: 2em;
	margin-bottom: 22px;
}
.content-below {
	padding-top:40px;
	background:#FCFCFC;
	padding-bottom:50px;
}
.row .row.group {
	padding-top:30px;
	padding-bottom: 10px;
}
.group h3 {
	font-family: 'PT Sans Caption', sans-serif;
	font-size:18px;
	font-weight:400px;
	text-align:center;
}
.group p {
	text-align:center;
}
.group span {
	text-align:center;
}
.more {
	background:url(../images/more-bg.png) repeat-x;
	color:#282828;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	border:1px solid #ccc;
	text-align:center;
}
.more:hover {
	color:#3e8ae8;
	border:1px solid #ccc;
}
.welcome-box {
	background:#f9f7f7;
}
.welcome-box p {
	margin-right:10px;
}
.description {
	width:70%;
	float:left;
}
.about-container img {
	background-color:#000000;
	opacity:0.4;
	filter: alpha(opacity=400);
	transition:2s;
	cursor:pointer;
}
.img-wrapper {
	background: #000;
	margin-bottom: 20px;
}
.about-container img:hover {
	opacity:1;
}
.desc-img {
	float:right;
	margin-top:10px;
	width:30%;
}
.desc-img img {
	border:10px solid #f0f0f0;
}
.description h3 {
	color:#272727;
	font-family: 'PT Sans Caption', sans-serif;
	font-size:24px;
	
}
.description span {
	color:#cdc7c7;
}
.testimonial span {
	/*position:relative;
	top:55px;
}
.services h3, .company-news h3, .testimonial h3 {
	color:#414141;
	font-family: 'PT Sans Caption', sans-serif;
	font-size:24px;
	
}

.readmore-container {
	margin-top:35px;
	display:block;
}

.clr {
	clear:both;
}
.readmore {
	background:url(../images/readmore.png) repeat-x;
	padding:9px;
	color:#282828;
	font-family: 'PT Sans Caption', sans-serif;
	font-size:12px;
	text-align:center;
	border-radius:2px;
	-webkit-font-smoothing: antialiased; 
	text-rendering: optimizeLegibility;
}
.readmore:hover {
	color:#3e8ae8;
}
.company-news p {
	text-align:left;
	margin:0;
}
.row .row.company-box{
	margin-bottom: 20px;
}
.company-description {	
	text-align:justify;	
}
.company-description p.title {
	font-weight:bold;
	font-size:14px;
	font-family:'PT Sans Caption', sans-serif;
}
.company-description p.date {
	font-size:10px;
}
.readmore-container2 {
	margin-top:38px;
	display:block;
}
.testimonial p {
	overflow:hidden;
}
.testimonial p.title {
	font-family: 'PT Sans Caption', sans-serif;
	font-size:18px;
	margin:10px 0px 10px 0px;
}
.author {
	
	float:right;
}
.testimonial {
	margin-bottom:32px;
}
.testimonialslider li div.title {
	float:right;
	
}

li.bullet {
	background: url(../images/arrow.png) no-repeat;
	list-style: none;
	padding-left: 20px;
	background-position: 0px 3px;
	padding-bottom: 10px;
}
.vcard li{
	font-family: 'Open Sans', sans-serif;
	font-size:14px;	
}
.vcard li.fn{
	font-size: 18px;
}

.footer {
	background:#f9f7f7;
	padding-top: 30px;
}

.footer .theme-credits{
	text-align: center;
	background: #ddd;
	padding: 10px 0;
	margin-top:30px;
}
.footer .theme-credits p{
	margin-bottom: 0;
}
.contact h3, .information h3, .quick-contacts h3 {
	color:#282828;
	font-family: 'PT Sans Caption', sans-serif;
	font-size:24px;
	
}
.contact-icons {
	padding-bottom:60px;
}
.contact-icons ul {
	margin:10px 0px 0px 0px;
}
.contact-icons ul li {
	list-style:none;
	float:left;
	width:50%;
	height: 30px;
}

.error-msg{
	border-color: rgb(236, 173, 194) !important;
	background: rgb(255, 229, 242) !important;
}
/********************sidebar*****************
.sidebar ul{
	margin-left: 0;
}

#map_canvas {
	display:block;
	height:300px;
	width:100%;
}
.phone1 {
	background:url(../images/phone1.png) no-repeat;
	padding-top:2px;
	padding-left:35px;
}
.phone2 {
	background:url(../images/phone2.png) no-repeat;
	padding-top:2px;
	padding-left:35px;
}
.email {
	background:url(../images/email.png) no-repeat;
	padding-top:2px;
	padding-left:35px;
}
.fax {
	background:url(../images/fax.png) no-repeat;
	padding-top:2px;
	padding-left:35px;
}
.contact p {
	margin-top:20px;
}
.social-icons ul {
	margin:0px 0px 0px 0px;
}
.information ul {
	margin:0px 0px 0px 0px;
}
.information ul li {
	background:
 url(../images/arrow.png) no-repeat;
	list-style:none;
	padding-left:20px;
	background-position:0px 3px;
	padding-bottom:10px;
}
.quick-contacts table {
	background:0;
	border:0;
	width:100%;
	margin:0;
	padding:0;
}
.quick-contacts table tr {
	margin:0;
	padding:0;
}
.quick-contacts table td {
	margin:0;
	padding:0;
}
.quick-contacts input[type="text"] {
	border:1px solid #000;
	background:#f2f0f0;
	margin:0;
}
.quick-contacts input[type="submit"] {
	border:0;
	background:#000000;
	color:#FFFFFF;
	padding:7px;
	font-family: 'PT Sans Caption', sans-serif;
	font-size:12px;
	font-weight:normal;
	cursor: pointer;
}
.quick-contacts textarea {
	border:1px solid #000;
	height:115px;
	background:#f2f0f0;
}

.quick-contacts div.quick-form-captcha{
	display: none;
	padding:40px;
}

.quick-contacts div.quick-form-captcha h4{
	color: #ddd;
}

.form-captcha-button.button{
	margin-top: 30px;
}
/*#recaptcha_container{display: none;}
div.about-container #recaptcha_area img {
	opacity:1;
}
#contact-form input.button{
	padding: 10px 30px;
	border-radius: 50px;
}
.vcard{
	display: block;
}
.company-name {
	font-size:15px;
	font-weight:bold;
	font-family: 'PT Sans Caption', sans-serif;
}
#recaptcha_response_field {
    border-color: #E0E0E0 !important; 
  }
button.captcha-submit{ margin-top:20px;border-radius: 5px;}
#recaptcha_table{width:100%}
@media only screen and (max-width: 800px){
	.sf-menu a{
		padding-left:18px;
		padding-right: 18px;
	}
	.information,.quick-contacts{
		margin-top: 40px;
	}
}

@media only screen and (max-width: 640px){
	.company-news{
		width:50%;
		margin-top:40px;
	}
	.testimonial{
		width:50%;
		margin-top:40px;
	}
}

@media only screen and (max-width:540px){
	.company-news{
		width:80%;
	
	}
	.testimonial{
		width:80%;
	
	}
}

@media only screen and(max-width:480px){
	.company-news{
		width:80%;
	
	}
	.testimonial{
		width:80%;
	
	}
}

@media only screen and (max-width: 400px){
.top-call-to-action .social-icons{
	width: 75%;
	float: none;
	margin:0 auto 10px auto;	
}
.top-call-to-action span{
	float: none;
	width:35%;
	margin: auto;
	display: block;
	margin-top:10px;
}
.logo{
	width: 1px;
	margin: 1px auto;
}
.topmenu form{
	margin: 0;
}

.content{
	padding-bottom: 20px;
}

.content-below{
	padding-top:20px;
	padding-bottom: 40px;
}

div.information{
	margin-top:20px;
}
.services {
	margin-bottom:20px;
}
.company-news {
	margin-bottom:20px;
}
.readmore-container {
	margin-top:25px;
	margin-bottom:20px;
	display:block;
}
.readmore-container2 {
	margin-top:25px;
	margin-bottom:20px;
	display:block;
}
}
@media only screen and (max-width: 390px){
	.top-call-to-action .social-icons{
		width: 45%;
	}
}
@media only screen and (max-width: 360px){
	.top-call-to-action .social-icons{
		width: 60%;
	}
}
@media only screen and (max-width: 320px){
	.top-call-to-action .social-icons{
	width: 70%;
	float: none;
	margin:0 auto 10px auto;	
	}
	.top-call-to-action span{
	float: none;
	width:50%;
	margin: auto;
	display: block;
	margin-top:10px;
	}
}

.columns,.button{position:inherit;}
.readmore{position:inherit;}