/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Start Custom Css */

html {background: #fff url(images/bg_gradient.jpg) repeat-x top;}

body {font-family: "Titillium Web", Verdana, sans-serif;
	font-size: 1em;
	font-weight: 300;
	line-height: 1.5em;	
	}

/* Divs */

#phylosophy {margin: 0px auto;
			padding: 28px 0;
			width: 86%;
			}

#slider {margin: 50px auto 30px;
		overflow: inherit;
		width: 89%;  /* 996 / 1039  */
		}

.fix {content: ""; clear: both;}

#slider-mask img {display: none; position: absolute; height: 45%;}

#header {border-bottom: solid 2px #999; z-index: 1;}

#logo {display: inline-flexbox;}

#logo img {width: 28%; min-width: 286px; float: left; margin: 0 0 28px 0;}

#welcome {margin: 30px auto 60px;}

#footer {background: #333 url(images/footer_light.png) no-repeat top center;}

#content {margin: 30px auto;
		overflow: hidden;
		width: 95.8614051973051%;  /* 996 / 1039  */
		}	

#content #main {float: left;
			width: 63.2690763052209%;} /* 670 / 996 */

#content #aside {float: right;
			padding: 3% 1%; /* 30 / 326 */
			width: 32.730923%;} /* 326 / 996 */

#aside {text-align: center;}

#aside img {max-width: 100%;}

#content img {width: 100%;}

figcaption {margin-bottom: 2em;}

img.shadow {width: 100%; text-align: center;}

img.shadowed {width: 100%; text-align: center;}

img.frame {margin: 30px auto 0;
	width: 100%;}

/* Tipografía */

p {
	margin-bottom: 56px;
	line-height: 2.1em;
}

em {text-transform: italic;}

#welcome h1, #welcome h2 {text-align: center;
	margin: 0 auto;} 

#welcome h1, h2.values {color: #666;
	font-family: "Titillium Web", sans-serif;
	font-weight: 700;
	font-size: 2.2em;
	line-height: 1.4;}

#welcome h2 {color: #bfbfbf; letter-spacing: .1em;}

#welcome h1 span {color: #FC7A11;}

h1, h2 {color: #808080;
	font-family: "Electrolize",	sans-serif;
	font-size: 1.8em;
	text-transform: uppercase;
	}

#main h1 {background: url(images/bullet.png) no-repeat left;
		border-bottom: 1px #fc7a11 solid;
		margin: 0 0 1em;
		padding: 0.2em 0 4px 28px;}

ul.srvcs-lst {padding-left: 2em; list-style: square;}

ul.srvcs-lst li {line-height: 2;}

li a {text-decoration: none;}

#footer h3, #footer p {display: block; color: #b2b2b2;}

#footer h3 {border-bottom: 1px solid;
	text-transform: uppercase;
	padding-right: 8%;
	font-size: 0.7em;
}

.azl {color: #1E94D4;}
.cyn {color: #7BDEFB;}
.nrj {color: #FC7A11;}
.ylw {color: #F9D770;}
.vrd {color: #0DC0AD;}
.gry {color: #333}

.gry, .azl, .cyn, .nrj, .ylw, .vrd {font-weight: 700; margin: 0 1px;}

#logo h1 {display: none;}

.home {font-size: 120%;}

.textshadow {}

/* Menu */

#menu {background: #fff;
		display: inline-block;
		float: right;
		line-height: 100%;
		margin: 20px 0;
		padding: 5px 1px 0;
		overflow: visible;

		border-radius: 15px;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;

		-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .2);
		-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .2);
		}

#menu li {margin: 0 6px;
			padding: 0 0 6px;
			float: left;
			position: relative;
			text-align: center;
			border-radius:5px; /*some css3*/
	    	-moz-border-radius:5px;
	 	   -webkit-border-radius:5px;
		}



#menu a {color: #666;
	text-decoration: none;
	display: block;
	padding: 2px 8px;
			border-radius:9px; /*some css3*/
    		-moz-border-radius:9px;
			-webkit-border-radius:9px;
}

/* selected menu element */

#menu .activo a, #menu li:hover > a {
	background:#FC7A11;
	color: #fff;
}

#menu li a:hover {
    background:#;
    color:#fff;
    border-radius:6px; 
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
}

