@charset "utf-8";
/* CSS Document */

body{
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
}

header{
width:100%;
height:50PX;
background:#2D65AE;
margin-top:10px;
display:flex;
}
	
#btn-menu {
display:none; 
}

header label {
	width:30px;
	height:30px;
	padding:10PX;
	border-right:1px solid #FFF;
	display:none;
	}

header label:hover {
	
	cursor:pointer;
	background-color:#006;
	}
	
	.menu ul{
		margin:0;
		list-style:none; /*quitamos los estilos de listas*/
		padding:0;
		display:flex; /*crea cajas flexibles*/
		}
		
		.menu ul ul{
			
			position:absolute;
				top:60PX;
				display:block;
				background:#2D65AE;
				transform:translateX(60%);
				opacity:0;
				transition:all 0.9S;
			}
		
		.menu UL LI:HOVER UL {
				opacity:1;
				transform:translateX(0%);
						
				}
				
	.menu li{
		border-right:1px solid #FFF;
	}
	
		.menu li:hover {
		background:rgba(0,0,0,0.3);
	border-bottom:3px solid #FF0;
    transition:all 0.9s linear; 

		}
		.menu li a {
			display:block;
			padding:15px 20px;
			color:#FFF;
			text-decoration:none;
			}
			
				
			#fotoportada{
			width:100%;
			}
			
			
			@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?i226ha');
  src:  url('fonts/icomoon.eot?i226ha#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?i226ha') format('truetype'),
    url('fonts/icomoon.woff?i226ha') format('woff'),
    url('fonts/icomoon.svg?i226ha#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-youtube:before {
  content: "\ea9d";
}

html {
	font-size: 16px;
}

.social-bar {
	position: fixed;
	right: 0;
	top: 35%;
	font-size: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 100;
}

.icon {
	color: white;
	text-decoration: none;
	padding: .7rem;
	display: flex;
	transition: all .5s;
}

.icon-facebook {
	background: #2E406E;
}

.icon-twitter {
	background: #339DC5;
}

.icon-youtube {
	background: #E83028;
}

.icon-instagram {
	background: #3F60A5;
}

.icon:first-child {
	border-radius: 1rem 0 0 0;
}

.icon:last-child {
	border-radius: 0 0 0 1rem;
}

.icon:hover {
	padding-right: 3rem;
	border-radius: 1rem 0 0 1rem;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
}