body, html {
  font-family: "Raleway", sans-serif;
  font-weight: 200;
  width: 100%;
  height: 100%;
  min-width: 1024px;
  background:url(/images/background.png);
  
}

#loader {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  background-color: white;
  width: 100%;
  height: 100%; }

#loader-container {
  width: 350px;
  height: 455px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto; }

#menu {
  margin: 0 auto;	
  position: fixed;
  top: 0%;
  width: 100%;
  min-width: 1024px;
  height: 70px;
  background:url(/images/menu_background.png) top center;
  background-size:54px 100%;
  opacity: 0.7;
  z-index: 500;
}
  #menu ul {
    margin: 0 8% 0 8%;
    padding: 0;
    text-align: center;
    list-style-type: none; }
    #menu ul li {
      display: inline;
      overflow:hidden;
      float: left;
      font-size: 1em;
      width: 14%;
    }
      #menu ul li a {
        text-align: center;
        display: block;
        width: 100%;
        line-height: 54px;
        color: black;
        background-position:-200px;
        background-repeat: no-repeat;
		overflow:hidden;
      }
      #menu ul li .inicio:hover {
        color: #666666;
        background-position:top center;
	    background-size:67%;
	    background-repeat: no-repeat;
      	overflow:hidden;
      }
	#menu ul li .magia:hover {
        color: #666666;
        background-position:top center;
	    background-size:67%;
	    background-repeat: no-repeat;
      	overflow:hidden;
      }
#menu ul li .trabajo:hover {
        color: #666666;
        background-position:top center;
	    background-size:88%;
	    background-repeat: no-repeat;
      	overflow:hidden;
      }
#menu ul li .ilustraciones:hover {
        color: #666666;
        background-position:top center;
	    background-size:88%;
	    background-repeat: no-repeat;
      	overflow:hidden;
      }
#menu ul li .hacemos:hover {
        color: #666666;
        background-position:center center;
	    background-size:100%;
	    background-repeat: no-repeat;
      	overflow:hidden;
      }
      #menu ul li a.bottom:hover {
        background-position:30% 10%; }
      #menu ul li a#contacto-btn:hover {
        background-position: center 95%; }

.bg {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  z-index: 1;
}

.content {
  position: relative;
  width: 84%;
  height: 100%;
  margin: 0px auto;
}

.puntillas-l, .puntillas-r {
  position: absolute;
  bottom: 0px;
  z-index: 2;
  height: 100%;
  max-width: 20%;
  background-color: red; }
  .puntillas-l img, .puntillas-r img {
    position: absolute;
    bottom: 0px;
    height: 100%; }

.puntillas-l {
  left: 0px; }
  .puntillas-l img {
    left: 0px; }

.puntillas-r {
  right: 0px; }
  .puntillas-r img {
    right: 0px; }

.text {
  color: white;
  font-size: 20px; }

#index #banda-redes-sociales {
  position:absolute;    
  top: 25%;
  right: 0px;
  padding-left: 17px;
  height:124px;
  background-repeat: no-repeat;
  z-index:900;
}
  #index #banda-redes-sociales a {
    text-decoration: none;
    display: block;
    text-align: center;
    height: 27px;
    z-index: 900;
  }
#index .content {
  width: 100%;
  height: 100%;
  background:url(/images/background.png);
}
  #index .content #logo {
    width: 100%;
    height: 100%;
    background:url("http://fapromociones.com/images/primera-seccion/logotipo-color-coated.png") no-repeat  center;
	background-size:25%;
  }
  #index .content #flecha {
    position: absolute;
    bottom: 15px;
    left: 50%;
    margin-left: -40px;
  }
 #index .content #slogan {
    position: absolute;
    bottom: 75px;
    left: 50%;
    margin-left: -150px;
  }
#index {
	z-index:3;
}
#la-magia {
  width: 100%;
  height: 100%;
  /*background:url(/images/background.png);*/
  z-index:3;
}
  #la-magia .content .texto {
    position: absolute;
    top: 7%;
    width: 60%;
    hight:100%;
    margin:0 0 0 -30%;
    left:50%;
  }
  #la-magia .content #pintura {
  	width: 20%;
    height: 100%;
   	width:20%;
    background:url("http://fapromociones.com/images/SEGUNDA%20SECCIO%CC%81N/pintura-con-sombra-.png")no-repeat  fixed 90%  1%;
  	position:absolute;
  	right:0; 
	}
  #la-magia .content #rodillo {
    height: 100%;
   	width:100%;
	background:url("http://fapromociones.com/images/SEGUNDA%20SECCIO%CC%81N/rodillo.png")no-repeat 95% 88%;
    background-size:15%;
	right:;
	position:absolute;
  }

