body,div,
h1,h2,p,
ol,ul,li {
  margin: 0;
  padding: 0;
  border: 0;
}
@font-face {
font-family: CaviarDreams;
/*src: url(../font/caviar/CaviarDreams_Bold.ttf);*/
src: url(../font/comfortaa/Comfortaa-Bold.ttf )format('truetype'),
	 url(../font/comfortaa/Comfortaa-Bold.eot),
	 url(../font/comfortaa/Comfortaa-Bold.woff)
/*src: url(../font/rondalo/Rondalo.ttf)*/
}
body {
	background-color: #053a58;
	font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #fff;
	text-rendering: optimizelegibility;
	
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	
	-moz-tap-highlight-color:rgba(0,0,0,0); 
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;
	
	-ms-tap-highlight-color:rgba(0,0,0,0); 
	-ms-text-size-adjust: none;
	-ms-font-smoothing: antialiased;
}
.logo{
	width:50px;
	top:8px;
	left:150px;
	position:absolute;
	}
a {text-decoration: none;}

.container {
	overflow: hidden;
	background-color: #000;

/*  Prevents Flickering  */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}
nav li a.active {
	color: #fff;
	background-color: #084e76;
	border-radius:2px;
	-webkit-box-shadow: 2px 1px 5px #262626;
	-moz-box-shadow: 2px 1px 5px #262626;
	filter: shadow(color=#262626, direction=135, strength=2);
}

header {
	height: 70px;
	position: relative;
	background-color: #053a58;
}
header h1 {
	color: #fff;
	text-align: left;
	font-size: 30px;
	line-height: 60px;
	font-weight: bold;
	padding-left: 20px;
}
@font-face {
font-family: CaviarDreams;
/*src: url(../font/caviar/CaviarDreams_Bold.ttf);*/
src: url(../font/comfortaa/Comfortaa-Bold.ttf )format('truetype'),
	 url(../font/comfortaa/Comfortaa-Bold.eot),
	 url(../font/comfortaa/Comfortaa-Bold.woff)
/*src: url(../font/rondalo/Rondalo.ttf)*/
}
header div{
	padding-left:20px;
	font-size:30px;
	text-align:center;
	}
#Cliente{
	position:relative;
	top:-50px;
	line-height:60px;
	font-family: Arial, Helvetica, sans-serif;
	color:#fff;
	letter-spacing:5px;
	font-size:22px;
	text-shadow:0 1px 1px rgba(255,255,255,0.50);
	text-transform:uppercase;
	}
.burger {
	position: absolute;
	float: left;
	padding: 10px;
	top: 4px;
	left: 10px;
	display: none;
}
.burger li {
	width: 30px;
	height: 4px;
	background-color: #fff;
	border-radius: 3px;
	margin: 5px 0;
}
.burger.open li {background-color: #d9dde1;}

nav {
	position: absolute;
	top: 0;
	right: 40px;
}
nav li {
	float: left;
	
	display: inline-block;
}
nav li a {
	font-size: 14px;
	color: #fff;
	padding: 24px 15px;
	display: block;
}
nav li a:hover {color: #24bb27;}




/*  Removable CSS  */

.header-section,
.body-section,
.footer-section 
{padding: 20px;}
/*---- head ----*/
.header-section { 
	background-position:right; 
	background-color: #fff;
	background-image:url(../image/img.jpg);
	background-size:600px;
	background-repeat:no-repeat;
	}
#imgIExplorer{
	display:none;
	width:500px;
	float:right;
	}

.conteHeader{
	font-family:Arial, Helvetica, sans-serif;
	padding-top:70px;
	padding-left:50px;
	line-height:35px;
	color:#454444;
	}
.conteHeader #title{
	padding-left:0;
	font-size:30px;
	font-weight:bold;
	line-height:60px;
	color:black;
	}
