@font-face { font-family: 'NewCicleFina'; src: url('fonts/New Cicle Fina.eot'); }
@font-face { font-family: 'NewCicleFina'; src: url('fonts/New Cicle Fina.ttf'); }

* {
	font-size: inherit;
	line-height: 1.2em;
}

.aleft { text-align: left; }
.aright { text-align: right; }
.acenter { text-align: center; }
.fleft { float: left; }
.fright { float: right; }

/* html fill */
html {
	width: 100%;
	height: 100%;
}

/* fondo */
body {
	font-family: NewCicleFina;
	font-size: 21px;
	margin: 0px;
	width: 100%;
	min-height: 100%;
	background: #32B7D8 url(images/bg.jpg) fixed;
	/*background: linear-gradient(to bottom, #36d4fb 0%, #2e61ce 100%) fixed;*/
	background-size: cover;
}

/* enlaces */
a { color: #32B7D8; text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
a.extlink {
	background: url(images/link.png) 1px center no-repeat;
	padding-left: 20px;
}

/* iconos en enlaces */
.aicon {
	background: no-repeat left center;
	padding-left: 29px;
}
.aicon_um { background-image: url(images/aicon_um.png); }
.aicon_inertincindustries { background-image: url(images/aicon_inertincindustries.png); }
.aicon_pdf { background-image: url(images/aicon_pdf.png); }
.aicon_refresh { background-image: url(images/aicon_refresh.png); }

/* full size image div */
.img_fulldiv {
	position: fixed;
	display: block;
	z-index: 100;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7) center center no-repeat;
	background-size: contain;
	opacity: 0.1;
	transition: all 0.15s ease-in-out;
	cursor: not-allowed;
}
.img_fulldiv_inner {
	position: absolute;
	display: block;
	top: 3%;
	bottom: 3%;
	left: 5%;
	right: 5%;
	background: center center no-repeat;
	background-size: contain;
}
.img_fulldiv_visible {
	opacity: 1;
}

/* página */
.page {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	/*min-width: 400px;
	min-height: 550px;*/
}

/* título */
.title {
	position: absolute;
	left: 20px;
	top: 10px;
	background: url(images/orly.png) no-repeat;
	height: 100px;
	padding-left: 90px;
}
.title h1 {
	margin: 0px;
}
.title h1 a {
	color: #FFF;
	font-size: 48px;
	font-weight: normal;
	text-decoration: none;
}
.title h2 {
	color: #FFF;
	font-size: 20px;
	font-weight: normal;
	margin: 0px;
	margin-top: -10px;
}

.newalert {
	border: 0;
}

/* cara xD */
.face {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 150px;
	height: 180px;
}

/* menu */
.menu {
	position: absolute;
	left: 12px;
	bottom: 32px;
	width: 174px;
}
.menu ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menu li a {
	display: block;
	padding: 9px 12px;
	color: #FFF;
	white-space: nowrap;
	font-size: 28px;
	text-decoration: none;
	text-align: center;
	transition: all 0.2s ease-in-out;
}
.menu li a.active,
.menu li a:hover {
	background: #222;
	transition: all 0.1s ease-in-out;
}
.menu li a.menu_projects.active,    .menu li a.menu_projects:hover    { background: rgba(220,0,0,0.8); }
.menu li a.menu_programming.active, .menu li a.menu_programming:hover { background: rgba(0,40,220,0.8); }
.menu li a.menu_electronics.active, .menu li a.menu_electronics:hover { background: rgba(220,40,220,0.8); }
.menu li a.menu_about.active,       .menu li a.menu_about:hover       { background: rgba(140,220,0,0.8); }
.menu li a.menu_contact.active,     .menu li a.menu_contact:hover     { background: rgba(220,180,0,0.8); }

/* cuerpo de la página */
.body {
	position: absolute;
	left: 200px;
	top: 140px;
	right: 28px;
	bottom: 32px;
	background: #FFF;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.7);
}

/* selectores */
.selectors {
	position: absolute;
	top: -40px;
	z-index: 1;
}
.selector {
	position: relative;
	float: left;
	margin-left: -25px;
	padding: 25px 30px;
	background: #32C1E1;
	text-decoration: none;
	color: #FFF;
	transition: all 0.2s ease-in-out;
	box-shadow: 0px 5px 5px rgba(0,0,0,0.7);
	font-size: 26px;
	z-index: 0;
}
a.selector_p {
	transform: rotate(-12deg);
	-ms-transform: rotate(-12deg);
	-webkit-transform: rotate(-12deg);
}
a.selector_i {
	transform: rotate(12deg);
	-ms-transform: rotate(12deg);
	-webkit-transform: rotate(12deg);
}
a.selector:hover {
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: #5FD1EB;
	z-index: 2;
	text-decoration: none;
}
.selector_a,
a.selector_a,
a.selector_a:hover {
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	background: #222;
	z-index: 1;
}

