/* CSS Document */

	
/*----------- FUENTES-------------*/
     
@font-face {
	font-family: 'BebasNeue';
	src: url('../fonts/bebasneue-webfont.eot');
	src: url('../fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/bebasneue-webfont.woff') format('woff'),
	url('../fonts/bebasneue-webfont.ttf') format('truetype'),
	url('../fonts/bebasneue-webfont.svg#BloodyNormal') format('svg'); }
 
@font-face{
	font-family:'Dense';
	src: url('../fonts/Dense-Regular.otf') format('opentype'); }
@font-face{
	font-family:'OpenSansREG';
	src: url('../fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face{
	font-family:'OpenSansLT';
	src: url('../fonts/OpenSans-Light.ttf') format('truetype'); }
@font-face{
	font-family:'OpenSansSB';
	src: url('../fonts/OpenSans-Semibold.ttf') format('truetype'); }
@font-face{
	font-family:'OpenSansBD';
	src: url('../fonts/OpenSans-Bold.ttf') format('truetype'); }

/*---------------- CUERPO ----------------*/

html, body {height:100%;}
body {
	color: #3d3c3f;
    font-family: 'OpenSansREG',Helvetica,Arial,sans-serif;
    font-size: 12px; }

/*a:focus, a:hover {color:#09f;}*/
a {color:#2eaadc;text-decoration:none;}

.w980{ width: 970px; padding: 0 5px; margin: 0 auto;}
.clearfix, .container {display:block;}
.clear {clear:both;}
.clear0{clear:both; text-indent:-9999px; height:0px;}
.LT{ font-family:'OpenSansLT', Arial, Helvetica, sans-serif;}
.REG{ font-family:'OpenSansREG', Arial, Helvetica, sans-serif;}
.SB{ font-family:'OpenSansSB', Arial, Helvetica, sans-serif;}
.BD{ font-family:'OpenSansBD', Arial, Helvetica, sans-serif;}
.Bebas{font: 20px/20px 'BebasNeue'; letter-spacing:0.5px;}


html, body{ margin: 0; padding: 0; height:100%; 
	font-family: 'OpenSansLT',Helvetica,Arial,sans-serif; font-size: 12px;}

#intro { width:100%; height: 100%; /*background:#f2f2f2;*/ position: relative;
	/*background: url(../images/fondoIntro.png) top center no-repeat;*/ }

/*----------- INTRO ---------*/

#intro #contentIntro{ border-bottom: 2px solid #fff; width:96.2%; padding: 0 0 0 3.8%; position: absolute;
	top: 60%; z-index:200;}
#intro #btnIntro{ background: url(../images/flechaIntro.png) right 8px no-repeat; color:#fff; padding: 0 35px 0 0;  	
	cursor: pointer; font: 40px 'BebasNeue', Arial, Helvetica, sans-serif; letter-spacing: 3px; 
	text-transform: uppercase; }
#intro #btnIntro:hover{ opacity:0.6;}
#intro a#logoONU{ display: block; width:110px; height: 45px; position: absolute; right:20px; bottom:10px;
	background: url(../images/logoUNRWA.png) no-repeat; z-index:99999;}
#intro a#logoONU:hover{ opacity:0.6;}


/*----------- Vídeo ---------*/

#close_vid{ position: absolute; z-index:1000; background:rgba(0, 0, 0, 0.8); top:20px; right:20px; display: block;
	cursor: pointer; border: 2px solid #fff; border-radius: 8px; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 1.5px; line-height:20px; padding:3px 10px 2px;}
/*#close_vid{ position: absolute; z-index:10; background:rgba(0, 0, 0, 0.8); top:20px; right:20px; display: block;
	cursor: pointer; width: 102px; height:31px;	background: url(../images/btnSaltarVideo.png) no-repeat; }*/
#div_demo {
	width: 100% !important;
   	height: auto;
	position: absolute;
	z-index:9;
}

/*----------- Spot IPAD ---------*/

#close_spot{ position: absolute; z-index:1000; background:rgba(0, 0, 0, 0.8); top:20px; right:20px; display: block;
	cursor: pointer; border: 2px solid #fff; border-radius: 8px; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 1.5px; line-height:20px; padding:3px 10px 2px;}
