/****************************************************************
 ************************ 0.0 GENERAL *******************************
 ***************************************************************/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,500,700,800,900);
/***** Global Settings *****/
html, body {border:0;margin:0;padding:0}
*{margin: 0; padding: 0}
  
/***** Headings *****/
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;font-weight:normal;font-family: 'Lato', sans-serif}

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

/***** 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:1000px;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;}

/***** 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: 14px;
	letter-spacing: 0.1em;
	color: #FE504F;
	font-weight: 500;
	margin-bottom: 45px;
	line-height: 10px;
    padding-top: 15px}

/****************************************************************
 ************************* 1.0 HEADER ***************************
 ***************************************************************/
#page-header{padding-top: 7px}
#page-header .wrap{height: 156px;border-bottom: 8px solid #FE504F}
#page-header .wrap #data{height: 100%}
#page-header .wrap #data nav{padding-top: 85px}
#page-header nav>ul>a{width: 87px;text-align: center;margin-left: 17px;font-family: 'Lato', sans-serif;font-size: 12px;display: inline-block;text-transform: uppercase;letter-spacing: 2px}
#page-header nav>ul>a:after{content: "";display: block;width: 0;height: 2px;margin: 0 auto;background-color: #282828;-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:after,
#page-header nav>ul>a#m-serie.active:after{width:96%}
#page-header nav>ul>a#m-portfolio:hover:after,
#page-header nav>ul>a#m-portfolio.active:after{width:96%}
#page-header nav>ul>a#m-contact:hover:after,
#page-header nav>ul>a#m-contact.active:after{width:90%}
#page-header .wrap #logo{background-image: URL('imagenes/logo.png');background-position: -7px 0;width: 146px;height: 146px;cursor: pointer;}
/** Animación **/

#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: #282828; 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: #fe504f; position: absolute}
#float-header.rosa{background-color: #FE504F}
#float-header.hidden #logo-mini, #float-header.hidden ul>a{opacity: 0; transition: opacity 0s linear}
#float-header #logo-mini{width: 130px; height: 23px; background-image:URL('imagenes/logo-mini.png'); margin-top: 13px; transition: opacity 0.4s 0.2s linear}
#float-header #menu-bajo{float: right; padding-top: 16px}
#float-header #menu-bajo>ul>a{width: 87px;text-align: center;margin-left: 17px;font-family: 'Lato', sans-serif;font-size: 12px;display: inline-block;text-transform: uppercase;letter-spacing: 2px; color: white; transition: opacity 0.4s 0.2s linear}
#float-header #menu-bajo>ul>a:after{content: "";display: block;width: 0;height: 2px;margin: 0 auto;background-color: white;-webkit-transition: width 0.5s;-moz-transition : width 0.5s;-o-transition: width 0.5s;transition: width 0.5s; margin-top: 5px}
#float-header #menu-bajo>ul>a#mb-serie:hover:after,
#float-header #menu-bajo>ul>a#mb-serie.active:after{width:96%}
#float-header #menu-bajo>ul>a#mb-portfolio:hover:after,
#float-header #menu-bajo>ul>a#mb-portfolio.active:after{width:96%}
#float-header #menu-bajo>ul>a#mb-contact:hover:after,
#float-header #menu-bajo>ul>a#mb-contact.active:after{width:90%}
/****************************************************************
 ***************************** 2.0 SLIDER ***************************
 ***************************************************************/