.conteUpload{
	font-family:Arial, Helvetica, sans-serif;
	padding-top:70px;
	padding-left:50px;
	line-height:35px;
	color:#454444;
	}
.datosUsuarioMovil{
	display:none;
	}	
.datosUsuario{
	color:#000;
	position:absolute;
	top:74px;
	right:10px;
	}
.datosUsuario li{
	padding-left:20px;
	padding-top:10px;
	float:left;
	color:#006;
	font-size:13px;
	/*font-weight:bold;
	text-transform:uppercase;*/
	}
/*.datosUsuario li a img{
	height:25px;
	padding-right:6px;
	}*/
.datosUsuario li #sesion{
	cursor:pointer;
	}
.datosUsuario li #sesion:hover{
	color:#093;
	}
.conteHeader li{
	font-size:18px;
	font-family:CaviarDreams;
	padding-left:20px;
	}
#link a{
	cursor:pointer;
	font-weight:bold;
	color:green;
	}
#link a:hover{
	color:#000;
	}
/*---- Body ----*/
.body-section {
	background-color:#e5e5e5;
	text-align:center;
	padding-top:35px;
	}
.body-section ul {
	text-align:center;
	}
body .body-section {
	color:black;
	font-size: 30px;
	}
.item{
	position:relative;
	top:10px;
	left:0px;
	line-height:30px;
	font-size: 16px;
	}
/* ---- Footer ----*/
.footer-section {
	background-color:#053a58;
	}
.footer-section ul {
	padding-top:20px;
	list-style:none !important;
	}

.placefiller {
	 list-style-type:none !important;
	text-align: center;
	font-size: 13px;
	/*border: 1px dashed rgba(190, 196, 202, 0.5);*/
}

.header-section .placefiller {}
.body-section .placefiller {line-height:300px;}
.footer-section .placefiller {
	line-height: 40px;
	/*border: 1px dashed rgba(190, 196, 202, 0.9);*/
}
.placefiller li a{
	color:#fff;
	}
.placefiller li a:hover{
	color:#24bb27;
	}
@media only screen and (max-width: 1250px) {
.header-section {  
	background-size:300px;}
}
@media only screen and (max-width: 1024px) {
.header-section { 
	background-position:top; 
	background-size:200px;
	}
}

@media only screen and (max-width: 780px) {
#Cliente{
	color:#fff;
	font-size:10px;
	top:-40px;
	left:20px;
	}
.datosUsuario{
	display:none;
	}
.datosUsuarioMovil{
	display:block;
	}
.datosUsuarioMovil a div{
	width:190px;
	}
.datosUsuarioMovil a div ul{
	text-align:center;
	}
.datosUsuarioMovil a div ul li{
	padding:0;
	margin:0;
	}
.datosUsuarioMovil a div ul li span{
	font-size:12px;
	}
.datosUsuarioMovil a div ul li img{
	height:50px;
	}

#divUsuario {
	background:#053a58;
	height:16px;
	letter-spacing: 3px;
	font-size: 12px;
	padding: 22px 25px;
}
#divUsuario ul{
	
	}
#divUsuario ul li{
	box-sizing:border-box;
	z-index:12;
	height:16px;
	display:inline-block;
	padding-right:10px;
	text-transform:uppercase;
	
	}

#divUsuario ul li img{
	height:16px;
}
.logo{
	position:absolute;
	left:80%;
	}
.header-section { 
	background-position:top; 
	background-size:150px;}