#trabajos {
  width: 100%;
  height: 100%;
  z-index:4;
  /*background:url(/images/background.png);*/
}
  #trabajos .content .titulo {
    position: absolute;
    top: 15%;
    left: 0%;
	z-index:4;
  }
  #trabajos .content #flecha-lt, #trabajos .content #flecha-rt {
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 3; }
  #trabajos .content #flecha-lt {
    margin-left: -520px; }
  #trabajos .content #flecha-lt:hover {
    margin-left: -515px; }
  #trabajos .content #flecha-rt {
    margin-left: 426px; }
  #trabajos .content #flecha-rt:hover {
    margin-left: 429px; }
  #trabajos .content #galeria-container-trabajos {
    width: 100%;
    height: 100%;
    z-index:4;
  }
  .item1, .item2, .item3{
  	width: 240px;
    height:350px;
  	float:left;
  	margin:10px;
  	background:url(http://fapromociones.com/images/CUARTA%20SECCIO%CC%81N%20PROYECTOS/Marco-para-proyectos.png);
  	background-size:270px 360px;
}
    #trabajos .content #galeria-container-trabajos #galeria-trabajos-wrapper {
      width: 904px;
      height: 400px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -130px 0px 0px -451px;
    }
      #trabajos .content #galeria-container-trabajos #galeria-trabajos-wrapper #galeria-trabajos {
        position: absolute;
        width: 100%;
        height: 100%;
    	left:50%;
    	margin:0 0 0 -50%;
      }
        #trabajos .content #galeria-container-trabajos #galeria-trabajos-wrapper #galeria-trabajos .item {
          text-align: center;
          width: 800px;
          float: left;
          font-weight: bold;
          text-shadow: 2px 2px 5px #666666;
    	  margin:0 0 0 9px;
        }

#el-staff {
  width: 100%;
  height: 100%;
  /*background:url(/images/background.png);*/
}
  #el-staff .content {
    position: relative; }
    #el-staff .content .titulo {
      position: absolute;
      top: 15%;
      left: 0%; }
    #el-staff .content .lineas {
      position: absolute;
      width: 1000px;
      height: 420px;
      left: 50%;
      margin:90px 0 0 -500px;
      background:;
    }
      #el-staff .content .lineas #lineas {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 4; }
      #el-staff .content .lineas .elena, #el-staff .content .lineas .regina, #el-staff .content .lineas .rodrigo, #el-staff .content .lineas .danny, #el-staff .content .lineas .pablo {
        position: absolute;
        z-index: 1;
        opacity: 0;
        filter: alpha(opacity=0); }
      #el-staff .content .lineas #elena, #el-staff .content .lineas #regina, #el-staff .content .lineas #rodrigo, #el-staff .content .lineas #danny, #el-staff .content .lineas #pablo {
        position: relative;
        z-index: 3;
        width: 140px;
        height: 420px;
        float: left;
        cursor: pointer;
        background-color: white;
        opacity: 0;
        filter: alpha(opacity=0); }
      #el-staff .content .lineas .elena {
        top: -61px;
        left: -87px; }
      #el-staff .content .lineas .regina {
        top: -29px;
        left: 113px; }
      #el-staff .content .lineas .rodrigo {
        top: -70px;
        left: 216px; }
      #el-staff .content .lineas .danny {
        top: -32px;
        left: 396px; }
      #el-staff .content .lineas .pablo {
        top: -11px;
        left: 517px; }

#ilustraciones {
  width: 100%;
  height: 100%;
  /*background:url(/images/background.png);*/
}
  #ilustraciones .content .titulo {
    position: absolute;
    top: 15%;
    left: 3%; }
  #ilustraciones .content #flecha-li, #ilustraciones .content #flecha-ri {
    position: absolute;
    bottom: 180px;
    z-index: 3; }
  #ilustraciones .content #flecha-li {
    left: -200px; }
  #ilustraciones .content #flecha-li:hover {
    left: -203px; }
  #ilustraciones .content #flecha-ri {
    right: 20px; }
  #ilustraciones .content #flecha-ri:hover {
    right: 17px; }
  
    #ilustraciones .content #galeria-container-ilustraciones #galeria-ilustraciones-wrapper {
      position: absolute;
      left: 50%;
      bottom: 10px;
      width: 570px;
      height: 380px;
      margin-left: -230px; }
      #ilustraciones .content #galeria-container-ilustraciones #galeria-ilustraciones-wrapper #galeria-ilustraciones {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%; }