#spot {	width:100%;	height:100%; position: absolute; z-index:999; background: rgba(0, 0, 0, 0.7); }
#video_spot { width:853px; height:480px; position: absolute; margin-left: -426px; left:50%; margin-top: -240px; top: 50%; }


/*----------- ANIMACIÓN FONDO PIXELES ---------*/

#container #fondoIntro { width:38%; height:100%; padding:0px; margin:0; position: absolute; left:0; }
#container #fondoIntro { width:38%; height:100%; padding:0px; margin:0; position: absolute; left:0; }
#container .clipped{ background:rgba(0, 0, 0, 0.8); position: absolute; z-index:1; }


/*----------- CONTENIDO ---------*/

#wrap { width:100%; height: 100%; position: relative; margin:0; padding: 0; overflow: hidden; }

#container { height:100%; overflow:hidden; overflow-x: auto; overflow-y: no-content; margin:0px; }
#container #fondo { width:38%; height:100%; background:rgba(0, 0, 0, 0.8);
    padding:0px; margin:0; position: absolute; /*left:-38%;*/ left:0%; }

	
#container .bloc { width:100%; position: absolute; top:0px; left: 0; color:#fff; padding: 30px 0 0; z-index:9;}
#container #bloc2, #container #bloc3, #container #bloc4, #container #bloc5 {opacity: 0; z-index:1000;}

#container .bloc h1{ width:80%; margin: 0 auto; font-family: 'Dense', Arial, Helvetica, sans-serif;
	font-weight: normal; text-transform: uppercase; font-size:30px; letter-spacing: 2px; padding-top:20px;}
#container .bloc h1 span{ font-size: 20px; letter-spacing: 1px;}
#container .bloc .contenido{ position: relative; width:80%; margin: 0 auto; border-top: 2px solid #fff;
padding:30px 10%;}
#container .bloc .contenido p{ font-size:14px; padding: 0 0 10px; margin: 0;}
#container .bloc .contenido p strong{ font-family:'OpenSansSB', Arial, Helvetica, sans-serif; font-weight: normal;}

#container .bloc .contenido h2, #container .bloc .contenido h3{ font-weight: normal; font-size:18px; margin: 0; padding:0; line-height:20px; }
#container .bloc .contenido h2{ font-family:'OpenSansLT', Arial, Helvetica, sans-serif; color:#c5c5c5;}
#container .bloc .contenido h3{ font-family:'OpenSansSB', Arial, Helvetica, sans-serif; margin: 5px 0 50px;}

#container #bloc1 { left:-38%;  z-index:99999;}
#container #bloc1 #eslogan{ font-family: 'OpenSansSB'; padding: 0 10% 5px;}
#container #bloc1 #botonesHome{ position: absolute; margin-top:50px; z-index:99999999;}
#container #bloc1 a#btnDonar, #container #bloc1 a#btnVideo{ background: url(../images/btnDonar.png) no-repeat; 
	padding: 5px 0 0 41px; height: 26px; display: block; font: 20px 'Dense', Arial, Helvetica, sans-serif; 
	text-transform: uppercase; color:#fff; letter-spacing: 2px;}
#container #bloc1 a#btnVideo{ background: url(../images/btnVideo.png) no-repeat;  clear: both;}
#container #bloc1 div#compartir{ margin: 10px 0px; height:31px; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 2px;}
#container #bloc1 div#compartir a{ display: block; float: left; margin-right: 10px; text-indent:-9999px; font-size:0;}
#container #bloc1 a#btnFb{ background: url(../images/btnFb.png) no-repeat; height:31px; width: 31px; }
#container #bloc1 a#btnTwit{ background: url(../images/btnTwit.png) no-repeat; height:31px; width: 31px; }
#container #bloc1 div#compartir span{ display: block; padding: 0; float: left; padding-top:5px;}
#container #bloc1 a:hover{ opacity: 0.3;}