header {
	height: 60px;
	z-index: 2;
	background-color: #053a58;
	/*060a0c*/
	
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	
		/* starting point */
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
header h1 {
	color: #ffffff;
	text-align: center;
	padding-left: 0;
	display: block;
}

.burger {display: block;}


/*  Nav Drawer Layout  */
nav {position: relative;}

nav ul {
	height: 100%;
	overflow-y: auto;
}
nav li {
	display: block;
	float: none;
}
nav li a {
	padding: 22px 25px;
	letter-spacing: 3px;
	font-size: 14px;
}
nav li a.logo {
	display: none;
}
nav li a.active {
	color: #fff;
	background-color: #606364;
	-webkit-box-shadow: 2px 1px 5px #4c4d4c;
}
nav li a:hover {
	color: #fff;
	background-color: #606364;
}
nav li:first-child a.active,
nav li:first-child a:hover 
{border-radius: 10px 0 0 0;}

.header-section {margin-top: 60px;}


/* NAVIGATION ANNIMATION */
nav {
	width: 93%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	background-color: #555657;
	border-radius: 8px;
	
	/* starting point */
	opacity: .3;
	-webkit-transform: translate3d(5%,0,0)scale(.97);
	-moz-transform: translate3d(5%,0,0)scale(.97);
	transform: translate3d(5%,0,0)scale(.97);
}

/*Nav Expanding Open Effect*/
nav.open {
	opacity: 1;

	-webkit-transform: translate3d(0,0,0)scale(1);
	-webkit-animation: slideIn .35s ease-in-out;
	
	-moz-transform: translate3d(0,0,0)scale(1);
	-moz-animation: slideIn .35s ease-in-out;
	
	transform: translate3d(0,0,0)scale(1);
	animation: slideIn .35s ease-in-out;
}
@-webkit-keyframes slideIn {
	0%       {opacity: .3;
				-webkit-transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				-webkit-transform: translate3d(0,0,0)scale(1);}
}
@-moz-keyframes slideIn {
	0%      {opacity: .3;
				-moz-transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				-moz-transform: translate3d(0,0,0)scale(1);}
}
@keyframes slideIn {
	0%      {opacity: .3;
				transform: translate3d(5%,0,0)scale(.97);}
	100%  {opacity: 1;
				transform: translate3d(0,0,0)scale(1);}
}

/*Nav Shrinking Closed Effect*/
nav.close {
	opacity: .3;
	
	-webkit-transform: translate3d(5%,0,0)scale(.97);
	-webkit-animation: slideOut .3s ease-in-out;
	
	-moz-transform: translate3d(5%,0,0)scale(.97);
	-moz-animation: slideOut .3s ease-in-out;
	
	transform: translate3d(5%,0,0)scale(.97);
	animation: slideOut .3s ease-in-out;
}
@-webkit-keyframes slideOut {
	0%      {opacity: 1;
				-webkit-transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: .3;
				-webkit-transform: translate3d(5%,0,0)scale(.97);}
}
@-moz-keyframes slideOut {
	0%      {opacity: 1;
				-moz-transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: .3;
				-moz-transform: translate3d(5%,0,0)scale(.97);}
}
@keyframes slideOut {
	0%      {opacity: 1;
				transform: translate3d(0,0,0)scale(1);}
	100%  {opacity: .3;
				transform: translate3d(5%,0,0)scale(.97);}
}



/* CONTENT ANNIMATION */
.content {
	/* starting point */
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	z-index: 1;
}

/*Content Sliding Open Effect*/
header.open,
.content.open 
{   
	-webkit-transform: translate3d(240px,0,0);
	-webkit-animation: open .5s ease-in-out;
	
	-moz-transform: translate3d(240px,0,0);
	-moz-animation: open .5s ease-in-out;
	
	transform: translate3d(240px,0,0);
	animation: open .5s ease-in-out;
}
@-webkit-keyframes open {
	0%      {-webkit-transform: translate3d(0,0,0);}
	70%    {-webkit-transform: translate3d(260px,0,0);}
	100%  {-webkit-transform: translate3d(240px,0,0);}
}
@-moz-keyframes open {
	0%      {-moz-transform: translate3d(0,0,0);}
	70%    {-moz-transform: translate3d(260px,0,0);}
	100%  {-moz-transform: translate3d(240px,0,0);}
}
@keyframes open {
	0%      {transform: translate3d(0,0,0);}
	70%    {transform: translate3d(260px,0,0);}
	100%  {transform: translate3d(240px,0,0);}
}

/*Content Sliding Closed Effect*/
header.close,
.content.close 
{
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation: close .3s ease-in-out;
	
	-moz-transform: translate3d(0,0,0);
	-moz-animation: close .3s ease-in-out;
	
	transform: translate3d(0,0,0);
	animation: close .3s ease-in-out;
}
@-webkit-keyframes close {
	0%      {-webkit-transform: translate3d(240px,0,0);}
	100%  {-webkit-transform: translate3d(0,0,0);}
}
@-moz-keyframes close {
	0%       {-moz-transform: translate3d(240px,0,0);}
	100%  {-moz-transform: translate3d(0,0,0);}
}
@keyframes close {
	0%       {transform: translate3d(240px,0,0);}
	100%  {transform: translate3d(0,0,0);}
}

}
/*ANIMACION*/
.caja_animada{
	-webkit-animation: 3s bote 1;
  	-moz-animation: 3s bote 1;
  	animation: 3s bote 1;
}