#menu li:hover {color: #000;}

#menu a {display: block;}

#menu li:hover > ul {opacity: 1;
	visibility: visible;
	overflow: visible;
	z-index: 16;
}

/* Sublevels */

#menu ul li:hover a, #menu ul li:hover li a {
	background: none;
	border: 0;
	color: #fff;}

#menu ul li a:hover {
    background:#666;
    color:#fff;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;

}

/* DropDown */

#menu li:hover > ul {
    opacity:1;
    display: table;    	
}	

/* Fondo del SubElemento */

#menu ul {
    opacity:0;
    visibility:hidden;
    padding: 4px;
    width: inherit;
    position:absolute;
    margin: 9px 0 0;
    color: #fff;
    background:#bbb;
    border:0;
    z-index: 16;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    transition: opacity .7s linear, visibility .1s linear .1s;
    -moz-transition: opacity .7s linear, visibility .1s linear .1s;
    -webkit-transition: opacity .7s linear, visibility .1s linear .1s;
    -o-transition: opacity .7s linear, visibility .1s linear .1s;
    
}

.tri {width: 0; 
   height: 0; 
   position: absolute;
   top: -7px;
   left: 50%;
   margin-left: -9px;	
   border-bottom: 9px solid #bbb; 
   border-left: 9px solid transparent; 
   border-right: 9px solid transparent; 
}

#menu ul li {float: none;
	margin: 0;
	width: inherit;
	cursor: pointer;
	display: table; }

#menu li ul li a {padding: 3px;}

#menu li ul li:last-child {
 padding-bottom: 0px;
}


/* Footer */

#footer-wrap {width: 86%; margin: 0 auto; overflow: hidden; padding: 1% 0;}

.social {float: left; width: 40%;}

.legal {float: right; width: 30%;}

.social li {display: inline; margin: 2%; padding: 0; float: left;}

.social li:first-child {margin-left: 0;}

.legal img {position: relative; float: right; margin: 3%; top: 4px;}

.legal ul {margin: 4% 0 0;}

.legal li {color: #b2b2b2; text-align: right; font-size: .8em; line-height: 1.2;}

/* Form */

form {position: relative;}

input {
	background: #333;
	color: #fff;
	border: none;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding-left: 4px;
	width: 70%;
	height: 22px;
}

input:focus {outline: none;}

.inputbg {background: #FC7A11;
	padding: 6px 8px;
	margin: 9px 0;
	display: table;
	width: 90%;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

label {color: #fff;
	font-size: 17px;
	display: inline-block;
	margin-right: 4%;
	text-align: right;
	text-transform: uppercase;
	width: 24%;
}

/*Animacion*/

@-webkit-keyframes moveUp{
	0% { 
		-webkit-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveUp{
	0% { 
		-moz-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveUp{
	0% { 
		-o-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveUp{
	0% { 
		-ms-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveUp{
	0% { 
		transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}

#aside img, #aside figcaption {
	-webkit-animation: moveUp 0.9s ease-in-out 0.3s;
	-moz-animation: moveUp 0.9s ease-in-out 0.3s;
	-o-animation: moveUp 0.9s ease-in-out 0.3s;
	-ms-animation: moveUp 0.9s ease-in-out 0.3s;
	animation: moveUp 0.9s ease-in-out 0.3s;
}

/* Query */

@media screen and (max-width: 480px) {
	#phylosophy {
		margin: 0px auto;
		width: 86%;
		padding: 28px;
	}

	#menu {width: inherit;}

	#menu li {width: 44%; float: left;}

	#menu ul {width: inherit; z-index: 16; display: table;}

	#slider-wrapper, #slider, .nivo-controlNav, .shadow {
		display: none;
		}

	#content #main {width: 100%; float: none; margin-bottom: 35px;}

	#content #aside {width: 100%; float: none;}

	#welcome h1, #welcome h2 {font-size: 1.2em;
		letter-spacing: 0;
	}

	#footer-wrap {padding: 20px 0;}

	.social, .legal {float: none; width: 100%;}

	.legal {margin-top: 75px;}

	.legal li {text-align: left;}

	.legal img {float: left;}

	.shadow {display: none;}

	label {font-size: 13px;}

	h1, h2 {font-size: 1.3em;}
}