#ilustraciones .content #galeria-container-ilustraciones {
    width: 100%;
    height: 100%;
    background: transparent url("http://fapromociones.com/images/quinta_seccion/artes/post-it_03.png") no-repeat scroll 48% 110%;
	background-size:45%;
}
    #ilustraciones .content #galeria-container-ilustraciones #galeria-ilustraciones-wrapper {
      position: absolute;
      left: 50%;
      bottom: 10px;
      width: 470px;
      height: 380px;
      margin-left: -120px;
    }
      #ilustraciones .content #galeria-container-ilustraciones #galeria-ilustraciones-wrapper #galeria-ilustraciones {
        position: absolute;
        left: 0px;
        width: 100%;
    	margin:-50px 0 0 -100px;
      }

#contacto {
  /*background:url(/images/background.png);*/
}
  #contacto #taza {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url("http://fapromociones.com/images/SEPTIMA%20SECCIO%CC%81N%20CONTACTO/taza_03.png") no-repeat fixed 90% 70%;
    background-size:18%;  
    }
  #contacto .content .titulo {
    position: absolute;
    top: 10%;
    left: 5%; }
  #contacto .content #lapiz {
    position: absolute;
    left: 105%;
    top: 9px; }
  #contacto .content #cubos {
    position: absolute;
    top: 20%;
    left: 80%;
    z-index: -1; }
  #contacto .content .contacto {
    float: left;
    width: 350px;
    margin-left: 4%; 
    margin-top: 10%;
     height:300px;
  }
    #contacto .content .contacto p.nombre {
      font-weight: 400;
      color: #626264;
      margin: 0;
      font-size: 28pt; }
    #contacto .content .contacto p.detalles {
      margin: 0;
      color: #afa7a1;
      font-weight: 200;
      font-style: italic;
      font-size: 16pt; }
    #contacto .content .contacto .orange {
      color: #f78f34; }
    #contacto .content .contacto p.cel, #contacto .content .contacto p.email {
      color: #606163;
      margin: 0;
      font-size: 12pt; }
  #contacto #puntas {
    position: absolute;
    bottom: 0px;
    left: 0px;
  	
    width: 100%; }
    #contacto #puntas img {
      position: absolute;
      bottom: -2px;
      width: 100%; }
#contacto #redes-sociales {
    width: 100%;
    height: 170px;
    position: absolute;
    text-align: center;
    bottom: 50px;
}
    #contacto #redes-sociales a {
      text-decoration: none;
	
    }
      #contacto #redes-sociales a img {
        border: none; }
	.todos{
	    	width:30px; 
	    	height:70px; 
	    	background:;
        }
	 .none{
	    	width:30px; 
	    	height:70px; 
	    	background:;
	    	display:none;
        }
        .gale{
        	width:500px;
        	height:450px;
        	background:;
        	margin:0 auto;
		}
		.menu-puntos:hover{
			opacity:0;
			
		}
		
}#que-hacemos {
  width: 100%;
  height: 100%;
  /*background:url(/images/background.png);*/
}
  #que-hacemos .content .titulo {
    position: absolute;
    top: 15%;
    left: 3%; }
  #que-hacemos .content #flecha-i, #que-hacemos .content  {
    position: absolute;
    bottom: 160px;
    z-index: 3; }
  #que-hacemos .content #flecha-i {
    left: -23px; }
  #que-hacemos .content #flecha-i:hover {
    left: -80px; }
  #que-hacemos .content #flecha-d {
    position: absolute;
    bottom: 160px;
    left:70%;
    z-index: 3;}
  #que-hacemos .content #flecha-d:hover {
    margin:0 0 0 5px }
  
    
     .galeria-que-hacemos{
		margin:100px 0;
		height:400px;
		width:500px;
		background:purple;
     }

	.staff-persona{
		width:250px;
      	height: 720px;
      	
      	float:left;
        box-sizing: border-box;
      	
	}
	div .personal:hover{
		opacity:0;
	}
	h2 .personal-txt:hover{
		color:red;
	}
	.campo-texto{
		width:288px;
		height:30px;
		border:0;
		margin:3px 0;
		background:url(http://fapromociones.com/images/septima-seccion-contacto/campo-texto.png);
		color:#000;
		padding:0 5px;
		border-box:box-sizing;
	}
	.boton{
		width:120px;
		height:30px;
		border-radius:5px;
		border:0;
		margin:3px 180px;
		background:url(http://fapromociones.com/images/septima-seccion-contacto/boton-de-enviar_02.png)center center;
	}
	.textarea{
		width:290px;
		height:150px;
		border:0;
		margin:3px 0;
		background:url(http://fapromociones.com/images/septima-seccion-contacto/textarea.png);
		padding:2px 5px;
		border-box:box-sizing;
	}
	.men-hover:hover{
		opacity:0;
}
	.redes-hover{
		-webkit-transition:opacity 0.3s;
		-moz-transition: opacity 0.13s;
		-o-transition: opacity 0.13s;
	}
	/*s
	.redes-hover:hover{
		margin-botom:120px;
	}
	*/
}