@-moz-keyframes bote {
  0%{top:-280px; 
  -moz-transform: translateY(-280px);
	  }
  25%{top:8px;
  	-moz-transform: translateY(0);
	  }
  37.5% {
    -moz-transform: translateY(-20px);
  }	
  50%{
    -moz-transform: translateY(0);
  }
  62.5% {
    -moz-transform: translateY(-15px);
  }
  75% {
    -moz-transform: translateY(0);
  }
  87.5% {
    -moz-transform: translateY(-7px);
  }
  100% {
    -moz-transform: translateY(0);
  }
}
@-webkit-keyframes bote {
  0%{top:-280px; 
  -webkit-transform: translateY(-280px);
	  }
  25%{top:8px;
  	-webkit-transform: translateY(0);
	  }
  37.5% {
    -webkit-transform: translateY(-20px);
  }	
  50%{
    -webkit-transform: translateY(0);
  }
  62.5% {
    -webkit-transform: translateY(-15px);
  }
  75% {
    -webkit-transform: translateY(0);
  }
  87.5% {
    -webkit-transform: translateY(-7px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bote {
  0%{top:-280px; 
  	transform: translateY(-280px);
	  }
  25%{top:8px;
  	transform: translateY(0);
	  }
  37.5% {
    transform: translateY(-20px);
  }	
  50%{
    transform: translateY(0);
  }
  62.5% {
    transform: translateY(-15px);
  }
  75% {
    transform: translateY(0);
  }
  87.5% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0);
  }
}
.conteHeader{
	-moz-animation: 2s desplazar 1;
	-moz-animation-timing-function: ease-out;
	animation: 2s desplazar 1;
	animation-timing-function: ease-out;
	}
.text1{
	-webkit-animation: .5s desplazar 1;
	-webkit-animation-timing-function: ease-out;
}
.text2{
	-webkit-animation: 1s desplazar 1;
	-webkit-animation-delay:.5s;
	-webkit-animation-timing-function: ease-out;
}
.text3{
	-webkit-animation: 1s desplazar 1;
	-webkit-animation-delay:1.0s;
	-webkit-animation-timing-function: ease-out;
}
.text4{
	-webkit-animation: 1s desplazar 1;
	-webkit-animation-delay:1.0s;
	-webkit-animation-timing-function: ease-out;
  	
}
@-webkit-keyframes desplazar {
  0%{
  -webkit-transform: translateX(-1080px);
	  }
  100% {
    -webkit-transform: translateX(0);
	
  }
}
@-moz-keyframes desplazar {
  0%{
  -moz-transform: translateX(-1080px);
	  }
  100% {
  -moz-transform: translateX(0);
	
  }
}
@keyframes desplazar {
  0%{
  transform: translateX(-1080px);
	  }
  100% {
  transform: translateX(0);
	
  }
}