/* font
------------------------------------------------------------------------------------------------------  */
@font-face {
	font-family: 'MyriadPro-Light';
	src: url('fonts/MyriadPro-Light.otf') format('opentype');
	font-weight: lighter;
	font-style: normal;
}
@font-face {
	font-family: 'MyriadPro-Regular';
	src: url('fonts/MyriadPro-Regular.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Avenir-Next';
	src: url('fonts/AvenirNextLTPro-Bold.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Avenir-Next-Regular';
	src: url('fonts/Avenir-Regular.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

/*@font-face {
	font-family: 'Avenir-Next';
	src: url('fonts/Avenir-Next.ttc') format('truetype');
	font-weight: bold;
	font-style: normal;
}*/


/* root
------------------------------------------------------------------------------------------------------  */
:root {
	--color-black: #000000;
    --color-green: #04bc53; 
	--color-gray: #666666; 
	--color-white: #ffffff; 
}		


/* body
------------------------------------------------------------------------------------------------------  */
body {
    margin: 0 auto;
    width: 100%;
    padding: 0px;
	font-size: 15px;
	line-height: 24px;
    font-family: 'MyriadPro-Regular';
    font-weight: 400;
}




	/* row
	------------------------------------------------------------------------------------------------------  */
	.row{
		width: 100%;
		margin: 0 auto;
		padding: 0px;
	}

	/* cols
	------------------------------------------------------------------------------------------------------  */
	.col_100    { float: left; margin: 0px; padding: 0px; width: 100%; }
	.col_90     { float: left; margin: 0px; padding: 0px; width: 90%; }
	.col_80     { float: left; margin: 0px; padding: 0px; width: 80%; }
	.col_75     { float: left; margin: 0px; padding: 0px; width: 75%; }
	.col_70     { float: left; margin: 0px; padding: 0px; width: 70%; }
	.col_66     { float: left; margin: 0px; padding: 0px; width: 66.66%; }
	.col_65     { float: left; margin: 0px; padding: 0px; width: 65%; }
	.col_60     { float: left; margin: 0px; padding: 0px; width: 60%; }
	.col_55     { float: left; margin: 0px; padding: 0px; width: 55%; }
	.col_52     { float: left; margin: 0px; padding: 0px; width: 52%; }
	.col_50     { float: left; margin: 0px; padding: 0px; width: 50%; }
	.col_48     { float: left; margin: 0px; padding: 0px; width: 48%; }
	.col_45     { float: left; margin: 0px; padding: 0px; width: 45%; }
	.col_40     { float: left; margin: 0px; padding: 0px; width: 40%; }
	.col_35     { float: left; margin: 0px; padding: 0px; width: 35%; }
	.col_33     { float: left; margin: 0px; padding: 0px; width: 33.33%; }
	.col_30     { float: left; margin: 0px; padding: 0px; width: 30%; }
	.col_25     { float: left; margin: 0px; padding: 0px; width: 25%; }
	.col_20     { float: left; margin: 0px; padding: 0px; width: 20%; }
	.col_10     { float: left; margin: 0px; padding: 0px; width: 10%; }


	/* contents
	------------------------------------------------------------------------------------------------------  */
	.content{
		margin: 0 auto;
		width: 95%;
	    max-width: 1300px;
	}
	.content-ext{
		margin: 0 auto;
		width: 95%;
	    max-width: 1224px;
	}
	.content-int{
		margin: 0 auto;
		width: 95%;
	    max-width: 1024px;
	}


	/* h
	------------------------------------------------------------------------------------------------------  */
	h1{
		font-family: 'Avenir-Next';
		font-size: 65px;
		line-height: 65px;
	}
	h2{
		font-family: 'MyriadPro-Light';
		font-size: 38px;
		line-height: 50px;
		letter-spacing: 2px;
	}
	h3{
		font-family: 'Avenir-Next';
		font-size: 28px;
		line-height: 38px;
		letter-spacing: 6px;
	}
	h4{
		font-family: 'Avenir-Next';
		font-size: 15px;
		line-height: 18px;
		letter-spacing: 3px;
	}



	/* tools
	------------------------------------------------------------------------------------------------------  */
	a {
		cursor: pointer;
		transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;	
		text-decoration: none;
		cursor: pointer;
	}
	.text-black{
		color: var(--color-black);		 
	}
	.text-white{
		color: var(--color-white);
	}
	.text-green{
		color: var(--color-green);
	}
	.text-gray{
		color: var(--color-gray);
	}
	.text-center{
		text-align: center;
	}
	.background-white-opacity{
		display: flex;
		background: rgba(255,255,255,0.86);
		background: -moz-linear-gradient(top, rgba(255,255,255,0.86) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.86)), color-stop(53%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.86) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(top, rgba(255,255,255,0.86) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
		background: -ms-linear-gradient(top, rgba(255,255,255,0.86) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,0.86) 0%, rgba(255,255,255,1) 53%, rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
		-webkit-border-top-left-radius: 40px;
		-webkit-border-top-right-radius: 40px;
		-moz-border-radius-topleft: 40px;
		-moz-border-radius-topright: 40px;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;	
                background-color: #fff !important;
	}
	.border-bottom-separa{
		border-bottom: 1px solid #e6e6e6;
	}
	.btn{
		color: var(--color-white);
		/*background-color: var(--color-green);*/
		text-align: center;
		padding: 12px 30px;
		text-decoration: none;
		cursor:pointer;
		font-size: 19px;
		border-radius: 50px;
		box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.18);
		background-image: url('../img/flecha_botones.png'), linear-gradient(0.25turn, #25e265, #1eba58);
		background-position: 88% center, center center;
		background-repeat: no-repeat, no-repeat;
		background-size: 15px, 100%;
		padding-right: 50px;
	}
	.btn:hover{
		background-image: url('../img/flecha_botones.png'), linear-gradient(0.25turn, #25e265, #098336);
	}
        
        .msg-alert {
            color: #c00;
            display: none;
            width: 75%;
            text-align: center;
            background-color: #fff;
            border-radius: 10px;
            clear: both;
            margin: 0 auto;
            padding: 8px 0 5px 0;
            
        }
        .warning {
            border: 1px solid #c00 !important;
            background-color: #ddd;
        }


	/* pull
	------------------------------------------------------------------------------------------------------  */
	#pull{
		display: none;
		float: right;
		margin-right: -30px;
		margin-top: 30px;
	}
	#pull img{
		width:35px;
	}
	#pull img:hover{
		opacity: 0.8;
	}



	/* header
	------------------------------------------------------------------------------------------------------  */
	#header{
		float: left;
		position: fixed;
		width: 100%;
		text-align: center;
		z-index: 9999;              
	}        
	#header #logo{
		display: inline-block;
		text-align: left;
	}
	.apply-background-color{
		background-color: var(--color-green);
                background-image: none !important;
	}
	.apply-background-color a{
		color: #fff !important;
	}
	.apply-background-color #idioma{
		color: #fff !important;
		border: 1px solid #fff !important;
	}
	#header #logo img{
		width: 300px;
		margin-top: 4px;
	}
	#header #menu-desktop{
		float: right;
		list-style: none;
		margin:0px;
	}
	#header #menu-desktop li{
		float: left;
		margin-left: 10px;
		margin-top:7px;
	}
	#header #menu-desktop li a{
		display: inline-block;
		color: #ccc;
		margin: 30px 18px;
	}
	#header #menu-desktop li a:hover{
		color: #fff;
	}
	#header #menu-desktop li a.dropdown{
		background-image: url('../img/arrow-menu0.svg');
		background-position: right center;
		background-repeat: no-repeat;
		background-size: 8px;
		padding-right: 17px;
	}
	#header #menu-desktop li a.dropdown:hover{
		background-image: url('../img/arrow-menu1.svg');
	}
	#header #menu-desktop #submenu{
		display: inline-block;
		text-align: left;
	}
	#header #menu-desktop li ul#submenu {
		display: none;
		position: absolute;
		top: 70px;
		width: auto;
		padding: 16px 8px;
		line-height: 17px;
		padding-right: 30px;
		box-sizing: border-box;
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
		background-color: var(--color-gray);
		list-style: none;
		border-top: 1px solid #ccc;
		
	}
	#header #menu-desktop li ul#submenu li{
		float: left;
		clear: both;
		width: 100%;
	}
	#header #menu-desktop li ul#submenu li a{
		width: 100%;
		margin: 0px;
		color: #fff;
		padding: 3px 0px;
	}
	#header #menu-desktop li ul#submenu li a:hover{
		opacity: 0.6;
	}
	#header #idioma{
		float: right;
		list-style: none;
		margin: 30px 0px;
		margin-left: 40px;
		color: #ccc;
		width: 35px;
		height: 35px;
		padding-top: 6px;
		font-size: 12px;
		border-radius: 100%;
		border: 1px solid #ccc;
	}
	#header #idioma:hover{
		color: #fff;
		border: 1px solid #fff;
	}
        
        #degradat{
		background-image: url('../img/degradat.png');
		background-position: center top;
		background-repeat: no-repeat;
		background-size: cover;
                position: absolute;
                left: 0;
                top: 0;
                height: 411px;
                z-index: 99;
                width: 100%;
}


	/* menu-responsive
	------------------------------------------------------------------------------------------------------  */
	#menu-responsive{
		display: none;	
		background-color: var(--color-green);
		padding: 30px 0px;
	}
	#menu-responsive ul{
		float: left;
		width: 100%;
		text-align: center;
		list-style: none;
	}
	#menu-responsive ul li{
		float: left;
		width: 100%;
	}
	#menu-responsive ul li a{
		display: inline-block;
		width: 80%;
		max-width: 300px;
		font-size: 20px;
		padding: 10px 0px;
		text-decoration: none;
		color: var(--color-white);
		border: 1px solid var(--color-white);
		border-radius: 50px;
		margin-bottom: 10px;
	}








	/* slider
	------------------------------------------------------------------------------------------------------  */
	*, *:before, *:after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	  }	
	  .slider-container {
		  width: 100%;
		position: relative;
		height: 925px;
		-webkit-user-select: none;
		   -moz-user-select: none;
			-ms-user-select: none;
				user-select: none;
		cursor: all-scroll;
		z-index: 99;
		overflow: hidden;
	  }
	  .slider-control {
		z-index: 2;
		position: absolute;
		top: 0;
		width: 12%;
		height: 100%;
		transition: opacity 0.3s;
		will-change: opacity;
		opacity: 0;
	  }
	  .slider-control.inactive:hover {
		cursor: auto;
	  }
	  .slider-control:not(.inactive):hover {
		opacity: 1;
		cursor: pointer;
	  }
	  .slider-control.left {
		left: 0;
		background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 100%);
	  }
	  .slider-control.right {
		right: 0;
		background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.18) 100%);
	  }
	  
	  .slider-pagi {
		position: absolute;
		z-index: 3;
		left: 50%;
		bottom: 17rem;
		transform: translateX(-50%);
		font-size: 0;
		list-style-type: none;
	  }
	  .slider-pagi__elem {
		position: relative;
		display: inline-block;
		vertical-align: top;
		width: 7px;
		height: 7px;
		border-radius: 100%;
		margin: 0 0.9rem;
		background-color: #666;
		cursor: pointer;
	  }
	  .slider-pagi__elem:before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 7px;
		height: 7px;
		border-radius: 100%;
		background-color: #fff;
		transition: transform 0.3s;
		transform: translate(-50%, -50%) scale(0);
	  }
	  .slider-pagi__elem.active:before, .slider-pagi__elem:hover:before {
		transform: translate(-50%, -50%) scale(1);
	  }
	  
	  .slider {
		z-index: 1;
		position: relative;
		height: 100%;
	  }
	  .slider.animating {
		transition: transform 0.5s;
		will-change: transform;
	  }
	  .slider.animating .slide__bg {
		transition: transform 0.5s;
		will-change: transform;
	  }
	  
	  .slide {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	  }
	  .slide.active .slide__overlay,
	  .slide.active .slide__text {
		opacity: 1;
		transform: translateX(0);
	  }
	  .slide__bg {
		position: absolute;
		top: 0;
		left: -50%;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center bottom;
		/*will-change: transform;*/
	  }
	  .slide:nth-child(1) {
		left: 0;
	  }
	  .slide:nth-child(1) .slide__bg {
		left: 0;
	  }
	  .slide:nth-child(1) .slide__overlay-path {
		fill: #e99c7e;
	  }
	  .content-textos{
		margin: 0 auto;
		width: 95%;
	    max-width: 1300px;
		margin-top: 240px;	
		color: var(--color-white);	  
	  }
	  .content-textos .textos span{
		  display: inline-block;
		  font-size: 38px;
		  margin-bottom: 6px;
		  font-family: 'MyriadPro-Light';
	  }
	  .content-textos .textos h1{
		  margin-bottom: 100px;
	  }
	  @media (max-width: 991px) {
		.slide:nth-child(1) .slide__text {
		  background-color: rgba(233, 156, 126, 0.8);
		}
	  }
	  .slide:nth-child(2) {
		left: 100%;
	  }
	  .slide:nth-child(2) .slide__bg {
		left: -50%;
	  }
	  .slide:nth-child(2) .slide__overlay-path {
		fill: #e1ccae;
	  }
	  @media (max-width: 991px) {
		.slide:nth-child(2) .slide__text {
		  background-color: rgba(225, 204, 174, 0.8);
		}
	  }
	  .slide:nth-child(3) {
		left: 200%;
	  }
	  .slide:nth-child(3) .slide__bg {
		left: -100%;
	  }
	  .slide:nth-child(3) .slide__overlay-path {
		fill: #adc5cd;
	  }
	  @media (max-width: 991px) {
		.slide:nth-child(3) .slide__text {
		  background-color: rgba(173, 197, 205, 0.8);
		}
	  }
	  .slide:nth-child(4) {
		left: 300%;
	  }
	  .slide:nth-child(4) .slide__bg {
		left: -150%;
	  }
	  .slide:nth-child(4) .slide__overlay-path {
		fill: #cbc6c3;
	  }
	  @media (max-width: 991px) {
		.slide:nth-child(4) .slide__text {
		  background-color: rgba(203, 198, 195, 0.8);
		}
	  }
	  .slide__content {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	  }
	  .slide__overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100%;
		min-height: 810px;
		transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
		will-change: transform, opacity;
		transform: translate3d(-20%, 0, 0);
		opacity: 0;
	  }
	  @media (max-width: 991px) {
		.slide__overlay {
		  display: none;
		}
	  }
	  .slide__overlay path {
		opacity: 0.8;
	  }
	  
	 





	/* intro
	------------------------------------------------------------------------------------------------------  */
	#intro{
		float: left;
		position: relative;
		z-index: 999;
		width: 100%;
		margin-top: -130px;
	}
	#intro #presen{
		display: flex;
	}
	#intro #presen img{
		max-width: 467px;
		width: 100%;
	}
	#intro #presen h2{
		margin-top: 120px;
		color: var(--color-green);
                font-family: 'Avenir-Next-Regular';
                font-size: 36px;
	}
	#intro .info {
		text-align: center;
		padding: 40px 0px;
		color: var(--color-black);
	}
	#intro .info h3{
		color: var(--color-black);
	}
	#intro .info p{
		margin: 0 auto;
		width: 80%;
		max-width: 700px;
		padding: 15px 0px;
	}
	#intro .info .linea{
		margin: 0 auto;
		margin-top: 5px;
		width: 110px;
		height: 1px;
		border-bottom: 1px solid var(--color-green);
	}
	#group{
		display: flex;
		padding: 50px 0px;
	}
	#group .box{
		float: left;
		display: table;
		width: 48.15%;
		margin: 7px 0.7%;
		height: 130px;
		border-radius: 20px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#group .box:hover{
		opacity: 0.8;
	}
	#group .box .tit{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		font-family: 'Avenir-Next';
		font-size: 20px;
		line-height: 23px;
		letter-spacing: 6px;
		color: var(--color-white);
                text-transform: uppercase;
	}	
	#intro #items-servicios{
		display: flex;
		padding: 50px 0px;
		margin-top: 20px;
		padding-bottom: 110px;
	}
	#intro #items-servicios .item-servicio{
		float: left;
		width: 23%;
		min-height: 385px;
		margin: 0px 1%;
		padding: 0px 35px;
		padding-top: 30px;
		box-sizing: border-box;
		text-align: center;
		background-color: var(--color-white);
		box-shadow: 0px 15px 20px #f0f0f0;
		border-radius: 20px;
	}
	#intro #items-servicios .item-servicio .icono{
		height: 85px;
	}
	#intro #items-servicios .item-servicio p{
		margin-top: 10px;
		color: var(--color-gray)
	}





	/* empresas
	------------------------------------------------------------------------------------------------------  */
	#empresas{
		float: left;
		width: 100%;
		background-color: #f2f2f2;
		padding: 20px 0px;
		padding-top: 25px;
		text-align: center;
	}	
	#empresas .logo-empresa{
		display: inline-block;		
		margin: 0px 30px;
	}
	#empresas .logo-empresa .el-logo{
		display: table;
		height: 100px;
	}
	#empresas .logo-empresa .el-logo .imagen{
		display: table-cell;
		width: 100%;
		vertical-align: middle;
		text-align: center;
	}
	#empresas .logo-empresa .el-logo .imagen img{
		float: left;
	}




	/* mapa
	------------------------------------------------------------------------------------------------------  */
	#mapa{
		float: left;
		width: 100%;
		margin-top: 6px;
	}		



	/* cabecera
	------------------------------------------------------------------------------------------------------  */
	#cabecera{
		float: left;
		width: 100%;
		text-align: center;
		padding-top: 120px;
	}		
	#cabecera span{
		display: inline-block;
		font-family: 'MyriadPro-Light';
		color: var(--color-white);
		font-size: 35px;
		margin-bottom: 20px;
	}
	#cabecera h1{		
		color: var(--color-white);
                text-transform: uppercase;
	}
        
        #cabecera .sub_menu_sec {
                width: 100%;
                text-align: center;
                margin-top: 25px;
        }
        #cabecera .sub_menu_sec ul {
                margin: 0;
                padding: 0;   
        }
        #cabecera .sub_menu_sec ul li {
                display: inline; 
                color: #fff;   
                margin: 0 5px;
        }
        #cabecera .sub_menu_sec ul li a {
                color: #fff;      
                font-size: 18px;
        }
        #cabecera .sub_menu_sec ul li a.active {
                text-decoration: underline;
        }
        #cabecera .sub_menu_sec ul li a:hover {
                color: #ddd;            
        }
        
        #cabecera .logo_seccion {
                margin-top: 15px;
        }

	.back-renovables{
		width: 100%;
		height: 800px;
		background-image: url('../img/home/slider_solar.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.back-contacto{
		width: 100%;
		background-image: url('../img/contacto/bg_image.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.back-fotovoltaica{
		width: 100%;
		height: 700px;
		background-image: url('../img/interiors/foto2.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.back-trabaja{
		width: 100%;
		height: 700px;
		background-image: url('../img/trabaja/slider_trabaja.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	
	


	
	/* proyectos
	------------------------------------------------------------------------------------------------------  */
	#proyectos{	
		float: left;
		position: relative;
		width: 100%;
		margin-top: -300px;
	}
	.proyectos-ficha{	
		margin-top: 150px !important;
	}
	#proyectos .boxes-proyectos{	
		/*display: inline-block;*/
		width: 100%;
		text-align: center;
		margin-top: -110px;
		padding-bottom: 100px;
	}
	#proyectos .boxes-proyectos .box-proyecto{	
		display: inline-block;
		vertical-align: top;
		width: 27.8%;
		margin: 30px 2.6%;
		background: rgba(242,241,242,1);
		background: -moz-linear-gradient(top, rgba(242,241,242,1) 0%, rgba(230,230,230,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,241,242,1)), color-stop(100%, rgba(230,230,230,1)));
		background: -webkit-linear-gradient(top, rgba(242,241,242,1) 0%, rgba(230,230,230,1) 100%);
		background: -o-linear-gradient(top, rgba(242,241,242,1) 0%, rgba(230,230,230,1) 100%);
		background: -ms-linear-gradient(top, rgba(242,241,242,1) 0%, rgba(230,230,230,1) 100%);
		background: linear-gradient(to bottom, rgba(242,241,242,1) 0%, rgba(230,230,230,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f1f2', endColorstr='#e6e6e6', GradientType=0 );
		border-radius: 20px;
		text-align: left;
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.18);
	}
	#proyectos .boxes-proyectos .box-proyecto:hover{	
		box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
	}
	#proyectos .boxes-proyectos .box-proyecto .foto{	
		display: inline-block;
		width: 100%;
		height: 280px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-border-top-left-radius: 20px;
		-webkit-border-top-right-radius: 20px;
		-moz-border-radius-topleft: 20px;
		-moz-border-radius-topright: 20px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	#proyectos .boxes-proyectos .box-proyecto .info{
		display: inline-block;
		width: 100%;
		-webkit-border-bottom-right-radius: 20px;
		-webkit-border-bottom-left-radius: 20px;
		-moz-border-radius-bottomright: 20px;
		-moz-border-radius-bottomleft: 20px;
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 10px 25px;
		box-sizing: border-box;
	}
	#proyectos .boxes-proyectos .box-proyecto .info .titulo{	
		display: inline-block;
		width: 100%;
		font-family: 'Avenir-Next';
		color: var(--color-black);
		letter-spacing: 2px;
                text-transform: uppercase;
                line-height: 20px;
	}
	#proyectos .boxes-proyectos .box-proyecto .info .categoria{	
		display: inline-block;
		width: 100%;
		color: var(--color-gray);
	}


	/* proyectos
	------------------------------------------------------------------------------------------------------  */
	.background-proyectos{
		background-color: #f2f2f2;
	}
	.background-proyectos .boxes-proyectos{	
		margin-top: -120px !important;
	}




	/* trabajamos-items
	------------------------------------------------------------------------------------------------------  */
	#trabajamos-items{	
		float: left;
		position: relative;
		width: 100%;
		padding-top: 35px;
		margin-top: 55px;
		font-family: 'Avenir-Next-Regular';
		height: 320px;
		margin-bottom: 50px;
		background-color: #f2f2f2;

	}
	#trabajamos-items .box-items{	
		display: inline-block;
		width: 100%;
		text-align: center;
	}
	#trabajamos-items .box-items .caption{
		display: inline-block;
		width: 98%;
		font-family: 'Avenir-Next';
		text-align: left;
		padding: 0px 1%;
		font-weight: 800;
		font-size: 20px;
	}
	#trabajamos-items .box-items .desc{
		display: inline-block;
		width: 98%;
		text-align: left;
		padding: 20px 1%;
		padding-bottom: 30px;
	}
	#trabajamos-items .box-items .item{	
		display: inline-block;
		width: 29%;
		margin: 0px 1.5%;
		min-height: 220px;
		background-color: #fff;
		box-shadow: 0px 20px 30px #ccc;
		border-radius: 15px;
		vertical-align: top;
	}
	#trabajamos-items .box-items .item .foto{	
		display: inline-block;
		width: 100%;
		padding-top: 40px;
		padding-bottom: 15px;
		text-align: center;
		min-height: 125px;
	}
	#trabajamos-items .box-items .item .foto img{	
		width: 60px;
	}
	#trabajamos-items .box-items .item .txt{	
		display: inline-block;
		width: 100%;
		font-size: 13px;
		line-height: 18px;
		margin-bottom: 40px;
		font-family: 'Avenir-Next';
		letter-spacing: 4px;
	}







	/* trabajamos-items
	------------------------------------------------------------------------------------------------------  */
	#trabajamos-ofertas{	
		float: left;
		position: relative;
		width: 100%;
		padding-top: 35px;
		margin-top: 55px;
		font-family: 'Avenir-Next-Regular';
		text-align: center;
	}
	#trabajamos-ofertas .lista-ofertas{	
		display: inline-block;
		width: 97%;
		margin-top: 10px;
	}
	#trabajamos-ofertas .lista-ofertas .cap{
		float: left;
		width: 75%;
		font-family: 'Avenir-Next';
		text-align: left;
		font-weight: 800;
		font-size: 26px;
		letter-spacing: 6px;
		box-sizing: border-box;
		margin-bottom: 30px;
	}
	#trabajamos-ofertas .lista-ofertas .disponibles{
		float: left;
		width: 25%;
		font-family: 'Avenir-Next';
		text-align: right;
		font-weight: 800;
		font-size: 14px;
		color: #888;
		box-sizing: border-box;
		margin-bottom: 30px;
	}
	#trabajamos-ofertas .lista-ofertas .oferta{
		float: left;
		width: 100%;
		border-top: 1px solid #ccc;
		padding: 30px 0px;
		text-align: left;
	}
	#trabajamos-ofertas .lista-ofertas .last{
		border-bottom: 1px solid #ccc;
	}
	#trabajamos-ofertas .lista-ofertas .oferta .info{
		float: left;
		width: 75%;		
	}
	#trabajamos-ofertas .lista-ofertas .oferta .info .tit{
		display: inline-block;
		width: 100%;
		font-size: 19px;
		font-family: 'Avenir-Next';
	}
	#trabajamos-ofertas .lista-ofertas .oferta .info .desc{
		display: inline-block;
		width: 100%;
		color: #666;
		padding: 15px 0px;
	}
	#trabajamos-ofertas .lista-ofertas .oferta .info .carac{
		display: inline-block;
		width: 100%;
		margin-top: 20px;
		color: #888;
		font-family: 'Avenir-Next';
	}
	#trabajamos-ofertas .lista-ofertas .oferta .info .carac .separalo{
		display: inline;
		margin: 0px 10px;
	}
	#trabajamos-ofertas .lista-ofertas .oferta .action{
		float: left;
		width: 25%;
		text-align: right;		
		padding-top: 60px;
	}
	#trabajamos-ofertas .lista-ofertas .oferta .action .btn{
		padding: 8px 50px !important;
		padding-right: 60px !important;
	}





	/* ofertas-formulario
	------------------------------------------------------------------------------------------------------  */
	#ofertas-formulario{	
		float: left;
		position: relative;
		width: 100%;
		padding-top: 0px;
		margin-top: 45px;
		background-color: #f0f0f0;
	}
	#ofertas-formulario label{
		color: #000;
		padding-left: 0px;
	}
	#ofertas-formulario .loschecks .textos, #ofertas-formulario .loschecks .textos a{
		color: #888;
	}
	#ofertas-formulario #contacto{
		float: left;
		width: 100%;
		padding: 50px 0px;
		text-align: center;
	}	
	#ofertas-formulario #contacto .tit{
		display: inline-block;
		width: 100%;
		text-align: center;
		color: #000;
		font-family: 'Avenir-Next';
		font-size: 27px;
		letter-spacing: 6px;
		margin-bottom: 20px;
	}






	/* ficha
	------------------------------------------------------------------------------------------------------  */
	#ficha{	
		float: left;
		position: relative;
		width: 100%;
		margin-top: -350px;
		z-index: 9;
	}

	#ficha .datos{	
		float: left;
		width: 94%;
		padding: 100px 3%;
	}
	#ficha .datos .imagen{	
		float: left;
		display: table;
		width: 40%;
		margin-right: 10%;
		height: 370px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 20px;
		box-shadow: 0px 10px 15px #f0f0f0;
	}
	#ficha .datos .img-only img {			
		width: 100%;		
	}
	#ficha .datos .imagen .ico-lupa{	
		display: table-cell;
		vertical-align: bottom;
		height: 100%;
		text-align: right;
	}
	#ficha .datos .imagen .ico-lupa .cont-ico{
		float: right;
		margin-bottom: 12px;
		margin-right: 12px;
		padding: 10px;
		padding-bottom: 0px;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 10px;
	}
	#ficha .datos .imagen .ico-lupa .cont-ico:hover{
		background: rgba(0, 0, 0, 1);
	}
	#ficha .datos .imagen .ico-lupa .cont-ico img{	
		width: 20px;
                display: inline-block;
                margin-bottom: -5px;
	}
        #ficha .datos .imagen .num-fotos{	
		color: #fff;
                padding-right: 10px;
                padding-left: 5px;
                height: 30px;
                display: inline-block;
	}
        
	#ficha .datos .textos{	
		float: left;
		width: 50%;
		margin-top: 25px;
	}
	#ficha .datos .textos .titulo{	
		display: inline-block;
		width: 100%;
		font-family: 'Avenir-Next';
		font-size: 50px;
		line-height: 46px;
	}
	#ficha .datos .textos .subtitulo{	
		display: inline-block;
		width: 100%;
		font-family: 'MyriadPro-Light';
		font-size: 22px;
		padding: 20px 0px;
	}
	#ficha .datos .textos .subtitulo strong{	
		font-family: 'MyriadPro-Regular';
		font-weight: bolder;
	}
	#ficha .datos .textos p{
		display: inline-block;
		width: 100%;
		padding: 15px 0px;
	}
	#ficha .mas-proyectos{
		display: inline-block;
		width: 100%;
		text-align: center;
		font-size: 23px;
	}
	#ficha .linea-gris{
		margin: 0 auto;
		margin-top: 35px;
		width: 110px;
		height: 1px;
		border-bottom: 1px solid #ccc;		
	}



	


	/* sigue-navegando-cap
	------------------------------------------------------------------------------------------------------  */
	#sigue-navegando-cap{		
		float: left;
		position: relative;
		width: 100%;
		text-align: center;
		margin-top: 80px;
		margin-bottom: 50px;
	}
	#sigue-navegando-cap .tit{
		font-family: 'Avenir-Next';
		font-size: 26px;
		letter-spacing: 6px;
	}
	#sigue-navegando-cap .linea{
		margin: 0 auto;
		margin-top: 35px;
		width: 110px;
		height: 1px;
		border-bottom: 1px solid var(--color-green);
		margin-bottom: 60px;
	}

	
	/* sigue-navegando-items
	------------------------------------------------------------------------------------------------------  */
	#sigue-navegando-items{		
		float: left;
		position: relative;
		width: 100%;
		background-color: #e6e6e6;
		padding: 20px 0px;
	}
	#sigue-navegando-items #group{		
		padding: 50px 0px;
		margin-top: -130px;
	}
	#sigue-navegando-items #group .box{
		float: left;
		display: table;
		width: 32.11%;
		margin: 7px 0.61%;
		height: 320px;
		border-radius: 20px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}


	/* contacto
	------------------------------------------------------------------------------------------------------  */
	#contacto{
		float: left;
		width: 100%;
		padding: 50px 0px;
		padding-bottom: 400px;
		text-align: center;
	}	

		
	/* trabaja
	------------------------------------------------------------------------------------------------------  */
	#trabaja{	
		float: left;
		position: relative;
		width: 100%;
		margin-top: -350px;
		font-family: 'Avenir-Next-Regular';
		z-index: 9;
	}
	#trabaja .datos{	
		float: left;
		width: 94%;
		padding: 80px 3%;
	}
	#trabaja .datos .imagen{	
		float: left;
		width: 45%;
	}
	#trabaja .datos .imagen img{ 	
		width: 100%;
		border-radius: 35px;
		box-shadow: 0px 10px 15px #ccc;
	}
	#trabaja .datos .textos{	
		float: left;
		width: 50%;
		margin-left: 5%;
		margin-top: 15px;
	}
	#trabaja .datos .textos .subtitulo{	
		display: inline-block;
		width: 100%;
		font-family: 'Avenir-Next-Regular';
		font-size: 22px;
		padding: 10px 0px;
	}
	#trabaja .datos .textos .subtitulo strong{	
		font-family: 'Avenir-Next';
		font-weight: bolder;
	}
	#trabaja .datos .textos p{
		display: inline-block;
		width: 100%;
		padding: 15px 0px;
		padding-bottom: 30px;
	}
	#trabaja .opciones{
		display: inline-block;
		width: 100%;
		text-align: center;
	}
	#trabaja .opciones .opc{
		display: inline-block;
		width: 46%;
		margin: 1%;
		height: 360px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#trabaja .opciones .opc:hover{
		box-shadow: 0px 10px 15px #555;
	}
	#trabaja .opciones .opc-ofertas{
		background-image: url('../img/trabaja/banner_ofertas.jpg');
	}
	#trabaja .opciones .opc-cv{
		background-image: url('../img/trabaja/banner_cv.jpg');
	}
	#trabaja .opciones .opc .con{
		display: table;
		width: 100%;
		height: 360px;
	}
	#trabaja .opciones .opc .con span{
		display: table-cell;
		width: 100%;
		font-family: 'Avenir-Next';
		vertical-align: middle;
		color: #fff;
		font-weight: 900;
		font-size: 21px;
		letter-spacing: 4px;
	}



	/* oferta
	------------------------------------------------------------------------------------------------------  */
	#oferta{	
		float: left;
		position: relative;
		width: 100%;
		margin-top: -350px;
		font-family: 'Avenir-Next-Regular';
		z-index: 9;
		text-align: center;
	}
	#oferta .box-oferta{
		display: inline-block;
		width: 80%;
		text-align: left;
	}
	#oferta .box-oferta .cap{		
		display: inline-block;
		width: 100%;
		font-family: 'Avenir-Next';
		font-size: 28px;
		letter-spacing: 6px;
		margin-top: 80px;
	}
	#oferta .box-oferta .titulo{		
		display: inline-block;
		width: 100%;
		font-family: 'Avenir-Next';
		font-size: 18px;
		margin-top: 8px;
		margin-bottom: 20px;
	}
	#oferta .box-oferta .bloque{		
		display: inline-block;
		width: 100%;
		border-top: 1px solid #ccc;
		margin-top: 10px;
		padding-bottom: 20px;
	}
	#oferta .box-oferta .bloque .tema{		
		display: inline-block;
		width: 100%;
		margin-top: 40px;
		font-family: 'Avenir-Next';
		font-size: 18px;
	}
	#oferta .box-oferta .bloque .info{		
		display: inline-block;
		width: 100%;
	}



	/* form
	------------------------------------------------------------------------------------------------------  */
	form{
		margin: 0 auto;
		width: 90%;
		max-width: 650px;
		text-align: left;
		margin-top: 30px;
	}
	form .box-input{
		float: left;
		width: 100%;
		
	}
	form .box-input-50-left{
		float: left;
		width: 49%;
	}
	form .box-input-50-right{
		float: right;
		width: 49%;
	}
	form label{
		float: left;
		width: 100%;
		padding: 0px 25px;
		margin-top: 10px;
		color: var(--color-white);
	}
	form input, form textarea{
		float: left;
		width: 100%;
		padding: 18px 30px;
		margin-top: 10px;
		font-size: 15px;
		color: #333;
		background: rgba(255, 255, 255, 0.7);
		border: 0px;
		border-radius: 50px;
		outline: none;
		box-sizing: border-box;
		margin-bottom: 10px;
        font-family: 'MyriadPro-Regular';
	}
	form input:focus{
		background: rgba(255, 255, 255, 1);
	}
	form .loschecks{
		float: left;
		width: 100%;
		font-size: 12px;
		line-height: 18px;
		padding: 20px 0px;
		color: var(--color-white);
	}
	form .loschecks .elcheck{
		float: left;
		width: 26px;
	}
	form .loschecks .textos{
		float: left;
		width: auto;
	}
        form .loschecks .textos a{
		color: #fff;
        text-decoration: underline;
	}
        form .loschecks .textos a:hover{
		color: #eee;
	}
        
	input[type='checkbox'] {
		margin-top: -30px;
	}
	input[type='checkbox'] {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeSpeed;
		width: 13px;
		height: 13px;
		margin: 0;
		margin-right: 1px;
		display: block;
		float: left;
		position: relative;
		cursor: pointer;
	}	
	input[type='checkbox']:after {
		content: "";
		vertical-align: middle;
		text-align: center;
		line-height: 13px;
		position: absolute;
		cursor: pointer;
		height: 14px;
		width: 14px;
		left: 0;
		top: 0;
		font-size: 13px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid var(--color-white);
		margin-left: 3px !important;
	}	
	input[type='checkbox']:hover:after, input[type='checkbox']:checked:hover:after {
		background-color: var(--color-green);
		box-shadow: 0px 4px 12px #fff;
		content: '\2714';
		color: #fff;
		margin-left: 2px !important;
	}	
	input[type='checkbox']:checked:after {
		background-color: var(--color-green);
		box-shadow: 0px 4px 12px #fff;
		content: '\2714';
		color: #fff;
		margin-left: 2px !important;
	}
	form .box-btn{
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 25px;
		margin-bottom: 10px;
	}
	form .box-btn .btn{
		padding: 12px 70px;
	}	
	.msgs_form{
		float:left; 
		clear:both; 
		display: none; 
		text-align:left; 
		margin-top:5px; 
		color:#fff; 
		padding:5px 10px; 
		background-color:#c00;
		font-size: 13px;
		font-weight: 300;
	}		  
	.msgs_send{
		float:left; 
		clear: left; 
		width: auto; 
		display: none; 
		margin-top: 5px;
		font-size:15px;
		background-color: #5cac20;
		color: #fff;
		padding: 10px 10px;
		text-transform: uppercase;
		font-weight: 700;
	}
        
        
        
        
        /* jiSlider
	------------------------------------------------------------------------------------------------------  */
        
        .jislide {
            cursor: pointer;
        }
        #jxSlider {
            width: 100%;
            height: 100%;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99999;
	}    
        #jiSlideFrame {
            width: 100%;
            height: 100%;   
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99999;
        }        
        .jislider__button {
            display: none;
        }
        
        
        
        /* jiSlider
	------------------------------------------------------------------------------------------------------  */
		  
        #legal {
            background-color: #fff;
            border-radius: 50px;
            padding: 50px;
            text-align: left;
        }
        #legal h2 {
            font-size: 24px;
        }
        #legal h3 {
            font-size: 18px;
            letter-spacing: 0;
        }
        #legal p {
            padding-bottom: 15px;
        }

	/* footer
	------------------------------------------------------------------------------------------------------  */
	#footer{
		float: left;
		width: 100%;
		background-color: var(--color-white);
		padding: 20px 0px;
		line-height: 20px;
	}
	#footer img{
		max-width: 230px;
		width: 80%;
	}
	#footer #label-contacto{
		display: inline-block;
		font-family: 'Avenir-Next';
		margin-top: 20px;
		margin-bottom: 5px;
                text-transform: uppercase;
	}
	#footer .tels{
		display: inline-block;
		margin-top: 45px;
	}


	/* copy
	------------------------------------------------------------------------------------------------------  */
	#copy{
		float: left;
		width: 100%;
		padding: 20px 0px;
		color: var(--color-gray);
		text-align: center;
		background-color: #f0f0f0;
	}




	/* responsive
	------------------------------------------------------------------------------------------------------  */
	
	@media only screen and (max-width: 1075px) {
		
		#header #logo {
			margin-top: 15px;
		}
		#header #logo img{
			width: 200px;
		}
		
	}

	@media only screen and (max-width: 1020px) {
	
		#header #logo {
			margin-top: 15px;
		}
		#header #logo img{
			width: 200px;
		}
		#menu-desktop{
			display: none;
		}
		#pull{
			display: inline-block;
		}
		h1{
			font-size: 45px;
			line-height: 45px;
		}
		h2{
			font-size: 32px;
			line-height: 32px;
		}
		h3{
			font-size: 22px;
			line-height: 22px;
			letter-spacing: 4px;
		}

		.content-textos .textos span{
			font-size: 26px;
		}
		.btn{
			padding: 10px 30px;
			font-size: 17px;
			padding-right: 48px;
		}			  
		#footer .col_33{
			width: 100%;
			text-align: center;
		}
		#intro #items-servicios .item-servicio{
			width: 48%;
			min-height: 330px;
			margin-bottom: 20px;
		}
	}


	@media only screen and (max-width: 880px) {
			
		#trabajamos-ofertas .lista-ofertas .oferta .info{
			width: 55%;		
		}
		#trabajamos-ofertas .lista-ofertas .oferta .action{
			width: 45%;
		}
	
	}




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

		#intro #presen h2{
			margin-top: 15%;
		}
		#trabaja .datos{	
			width: 100%;
			padding: 80px 0%;
		}
		#trabaja .datos .imagen{	
			width: 100%;
		}
		#trabaja .datos .textos{	
			width: 100%;
			margin-left: 0%;
			margin-top: 60px;
		}
		#trabaja .opciones .opc{
			width: 100%;
			margin: 0%;
			margin-bottom: 10px;
			height: 260px;
		}
		#trabaja .opciones .opc .con{
			height: 260px;
		}
	
	}

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

		#proyectos .boxes-proyectos .box-proyecto{	
			width: 45%;
			margin: 30px 2%;
		}
		#sigue-navegando-items #group .box{
			height: 220px;
		}		
	
		#ficha .datos{	
			width: 100%;
			padding: 60px 5%;
		}
		#ficha .datos .imagen{	
			width: 100%;
			margin-right: 0%;
		}
		#ficha .datos .textos{	
			width: 100%;
			margin-top: 40px;
		}


	
	}
	

	@media only screen and (max-width: 830px) {
	
		form .box-input-50-left{
			width: 100%;
		}
		form .box-input-50-right{
			float: left;
			width: 100%;
		}
	
	}


	@media only screen and (max-width: 720px) {
			
		#trabajamos-ofertas .lista-ofertas .cap{
			width: 100%;
			text-align: center;
			margin-bottom: 20px;
			font-size: 22px;
			letter-spacing: 4px;				
		}
		#trabajamos-ofertas .lista-ofertas .disponibles{
			width: 100%;
			text-align: center;
			margin-bottom: 30px;
		}		
		#trabajamos-ofertas .lista-ofertas .oferta .info{
			width: 100%;		
		}
		#trabajamos-ofertas .lista-ofertas .oferta .action{
			width: 100%;
			padding-top: 40px;
		}
	
	}

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

		form{
			width: 70%;
		}
		#intro #presen {
			display: inline-block;
			text-align: center;
			width: 100%;
		}
		#intro #presen .col_48{
			float: left;
			width: 100%;
		}
		#intro #presen .col_52{
			float: left;
			width: 100%;
		}
		#intro #presen img{
			max-width: 340px;
			width: 90%;
		}
		#intro #presen h2{
			margin-top: 0px;
			margin-bottom: 50px;
		}
		#intro #items-servicios .item-servicio{
			width: 90%;
			margin: 0px 5%;
			min-height: auto;
			margin-bottom: 20px;
			padding-bottom: 50px;
		}
		#sigue-navegando-items #group .box{
			width: 90%;
			margin: 7px 5%;
			height: 180px;
		}		
		#trabajamos-items{	
			height: auto;
	
		}
		#trabajamos-items .box-items .item{	
			width: 100%;
			margin: 10px 0%;
		}
	
	}


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

		#intro #group .box{
			width: 90%;
			margin: 7px 5%;
		}
		#proyectos .boxes-proyectos {
			margin-top: -85px;
		}
		#proyectos .boxes-proyectos .box-proyecto{	
			width: 90%;
			margin: 30px 5%;
		}


	}