#container #bloc4 p{ padding-left:41px;}
#container #bloc4 p#par1{ background: url(../images/icono1.png) no-repeat left 5px;}
#container #bloc4 p#par2{ background: url(../images/icono2.png) no-repeat left 5px;}
#container #bloc4 p#par3{ background: url(../images/icono3.png) no-repeat left 5px;}
#container #bloc4 p#par4{ background: url(../images/icono4.png) no-repeat left 5px;}
#container #bloc4 p#par5{ background: url(../images/icono5.png) no-repeat left 5px;}
#container #bloc4 p#par6{ background: url(../images/icono6.png) no-repeat left 5px;}


#container #bloc5 a#btnSocio, #container #bloc5 a#btnDonativo{ background: url(../images/btnSocio.png) no-repeat; padding: 5px 0 0 41px; height: 26px; display: block; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 2px; margin-top: 30px;}
#container #bloc5 a#btnDonativo{ background: url(../images/btnDonar.png) no-repeat; margin-top: 10px;}
#container #bloc5 a:hover{ opacity: 0.3;}
	

/*----------- MENÚ ---------*/

#menu{ /*height: 66px;*/ position: absolute;  z-index: 9999999; width: 100%; bottom: -196px; /*padding-top: 130px;*/
	/*background: url(../images/fondoMenu.png) top center no-repeat;*/ border-bottom: 2px solid #fff; margin-bottom:30px;}
#fondoMenu{ height: 196px; position: absolute;  z-index: 9999; width: 100%; background: url(../images/fondoMenu.png) top center no-repeat;  bottom: -196px;}
#menu div{ color:#fff; cursor: pointer; font: 24px 'Dense', Arial, Helvetica, sans-serif; letter-spacing: 2px;
font-weight: normal; text-transform: uppercase; position: absolute; padding-bottom: 10px; background: url(../images/flechaMenu.png) bottom center no-repeat; bottom:0;}
#menu div:hover{ opacity:0.3;}

#menu div#btn1{ left:3.8%; font-size:40px; line-height: 40px; /*background: none; top:118px;*/}
#menu div#btn2{ left: 34%; margin-left:-28px;}
#menu div#btn3{ left: 50%; margin-left:-21px;}
#menu div#btn4{ left: 65%; margin-left:-55px;}
#menu div#btn5 { left: 81%; margin-left:-50px;}

#wrap a#logoONU{ display: block; width:110px; height: 45px; position: absolute; right:20px; bottom:40px;
	background: url(../images/logoUNRWA.png) no-repeat; z-index:99999999;}
#wrap a#logoONU:hover{ opacity:0.3;}



@media (max-width: 1280px){
	#menu div#btn1{  font-size:36px; line-height: 36px;}
	#container .bloc .contenido h3{ margin: 5px 0 20px;}
	#container #bloc1 #botonesHome{ margin-top: 25px; }
}

@media (max-height: 660px), (max-width: 1024px) {
	
	#menu div#btn1{  font-size:30px; line-height: 30px;}
	#container .bloc h1{ font-size:30px; padding-top:0px;}
	#container .bloc .contenido h2, #container .bloc .contenido h3{ 
	  font-size:16px; margin: 0; padding:0; line-height:18px; }
	#container .bloc .contenido h3{ margin: 5px 0 20px;}
	#container .bloc .contenido p{ font-size:12px; padding: 0 0 8px; margin: 0;}
	#container #bloc1 #botonesHome{ margin-top: 25px; }
}

@media (max-height: 580px) {
	#container #bloc1 a#btnDonar, #container #bloc1 a#btnVideo{ background: url(../images/btnDonar2.png) no-repeat; padding: 0px 0 0 29px; height: 20px; display: block; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 2px;}
#container #bloc1 a#btnVideo{ background: url(../images/btnVideo2.png) no-repeat; }
#container #bloc1 div#compartir{ margin: 8px 0px; height:20px; font: 20px 'Dense', Arial, Helvetica, sans-serif; text-transform: uppercase; color:#fff; letter-spacing: 2px;}
#container #bloc1 div#compartir a{ margin-right: 8px;}
#container #bloc1 a#btnFb{ background: url(../images/btnFb2.png) no-repeat; height:20px; width: 20px; }
#container #bloc1 a#btnTwit{ background: url(../images/btnTwit2.png) no-repeat; height:31px; width: 20px; }
#container #bloc1 div#compartir span{ padding-top:0px;}
}

@media (max-width: 950px){
	#wrap a#logoONU{ display: none; }
}