.slider{width: 100%; background-color: #282828}
.slide-container{width:1000px;overflow: hidden; margin: 0 auto}
.slide-container .slide{display: inline-block}
.slide-container{height: 500px}
.slide{width: 1000px;height: 500px;background-repeat: no-repeat;background-color: #282828;vertical-align: top; background-position: center center}
.slide#S1{background-image: URL('imagenes/slider/1.png')}
.slide#S2{background-image: URL('imagenes/slider/2.png')}
.slide#S3{background-image: URL('imagenes/slider/3.png')}
.slide#S4{background-image: URL('imagenes/slider/4.png')}
.slide#S5{background-image: URL('imagenes/slider/5.png')}


/****************************************************************
 ************************* 3.0 SERIE HOME ***************************
 ***************************************************************/
#homeinfo{padding-top:40px; padding-bottom:35px} 
#homeinfo .subtitle{color: #FE504F}
#homeinfo h3{font-size: 12px;letter-spacing: 0.15em;color: #282828}
#homeinfo p{width: 800px;margin: 0 auto;font-size: 16px;letter-spacing: 0.054em;color: #969696;font-weight: 300;line-height: 30px}
#homeinfo .rombo{margin-top: 30px;margin-bottom: 15px}


/****************************************************************
 ************************* 4.0 PORTFOLIO ************************
 ***************************************************************/
#portfolio{background-color: #FE504F}
#portfolio .title{color: #F0F0F0}
#portfolio .subtitle{color: #282828}
#portfolio #galeria{padding-top: 10px}
#portfolio #proyectos{margin-left: -25px; padding-bottom: 40px}
#portfolio #proyectos a.proyecto_item{display: inline-block;width: 316px; height: 265px; background-color: #282828;margin-left: 25px;margin-bottom: 25px;cursor: pointer;position: relative;overflow: hidden; transition: opacity 0.6s ease-in; opacity: 0}
#portfolio #proyectos a.proyecto_item.shown{margin-top: 0px; opacity: 1}
#portfolio #proyectos a.proyecto_item img{width: 316px;}
#portfolio #proyectos a.proyecto_item .overlay{position: absolute;width: 316px;height: 265px; display: table; background-color: RGBA(0,0,0,0.85); transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; opacity: 0}
#portfolio #proyectos a.proyecto_item:hover .overlay{opacity: 1}
#portfolio #proyectos a.proyecto_item .overlay .names{display: table-cell; vertical-align: middle; text-align: center}
#portfolio #proyectos a.proyecto_item .overlay .names h3{color: #FE504F;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 a.proyecto_item .overlay .names p{color: #fff;font-size: 12px;font-weight: 500;letter-spacing: 0.15em;line-height: 24pt;text-transform: lowercase}

/***		OPACITY		***/
/*#portfolio #proyectos .proyecto_item{background-image: URL("imagenes/test.jpg");background-size: 362px;-webkit-transition : opacity 0.5s;-moz-transition : opacity 0.5s;-o-transition : opacity 0.5s;transition : opacity 0.5s}
#portfolio #proyectos:hover .proyecto_item{opacity: 0.5}
#portfolio #proyectos div.proyecto_item:hover{opacity: 1}
*/
/***		IMG-COLOR		***/
/*
#portfolio #proyectos .proyecto_item{background-image: URL("imagenes/test.jpg");background-size: 362px;-webkit-filter: grayscale(1);filter: grayscale(1);-webkit-transition : -webkit-filter 0.5s}
#portfolio #proyectos .proyecto_item:hover{-webkit-filter: grayscale(0)}
*/
/***		BLUR (SOLO CHROME :( ))		***/
/*
#portfolio #proyectos .proyecto_item{background-image: URL("imagenes/test.jpg");background-size: 362px;-webkit-transition : -webkit-filter 0.5s;transition : -webkit-filter 0.5s}
#portfolio #proyectos:hover .proyecto_item{-webkit-filter: blur(4px)}
#portfolio #proyectos div.proyecto_item:hover{-webkit-filter: blur(0px)}
*/
/*** 		SLIDE DOWN DIV		***/
/*#portfolio #proyectos .proyecto_item .upslider{opacity: 0.5;background-color: blue;width: 100%;z-index: 9000}
*/


/****************************************************************
 ************************* 5.0 PROYECTO ************************
 ***************************************************************/
#proyecto{background-color: #F0F0F0; padding-bottom: 115px}
#proyecto .title{color: #FE504F}
#proyecto .subtitle{color: #282828}
#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: #FE504F}
#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: #282828;width:100%;bottom: 50px; padding-bottom: 70px}
/*footer#page_footer .wrap{border-bottom: 8px solid #FE504F}*/
/*footer#page_footer .wrap #contact{margin-top: 20px;margin-bottom: 70px}*/
footer#page_footer .title{color: #F0F0F0}
footer#page_footer .subtitle{color: #FE504F; padding-bottom: 0px}
footer#page_footer form .left_part{width: 500px;display: inline-block;margin-right: 10px}
footer#page_footer form .left_part input[type="text"]{background-color: #282828;border: 1px solid #FE504F;width: 500px;height: 33px;margin-bottom: 10px;color: #F0F0F0;font-family: 'Lato', sans-serif;padding-left: 10px;font-size: 11px;letter-spacing: 0.15em}
footer#page_footer form textarea{resize:none;background-color: #282828;border: 1px solid #FE504F;width: 490px;height: 120px;vertical-align: top;color: #F0F0F0;font-family: 'Lato', sans-serif;padding: 10px;font-size: 11px;letter-spacing: 0.15em}
footer#page_footer form aside{margin-top: 15px}
footer#page_footer form aside input[type="submit"]{cursor: pointer;background: url('imagenes/flecha_derecha-01.png');border: 0;height: 44px;width: 44px;background-repeat: no-repeat;float: right;}
footer#page_footer form aside a.submit{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}
footer#page_footer form aside a.submit::before{
	content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FE504F;
    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
}
footer#page_footer form aside a.submit:hover:before{
	-webkit-transform: scale(0.9);
    transform: scale(0.9);
}
/*footer#page_footer form aside input[type="submit"]:hover{background: url('imagenes/flecha_derecha-02.png');background-position: 1px;background-repeat: no-repeat}*/
footer#page_footer form aside p{font-size: 12px;color: #F0F0F0;text-align: center;letter-spacing: 0.15em;line-height: 22px; font-weight: 300}
#final-rombo{height: 185px;border-top: 8px solid #fe504f;width: 1000px;margin: 0 auto;background-position: center 15px}