* {margin:0; padding:0; list-style: none;}

.containerlayout { 
	width: 952px; height:580px; position:relative; overflow: hidden;
	background: url('i/backgroundIntro.gif') no-repeat center center #f2f2f2;
	-webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -o-box-sizing: border-box;	-ms-box-sizing: border-box;	box-sizing: border-box;
	box-shadow: inset 0 0 10em rgba(0,0,0,.2);
}
.containerlayout * { -webkit-box-sizing: border-box;	-moz-box-sizing: border-box; -o-box-sizing: border-box;	-ms-box-sizing: border-box;	box-sizing: border-box;}

/*** Slides ****/
.containerlayout .slide { 
	position: absolute; width: 100%; height:100%; top:0; left:0;
	background-image:none; background-position:left top; background-repeat:no-repeat 
}
.containerlayout .slide.section 		{ /*display:none;*/ }
.containerlayout .slide.section.active 	{ display:block; left:0; }
.containerlayout .slide .description 	{ background-image: url('i/dark_leather.png'); position:absolute; z-index: 1; border-left: 1px solid #aaa;}

/*** Secciones ****/
.containerlayout .slide.section .description { 
	width: 364px; height:100%; 
	 top:0; right:0;
}
.containerlayout .slide.section .description .close { 
	position: absolute; 
	left: -100px; top:20px; 
	padding: 1em .7em; color:white; 
	background-color: #000;
	text-decoration: none;
	display: block;
	width: 100px;
	z-index: 0;
	font-size: 1.2em;
	text-align: center;
}
.containerlayout .slide.section .description .close > i     { float:right; }
.containerlayout .slide.section .description .close:hover   { opacity:.5; }
.containerlayout .slide.section .description .close:hover > i { float:right; }

.containerlayout .slide.section .description .dataContent { 
	width:100%; display:block; background-color: white; color:black;
	padding: 2em 2em 1em 2em; 
	min-height: 220px;
	position: relative;
	z-index: 12;
}

.containerlayout .slide.section .description > p,
.containerlayout .slide.section .description > .chapeaux,
.containerlayout .slide#slide_Intro .description p 			{ display:block; margin:1em 0; color:white; line-height: 1.1em; padding: 0 2em; font: normal 12px/13px RTVEFontR; text-indent: 1em;}
.containerlayout .slide.section .description .dataContent > h3,
.containerlayout .slide#slide_Intro .description > h3 		{ color: #d1275c; font: normal 3em/1em RTVEFontB;}
.containerlayout .slide.section .description .dataContent .subjects { text-transform: uppercase; font: normal 1.2em/2em RTVEFontB; color: #5F5F5F; margin: .7em 0 0;display: block;}
.containerlayout .slide.section .description .lists 	{ }
.containerlayout .slide.section .description .lists li 	{ padding-left: 5px; display: block; font: normal 1.3em/1em RTVEFontR; margin: .2em 0;}
.containerlayout .slide.section .description .lists sup { line-height: 0em;}
.containerlayout .slide.section .description .relacionado {}
.containerlayout .slide.section .description .relacionado li {
    padding: .5em .5em .5em 1.231em;
    float:left;
    background: url('/css/style2011/i/LinksDot_news.png') no-repeat .5em 0.3em;
    background-color: white; 
    font-family: Helvetica, Arial;
    font-size: 1em;
    -webkit-box-shadow: 2px 2px 5px black;
    -moz-box-shadow: 2px 2px 5px black;
    -ms-box-shadow: 2px 2px 5px black;
    -o-box-shadow: 2px 2px 5px black;
    box-shadow: 2px 2px 5px black;  
}
.containerlayout .slide.section .description .relacionado li.none { background-image: none; float:left;}
.containerlayout .slide.section .description .relacionado li a span{ font-weight: bold;}
.containerlayout .slide.section .description .relacionado li img {
	width: 20%; float: left; display: inline-block; margin-right: 1em;
}
/*** icons ***/
.containerlayout .icon 				{ width: 14px; height:14px; background: url('i/listSprite.gif') no-repeat left top; display: inline-block; margin: 0 .4em 0 0;}
.containerlayout .icon-place 		{ background-position: 0 0;}
.containerlayout .icon-extension 	{ background-position: 0 -14px;}
.containerlayout .icon-people 		{ background-position: 0 -28px;}
.containerlayout .icon-group 		{ background-position: 0 -42px;}
.containerlayout .icon-close 		{ background-position: 0 -56px;}

/*** Slide Intro ***/
.containerlayout .slide#slide_Intro 		{ }
.containerlayout .slide#slide_Intro .head 			{ color:white; display:block; font: normal 3em/1em RTVEFontB; background-color: #c4164d; border-bottom: 2px solid black; padding: .3em .5em; box-shadow: 0 10px .5em rgba(0,0,0,.3);}
.containerlayout .slide#slide_Intro .description 	{ position: absolute; bottom: 0; left: 0;}
.containerlayout .slide#slide_Intro .description p 	{ font-size: 14px; padding: 0 .7em;}
.containerlayout .slide#slide_Intro .description > div 	{ display: inline-block; vertical-align: top;}
.containerlayout .slide#slide_Intro .description > h3 	{ position: absolute; top: -1.2em; padding: 0 .7em;}

/*** Places ***/
.containerlayout .place 		{ position: absolute; }
.containerlayout .place a		{ display:block; position:relative; z-index:12; width: 100%; height:100%; background-image:none; background-position: 0 0; background-repeat: no-repeat;}
.containerlayout .place a span 	{
	display: none;   
	position: absolute; z-index: 14; 
	right: 50%; top: 25%;
	font: normal 1.4em/1em RTVEFontB; color:white; 
	background-color: black; padding: .5em 1em;
	clip: rect(0px,14em,12em,0px);
	-webkit-animation: cortinilla .5s 0s;
	-moz-animation: cortinilla .5s 0s;
	-o-animation: cortinilla .5s 0s;
	-ms-animation: cortinilla .5s 0s;
	animation: cortinilla .5s 0s;
}
.containerlayout .place a:hover span { display:block; overflow:hidden; width:auto }
.containerlayout .place.Mali 	{ width: 140px; height:144px; top: 195px; left: 58px;}
.containerlayout .place.Mali a 	{ background-image: url('i/pointMali.png'); background-position: 0 -144px; }
.containerlayout .place.Mali a:hover 	{ background-image: url('i/pointMali.png'); background-position: 0 0; }

.containerlayout .place.Somalia 		{ width: 86px; height:131px; top: 322px; left: 512px;}
.containerlayout .place.Somalia a 		{ background-image: url('i/pointSomalia.png'); background-position: 0 -131px; }
.containerlayout .place.Somalia a:hover 	{ background-image: url('i/pointSomalia.png'); background-position: 0 0; }

.containerlayout .place.Yemen 		{ width: 88px; height:62px; top: 254px; left: 523px;}
.containerlayout .place.Yemen a 	{ background-image: url('i/pointYemen.png'); background-position: 0 -62px; }
.containerlayout .place.Yemen a:hover 	{ background-image: url('i/pointYemen.png'); background-position: 0 0; }

.containerlayout .place.AfgPak 		{ width: 134px; height:137px; top: 71px; left: 655px;}
.containerlayout .place.AfgPak a 	{ background-image: url('i/pointAfgPak.png'); background-position: 0 -137px; }
.containerlayout .place.AfgPak a:hover 	{ background-image: url('i/pointAfgPak.png'); background-position: 0 0; }

/*** Slides Places Backgrounds ***/
.containerlayout .slide#slide_Mali 			{ background-image:url('i/backMali.jpg'); }
.containerlayout .slide#slide_Somalia 		{ background-image:url('i/backSomalia.jpg'); }
.containerlayout .slide#slide_Yemen 		{ background-image:url('i/backYemen.jpg'); }
.containerlayout .slide#slide_AfgPak 		{ background-image:url('i/backAfgPak.jpg'); }

/*** slides ids ****/
.containerlayout .slide 		{ z-index: 10; }
.containerlayout .slide.section { 
    z-index: 11; 
    left:100%; 
    -webkit-animation: fadeOut .5s 0s;
}
.containerlayout .slide.section.active { 
    left:0;
    z-index: 11; 
    -webkit-animation: fadeIn .5s 0s;
}

.containerlayout .slide.section.active .description {
	-webkit-animation: inDescription .5s 0s;

}
.containerlayout .slide.section.active .description .close {
	-webkit-animation: inClose 1s 0s;
}

.containerlayout .slide.section .description { }
.containerlayout .slide.section .description .close {
	-webkit-animation: outClose .5s 0s;
}


@keyframes cortinilla{
	from 	{ clip: rect(0px,0em,2em,0px);	}
	to 		{ clip: rect(0px,14em,12em,0px); }
} 
@-webkit-keyframes cortinilla{
	from 	{ clip: rect(0px,0em,2em,0px);	}
	to 		{ clip: rect(0px,14em,12em,0px); }
} 
@-moz-keyframes cortinilla{
	from 	{ clip: rect(0px,0em,2em,0px);	}
	to 		{ clip: rect(0px,14em,12em,0px); }
} 
@-ms-keyframes cortinilla{
	from 	{ clip: rect(0px,0em,2em,0px);	}
	to 		{ clip: rect(0px,14em,12em,0px); }
} 
@-o-keyframes cortinilla{
	from 	{ clip: rect(0px,0em,2em,0px);	}
	to 		{ clip: rect(0px,14em,12em,0px); }
} 
/***** Fade IN/Out ********/
@keyframes fadeIn 			{ 
	from 	{ left:100%; } 
	to 		{ left:0; } 
}
@keyframes fadeOut 			{
	0% 		{ left: 0;	}
	50% 	{ left: 0; }
	100% 	{ left: 100%; }
}
@-webkit-keyframes fadeIn 			{ 
	from 	{ left:100%; } 
	to 		{ left:0; } 
}
@-webkit-keyframes fadeOut 			{
	0% 		{ left: 0;	}
	50% 	{ left: 0; }
	100% 	{ left: 100%; }
}
@-moz-keyframes fadeIn 			{ 
	from 	{ left:100%; } 
	to 		{ left:0; } 
}
@-moz-keyframes fadeOut 			{
	0% 		{ left: 0;	}
	50% 	{ left: 0; }
	100% 	{ left: 100%; }
}
@-o-keyframes fadeIn 			{ 
	from 	{ left:100%; } 
	to 		{ left:0; } 
}
@-o-keyframes fadeOut 			{
	0% 		{ left: 0;	}
	50% 	{ left: 0; }
	100% 	{ left: 100%; }
}
@-ms-keyframes fadeIn 			{ 
	from 	{ left:100%; } 
	to 		{ left:0; } 
}
@-ms-keyframes fadeOut 			{
	0% 		{ left: 0;	}
	50% 	{ left: 0; }
	100% 	{ left: 100%; }
}
/****************************/
@keyframes inDescription 	{ 
	0% 		{ right: -50%; } 
	100% 	{ right: 0%; } }

@keyframes outDescription 	{
	0%      { right: 0;	}
	100%	{ right: -50%; }
}
@-webkit-keyframes inDescription 	{ 
	0% 		{ right: -50%; } 
	100% 	{ right: 0%; } }

@-webkit-keyframes outDescription 	{
	0%      { right: 0;	}
	100%	{ right: -50%; }
}
@-moz-keyframes inDescription 	{ 
	0% 		{ right: -50%; } 
	100% 	{ right: 0%; } }

@-moz-keyframes outDescription 	{
	0%      { right: 0;	}
	100%	{ right: -50%; }
}
@-o-keyframes inDescription 	{ 
	0% 		{ right: -50%; } 
	100% 	{ right: 0%; } }

@-o-keyframes outDescription 	{
	0%      { right: 0;	}
	100%	{ right: -50%; }
}
@-ms-keyframes inDescription 	{ 
	0% 		{ right: -50%; } 
	100% 	{ right: 0%; } }

@-ms-keyframes outDescription 	{
	0%      { right: 0;	}
	100%	{ right: -50%; }
}
/****************************/
@keyframes inClose 			{ 
	0% 		{ left: 0; } 
	50% 	{ left: 0; } 
	100% 	{ left: -100px; }
}
@keyframes outClose 		{
	0% 		{ left: -100px;	}
	50% 	{ left: 0; }
	100% 	{ left: 0; }
}
@-webkit-keyframes inClose 			{ 
	0% 		{ left: 0; } 
	50% 	{ left: 0; } 
	100% 	{ left: -100px; }
}
@-webkit-keyframes outClose 		{
	0% 		{ left: -100px;	}
	50% 	{ left: 0; }
	100% 	{ left: 0; }
}
@-moz-keyframes-keyframes inClose 			{ 
	0% 		{ left: 0; } 
	50% 	{ left: 0; } 
	100% 	{ left: -100px; }
}
@-moz-keyframes-keyframes outClose 		{
	0% 		{ left: -100px;	}
	50% 	{ left: 0; }
	100% 	{ left: 0; }
}
@-o-keyframes inClose 			{ 
	0% 		{ left: 0; } 
	50% 	{ left: 0; } 
	100% 	{ left: -100px; }
}
@-o-keyframes outClose 		{
	0% 		{ left: -100px;	}
	50% 	{ left: 0; }
	100% 	{ left: 0; }
}
@-ms-keyframes inClose 			{ 
	0% 		{ left: 0; } 
	50% 	{ left: 0; } 
	100% 	{ left: -100px; }
}
@-ms-keyframes outClose 		{
	0% 		{ left: -100px;	}
	50% 	{ left: 0; }
	100% 	{ left: 0; }
}


