/*
Theme Name:
Author: Luis Esparza
Author URI:
Description: 2015 Responive Web Theme for _____.
Version 1.0
Tags: black, red, white, responsive, flexible-width,
*/

/*body{ font-size: 62.5%; font-family:sans-serif;  color:#555; font-weight:300; overflow: hidden;  }*/

/* -- BASICS --*/

body{ font-size: 62.5%; font-family: 'Questrial', sans-serif; color:#555; font-weight:300; overflow-x:hidden; background-image: url(images/fondo_racsa.jpg); }

h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1em; }

h1.tit {font-size: 3em;}
h2.tit {font-size: 2em;}
h3.tit {font-size: 1em;}
h4.tit {font-size: 0.5em;}

/* -- GENERALES --*/

.wrapp { width:90%; max-width:1260px; margin:0 auto; display:block; position:relative;}

.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px;}

.izq {float: left;} .der {float: right;} .ctr {text-align: center;}

/* Hace que la imagen de fondo abarque todo y sea de cierta forma responsiva*/
.cover { background-position: center center; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; background-repeat: no-repeat no-repeat; }

.centro { width: 100%; height: auto; display: table; }

.verti { display: table-cell; vertical-align: middle; width: 100%; }

/*.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }*/

header { background-color: black; color: white; position: fixed; right: 0px; top: 0px; bottom: 0px; /*height: 100%;*/ width: 0px; background-image: url(images/fondo_menu.svg); background-repeat: no-repeat no-repeat; background-position: center bottom; background-size: 100%; z-index: 100;}

p {text-align: justify;}

.contenedor h1{ text-align: center; font-size: 2vw;}

.menur { background: black; position: absolute; left: -25px; top: 0; bottom: 0; display: table; height: 100%; width: 200px; font-size: 20px; padding-left: 4px; }

.menurchild{ display: table-cell; vertical-align: middle; /*height: 100%;*/ }

.logoracsa { background-color: white; }

.tabla { display: table; width: 100%; height: 100%;}

