/****************************************************************
 ************************ 0.0 GENERAL *******************************
 ***************************************************************/
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans:300,300i,400,400i,500,700';
/***** Global Settings *****/
html, body {border:0;margin:0;padding:0}

html {
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important;
}
*{margin: 0; padding: 0}
  
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;font-weight:normal;font-family: 'Alegreya Sans', sans-serif; letter-spacing: 2px}

/***** Common Formatting *****/
ul{list-style:none;list-style-image:none}
img{border:0}
p{font-family: 'Alegreya Sans', sans-serif; text-rendering: optimizeLegibility; }

/***** Links *****/
a,a:link,a:visited,a:hover {text-decoration:none;color: inherit}
a:focus{outline:none}
a:hover{cursor:pointer}
 
/***** Forms *****/
form{margin:0;padding:0}
  
/***** Wrapper *****/
#wrap{width:1000px;margin:0 auto}
 
/***** Global Classes *****/
.clear{clear:both}
.float-left{float:left}
.float-right{float:right}
.text-left{text-align:left}
.text-right{text-align:right}
.text-center{text-align:center}
.text-justify{text-align:justify}
.bold{font-weight:bold}
.italic{font-style:italic}
.underline {border-bottom:1px solid}
.highlight{background:#ffc}
.wrap{width:924px;margin:0 auto}
.center{margin:0 auto}
.nopadding{padding:0}
.noindent{margin-left:0;padding-left:0}
.rombo{background-image: URL('imagenes/rombo.png');height: 22px;width: 18px;width:100%;background-repeat: no-repeat;background-position: 50% 0;}
.only320{display: none}
.onlyResp{display: none}
/***** Sections *****/
.pageSection{padding-top:35px; padding-bottom:35px}
.pageSection > .title{
	font-weight: 300;
	font-size: 48px;
	letter-spacing: 0.1em;
	line-height: 40px}
.pageSection > .subtitle{
	font-size: 21px;
	color: #4F4A44;
	font-weight: 700;
	margin-bottom: 45px;
	line-height: 15px;
    padding-top: 15px
}

/****************************************************************
 ************************* 1.0 HEADER ***************************
 ***************************************************************/
#page-header{border-top: 7px solid #A5A29C}
#page-header .wrap{height: 156px;border-bottom: 8px solid transparent}
#page-header .wrap #data{height: 100%}
#page-header .wrap #data nav{padding-top: 118px}
#page-header nav>ul>a{text-align: center;margin-left: 17px;font-family: 'Alegreya Sans', sans-serif;font-size: 13px;display: inline-block;text-transform: uppercase;letter-spacing: 2px; color: #4F4A44; transition: color 1s linear; -webkit-transition: color 1s linear; -moz-transition: color 1s linear; -ms-transition: color 1s linear;}
#page-header nav>ul>a:after{content: "";display: block;width: 0;height: 2px;margin: 0 auto;background-color: #4F4A44;-webkit-transition: width 0.5s;-moz-transition : width 0.5s;-o-transition: width 0.5s;transition: width 0.5s; margin-top: 5px}
#page-header nav>ul>a#m-serie:hover,
#page-header nav>ul>a#m-serie.active{color:#3FB6A8}
#page-header nav>ul>a#m-portfolio:hover,
#page-header nav>ul>a#m-portfolio.active{color:#3FB6A8}
#page-header nav>ul>a#m-obras:hover,
#page-header nav>ul>a#m-obras.active{color:#3FB6A8}
#page-header nav>ul>a#m-servicios:hover,
#page-header nav>ul>a#m-servicios.active{color:#3FB6A8}
#page-header nav>ul>a#m-contact:hover,
#page-header nav>ul>a#m-contact.active{color:#3FB6A8}
#page-header .wrap #logo{
    background-image: URL('imagenes/logo.png');
    background-position: 0 0px;
    width: 146px;
    height: 148px;
    cursor: pointer;
    background-repeat: no-repeat;
    margin-left: 34px;
    margin-top: -13px;
}
/** Animacion **/

#page-header .wrap menu#media{padding-left: 216px;width: 144px;margin-top: 30px;margin-bottom: 48px}
#page-header .wrap menu#media>a>div{height: 44px;width: 44px;display: inline-block}
#page-header .wrap menu#media #facebook{background-image: URL('imagenes/facebook.png')}
#page-header .wrap menu#media #twitter{background-image: URL('imagenes/twitter.png')}
#page-header .wrap menu#media #instagram{background-image: URL('imagenes/instagram.png')}

