@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none;}
table {border-spacing: 0;}
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 { color:#444;font-weight: normal; font-size: 100%; margin:0; padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}

/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
.wrap{
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	position: relative;
}
h1{
	font-size: 6em;	
}
p{
	font-size: 2em;
}
.intro p{
	width: 50%;
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
}
#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 10px; 
            border-radius: 10px; 
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}

/*  CSS Slider
 * --------------------------------------- */



.contIzq{background: #FFF; display: inline-block;width:48%;opacity: .8;}
.contIzq p{text-align: left;width: 100%;padding: 1%;margin: 1%;}
.contDer{display: inline-block;text-align: left;vertical-align: top;width:39%;}
.contDer img{text-align: center;display: inline-block; vertical-align: top;}





.banner
{
  
  width:100%;
  overflow:auto;
  font-size:18px;
  line-height:24px;
  text-align:center;
  color:rgba(255,255,255,.6);
  text-shadow:0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
  /*background:#5b4d3d;
  box-shadow:0 1px 2px rgba(0,0,0,.25);*/
}


.banner h1,.banner h2
{
  font-size:40px;
  line-height:52px;
  color:#fff;
}

.banner .btn
{
  display:inline-block;
  clear:both;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.4);
  border-radius:5px;
  margin:25px 0 0;
  padding:9px 22px 7px;
}

.banner .btn:hover
{
  background:rgba(255,255,255,.05);
}

.banner .btn:active
{
  -webkit-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -moz-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -ms-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -o-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
}

.banner .btn,.banner .dot
{
  -webkit-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -moz-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -ms-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -o-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  filter:drop-shadow(01px2pxrgba(0,0,0,.3));
}





.unslider{overflow:auto;margin:0;padding:0}
.unslider-wrap{position:relative}
.unslider-wrap.unslider-carousel>li{float:left}
.unslider-vertical>ul{height:100%}
.unslider-vertical li{float:none;width:100%}
.unslider-fade{position:relative}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}
.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}
.unslider-arrow.next{left:auto;right:20px}

.unslider-nav ol {
 	list-style: none;
 	text-align: center;
}
.unslider-nav ol li {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 4px;
	background: transparent;
	border-radius: 5px;
	overflow: hidden;
	text-indent: -999em;
	border: 2px solid #96110d;
	cursor: pointer;
}
.unslider-nav ol li.unslider-active {
	background: #96110d;
	cursor: default;
}




/*  CSS 
 * --------------------------------------- */




.twitter-share-button{
	position: fixed;
	z-index: 99;
	right: 149px;
	top: 9px;
}
#download{
	margin: 10px 0 0 0;
	padding: 15px 10px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
	background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: linear-gradient(top, #5bc0de, #2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
	text-decoration:none;
	color:#fff;
}
#download:hover{
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #2F96B4;
	background-position: 0 -15px;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-ms-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}
#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;	
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}
#examplesList{
	display:none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width:638px;
	text-align:left;
}
#examplesList ul{
	padding:0;
}
#examplesList ul li{
	display:block;
	margin: 5px 0;
}
#examplesList ul li a{
	color: #BDBDBD;
	margin:0;
}
#examplesList ul li a:hover{
	color: #f2f2f2;
}
#examplesList .column{
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3{
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}



/* Demos Menu
 * --------------------------------------- */
 #demosMenu{
	position:fixed;
	bottom: 10px;
	right:10px;
	z-index: 999;
 }



	/* Style for our header texts 
	* --------------------------------------- */
*{border: 0;margin: 0;padding: 0;}
::selection {background: #96110D; color: #FFF;}
::-moz-selection {background: #96110D; color: #FFF;}
a{color: #96110D; text-decoration-line: none;}
a:hover{color: #333;}
	h1{
		font-size: 2.5em;	
		font-family: arial,helvetica;
		font-weight: bold;
		color: #96110D;
		margin:0;
		padding:0;
		text-transform: uppercase;
	}
	.intro p{
		color: #444;
	}
	
	/* Centered texts in each section 
	* --------------------------------------- */
	.section{
		text-align:center;
	}
	/*#section0,
	#section1,
	#section2,
	#section3{
		background-size: cover;
	}*/


	/* Fixed header and footer.
	* --------------------------------------- */
	#header, #footer{
		position:fixed;
		display:block;
		width: 100%;
		z-index:9;
		text-align:center;
		padding: 0;
	}
	
	#header{
		background: #FFF;
		top:0px;
		height: 90px;
		opacity: .85;
	}
	#footer{
		background: #000;
		bottom:0px;
		color: #FFF;
		height: 50px;
		padding: 1em 0 0 0;
	}
	
	/* Bottom menu
	* --------------------------------------- */
	#infoMenu {
		bottom: 80px;
	}
	#infoMenu li a {
		color: #fff;
		z-index: 999;
	}

/* FORM
	* --------------------------------------- */

label{
	float: left;
	margin-right: 1em;
	text-align: right;
	text-shadow: 0px 1px 0px #CCC;
	text-transform: uppercase;
	width: 20%;
}
input, select, textarea {
   background: #F5F5F5;
   border: 1px solid #999;
   color: #888;
   font-family:'titilliumregular',Verdana,Sans-serif;
   font-size: .85em;
   margin-bottom: 1em;
   padding: 5px;
   width: 70%;
}
textarea{height: 100px;}
input:focus, textarea:focus {
	background: #FFF;
	color: #111;
}
input[type=submit]{
	background: -moz-linear-gradient(top, #96110d 0%, #c71b16 90%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96110d), color-stop(90%,#c71b16)); /* webkit */
	-moz-box-shadow: 0px 1px 5px #999;-webkit-box-shadow: 0px 1px 5px #999;box-shadow: 0px 1px 5px #999;
	border: 1px solid #c71b16;
	color: #FFF;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	width: 140px;
}
input[type=submit]:hover {
	border: 1px solid #96110d;
	background: -moz-linear-gradient(top, #c71b16 0%, #96110d 90%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c71b16), color-stop(90%,#96110d)); /* webkit */
	cursor: pointer;
	display: inline-block;
}

/*===================== Estilos para Dispositivos ======================*/
/* Si es mas grande que 768 y mas chico que 959 */
@media only screen and (min-width: 799px) and (max-width: 959px) {
	/* nav */
	#fdw nav ul li{
		/*margin-left:12px;*/
	}
	section#principal{
		padding: 2%;
	}
	.contenedor-img {
		height: 210px;
		width: 340px;
	}
	.contenedor-img .mascara,.contenedor-img .contenido {
		height: 210px;
		width: 340px;
	}
}

@media only screen and (max-width: 800px) {

	section#principal{
		padding: 1%;
	}
	.contIzq, .contDer{
		width: 98%;
	}
	.contIzq iframe{
		height: 150px;
	}


}
@media only screen and (max-width: 600px) {

	.contDer .descargas{margin: 0 auto; width: 400px;}
	.contDer img{
		width: 90%;
	}
	.contIzq iframe{
		height: 110px;
	}
}