/* scroller */
.scroll {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	overflow: auto;
}

/* contenido general */
.general { margin: 50px 20px 20px 20px; }

/* kernel */
.clear { clear: both; }
.div5 { float: left; width: 5%; min-height: 1px; }
.div10 { float: left; width: 10%; min-height: 1px; }
.div15 { float: left; width: 15%; min-height: 1px; }
.div20 { float: left; width: 20%; min-height: 1px; }
.div25 { float: left; width: 25%; min-height: 1px; }
.div30 { float: left; width: 30%; min-height: 1px; }
.div35 { float: left; width: 35%; min-height: 1px; }
.div40 { float: left; width: 40%; min-height: 1px; }
.div45 { float: left; width: 45%; min-height: 1px; }
.div50 { float: left; width: 50%; min-height: 1px; }
.div55 { float: left; width: 55%; min-height: 1px; }
.div60 { float: left; width: 60%; min-height: 1px; }
.div65 { float: left; width: 65%; min-height: 1px; }
.div70 { float: left; width: 70%; min-height: 1px; }
.div75 { float: left; width: 75%; min-height: 1px; }
.div80 { float: left; width: 80%; min-height: 1px; }
.div85 { float: left; width: 85%; min-height: 1px; }
.div90 { float: left; width: 90%; min-height: 1px; }
.div95 { float: left; width: 95%; min-height: 1px; }
.div100 { float: left; width: 100%; min-height: 1px; }

/* sección */
.section { display: none; }
.section h3 { display: none; }

/* lista de enlaces */
.ullinks {
	list-style-type: none;
	padding: 0px;
	padding-left: 40px;
}
.ullinks li a,
.ullinks li span {
	padding-left: 20px;
}
.ullinks li a {
	background: url(images/link.png) no-repeat 0px;
}

/* idiomas */
.idiomas {
	z-index: 10;
	display: flex;
	position: absolute;
	list-style-type: none;
	top: 48px;
	right: 20px;
	border-top: 0px solid #EEE;
	border-bottom: 0px solid #EEE;
}
.idiomas:hover {
	overflow: inherit;
}
#idiomas {
	position: relative;
	top: 0px;
	border: 0px solid #EEE;
}
.idiomas:hover #idiomas {
	/*box-shadow: 0px 2px 3px rgba(0,0,0,0.2);*/
}
.idioma {
	display: block;
	cursor: default;
	padding: 3px 6px 3px 26px;
	background: 6px center no-repeat;
	overflow: hidden;
	color: #FFF;
	text-decoration: none;
	font-size: 24px;
	border-bottom: 1px solid transparent;
	cursor: pointer;
}
.idioma:hover {
	background-color: #000;
	text-decoration: none;
}
.idioma_actual {
	border-color: rgba(255,255,255,0.5);
}

/* contacto */
.contact_table th {
	width: 1px;
	white-space: nowrap;
	text-align: right;
	vertical-align: top;
	font-weight: normal;
	color: #666;
	padding-top: 6px;
}

/* vista móvil */
@media (max-width: 1000px) {

	body {
		font-size: 16px;
	}

	.general {
		margin-top: 30px;
	}

	.selector {
		padding: 14px 17px;
		font-size: 16px;
		min-width: 36px;
	}

	.title {
		background-size: 40px 50px;
		padding-left: 50px;
	}
	.title h1 a {
		font-size: 25px;
	}
	.title h2 {
		margin-top: -4px;
		font-size: 17px;
	}

	.idiomas {
		top: 22px;
	}
	.idioma {
		font-size: 15px;
	}

	.menu {
		position: relative;
		left: 12px;
		top: 65px;
		right: 12px;
	}
	.menu ul {
		display: flex;
		justify-content: space-between;
		flex: 1;
	}
	.menu li a {
		font-size: 14px;
		padding-left: 3px;
		padding-right: 3px;
	}
	.body {
		position: absolute;
		left: 28px;
		top: 150px;
		right: 8px;
		bottom: auto;
		margin-bottom: 12px;
		min-height: 300px;
	}

	.scroll {
		position: relative;
		top: initial;
		left: initial;
		bottom: initial;
		right: initial;
		overflow: auto;
	}

	.face {
		display: none;
	}

	.aicon {
		background-size: 16px 16px;
		padding-left: 20px;
	}
	a.extlink {
		background-size: 14px 14px;
	}


}