#float-header{height: 52px; width: 100%; position: fixed; top: 0;background-color: #4F4A44; z-index: 99999; transition: background 0.6s linear, margin 0.4s 0.4s ease-in, width 0.4s 0.4s ease-in, height 0.4s linear; left: 50%; margin-left: -50%; opacity: 1;}
#float-header.hidden{width: 1000px; margin-left: -500px; height: 8px; opacity: 1; top: 163px; overflow: hidden; background-color: transparent; position: absolute}
#float-header.rosa{background-color: #4F4A44}
#float-header.rosa.hidden{background-color: transparent}
#float-header.hidden #logo-mini, #float-header.hidden ul>a{opacity: 0; transition: opacity 0s linear}
#float-header #logo-mini{width: 92px; height: 32px; background-image:URL('imagenes/logo-mini.png'); margin-top: 7px; transition: opacity 0.4s 0.2s linear; -webkit-transition: opacity 0.4s 0.2s linear; -moz-transition: opacity 0.4s 0.2s linear; -ms-transition: opacity 0.4s 0.2s linear}
#float-header #menu-bajo{float: right; padding-top: 16px}
#float-header #menu-bajo>ul>a{text-align: center;margin-left: 17px;font-family: 'Alegreya Sans', sans-serif;font-size: 12px;display: inline-block;text-transform: uppercase;letter-spacing: 2px; color: #A5A29C; transition: opacity 0.4s 0.2s linear, color 1s linear; -webkit-transition: opacity 0.4s 0.2s linear, color 1s linear; -moz-transition: opacity 0.4s 0.2s linear, color 1s linear; -ms-transition: opacity 0.4s 0.2s linear, color 1s linear;}
#float-header #menu-bajo>ul>a:hover{color: #FFFFFF}

/****************************************************************
 *************************** 2.0 SLIDER *************************
 ***************************************************************/