.menuitem { height: 4em; border-bottom-style: solid; border-bottom-color: #F89D3C; border-bottom-width: 1px; margin-right: 3em; }

.menuitem:hover { background-color: #F89D3C; color: black; }

.enlace{ padding-left: 2em; }

.active { background-color: #F89D3C; color: #000000 !important; }

.rsociales {bottom: 10%; right: 20%; left: 20%; width: 60%; position: absolute; font-size: 2em;}

.rsociales p { font-size: 0.7em; text-align: center;}

.rsociales a  { color: grey; }

.rsociales a:hover {color: #F89D3C;}

.seccion { margin: 0 2% 0 0; width: 98%; height: auto; }

.contenedor { width: 80%; height: 80%; margin: auto; }

.contenedorgrande { width: 100%; height: 100%; margin: auto; }

.contenedorpeque { background-color: white; width: 60%; height: 45%; opacity: 0.9; margin: auto; }

.contenedorpequenegro { background-color: black; width: 60%; height: 45%; opacity: 0.9; margin: auto; }
/*.celdaserv { display: inline-block; position: relative; width: 33.33%; height: 50%; margin: 0 0 -3px -3px; }*/

/*.celdanosotros { display: inline-block; position: relative; width: 50%; height: 33.3%; margin: 0 0 -3px -3px; }*/

.descservicio { display: none; position: absolute; top:0; right:0; left:0; bottom:0; background-color: white; }

.descservicio h2 { font-size: 1.5vw; text-align: center; }

.descservicio h2::after { content: ''; background-color: #F89D3C; width: 80%; display: block; height: 1px; position: relative; /*bottom: 0;*/ left: 10%; }

.descservicio p { font-size: 0.9vw; line-height: 1.3vw; padding-left: 10%; padding-right: 10%;}

.descnosotros { padding-left: 15%; padding-right: 15%; }

.descnosotros h2 { font-size: 2vw; text-align: justify;}

.descnosotros p { font-size: 1.4em; line-height: 1.4em;}

.descnosotros ul li { font-size: 1.4em; line-height: 1.4em;}

.divborde { position: absolute; top:0; right: 0; left: 0; bottom: 0; border: solid 1px; border-color: white;}

.nombreproy h1 { font-size: 1.5vw; text-align: center; color: #F89D3C; font-style: italic; padding: 30px 0;}

.nombreproy small {font-size: 1vw; color: #F89D3C; font-style: normal; /*padding: 40px 0;*/}

/*.nextprev h1 { font-size: 1.5vw; text-align: center; color: #F89D3C; font-style: italic; padding: 30px 0;}

.nextprev small {font-size: 1vw; color: #F89D3C; font-style: normal; /*padding: 40px 0;}*/

.letreroproy { display: none; position: absolute; top:0; right:0; left:0; bottom:0; background-image: url(images/real_cf.png);}

/*.letreroproy a { text-align: center; font-style: italic; font-size: 1vw; color: #F89D3C; }*/

.letreronegro { display: none;position: absolute; top:0; right:0; left:0; bottom:0; background-image: url(images/real_cf.png);}

.letreroproy a, .letreronegro a { text-align: center; font-style: italic; font-size: 1vw; color: #F89D3C; }

.proyvacio {position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-image: url(images/logo_racsa.svg); background-repeat: no-repeat; background-position: center; }
/*.nextprev { display: none; position: absolute; top:0; right:0; left:0; bottom:0; background-image: url(images/real_cf.png);}

.nextprev a { text-align: center; font-style: italic; font-size: 1vw; color: #F89D3C; }*/

.invitacion { color: #F89D3C; text-align: center; font-size: 1.5vw;}

.panelcontacto { max-width: 300px; position: absolute; display: block; z-index: 99; /*padding: 100px;*/ right: 5%; top: 0; bottom: 0; margin: auto; height: 100%; background-color: black; opacity: 0.8; }

.infocontacto { margin-right: 10%; margin-left: 10%; margin-top:25%; color: white;}

.infocontacto h1 { font-size: 2.5em; }

.infocontacto p { font-size: 1.25em; }

.oculto { display: none; }
/*.mapa { width:100%; height:100%; position: relative; overflow: hidden;}*/

#menu{ margin-top: 3em; }

#menu li a:hover{ background-color: #F89D3C; color: black; }

#menu li a { padding: 20px 0 20px 20%; width: 80%; color: white; display: block; text-align: left; position: relative; }

#menu li a::after { content: ''; background-color: #F89D3C; width: 80%; display: block; height: 1px; position: absolute; bottom: 0; left: 0; }

#flogo {background-image: url(images/1.jpg); color: white;}

#festac {background-image: url(images/2.jpg); color: white;}

#farrenda {background-image: url(images/3.jpg); color: white;}

#fedific {background-image: url(images/4.jpg); color: white;}

#furban {background-image: url(images/5.jpg); color: white;}

#fnegocios {background-image: url(images/6.jpg); color: white;}

#proycanal {background-image: url(images/CANALINTERCEPTOR.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center center;}

#proytelmo {background-image: url(images/SAN-TELMO.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center center;}

#proyrosedal {background-image: url(images/ROSELDA.jpg); background-size: 100%; background-repeat: no-repeat;}

#proyperseo {background-image: url(images/PERSEO.jpg); background-size: 100%; background-repeat: no-repeat;}

#proymorelos {background-image: url(images/MORELOS.jpg); background-size: 100%; background-repeat: no-repeat;}

#proyhornedo {background-image: url(images/HORNEDO.jpg); background-size: 100%; background-repeat: no-repeat;}

#proymontoro {background-image: url(images/MONTORO.jpg); background-size: 100%; background-repeat: no-repeat;}

#proypocitos {background-image: url(images/POCITOS.jpg); background-size: 100%; background-repeat: no-repeat;}

#proybarbara {background-image: url(images/BARBARA.jpg); background-size: 100%; background-repeat: no-repeat;}

#proyalonsoii {background-image: url(images/ALONSOII.jpg); background.size: 100%; background-repeat: no-repeat;}

#proyalonsoiii {background-image: url(images/ALONSOIII.jpg); background.size: 100%; background-repeat: no-repeat;}

#proymargil {background-image: url(images/MARGILJESUS.jpg); background.size: 100%; background-repeat: no-repeat;}

#proysantamonica {background-color: grey;}

#proycolosio {background-image: url(images/COLOSIO.jpg); background.size: 100%; background-repeat: no-repeat; }

#proyexpo {background-image: url(images/EXPOPLAZA.jpg); background.size: 100%; background-repeat: no-repeat; }

#imgmision {background-image: url(images/MISION.jpg); background-size: 100%; background-repeat: no-repeat;)}

#imgvision {background-image: url(images/VISION.jpg); background-size: 100%; background-repeat: no-repeat; }

#imgvalores {background-image: url(images/VALORES.jpg); background-size: 100%; background-repeat: no-repeat; }


/* ---- extra de may --- */
.servicios, .proyectos, .nosotros, .mapa { height: 100%; display: table-cell; }

.servicios li { display: inline-block; position: relative; height: 50%; width: 33.333%; margin: 0 -3px  -3px 0; text-align: center; font-size: 3em; }

.servicios li .centro { height: 100%; }

/*          Esto otro es mío :P      */
.proyectos li { width: 33.333%; display: inline-block; margin: 0 -3px  -3px 0; text-align: center; font-size: 3em; height: 33.333%; position: relative;}

.proyectos li .centro { height: 100%; }

.nosotros li { display: inline-block; position: relative; width: 50%; height: 33.33%; margin: 0 -3px -3px; text-align: center; font-size: 1em; }

.nosotros li .centro { height: 100%; }

#videobcg {
     position: absolute;
     top: 0px;
     left: 0px;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     z-index: -1000;
     overflow: hidden;
}


/*.masproyectos {}*/
/* -- MAPA --*/

.map {/* Altura del MAPA */ width: 100%; height: 100%; /*display: inline-block; position: relative;*/}

.map img { width: auto !important;  max-width: inherit !important; }

#map_canvas { height: 100% !important; width: 100%; }

/*  PARA LA DESCRIPCIÓN DE LOS PROYECTOS */
.zonaimg {background-color: #CEB9B9; position: relative; width: 65%; height: 550px; display: inline-block; left: 0px; vertical-align: top;}

.zonatxto {/*background-color: #C9C8C8;*/ position: relative; width: 35%; height: 550px; display: inline-block; right: 0px; margin-left: -3px; margin-right: 0px; vertical-align: top;}

.descriparriba {position: absolute; height: 70%;}

.descriparriba h1 {color: #A28973; font-size: 2.2vw; padding-left: 10%; padding-right: 15%; padding-top: 15%; }

.descriparriba p {color: #A28973; font-size: 1.2vw; padding-left: 10%; padding-right: 15%; }

.descriparriba li, .descriparriba table {color: #A28973; font-size: 0.8vw; padding-left: 10%; padding-right: 15%; }

.descripabajo {background-color: #A28973; position: absolute; bottom: 0; height: 30%; width: 100%;}

.descripabajo h1 {color: #FFF; font-size: 1.8vw; padding-left: 10%; padding-right: 15%; padding-top: 10%; }

.descripabajo p {color: #000; font-size: 1vw; padding-left: 10%; padding-right: 15%; }

/* -- COSAS DE MASONRY --*/
.grid-sizer {width: 33.33%; }