.slider{width: 100%; background-color: #3FB6A8}
.slide-container{width:1000px;overflow: hidden; margin: 0 auto}
.slide-container .slide{display: inline-block}
.slide-container{height: 500px; font-size: 0}
.slide{width: 1000px;height: 500px;background-repeat: no-repeat;background-color: #4F4A44;vertical-align: top; background-position: center center}
.slide#S1{background-image: URL('imagenes/slider/1.jpg')}
.slide#S2{background-image: URL('imagenes/slider/2.jpg')}
.slide#S3{background-image: URL('imagenes/slider/3.jpg')}
.slide#S4{background-image: URL('imagenes/slider/4.jpg')}
.slide#S5{background-image: URL('imagenes/slider/5.jpg')}

.slider .silestoneBrand{background-image: URL('imagenes/silestone.png'); width: 146px; height: 165px; margin-left: auto; margin-right:25px; margin-top: 25px}
.slider .sliderText{width: 1000px; background-color: RGBA(79,74,68,.3); height: 120px; margin-top: 140px; text-align: center; background-size: 100%}
.slider .sliderText p{font-size: 11px; color: #F8F5EE; line-height: 28px; letter-spacing: 0.3em; padding-top: 28px; background-image: URL('imagenes/exclusivos_line.png'); background-repeat: no-repeat; background-position: 298px 28px;}
.slider .sliderText h2{font-size: 40px; line-height: 53px; font-style: italic; color: #F8F5EE}
.slider .slider-control{width: 1000px; overflow: hidden;}
.slider .textos{display: inline-block; width: 850px}
.slider .prevSlide, .slider .nextSlide{display: inline-block; width: 55px; height: 55px; background-repeat: no-repeat; background-image: URL('imagenes/slider-flecha.png'); cursor: pointer}
.slider .prevSlide{-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);}
/****************************************************************
 **************************** HOME ******************************
 ***************************************************************/
#homeinfo{padding-top: 0; padding-bottom:35px}
#homeinfo .ubicados{width: 290px; height: 37px; background: #3FB6A8; margin: 0 auto; text-align: center}
#homeinfo .ubicados h3{color: white; font-weight: 500; font-size: 11px; line-height: 28px; padding-top: 5px}
#homeinfo .subtitle{padding-top: 82px}
#homeinfo h3{font-size: 12px; color: #4F4A44}
#homeinfo p{width: 800px;margin: 0 auto;font-size: 16px;letter-spacing: 0.054em;color: #A79E90;font-weight: 400;line-height: 30px}
#homeinfo .rombo{margin-top: 30px;margin-bottom: 15px}


/****************************************************************
 ************************* 4.0 PORTFOLIO ************************
 ***************************************************************/
#portfolio{background-color: #F8F5EE; padding-bottom: 0}
#portfolio .title{color: #F0F0F0}
#portfolio .subtitle{color: #4F4A44}
#portfolio #galeria{padding-top: 10px; width: 924px}
#portfolio #proyectos{margin-left: -25px; padding-bottom: 25px; width: 945px; display: flex; display: -moz-flex; display: -ms-flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -moz-direction: row; -ms-flex: row wrap; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between;}
#portfolio #proyectos .obras_element{display: inline-block;width: 290px; flex-basis: 290px; -webkit-flex-basis: 290px; -moz-flex-basis: 290px; -ms-flex-basis: 290px; height: 225px; background-color: #4F4A44;margin-left: 25px;margin-bottom: 25px;cursor: pointer;position: relative;overflow: hidden; transition: opacity 0.6s ease-in; opacity: 0}
#portfolio #proyectos .obras_element.shown{margin-top: 0px; opacity: 1}
#portfolio #proyectos .obras_element img{width: 290px; height: 225px}
#portfolio #proyectos .obras_element .overlay{position: absolute;width: 290px;height: 225px; display: table; background-color: RGBA(0,0,0,0.6); transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; opacity: 0}
#portfolio #proyectos .obras_element:hover .overlay{opacity: 1}
#portfolio #proyectos .obras_element .overlay .names{display: table-cell; vertical-align: middle; text-align: center}
#portfolio #proyectos .obras_element .overlay .names h3{color: #3FB6A8;font-size: 14px;margin-bottom: -6px;font-weight: 400;text-transform: uppercase;letter-spacing: 0.15em;line-height: 16.8pt;max-width: 250px;margin: 0 auto;}
#portfolio #proyectos .obras_element .overlay .names p{    color: #F8F5EE;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 18px;
    max-width: 220px;
    margin: 0 auto;}

/****************************************
**************** LIGHTBOX ***************
****************************************/
.obras-lightbox{
	position: fixed;
	display: none;
	width: 100vw;
	height: 101vh;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.7);
}

.obras-lightbox .obra-single{
	width: 100%;
	height: 100%;
	display: none;
	position: relative;
	margin: auto;
	display: table
}

.obras-lightbox .content{
	position: relative;
	width: auto;
	height: auto;
	background-color: transparent;
	display: table-cell;
	vertical-align: middle;
	text-align: center
}

.obras-lightbox .content .imgs-container{
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	background-color: #333;
	border: 15px solid white;
}
.obras-lightbox .imgs-container img.slider.active{
	position: absolute;
	display: block;
	width: auto;
	height: auto;
}

.obras-lightbox .close-btn{
	position: fixed;
	width: 30px;
	height: 30px;
	background-image: url('../imgs/icons/close.png');
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: 2px 0;
	top: 0;
	right: 0;
	cursor: pointer;
}

/****************************************************************
 *************************** 4.0 OBRAS **************************
 ***************************************************************/
 #obras{padding-bottom: 0}
#obras #obras-list{width: 924px; height:335px; display: flex; display: -moz-flex; display: -ms-flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-direction: column; flex-direction: column; -moz-direction: column; -ms-flex: column wrap; }
#obras #obras-list .obra{ display: inline-block; width: 280px; margin-bottom: 35px}
#obras #obras-list .obra h2{font-size: 13px; font-weight: 700; color: #4F4A44; letter-spacing: 1px; line-height: 15px}
#obras #obras-list .obra p{font-size: 13px; color: #A79E90; letter-spacing: 0.04em; line-height: 16px}
#obras #obras-list .obra p.autor{font-size: 13px; color: #009991; letter-spacing: 0.04em; line-height: 16px; font-style: italic}
#obras #obras-list .obra .closer{width: 20px; height: 1px; background-color: #4F4A44; margin-top: 5px}
#obras hr{border-color: #A79E90}

#servicios{padding-top: 35px}
#servicios #serv-list{width: 924px; display: flex; display: -moz-flex; display: -ms-flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -webkit-flex-direction: row; flex-direction: row; -moz-direction: row; -ms-flex: row wrap; justify-content: space-between; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between}
#servicios #serv-list .servicio{ display: inline-block; width: 290px; flex-basis: 290px; -webkit-flex-basis: 290px; -moz-flex-basis: 290px; -ms-flex-basis: 290px; height: 255px; color: white; text-align: center; background: #3FB6A8}
#servicios #serv-list .servicio h2{font-size: 14px; line-height: 20px; font-weight: 700; padding-top: 40px; padding-bottom: 25px}
#servicios #serv-list .servicio p{font-size: 14px; line-height: 20px; width: 250px; margin: 0 auto; letter-spacing: 0.05em}
/****************************************************************
 ************************* 5.0 PROYECTO ************************
 ***************************************************************/
#proyecto{background-color: #F0F0F0; padding-bottom: 115px}
#proyecto .title{color: #3FB6A8}
#proyecto #muestras{width: 935px; background-color: white; padding: 40px 28px}
#proyecto #muestras #detalle{padding-bottom: 75px}
#proyecto #muestras .left, #proyecto #muestras .right{display: inline-block}
#proyecto #muestras .left{width: 630px}
#proyecto #muestras .right{float: right;}
#proyecto #muestras #title{color: #969696; font-weight: 700; font-size: 16px; line-height: 14px; letter-spacing:0.075em; padding-bottom:6px}
#proyecto #muestras #description{color: #969696; font-weight: 500; font-size: 11px; line-height: 12px; letter-spacing:0.12em}
#proyecto #muestras #categories{text-align: center}
#proyecto #muestras #categories h3{line-height: 10px; padding: 10px 17px; color: #FFF; font-size: 11px; letter-spacing: 0.15em; font-weight: 700;background-color: #3FB6A8}
#proyecto #muestras #images{}
#proyecto #muestras #images img{width: 935px; height: 600px; text-align: center; padding-bottom: 25px}
#proyecto #internal_nav{padding-top: 25px; height: 40px}
#proyecto #backwards{background: url('imagenes/anterior.png');border: 0;height: 40px;width: 40px;background-repeat: no-repeat;float: left;}
#proyecto #fordward{background: url('imagenes/anterior.png');border: 0;height: 40px;width: 40px;background-repeat: no-repeat;float: right;
	-ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg)}
#proyecto #internal_nav #prev{float: left}
#proyecto #internal_nav #next{float: right}

#proyecto #internal_nav > a{/*display: inline-block;*/
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
	cursor: pointer}
#proyecto #internal_nav >a::before{
	content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #c8c8c8;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
	cursor: pointer
}
#proyecto #internal_nav >a:hover:before{
	-webkit-transform: scale(1);
    transform: scale(1);
}


/****************************************************************
 ************************* 6.0 FOOTER ***************************
 ***************************************************************/
footer#page_footer{background-color: #4F4A44;width:100%;bottom: 50px; padding-bottom: 70px}
footer#page_footer .subtitle{padding-bottom: 0px; color: #fff}
footer#page_footer form .left_part{width: 448px;display: inline-block;margin-right: 28px}
footer#page_footer form .left_part input[type="text"]{background-color: #716D68;border: none;width: 448px;height: 50px;margin-bottom: 25px;color: #F0F0F0;font-family: 'Alegreya Sans', sans-serif;padding-left: 20px;font-size: 13px;letter-spacing: 0.15em; font-weight: 700}
footer#page_footer form textarea{resize:none;background-color: #716D68;border: none;width: 448px;height: 120px;vertical-align: top;color: #F0F0F0;font-family: 'Alegreya Sans', sans-serif;padding: 20px;font-size: 13px;letter-spacing: 0.15em; box-sizing: border-box; height: 200px; font-weight: 500}
footer#page_footer form aside{margin-top: 5px}
footer#page_footer form aside input[type="submit"]{cursor: pointer;border: 0;height: 50px;width: 923px; background: #3FB6A8; color: #4F4A44; font-size: 15px;font-family: 'Alegreya Sans', sans-serif; text-align: center; line-height: 49px; letter-spacing: 2px; font-weight: 700; margin-bottom: 40px; transition: all 0.6s linear; -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; -ms-transition: all 0.6s linear;}
footer#page_footer form aside input[type="submit"]:hover{background:#383431; color:RGB(169,169,169);}
footer#page_footer form aside hr{color: #F8F5EE; padding: none; margin: none; margin-bottom: 30px; position: absolute; width: 100%; left: 0; box-sizing: border-box;}
footer#page_footer form aside h3{color: #FFF; font-size: 18px; font-weight: 500; letter-spacing: 2px; line-height: 30px; text-align: center; padding-top:30px}
footer#page_footer form aside p{font-size: 18px;color: #FFF; text-align: center; letter-spacing: 2px; line-height: 21px; font-weight: 300}
footer#page_footer form aside p i a{font-size: 18px;color: #FFF; text-align: center; letter-spacing: 2px; line-height: 21px; font-weight: 300}
#final-rombo{height: 185px;border-top: 8px solid #3FB6A8;width: 1000px;margin: 0 auto;background-position: center 15px}